From da5e23f61994f5e0a0da75e992cc796a841e953b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 11 十月 2024 17:46:51 +0800
Subject: [PATCH] 1. 任务调整模块，任务编辑功能（待完成）
---
src/views/fysp/task/MonitorObjEdit.vue | 254 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 206 insertions(+), 48 deletions(-)
diff --git a/src/views/fysp/task/MonitorObjEdit.vue b/src/views/fysp/task/MonitorObjEdit.vue
index 1cd37c6..e2c021a 100644
--- a/src/views/fysp/task/MonitorObjEdit.vue
+++ b/src/views/fysp/task/MonitorObjEdit.vue
@@ -1,45 +1,66 @@
<template>
- <el-page-header @back="$router.back()" class="page-header">
- <template #content>
- <span> 鎬讳换鍔＄紪杈� </span>
- </template>
- </el-page-header>
- <el-divider />
+ <el-affix :offset="60">
+ <div class="page-header">
+ <el-page-header @back="$router.back()">
+ <template #content>
+ <span> 鎬讳换鍔＄紪杈� </span>
+ </template>
+ <template #extra>
+ <div>
+ <el-button type="primary" :disabled="!isEdit" :loading="saveLoading" @click="saveEdit"
+ >淇濆瓨淇敼</el-button
+ >
+ </div>
+ </template>
+ </el-page-header>
+ <el-divider />
+ </div>
+ </el-affix>
<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
+ :data="curMonitorObjList"
+ show-delete
+ v-model:tabName="curSceneType"
+ v-model:showData="showMonitorObjList"
+ @delete-item="deleteMov"
+ >
</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-affix :offset="140">
+ <div>
+ <el-text>鍙�夊満鏅�</el-text>
+ </div>
+ <el-divider />
+ <div>
+ <el-segmented v-model="curSceneType" :options="sceneTypeOptions" />
+ </div>
+ <FYInfoSearch
+ label=""
+ placeholder="璇疯緭鍏ュ満鏅悕绉板叧閿瓧"
+ :data="showSceneList"
+ :on-search="searchScene"
+ :total="total"
+ scroll-height="70vh"
+ :page-show="false"
+ >
+ <template #default="{ row }">
+ <ItemScene :item="row">
+ <el-button-group>
+ <el-button size="small" type="primary" @click="openInsertDialog(row)"
+ >鎻掑叆</el-button
+ >
+ <el-button size="small" type="primary" @click="openAddDialog(row)">鏂板</el-button>
+ </el-button-group>
+ </ItemScene>
+ </template>
+ </FYInfoSearch>
+ </el-affix>
</el-col>
</el-row>
@@ -51,7 +72,7 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="insertDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="insertDialog = false"> 纭 </el-button>
+ <el-button :disabled="!selectedIndex" type="primary" @click="insertMov"> 纭 </el-button>
</div>
</template>
</el-dialog>
@@ -60,7 +81,7 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="addDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="addDialog = false"> 纭 </el-button>
+ <el-button type="primary" @click="addMov"> 纭 </el-button>
</div>
</template>
</el-dialog>
@@ -69,7 +90,9 @@
<script>
import CompMonitorObj from './components/CompMonitorObj.vue';
import svUserApi from '@/api/fysp/userApi';
+import taskApi from '@/api/fysp/taskApi';
import sceneApi from '@/api/fysp/sceneApi';
+import { ElMessage, ElNotification } from 'element-plus';
export default {
components: { CompMonitorObj },
@@ -78,18 +101,33 @@
return {
// 鐩戠鍦烘櫙
curMonitorObjList: [],
+ // 褰撳墠绛涢�夌殑鍦烘櫙绫诲瀷
+ curSceneType: undefined,
+ showMonitorObjList: [],
+
+
// 琛屾斂鍖哄垝
area: {},
// 鎵�鏈夊満鏅�
sceneList: [],
total: 0,
- // 褰撳墠绛涢�夌殑鍦烘櫙绫诲瀷
- curSceneType: undefined,
-
+ // 鎻掑叆寮瑰嚭妗�
insertDialog: false,
+ // 鎻掑叆鎴栨柊澧炵殑缂栧彿
selectedIndex: undefined,
- addDialog: false
+ // 鎻掑叆鎴栨柊澧炵殑鍦烘櫙
+ selectedScene: undefined,
+ // 鐩戠娆℃暟
+ monitorTimes: 1,
+ // 鏂板寮瑰嚭妗�
+ addDialog: false,
+ // 鏂板鐨勭洃绠″満鏅�
+ insertObj: [],
+ // 鏇存柊鐨勭洃绠″満鏅�
+ updateObj: [],
+ // 鍒犻櫎鐨勭洃绠″満鏅�
+ deleteObj: []
};
},
computed: {
@@ -102,10 +140,12 @@
return index == -1 && v.type == this.curSceneType;
});
},
- showMonitorObjList() {
- return this.curMonitorObjList.filter((v) => {
- return v.sceneType == this.curSceneType;
+ sceneTypeOptions(){
+ const list = [];
+ this.sceneList.forEach((d) => {
+ if (list.indexOf(d.type) == -1) list.push(d.type);
});
+ return list;
},
// 褰撳墠鍦烘櫙绫诲瀷涓嬬殑鍙彃鍏ョ紪鍙�
valibleIndex() {
@@ -119,6 +159,9 @@
}
index++;
});
+ if (indexList.length == 0) {
+ indexList.push(1);
+ }
return indexList;
},
lastIndex() {
@@ -126,8 +169,11 @@
if (len > 0) {
return this.showMonitorObjList[len - 1].displayid + 1;
} else {
- return undefined;
+ return 1;
}
+ },
+ isEdit() {
+ return this.insertObj.length > 0 || this.deleteObj.length > 0 || this.updateObj.length > 0;
}
},
methods: {
@@ -143,19 +189,127 @@
}
});
},
- changeSceneType(tabName) {
- this.curSceneType = tabName;
- },
deleteMov(item) {
+ if (item.extension1) {
+ ElMessage({
+ message: '宸茬洃绠″満鏅棤娉曠Щ闄�',
+ type: 'error'
+ });
+ return;
+ }
+ const i = this.curMonitorObjList.indexOf(item);
+ this.curMonitorObjList.splice(i, 1);
+ const i1 = this.insertObj.indexOf(item);
+ this.insertObj.splice(i1, 1);
+ const i2 = this.updateObj.indexOf(item);
+ this.updateObj.splice(i2, 1);
+
+ this.deleteObj.push(item);
},
- insertMov() {},
- addMov() {}
+ openInsertDialog(item) {
+ this.insertDialog = true;
+ this.selectedScene = item;
+ this.monitorTimes = 1;
+ },
+ openAddDialog(item) {
+ this.addDialog = true;
+ this.selectedScene = item;
+ this.monitorTimes = 1;
+ },
+ insertMov() {
+ // 1. 鍒涘缓鏂板満鏅�
+ let mov = this.createMov(this.selectedIndex, this.selectedScene);
+ // 2. 鏌ユ壘绗竴涓紪鍙峰ぇ浜庢彃鍏ョ紪鍙风殑鍊硷紝灏嗘柊鐩戠瀵硅薄鎻掑叆鍏朵箣鍓�
+ const insertAtIndex = this.curMonitorObjList.findIndex((v) => {
+ return v.displayid > this.selectedIndex;
+ });
+ this.curMonitorObjList.splice(insertAtIndex, 0, mov);
+ this.selectedIndex = undefined;
+ this.insertDialog = false;
+ },
+ addMov() {
+ // 1. 鍒涘缓鏂板満鏅�
+ let mov = this.createMov(this.lastIndex, this.selectedScene);
+ // 2. 娣诲姞鑷虫湯灏�
+ this.curMonitorObjList.push(mov);
+ this.addDialog = false;
+ },
+ // 鍒涘缓涓�涓柊鐨勭洃绠″璞�
+ createMov(displayid, scene) {
+ // 1. 鏌ユ壘璇ュ満鏅槸鍚︿箣鍓嶅凡琚垹闄�
+ const index = this.deleteObj.findIndex((v) => {
+ return v.sguid == scene.guid;
+ });
+ let mov;
+ // 2. 鑻ユ槸鍏ㄦ柊鐨勫満鏅紝鍒欐柊鐢熸垚涓�涓洃绠″璞★紝鍚﹀垯鍙洿鏂扮紪鍙�
+ if (index == -1) {
+ mov = {
+ tid: this.task.tguid,
+ sguid: scene.guid,
+ sensename: scene.name,
+ tasktypeid: 1,
+ tasktype: '宸℃煡',
+ monitornum: this.monitorTimes,
+ displayid: displayid,
+ sceneTypeId: scene.typeid,
+ sceneType: scene.type
+ };
+ this.insertObj.push(mov);
+ } else {
+ mov = this.deleteObj[index];
+ mov.displayid = displayid;
+ this.updateObj.push(mov);
+ this.deleteObj.splice(index, 1);
+ }
+ return mov;
+ },
+ // 淇濆瓨淇敼
+ saveEdit() {
+ // this.saveLoading = true;
+ if (this.insertObj.length > 0) {
+ const p1 = taskApi.addMonitorObject(this.insertObj).then((res) => {
+ ElNotification({
+ title: `宸℃煡浠诲姟淇敼鎴愬姛`,
+ message: `鏂板鍦烘櫙${res}涓猔,
+ type: 'success',
+ position: 'bottom-left'
+ });
+ this.insertObj = [];
+ });
+ }
+ if (this.updateObj.length > 0) {
+ const p2 = taskApi.updateMonitorObject(this.updateObj).then((res) => {
+ ElNotification({
+ title: `宸℃煡浠诲姟淇敼鎴愬姛`,
+ message: `鏇存柊鍦烘櫙${res}涓猔,
+ type: 'success',
+ position: 'bottom-left'
+ });
+ this.updateObj = [];
+ });
+ }
+ if (this.deleteObj.length > 0) {
+ const p3 = taskApi.deleteMonitorObject(this.deleteObj).then((res) => {
+ ElNotification({
+ title: `宸℃煡浠诲姟淇敼鎴愬姛`,
+ message: `鍒犻櫎鍦烘櫙${res}涓猔,
+ type: 'success',
+ position: 'bottom-left'
+ });
+ this.deleteObj = [];
+ });
+ }
+ // return Promise.all([p1, p2, p3]).finally(() => {
+ // this.saveLoading = false;
+ // });
+ }
},
mounted() {
// 鐩戠鍦烘櫙淇℃伅
this.curMonitorObjList = JSON.parse(decodeURIComponent(this.$route.query.data));
// 鏍规嵁鎬讳换鍔¤幏鍙栬鏀垮尯鍒掍俊鎭�
const task = JSON.parse(decodeURIComponent(this.$route.query.task));
+ this.task = task;
this.area = {
provincecode: task.provincecode,
provincename: task.provincename,
@@ -172,4 +326,8 @@
};
</script>
-<style scoped></style>
+<style scoped>
+.page-header {
+ background-color: #fff;
+}
+</style>
--
Gitblit v1.9.3