From 69cc010e3c7f994f302426c6f3acdc15c2b49cbb Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 31 Oct 2025 10:18:33 +0800
Subject: [PATCH] feat:新增/编辑文件夹
---
src/views/layerManagement/components/folderFile.vue | 173 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 112 insertions(+), 61 deletions(-)
diff --git a/src/views/layerManagement/components/folderFile.vue b/src/views/layerManagement/components/folderFile.vue
index 9342946..642222a 100644
--- a/src/views/layerManagement/components/folderFile.vue
+++ b/src/views/layerManagement/components/folderFile.vue
@@ -2,7 +2,6 @@
<div class="rightContainer">
<div class="contenttitle">文件夹信息</div>
<div class="centerBox">
-
<div class="itemRow">
<div class="label">文件夹名称</div>
<div>
@@ -16,7 +15,7 @@
class="ztzf-layer-search filter-item"
popper-class="ztzf-select-popper"
@change="handleTypeChange"
- v-model="formData.type"
+ v-model="formData.event_type"
placeholder="请选择"
clearable
>
@@ -28,12 +27,12 @@
/>
</el-select>
<el-select
- v-model="formData.algorithm"
+ v-model="formData.algorithm_name"
popper-class="ztzf-select-popper"
class="ztzf-layer-search"
placeholder="请选择"
clearable
- :disabled="!formData.type"
+ :disabled="!formData.event_type"
>
<el-option
v-for="item in algorithms"
@@ -45,25 +44,33 @@
</div>
</div>
</div>
- <div class="detailInfo">
+ <div class="detailInfo" v-if="layerParams.editFolder">
<div class="infpItem">
<div class="itemData">
<div class="title">围栏总数量</div>
- <div class="num"><span>{{totalCount}}</span>个</div>
+ <div class="num">
+ <span>{{ formData.total_count }}</span> 个
+ </div>
</div>
<div class="itemData">
<div class="title">围栏总面积</div>
- <div class="num"><span>{{totalArea}}</span>m²</div>
+ <div class="num">
+ <span>{{ formData.total_area }}</span> m²
+ </div>
</div>
</div>
<div class="infpItem">
<div class="itemData">
<div class="title">创建时间</div>
- <div class="num"><span>{{formData?.create_time}}</span></div>
+ <div class="num">
+ <span>{{ formData?.create_time }}</span>
+ </div>
</div>
<div class="itemData">
<div class="title">创建人</div>
- <div class="num"><span>{{formData?.create_name}}</span></div>
+ <div class="num">
+ <span>{{ formData?.create_name }}</span>
+ </div>
</div>
</div>
</div>
@@ -75,86 +82,130 @@
</template>
<script setup>
-import { deitFenceApi } from '@/api/layer/index';
-import {
- getTicketInfo,
-} from '@/api/tickets/ticket';
+import { ElMessage } from 'element-plus';
+import dayjs from 'dayjs';
+import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index';
+import { getTicketInfo } from '@/api/tickets/ticket';
const layerParams = inject('layerParams');
-const types = ref([]) //工单类型
-const allAlgorithms = ref([])
-const algorithms = ref([])
-
+const types = ref([]); //工单类型
+const allAlgorithms = ref([]);
+const algorithms = ref([]);
const formData = ref({
- folder_id: '',
+ category_id: '',
name: '',
- description: '',
- is_enabled: false,
- area: '',
- altitude: '',
- control_start_time: '',
- control_end_time: '',
- geo_data: '',
- algorithm:'',
- type: '',
+ event_type: '',
+ algorithm_name: '',
+ total_count: 0,
+ total_area: 0,
});
-const detailData = ref(null)
-const totalArea = ref(null)
-const totalCount = ref(null)
-detailData.value = layerParams.value.editDetailData
-totalArea.value = layerParams.value.total_area
-totalCount.value = layerParams.value.total_count
-
+const detailData = ref(null);
+detailData.value = layerParams.value.editFolderData;
const getTicketInfoData = async () => {
- const response = await getTicketInfo()
- const { dept_data, event_type, ai_type, info } = response.data.data
- allAlgorithms.value = info
+ const response = await getTicketInfo();
+ const { dept_data, event_type, ai_type, info } = response.data.data;
+ allAlgorithms.value = info;
types.value = Object.entries(event_type).map(([key, value]) => ({
label: value,
value: key,
- }))
-
-}
-const handleTypeChange=(typeValue)=>{
-
- const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue)
+ }));
+};
+const handleTypeChange = typeValue => {
+ const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue);
if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
// 无匹配的算法时清空
- algorithms.value = []
- return
+ algorithms.value = [];
+ return;
}
algorithms.value = matchedCategory.algorithms.map(algo => ({
label: algo.dict_value,
value: algo.dict_key,
dict_key: algo.dict_key,
dict_value: algo.dict_value,
- }))
- console.log(' algorithms.value ', algorithms.value );
-}
+ }));
+};
const clearAllData = () => {
- detailData.value = {}
- // 清空回显相关数据
+ formData.value = {
+ category_id: '',
+ name: '',
+ event_type: '',
+ algorithm_name: '',
+ total_count: 0,
+ total_area: 0,
+ create_time: '',
+ create_name: '',
+ };
+ algorithms.value = [];
detailData.value = {};
- totalArea.value = null;
- totalCount.value = null;
- // 重置判断状态（可选，根据业务需求是否需要）
layerParams.value.decideWhetherToAddOrEdit = 1;
- // 重置面板状态和缓存数据
layerParams.value.addFolder = false;
layerParams.value.editFolder = false;
layerParams.value.editDetailData = null;
layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
- clearAllData()
-
+ clearAllData();
};
const submitHandle = () => {
-
- clearAllData()
-
+ const params = {
+ category_id: layerParams.value.fileType === 1 ? 1 : 2,
+ name: formData.value.name,
+ event_type: formData.value.event_type,
+ algorithm_name: formData.value.algorithm_name,
+ };
+ // 如果是编辑模式，才添加 id
+ if (layerParams.value.addAnEditingFolder === 2) {
+ params.id = detailData.value.id;
+ }
+ if (layerParams.value.addAnEditingFolder === 1) {
+ // 文件夹新增
+ addFolderApi(params).then(res => {
+ if (res.status === 200) {
+ ElMessage({
+ message: '新增成功',
+ type: 'success',
+ });
+ }
+ });
+ } else {
+ //文件夹编辑
+ deitFolderApi(params).then(res => {
+ if (res.status === 200) {
+ ElMessage({
+ message: '编辑成功',
+ type: 'success',
+ });
+ }
+ });
+ }
+ clearAllData();
};
-onMounted(() => {
- getTicketInfoData()
+onMounted(async () => {
+
+ await getTicketInfoData();
+ const addOrEditStatus = layerParams.value.addAnEditingFolder || 1;
+ // 判断是否有编辑数据，有则回显
+ if (detailData.value && addOrEditStatus === 2) {
+ const editData = detailData.value;
+ formData.value = {
+ ...formData.value,
+ category_id: editData.category_id,
+ name: editData.name,
+ event_type: editData.event_type, // 回显“关联算法类型”值
+ algorithm_name: editData.algorithm_name, // 回显“算法”值
+
+ total_count: editData.total_count,
+ total_area: editData.total_area,
+ create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
+ create_name: editData.create_name,
+ };
+ if (formData.value.event_type) {
+ handleTypeChange(formData.value.event_type);
+
+ setTimeout(() => {
+ formData.value.algorithm_name = editData.algorithm_name;
+ }, 100);
+ }
+ }
});
</script>
--
Gitblit v1.9.3