<template>
|
<el-page-header @back="$router.back()" class="page-header">
|
<template #content>
|
<span> 总任务编辑 </span>
|
</template>
|
</el-page-header>
|
<el-divider />
|
<el-row gutter="20">
|
<el-col :span="16">
|
<div>
|
<el-text>已选场景</el-text>
|
</div>
|
<el-divider />
|
<CompMonitorObj :data="curMonitorObjList" @tab-change="changeSceneType" :showDelete="true">
|
<!-- <template #default="{ item }">
|
<el-button size="small" type="danger" @click="deleteMov(item)">移除</el-button>
|
</template> -->
|
</CompMonitorObj>
|
</el-col>
|
<el-col :span="8">
|
<div>
|
<el-text>可选场景</el-text>
|
</div>
|
<el-divider />
|
<FYInfoSearch
|
label=""
|
placeholder="请输入场景名称关键字"
|
:data="showSceneList"
|
:on-search="searchScene"
|
:total="total"
|
scroll-height="70vh"
|
:page-show="false"
|
>
|
<template #default="{ row, click }">
|
<ItemScene :item="row">
|
<el-button-group>
|
<el-button size="small" type="primary" @click="insertDialog = true">插入</el-button>
|
<el-button size="small" type="primary" @click="addDialog = true">新增</el-button>
|
</el-button-group>
|
</ItemScene>
|
</template>
|
</FYInfoSearch>
|
</el-col>
|
</el-row>
|
|
<el-dialog v-model="insertDialog" title="插入场景至空余编号" width="500">
|
<div>以下为可选的空余编号</div>
|
<el-radio-group v-model="selectedIndex" size="default">
|
<el-radio-button v-for="item in valibleIndex" :key="item" :label="item" :value="item" />
|
</el-radio-group>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="insertDialog = false">取消</el-button>
|
<el-button type="primary" @click="insertDialog = false"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog v-model="addDialog" title="新增场景编号顺延" width="500">
|
<div>顺延编号为:{{ lastIndex }}</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="addDialog = false">取消</el-button>
|
<el-button type="primary" @click="addDialog = false"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import CompMonitorObj from './components/CompMonitorObj.vue';
|
import svUserApi from '@/api/fysp/userApi';
|
import sceneApi from '@/api/fysp/sceneApi';
|
|
export default {
|
components: { CompMonitorObj },
|
props: {},
|
data() {
|
return {
|
// 监管场景
|
curMonitorObjList: [],
|
// 行政区划
|
area: {},
|
// 所有场景
|
sceneList: [],
|
total: 0,
|
|
// 当前筛选的场景类型
|
curSceneType: undefined,
|
|
insertDialog: false,
|
selectedIndex: undefined,
|
addDialog: false
|
};
|
},
|
computed: {
|
// 当前场景类型下的展示场景
|
showSceneList() {
|
return this.sceneList.filter((v) => {
|
const index = this.curMonitorObjList.findIndex((o) => {
|
return o.sguid == v.guid;
|
});
|
return index == -1 && v.type == this.curSceneType;
|
});
|
},
|
showMonitorObjList() {
|
return this.curMonitorObjList.filter((v) => {
|
return v.sceneType == this.curSceneType;
|
});
|
},
|
// 当前场景类型下的可插入编号
|
valibleIndex() {
|
// 原列表已经按照编号顺序排列
|
let index = 1;
|
const indexList = [];
|
this.showMonitorObjList.forEach((l) => {
|
while (l.displayid > index) {
|
indexList.push(index);
|
index++;
|
}
|
index++;
|
});
|
return indexList;
|
},
|
lastIndex() {
|
const len = this.showMonitorObjList.length;
|
if (len > 0) {
|
return this.showMonitorObjList[len - 1].displayid + 1;
|
} else {
|
return undefined;
|
}
|
}
|
},
|
methods: {
|
// 查询
|
searchScene({ text, page, pageSize }) {
|
this.area.sceneName = text;
|
return sceneApi.searchScene(this.area, 1, 10000).then((res) => {
|
if (res.success) {
|
// 查询结果
|
this.sceneList = res.data;
|
// 总数据量
|
this.total = res.head.totalCount;
|
}
|
});
|
},
|
changeSceneType(tabName) {
|
this.curSceneType = tabName;
|
},
|
deleteMov(item) {
|
},
|
insertMov() {},
|
addMov() {}
|
},
|
mounted() {
|
// 监管场景信息
|
this.curMonitorObjList = JSON.parse(decodeURIComponent(this.$route.query.data));
|
// 根据总任务获取行政区划信息
|
const task = JSON.parse(decodeURIComponent(this.$route.query.task));
|
this.area = {
|
provincecode: task.provincecode,
|
provincename: task.provincename,
|
citycode: task.citycode,
|
cityname: task.cityname,
|
districtcode: task.districtcode,
|
districtname: task.districtname,
|
towncode: task.towncode,
|
townname: task.townname,
|
online: true
|
};
|
this.searchScene({ text: '' });
|
}
|
};
|
</script>
|
|
<style scoped></style>
|
