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/components/CompMonitorObj.vue | 95 ++++++-------
src/components/list-item/ItemMonitorObj.vue | 5
src/api/fysp/taskApi.js | 25 +++
src/components.d.ts | 2
src/views/fysp/task/MonitorObjEdit.vue | 254 +++++++++++++++++++++++++++++------
src/App.vue | 6
src/router/index.js | 2
src/views/fysp/task/TaskManage.vue | 4
8 files changed, 290 insertions(+), 103 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 49d586d..05d5a06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,17 +19,17 @@
<el-scrollbar>
<div class="el-main__content">
<Content></Content>
- <el-backtop
+ <!-- <el-backtop
target=".el-main .el-scrollbar__wrap"
:right="40"
:bottom="100"
- style="width: 120px"
+ style="width: 120px;z-index: 1000;"
>
<div class="back-top">
<el-icon><ArrowUpBold /></el-icon>
<span style="">杩斿洖椤堕儴</span>
</div>
- </el-backtop>
+ </el-backtop> -->
</div>
</el-scrollbar>
</el-main>
diff --git a/src/api/fysp/taskApi.js b/src/api/fysp/taskApi.js
index 401d008..6284221 100644
--- a/src/api/fysp/taskApi.js
+++ b/src/api/fysp/taskApi.js
@@ -16,6 +16,31 @@
},
/**
+ * 娣诲姞鐩戠瀵硅薄
+ */
+ addMonitorObject(objList) {
+ return $fysp.put(`monitorobjectversion/addlist`, objList).then((res) => res.data);
+ },
+
+ /**
+ * 鏇存柊鐩戠瀵硅薄
+ */
+ updateMonitorObject(objList) {
+ return $fysp.post(`monitorobjectversion/uplist`, objList).then((res) => res.data);
+ },
+
+ /**
+ * 鍒犻櫎鐩戠瀵硅薄
+ */
+ deleteMonitorObject(objList) {
+ return $fysp({
+ method: 'delete',
+ url: 'monitorobjectversion/deleteList',
+ data: objList
+ }).then((res) => res.data);
+ },
+
+ /**
* 鏌ヨ鎬讳换鍔�
* @param {Object} param
* @returns
diff --git a/src/components.d.ts b/src/components.d.ts
index 34bf963..f171213 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,6 +13,7 @@
CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
Content: typeof import('./components/core/Content.vue')['default']
copy: typeof import('./components/list-item/ItemScene copy.vue')['default']
+ ElAffix: typeof import('element-plus/es')['ElAffix']
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
@@ -54,6 +55,7 @@
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+ ElSegmented: typeof import('element-plus/es')['ElSegmented']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElStep: typeof import('element-plus/es')['ElStep']
diff --git a/src/components/list-item/ItemMonitorObj.vue b/src/components/list-item/ItemMonitorObj.vue
index 70c32a2..51f1ecf 100644
--- a/src/components/list-item/ItemMonitorObj.vue
+++ b/src/components/list-item/ItemMonitorObj.vue
@@ -14,7 +14,10 @@
{{ item.sceneType }}
</el-tag>
<el-tag type="info" effect="plain" size="small">
- 璁″垝鐩戠娆℃暟锛歿{ item.monitornum }}
+ 璁″垝鐩戠锛歿{ item.monitornum }}
+ </el-tag>
+ <el-tag type="info" effect="plain" size="small">
+ 宸茬洃绠★細{{ item.extension1 ? item.extension1 : '0' }}
</el-tag>
</el-space>
<slot :item="item"></slot>
diff --git a/src/router/index.js b/src/router/index.js
index 747a2cd..912d204 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -64,7 +64,7 @@
name: 'taskmanage',
path: '/fysp/task/manage',
component: () => import('@/views/fysp/task/TaskManage.vue'),
- meta: { keepAlive: false }
+ meta: { keepAlive: true }
},
{
//鐩戠浠诲姟鍦烘櫙缂栬緫
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>
diff --git a/src/views/fysp/task/TaskManage.vue b/src/views/fysp/task/TaskManage.vue
index 839a8b9..0e2de57 100644
--- a/src/views/fysp/task/TaskManage.vue
+++ b/src/views/fysp/task/TaskManage.vue
@@ -35,7 +35,7 @@
<el-divider></el-divider>
<el-button type="primary" size="small" @click="editTask">鍦烘櫙璋冩暣</el-button>
<div><el-text>鐩戠鍦烘櫙</el-text></div>
- <CompMonitorObj :data="curMonitorObjList"></CompMonitorObj>
+ <CompMonitorObj :data="curMonitorObjList" v-model:showData="showMonitorObjList"></CompMonitorObj>
<!-- <div><el-text>鐩戠鍦烘櫙</el-text></div>
<div>
<el-space wrap>
@@ -73,6 +73,8 @@
tasks: [],
// 褰撳墠浠诲姟鐨勭洃绠″璞�
curMonitorObjList: [],
+ // 褰撳墠浠诲姟鐨勫睍绀轰腑鐨勭洃绠″璞�
+ showMonitorObjList: [],
//褰撳墠閫変腑鐨勪换鍔�
curTask: {},
//鎿嶄綔鎸夐挳
diff --git a/src/views/fysp/task/components/CompMonitorObj.vue b/src/views/fysp/task/components/CompMonitorObj.vue
index 804274d..9093a2b 100644
--- a/src/views/fysp/task/components/CompMonitorObj.vue
+++ b/src/views/fysp/task/components/CompMonitorObj.vue
@@ -1,25 +1,17 @@
<template>
- <el-tabs v-model="activeName" type="border-card" @tab-change="tabChange">
- <el-tab-pane
- v-for="item in tabDataList"
- :key="item.title"
- :label="item.title"
- :name="item.title"
- >
- <!-- <div> -->
- <el-space wrap>
- <ItemMonitorObj v-for="obj in item.children" :key="obj.movid" :item="obj">
- <template #default="{ item }">
- <!-- <slot :item="item"></slot> -->
- <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)"
- >绉婚櫎</el-button
- >
- </template>
- </ItemMonitorObj>
- </el-space>
- <!-- </div> -->
- </el-tab-pane>
- </el-tabs>
+ <div>
+ <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" />
+ </div>
+ <el-space wrap>
+ <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
+ <template #default="{ item }">
+ <!-- <slot :item="item"></slot> -->
+ <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)"
+ >绉婚櫎</el-button
+ >
+ </template>
+ </ItemMonitorObj>
+ </el-space>
</template>
<script>
@@ -30,59 +22,64 @@
type: Array,
default: () => []
},
+ tabName: {
+ type: String,
+ default: defaultTabName
+ },
+ showData: Array,
// 鏄惁娣诲姞榛樿鐨勫叏閮ㄩ�夐」
allOption: Boolean,
showDelete: Boolean
},
- emits: ['tabChange'],
+ emits: ['update:tabName', 'update:showData', 'deleteItem'],
data() {
return {
- activeName: defaultTabName
+ activeName: defaultTabName,
+ tabs: []
};
},
computed: {
- tabDataList() {
- const itemMap = new Map();
- this.data.forEach((t) => {
- itemMap.has(t.sceneType) ? itemMap.get(t.sceneType).push(t) : itemMap.set(t.sceneType, [t]);
+ activeData() {
+ const list = this.data.filter((v) => {
+ // return this.activeName == defaultTabName || v.sceneType == this.activeName;
+ return this.tabName == defaultTabName || v.sceneType == this.tabName;
});
- const list = [];
- if (this.allOption) {
- list.push({
- title: defaultTabName,
- children: this.data
- });
- }
- for (const [key, value] of itemMap) {
- list.push({
- title: key,
- children: value
- });
- }
+ this.$emit('update:showData', list);
return list;
}
},
watch: {
- tabDataList: {
+ data: {
handler(nV, oV) {
if (nV != oV && nV.length > 0) {
- this.activeName = nV[0].title;
- this.tabChange(this.activeName);
+ this.getTabs(nV);
+ }
+ },
+ immediate: true
+ },
+ tabs: {
+ handler(nV, oV) {
+ if (nV != oV && nV.length > 0) {
+ // this.activeName = nV[0];
+ this.tabChange(nV);
}
},
immediate: true
}
},
methods: {
+ getTabs(dataList) {
+ const list = [];
+ dataList.forEach((d) => {
+ if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
+ });
+ this.tabs = list;
+ },
tabChange(tabName) {
- this.$emit('tabChange', tabName);
+ this.$emit('update:tabName', tabName);
},
deleteMov(item) {
- const tab = this.tabDataList.find((v) => {
- return v.title == this.activeName;
- });
- const i = tab.children.indexOf(item);
- tab.children.splice(i, 1);
+ this.$emit('deleteItem', item);
}
}
};
--
Gitblit v1.9.3