395 lines
14 KiB
Vue
395 lines
14 KiB
Vue
<template>
|
||
<ai-detail class="AppPatrolReportSet">
|
||
<ai-title slot="title" title="巡查上报设置" isShowBottomBorder>
|
||
<el-button size="small" type="primary" icon="iconfont iconAdd" slot="rightBtn" @click="add">添加节点</el-button>
|
||
</ai-title>
|
||
<template slot="content">
|
||
<div class="list" v-if="list.length">
|
||
<div class="item" v-for="(item, index) in list" :key="index">
|
||
<div class="btn">
|
||
<el-button type="text" @click="edit(index)">编辑</el-button>
|
||
<el-button type="text" @click="del(index)">删除</el-button>
|
||
</div>
|
||
<div class="index">{{index < 9 ? `0${index+1}` : `${index+1}`}}</div>
|
||
<div class="info">
|
||
<div class="label">节点类型</div>
|
||
<div class="value">{{item.nodeType == 0 ? '首节点' : $dict.getLabel('prfcNodeType', item.nodeType)}}</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="label">上级节点网络</div>
|
||
<div class="value">{{item.girdName}}</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="info">
|
||
<div class="label">生效功能</div>
|
||
<div class="value">
|
||
<span v-if="item.functionAdd == 1">添加</span>
|
||
<span v-if="item.functionHandle == 1">办理</span>
|
||
<span v-if="item.functionTransmit == 1">转交</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="label">生效身份</div>
|
||
<div class="value">
|
||
<span v-if="item.roleAdmin == 1">网格员</span>
|
||
<span v-if="item.roleMember == 1">网格长</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="item.nodeType == 3">
|
||
<div class="info">
|
||
<div class="label">同级节点网络</div>
|
||
<div class="value">{{item.girdName2}}</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="info">
|
||
<div class="label">生效功能</div>
|
||
<div class="value">
|
||
<span v-if="item.functionAdd == 1">添加</span>
|
||
<span v-if="item.functionHandle == 1">办理</span>
|
||
<span v-if="item.functionTransmit == 1">转交</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="label">生效身份</div>
|
||
<div class="value">
|
||
<span v-if="item.roleAdmin == 1">网格员</span>
|
||
<span v-if="item.roleMember == 1">网格长</span>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="info">
|
||
<div class="label">条件约束</div>
|
||
<div class="value">名称约束</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ai-empty v-else>暂无数据</ai-empty>
|
||
|
||
<ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="$refs.form.resetFields()" @onConfirm="onConfirm" width="70%">
|
||
<el-form ref="form" :rules="rules" size="small" :model="form" label-width="110px">
|
||
<el-form-item label="节点类型" prop="nodeType" v-if="form.nodeType === '0'">
|
||
<ai-select disabled
|
||
v-model="form.nodeType"
|
||
clearable
|
||
placeholder="请选择..."
|
||
:selectList="nodeTypeDictList">
|
||
</ai-select>
|
||
</el-form-item>
|
||
<el-form-item label="节点类型" prop="nodeType" v-else>
|
||
<ai-select :disabled="getGirdList.length == 1 && form.nodeType == '1'"
|
||
v-model="form.nodeType"
|
||
clearable
|
||
placeholder="请选择..."
|
||
:selectList="dict.getDict('prfcNodeType')" @change="changeNodeType">
|
||
</ai-select>
|
||
</el-form-item>
|
||
<el-form-item label="选择节点网格" prop="girdId" >
|
||
<ai-picker v-if="form.nodeType === '0'"
|
||
:ops="{label: 'girdName'}"
|
||
dialogTitle="选择节点网格"
|
||
action="/app/appgirdinfo/girdList"
|
||
:instance="instance"
|
||
@pick="onGirdChange"
|
||
v-model="form.girdIdList">
|
||
<div class="userSelcet">
|
||
<span style="color: #606266;" v-if="form.girdIdList.length">{{ form.girdName }}</span>
|
||
<span v-else>选择节点网格</span>
|
||
<i class="el-icon-arrow-down"></i>
|
||
</div>
|
||
</ai-picker>
|
||
<el-input placeholder="节点网格" v-model="form.girdName" disabled v-else></el-input>
|
||
<el-checkbox v-model="sameLevelUsed" disabled>当前选中网格层级生效</el-checkbox>
|
||
<el-checkbox v-model="form.onlyCoordination" v-if="form.nodeType == '2'" true-label="1" false-label="0">仅协同部门</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="生效功能">
|
||
<el-checkbox v-model="form.functionAdd" true-label="1" false-label="0">添加</el-checkbox>
|
||
<el-checkbox v-model="form.functionHandle" true-label="1" false-label="0">办理</el-checkbox>
|
||
<el-checkbox v-model="form.functionTransmit" true-label="1" false-label="0">转交</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="生效身份">
|
||
<el-checkbox v-model="form.roleMember" true-label="1" false-label="0">网格员</el-checkbox>
|
||
<el-checkbox v-model="form.roleAdmin" true-label="1" false-label="0">网格长</el-checkbox>
|
||
</el-form-item>
|
||
<div v-if="form.nodeType == 3">
|
||
<el-form-item label="同级节点网格" prop="girdId2">
|
||
<el-input placeholder="节点网格" v-model="form.girdName2" disabled></el-input>
|
||
<el-checkbox v-model="sameLevelUsed" disabled>当前选中网格层级生效</el-checkbox>
|
||
<el-checkbox v-model="form.onlyCoordination" v-if="form.nodeType == '3'" true-label="1" false-label="0">仅协同部门</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="生效功能">
|
||
<el-checkbox v-model="form.functionAdd2" true-label="1" false-label="0">添加</el-checkbox>
|
||
<el-checkbox v-model="form.functionHandle2" true-label="1" false-label="0">办理</el-checkbox>
|
||
<el-checkbox v-model="form.functionTransmit2" true-label="1" false-label="0">转交</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="生效身份">
|
||
<el-checkbox v-model="form.rroleMember2" true-label="1" false-label="0">网格员</el-checkbox>
|
||
<el-checkbox v-model="form.oleAdmin2" true-label="1" false-label="0">网格长</el-checkbox>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</ai-dialog>
|
||
</template>
|
||
<template slot="footer">
|
||
<el-button @click="getList">返回</el-button>
|
||
<el-button type="primary" @click="confirm">提交</el-button>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'AppPatrolReportSet',
|
||
label: '巡查上报设置',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
dialog: false,
|
||
dialogTitle: '',
|
||
form: {
|
||
nodeType: '', //0：首节点、1：上级、2：同级、3：混合
|
||
girdIdList: [],
|
||
girdId: '',
|
||
girdCode: '',
|
||
girdLevel: '',
|
||
girdName: '',
|
||
functionAdd: '1',
|
||
functionHandle: '1',
|
||
functionTransmit: '1',
|
||
roleAdmin: '1',
|
||
roleMember: '1',
|
||
girdId2: '',
|
||
girdCode2: '',
|
||
girdLevel2: '',
|
||
girdName2: '',
|
||
functionAdd2: '1',
|
||
functionHandle2: '1',
|
||
functionTransmit2: '1',
|
||
roleAdmin2: '1',
|
||
roleMember2: '1',
|
||
onlyCoordination: '1'
|
||
},
|
||
list: [],
|
||
nodeTypeDictList: [{dictName: '首节点', dictValue: '0'}],
|
||
sameLevelUsed: true,
|
||
getGirdList: [],
|
||
editIndex: ''
|
||
}
|
||
},
|
||
computed: {
|
||
rules() {
|
||
return {
|
||
nodeType: [{ required: true, message: '请选择节点类型', trigger: 'change'}],
|
||
girdId: [{ required: true, message: '请选择节点网络', trigger: 'change'}],
|
||
girdId2: [{ required: true, message: '请选择同级节点网格', trigger: 'change'}],
|
||
}
|
||
},
|
||
},
|
||
created() {
|
||
this.dict.load('prfcNodeType').then(() => {
|
||
this.getList()
|
||
})
|
||
},
|
||
methods: {
|
||
add() {
|
||
this.form = {
|
||
nodeType: '', //0：首节点、1：上级、2：同级、3：混合
|
||
girdIdList: [],
|
||
girdId: '',
|
||
girdCode: '',
|
||
girdLevel: '',
|
||
girdName: '',
|
||
functionAdd: '1',
|
||
functionHandle: '1',
|
||
functionTransmit: '1',
|
||
roleAdmin: '1',
|
||
roleMember: '1',
|
||
girdId2: '',
|
||
girdCode2: '',
|
||
girdLevel2: '',
|
||
girdName2: '',
|
||
functionAdd2: '1',
|
||
functionHandle2: '1',
|
||
functionTransmit2: '1',
|
||
roleAdmin2: '1',
|
||
roleMember2: '1',
|
||
onlyCoordination: '1'
|
||
}
|
||
if(this.list.length > 0) {
|
||
this.getGird(this.list.length-1)
|
||
}else { //首节点
|
||
this.form.nodeType = '0'
|
||
}
|
||
this.dialogTitle = '添加节点'
|
||
this.dialog = true
|
||
this.$refs.form.resetFields()
|
||
},
|
||
del(index) {
|
||
this.$confirm('确定删除该节点？').then(() => {
|
||
this.list.splice(index, 1)
|
||
})
|
||
},
|
||
edit(index) {
|
||
this.editIndex = index
|
||
this.form = {...this.list[index]}
|
||
if(this.form.nodeType != '0') {
|
||
this.getGird(index-1)
|
||
}
|
||
this.dialogTitle = '编辑节点'
|
||
this.dialog = true
|
||
},
|
||
onConfirm() {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
if(this.dialogTitle == '添加节点') {
|
||
this.list.push(this.form)
|
||
}else {
|
||
this.list.splice(this.editIndex, 1, this.form)
|
||
}
|
||
this.dialog = false
|
||
}
|
||
})
|
||
},
|
||
getList() {
|
||
this.instance.post(`/app/apppatrolreportflowconfigv2/queryNew`).then(res => {
|
||
if (res.code == 0) {
|
||
this.list = res.data
|
||
}
|
||
})
|
||
},
|
||
onGirdChange(e) {
|
||
this.form.girdId = e[0].id
|
||
this.form.girdCode = e[0].girdCode
|
||
this.form.girdLevel = e[0].girdLevel
|
||
this.form.girdName = e[0].girdName
|
||
},
|
||
changeNodeType(e) { //1 上下级节点取数组0；2同级节点选择数组1; 3混合节点主取数组0，同级选择数组1
|
||
console.log(e)
|
||
var arr = []
|
||
if(e == 1) {
|
||
arr.push(this.getGirdList[0])
|
||
}
|
||
if(e == 2) {
|
||
arr.push(this.getGirdList[1])
|
||
}
|
||
if(e == 3) {
|
||
arr.push(this.getGirdList[0])
|
||
this.form.girdId2 = this.getGirdList[1].id
|
||
this.form.girdCode2 = this.getGirdList[1].girdCode
|
||
this.form.girdLevel2 = this.getGirdList[1].girdLevel
|
||
this.form.girdName2 = this.getGirdList[1].girdName
|
||
}
|
||
this.onGirdChange(arr)
|
||
},
|
||
getGird(index) {
|
||
var girdCode = this.list[index].girdCode
|
||
this.instance.post(`app/apppatrolreportflowconfigv2/choiseGird?previousGirdCode=${girdCode}`).then(res => {
|
||
if (res.code == 0) {
|
||
this.getGirdList = res.data
|
||
if(res.data.length == 1 && this.dialogTitle == '添加节点') { //返回数据一条表示nodeType 1 上下级节点；混合节点主去数组0，同级选择数组1；同级节点选择数组1
|
||
this.form.nodeType = '1'
|
||
this.onGirdChange(res.data)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
confirm() {
|
||
this.instance.post(`/app/apppatrolreportflowconfigv2/addOrUpdate`, this.list).then(res => {
|
||
if (res.code == 0) {
|
||
this.$message.success('提交成功')
|
||
this.getList()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppPatrolReportSet {
|
||
height: 100%;
|
||
.list {
|
||
padding: 0 16px 16px;
|
||
background-color: #fff;
|
||
}
|
||
.item {
|
||
padding: 16px 0 4px 26px;
|
||
position: relative;
|
||
border-bottom: 1px solid #F2F2F2;
|
||
.info {
|
||
height: 22px;
|
||
font-family: MicrosoftYaHei;
|
||
font-size: 14px;
|
||
color: #888;
|
||
line-height: 22px;
|
||
margin-bottom: 16px;
|
||
.label {
|
||
display: inline-block;
|
||
width: 112px;
|
||
color: #888;
|
||
}
|
||
.value {
|
||
display: inline-block;
|
||
width: calc(100% - 112px);
|
||
color: #222;
|
||
span {
|
||
display: inline-block;
|
||
margin-right: 24px;
|
||
}
|
||
}
|
||
}
|
||
.index {
|
||
position: absolute;
|
||
top: 16px;
|
||
left: 0;
|
||
height: 21px;
|
||
font-family: DINAlternate-Bold;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
.btn {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 16px;
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
.info {
|
||
width: 33.3%;
|
||
}
|
||
}
|
||
}
|
||
:deep(.ai-select),
|
||
:deep(.el-input) {
|
||
display: inline-block;
|
||
width: 50%;
|
||
margin-right: 16px;
|
||
}
|
||
:deep(.AiPicker) {
|
||
display: inline-block;
|
||
width: 50%;
|
||
margin-right: 16px;
|
||
border: 1px solid #d0d4dc;
|
||
padding-left: 16px;
|
||
box-sizing: border-box;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
.el-icon-arrow-down {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|