Commit 474192f2 by 叶富雄

Merge remote-tracking branch 'origin/dev_xzeq' into dev_xzeq

parents bfff4bb9 877b7091
......@@ -523,10 +523,10 @@
</el-row>
<!--表格-->
<!-- v-loading="tableLoading"
element-loading-text="拼命加载中" -->
<el-table
id="ajzbQuery"
v-loading="tableLoading"
element-loading-text="拼命加载中"
:key="key"
ref="itsmDataTable"
:data="tableData"
......
/*
* @Author: your name
* @Date: 2021-08-31 14:40:49
<<<<<<< HEAD
* @LastEditTime: 2021-11-23 18:47:24
=======
* @LastEditTime: 2021-11-22 17:04:36
>>>>>>> 87f9fe66c22f1685b150e85197ddf85ea5c778c6
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\index.js
......@@ -60,6 +64,7 @@ Vue.use(VueRouter);
const mainRouters = [
...indexRoutes,
rwddRoutes,
zdxxRoutes,
sfRoutes,
xxtkRoutes,
......
/*
* @Author: your name
* @Date: 2021-11-22 18:11:14
* @LastEditTime: 2021-11-23 13:28:50
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\router\modules\rwddzx.js
*/
import menuLayout from "@/layout/menuLayout.vue";
const menuLayouts = [
{
path: "/yxbb",
name: "yxbb",
meta: {
title: '运行报表'
},
component: () => import("@/views/rwddzx/yxbb/index.vue")
},
{
path: "/rwgl",
name: "rwgl",
meta: {
title: '任务管理'
},
component: () => import("@/views/rwddzx/rwgl/index.vue")
},
{
path: "/editRwglrwxx",
name: "editRwglrwxx",
meta: {
title: '任务管理信息',
isAdd: true,
},
component: () => import("@/views/rwddzx/rwgl/editRwglrwxx.vue")
},
{
path: "/ddrz",
name: "ddrz",
meta: {
title: '调度日志'
},
component: () => import("@/views/rwddzx/ddrz/index.vue")
},
{
path: "/zxqgl",
name: "zxqgl",
meta: {
title: '执行器管理'
},
component: () => import("@/views/rwddzx/zxqgl/index.vue")
},
];
export default {
path: "/right",
component: menuLayout,
children: [...menuLayouts]
};
\ No newline at end of file
<template>
<div id="formCommonPage">
<div class="formContent" style="margin-top: 20px">
<div style="margin: 0px auto; border-radius: 8px">
<div class="groupTitleBox">
<span class="groupTitle">{{ propTitle }}</span>
</div>
<el-form
ref="formLabelAlign"
label-position="right"
label-width="120px"
:model="formLabelAlign"
style="margin-bottom: 40px"
>
<div
class="paneGroupDiv"
v-for="groupItem in propFormField"
:key="groupItem.index"
>
<div
v-if="
groupItem.title != '法律文书' ||
(groupItem.title == '法律文书' && groupItem.showPage == true)
"
>
<div class="subTitle" v-if="groupItem.title">
<div>{{ groupItem.title }}</div>
</div>
<div class="zdyLine">
<el-form-item
:rules="rules[item.id]"
:label="
item.type && item.type != 'checkboxBotton'
? item.name
: ' '
"
v-for="item in groupItem.data"
:key="item.id"
:prop="item.id"
:ref="item.id"
:label-width="
item.type && item.type != 'checkboxBotton' ? '120px' : '0px'
"
:style="item.style"
:class="'item' + item.col"
>
<!--普通输入框(附带提取功能——可选)-->
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
v-if="item.type == 'text'"
:disabled="item.disabled"
:class="item.input"
>
</el-input>
<div
v-if="item.type == 'textTq'"
style="display: flex; align-items: center"
>
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
:class="item.input"
>
<template slot="append"
><span @click="ajTq(formLabelAlign[item.id])"
>提取</span
></template
>
</el-input>
</div>
<div
v-if="item.type == 'textTk'"
style="display: flex; align-items: center"
>
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
:class="item.input"
@focus="ajFocus(formLabelAlign[item.id])"
>
</el-input>
</div>
<div
v-if="item.type == 'textXk'"
style="display: flex; align-items: center"
>
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
:class="item.input"
>
</el-input>
<el-button
type="info"
size="mini"
style="margin-left: 5px; margin-right: 0 !important"
@click="xkDetail(formLabelAlign[item.id])"
>勘验详情</el-button
>
</div>
<div
v-if="item.type == 'textDialog'"
style="display: flex; align-items: center"
>
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
:class="item.input"
>
<template slot="append"
><span @click="choosePeople(item.id)"
>选择</span
></template
>
</el-input>
</div>
<!--计数-->
<el-input-number
v-model="formLabelAlign[item.id]"
:min="1"
:max="10"
v-else-if="item.type == 'number'"
:disabled="item.disabled"
>
</el-input-number>
<!--输入框-最大值与最小值-->
<div
class="zdyInputW zdyInputCol2"
v-else-if="item.type == 'zdyText'"
>
<el-input
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
>
</el-input>
<el-input
:placeholder="item.placeholder2"
v-model="formLabelAlign[item.id]"
>
</el-input>
</div>
<!--文本域-->
<el-input
style="height: 100px"
type="textarea"
:autosize="autosize"
:rows="item.rows ? item.rows : 10"
:placeholder="item.placeholder"
v-model="formLabelAlign[item.id]"
v-else-if="item.type == 'textarea'"
:disabled="item.disabled"
>
</el-input>
<!--日期框区间-->
<el-date-picker
v-model="formLabelAlign[item.id]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
v-else-if="item.type == 'datearea'"
:disabled="item.disabled"
>
</el-date-picker>
<!-- 日期 -->
<el-date-picker
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
v-else-if="item.type == 'dates'"
:class="item.date"
>
</el-date-picker>
<!-- 日期事件类型 -->
<el-date-picker
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
type="datetime"
placeholder="选择日期"
v-else-if="item.type == 'DateVal'"
value-format="yyyy-MM-dd HH:mm:ss"
:class="item.date"
>
</el-date-picker>
<el-date-picker
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
type="datetime"
placeholder="选择日期"
v-else-if="item.type == 'DateValm'"
value-format="yyyy-MM-dd HH:mm"
:class="item.date"
>
</el-date-picker>
<div
v-else-if="item.type == 'datetime'"
style="display: flex"
>
<el-date-picker
v-model="formLabelAlign[item.id_1]"
format="yyyy-MM-dd"
:disabled="item.disabled"
value-format="yyyy-MM-dd"
type="datetime"
>
</el-date-picker>
<span style="padding: 0 5px"></span>
<el-date-picker
v-model="formLabelAlign[item.id_2]"
format="yyyy-MM-dd"
:disabled="item.disabled"
value-format="yyyy-MM-dd"
type="datetime"
>
</el-date-picker>
</div>
<!--案件类别-->
<div class="zdyInputW" v-else-if="item.type == 'setValue'">
<el-select
v-model="formLabelAlign[item.id]"
:disabled="item.disabled"
:multiple="item.multiple"
>
<el-option
v-for="(item2, itemIndex) in item.codeOptions"
:key="itemIndex"
:label="item2.label"
:value="item2.value"
>
</el-option>
</el-select>
</div>
<!--多选框-->
<div class="zdyInputW" v-else-if="item.type == 'checkbox'">
<el-checkbox-group
v-model="formLabelAlign[item.id]"
size="small"
>
<el-checkbox
v-for="(item2, index2) in item.checkboxData"
:label="item2"
:key="index2"
>{{ item2 }}</el-checkbox
>
</el-checkbox-group>
</div>
<div
class="zdyInputW"
v-else-if="item.type == 'checkboxList'"
>
<el-checkbox-group
v-model="formLabelAlign[item.id]"
size="small"
>
<el-checkbox
v-for="(item2, index2) in item.checkboxData"
:label="item2.val"
:key="index2"
>{{ item2.label }}</el-checkbox
>
</el-checkbox-group>
</div>
<div
class="zdyInputW"
v-else-if="item.type == 'checkboxBotton'"
>
<el-checkbox-group
v-model="formLabelAlign[item.id]"
size="small"
>
<el-checkbox-button
v-for="item2 in item.checkboxData"
:label="item2"
:key="item2"
>{{ item2 }}</el-checkbox-button
>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item.type == 'radio'">
<el-radio-group
v-model="formLabelAlign[item.id]"
size="small"
:disabled="item.disabled"
>
<el-radio
:label="item2.value"
v-for="item2 in item.radioData"
:key="item2.value"
>{{ item2.name }}</el-radio
>
</el-radio-group>
</div>
<div class="zdyInputW" v-else-if="item.type == 'radioBotton'">
<el-radio-group
v-model="formLabelAlign[item.id]"
size="small"
>
<el-radio
:label="item2.id"
border
v-for="item2 in item.radioData"
:key="item2.id"
style="margin-right: 20px"
>{{ item2.name }}
</el-radio>
</el-radio-group>
</div>
<div class="zdyInputW" v-else-if="item.type == 'radios'">
<el-radio-group
v-model="formLabelAlign[item.id]"
size="small"
>
<el-radio
:label="item2.id"
v-for="item2 in item.radioData"
:key="item2.id"
style="margin-right: 20px"
>{{ item2.name }}
</el-radio>
</el-radio-group>
</div>
<!--字典弹框懒加载 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item.type == 'lazyCodeTreeDialog'"
>
<lazy-select-tree-dialog
:placeholder="'请选择' + item.name"
@clearId="clearId(item.id)"
:sendId="item.id"
:formData="formLabelAlign"
:currentItem="item"
/>
</div>
<div class="zdyInputW" v-else-if="item.type == 'codeTree'">
<select-tree-dialog
:placeholder="'请选择' + item.name"
:sendId="item.id"
:formData="formLabelAlign"
:currentItem="item"
/>
</div>
<!--文件上传-->
<el-upload
class="upload-demo"
action="#"
:on-change="
(flie, fileList) => {
handleChange(flie, fileList, item);
}
"
:on-remove="
(flie, fileList) => {
handleRemove(flie, fileList, item);
}
"
:before-remove="
(flie, fileList) => {
handleBeforeRemove(flie, fileList, item);
}
"
:on-preview="
(flie, fileList) => {
handlerPreview(flie, fileList, item);
}
"
:auto-upload="false"
:http-request="httpRequest"
:file-list="fileLists[item.fileId || item.id]"
:accept="item.acceptType"
v-model="formLabelAlign[item.id]"
v-else-if="item.type == 'file'"
>
<el-button size="small" type="primary">选择上传</el-button>
</el-upload>
<el-upload
class="avatar-uploader"
action="#"
:auto-upload="false"
:show-file-list="false"
:on-success="
(flie, fileList) => {
handleAvatarSuccess(flie, fileList, item);
}
"
:on-change="
(flie, fileList) => {
handleChange(flie, fileList, item);
}
"
v-else-if="item.type == 'photo'"
>
<img
v-if="formLabelAlign[item.id]"
:src="formLabelAlign[item.id]"
class="avatar"
/>
<span
v-if="formLabelAlign[item.id]"
class="el-upload-action"
@click.stop="() => {}"
>
<i
class="el-icon-delete"
@click.stop="removePhoto(item)"
></i>
</span>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!--法律文书文件上传-->
<el-upload
class="upload-demo"
action="#"
:on-change="
(flie, fileList) => {
flwsChange(flie, fileList, item);
}
"
:on-remove="
(flie, fileList) => {
flwsRemove(flie, fileList, item);
}
"
:before-remove="
(flie, fileList) => {
handleBeforeRemove(flie, fileList, item);
}
"
limit="1"
:auto-upload="false"
:http-request="httpRequest"
:file-list="fileLists[item.fileId || item.id]"
:accept="item.acceptType"
v-model="formLabelAlign[item.id]"
v-else-if="
item.type == 'flwsfile' && groupItem.showPage == true
"
>
<el-button size="small" type="primary">选择上传</el-button>
</el-upload>
<!--判断是否有可添加得子集-->
<div
class="childrenAsAdd"
v-if="item.childrenAsAdd"
:style="
item.type
? 'width:calc(100% + 140px);margin-left:-140px;'
: 'width: calc(100% - 90px);'
"
>
<div
v-for="(item2, index2) in item.childrenAsAdd"
:key="index2"
>
<div v-if="item2.flag">
<div v-for="(item3, ind) in item2.list" :key="ind">
<div
v-for="(reakData, realIndex) in formLabelAlign[
item2.id
]"
style="position: relative"
:key="realIndex"
>
<span class="addName"
>{{
item2.name.substring(0, item2.name.length - 1)
}}{{ realIndex + 1 }}:</span
>
<span class="addContent">
<!-- <i
:class="'zdyicon ' + item2.iconClass"
v-if="!type2"
@click="deleteObj(reakData, item2)"
></i> -->
<el-form-item
v-for="item4 in item3.name"
:label="item4.name"
v-show="!item4.hidden"
:prop="`${item2.id}[${realIndex}].${item4.id}`"
:key="item4.id"
:ref="`${item2.id}[${realIndex}].${item4.id}`"
:class="['item' + item4.col]"
:rules="
rules[`${item2.id}${realIndex}.${item4.id}`]
"
:style="{
height: item4.id == 'ryzp' ? '185px' : '36px',
}"
>
<!--输入框-->
<div
v-if="item4.type == 'text'"
style="position: relative"
>
<el-input
:placeholder="item4.placeholder"
v-model="reakData[item4.id]"
:disabled="item4.disabled"
@focus="item4.focus || ''"
>
</el-input>
</div>
<div
v-if="item4.type == 'textTq'"
style="position: relative"
>
<el-input
:placeholder="item4.placeholder"
v-model="reakData[item4.id]"
:disabled="item4.disabled"
@focus="item4.focus || ''"
>
<template slot="append"
><span
@click="
messageTq(formLabelAlign[item2.id][0])
"
>提取</span
></template
>
</el-input>
</div>
<div
v-else-if="item4.type == 'datetime'"
style="display: flex; padding-right: 78px"
>
<el-date-picker
v-model="reakData[item4.id_1]"
format="yyyy-MM-dd HH:mm:ss"
:disabled="item4.disabled"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
>
</el-date-picker>
<span style="padding: 0 5px"></span>
<el-date-picker
v-model="reakData[item4.id_2]"
format="yyyy-MM-dd HH:mm:ss"
:disabled="item4.disabled"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
>
</el-date-picker>
</div>
<div
class="zdyInputW"
v-else-if="item4.type == 'radio'"
>
<el-radio-group
v-model="reakData[item4.id]"
size="small"
:disabled="item4.disabled"
>
<el-radio
:label="item5.value"
v-for="item5 in item4.radioData"
:key="item5.value"
>{{ item5.name }}</el-radio
>
</el-radio-group>
</div>
<div
class="addChildBtn"
v-else-if="item4.type == 'button'"
>
<el-button type="primary">
<i class="el-icon-plus"></i
><span>新增</span>
</el-button>
</div>
<div
class="zdyInputW"
v-else-if="item4.type == 'lazyCodeTree'"
:class="item4.lazycodeTree"
>
<el-cascader
:props="item4.props"
v-model="reakData[item4.id]"
:placeholder="item4.placeholder"
:show-all-levels="false"
>
</el-cascader>
</div>
<!--字典弹框懒加载 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item4.type == 'lazyCodeTreeDialog'"
>
<lazy-select-tree-dialog
:placeholder="'请选择' + item4.name"
:sendId="item4.id"
v-model="reakData[item4.id]"
:formData="reakData"
:currentItem="item4"
/>
</div>
<!--字典框 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item4.type == 'code'"
>
<select-tree
v-model="reakData[item4.id]"
:placeholder="'请选择' + item4.name"
:options="item4.codeOptions"
:sendId="item4.id"
/>
</div>
<!--字典弹框 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item4.type == 'codeTree'"
>
<select-tree-dialog
:placeholder="'请选择' + item4.name"
:sendId="item4.id"
:formData="reakData"
:currentItem="item4"
v-model="reakData[item4.id]"
/>
</div>
<div
class="zdyInputW"
v-else-if="item4.type == 'checkboxBotton'"
>
<div style="display: flex">
<span
v-for="item5 in item4.checkboxData"
:label="item5"
style="
margin-left: 20px;
border: 1px solid;
padding: 0 10px;
border-radius: 5px;
font-size: 15px;
width: 142px;
text-align: center;
color: #1a81e1;
"
:key="item5"
>{{ item5 }}</span
>
</div>
</div>
<!--文本域-->
<el-input
type="textarea"
:placeholder="item4.placeholder"
v-model="reakData[item4.id]"
v-else-if="item4.type == 'textarea'"
:disabled="item4.disabled"
>
</el-input>
<!-- 时间框 -->
<el-date-picker
v-model="reakData[item4.id]"
v-else-if="item4.type == 'date'"
:placeholder="item4.placeholder"
format="yyyy 年 MM 月 dd 日"
value-format="timestamp"
clearable
>
</el-date-picker>
<!-- 时间区间 -->
<el-date-picker
v-model="reakData[item4.id]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
v-else-if="item4.type == 'datearea'"
>
</el-date-picker>
<el-date-picker
v-model="reakData[item4.id]"
:disabled="item4.disabled"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
v-else-if="item4.type == 'dates'"
:class="item4.date"
>
</el-date-picker>
<!--文件上传-->
<el-upload
class="upload-demo"
action="#"
ref="uploadFile"
:accept="item4.acceptType"
:on-change="
(file, fileList) =>
handleChange(
file,
fileList,
item4,
item2,
realIndex
)
"
:on-remove="
(flie, fileList) =>
handleRemove(
flie,
fileList,
item4,
item2,
realIndex
)
"
:before-remove="
(flie, fileList) =>
handleBeforeRemove(
flie,
fileList,
item4,
item2,
realIndex
)
"
:auto-upload="false"
:http-request="httpRequest"
:on-preview="
(flie, fileList) =>
handlerPreview(
flie,
fileList,
item4,
item2,
realIndex
)
"
:file-list="
fileLists[item2.id] &&
fileLists[item2.id][realIndex]
? fileLists[item2.id][realIndex][item4.id]
: []
"
v-model="reakData[item4.id + '1']"
v-else-if="item4.type == 'file'"
>
<el-button
size="small"
@click="
item4.name == '法律文书:' ||
item2.name == '犯罪嫌疑人信息:'
? uploadFlws()
: ''
"
type="primary"
>上传附件</el-button
>
<span
v-if="item4.id == 'flwsDzwjnr'"
style="
color: red;
margin-left: 20px;
font-size: 13px;
"
>支持png,jpg,doc,pdf格式,大小不超过3MB</span
>
<span
v-else-if="item4.id == 'asjfjDzwjnr'"
style="
color: red;
margin-left: 20px;
font-size: 13px;
"
>支持mp4,png,jpg,doc,pdf格式,大小不超过20MB</span
>
<span
v-else
style="
color: red;
margin-left: 20px;
font-size: 13px;
"
>支持jpg,jpeg,png,doc,pdf,docx格式,大小不超过3MB</span
>
</el-upload>
</el-form-item>
</span>
</div>
</div>
</div>
<div class="addChildBtn">
<el-button type="primary" @click="handelFrom(item2)">
<i class="el-icon-plus"></i><span>添加</span>
</el-button>
</div>
</div>
</div>
</el-form-item>
</div>
</div>
</div>
</el-form>
<slot name="xyrList"></slot>
</div>
</div>
<div class="button" id="spbtn" v-if="formField[0].title != ' '">
<el-button
@click="submit()"
class="finish"
v-if="
pageBs != 'adjustRlqbxs' ||
(pageBs == 'adjustRlqbxs' &&
((formLabelAlign.bcxx && formLabelAlign.bcxx == '1') ||
!formLabelAlign.bcxx))
"
>保存</el-button
>
<el-button
style="width: 110px"
@click="submit('draft')"
class="finish"
v-if="draft"
>保存并提交</el-button
>
<el-button
@click="examine"
class="finish examine"
v-if="
pageBs == 'adjustRlqbxs' &&
formLabelAlign.spbz &&
formLabelAlign.spbz == '1'
"
>提请审批</el-button
>
</div>
<div class="saveButton" id="spbtn01" v-if="formField[0].title == ' '">
<el-button @click="submit()" class="finish">保存</el-button>
</div>
<!-- <div class="prive_picture" v-if="filePreviewFlag" @click="closefilePreview">
<el-image class="picture" :src="filePreview"> </el-image>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog> -->
</div>
</template>
<script>
import LazySelectTreeDialog from "./lazy_treeCode_components.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
export default {
name: "formCommonPage",
components: {
LazySelectTreeDialog,
SelectTreeDialog,
},
props: {
draft: {
type: Boolean,
default: false,
},
formField: {
type: Array,
default: () => [],
},
formLabelAligns: {
type: Object,
default: () => {},
},
rule: {
type: Object,
default: () => {},
},
propTitle: String,
pageBs: String,
},
data() {
return {
autosize: { minRows: 5 },
rules: {},
propFormField: this.formField,
formLabelAlign: this.formLabelAligns,
rules: {},
fileLists: {},
imageUrl: {},
shade: false,
};
},
created() {
var self = this;
self.initFields();
},
methods: {
examine() {
this.$emit("examine");
},
ajTq(item) {
this.$emit("ajtq", item);
},
messageTq(item) {
console.log(item);
var itemSend = {}
if(item.xm && item.xm != "") {
itemSend.xm = item.xm
}
if(item.zjhm && item.zjhm != "") {
itemSend.zjhm = item.zjhm
}
this.$emit("messageTq", itemSend);
},
choosePeople(item) {
console.log(item);
this.$emit("choosePeople", item);
},
ajFocus(item) {
this.$emit("ajFocus", item);
},
initFields() {
var self = this;
var ifInitRules = false;
ifInitRules = JSON.stringify(self.rules) == "{}";
for (var i = 0; i < this.propFormField.length; i++) {
for (var j = 0; j < this.propFormField[i].data.length; j++) {
//遍历可配置化数组
if (ifInitRules) {
// debugger;
if (this.propFormField[i]["data"][j].prop) {
this.rules[this.propFormField[i]["data"][j].id] =
this.$rules[this.propFormField[i]["data"][j].prop];
//如果有规则的话 拿到全局的规则 规则是一个数组,数组里是对象 将规则复制到所绑定的对象那个中去,然后每一项绑定对象
}
}
if (this.propFormField[i].data[j].type === "file") {
//判断文件上传
// self.formLabelAlign[this.propFormField[i].id] = ""
if (this.propFormField[i].data[j].fileId) {
self.$set(
self.fileLists,
this.propFormField[i].data[j].fileId,
[]
);
} else {
self.$set(self.fileLists, this.propFormField[i].data[j].id, []);
}
//给self.formLabelAlign 给每个匹配到的id属性值 添加一个空数组
}
if (this.propFormField[i].data[j].type === "photo") {
//判断照片上传
// self.formLabelAlign[this.propFormField[i].id] = ""
if (this.propFormField[i].data[j].fileId) {
self.$set(
self.imageUrl,
this.propFormField[i].data[j].fileId,
""
);
} else {
self.$set(self.imageUrl, this.propFormField[i].data[j].id, "");
}
}
if (this.propFormField[i].data[j].type === "checkboxBotton") {
self.$set(
self.formLabelAlign,
this.propFormField[i].data[j].id,
false
);
}
if (this.propFormField[i].data[j].childrenAsAdd) {
//遍历可配置化列表的子集
this.propFormField[i].data[j].childrenAsAdd.forEach((item2) => {
self.$set(self.formLabelAlign, item2.id, []);
//拿到id对应的值 给添加空数组
item2.list.forEach((val3, index3) => {
var singleObject = {};
val3.name.forEach((val4) => {
if (val4.multiple == true && val4.type == "code") {
singleObject[val4.id] = [];
} else if (val4.type == "datearea") {
singleObject[val4.id] = [];
} else if (val4.type == "datetime") {
singleObject[val4.id] = [];
} else if (val4.type == "file") {
if (!self.fileLists[item2.id]) {
self.$set(self.fileLists, item2.id, []);
}
var objectValue = {};
objectValue[val4.id] = [];
self.$set(self.fileLists[item2.id], index3, objectValue);
//self.$set(self.fileLists, val4.id, []);
} else {
singleObject[val4.id] = "";
}
var rulesName = item2.id + [index3] + "." + val4.id;
if (ifInitRules) {
if (val4.prop) {
self.$set(self.rules, rulesName, self.$rules[val4.prop]);
}
}
});
self.$set(self.formLabelAlign[item2.id], index3, singleObject);
});
});
}
if (this.propFormField[i].data[j].children) {
//遍历可配置化列表的子集
this.propFormField[i].data[j].children.forEach((item2) => {
self.$set(self.formLabelAlign, item2.id, "");
//拿到id对应的值 给添加空数组
if (ifInitRules) {
if (item2.prop) {
self.$set(self.rules, item2.id, self.$rules[item2.prop]);
}
}
});
}
}
this.$forceUpdate();
}
},
submit(flag) {
var self = this;
// debugger;
this.$refs.formLabelAlign.validate((valid) => {
if (valid) {
//使用FormData构造函数创建一个空对象
var params = new FormData();
this.propFormField.forEach((itemData) => {
let objStr = itemData.objStr ? `${itemData.objStr}.` : "";
itemData.data.forEach((item) => {
if (
self.formLabelAlign[item.id] ||
self.formLabelAlign[item.id_1]
) {
// debugger;
if (item.type !== "file") {
//1.1二级字典处理
if (item.type == "lazyCodeTree" || item.type == "codeTree") {
if (item.multiple) {
let str = `#${self.formLabelAlign[item.id].join("#")}`;
if (item.id == "zljsdwdm") {
str = self.formLabelAlign[item.id].join(",");
}
params.append(objStr + item.id, str);
} else {
params.append(
objStr + item.id,
self.formLabelAlign[item.id]
);
}
} else if (item.type == "date" || item.type == "dates") {
//如果他的类型是date 时间框
if (self.formLabelAlign[item.id]) {
params.append(
objStr + item.id,
self.formLabelAlign[item.id]
);
}
} else if (item.type == "setValue") {
if (item.multiple) {
let str = `#${self.formLabelAlign[item.id].join("#")}`;
params.append(objStr + item.id, str);
} else {
if (item.id == "jsrXm") {
let arr = item.codeOptions.filter(
(items) => self.formLabelAlign[item.id] == items.value
);
for (var index in arr[0]) {
if (index == "label") {
params.append(objStr + "jsrXm", arr[0][index]);
} else if (index == "value") {
params.append(objStr + "jsrZjhm", arr[0][index]);
} else {
params.append(objStr + index, arr[0][index]);
}
}
} else {
params.append(
objStr + item.id,
self.formLabelAlign[item.id]
);
}
}
} else if (item.type == "photo") {
for (var val in this.imageUrl) {
if (val == item.id && this.imageUrl[val]) {
params.append(objStr + item.id, this.imageUrl[val]);
}
}
} else if (item.type == "datetime") {
params.append(item["id_1"], this.formLabelAlign[item.id_1]);
params.append(item["id_2"], this.formLabelAlign[item.id_2]);
}
//1.2普通字段处理
else {
params.append(
objStr + item.id,
self.formLabelAlign[item.id]
);
}
}
}
//2.有children表单数据处理
if (item.children) {
item.children.forEach((subItem) => {
if (subItem.type !== "file") {
//1.1二级字典处理
if (subItem.type == "lazyCodeTree") {
if (self.formLabelAlign[subItem.id]) {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id]
);
}
} else {
self.formLabelAlign[subItem.id] = self.formLabelAlign[
subItem.id
]
? self.formLabelAlign[subItem.id][
self.formLabelAlign[subItem.id].length - 1
]
: "";
console.log(self.formLabelAlign[subItem.id]); //二级字典取到的是一个数组,value : ["111",''112] 拿到数组里的第二个值
if (self.formLabelAlign[subItem.id]) {
//如果这个有值的话就添加到参数里
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id]
);
}
console.log(
"2)二级字典处" + itemData.objStr + subItem.id,
self.formLabelAlign[subItem.id]
);
}
}
} else if (
subItem.type == "date" ||
subItem.type == "dates"
) {
//如果他的类型是date 时间框
if (self.formLabelAlign[subItem.id]) {
//调用函数 拿到时间格式的字符串
var time = "";
if (subItem.id != "fkqx") {
time =
window.util.timeStampTurnTime(
self.formLabelAlign[subItem.id]
) || "";
} else {
time =
self.formLabelAlign[subItem.id].substring(0, 10) ||
"";
}
if (self.formLabelAlign[subItem.id]) {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
time
);
} else {
params.append(subItem.id, time);
}
}
}
} else if (subItem.type == "codeTag") {
if (self.formLabelAlign[subItem.id]) {
if (subItem.multiple) {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id][
self.formLabelAlign[subItem.id].length - 1
]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id][
self.formLabelAlign[subItem.id].length - 1
]
);
}
} else {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id]
);
}
}
}
}
//1.2普通字段处理
else {
if (self.formLabelAlign[subItem.id]) {
console.log(self.formLabelAlign[subItem.id]);
if (self.formLabelAlign[subItem.id]) {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id]
);
}
} else if (subItem.radioStr) {
var radioParams = [];
var isHas = "0";
for (var i = 0; i < self.selectId.length; i++) {
if (self.ednId) {
isHas = self.ednId.findIndex((endsubItem) => {
return endsubItem == self.selectId[i];
});
}
if (isHas >= 0) {
radioParams.push(1);
} else {
radioParams.push(0);
}
}
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
radioParams.toString()
);
} else {
params.append(subItem.id, radioParams.toString());
}
} else {
if (itemData.objStr) {
params.append(
itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
} else {
params.append(
subItem.id,
self.formLabelAlign[subItem.id]
);
}
}
}
console.log(
"1)普通字段处" + itemData.objStr + "." + subItem.id,
self.formLabelAlign[subItem.id]
);
}
}
});
}
//2.有childrenAsAdd表单数据处理
if (item.childrenAsAdd) {
item.childrenAsAdd.forEach((subItem) => {
//如果遍历到的编号和所选择的编号一致
self.formLabelAlign[subItem.id].forEach((val5, index) => {
//遍历每一个数组的值
for (var ite in val5) {
//数组里对象 在遍历对象
if (val5[ite]) {
//如果有值的话
var currentc = subItem.list[0].name.find((item) => {
return item.id == ite;
});
if (currentc && currentc.type == "date") {
if (val5[ite]) {
var time =
window.util.timeStampTurnTime(val5[ite]) || "";
params.append(
subItem.id + "[" + index + "]." + ite,
time
);
}
} else if (
currentc &&
currentc.type == "code" &&
currentc.multiple == true
) {
if (val5[ite].length != 0) {
params.append(
subItem.id + "[" + index + "]." + ite,
val5[ite]
);
}
} else if (
currentc &&
currentc.type == "lazyCodeTree"
) {
val5[ite] = val5[ite]
? val5[ite][val5[ite].length - 1]
: "";
if (val5[ite]) {
//如果这个有值的话就添加到参数里
params.append(
subItem.id + "[" + index + "]." + ite,
val5[ite]
);
}
} else if (ite == "xxzjbh") {
params.append(
subItem.id + "[" + index + "]." + ite,
val5[ite]
);
} else {
console.log(
"3)有子级表单数据处理." +
subItem.id +
"[" +
index +
"]." +
ite,
val5[ite]
);
params.append(
subItem.id + "[" + index + "]." + ite,
val5[ite]
);
}
}
}
});
});
}
});
});
for (var fileItem in self.fileLists) {
for (var i = 0; i < self.fileLists[fileItem].length; i++) {
if (self.fileLists[fileItem][i].raw) {
params.append(fileItem, self.fileLists[fileItem][i].raw);
}
}
}
//另一种状态保存
if (flag === "draft") {
this.$emit("draft");
}
this.$emit("submit", params);
} else {
setTimeout(() => {
// this.$message("请填写必填字段");
this.$alert("请填写必填字段!", "提示", {
confirmButtonText: "确定",
type: "warning",
});
return false;
}, 100);
}
});
console.log(this.formLabelAlign);
},
handleChange(file, fileList, item, parentItem) {
var self = this;
let isLt1M = "";
isLt1M = file.raw.size / 1024 / 1024 < 101;
var index = file.name.lastIndexOf(".");
const isJPG = /^.*\.(jpg|jpeg|png|mp4|pdf|docx|doc)$/i.test(
file.name.substring(index)
);
// debugger;
if (item.type == "photo") {
if (isJPG) {
this.$set(self.imageUrl, item.id, file.raw);
this.$set(
self.formLabelAlign,
item.id,
URL.createObjectURL(file.raw)
);
// debugger;
} else {
self.$message.error("请上传正确的图片");
}
} else {
debugger;
if (self.fileLists[item.id].length == 0) {
self.$set(self.fileLists, item.id, []);
}
if (isLt1M) {
this.fileLists[item.id].push(file);
// this.$refs.formLabelAlign.clearValidate();
} else {
this.$confirm("上传文件不能超过100M", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
fileList.forEach((item, index) => {
if (file.raw.uid == item.uid) {
fileList.splice(index, 1);
}
});
});
}
}
},
flwsChange(file, fileList, item, parentItem) {
var self = this;
let isLt1M = "";
isLt1M = file.raw.size / 1024 / 1024 < 101;
// debugger;
if (self.fileLists[item.id].length == 0) {
self.$set(self.fileLists, item.id, []);
}
if (isLt1M) {
this.fileLists[item.id].push(file);
// this.$refs.formLabelAlign.clearValidate();
} else {
this.$confirm("上传文件不能超过100M", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
fileList.forEach((item, index) => {
if (file.raw.uid == item.uid) {
fileList.splice(index, 1);
}
});
});
}
this.$emit("flwsInsert", file);
},
flwsRemove(file, fileList, item, parentItem) {
this.$emit("flwsRemove", file);
this.$set(this.fileLists, item.id, fileList);
console.log(this.fileLists);
},
handleRemove(file, fileList, item, parentItem) {
this.$emit("handleRemove", file);
this.$set(this.fileLists, item.id, fileList);
console.log(this.fileLists);
},
//子组件调用删除接口后进行前端删除
photoRemove(item) {
this.$set(this.formLabelAlign, item.id, "");
this.$set(this.imageUrl, item.id, "");
},
//执行删除照片的操作
removePhoto(item) {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$emit("removePhoto", item);
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleBeforeRemove(file, fileList, item, parentItem) {},
handlerPreview(file, fileList, item, parentItem) {},
httpRequest() {},
handleAvatarSuccess(file, fileList, item) {
this.imageUrl[item.id] = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file, fileList, item) {
const isJPG = /^.*\.(jpeg|png|jpg)$/i.test(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 jpg、png 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
//新增表单数据
handelFrom(obj) {
console.log(obj);
let self = this,
addObj;
// 解决修改的时候添加错误问题
if (self.formLabelAlign[obj.id].length <= 0) {
let pageList = obj.list[0].name;
let id = obj.id;
let newObj = {};
for (let i = 0; i < pageList.length; i++) {
newObj[pageList[i].id] = "";
}
self.$set(self.formLabelAlign[id], 0, newObj);
}
if (!obj.flag) {
self.$set(obj, "flag", true);
} else {
self.propFormField.forEach((groupItem) => {
groupItem.data.forEach((val) => {
if (val.childrenAsAdd) {
val.childrenAsAdd.forEach((val2, index2) => {
//遍历list数组
debugger
if (val2 == obj) {
//通过比较两个对象是否相等 将formLabelAlign里绑定的数据复制了一份
addObj = JSON.parse(
JSON.stringify(self.formLabelAlign[val2.id][0])
);
//实现深拷贝赋值
for (var val3 in addObj) {
addObj[val3] = "";
}
self.$set(
self.formLabelAlign[val2.id],
self.formLabelAlign[val2.id].length,
addObj
);
//添加时候拷贝rules
val2.list[0].name.forEach((val7) => {
if (val7.prop) {
let rulesName =
val2.id +
[self.formLabelAlign[val2.id].length - 1] +
"." +
val7.id;
self.$set(self.rules, rulesName, self.$rules[val7.prop]);
}
});
for (var f = 0; f < val2.list[0].name.length; f++) {
if (val2.list[0].name[f].type == "file") {
self.fileLists[val2.id][
self.formLabelAlign[val2.id].length - 1
] = {};
self.fileLists[val2.id][
self.formLabelAlign[val2.id].length - 1
][val2.list[0].name[f].id] == [];
}
}
this.$message.success("新增成功");
console.log(self.rules, 1000000000000000);
}
});
}
});
});
}
},
},
mounted() {
var self = this;
},
watch: {
"formLabelAligns.editing": {
handler() {
var self = this;
// debugger;
self.propFormField.forEach((val) => {
val.data.forEach((val2) => {
if (val2.childrenAsAdd) {
val2.childrenAsAdd.forEach((val3) => {
val3.list.forEach((val4) => {
val4.name.forEach((val5) => {
if (val5.type == "file") {
self.$set(self.fileLists, val3.id, []);
self.formLabelAligns[val3.id].forEach((val6, jIndex) => {
let obj = new Object();
obj[val5.id] =
self.formLabelAligns[val3.id][jIndex][val5.id];
self.$set(self.fileLists[val3.id], jIndex, obj);
});
}
});
});
});
} else if (val2.type == "file") {
if (
self.formLabelAligns[val2.id] &&
self.formLabelAligns[val2.id].length > 0
) {
self.$set(
self.fileLists,
val2.id,
self.formLabelAligns[val2.id]
);
}
}
});
});
},
deep: true,
},
fileLists(val) {
console.log(222, val);
},
"formLabelAlign.jssj"(val) {
if (this.$route.path == "/addYjrw") {
if (
new Date(val) >
new Date(
this.$moment(new Date().getTime() + 3600 * 1000 * 24 * 30).format(
"YYYY-MM-DD"
)
)
) {
this.$set(this.formLabelAlign, "jssj", "");
this.$message.error("最大时间间隔为一个月");
}
}
},
"formLabelAlign.sffs"(val) {
var boo = false
if(val == 1) {
boo = true
this.$emit("insertMessage",boo)
}else {
boo = false
this.$emit("insertMessage",boo)
}
}
},
computed: {},
};
</script>
<style lang="scss">
/*覆盖ui库得样式,在scoped里没效果*/
.v-modal {
z-index: 10 !important;
}
</style>
<!--级联样式-->
<style scoped lang="scss">
$-header-bg: #1a81e1;
$-header-height: 60px;
$-header-fontSize: 18px;
.prive_picture {
z-index: 999;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
.picture {
width: 500px;
height: 800px;
left: 40%;
top: 50%;
// transform: translateX(-50%);
transform: translateY(-50%);
}
}
.shade {
width: 178px;
height: 178px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 999;
}
.avatar-uploader {
position: relative;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader .el-upload__input {
position: relative;
z-index: 12;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
#formCommonPage {
width: 100% !important;
.subTitle {
div {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 600;
line-height: 48px;
height: 48px;
color: #363636;
opacity: 1;
}
}
.sjjcShadow {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
.dongTu {
width: 420px;
height: 210px;
/*background: #ffffff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);*/
opacity: 1;
border-radius: 8px;
position: fixed;
display: flex;
top: 50%;
left: 55%;
color: #ffe400;
margin-top: -105px;
margin-left: -210px;
z-index: 100;
.littleTips {
width: 110px;
display: flex;
}
.centerImage {
width: 200px;
height: 200px;
position: relative;
top: 19px;
margin-left: 113px;
}
}
}
// 表单内内容
.formContent {
margin: 0 20px;
margin-bottom: 88px;
// background: #ffffff;
// box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
border-radius: 4px;
.caijiIcon {
margin-right: 5px;
}
/deep/.el-input__inner,
/deep/.el-textarea__inner {
background: #fdfdfd !important;
}
/deep/.el-textarea__inner {
min-width: 943px;
width: 100%;
}
/deep/.el-input__inner {
height: 32px;
}
/deep/.el-checkbox-button,
/deep/.el-checkbox-button__inner {
min-width: 74px;
height: 24px;
border-radius: 2px !important;
padding: 6px 4px !important;
margin-top: -10px !important;
}
/deep/.el-upload-list__item.is-success
/deep/.el-upload-list__item-status-label {
line-height: 36px;
}
/deep/.el-date-editor--daterange {
.el-range-separator {
line-height: 20px;
}
}
.groupTitleBox {
height: 48px;
display: flex;
flex-wrap: wrap;
align-items: center;
background: #ffffff;
border-radius: 8px 8px 0 0;
.groupTitle {
height: 48px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 48px;
color: #363636;
opacity: 1;
padding-left: 20px;
width: 100%;
}
}
//分块组级卡片
.paneGroupDiv {
background: #ffffff;
padding: 0 40px;
padding-bottom: 20px;
// 表单元素的真实容器
.zdyLine {
padding-bottom: 20px;
border-bottom: 1px solid #e4e4e4;
/deep/.el-form-item {
margin-bottom: 0px !important;
.el-form-item__label {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 32px;
}
.el-form-item__content {
font-size: 13px;
line-height: 36px;
// height: 36px;
.el-form-item__error {
padding-top: 0px;
}
.el-textarea {
margin-bottom: 10px;
}
.el-input__inner {
border-radius: 4px;
}
.codeTree {
.el-select {
.el-icon-arrow-up {
font-family: "iconfont" !important;
font-size: 16px !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-arrow-up:before {
content: "\e635";
}
}
}
}
}
.item1,
.zdycol1 {
display: inline-block;
width: 100%;
}
.item1col2 {
display: inline-table;
.el-select {
width: 360px;
height: 36px;
}
}
.item3 {
display: inline-block;
width: 25%;
/deep/ .el-input .el-input--suffix,
.el-date-editor {
width: 100%;
}
}
div[class^="item"] {
vertical-align: middle;
}
.item2,
.zdycol2 {
display: inline-table;
width: 33.33%;
/deep/ .el-input .el-input--suffix,
.el-date-editor {
width: 100%;
}
}
.item3 {
width: 66.66%;
display: inline-table;
}
.item5 {
width: 66.66%;
display: inline-table;
}
.item6 {
width: 48%;
display: inline-table;
}
.item7 {
width: 66%;
display: inline-table;
margin-right: 34%;
.zdyInputW,
.el-input {
width: 100% !important;
}
}
.item8 {
width: 90%;
display: inline-block;
}
.item9 {
width: 40%;
margin-right: 20%;
display: inline-table;
/deep/ .el-date-editor {
width: 100% !important;
}
}
.item10 {
width: 40%;
margin-right: 60%;
display: inline-table;
}
.item11 {
width: 90%;
display: inline-block;
}
.item12 {
width: 120px;
margin-left: 140px;
display: inline-block;
}
.item13 {
width: auto;
margin-left: 160px;
display: inline-block;
/deep/.el-checkbox-button {
.el-checkbox-button__inner {
padding-left: 0px !important;
}
padding-left: 0px !important;
}
}
.item14 {
width: auto;
margin-left: 0px;
display: inline-block;
}
.item15 {
width: 120px;
margin-left: 16px;
margin-right: 500px;
display: inline-block;
margin-top: 15px;
margin-bottom: 8px;
}
.item16 {
width: 66%;
display: inline-block;
/deep/ .el-input {
width: calc(91% + 2px) !important;
}
}
.item17 {
width: 65%;
margin-right: 10%;
display: inline-block;
}
.item18 {
width: 65%;
margin: 14px 0;
margin-right: 34%;
display: inline-block;
}
.item19 {
width: 46%;
margin-right: 20%;
display: inline-table;
}
.item20 {
margin-left: 145px;
width: 80%;
display: inline-block;
}
.item21 {
width: 74%;
margin-right: 25%;
display: inline-block;
}
.item22 {
width: 99%;
margin: 14px 0;
.el-input {
width: 65% !important;
}
display: inline-block;
}
.item23 {
width: 30%;
display: inline-block;
}
.item25 {
width: 33%;
margin-right: 33%;
display: inline-table;
}
.upload-demo {
/deep/.el-icon-close {
top: 12px;
right: 4px;
}
/deep/.el-button {
border-radius: 2px;
}
}
.zdyInputW {
width: 100%;
height: 36px;
display: inline-block;
.lazydate {
width: 100%;
}
.lazysjdq {
line-height: 36px;
background: #fdfdfd;
border-radius: 2px;
/* width: 90%; */
width: 360px;
}
.el-cascader {
width: 85%;
}
.el-select {
width: 100%;
}
}
.zdyInputCol2 {
width: 90%;
.el-input {
width: calc((100% - 24px) / 2);
}
}
.childrenAsAdd {
.item2,
.item1 {
margin: 6px 0;
}
.addName {
display: inline-block;
width: 100px;
text-align: right;
vertical-align: top;
font-size: 13px;
line-height: 100px;
padding: 0 12px 0 0;
font-family: Microsoft YaHei;
font-weight: 400;
}
.addContent {
width: calc(100% - 114px);
display: inline-block;
background: #fef6ea;
background: #fef6ea;
border: 0px solid #ffd193;
opacity: 1;
border-radius: 4px;
padding-top: 28px;
margin: 24px 0 4px 0;
padding-bottom: 15px;
position: relative;
.el-input,
.el-select,
.el-date-editor,
.zdyInputW {
width: 85% !important;
}
.zdyInputW {
.el-input,
.el-cascader,
.el-select {
width: 100% !important;
}
}
.zdyicon {
position: absolute;
right: 20px;
top: 36px;
font-size: 12px;
color: #8c97a0;
cursor: pointer;
}
/deep/ .el-input__inner {
background: #ffffff !important;
height: 29px;
}
/deep/ .el-form-item:nth-child(1),
/deep/ .el-form-item:nth-child(2) {
margin-top: 0px;
}
}
}
}
}
.addChildBtn {
margin: 6px 0 0px 0;
.el-button {
border: none;
width: 96px;
height: 26px;
padding: 0px;
background: #fe9200;
opacity: 1;
border-radius: 2px;
margin-left: 160px;
}
}
.caoGao {
margin-left: 160px;
width: 148px;
height: 39px;
background: #ff9800;
box-shadow: 0px 4px 6px rgba(255, 152, 0, 0.12);
opacity: 1;
}
.day,
.codeTag .tag {
width: 100%;
}
.lazycode {
.el-cascader {
width: 276px;
height: 40px;
}
}
.name {
width: 900px;
height: 40px;
}
}
/deep/.treeDialog {
width: 680px;
background: #ffffff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
opacity: 1;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -223px !important;
margin-left: -340px;
z-index: 100;
}
.button {
padding: 0 32px;
height: 48px;
background: #ffffff;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08);
opacity: 1;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
position: fixed;
bottom: 0;
width: calc(100% - 305px);
.finish {
width: 76px;
height: 32px;
background: #0061f7;
border-radius: 4px;
color: #ffffff;
line-height: 9px;
}
.examine {
width: 92px;
}
.saveExamine {
width: 150px;
}
}
.saveButton {
padding: 0 32px;
height: 48px;
background: #fff;
// box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08);
opacity: 1;
z-index: 4;
// display: flex;
// align-items: center;
// justify-content: flex-end;
// position: fixed;
bottom: 0;
width: calc(100% - 305px);
.finish {
width: 76px;
height: 32px;
background: #0061f7;
border-radius: 4px;
color: #ffffff;
line-height: 9px;
}
}
}
#formCommonPage .el-input.is-disabled /deep/ .el-input__inner {
color: #606266 !important;
background-color: #f1f3f4 !important;
}
#formCommonPage /deep/ .zdyInputW .el-select .is-disabled .el-input__inner {
color: #606266 !important;
background-color: #f1f3f4 !important;
}
/*警员选择*/
.jyDialog {
/deep/ .el-dialog__body {
padding: 10px 15px;
}
/deep/ .el-input__inner {
height: 30px;
line-height: 30px;
}
/deep/ .el-form-item {
margin-bottom: 14px;
}
/deep/ .ryListWrap {
height: 300px;
max-height: 400px;
overflow-y: auto;
margin: 0 15px;
}
li {
list-style-type: none;
display: inline-block;
width: 33%;
margin: 3px 0;
}
/deep/ .el-form-item {
line-height: 30px;
height: 30px;
}
}
.dragwrap {
display: flex;
padding: 10px 20px;
.contentH {
max-height: 400px;
overflow-y: auto;
}
.group-item3 {
width: 33%;
display: inline-block;
}
.group-item1 {
width: 100%;
}
.selected {
width: 565px;
display: inline-block;
margin-right: 40px;
margin-bottom: 15px;
li {
color: $base-color;
cursor: pointer;
div {
display: inline-block;
}
}
}
.waiting {
flex: 1;
display: inline-block;
margin-bottom: 15px;
li {
color: #333333;
cursor: pointer;
display: inline-block;
width: 33%;
div {
display: inline-block;
}
}
}
.select-header {
font-weight: bold;
line-height: 19px;
color: #333333;
margin: 8px 0;
}
}
</style>
<style scoped>
.el-upload-action {
position: absolute;
top: 0;
left: 0;
display: block;
width: 178px;
height: 178px;
font-size: 0;
color: #fff;
text-align: center;
line-height: 120px;
}
.el-upload-action:hover {
font-size: 20px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}
/* /deep/ .avatar-uploader /deep/ .el-upload {
border: 1px dashed #d9d9d9;
background: #fff !important;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
/deep/ .avatar-uploader /deep/ .el-upload:hover {
border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
} */
/* /deep/ .avatar {
width: 60px;
height: 60px;
display: block;
}
.avatar2 {
width: 150px;
height: 185px;
line-height: 185px;
} */
/* .relative:hover .shadow {
display: block;
}
.relative {
position: relative;
}
.shadow {
display: none;
position: absolute;
cursor: pointer;
width: 150px;
height: 185px;
line-height: 185px;
top: 0px;
left: 0px;
} */
.redColor /deep/ .el-form-item__label {
color: red;
}
/deep/ .zdyCodeDialog {
opacity: 0;
}
/deep/ .uoloadSty /deep/ .el-upload--picture-card,
/deep/ .avatar-uploader-icon {
width: 150px;
height: 185px;
line-height: 185px;
}
.disUoloadSty /deep/ .el-upload--picture-card {
display: none; /* 上传按钮隐藏 */
}
/deep/ .is-required .el-form-item__label {
color: red;
}
</style>
<template>
<div>
<!--字典框 @emitValue="getLbValue"-->
<el-select
:placeholder="curItem.placeholder"
v-model="curFormData[curItem.id]"
:class="curItem.code"
popper-class="zdyCodeDialog"
style="width: 100%"
@clear="clearSeleted"
@remove-tag="removeTag"
:popper-append-to-body="false"
:multiple="curItem.multiple"
:disabled="curItem.disabled"
empty-text="请从弹框中选择数据"
@focus="
(val, $event) =>
showCodeTreeDialog(val, curItem, curFormData, curItem.id)
"
clearable
>
<el-option
v-for="item2 in codeTreeConfig.fieldItem"
:key="item2.id"
:label="item2.label"
:value="item2.id"
>
</el-option>
</el-select>
<!--多级或多数据下拉框弹框样式-->
<el-dialog
v-if="dialogCodeVisible"
custom-class="treeDialog"
:visible.sync="dialogCodeVisible"
style="z-index: 2020 !important"
:close-on-click-modal="false"
center
>
<div
slot="title"
class="header-title"
style="
text-align: left;
height: 30px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 30px;
opacity: 1;
"
>
<div>{{ codeTreeConfig.title }}</div>
</div>
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
style="
margin-bottom: 4px;
width: calc(100% - 26px) !important;
margin-left: 15px;
margin-top: 2px;
"
>
</el-input>
<div
style="
width: calc(100% - 18px);
height: calc(100% - 42px);
overflow-y: auto;
border-bottom: 1px solid #f2f2f2;
margin-left: 7px;
"
>
<el-tree
:props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
ref="codeTreeDialog"
:default-expanded-keys="defaultExpandedKeys"
:default-checked-keys="
Array.isArray(curFormData[curItem.id])
? curFormData[curItem.id]
: [...curFormData[curItem.id]]
"
@check="codeTreeNodeCheck"
@check-change="handleNodeClick"
:check-on-click-node="true"
lazy
:load="loadNode"
check-strictly
show-checkbox
style="height: 288px"
>
</el-tree>
</div>
<div slot="footer" class="dialog-footer ar" style="margin-top: 11px">
<el-button
@click="dialogCodeVisible = false"
style="width: 120px; height: 36px"
>取 消</el-button
>
<el-button
type="primary"
@click="forSureSelectCode"
style="width: 120px; height: 36px"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import Http from "@/utils/http.js";
import url from "@/api/base";
export default {
name: "treeCode_components",
props: {
formData: Object,
currentItem: Object,
sendId: String,
},
data() {
return {
curFormData: this.formData,
curItem: this.currentItem,
defaultProps: {
parent: "parentId", // 父级唯一标识
value: "id", // 唯一标识
label: "label", // 标签显示
isLeaf: "leaf",
// children: 'children', // 子级
},
id: this.sendId,
filterText: "",
//多级或多数据下拉框弹框样式(数据量太多时使用这种风格 普通字典还用原来的下拉框)
dialogCodeVisible: false,
//树型字典配置
codeTreeConfig: {
//弹框标题
title: "案发地区划",
//值字段
nodeKey: "value",
//字典类型
codeType: "CODE_XZQH",
//绑定的model
realValue: null,
//当前要展示的字段
fieldItem: null,
//codeTree预设
props: [],
},
//默认展开的节点
defaultExpandedKeys: [],
};
},
computed: {
newValue() {
// this.getcode();
return this.curFormData[this.curItem.id];
},
},
watch: {
formData(val) {
this.curFormData = val;
},
filterText(val) {
this.$refs.codeTreeDialog.filter(val);
},
newValue(val) {
// if (val != '' && this.codeTreeConfig.fieldItem == null) {
if (val != "") {
var self = this;
//判断是否要回显
if (self.curFormData[self.curItem.id]) {
let parm = {
type: self.currentItem.codeTree,
id: self.curFormData[self.curItem.id],
grade: "prev",
};
debugger;
self.doQueryRequest(parm, "/queryCodeByType").then((codeResult) => {
var thisCodeOptions = [];
if (codeResult.data.success) {
var codRes = codeResult.data.data.data;
var codeArry = [];
var realCodeResult = [];
for (var j = 0; j < codRes.length; j++) {
var singleRow = codRes[j];
if (singleRow.id == val) {
thisCodeOptions.push({
id: singleRow.id,
label: singleRow.label,
});
} else {
if (singleRow.children && singleRow.children.length > 0) {
var thisItem = self.getChildrenItem(val, singleRow);
if (thisItem) {
thisCodeOptions.push({
id: thisItem.id,
label: thisItem.label,
});
}
}
}
}
if (thisCodeOptions.length < 0) {
self.$emit("clearId");
}
self.codeTreeConfig.fieldItem = thisCodeOptions;
}
});
}
}
},
},
methods: {
getcode() {
var self = this;
if (self.curFormData[self.curItem.id]) {
let parm = {
type: self.currentItem.codeTree,
id: self.curFormData[self.curItem.id],
grade: "prev",
};
debugger;
self.doQueryRequest(parm, "/queryCodeByType").then((codeResult) => {
var thisCodeOptions = [];
if (codeResult.data.success) {
var codRes = codeResult.data.data.data;
var codeArry = [];
var realCodeResult = [];
for (var j = 0; j < codRes.length; j++) {
var singleRow = codRes[j];
if (singleRow.id == self.curFormData[self.curItem.id]) {
thisCodeOptions.push({
id: singleRow.id,
label: singleRow.label,
});
} else {
if (singleRow.children && singleRow.children.length > 0) {
var thisItem = self.getChildrenItem(
self.curFormData[self.curItem.id],
singleRow
);
if (thisItem) {
thisCodeOptions.push({
id: thisItem.id,
label: thisItem.label,
});
}
}
}
}
if (thisCodeOptions.length == 0) {
self.$emit("clearId");
}
self.codeTreeConfig.fieldItem = thisCodeOptions;
}
});
}
},
// 搜索树状数据中的 ID
queryTree(tree, id) {
let stark = [];
stark = stark.concat(tree);
while (stark.length) {
const temp = stark.shift();
if (temp[this.defaultProps.children]) {
stark = stark.concat(temp[this.defaultProps.children]);
}
if (temp[this.defaultProps.value] === id) {
return temp[this.defaultProps.label];
}
}
return "";
},
//多选模式下移除tag时触发
removeTag(val) {
let self = this,
label = "";
self.codeTreeConfig.fieldItem.splice(
self.codeTreeConfig.fieldItem.findIndex((item) => item.id === val),
1
);
if (self.codeTreeConfig.fieldItem.length != 0) {
self.codeTreeConfig.fieldItem.forEach((item, index) => {
label += index == 0 ? "" + item.label : "," + item.label;
});
} else {
label = "";
}
this.$emit("getDialogSeleted", label);
},
//可清空的单选模式下用户点击清空按钮时触发
clearSeleted() {
this.$emit("getDialogSeleted", "");
},
//确定选择当前用户
forSureSelectCode() {
var self = this;
var thisCodeOptions = [];
if (self.$refs.codeTreeDialog.getCheckedNodes().length != 0) {
if (self.curItem.multiple) {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedKeys()
);
var selectedNodes = self.$refs.codeTreeDialog.getCheckedNodes();
for (var i = 0; i < selectedNodes.length; i++) {
thisCodeOptions.push({
id: self.$refs.codeTreeDialog.getCheckedNodes()[i].id,
label: self.$refs.codeTreeDialog.getCheckedNodes()[i].label,
});
}
} else {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedNodes()[0].id
);
thisCodeOptions.push({
id: self.$refs.codeTreeDialog.getCheckedNodes()[0].id,
label: self.$refs.codeTreeDialog.getCheckedNodes()[0].label,
});
}
self.codeTreeConfig.fieldItem = thisCodeOptions;
if (self.codeTreeConfig.fieldItem.type == "codeTag") {
self.changeTags(
self.$refs.codeTreeDialog.getCheckedKeys(),
self.codeTreeConfig.fieldItem
);
}
self.$forceUpdate();
if (self.curItem.multiple) {
let label = "";
thisCodeOptions.forEach((item, index) => {
label += index == 0 ? "" + item.label : "," + item.label;
});
self.$emit("getDialogSeleted", label);
} else {
self.$emit("getDialogSeleted", thisCodeOptions[0].label);
}
} else {
//没有选值得情况
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
""
);
self.$forceUpdate();
self.$emit("getDialogSeleted", "");
}
self.dialogCodeVisible = false;
},
//对树节点进行筛选
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1 || data.id.indexOf(value) !== -1;
},
//树节点点击事件(改为点选)
handleNodeClick(data, checked) {
var self = this;
if (!self.curItem.multiple) {
if (checked === true) {
self.codeTreeConfig.codeId = data.id;
self.$refs.codeTreeDialog.setCheckedKeys([data.id]);
} else {
if (self.codeTreeConfig.codeId === data.id) {
self.$refs.codeTreeDialog.setCheckedKeys([]);
}
}
}
},
//树形字典节点点击事件(用来拦截并控制单选)
codeTreeNodeCheck(data, checked, node) {
console.log(data, checked, node);
},
/**
* 展示字典树弹出框
*/
showCodeTreeDialog(value, item, realFormLableAlign, realValueKey) {
var self = this;
//判断是否要回显
if (realFormLableAlign[realValueKey]) {
let parm = {
type: self.currentItem.codeTree,
id: realFormLableAlign[realValueKey],
grade: "prev",
};
debugger;
self.doQueryRequest(parm, "/queryCodeByType").then((codeResult) => {
if (codeResult.data.success) {
var codRes = codeResult.data.data.data;
var codeArry = [];
var realCodeResult = [];
for (var j = 0; j < codRes.length; j++) {
var singleRow = codRes[j];
if (singleRow.children && singleRow.children.length > 0) {
codeArry.push(singleRow.id);
self.getChildrenCode(codeArry, singleRow);
}
}
self.defaultExpandedKeys = codeArry;
}
});
}
if (value) {
self.filterText = "";
self.codeTreeConfig.nodeKey = "value";
self.codeTreeConfig.codeType = item.codeTree;
self.codeTreeConfig.codeId = "";
if (this.curFormData[this.curItem.id] == "") {
self.codeTreeConfig.fieldItem = item;
} else {
if (
self.codeTreeConfig.fieldItem == null ||
self.codeTreeConfig.fieldItem.length == 0 ||
self.codeTreeConfig.fieldItem == ""
) {
self.codeTreeConfig.fieldItem = item;
}
}
self.codeTreeConfig.realFatherValue = realFormLableAlign;
self.codeTreeConfig.realrValueKey = realValueKey;
//先设置一个默认空值
self.codeTreeConfig.realValue = realFormLableAlign[realValueKey];
self.codeTreeConfig.title = item.name;
//延迟加载使弹框的z-index值在el-select之上
setTimeout(() => {
self.dialogCodeVisible = true;
}, 10);
if (item.codeTree == "CODE_AJXZ_MA") {
if (realFormLableAlign["ajlbdm"]) {
self.codeTreeConfig.props = item.codeOptions.slice(0);
self.codeTreeConfig.props.forEach((item) => {
if (item.id == realFormLableAlign["ajlbdm"]) {
self.codeTreeConfig.props = item.children;
return false;
}
});
} else {
self.codeTreeConfig.props = [];
return;
}
} else {
self.codeTreeConfig.props = item.codeOptions;
}
}
},
/**
* 懒加载节点
*/
loadNode(currentNode, resolve) {
var self = this;
var cc = arguments;
let parm = {
type: self.currentItem.codeTree,
};
if (currentNode.level != 0) {
parm.id = currentNode.data.id;
parm.grade = "next";
}
self.doQueryRequest(parm, "/queryCodeByType").then((codeResult) => {
if (codeResult.data.success) {
//判断是否有下级
codeResult.data.data.rows.forEach((realCodeItem) => {
realCodeItem.label =
realCodeItem.label + "[" + realCodeItem.id + "]";
if (realCodeItem.parentFlag == "true") {
realCodeItem.leaf = false;
} else {
realCodeItem.leaf = true;
}
});
resolve(codeResult.data.data.rows);
}
});
},
doQueryRequest(form, relurl) {
var currentUrl = relurl ? relurl : this.cxUrl;
return Http({
url: url.alyIP + currentUrl,
data: form,
params: form,
method: "get",
headers: {
"blade-auth": sessionStorage.getItem("token"),
},
});
},
/**
* 获取子字典数据
*/
getChildrenCode(codeArry, singleRo) {
var self = this;
singleRo.children.forEach((childrenItem) => {
if (childrenItem.children && childrenItem.children.length > 0) {
codeArry.push(childrenItem.id);
self.getChildrenCode(codeArry, childrenItem);
}
});
},
/**
* 获取子字典数据item
*/
getChildrenItem(orgId, singleRo) {
var self = this;
var readyToReturn;
singleRo.children.forEach((childrenItem) => {
if (childrenItem.id == orgId) {
readyToReturn = childrenItem;
} else {
if (childrenItem.children.length > 0) {
readyToReturn = self.getChildrenItem(orgId, childrenItem);
}
}
});
return readyToReturn;
},
},
};
</script>
<style scoped lang="scss">
/deep/ .zdyCodeDialog {
opacity: 0;
}
/deep/ .treeDialog {
width: 680px;
height: 606px;
background: #ffffff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
opacity: 1;
border-radius: 8px;
position: absolute;
top: 40%;
left: 50%;
margin-top: -223px !important;
margin-left: -340px;
z-index: 100;
.el-dialog__body {
height: 500px;
}
}
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 23:21:04
* @LastEditTime: 2021-11-23 17:46:34
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\components\ptCxForm_components.vue
-->
<template>
<div>
<div
class="Content paneDiv paneDiv2"
v-if="pageBs != 'dytj' && propQueryField.length > 0"
>
<div class="cxtjWrap">
<el-row>
<el-col :span="24">
<span class="flTtitle">查询条件</span>
</el-col>
</el-row>
<el-form
label-position="right"
label-width="140px"
ref="queryForm"
:model="formData"
:class="propQueryField.length < 3 ? 'inlineBtn' : ''"
>
<div class="zdyLine">
<el-form-item
:label="item.name ? item.name + ':' : ''"
v-for="item in propQueryField"
:key="item.id"
:prop="item.id"
v-show="!item.hidden"
:class="'demo-input-suffix zdycol' + item.col"
>
<!--<div class="zdName">{{item.name}}</div>-->
<!--输入框-->
<el-input
clearable
:placeholder="item.placeholder"
v-model="formData[item.id]"
v-if="item.type == 'text'"
>
</el-input>
<!--输入框-最大值与最小值-->
<div
class="zdyInputW zdyInputCol2"
v-else-if="item.type == 'zdyText'"
>
<el-input
:placeholder="item.placeholder"
v-model="formData[item.id]"
>
</el-input>
<el-input
:placeholder="item.placeholder2"
v-model="formData[item.id2]"
style="width: calc((100% - 150) / 2)"
>
</el-input>
</div>
<div
class="zdyInputW zdyInputCol2"
v-else-if="item.type == 'zdyDate'"
>
<el-date-picker
v-model="formData[item.id]"
type="date"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
<el-date-picker
v-model="formData[item.id2]"
type="date"
align="right"
:picker-options="item.pickerOptions2"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</div>
<div
class="zdyInputW zdyInputCol2"
v-else-if="item.type == 'texts'"
>
<el-input
type="text"
autosize
resize="none"
:placeholder="item.placeholder"
v-model="formData[item.id]"
>
</el-input>
-
<el-input
type="text"
autosize
resize="none"
:placeholder="item.placeholder"
v-model="formData[item.id2]"
>
</el-input>
</div>
<!--下拉框-->
<el-select
v-model="formData[item.id]"
clearable
:placeholder="item.placeholder"
v-else-if="item.type == 'select'"
>
<el-option
v-for="item3 in item.selectData"
:key="item3.value"
:label="item3.name"
:value="item3.value"
>
</el-option>
</el-select>
<!--文本域-->
<el-input
type="textarea"
autosize
resize="none"
:placeholder="item.placeholder"
v-model="formData[item.id]"
v-else-if="item.type == 'textarea'"
>
</el-input>
<!--日期框 日期时间-->
<el-date-picker
v-model="formData[item.id]"
type="datetime"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
suffix-icon="el-icon-date"
value-format="yyyy-MM-dd HH:mm:ss"
v-else-if="item.type == 'datetime'"
>
</el-date-picker>
<!--日期框-->
<el-date-picker
v-model="formData[item.id]"
type="date"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
suffix-icon="el-icon-date"
v-else-if="item.type == 'date'"
>
</el-date-picker>
<el-date-picker
v-model="formData[item.id]"
type="datetimerange"
align="right"
:picker-options="item.pickerOptions"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
value-format="yyyy-MM-dd HH:mm:ss"
end-placeholder="结束日期"
prefix-icon="el-icon-date"
v-else-if="item.type == 'datetimerange'"
>
</el-date-picker>
<!--多选框-->
<div class="zdyInputW" v-else-if="item.type == 'checkbox'">
<el-checkbox-group v-model="formData[item.id]" size="small">
<el-checkbox
v-for="subitem in item.checkList"
:label="subitem"
:key="subitem.val"
>{{ subitem.label }}</el-checkbox
>
</el-checkbox-group>
</div>
<!--单选框-->
<div class="zdyInputW" v-else-if="item.type == 'radio'">
<el-radio-group v-model="formData[item.id]" size="small">
<el-radio
:label="item2.val"
v-for="item2 in item.radioData"
:key="item2.val"
>{{ item2.label }}
</el-radio>
</el-radio-group>
</div>
<!--字典框 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item.type == 'code' || item.type == 'jlCode'"
>
<select-tree
v-model="formData[item.id]"
:placeholder="'请选择' + item.name"
:options="item.codeOptions"
:sendId="item.id"
/>
</div>
<!--字典弹框 @emitValue="getLbValue"-->
<div class="zdyInputW" v-else-if="item.type == 'codeTreeDialog'">
<select-tree-dialog
:placeholder="'请选择' + item.name"
:sendId="item.id"
:formData="formData"
:currentItem="item"
/>
</div>
<!--字典弹框懒加载 @emitValue="getLbValue"-->
<div
class="zdyInputW"
v-else-if="item.type == 'lazyCodeTreeDialog'"
>
<lazy-select-tree-dialog
:placeholder="'请选择' + item.name"
:sendId="item.id"
:formData="formData"
:currentItem="item"
/>
</div>
<div class="file" v-if="item.type == 'file'">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</el-form-item>
</div>
</el-form>
<!--按钮-->
<div class="btnGrounp">
<!--
<span @click="switchingConditions" class="color1 mg10"><i :class="toggleZd ? 'fa fa-angle-up fa-zdy20':'fa fa-angle-down fa-zdy20'"></i>{{toggleZd ? '收起条件':'更多条件'}}</span>
-->
<div
@click="switchingConditions"
v-if="pageBs == 'bjzycx'"
style="color: #007aff; margin: 6px"
>
<i
:class="
toggleZd
? 'fa fa-angle-up fa-zdy20'
: 'fa fa-angle-down fa-zdy20'
"
></i>
{{ toggleZd == false ? "更多条件" : "收起条件" }}
</div>
<div @click="clearData" class="zdybtn">重置</div>
<div
@click="doQueryBtn(true)"
style="background: #007aff; color: #ffffff"
class="zdybtn"
>
查询
</div>
<div
@click="$emit('yjbtn')"
style="background: #007aff; color: #ffffff"
class="zdybtn"
v-if="pageBs == 'zdryGl'"
>
批量预警
</div>
</div>
</div>
</div>
<div class="Content paneDiv paneDiv2" v-if="pageBs != 'xxtkgzxnpg'">
<el-row style="width: 98%">
<el-col :span="24">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div>
<span class="flTtitle">信息列表</span>
<span class="flTotal">{{ tableDataLength }}条信息</span>
</div>
<div>
<slot name="listOperation"></slot>
<div
class="flTtitle Add"
@click="adds"
v-if="pageBs == 'rwgl'"
>
<i class="el-icon-plus"></i> 新增
</div>
<el-button
type="primary"
size="mini"
v-if="pageBs == 'zczltj'"
@click="$emit('zczltjExport', formData)"
>导出</el-button
>
<el-button
type="primary"
size="mini"
v-if="pageBs == 'wsqfbdzczl'"
@click="$emit('sqfbzl', formData)"
>申请发布指令</el-button
>
<el-button
type="primary"
size="mini"
v-if="pageBs == 'wfqdzczl'"
@click="$emit('toXdzl', formData)"
>下达指令</el-button
>
<el-button
type="primary"
size="mini"
v-if="pageBs == 'wscdaj'"
@click="$emit('ajsx')"
>案件筛选</el-button
>
<el-button
type="primary"
size="mini"
v-if="pageBs == 'zdxxgl'"
@click="$emit('drzjhd')"
>excel导入交易活动</el-button
>
<!-- <el-button
type="primary"
size="mini"
v-if="pageBs == 'queryZjcl'"
@click="$emit('drzjhd')"
>录入证据材料信息</el-button
>-->
<el-button
type="primary"
size="mini"
v-if="pageBs == 'queryZdjyhd'"
@click="$emit('drjyhdry')"
>excel导入交易活动相关人员</el-button
>
</div>
<div class="flTtitle" v-if="pageBs == 'zdryGl' || pageBs == 'dytj'">
<el-radio-group v-model="listMode" class="list-mode" size="small">
<el-radio-button label="1"
><i class="el-icon-s-fold"></i
></el-radio-button>
<el-radio-button label="2"
><i class="el-icon-menu"></i
></el-radio-button>
</el-radio-group>
<el-button
class="returnBtn"
type="primary"
size="mini"
@click="returnBtn"
v-if="pageBs == 'dytj'"
>返回</el-button
>
</div>
</div>
<!--可配置化图标-->
<div
class="inline"
v-if="
pageBszfc == 'laxxgl' ||
pageBszfc == 'zczjxxgl' ||
pageBszfc == 'jaxxgl' ||
pageBszfc == 'jazczjxxgl' ||
pageBszfc == 'cxxxgl' ||
pageBszfc == 'sqmaxxgl' ||
pageBszfc == 'sjjc'
"
>
<!-- <el-button plain
class="zdybtn export"
size="small"
@click="export2Excel"><i class="fa fa-external-link"
aria-hidden="true"
style="margin-right:5px;"></i>导出案件
</el-button>
<el-button plain
class="zdybtn export"
size="small"
@click="exportCriminalSuspect"><i class="fa fa-external-link"
aria-hidden="true"
style="margin-right:5px;"></i>导出犯罪嫌疑人
</el-button>
<el-button plain
class="zdybtn export"
size="small"
@click="exportCasualties"><i class="fa fa-external-link"
aria-hidden="true"
style="margin-right:5px;"></i>导出伤亡人员
</el-button> -->
</div>
<div class="inline" v-if="pageBszfc == 'sjbc'">
<el-button
plain
class="zdybtn export"
size="small"
@click="export2Excel"
><i
class="fa fa-external-link"
aria-hidden="true"
style="margin-right: 5px"
></i
>导出案件
</el-button>
</div>
<!-- <div v-else class="inline">
<el-button plain class="zdybtn export" size="small" @click="export2Excel"
><i
class="fa fa-external-link"
aria-hidden="true"
style="margin-right:5px;"
></i
>导出</el-button
>
</div>-->
</el-col>
</el-row>
<!--表格-->
<el-table
id="ajzbQuery"
v-loading="tableLoading"
element-loading-text="拼命加载中"
:key="key"
ref="itsmDataTable"
:data="tableData"
tooltip-effect="dark"
max-height="600"
style="margin: 0 auto"
width="100%"
size="small"
v-if="listMode != 2"
@select="select"
@selection-change="handleSelectionChange"
@expand-change="rowExpand"
@select-all="onSelectAll"
@row-click="rowClick"
>
<el-table-column
align="center"
:min-width="
columnTitle.width ? columnTitle.width: '160'"
v-for="columnTitle in propdefaultFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
>
<template slot-scope="scope">
<div
v-if="
columnTitle.prop == 'status' && pageBs == 'rwgl'
"
>
<div class="rwgl_s">
<span v-if="scope.row.status == '0'" class="s_stop">STOP</span>
<span v-else class="s_runn">RUNNING</span>
</div>
</div>
<div
v-else-if="
columnTitle.prop == 'ddjg' && pageBs == 'ddrz'
"
>
<div class="ddzr_s">
<span v-if="scope.row.ddjg == '1'" style="color:green;">成功</span>
<span v-else style="color:red;">失败</span>
</div>
</div>
<div
v-else-if="
columnTitle.prop == 'zxjg'&& pageBs == 'ddrz'
"
>
<div class="ddzr_s">
<span v-if="scope.row.zxjg == '1'" style="color:green;">成功</span>
<span v-else style="color:red;">失败</span>
</div>
</div>
<div v-else-if="columnTitle.toDdbz && columnTitle.prop =='ddbz'">
<span
v-if="scope.row.ddbz"
@click="$emit('toDdbz',scope.row)"
class="edit"
style="margin-right: 16px"
>查看</span>
<span v-else></span>
</div>
<div v-else-if="columnTitle.toZxbz && columnTitle.prop =='zxbz'">
<span
v-if="scope.row.zxbz"
@click="$emit('toZxbz',scope.row)"
class="edit"
style="margin-right: 16px"
>查看</span>
<span v-else></span>
</div>
<div v-else-if="columnTitle.toOnline && columnTitle.prop=='onlineAddress'">
<span
@click="$emit('toOnline',scope.row)"
class="edit"
style="margin-right: 16px"
>
查看({{ scope.row.onlineAddress.split('http').length-1 }})
</span>
</div>
<div v-else-if="columnTitle.toIn">
<span
@click="toIn(scope.row)"
class="edit"
style="margin-right: 16px"
v-html="scope.row[columnTitle.prop]"
></span>
</div>
<div v-else-if="columnTitle.toInfor">
<span
@click="toInfor(scope.row)"
class="edit"
style="margin-right: 16px"
v-html="scope.row[columnTitle.prop]"
></span>
</div>
<div
v-else-if="
columnTitle.prop == 'hmywdm' && columnTitle.type == 'selectHm'
"
>
<span v-if="scope.row[columnTitle.prop] == '0'">左眼虹膜</span>
<span v-if="scope.row[columnTitle.prop] == '1'">右眼虹膜</span>
<span v-if="scope.row[columnTitle.prop] == '9'">未知</span>
</div>
<div
v-else-if="
columnTitle.prop == 'zjbw' && columnTitle.type == 'selectZj'
"
>
<span v-if="scope.row[columnTitle.prop] == '11'"
>左鞋底动态花纹</span
>
<span v-if="scope.row[columnTitle.prop] == '13'"
>左正面(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '14'"
>左内侧(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '15'"
>左外侧(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '16'"
>左后跟(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '17'">左鞋底照 </span>
<span v-if="scope.row[columnTitle.prop] == '18'">左赤足</span>
<span v-if="scope.row[columnTitle.prop] == '21'"
>右鞋底动态花纹</span
>
<span v-if="scope.row[columnTitle.prop] == '23'"
>右正面(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '24'"
>右内侧(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '25'"
>右外侧(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '26'"
>右后跟(鞋面)</span
>
<span v-if="scope.row[columnTitle.prop] == '27'">右鞋底照</span>
<span v-if="scope.row[columnTitle.prop] == '28'">右赤足</span>
</div>
<div v-else-if="columnTitle.prop == 'xzgzryzt'"></div>
<div
v-else-if="
columnTitle.prop == 'bzrZp' || columnTitle.prop == 'xyrZp'
"
>
<img :src="scope.row[columnTitle.prop]" alt="" />
</div>
<div v-else-if="columnTitle.prop == 'ryzpDzwjnr'">
<img
:src="'data:image/jpeg;base64,' + scope.row[columnTitle.prop]"
alt=""
/>
</div>
<div
v-else-if="columnTitle.prop == 'codeTxt'"
style="font-size: 13px !important"
>
<el-tag
effect="plain"
class="table-ajtag;cursor: pointer;"
style="color: #409eff; cursor: pointer"
size="small"
v-for="(ajItem, index) in scope.row[columnTitle.prop]"
:key="index"
@click="bqDetail(ajItem, scope.row.zjhm)"
>{{
ajItem != "" &&
index != scope.row[columnTitle.prop].length - 1
? ajItem
: ajItem
}}
</el-tag>
</div>
<div
v-else-if="columnTitle.prop == 'ryflText'"
style="font-size: 13px !important"
>
<el-tag
effect="plain"
class="table-ajtag;cursor: pointer;"
style="color: #409eff; cursor: pointer"
size="small"
v-for="(ajItem, index) in scope.row[columnTitle.prop]"
:key="index"
>{{
ajItem != "" &&
index != scope.row[columnTitle.prop].length - 1
? ajItem
: ajItem
}}
</el-tag>
</div>
<div
v-else-if="columnTitle.prop == 'ajlbCodeTxt'"
style="font-size: 13px !important"
>
<el-tag
effect="plain"
class="table-ajtag"
size="small"
style="color: #409eff"
v-for="(ajItem, index) in scope.row[columnTitle.prop]"
:key="index"
>{{
ajItem != "" &&
index != scope.row[columnTitle.prop].length - 1
? ajItem
: ajItem
}}
</el-tag>
</div>
<div
v-else-if="
(columnTitle.prop == 'wzsz' ||
columnTitle.prop == 'zrzy' ||
columnTitle.prop == 'bhrcs' ||
columnTitle.prop == 'xyrgs' ||
columnTitle.prop == 'jdjl' ||
columnTitle.prop == 'kcbl' ||
columnTitle.prop == 'stzl' ||
columnTitle.prop == 'qtcl') &&
pageBs == 'queryZjcl'
"
>
<span
v-if="scope.row[columnTitle.prop] === 1"
class="el-icon-check"
style="color: #4caf50"
></span>
<span
v-else-if="scope.row[columnTitle.prop] === -1"
class="el-icon-close"
style="color: #ef4c4c"
></span>
<span v-else class="el-icon-minus"></span>
</div>
<div
v-else-if="
(columnTitle.prop == 'wzsz' ||
columnTitle.prop == 'zrzy' ||
columnTitle.prop == 'bhrcs' ||
columnTitle.prop == 'gshbbbj' ||
columnTitle.prop == 'jdjl' ||
columnTitle.prop == 'kcjcbl' ||
columnTitle.prop == 'stzldzsj' ||
columnTitle.prop == 'qt') &&
pageBs == 'queryJcgz'
"
>
{{ scope.row[columnTitle.prop] == "Y" ? "必须" : "非必须" }}
</div>
<div
v-else-if="columnTitle.prop == 'zjhm'"
style="font-size: 13px !important"
>
<span
style="border: 1px solid rgb(64, 158, 255); padding: 0px 4px"
v-if="columnTitle['gradeLev']"
>{{
columnTitle["gradeLev"] == 10
? "一般"
: columnTitle["gradeLev"] == 20
? "危险"
: "高危"
}}</span
>
{{ scope.row[columnTitle.prop] }}
</div>
<div v-else-if="columnTitle.prop == 'openFlag'">
<el-switch
v-model="scope.row[columnTitle.prop]"
active-value="1"
inactive-value="0"
@change="handleSwitch($event, scope.row)"
></el-switch>
</div>
<div v-else-if="columnTitle.prop == 'rzlbdm'">
{{
scope.row[columnTitle.prop] == "01"
? "证据材料日志"
: scope.row[columnTitle.prop] == "02"
? "检查规则日志"
: "案件证据材料检查日志"
}}
</div>
<div v-else-if="columnTitle.prop == 'czbs'">
{{
scope.row[columnTitle.prop] == "ADD"
? "添加"
: scope.row[columnTitle.prop] == "UPD"
? "修改"
: scope.row[columnTitle.prop] == "DEL"
? "删除"
: "查询"
}}
</div>
<div v-else-if="columnTitle.prop == 'sfcb'">
{{ scope.row[columnTitle.prop] == "1" ? "是" : "否" }}
</div>
<div v-else-if="columnTitle.prop == 'zjclmc'">
<el-tag
v-for="(s, k) in getSplit(scope.row[columnTitle.prop])"
:key="k"
effect="dark"
>
{{ s }}
</el-tag>
</div>
<div v-else v-html="scope.row[columnTitle.prop]">
{{ columnTitle.prop }}
</div>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
v-if="pageBs == 'rwgl' || pageBs == 'ddrz' || pageBs == 'zxqgl'"
:width="pageBs == 'rwgl'?'550':'200'"
>
<template slot-scope="scope">
<slot name="btnGroup" :scope="scope"></slot>
<span
@click="$emit('carry', scope)"
class="edit"
v-if="pageBs == 'rwgl'"
style="margin-right: 16px">执行一次</span
>
<span
@click="$emit('queryLog', scope)"
class="edit"
v-if="pageBs == 'rwgl'"
style="margin-right: 16px"
>查询日志</span
>
<span
@click="$emit('registerDot', scope)"
class="edit"
style="margin-right: 16px"
v-if="pageBs == 'rwgl'"
>注册节点</span
>
<span
@click="$emit('nextCarry', scope)"
class="edit"
style="margin-right: 16px"
v-if="pageBs == 'rwgl'"
>下次执行时间</span
>
<span
@click="run(scope)"
class="edit"
style="margin-right: 16px"
v-if="pageBs == 'rwgl'"
>启动</span
>
<span
@click="$emit('edit', scope)"
class="edit"
style="margin-right: 16px"
v-if="pageBs == 'rwgl'||pageBs == 'zxqgl'"
>编辑</span
>
<span
@click="dele(scope)"
class="dele"
style="margin-right: 16px"
v-if="pageBs == 'rwgl'|| pageBs == 'zxqgl'"
>删除</span
>
<span
@click="$emit('toZxrz', scope)"
class="edit"
style="margin-right: 16px"
v-if="pageBs == 'ddrz'"
>执行日志</span
>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
v-if="pageShow"
>
</el-pagination>
</div>
<el-dialog title="详情信息" :visible.sync="dialogTableVisible" width="70%">
<div class="bqdetail" v-for="(item, index) in bqShuju" :key="index">
<div
class="item"
v-for="subitem in detailObj"
:key="subitem.prop"
:class="subitem.col == 3 ? 'col3' : 'col1'"
>
<div v-if="subitem.prop == 'ryxxList'" style="display: flex">
<div class="title">{{ subitem.title }}:</div>
<span
v-for="sunItem in item[subitem.prop]"
:key="sunItem.zhfzxyrCyzjZjhm"
>
<span>{{ sunItem.zhfzxyrXm }};</span>
</span>
</div>
<div v-else style="display: flex">
<div v-if="subitem.title" class="title">{{ subitem.title }}:</div>
<div>{{ item[subitem.prop] }}</div>
</div>
</div>
</div>
<div
v-if="bqShuju.length == 0"
style="
height: 150px;
text-align: center;
line-height: 150px;
font-size: 27px;
"
>
暂无数据
</div>
</el-dialog>
<el-dialog
title="详情信息"
:visible.sync="dialogTableVisibleEdit"
width="35%"
>
<div style="padding: 15px; display: flex">
<div style="padding: 15px; padding-right: 30px">人员标签</div>
<el-checkbox-group v-model="zdyCodeEdit" size="small">
<el-checkbox
style="width: 150px"
v-for="item in allZdyCode"
:label="item.value"
:key="item.value"
:disabled="item.disabled"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisibleEdit = false">取 消</el-button>
<el-button type="primary" @click="EditCode">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import SelectTree from "@c/tree_components.vue";
import SelectTreeDialog from "@c/treeCode_components.vue";
import LazySelectTreeDialog from "@c/lazy_treeCode_components.vue";
import qs from "qs";
export default {
name: "rwPtCxForm",
components: {
SelectTree,
SelectTreeDialog,
LazySelectTreeDialog,
},
/*
* pageBs 当前页面的路由名称
cxQueryField 当前页面的查询条件
cxDefaultFormThead 表头
*/
props: {
tableOperation: {
type: Boolean,
default: () => false,
},
tableOperationWidth: {
type: Number,
default: () => 100,
},
pageASs: String,
pageBs: String,
pageBt: String,
loadingZxzjlList: Boolean,
cxQueryField: {
type: Array,
default: () => [],
},
cxDefaultFormThead: {
type: Array,
default: () => [],
},
cxFormData: Object,
transformFormTable: Object,
cxUrl: String,
header: String,
pageFlag: String,
listOperation: {
type: Array,
default: () => [],
}, //信息列表操作按钮
tableData1: {
type: Array,
default: () => [],
},
},
data() {
return {
toggleZd: false,
srcList: [],
tagType: ["danger", "success", "warning", "info", ""],
tPage: null,
checkResult: true,
asjbh: "",
spType: "",
pageBszfc: this.pageBs,
tableLoading: false, //loading
currentPage1: 1, //表格页码
page_size: 10, //每页显示多少条
pageShow: true, //是否显示分页
formData: this.cxFormData, //查询条件form
propQueryField: this.cxQueryField, //查询条件
key: 1, //table得key
tableDataLength: 0, //表格总数
talbeBhgCount: "", // 不合格
talbehgCount: "", // 合格
tableData: [], //表格数据
propdefaultFormThead: this.cxDefaultFormThead, //表格表头
excelHeader: this.header,
cz: this.pageFlag,
listMode: 1, //重点人员展示切换
dialogTableVisible: false, //重点人员标签弹框展示
bqShuju: [], //重点人员标签数据
detailObj: [
{
prop: "asjbh",
title: "案事件编号",
col: 3,
},
{
prop: "ajmc",
title: "案件名称",
col: 3,
},
{
prop: "asjfsddDzmc",
title: "发案地区",
col: 3,
},
{
prop: "asjfssjAsjfskssj_str",
prop1: "asjfssjAsjfskssj_str",
title: "案发时间",
col: 3,
},
{
prop: "ladwGajgjgdm",
title: "立案单位",
col: 3,
},
{
prop: "zuzdwGajgmc",
title: "主办单位",
col: 3,
},
{
prop: "zuzdwZbrXm",
title: "主办侦查员",
col: 3,
},
{
col: 3,
},
{
col: 3,
},
{
prop: "ajzlb",
title: "案件标注",
col: 1,
},
{
prop: "ryxxList",
title: "人员档案",
col: 1,
},
{
prop: "jyaq",
title: "简要案情",
col: 1,
},
],
zdyCodeEdit: [], //自定义字典编辑
dialogTableVisibleEdit: false, //自定义字典弹框
allZdyCode: [],
zjhm: "",
imageUrl: "",
imgRaw: {},
//选中当前行
selectData: [],
};
},
methods: {
getSplit(dt) {
return dt.split(",");
},
rowExpand(row, expandedRows) {
this.$emit("rowExpand", row);
},
switchingConditions() {
debugger;
this.toggleZd = !this.toggleZd;
this.propQueryField.forEach((val) => {
if (val.hasOwnProperty("hidden")) {
this.$set(val, "hidden", !this.toggleZd); /*修改对象得值并触发视图*/
console.log(val, "/*修改对象得值并触发视图*/");
}
});
},
bjBack(ajbh, type, bzzt) {
var obj = {
ajbh,
type,
bzzt,
};
this.$emit("bjBack", obj);
},
select(selection, row) {
if (this.pageBs == "qyeryrlqbxsBJ") {
// 清除所有选中
this.$refs.itsmDataTable.clearSelection();
if (selection.length === 0) return;
// 将当前点击项选中
this.$refs.itsmDataTable.toggleRowSelection(row, true);
}
},
handleChange(file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.imgRaw = file.raw;
},
handleSelectionChange(row) {
this.selectData = row;
this.$emit("selectionChange", row);
},
onSelectAll() {
if (this.pageBs == "qyeryrlqbxsBJ") {
this.$refs.itsmDataTable.clearSelection();
}
},
rowClick(row) {
if (this.pageBs == "qyeryrlqbxsBJ") {
var selectData = this.selectData;
this.$refs.itsmDataTable.clearSelection();
if (selectData.length === 1) {
selectData.forEach((item) => {
if (item === row) {
this.$refs.itsmDataTable.toggleRowSelection(row, false);
} else {
this.$refs.itsmDataTable.toggleRowSelection(row, true);
}
});
} else {
this.$refs.itsmDataTable.toggleRowSelection(row, true);
}
}
},
EditCode() {
var self = this;
if (this.zdyCodeEdit.length > 0) {
var str = "";
var str2 = "";
this.zdyCodeEdit.forEach((subitem) => {
str = str ? `${str}#${subitem}` : `#${subitem}`;
let index = self.allZdyCode.findIndex(
(item) => item.value == subitem
);
str2 = str2
? `${str2}#${self.allZdyCode[index].name}`
: `#${self.allZdyCode[index].name}`;
});
updateZdyCode({
zjhm: this.zjhm,
zdyCode: str,
zdyCodeTxt: str2,
}).then((res) => {
self.$message.success("修改成功");
self.doQuery("yes");
self.dialogTableVisibleEdit = false;
});
} else {
self.$message.error("请选择");
}
},
toXxdkInsert(scope, route) {
this.$router.push({
path: `/${route}`,
query: {
glxxXxzjbh: scope.row.xzgzrybh,
},
});
console.log(scope.row.xzgzrybh, route);
},
handleSwitch(value, item) {
this.$emit("handleSwitch", { value, id: item.id });
},
audit(scope) {
this.$emit("audit", scope.row);
},
send(scope) {
this.$emit("send", scope.row);
},
sendMessageTo(scope) {
this.$emit("sendMessageTo", scope.row);
},
bqDetail(item, zjhm) {},
returnBtn() {
this.$emit("returnBtn");
},
examine(scope) {
this.$emit("examine", scope);
},
signFor(scope) {
this.$emit("signFor", scope.row.xxzjbh);
},
addFeedBack(scope) {
this.$emit("addFeedBack", scope.row.xxzjbh);
},
newlyLK(scope) {
this.$emit("newlyLK", scope.row.xzgzrybh);
},
revokeLK(scope) {
this.$emit("revokeLK", scope.row.xzgzrybh);
},
newlyLKG(scope) {
this.$emit("newlyLKG", scope.row.xxzjbh);
},
revokeLKG(scope) {
this.$emit("revokeLKG", scope.row.xxzjbh);
},
guoDetail(scope, type) {
if (type == "guo") {
this.$router.pushToTab({
path: "qgAj",
query: {
xszajbh: scope.row.xszajbh,
cbxgfwbzh: scope.row.kyxsyhKh,
},
});
} else {
this.$router.pushToTab({
path: "qsAj",
query: {
xszajbh: scope.row.xszajbh,
cbxgfwbzh: scope.row.kyxsyhKh,
},
});
}
},
edit(scope) {
var self = this;
if (self.pageBs != "zdryGl" && self.pageBs != "dytj") {
self.$emit("edit", scope);
} else {
self.allZdyCode.forEach((subitem) => {
self.$set(subitem, "disabled", false);
});
self.allZdyCode = this.cxQueryField[9].selectData;
self.zdyCodeEdit = [];
self.dialogTableVisibleEdit = true;
let arr = [];
if (scope.row.zdyCode.length > 0) {
arr = scope.row.zdyCode.split("#").splice(1);
arr.forEach((subitem) => {
self.zdyCodeEdit.push(subitem);
let index = self.allZdyCode.findIndex(
(item) => item.value == subitem
);
self.$set(self.allZdyCode[index], "disabled", true);
});
}
this.zjhm = scope.row.zjhm;
}
},
gz(scope) {
if (scope.row.policeId != "") {
this.$confirm("是否取消关注人员?", "提醒", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(() => {
let obj = {
zjhm: scope.row.zjhm,
};
updateUserRybz(obj)
.then((res) => {
if (res.code == 200) {
this.$alert("取消成功!", "提示", {
confirmButtonText: "确定",
type: "success",
});
this.doQuery("yes");
} else {
// this.$message.error('关注失败')
this.$alert("取消失败!", "提示", {
confirmButtonText: "确定",
type: "error",
});
}
})
.catch((err) => {
// this.$message.error('关注失败')
this.$alert("取消失败!", "提示", {
confirmButtonText: "确定",
type: "error",
});
});
})
.catch(() => {});
} else {
this.$confirm("是否确认关注人员?", "提醒", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(() => {
let obj = {
zjhm: scope.row.zjhm,
};
insertUserRybz(obj)
.then((res) => {
if (res.code == 200) {
this.$alert("关注成功!", "提示", {
confirmButtonText: "确定",
type: "success",
});
this.doQuery("yes");
} else {
// this.$message.error('关注失败')
this.$alert("关注失败!", "提示", {
confirmButtonText: "确定",
type: "error",
});
}
})
.catch((err) => {
// this.$message.error('关注失败')
this.$alert("关注失败!", "提示", {
confirmButtonText: "确定",
type: "error",
});
});
})
.catch(() => {});
}
},
dele(scope) {
this.$emit("dele", scope);
},
run(scope) {
this.$emit("run", scope);
},
editRole(scope) {
this.$emit("editRole", scope);
},
editMenu(scope) {
this.$emit("editMenu", scope);
},
oneClickAnalize() {
this.$emit("oneClickAnalize");
},
add() {
this.$emit("add");
},
adds() {
this.$emit("adds");
},
toInfor(data) {
this.$emit("toInfor", data);
},
toIn(data) {
this.$emit("toIn", data);
},
toCY(data) {
this.$emit("toCY", data);
},
toJY(data) {
this.$emit("toJY", data);
},
toBK(data) {
console.log("bk");
this.$emit("toBK", data);
},
toXS(data) {
this.$emit("toXS", data);
},
toLasxxg(asjbh, type, type2) {
let routeData = this.$router.resolve({
path: "/malasxmodify",
query: { asjbh: asjbh, type: type, type2 },
});
window.open(routeData.href, "_blank");
},
closeLoading() {
this.tableLoading = false;
},
showLoading() {
this.tableLoading = true;
},
handleSizeChange(val) {
console.log(val)
this.page_size = val;
this.formData.rows = val;
this.formData.limit = val;
console.log(this.formData,'this.formDatathis.formData')
this.doQuery("yes");
},
clearData() {
let self = this;
for (let i in self.formData) {
if (
i != "rows" &&
i != "page" &&
i != "typeFlag" &&
i != "unitcode" &&
i != "grade" &&
i != "flwssfhgpdbz" &&
i != "limit" &&
i != "dspbz" &&
i != "dwdm"
) {
self.formData[i] = "";
}
}
if (self.formData["rows"]) self.formData["rows"] = 10;
if (self.formData["page"]) self.formData["page"] = 1;
if (self.formData["limit"]) self.formData["limit"] = 10;
},
formatJson(filterVal, jsonData) {
let arr = [];
jsonData.map((v) => {
let arr1 = [];
filterVal.map((j) => {
if (j.indexOf(",") != -1) {
let arr = j.split(",");
let data = "";
for (let i = 0; i <= arr.length - 1; i++) {
data += arr[i].split(":")[0] + ":" + v[arr[i].split(":")[1]];
}
arr1.push(data);
} else {
arr1.push(v[j]);
}
});
arr.push(arr1);
});
return arr;
},
toQueryRequest(form, cxUrl) {
/*post方法*/
return Http({
url: url.BaseURL + cxUrl,
data: JSON.parse(form),
method: "post",
headers: {
"blade-auth": sessionStorage.getItem("token"),
},
});
},
handleCurrentChange(val) {
this.currentPage1 = val;
this.formData.page = val;
this.doQuery("yes");
},
doQueryRequest(form, relurl) {
/*post方法*/
let currentUrl = "";
if (this.pageBs == "yjrwGl") {
currentUrl = `${url.alyIP2}${this.cxUrl}`;
} else {
currentUrl = `${url.alyIP}${this.cxUrl}`;
}
return Http({
url: currentUrl,
data: qs.stringify(form),
method: "post",
headers: {
"blade-auth": sessionStorage.getItem("token"),
},
});
},
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 == 0) {
return "";
} else {
return "success-row";
}
},
//查询表格
doQueryBtn(val) {
this.doQuery("yes");
},
sprops(scope) {
this.$emit("sprops", scope);
},
doQuery(flag) {
// this.showLoading();
var jsonStr = [];
let self = this,
json = {};
// for (let i in self.formData) {
// if (i == "zdyCode" || i == "ryfl") {
// var str = "";
// self.formData[i].forEach((item) => {
// str = str ? `${str},${item}` : `${item}`;
// });
// json[i] = self.formData.zdyCodeTxt
// ? `${str},${self.formData.zdyCodeTxt}`
// : `${str}`;
// } else if (i == "file" || i == "imageFile") {
// json[i] = self.imgRaw;
// } else if (i != "cxSj") {
// json[i] = self.formData[i];
// } else {
// json[i] =
// self.formData[i] != "" && self.formData[i] != null
// ? self.formData[i].join(" - ")
// : "";
// }
// }
// if (this.pageBs == "xxtkgzxnpg" || this.pageBs == "queryHbyptj") {
// debugger;
// this.$emit("doQueryBtn", json);
// } else {
// if (flag) {
// if (
// self.formData.hasOwnProperty("file") ||
// self.formData.hasOwnProperty("imageFile")
// ) {
// let formDatas = new FormData();
// for (let i in self.formData) {
// if (i == "file" || i == "imageFile") {
// formDatas.append(
// i,
// JSON.stringify(self.imgRaw) == "{}" ? "" : self.imgRaw
// );
// } else {
// formDatas.append(i, self.formData[i]);
// }
// }
// postform(`${url.alyIP}${this.cxUrl}`, formDatas).then(
// (response) => {
// if (response.success === true) {
// self.tableData = response.data.rows;
// self.tableDataLength = response.data.total;
// self.tPage = Math.ceil(response.data.total / self.page_size);
// self.talbeBhgCount = response.data.bhgCount;
// self.talbehgCount = response.data.hgCount;
// self.closeLoading();
// } else {
// self.closeLoading();
// }
// }
// );
// } else if (self.pageBs == "bjzycx") {
// debugger;
// jsonStr.push(self.formData);
// let form = new FormData();
// if (self.pageBt == "qgasj") {
// form.append("zylx", "asj");
// } else if (self.pageBt == "qgfzxyr") {
// form.append("zylx", "fzxyr");
// } else if (self.pageBt == "qgxzgzry") {
// form.append("zylx", "asxzgzryj");
// }
// form.append("jsonStr", JSON.stringify(jsonStr));
// postform(`${url.alyIP2}${this.cxUrl}`, form).then((response) => {
// if (response.success === true) {
// self.tableData = response.data.rows;
// self.tableDataLength = response.data.total;
// self.tPage = Math.ceil(response.data.total / self.page_size);
// self.talbeBhgCount = response.data.bhgCount;
// self.talbehgCount = response.data.hgCount;
// self.closeLoading();
// } else {
// self.closeLoading();
// }
// });
// } else {
// self.doQueryRequest(json).then((response) => {
// if (response.success === true) {
// let list = [];
// response.data.rows.forEach((item) => {
// if (item.ajlbCodeTxt) {
// item.ajlbCodeTxt = item.ajlbCodeTxt.split("#").slice(1);
// }
// if (item.ryflText) {
// item.ryflText = item.ryflText.split("#").slice(1);
// }
// if (item.sabqTxt) {
// item.sabqTxt = item.sabqTxt
// .split("#")
// .toString()
// .slice(1)
// .trim();
// }
// if (item.codeTxt) {
// let array = item.codeTxt.split("#").slice(1);
// item.codeTxt = item.codeTxt.split("#").slice(1);
// }
// });
// self.tableData = response.data.rows;
// for (let t in self.transformFormTable) {
// self.tableData.map((res) => {
// res[t] = self.transformFormTable[t][res[t]];
// });
// }
// self.tableDataLength = response.data.total;
// self.tPage = Math.ceil(response.data.total / self.page_size);
// self.talbeBhgCount = response.data.bhgCount;
// self.talbehgCount = response.data.hgCount;
// self.closeLoading();
// } else {
// self.closeLoading();
// }
// });
// }
// }
// }
},
},
mounted() {
var self = this;
self.tableData = self.tableData1
},
computed: {},
watch: {
tableData1:{
handler(val){
this.tableData = val
},
deep:true
}
},
};
</script>
<style>
@import url("../../../assets/iconfont/iconfont.css");
.rightContent .el-textarea__inner,
#formCommonPage .el-textarea__inner {
height: 100px;
}
.flTtitle .el-radio-button:first-child .el-radio-button__inner {
width: 46px;
font-size: 14px;
border-radius: 20px 0 0 20px;
box-shadow: none !important;
padding: 4px 15px;
}
.flTtitle .el-radio-button:last-child .el-radio-button__inner {
width: 46px;
font-size: 14px;
border-radius: 0 20px 20px 0;
box-shadow: none !important;
padding: 4px 15px;
}
.el-dialog {
max-height: 500px;
overflow: auto;
}
.el-dialog__body {
padding: 10px 15px !important;
}
.rightContent .el-input__inner,
#formCommonPage .el-input__inner {
height: 32px;
line-height: 32px;
font-family: inherit;
}
.el-table__header-wrapper th,
.el-table__header-wrapper tr {
background: #f4f6f7;
}
.el-table th,
.el-table tr {
height: 44px !important;
}
.rightContent .el-input__icon,
#formCommonPage .el-input__icon,
.el-input__suffix-inner {
line-height: 32px;
}
.rightContent .el-range-separator {
position: relative;
top: -4px;
}
.rightContent .el-textarea__inner,
#formCommonPage .el-textarea__inner {
width: 100%;
font-family: inherit;
}
.rightContent .el-range-input,
#formCommonPage .el-range-input {
vertical-align: top;
}
.rightContent .el-date-editor .el-range__close-icon {
margin-top: -4px;
}
.rightContent .el-form-item__error {
left: calc(66% - 27px);
top: 12px;
}
/* .success-row {
background-color: #fbf9f4 !important;
} */
.Content .el-input,
.Content .el-date-editor--daterange.el-input__inner {
width: 100% !important;
}
.el-icon-date:before {
content: "\e71f" !important;
}
</style>
<style scoped lang="scss">
@import "../../../assets/styles/rightContent.scss";
.el-dropdown-menu {
height: 324px;
overflow-y: auto;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.returnBtn {
margin-left: 15px !important;
}
.rwgl_s span{
display: inline-block;
padding: 2px 4px;
border-radius: 5px;
}
.rwgl_s .s_stop{
background: #888;
color: #000;
}
.rwgl_s .s_runn{
color: #fff;
background: green;
}
</style>
<template>
<div style="width: 100%">
<!--字典框 @emitValue="getLbValue"-->
<el-select
:placeholder="curItem.placeholder"
v-model="curFormData[curItem.id]"
:class="curItem.code"
style="width: 100%"
popper-class="zdyCodeDialog"
@clear="clearSeleted"
@remove-tag="removeTag"
:popper-append-to-body="false"
:multiple="curItem.multiple"
:disabled="curItem.disabled"
empty-text="请从弹框中选择数据"
@visible-change="
(val, $event) =>
showCodeTreeDialog(val, curItem, curFormData, curItem.id)
"
clearable
>
<el-option
v-for="item2 in codeTreeConfig.fieldItem"
:key="item2.id"
:label="item2.label"
:value="item2.id"
>
</el-option>
</el-select>
<!--多级或多数据下拉框弹框样式-->
<el-dialog
v-if="dialogCodeVisible"
custom-class="treeDialog"
:visible.sync="dialogCodeVisible"
style="z-index: 2020 !important"
:close-on-click-modal="false"
center
>
<div
slot="title"
class="header-title"
style="
text-align: left;
height: 30px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 30px;
opacity: 1;
"
>
<div>{{ codeTreeConfig.title }}</div>
</div>
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
style="
margin-bottom: 4px;
width: calc(100% - 26px) !important;
margin-left: 15px;
margin-top: 2px;
"
>
</el-input>
<div
style="
width: calc(100% - 18px);
height: calc(100% - 42px);
overflow-y: auto;
border-bottom: 1px solid #f2f2f2;
margin-left: 7px;
"
>
<el-tree
:props="defaultProps"
node-key="id"
:filter-node-method="filterNode"
ref="codeTreeDialog"
:default-expanded-keys="[]"
:default-checked-keys="
Array.isArray(curFormData[curItem.id])
? curFormData[curItem.id]
: [...curFormData[curItem.id]]
"
@check="codeTreeNodeCheck"
@check-change="handleNodeClick"
:data="codeTreeConfig.props"
:check-on-click-node="true"
check-strictly
show-checkbox
style="height: 288px"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}[{{ data.id }}]</span>
</span>
</el-tree>
</div>
<div slot="footer" class="dialog-footer ar" style="margin-top: 11px">
<el-button
@click="dialogCodeVisible = false"
style="width: 120px; height: 36px"
>取 消</el-button
>
<el-button
type="primary"
@click="forSureSelectCode"
style="width: 120px; height: 36px"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "treeCode_components",
props: {
formData: Object,
currentItem: Object,
sendId: String,
},
data() {
return {
curFormData: this.formData,
curItem: this.currentItem,
defaultProps: {
parent: "parentId", // 父级唯一标识
value: "id", // 唯一标识
label: "label", // 标签显示
children: "children", // 子级
},
id: this.sendId,
filterText: "",
//多级或多数据下拉框弹框样式(数据量太多时使用这种风格 普通字典还用原来的下拉框)
dialogCodeVisible: false,
//树型字典配置
codeTreeConfig: {
//弹框标题
title: "案发地区划",
//值字段
nodeKey: "value",
//字典类型
codeType: "CODE_XZQH",
//绑定的model
realValue: null,
//当前要展示的字段
fieldItem: null,
//codeTree预设
props: [],
},
fdId: "",
preID: "",
};
},
computed: {
newValue() {
var self = this;
if (this.curItem.id != "" && this.curItem.codeOptions.length != 0) {
if (this.curFormData[this.curItem.id] != this.preID) {
console.log(123);
let value = this.queryTree(
this.curItem.codeOptions,
this.curFormData[this.curItem.id]
);
console.log(value);
this.codeTreeConfig.fieldItem = [];
this.$set(
this.curFormData,
this.curItem.id,
value[0] == undefined ? "" : this.curFormData[this.curItem.id]
);
// 记录之前的值
this.preID = this.curFormData[this.curItem.id];
if (value && value.length > 1) {
var label = "";
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? "" : singleValue,
});
label +=
valueIndex == 0
? "" + (singleValue == undefined ? "" : singleValue)
: "," + (singleValue == undefined ? "" : singleValue);
});
self.$emit("getDialogSeleted", label);
} else if (value && value.length == 1) {
var label = "";
value.forEach((singleValue, valueIndex) => {
if (Array.isArray(self.curFormData[this.curItem.id])) {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? "" : singleValue,
});
} else {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id],
label: singleValue == undefined ? "" : singleValue,
});
}
label +=
valueIndex == 0
? "" + (singleValue == undefined ? "" : singleValue)
: "," + (singleValue == undefined ? "" : singleValue);
});
self.$emit("getDialogSeleted", label);
}
}
}
/*return this.curFormData[this.curItem.id]*/
},
newArr() {
return JSON.parse(JSON.stringify(this.curItem.codeOptions));
},
},
watch: {
newArr: {
handler(newValue, oldValue) {
var self = this;
if (oldValue.length == 0 && this.curFormData[this.curItem.id] != "") {
let value = this.queryTree(
newValue,
this.curFormData[this.curItem.id]
);
this.codeTreeConfig.fieldItem = [];
this.$set(
this.curFormData,
this.curItem.id,
value[0] == undefined ? "" : this.curFormData[this.curItem.id]
);
if (value && value.length > 1) {
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id][valueIndex],
label: singleValue == undefined ? "" : singleValue,
});
});
} else if (value && value.length == 1) {
value.forEach((singleValue, valueIndex) => {
self.codeTreeConfig.fieldItem.push({
id: self.curFormData[this.curItem.id],
label: singleValue == undefined ? "" : singleValue,
});
});
}
}
},
},
formData(val) {
this.curFormData = val;
},
filterText(val) {
clearTimeout(this.fdId);
this.fdId = setTimeout(() => {
this.$refs.codeTreeDialog.filter(val);
}, 500);
},
newValue(val) {
if (val != "") {
let value = this.queryTree(this.curItem.codeOptions, val)[0];
this.codeTreeConfig.fieldItem = [];
this.$set(
this.curFormData,
this.curItem.id,
value == undefined ? "" : val
);
this.codeTreeConfig.fieldItem.push({
id: val,
label: value == undefined ? "" : value,
});
}
},
/*curFormData(val){
if(val[this.id]!=''){
this.codeTreeConfig.fieldItem=[];
var data=JSON.parse(JSON.stringify(this.curItem.codeOptions));
let value=this.queryTree(data, val[this.id]);
this.codeTreeConfig.fieldItem.push({
id: val[this.id],
label: value
})
}
}*/
},
methods: {
// 搜索树状数据中的 ID
queryTree(tree, id) {
const tmp = []; // 路径数组
const FindPos = (sourceTree, sourceId) => {
if (sourceTree.id == sourceId) {
tmp.push(sourceTree.label);
return;
} else {
if (sourceTree.children && sourceTree.children.length != 0) {
sourceTree.children.forEach((item) => {
if (item.id === sourceId) {
// 寻找到指定的元素节点
tmp.push(item.label);
FindPos(tree, sourceTree.id); // 继续寻找上层元素的位置
} else {
// 当前继续寻找别的子项
FindPos(item, sourceId);
}
});
}
}
};
if (Array.isArray(id)) {
id.forEach((singleId) => {
tree.forEach((item2) => {
FindPos(item2, singleId);
});
});
} else {
tree.forEach((item2) => {
FindPos(item2, id);
});
}
return tmp.reverse();
},
removeTag(val) {
let self = this,
label = "";
self.codeTreeConfig.fieldItem.splice(
self.codeTreeConfig.fieldItem.findIndex((item) => item.id === val),
1
);
if (self.codeTreeConfig.fieldItem.length != 0) {
self.codeTreeConfig.fieldItem.forEach((item, index) => {
label += index == 0 ? "" + item.label : "," + item.label;
});
} else {
label = "";
}
this.$emit("getDialogSeleted", label);
},
clearSeleted() {
this.$emit("getDialogSeleted", "");
},
//确定选择当前用户
forSureSelectCode() {
var self = this;
var thisCodeOptions = [];
if (self.$refs.codeTreeDialog.getCheckedNodes().length != 0) {
if (self.curItem.multiple) {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedKeys()
);
var selectedNodes = self.$refs.codeTreeDialog.getCheckedNodes();
for (var i = 0; i < selectedNodes.length; i++) {
thisCodeOptions.push({
id: selectedNodes[i].id,
label: selectedNodes[i].label,
});
}
} else {
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
self.$refs.codeTreeDialog.getCheckedNodes()[0].id
);
thisCodeOptions.push({
id: self.$refs.codeTreeDialog.getCheckedNodes()[0].id,
label: self.$refs.codeTreeDialog.getCheckedNodes()[0].label,
});
}
self.codeTreeConfig.fieldItem = thisCodeOptions;
if (self.codeTreeConfig.fieldItem.type == "codeTag") {
self.changeTags(
self.$refs.codeTreeDialog.getCheckedKeys(),
self.codeTreeConfig.fieldItem
);
}
self.$forceUpdate();
if (self.curItem.multiple) {
let label = "";
thisCodeOptions.forEach((item, index) => {
label += index == 0 ? "" + item.label : "," + item.label;
});
self.$emit("getDialogSeleted", label);
} else {
self.$emit("getDialogSeleted", thisCodeOptions[0].label);
}
} else {
//没有选值得情况
self.$set(
self.codeTreeConfig.realFatherValue,
self.codeTreeConfig.realrValueKey,
""
);
self.$forceUpdate();
self.$emit("getDialogSeleted", "");
}
self.dialogCodeVisible = false;
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1 || data.id.indexOf(value) !== -1;
},
handleNodeClick(data, checked) {
var self = this;
if (!self.curItem.multiple) {
if (checked === true) {
self.codeTreeConfig.codeId = data.id;
self.$refs.codeTreeDialog.setCheckedKeys([data.id]);
} else {
if (self.codeTreeConfig.codeId === data.id) {
self.$refs.codeTreeDialog.setCheckedKeys([]);
}
}
}
},
//树形字典节点点击事件(用来拦截并控制单选)
codeTreeNodeCheck(data, checked, node) {
console.log(data, checked, node);
this.$emit("changeAJLB",data)
},
/**
* 展示字典树弹出框
*/
showCodeTreeDialog(value, item, realFormLableAlign, realValueKey) {
var self = this;
if (value) {
self.filterText = "";
self.codeTreeConfig.nodeKey = "value";
self.codeTreeConfig.codeType = item.codeTree;
self.codeTreeConfig.codeId = "";
if (this.curFormData[this.curItem.id] == "") {
self.codeTreeConfig.fieldItem = item;
} else {
if (
self.codeTreeConfig.fieldItem == null ||
self.codeTreeConfig.fieldItem.length == 0 ||
self.codeTreeConfig.fieldItem == ""
) {
self.codeTreeConfig.fieldItem = item;
}
}
self.codeTreeConfig.realFatherValue = realFormLableAlign;
self.codeTreeConfig.realrValueKey = realValueKey;
//先设置一个默认空值
self.codeTreeConfig.realValue = realFormLableAlign[realValueKey];
self.codeTreeConfig.title = item.name;
//延迟加载使弹框的z-index值在el-select之上
setTimeout(() => {
self.dialogCodeVisible = true;
}, 10);
self.codeTreeConfig.props = item.codeOptions;
}
},
},
mounted() {},
};
</script>
<style scoped>
@font-face {
font-family: "iconfont";
src: url("../../../assets/fonts/iconfont.eot?t=1610626861614"); /* IE9 */
src: url("../../../assets/fonts/iconfont.eot?t=1610626861614#iefix")
format("embedded-opentype"),
/* IE6-IE8 */ url("../../../assets/fonts/iconfont.woff?t=1610626861614")
format("woff"),
url("../../../assets/fonts/iconfont.ttf?t=1610626861614") format("truetype"),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("../../../assets/fonts/iconfont.svg?t=1610626861614#iconfont") format("svg"); /* iOS 4.1- */
}
/deep/ .el-icon-arrow-up {
font-family: "iconfont" !important;
font-size: 16px !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/deep/ .el-icon-arrow-up:before,
.el-icon-arrow-up:after {
content: "\e635";
}
/deep/ .zdyCodeDialog {
opacity: 0;
}
/deep/ .treeDialog {
width: 680px;
height: 446px;
background: #ffffff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
opacity: 1;
border-radius: 8px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -223px !important;
margin-left: -340px;
z-index: 100;
}
</style>
<template>
<el-popover
ref="popover"
placement="bottom-start"
trigger="click"
@show="onShowPopover"
@hide="onHidePopover"
>
<el-tree
ref="tree"
class="select-tree"
:style="{ 'min-width': treeWidth }"
highlight-current
:data="data"
:props="props"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:default-expand-all="false"
@node-click="onClickNode"
/>
<el-input
slot="reference"
ref="input"
v-model="labelModel"
clearable
@clear="clearSeleted"
:class="{ rotate: showStatus }"
:placeholder="placeholder"
suffix-icon="el-icon-arrow-down"
>
<!--<i slot="suffix" class="iconfont iconzidianmaxuanze"></i>-->
</el-input>
</el-popover>
</template>
<script>
export default {
name: "ElSelectTree",
// 设置绑定参数
model: {
prop: "value",
event: "selected"
},
props: {
sendId: String,
// 接收绑定参数
value: String,
// 输入框宽度
width: String,
// 选项数据
options: {
type: Array,
required: true
},
// 输入框占位符
placeholder: {
type: String,
required: false,
default: "请选择"
},
// 树节点配置选项
props: {
type: Object,
required: false,
default: () => ({
parent: "parentId",
value: "id",
label: "label",
children: "children"
})
}
},
data() {
return {
// 树状菜单显示状态
showStatus: false,
// 菜单宽度
treeWidth: "auto",
// 输入框显示值
labelModel: "",
// 实际请求传值
valueModel: ""
};
},
computed: {
// 是否为树状结构数据
dataType() {
const jsonStr = JSON.stringify(this.options);
/*if (process.client) {*/
return jsonStr.indexOf(this.props.children) !== -1;
/* }*/
},
// 若非树状结构,则转化为树状结构数据
data() {
return this.dataType ? this.options : this.switchTree();
}
},
watch: {
labelModel(val) {
if (!val) {
this.valueModel = "";
}
/* if (process.client) {*/
this.$refs.tree.filter(val);
this.$emit("getSeleted", this.labelModel);
/* }*/
},
value(val) {
if (this.sendId && val == "") {
this.$emit("emitQkValue", this.sendId, val);
}
this.labelModel = this.queryTree(this.data, val);
this.$emit("getSeleted", this.labelModel);
}
},
created() {
// 检测输入框原有值并显示对应 label
if (this.value) {
this.labelModel = this.queryTree(this.data, this.value);
}
// 获取输入框宽度同步至树状菜单宽度
this.$nextTick(() => {
/* if (process.client) {*/
this.treeWidth = `${(this.width ||
this.$refs.input.$refs.input.clientWidth) - 24}px`;
/* }*/
});
},
methods: {
clearSearchValue(){
this.labelModel='';
},
clearSeleted() {
this.$emit("getSeleted", this.labelModel);
},
// 单击节点
onClickNode(node) {
this.labelModel = node[this.props.label];
this.valueModel = node[this.props.value];
if (this.sendId) {
this.$emit("emitValue", this.sendId, node.id, node.parentId);
}
this.onCloseTree();
this.$emit("getSeleted", this.labelModel);
},
// 偏平数组转化为树状层级结构
switchTree() {
return this.cleanChildren(this.buildTree(this.options, "0"));
},
// 隐藏树状菜单
onCloseTree() {
/*if (process.client) {
this.$refs.popover.showPopper = false;
}*/
this.$refs.popover.showPopper = false;
},
// 显示时触发
onShowPopover() {
this.showStatus = true;
/* if (process.client) {
this.$refs.tree.filter(false);
}*/
this.$refs.tree.filter(false);
},
// 隐藏时触发
onHidePopover() {
this.showStatus = false;
this.$emit("selected", this.valueModel);
},
// 树节点过滤方法
filterNode(query, data) {
if (!query) return true;
/*if (process.client) {*/
return data[this.props.label].indexOf(query) !== -1;
/* }*/
},
// 搜索树状数据中的 ID
queryTree(tree, id) {
let stark = [];
stark = stark.concat(tree);
/* if (process.client) {*/
while (stark.length) {
const temp = stark.shift();
if (temp[this.props.children]) {
stark = stark.concat(temp[this.props.children]);
}
if (temp[this.props.value] === id) {
return temp[this.props.label];
}
}
/* }*/
return "";
},
// 将一维的扁平数组转换为多层级对象
buildTree(data, id = "0") {
const fa = parentId => {
const temp = [];
/*if (process.client) {*/
for (let i = 0; i < data.length; i++) {
const n = data[i];
if (n[this.props.parent] === parentId) {
n.children = fa(n.rowGuid);
temp.push(n);
}
}
/* }*/
return temp;
};
return fa(id);
},
// 清除空 children项
cleanChildren(data) {
const fa = list => {
list.map(e => {
/*if (process.client) {*/
if (e.children.length) {
fa(e.children);
} else {
delete e.children;
}
/* }*/
return e;
});
return list;
};
return fa(data);
}
}
};
</script>
<style>
.el-input.el-input--suffix {
cursor: pointer;
overflow: hidden;
}
.el-input.el-input--suffix.rotate .el-input__suffix {
transform: rotate(180deg);
}
.select-tree {
max-height: 350px;
overflow-y: scroll;
}
/* 菜单滚动条 */
.select-tree::-webkit-scrollbar {
z-index: 11;
width: 6px;
}
.select-tree::-webkit-scrollbar-track,
.select-tree::-webkit-scrollbar-corner {
background: #fff;
}
.select-tree::-webkit-scrollbar-thumb {
border-radius: 5px;
width: 6px;
background: #b4bccc;
}
.select-tree::-webkit-scrollbar-track-piece {
background: #fff;
width: 6px;
}
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 18:28:56
* @LastEditTime: 2021-11-23 16:47:21
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\ddrz\index.vue
-->
<template>
<div class="Content">
<right-content
ref="rightContent"
:pageBs="pageBs"
:header="header"
:cxFormData="cxFormData"
:cxQueryField="cxQueryField"
:cxDefaultFormThead="cxDefaultFormThead"
:tableData1="tableData"
@add="add"
@dele="dele"
@toZxbz="toZxbz"
@toDdbz="toDdbz"
@toZxrz="toZxrz"
@edit="edit"
></right-content>
</div>
</template>
<script>
import rightContent from "../components/ptCxForm_components.vue";
export default {
name: "ddrz",
components: {
rightContent,
},
data() {
return {
header: "任务调度中心",
pageBs: "ddrz",
cxFormData: {
rows: 10,
page: 1,
zxq: "",
rw: "",
status: "",
ddStart: "",
ddEnd: "",
},
cxQueryField: [
{
name: "执行器",
id: "zxq",
type: "select",
value: "",
selectData:[
{
name:'生成数据执行器',
value:'1'
},
{
name:'生成数据执行器',
value:'2'
},
],
placeholder: "请选择",
col: "3",
},
{
name: "任务",
id: "rw",
type: "select",
value: "",
selectData:[
{
name:'全部',
value:'1'
},
{
name:'生成数据执行器',
value:'2'
},
],
placeholder: "请选择",
col: "3",
},
{
name: "状态",
id: "status",
type: "select",
value: "",
selectData:[
{
name:'全部',
value:'1'
},
{
name:'生成数据执行器',
value:'2'
},
],
placeholder: "请选择",
col: "3",
},
{
name: "调度时间",
id: "ddStart",
id2: "ddEnd",
type: "zdyDate",
value: "",
col: "3",
},
],
cxDefaultFormThead: [
{
label: "任务ID",
prop: "rwid",
},
{
label: "调度时间",
prop: "ddsj",
},
{
label: "调度结果",
prop: "ddjg",
},
{
label: "调度备注",
prop: "ddbz",
toDdbz: true,
},
{
label: "执行时间",
prop: "zxsj",
},
{
label: "执行结果",
prop: "zxjg",
},
{
label: "执行备注",
prop: "zxbz",
toZxbz:true,
},
],
Menu: [
{
id: "ddrz",
label: "调度日志",
index: "ddrz",
auth: "r01",
className: "iconfont iconrizhi",
disabled: false,
},
],
tableData:[
{
rwid:'0',
ddsj:'2021-11-23 14:29:20',
ddjg:'0',
ddbz:'',
zxsj:'2021-11-23 14:29:20',
zxjg:'0',
zxbz:'adasdfas',
},
{
rwid:'1',
ddsj:'2021-11-23 14:29:20',
ddjg:'1',
ddbz:'调度成功',
zxsj:'2021-11-23 14:29:20',
zxjg:'0',
zxbz:'',
},
]
};
},
created() {
this.$store.commit("user/SET_Menu", this.Menu);
},
methods: {
add() {
this.$router.push("adjustZdxsxx");
},
dele(scope) {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteZdxsxx({
xxzjbh: scope.row.xxzjbh,
}).then((res) => {
if (res.success && res.code == 200) {
this.$message({
type: "success",
message: "删除成功",
});
this.$refs.rightContent.doQuery("yes");
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
console.log(scope.row.xxzjbh);
},
//调度结果查看
toDdbz(data) {
this.$alert(data.ddbz, '调度备注', {
confirmButtonText: '确定',
type: 'info'
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
});
},
//执行结果查看
toZxbz(data) {
this.$alert(data.zxbz, '执行备注', {
confirmButtonText: '确定',
type: 'info'
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
});
},
edit(data) {
this.$router.push({
path: "/adjustZdxsxx",
query: {
xxzjbh: data.row.xxzjbh,
},
});
console.log(data.row);
},
//执行日志
toZxrz(data){
// console.log(data)
var domStr = ''
let str = data.row.zxjg == '0'?'失败':'成功'
var obj = {
zxsj:'执行时间:'+ data.row.zxsj,
zxjg:'执行结果:'+ str,
zxbz:'执行备注:'+ data.row.zxbz,
}
for(var i=0;i<Object.keys(obj).length;i++){
domStr += `<div style='text-align:left;'>${obj[Object.keys(obj)[i]]}</div>`
}
this.$alert(domStr, '执行日志', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true
});
}
},
};
</script>
<style>
.el-dialog__body {
padding: 10px 15px !important;
}
.rightContent .el-input__inner,
#formCommonPage .el-input__inner {
height: 32px;
line-height: 32px;
font-family: inherit;
}
.el-table__header-wrapper th,
.el-table__header-wrapper tr {
background: #f4f6f7;
}
.rightContent .el-input__icon,
#formCommonPage .el-input__icon,
.el-input__suffix-inner {
line-height: 36px;
}
.rightContent .el-range-separator {
position: relative;
top: -4px;
}
.rightContent .el-textarea__inner,
#formCommonPage .el-textarea__inner {
width: 100%;
font-family: inherit;
}
.rightContent .el-range-input,
#formCommonPage .el-range-input {
vertical-align: top;
}
.rightContent .el-date-editor .el-range__close-icon {
margin-top: -4px;
}
.rightContent .el-form-item__error {
left: calc(66% - 27px);
top: 12px;
}
.success-row {
background-color: #fbf9f4 !important;
}
.Content .el-input,
.Content .el-date-editor--daterange.el-input__inner {
width: 100% !important;
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/rightContent.scss";
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 23:00:03
* @LastEditTime: 2021-11-22 23:00:04
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\index.vue
-->
<!--
* @Author: your name
* @Date: 2021-11-23 13:19:12
* @LastEditTime: 2021-11-23 14:12:27
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\rwgl\editRwglrwxx.vue
-->
<template>
<div>
<form-compontent
:formField="propFormField"
:formLabelAligns="formLabelAlign"
@submit="submit"
:propTitle="title"
>
</form-compontent>
</div>
</template>
<script>
import formCompontent from "../components/form.vue";
export default {
name: "editRwglrwxx",
components: {
formCompontent,
},
data() {
return {
title: "更新任务",
propFormField: [
//基本信息
{
title: "",
id: 1,
objStr: "",
index: 0,
data: [
{
name: "执行器:",
id: "zxq",
type: "setValue",
codeOptions: [
{
label:'生成数据执行器',
value:'1'
},
{
label:'生成字典执行器',
value:'2'
},
],
value: "",
placeholder: "请输入",
col: "2",
},
{
name: "任务描述:",
id: "rwms",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "路由策略:",
id: "lycl",
type: "setValue",
codeTree: "",
codeOptions: [
{
label:'轮询',
value:'01'
},
{
label:'生成字典执行器',
value:'02'
},
],
value: "",
placeholder: "请选择",
col: "2",
},
{
name: "Cron:",
id: "cron",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "运行模式:",
id: "yxms",
type: "setValue",
codeTree: "",
codeOptions: [
{
label:'BEAN',
value:'01'
},
{
label:'生成字典执行器',
value:'02'
},
],
value: "",
placeholder: "请输入",
col: "2",
},
{
name: "JobHanlder:",
id: "jobhanlder",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "阻塞处理策略:",
id: "zscl",
type: "setValue",
codeTree: "",
codeOptions: [
{
label:'丢弃后续调度',
value:'01'
},
{
label:'生成字典执行器',
value:'02'
},
],
value: "",
placeholder: "请输入",
col: "2",
},
{
name: "子任务ID:",
id: "zrw",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "任务超时时间:",
id: "rwcssj",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "失败重试次数:",
id: "sbcscs",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "负责人:",
id: "fzr",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "报警邮件:",
id: "cjyj",
type: "text",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
{
name: "任务参数:",
id: "rwcs",
type: "textarea",
value: "",
prop: "checkEmpty",
placeholder: "请输入",
col: "2",
},
],
},
],
formLabelAlign: {},
stepList: [
{
title: "基本信息",
active: true,
},
{
title: "人员信息",
active: false,
},
{
title: "社会信息",
active: false,
},
],
Menu: [
{
id: "rwgl",
label: "任务管理",
index: "rwgl",
auth: "r01",
className: "iconfont iconrizhi",
disabled: false,
},
],
xxzjbh: "",
glxxzjbh: "",
};
},
methods: {
submit(params) {
console.log(params);
let loading = this.$loading({
lock: true,
text: "正在保存...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
if (!this.xxzjbh) {
this.addSubmit(params, loading);
} else {
this.editSubmit(params, loading);
}
},
addSubmit(params, loading) {
params.append("glzdxxzjbh", this.glxxzjbh);
insertZdcyryxx(params).then((res) => {
if (res.success && res.code == 200) {
this.$alert("保存成功!", "提示", {
confirmButtonText: "确定",
type: "success",
callback: () => {
this.$router.push("/queryZdcyryxx");
loading.close();
sessionStorage.setItem("routerPath", "queryZdcyryxx");
setTimeout(() => {
this.$bus.$emit("routerPath");
}, 20);
},
});
} else {
loading.close();
}
});
},
editSubmit(params, loading) {
params.append("xxzjbh", this.xxzjbh);
updateZdcyryxx(params).then((res) => {
if (res.success && res.code == 200) {
this.$alert("修改成功!", "提示", {
confirmButtonText: "确定",
type: "success",
callback: () => {
this.$router.push("/queryZdcyryxx");
loading.close();
},
});
} else {
loading.close();
}
});
},
// 搜索树状数据中的 ID
queryTree(tree, id) {
let stark = [];
stark = stark.concat(tree);
while (stark.length) {
const temp = stark.shift();
if (temp[this.defaultProps.children]) {
stark = stark.concat(temp[this.defaultProps.children]);
}
if (temp[this.defaultProps.value] === id) {
return temp[this.defaultProps.label];
}
}
return "";
},
getshuju() {
var self = this;
let loading = this.$loading({
lock: true,
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(255, 255, 255, 0.7)",
});
infoZdcyryxx({
xxzjbh: this.xxzjbh,
}).then((res) => {
var result = res.data.rows;
self.propFormField.forEach((i, iIndex) => {
if (i.data && i.data.length > 0) {
i.data.forEach((j, jIndex) => {
if (j.childrenAsAdd) {
j.childrenAsAdd.forEach((m, mIndex) => {
self.$set(self.formLabelAlign, m.id, result[m.id] || []);
if (result[m.id].length > 0) {
//如果集合有值,则让显示
self.$set(
self.propFormField[iIndex].data[jIndex].childrenAsAdd[
mIndex
],
"flag",
true
);
}
});
} else {
self.$set(
self.formLabelAlign,
j.id,
i.objStr ? result[i.objStr][j.id] : result[j.id]
);
}
});
}
});
self.$forceUpdate();
setTimeout(() => {
loading.close();
}, 500);
});
},
},
created() {
this.$store.commit("user/SET_Breadcrumb", this.Menu);
if (this.$route.query.glxxzjbh) {
this.glxxzjbh = this.$route.query.glxxzjbh;
}
if (this.$route.query.xxzjbh) {
this.title = "修改阵地从业人员信息";
this.xxzjbh = this.$route.query.xxzjbh;
this.getshuju();
}
},
};
</script>
<style scoped lang="scss">
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 18:28:51
* @LastEditTime: 2021-11-23 18:42:42
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\rwgl\index.vue
-->
<template>
<div class="Content">
<right-content
ref="rightContent"
:pageBs="pageBs"
:header="header"
:cxFormData="cxFormData"
:cxQueryField="cxQueryField"
:cxDefaultFormThead="cxDefaultFormThead"
:tableData1="tableData"
@dele="dele"
@carry="carry"
@run="run"
@adds="adds"
@queryLog="queryLog"
@registerDot="registerDot"
@nextCarry="nextCarry"
@edit="edit"
></right-content>
</div>
</template>
<script>
import rightContent from "../components/ptCxForm_components.vue";
export default {
name: "rwgl",
components: {
rightContent,
},
data() {
return {
header: "任务调度中心",
pageBs: "rwgl",
cxFormData: {
zxq:'',
jobhlander:'',
fzr:'',
rwms:'',
rows: 10,
page: 1,
},
Menu: [
{
id: "rwgl",
label: "任务管理",
index: "rwgl",
auth: "r01",
className: "iconfont iconrizhi",
disabled: false,
},
],
cxQueryField: [
{
name: "执行器",
id: "zxq",
type: "select",
value: "",
selectData:[
{
name:'生成数据执行器',
value:'1'
},
{
name:'生成数据执行器',
value:'2'
},
],
placeholder: "请选择",
col: "3",
},
{
name: "任务描述",
id: "rwms",
type: "text",
value: "",
placeholder: "请输入任务描述",
col: "3",
},
{
name: "JobHlander",
id: "jobhlander",
type: "text",
value: "",
placeholder: "请输入JobHlander",
col: "3",
},
{
name: "负责人",
id: "fzr",
type: "text",
value: "",
placeholder: "请输入负责人",
col: "3",
},
],
cxDefaultFormThead: [
{
label: "任务ID",
prop: "rwid",
},
{
label: "任务描述",
prop: "rwms",
},
{
label: "运行模式",
prop: "yxms",
},
{
label: "Cron",
prop: "cron",
width: "200",
},
{
label: "负责人",
prop: "fzr",
},
{
label: "状态",
prop: "status",
},
],
tableData:[
{
rwid:1,
rwms:'122121',
yxms:'BAEN:fwefer',
cron:'0/01?*****',
fzr:'admin',
status:'0'
},
{
rwid:2,
rwms:'122121',
yxms:'BAEN:fadfasdff',
cron:'0/01?*****',
fzr:'admin',
status:'1'
},
{
rwid:3,
rwms:'122121',
yxms:'BAEN:fadfasdff',
cron:'0/01?*****',
fzr:'admin',
status:'0'
},
{
rwid:4,
rwms:'122121',
yxms:'BAEN:fadfasdff',
cron:'0/01?*****',
fzr:'admin',
status:'1'
},
],
ckForm:{
zxq:'',
rwms:'',
rwcssj:'',
sbcscs:'',
fzr:'',
cjyj:'',
rwcs:'',
zrw:'',
zscl:'',
jobhanlder:'',
yxms:'',
cron:'',
lycl:'',
yxms:'',
},
};
},
created() {
this.$store.commit("user/SET_Menu", this.Menu);
},
methods: {
//删除
dele(data) {
var self = this;
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
self.tableData = self.tableData.filter(el=>el.rwid != data.row.rwid)
console.log( self.tableData,' self.tableData self.tableData')
this.$message({
type: "success",
message: "已成功删除",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//执行一次
carry(data) {
console.log(data,'runrunrunrun')
this.$alert('执行完成', '执行一次', {
confirmButtonText: '确定',
type: 'success'
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
});
},
//编辑
edit(data) {
this.$router.push({
path: "/editRwglrwxx",
// query: {
// xxzjbh: data.row.xxzjbh,
// },
});
},
//查询日志
queryLog(data){
this.$router.push({
path: "/ddrz",
// query: {
// xxzjbh: data.row.xxzjbh,
// },
});
},
//注册节点
registerDot(data){
this.$alert('<div>1 <span style="display:inline-block; padding:0 5px;background:green;border-radius: 6px;color:#fff;">http://172.20.1.242:8080/</span></div>', '注册节点', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
});
},
//下次执行时间
nextCarry(data){
var str = util.timeStampTurnTime(new Date())
var arr = []
var domStr = ''
for(var i=0;i<5;i++){
let s = str.split(':');
s[1] = (s[1]*1+i).toString()
s = s.join(':')
arr.push(s)
domStr += `<div style='text-align:center;'>${s}</div>`
}
this.$alert(domStr, '下次执行时间', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true
});
},
//启动
run(data){
var self = this;
self.tableData.map(el=>{
if(el.rwid == data.row.rwid){
el.status = data.row.status == '0'? '1':'0'
}
})
},
//新增
adds(){}
},
};
</script>
<style scoped>
.el-dialog__body {
padding: 10px 15px !important;
}
/* .rightContent .el-input__inner,
#formCommonPage .el-input__inner {
height: 32px;
line-height: 32px;
font-family: inherit;
}
.el-table__header-wrapper th,
.el-table__header-wrapper tr {
background: #f4f6f7;
}
.rightContent .el-input__icon,
#formCommonPage .el-input__icon,
.el-input__suffix-inner {
line-height: 36px;
}
.rightContent .el-range-separator {
position: relative;
top: -4px;
}
.rightContent .el-textarea__inner,
#formCommonPage .el-textarea__inner {
width: 100%;
font-family: inherit;
}
.rightContent .el-range-input,
#formCommonPage .el-range-input {
vertical-align: top;
}
.rightContent .el-date-editor .el-range__close-icon {
margin-top: -4px;
}
.rightContent .el-form-item__error {
left: calc(66% - 27px);
top: 12px;
}
.success-row {
background-color: #fbf9f4 !important;
}
.Content .el-input,
.Content .el-date-editor--daterange.el-input__inner {
width: 100% !important;
} */
</style>
<style scoped lang="scss">
@import "@/assets/styles/rightContent.scss";
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 18:10:32
* @LastEditTime: 2021-11-23 16:47:44
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\yxbb\index.vue
-->
<template>
<div class="Content contentDiv">
<div class="paneDivTop">
<ul>
<li v-for="item in titleArr" :key="item.id">
<div :class="['iconBg',item.fName]">
<i :class="item.iconName"></i>
</div>
<div :class="['wordCont',item.eName]">
<div class="wordTitle">{{ item.wordTitle }}</div>
<div class="wordNum">{{ item.wordNum }}</div>
<div class="wordDescr">{{ item.wordDescr }}</div>
</div>
</li>
</ul>
</div>
<div class="paneDivFoot">
<div class="footTitle">
<h2>调度报表</h2>
<i class="el-icon-s-cooperation"></i>
</div>
<div class="footChart">
<div id="lineCharts" class='lineCharts' ref="lineCharts" style="flex:2;"></div>
<div id="pieCharts" class='pieCharts' ref="pieCharts" style="flex:1;"></div>
</div>
</div>
</div>
</template>
<script>
import rightContent from "@c/ptCxForm_components.vue";
export default {
name: "yxbb",
components: {
rightContent,
},
data() {
return {
header: "任务调度中心",
pageBs: "rwddzx",
Menu: [
{
id: "yxbb",
label: "运行报表",
index: "yxbb",
auth: "M0101",
className: "iconfont iconrizhi",
disabled: false,
},
],
leftMenus: [
//左侧导航(模块第一个页面需要)
{
id: "yxbb",
label: "运行报表",
newAuth: "r01",
index: "yxbb",
className: "iconfont icongongnengfuwu",
hasChildren: false,
},
{
id: "rwgl",
label: "任务管理",
newAuth: "r02",
index: "rwgl",
className: "iconfont icongongnengfuwu",
hasChildren: false,
},
{
id: "ddrz",
label: "调度日志",
newAuth: "r03",
index: "ddrz",
className: "iconfont icongongnengfuwu",
hasChildren: false,
},
{
id: "zxqgl",
label: "执行器管理",
newAuth: "r04",
index: "zxqgl",
className: "iconfont icongongnengfuwu",
hasChildren: false,
},
],
titleArr:[
{
id:0,
iconName:'el-icon-s-flag',
fName:'f1',
eName:'e1',
wordTitle:'任务数量',
wordNum:8,
wordDescr:'调度中心运行的任务数量'
},
{
id:1,
iconName:'el-icon-s-marketing',
fName:'f2',
eName:'e2',
wordTitle:'调度次数',
wordNum:812,
wordDescr:'调度中心触发的调度次数'
},
{
id:2,
iconName:'el-icon-s-operation',
fName:'f3',
eName:'e3',
wordTitle:'执行器数量',
wordNum:81,
wordDescr:'调度中心在线的执行器机器数量'
},
]
};
},
created() {
this.$store.commit("user/SET_Menu", this.Menu);
this.$store.commit("user/SET_LeftMenu", this.leftMenus);
this.$store.commit("user/SET_Header", this.header);
},
methods: {
startMyEcharts() {
var self = this;
// 基于准备好的dom,初始化echarts实例
let lineCharts = this.$echarts.init(
document.getElementById("lineCharts")
);
let pieCharts = this.$echarts.init(document.getElementById("pieCharts"));
lineCharts.setOption({
title: {
text: "日期分布图",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: [
{
name: "成功",
itemStyle: {
color: "green",
},
lineStyle: {
color: "green",
},
},
{
name: "失败",
itemStyle: {
color: "red",
},
lineStyle: {
color: "red",
},
},
{
name: "进行中",
itemStyle: {
color: "yellow",
},
lineStyle: {
color: "yellow",
},
},
],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: [
"2021-11-15",
"2021-11-16",
"2021-11-17",
"2021-11-18",
"2021-11-19",
"2021-11-20",
"2021-11-21",
],
},
],
yAxis: [
{
type: "value",
min: 0,
max: 3000,
},
],
series: [
{
name: "成功",
type: "line",
areaStyle: {
color: "green",
},
itemStyle: {
normal: {
color: "green",
lineStyle: {
color: "green",
},
},
},
emphasis: {
focus: "series",
},
data: [0, 0, 191, 234, 1000, 2000, 2500],
},
{
name: "失败",
type: "line",
areaStyle: {
color: "red",
},
itemStyle: {
normal: {
color: "red",
lineStyle: {
color: "red",
},
},
},
emphasis: {
focus: "series",
},
data: [0, 0, 200, 200, 400, 500, 1500],
},
{
name: "进行中",
type: "line",
areaStyle: {
color: "yellow",
},
itemStyle: {
normal: {
color: "yellow",
lineStyle: {
color: "yellow",
},
},
},
emphasis: {
focus: "series",
},
data: [0, 0, 0, 0, 0, 0, 0],
},
],
});
pieCharts.setOption({
title: {
text: "成功比例图",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
},
series: [
{
name: "成功比例图",
type: "pie",
radius: "50%",
data: [
{
value: 1048,
name: "成功",
itemStyle: {
color: "green",
},
lineStyle: {
color: "green",
},
label: {
normal: {
textStyle: {
color: "green", // 改变标示文字的颜色
},
},
},
},
{
value: 200,
name: "失败",
itemStyle: {
color: "red",
},
lineStyle: {
color: "red",
},
label: {
normal: {
textStyle: {
color: "red", // 改变标示文字的颜色
},
},
},
},
{
value: 0,
name: "进行中",
itemStyle: {
color: "yellow",
},
lineStyle: {
color: "yellow",
},
label: {
normal: {
textStyle: {
color: "yellow", // 改变标示文字的颜色
},
},
},
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
},
mounted() {
this.startMyEcharts();
},
};
</script>
<style scoped lang="scss">
.paneDivTop {
width: 100%;
padding-top: 20px;
ul {
margin-right: 20px;
display: flex;
justify-content: space-between;
li {
width: 350px;
display: flex;
height: 100px;
color: #fff;
.f{
background: #013658;
}
.e1{
background: #006ba8;
}
.f2{
background: #5f1d02;
}
.e2{
background: #9f3700;
}
.f3{
background: #011a05;
}
.e3{
background: #033c05;
}
}
}
}
.iconBg {
height: 100%;
background: #013658;
color: #fff;
flex: 1;
text-align: center;
i {
font-size: 40px;
line-height: 100px;
}
}
.wordCont {
height: 100%;
color: #fff;
flex: 3;
background: #006ba8;
div{
padding-left: 10px;
font-size: 14px;
margin-top: 5px;
}
.wordDescr{
border-top: 2px solid #fff;
}
}
.paneDivFoot {
height: 100%;
background: #fff;
padding: 0 20px 14px;
margin: 20px 20px 20px 0;
}
.footTitle {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
margin-bottom: 10px;
}
.footTitle {
border-bottom: 1px solid #666;
h2{
font-weight: 0;
}
i{
display: block;
font-size: 20px;
}
}
.footChart {
display: flex;
align-items: center;
div{
height: 450px;
}
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/rightContent.scss";
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 18:28:46
* @LastEditTime: 2021-11-23 16:44:45
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \founder_vue\src\views\rwddzx\zxqgl\index.vue
-->
<template>
<div class="Content">
<right-content
:pageBs="pageBs"
:header="header"
:cxFormData="cxFormData"
:cxQueryField="cxQueryField"
:cxDefaultFormThead="cxDefaultFormThead"
ref="rightContent"
:tableData1="tableData"
@edit="edit"
@dele="dele"
@toOnline="toOnline"
@selectionChange="selectionChange"
></right-content>
<!-- 编辑 -->
<el-dialog
title="编辑执行器"
:visible.sync="actuatorVisiable"
width="40%"
@closed="closed"
>
<el-form :inline="true" :model="ckForm" class="demo-form-inline" label-position="right" label-width="100px">
<el-row style="margin-top: 20px">
<el-col :span="20" :offset="2" >
<el-form-item label="AppName:">
<el-input v-model="ckForm.appname"></el-input>
</el-form-item>
</el-col>
<el-col :span="20" :offset="2">
<el-form-item label="名称:">
<el-input v-model="ckForm.othername"></el-input>
</el-form-item>
</el-col>
<el-col :span="20" :offset="2">
<el-form-item label="注册方式:">
<el-radio-group v-model="ckForm.resource">
<el-radio label="自动注册"></el-radio>
<el-radio label="手动录入"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="20" :offset="2">
<el-form-item label="注册地址:">
<el-input type="textarea" v-model="ckForm.onlineAddress"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="actuatorVisiable = false">取 消</el-button>
<el-button type="primary" @click="submitCKD">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import rightContent from "../components/ptCxForm_components.vue";
export default {
name: "zxqgl",
components: {
rightContent,
},
data() {
return {
header: "任务调度中心",
pageBs: "zxqgl",
cxFormData: {
appname: "",
othername: "",
limit: 10,
page: 1,
},
cxQueryField: [
{
name: "AppName",
id: "appname",
type: "text",
value: "",
placeholder: "请输入AppName",
col: "3",
},
{
name: "名称",
id: "othername",
type: "text",
value: "",
placeholder: "请输入名称",
col: "3",
},
],
cxDefaultFormThead: [
{
label: "AppName",
prop: "appname",
width: "200",
},
{
label: "名称",
prop: "othername",
width: "200",
},
{
label: "注册方式",
prop: "zcfs",
width: "200",
},
{
label: "Online机器地址",
prop: "onlineAddress",
toOnline:true,
width: "200",
},
],
Menu: [
{
id: "zxqgl",
label: "执行器管理",
index: "zxqgl",
auth: "r01",
className: "iconfont iconrizhi",
disabled: false,
},
],
tableData:[
{
id:'0',
appname:'aapp-dfdsaf-creare-sdafasd',
othername:'生成数据执行器',
zcfs:'手动录入',
onlineAddress:'http://172.20.1.242:8080/,http://172.20.1.242:8080/',
},
{
id:'1',
appname:'aapp-dfdsaf-creare-sdafasd',
othername:'生成数据执行器',
zcfs:'手动录入',
onlineAddress:'http://172.20.1.242:8080/,http://172.20.1.242:8080/',
},
{
id:'2',
appname:'aapp-dfdsaf-creare-sdafasd',
othername:'生成数据执行器',
zcfs:'手动录入',
onlineAddress:'http://172.20.1.242:8080/,http://172.20.1.242:8080/',
},
],
selectArr: [],
actuatorVisiable: false,
ckForm: {
appname: "",
othername: "",
resource: "",
onlineAddress: "",
},
fileArr: [],
zdXxzjbh: "",
};
},
created() {
this.$store.commit("user/SET_Menu", this.Menu);
},
methods: {
edit(scope) {
var self = this;
for(let key in self.ckForm){
self.ckForm[key] = scope.row[key]
}
this.actuatorVisiable = true
},
dele(scope) {
var self = this;
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
self.tableData = self.tableData.filter(el=>el.id != scope.row.id)
console.log( self.tableData,' self.tableData self.tableData')
this.$message({
type: "success",
message: "已成功删除",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
fileOnchange(file, fileList) {
if (fileList.length > 0) {
this.fileArr = [fileList[0]]; // 这一步,是 展示最后一次选择的csv文件
if (fileList.length > 1) this.$message.error("只能上传一个文件!");
}
},
closed() {
this.actuatorVisiable = false
},
onChange(file, fileList) {
console.log(file, fileList);
},
selectionChange(scope) {
this.selectArr = scope;
},
submitCKD() {
this.actuatorVisiable = false
},
//查看Online机器地址
toOnline(data){
var str = data.onlineAddress
var arr = []
var domStr = ''
if(str.indexOf(',') != -1){
arr = str.split(',')
}else{
arr.push(str)
}
for(var i=0;i<arr.length;i++){
domStr += `<div style='text-align:center;'>${arr[i]}</div>`
}
this.$alert(domStr, 'Online机器地址', {
confirmButtonText: '确定',
dangerouslyUseHTMLString: true
});
},
},
};
</script>
<style scoped>
.el-dialog__body {
padding: 10px 15px !important;
}
.el-form-item{
margin-bottom: 10px !important;
}
.el-input,.el-textarea{
min-width: 300px;
}
</style>
<style scoped lang="scss">
@import "@/assets/styles/rightContent.scss";
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 16:46:06
* @LastEditTime: 2021-11-23 15:00:33
* @LastEditTime: 2021-11-23 17:41:23
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \刑侦二期(1)\founder_vue\src\views\sf\sfgl.vue
-->
<template>
<div>
<div style="padding-left: 20px">
<right-content
:pageBs="pageBs"
:header="header"
......@@ -22,7 +22,12 @@
@search="search"
></right-content>
<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
<el-form :model="sfForm" :rules="rules" ref="ruleForm" style="margin-top:25px">
<el-form
:model="sfForm"
:rules="rules"
ref="ruleForm"
style="margin-top: 25px"
>
<el-form-item
label="算法名称"
:label-width="formLabelWidth"
......@@ -223,18 +228,20 @@ export default {
*/
fb(msg) {
let self = this;
console.log(msg);
this.cxListForm.forEach((item) => {
if (
msg.row.sflj == item.sflj &&
msg.row.sfmc == item.sfmc &&
msg.row.sfcs == item.sfcs
) {
self.$set(item, "sffb", "是");
}
});
sessionStorage.setItem("cxListForm", JSON.stringify(self.cxListForm));
this.$confirm("是否确认发布", "提示", { type: "warning" })
.then((_) => {
this.cxListForm.forEach((item) => {
if (
msg.row.sflj == item.sflj &&
msg.row.sfmc == item.sfmc &&
msg.row.sfcs == item.sfcs
) {
self.$set(item, "sffb", "是");
}
});
sessionStorage.setItem("cxListForm", JSON.stringify(self.cxListForm));
})
.catch((_) => {});
},
/**
* @description: 下线
......@@ -242,20 +249,21 @@ export default {
* @return {*}
*/
xx(msg) {
console.log(msg);
let self = this;
console.log(msg);
this.cxListForm.forEach((item) => {
if (
msg.row.sflj == item.sflj &&
msg.row.sfmc == item.sfmc &&
msg.row.sfcs == item.sfcs
) {
self.$set(item, "sffb", "否");
}
});
sessionStorage.setItem("cxListForm", JSON.stringify(self.cxListForm));
this.$confirm("是否确认下线", "提示", { type: "warning" })
.then((_) => {
this.cxListForm.forEach((item) => {
if (
msg.row.sflj == item.sflj &&
msg.row.sfmc == item.sfmc &&
msg.row.sfcs == item.sfcs
) {
self.$set(item, "sffb", "否");
}
});
sessionStorage.setItem("cxListForm", JSON.stringify(self.cxListForm));
})
.catch((_) => {});
},
/**
* @description: 新增确定
......@@ -276,7 +284,7 @@ export default {
code: 200,
message: "成功",
data: {
mrRwSize: Math.round(Math.random()*100),
mrRwSize: Math.round(Math.random() * 100),
mpRwList: [],
},
},
......@@ -318,5 +326,4 @@ export default {
</script>
<style>
</style>
<!--
* @Author: your name
* @Date: 2021-11-22 17:23:43
* @LastEditTime: 2021-11-23 14:33:50
* @LastEditTime: 2021-11-23 17:50:24
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \刑侦二期(1)\founder_vue\src\views\sf\ssfmn.vue
-->
<template>
<div>
<div style="padding: 20px">
<div class="boxsf" v-for="(item, idx) in list" :key="idx">
<div class="rybq">
<span> {{ item.sfmc }}</span>
......@@ -122,8 +122,9 @@ export default {
<style lang="scss" scoped>
.boxsf {
margin: 5px;
padding: 10px;
// margin: 5px;
margin-bottom: 20px;
padding: 15px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #eaeaea;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment