From c7bd6db3190ff5c4b55d004db0b9fa944604925f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 18 十月 2024 11:09:15 +0800
Subject: [PATCH] Merge branch 'lsf-topTask'
---
src/views/fysp/task/MonitorObjEdit.vue | 378 ++++++-----------------------------------------------
1 files changed, 45 insertions(+), 333 deletions(-)
diff --git a/src/views/fysp/task/MonitorObjEdit.vue b/src/views/fysp/task/MonitorObjEdit.vue
index 636899b..3479166 100644
--- a/src/views/fysp/task/MonitorObjEdit.vue
+++ b/src/views/fysp/task/MonitorObjEdit.vue
@@ -1,5 +1,5 @@
<template>
- <el-affix :offset="60">
+ <el-affix :offset="60" target=".el-main">
<div class="page-header">
<el-page-header @back="goBack">
<template #content>
@@ -7,7 +7,11 @@
</template>
<template #extra>
<div>
- <el-button type="primary" :disabled="!isEdit" :loading="saveLoading" @click="saveEdit"
+ <el-button
+ type="primary"
+ :disabled="!isEdit"
+ :loading="saveLoading"
+ @click="handleSaveClick"
>淇濆瓨淇敼</el-button
>
</div>
@@ -16,346 +20,54 @@
<el-divider />
</div>
</el-affix>
- <el-row gutter="20">
- <el-col :span="16">
- <div>
- <el-text>宸查�夊満鏅�</el-text>
- </div>
- <el-divider />
- <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">
- <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>
-
- <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 :disabled="!selectedIndex" type="primary" @click="insertMov"> 纭 </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="addMov"> 纭 </el-button>
- </div>
- </template>
- </el-dialog>
+ <CompMonitorObjEdit
+ ref="objEditRef"
+ :task="task"
+ :objList="curMonitorObjList"
+ @upload-success="goBack"
+ ></CompMonitorObjEdit>
</template>
-<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';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import CompMonitorObjEdit from './components/CompMonitorObjEdit.vue';
+import { useRoute, useRouter } from 'vue-router';
-export default {
- async beforeRouteLeave(to, from) {
- // 鍦ㄥ鑸寮�娓叉煋璇ョ粍浠剁殑瀵瑰簲璺敱鏃惰皟鐢�
- // 涓� `beforeRouteUpdate` 涓�鏍凤紝瀹冨彲浠ヨ闂粍浠跺疄渚� `this`
- // return this.routerChangeCheck();
- },
- components: { CompMonitorObj },
- props: {},
- data() {
- return {
- // 鐩戠鍦烘櫙
- curMonitorObjList: [],
- // 褰撳墠绛涢�夌殑鍦烘櫙绫诲瀷
- curSceneType: undefined,
- showMonitorObjList: [],
+const route = useRoute();
+const router = useRouter();
- // 琛屾斂鍖哄垝
- area: {},
- // 鎵�鏈夊満鏅�
- sceneList: [],
- total: 0,
+const objEditRef = ref(null);
+const curMonitorObjList = ref([]);
+const task = ref({});
- // 鎻掑叆寮瑰嚭妗�
- insertDialog: false,
- // 鎻掑叆鎴栨柊澧炵殑缂栧彿
- selectedIndex: undefined,
- // 鎻掑叆鎴栨柊澧炵殑鍦烘櫙
- selectedScene: undefined,
- // 鐩戠娆℃暟
- monitorTimes: 1,
- // 鏂板寮瑰嚭妗�
- addDialog: false,
- // 鏂板鐨勭洃绠″満鏅�
- insertObj: [],
- // 鏇存柊鐨勭洃绠″満鏅�
- updateObj: [],
- // 鍒犻櫎鐨勭洃绠″満鏅�
- deleteObj: []
- };
- },
- 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;
- });
- },
- sceneTypeOptions() {
- const list = [];
- this.sceneList.forEach((d) => {
- if (list.indexOf(d.type) == -1) list.push(d.type);
- });
- return list;
- },
- // 褰撳墠鍦烘櫙绫诲瀷涓嬬殑鍙彃鍏ョ紪鍙�
- valibleIndex() {
- // 鍘熷垪琛ㄥ凡缁忔寜鐓х紪鍙烽『搴忔帓鍒�
- let index = 1;
- const indexList = [];
- this.showMonitorObjList.forEach((l) => {
- while (l.displayid > index) {
- indexList.push(index);
- index++;
- }
- index++;
- });
- if (indexList.length == 0) {
- indexList.push(1);
- }
- return indexList;
- },
- lastIndex() {
- const len = this.showMonitorObjList.length;
- if (len > 0) {
- return this.showMonitorObjList[len - 1].displayid + 1;
- } else {
- return 1;
- }
- },
- isEdit() {
- return this.insertObj.length > 0 || this.deleteObj.length > 0 || this.updateObj.length > 0;
- }
- },
- 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;
- }
- });
- },
- 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);
+const isEdit = computed(() => {
+ return objEditRef.value ? objEditRef.value.isEdit : false;
+});
- this.deleteObj.push(item);
- },
- 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,
- citycode: task.citycode,
- cityname: task.cityname,
- districtcode: task.districtcode,
- districtname: task.districtname,
- towncode: task.towncode,
- townname: task.townname,
- online: true
- };
- this.searchScene({ text: '' });
- }
-};
+function handleSaveClick() {
+ objEditRef.value.saveEdit();
+}
+
+function goBack() {
+ router.back();
+}
+
+onMounted(() => {
+ // 鐩戠鍦烘櫙淇℃伅
+ // curMonitorObjList.value = JSON.parse(decodeURIComponent(route.query.data));
+ // 鎬讳换鍔�
+ task.value = JSON.parse(decodeURIComponent(route.query.task));
+ // 鐩戠鍦烘櫙淇℃伅
+ curMonitorObjList.value = JSON.parse(
+ decodeURIComponent(route.query.data)
+ );
+});
</script>
<style scoped>
.page-header {
- background-color: #fff;
+ background-color: white;
+ padding: 10px 0;
+ /* border-bottom: 1px solid var(--el-color-info-light-7); */
}
</style>
--
Gitblit v1.9.3