From 92c3f21594836eaef5328130abe45e46d08a748e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 14 十月 2024 17:36:31 +0800
Subject: [PATCH] 1. 修复由于合并而缺少的下拉框宽度属性
---
src/views/fysp/task/MonitorObjEdit.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 234 insertions(+), 48 deletions(-)
diff --git a/src/views/fysp/task/MonitorObjEdit.vue b/src/views/fysp/task/MonitorObjEdit.vue
index 1cd37c6..636899b 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="goBack">
+ <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-btn
+ v-model:tabName="curSceneType"
+ v-model:showData="showMonitorObjList"
+ :tabOptions="sceneTypeOptions"
+ @item-click="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
+ 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,27 +90,48 @@
<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, ElMessageBox } from 'element-plus';
export default {
+ async beforeRouteLeave(to, from) {
+ // 鍦ㄥ鑸寮�娓叉煋璇ョ粍浠剁殑瀵瑰簲璺敱鏃惰皟鐢�
+ // 涓� `beforeRouteUpdate` 涓�鏍凤紝瀹冨彲浠ヨ闂粍浠跺疄渚� `this`
+ // return this.routerChangeCheck();
+ },
components: { CompMonitorObj },
props: {},
data() {
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 +144,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 +163,9 @@
}
index++;
});
+ if (indexList.length == 0) {
+ indexList.push(1);
+ }
return indexList;
},
lastIndex() {
@@ -126,8 +173,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 +193,151 @@
}
});
},
- 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;
+ // });
+ },
+ async goBack() {
+ // const answer = await this.routerChangeCheck()
+ // if (answer) {
+ // this.$router.back();
+ // }
+ this.$router.back();
+ },
+ async routerChangeCheck() {
+ if (this.isEdit) {
+ const answer = await ElMessageBox.confirm('鏄惁鏀惧純宸蹭慨鏀圭殑鎬讳换鍔★紵', '鍙栨秷鎬讳换鍔′慨鏀�', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ .then(() => {
+ return true;
+ })
+ .catch(() => {
+ return false;
+ });
+ return answer;
+ }
+ return true;
+ }
},
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 +354,8 @@
};
</script>
-<style scoped></style>
+<style scoped>
+.page-header {
+ background-color: #fff;
+}
+</style>
--
Gitblit v1.9.3