更新功能

src/views/backOfficeSystem/service/taskPage/dailyTaskPackage/editAddFormDialog.vue

@@ -4,25 +4,14 @@
       <div class="head_box">
         <span class="title">{{ title }}</span>
         <div>
-          <el-button
+          <el-button v-if="!infoActive" type="primary" size="small" @click="submit" :loading="btnLoading">保存</el-button>
-            v-if="!infoActive"
-            type="primary"
-            size="small"
-            @click="submit"
-            :loading="btnLoading"
-          >保存</el-button
-          >
           <el-button size="small" @click="close">关闭</el-button>
         </div>
       </div>
 
       <div class="dialogWrapper">
         <div class="label">任务包基本信息</div>
-        <el-descriptions
+        <el-descriptions class="margin-top" :column="3" border>
-          class="margin-top"
-          :column="3"
-          border
-        >
           <!--        <template #extra>-->
           <!--          <el-button type="primary">Operation</el-button>-->
           <!--        </template>-->
@@ -50,90 +39,42 @@
         </el-descriptions>
 
         <div class="label" style="margin-top: 1rem">任务包下发编辑信息</div>
-        <el-form
+        <el-form ref="formRef" :model="form" :rules="rules" :inline="true">
-          ref="formRef"
-          :model="form"
-          :rules="rules"
-          :inline="true"
-        >
           <el-form-item prop="xlghSc" label="巡逻时长:">
-            <el-input-number
+            <el-input-number style="width: 80%" min="0" :disabled="disabled" placeholder="请填写巡逻时长"
-              style="width: 80%;"
+              v-model="form.xlghSc"></el-input-number>
-              min="0"
-              :disabled="disabled"
-              placeholder="请填写巡逻时长"
-              v-model="form.xlghSc"
-            ></el-input-number>
             <el-tag size="small" type="warning">分钟</el-tag>
           </el-form-item>
           <el-form-item prop="xlghPcRy" label="盘查人员:">
-            <el-input
+            <el-input placeholder="请填写盘查人员" clearable :disabled="disabled" v-model="form.xlghPcRy"></el-input>
-              placeholder="请填写盘查人员"
-              clearable
-              :disabled="disabled"
-              v-model="form.xlghPcRy"
-            ></el-input>
           </el-form-item>
           <el-form-item prop="xlghPcCl" label="盘查车辆:">
-            <el-input
+            <el-input placeholder="请填写盘查车辆" clearable :disabled="disabled" v-model="form.xlghPcCl"></el-input>
-              placeholder="请填写盘查车辆"
-              clearable
-              :disabled="disabled"
-              v-model="form.xlghPcCl"
-            ></el-input>
           </el-form-item>
           <el-form-item prop="xlghXllc" label="巡逻里程:">
-            <el-input-number
+            <el-input-number style="width: 80%" min="0" :disabled="disabled" placeholder="请填写巡逻里程"
-              style="width: 80%;"
+              v-model="form.xlghXllc"></el-input-number>
-              min="0"
-              :disabled="disabled"
-              placeholder="请填写巡逻里程"
-              v-model="form.xlghXllc"
-            ></el-input-number>
             <el-tag size="small" type="warning">公里</el-tag>
           </el-form-item>
           <el-form-item label="下发巡组:">
-            <el-input
+            <el-input placeholder="请填写下发巡组" clearable :disabled="disabled" v-model="form.xfbbName"
-              placeholder="请填写下发巡组"
+              @click="visible = true" readonly></el-input>
-              clearable
-              :disabled="disabled"
-              v-model="form.xfbbName"
-              @click="visible = true"
-              readonly
-            ></el-input>
           </el-form-item>
-
+          <div v-if="form?.rwZt !== '01'" style="flex: 1; display: flex; justify-content: flex-end">
-          <div v-if="form?.rwZt !== '01'" style="flex: 1; display: flex; justify-content: flex-end;">
             <el-button :disabled="isButtonDisabled" @click="checkInCardOpen">追加打卡</el-button>
           </div>
-
+          <el-row style="width: 100%">
-          <el-row style="width:100%;">
             <el-col>
-              <MyTable
+              <MyTable :tableData="form?.bddList" :tableColumn="pageData.tableColumn"
-                :tableData="form?.bddList"
+                :tableConfiger="pageData.tableConfiger" @chooseData="handleChooseDataChange" :selectable="selectable">
-                :tableColumn="pageData.tableColumn"
-                :tableConfiger="pageData.tableConfiger"
-                @chooseData="handleChooseDataChange"
-                :selectable="selectable"
-              >
                 <template #xlghDkcs="{ row, $index }">
                   <div class="validation-container">
-                    <el-input-number
+                    <el-input-number style="width: 30%" :placeholder="`输入打卡点${$index + 1}需打卡次数`" clearable min="0"
-                      style="width: 30%;"
+                      :disabled="!selectable(row)" v-model="row.xlghDkcs" :class="{ 'is-error': hasError($index) }"
-                      :placeholder="`输入打卡点${$index + 1}需打卡次数`"
+                      @blur="validateField($index)" />
-                      clearable
-                      min="0"
-                      :disabled="!selectable(row)"
-                      v-model="row.xlghDkcs"
-                      :class="{ 'is-error': hasError($index) }"
-                      @blur="validateField($index)"
-                    />
 
                     <!-- 展示错误信息 -->
-                    <span
+                    <span v-if="hasError($index)" class="error-message">
-                      v-if="hasError($index)"
-                      class="error-message"
-                    >
                       {{ getError($index) }}
                     </span>
                   </div>
@@ -142,12 +83,8 @@
               <div style="display: none">
                 <template v-for="(item, index) in form?.bddList" :key="index">
                   <el-form-item :prop="`bddList[${index}].xlghDkcs`" :label="item?.bddMc" :rules="checkPointRules">
-                    <el-input-number
+                    <el-input-number style="width: 100%" :placeholder="`输入打卡点${index + 1}需打卡次数`" clearable
-                      style="width: 100%;"
+                      v-model="item.xlghDkcs" />
-                      :placeholder="`输入打卡点${index + 1}需打卡次数`"
-                      clearable
-                      v-model="item.xlghDkcs"
-                    />
                   </el-form-item>
                 </template>
               </div>
@@ -158,7 +95,8 @@
     </div>
 
     <distribute-patrol-team-dialog v-model="visible" @selection-change="handleChange" />
-    <add-check-in-card ref="addCheckInCardRef" :disabledIds="disabledIds" :bddList="form?.bddList" v-model="checkInCardVisible" @change="handleSelectChange" />
+    <add-check-in-card ref="addCheckInCardRef" :disabledIds="disabledIds" :bddList="form?.bddList"
+      v-model="checkInCardVisible" @change="handleSelectChange" />
   </div>
 </template>
 
@@ -167,25 +105,24 @@ import { ref, reactive, getCurrentInstance, computed, watch } from "vue";
 import { updateData } from "@/api/service/dailyTaskPackage";
 import DictTag from "@/components/DictTag/index.vue";
 import MyTable from "@/components/aboutTable/MyTable.vue";
-import DistributePatrolTeamDialog
+import DistributePatrolTeamDialog from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/DistributePatrolTeamDialog.vue";
-  from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/DistributePatrolTeamDialog.vue";
+import AddCheckInCard from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/addCheckInCard.vue";
-import AddCheckInCard from "@/views/backOfficeSystem/service/taskPage/dailyTaskPackage/components/addCheckInCard.vue"
 const { proxy } = getCurrentInstance();
 const { D_ZDXL_FGXLRW_YJDJ } = proxy.$dict("D_ZDXL_FGXLRW_YJDJ");
 const btnLoading = ref(false); //按钮截流
 const title = ref("修改");
 const formRef = ref(null);
-const addCheckInCardRef = ref(null)
+const addCheckInCardRef = ref(null);
 const infoActive = ref(true);
 const visible = ref(false);
-const checkInCardVisible = ref(false)
+const checkInCardVisible = ref(false);
 
 const pageData = reactive({
   tableConfiger: {
-    rowKey: 'bddId',
+    rowKey: "bddId",
     rowHieght: 61,
     haveControls: false,
-    showSelectType: 'checkBox',
+    showSelectType: "checkBox",
     defaultSelectKeys: [],
     loading: false
   },
@@ -200,9 +137,9 @@ const pageData = reactive({
       label: "打卡次数",
       prop: "xlghDkcs",
       showSolt: true
-    },
+    }
   ]
-})
+});
 
 //级联选择器配置
 const props = defineProps({
@@ -212,7 +149,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(['update:modelValue', 'ok']);
+const emits = defineEmits(["update:modelValue", "ok"]);
 
 const dialogFormVisible = computed({
   get() {
@@ -221,7 +158,7 @@ const dialogFormVisible = computed({
   set(val) {
     emits("update:modelValue", val);
   }
-})
+});
 
 //表单数据
 const form = ref({
@@ -230,31 +167,31 @@ const form = ref({
 
 const isButtonDisabled = computed(() => {
   // const target = new Date('2025-09-18')
-  const target = new Date(form.value?.rwRq)
+  const target = new Date(form.value?.rwRq);
-  const now = new Date()
+  const now = new Date();
 
   // 只比较日期，忽略时间
-  return target.setHours(0, 0, 0, 0) < now.setHours(0, 0, 0, 0)
+  return target.setHours(0, 0, 0, 0) < now.setHours(0, 0, 0, 0);
-})
+});
 
 const disabled = computed(() => {
   // const targetDate = new Date(form.value?.rwRq);
   // const today = new Date();
-  return (form.value?.rwZt === '03' || isButtonDisabled.value);
+  return form.value?.rwZt === "03" || isButtonDisabled.value;
-})
+});
 
 // 打卡点验证规则
 const checkPointRules = [
-  { required: true, message: '请输入打卡次数', trigger: 'change' },
+  { required: true, message: "请输入打卡次数", trigger: "change" },
   {
     validator: (rule, value, callback) => {
       if (value < 1) {
-        callback(new Error('打卡次数必须大于0'));
+        callback(new Error("打卡次数必须大于0"));
       } else {
         callback();
       }
     },
-    trigger: 'change'
+    trigger: "change"
   }
 ];
 
@@ -287,22 +224,22 @@ const rules = reactive({
       message: "请填写盘查车辆",
       trigger: "change"
     }
-  ],
+  ]
 });
 
 //新增
 function open(row = {}, type) {
-  infoActive.value = type === 'view';
+  infoActive.value = type === "view";
   form.value = { ...row, xfbbName: row?.xfxz };
   form.value?.bddList?.forEach((item, index) => {
-    item.index = index // 直接添加index属性
+    item.index = index; // 直接添加index属性
-  })
+  });
 
-  pageData.tableConfiger.defaultSelectKeys = form.value?.bddList?.map(i => {
+  pageData.tableConfiger.defaultSelectKeys = form.value?.bddList?.map((i) => {
-    if (i?.selected) return i?.bddId
+    if (i?.selected) return i?.bddId;
-  })
+  });
 
-  title.value = type === 'view' ? '查看详情' : "编辑信息";
+  title.value = type === "view" ? "查看详情" : "编辑信息";
   dialogFormVisible.value = true;
 }
 
@@ -314,102 +251,107 @@ function close() {
 
 const handleChange = (val) => {
   form.value.xfbbId = val?.id;
-  form.value.xfbbQwJlId = val?.xfbbQwJlId?.[0]
+  form.value.xfbbQwJlId = val?.xfbbQwJlId?.[0];
   form.value.xfbbName = val?.xfbbName;
-}
+};
 
-const selectList = ref([])
+const selectList = ref([]);
 const handleChooseDataChange = (event) => {
-  selectList.value = [...event]
+  selectList.value = [...event];
-}
+};
 
 // 保存原始bddList的ID用于对比
-const disabledIds = ref(new Set())
+const disabledIds = ref(new Set());
 
 const updateDisabledIds = () => {
-  disabledIds.value = new Set(form.value?.bddList?.map(i => i.bddId))
+  disabledIds.value = new Set(form.value?.bddList?.map((i) => i.bddId));
-}
+};
 
 const selectable = (row) => {
-  return !disabledIds.value.has(row.bddId)
+  return !disabledIds.value.has(row.bddId);
-}
+};
 
 const handleSelectChange = (selection) => {
-  pageData.selectCheckList = selection
+  pageData.selectCheckList = selection;
 
   // 添加新项目
-  const newItems = selection.filter(item => !disabledIds.value.has(item.bddId))
+  const newItems = selection.filter(
-  form.value.bddList = [...form.value.bddList, ...newItems]
+    (item) => !disabledIds.value.has(item.bddId)
+  );
+  form.value.bddList = [...form.value.bddList, ...newItems];
 
   // 更新禁用ID集合
-  updateDisabledIds()
+  updateDisabledIds();
-  emits("ok", false)
+  emits("ok", false);
-}
+};
 
 // 监听form.bddList的变化，确保禁用集合同步更新
-watch(() => form.value.bddList, () => {
+watch(
-  updateDisabledIds()
+  () => form.value.bddList,
-}, { deep: true })
+  () => {
+    updateDisabledIds();
+  },
+  { deep: true }
+);
 
 const checkInCardOpen = () => {
-  addCheckInCardRef.value?.open(form.value)
+  addCheckInCardRef.value?.open(form.value);
-}
+};
 
-const fieldErrors = ref({})
+const fieldErrors = ref({});
 
 // 检查指定索引是否有错误
 const hasError = (index) => {
-  const propPath = `bddList[${index}].xlghDkcs`
+  const propPath = `bddList[${index}].xlghDkcs`;
-  return !!fieldErrors.value[propPath]
+  return !!fieldErrors.value[propPath];
-}
+};
 
 // 获取指定索引的错误信息
 const getError = (index) => {
-  const propPath = `bddList[${index}].xlghDkcs`
+  const propPath = `bddList[${index}].xlghDkcs`;
-  return fieldErrors.value[propPath] || ''
+  return fieldErrors.value[propPath] || "";
-}
+};
 
 // 验证单个字段
 const validateField = async (propPath) => {
   return new Promise((resolve) => {
     formRef.value.validateField(propPath, (errorMessage) => {
-      fieldErrors.value[propPath] = errorMessage
+      fieldErrors.value[propPath] = errorMessage;
-      resolve(!errorMessage)
+      resolve(!errorMessage);
-    })
+    });
-  })
+  });
-}
+};
 
 const validateAllCheckpoints = async () => {
-  if (!form.value.bddList) return true
+  if (!form.value.bddList) return true;
-  const validations = form.value?.bddList?.map((_, index) =>
+  const validations =
+    form.value?.bddList?.map((_, index) =>
       validateField(`bddList[${index}].xlghDkcs`)
-  ) || []
+    ) || [];
 
-  const results = await Promise.all(validations)
+  const results = await Promise.all(validations);
-  return results.every(result => result)
+  return results.every((result) => result);
-}
+};
 
 //提交
 const submit = async () => {
   try {
-    await validateAllCheckpoints()
+    await validateAllCheckpoints();
-    await formRef.value.validate()
+    await formRef.value.validate();
 
-    await updateData({ ...form.value, bddList: selectList.value || [] })
+    await updateData({ ...form.value, bddList: selectList.value || [] });
     proxy.$message({
       type: "success",
       message: "修改成功"
     });
     dialogFormVisible.value = false;
-    emits("ok")
+    emits("ok");
-
   } catch (error) {
     console.log(error);
   }
-}
+};
 
-
+defineExpose({ open });
-defineExpose({ open })
 </script>
 
 <style lang="scss" scoped>
@@ -454,7 +396,8 @@ defineExpose({ open })
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
-  min-height: 60px; /* 预留错误信息空间 */
+  min-height: 60px;
+  /* 预留错误信息空间 */
 }
 
 .error-message {

src/views/backOfficeSystem/service/taskPage/taskProgress/index.vue

@@ -1,8 +1,17 @@
 <script setup>
 import PageTitle from "@/components/aboutTable/PageTitle.vue";
-import GdMap from "@/components/Map/GdMap/index.vue"
+import GdMap from "@/components/Map/GdMap/index.vue";
-import { onMounted, reactive, ref, watchEffect, defineAsyncComponent } from "vue";
+import {
-import { fetchTbZdxlFgdwSelectList, fetchTbZdxlFgxlrwSelectList } from "@/api/service/taskProgress";
+  onMounted,
+  reactive,
+  ref,
+  watchEffect,
+  defineAsyncComponent
+} from "vue";
+import {
+  fetchTbZdxlFgdwSelectList,
+  fetchTbZdxlFgxlrwSelectList
+} from "@/api/service/taskProgress";
 import emitter from "@/utils/eventBus";
 import TaskDetailsDialog from "@/views/backOfficeSystem/service/taskPage/taskProgress/taskDetailsDialog.vue";
 
@@ -11,81 +20,117 @@ const taskDetailsRef = ref(null);
 const data = reactive({
   currentDate: "",
   list: []
-})
+});
 
 const fetchTaskList = async () => {
-  if (!data.currentDate) return
+  if (!data.currentDate) return;
   // const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
   const res = await fetchTbZdxlFgxlrwSelectList({ rwRq: data.currentDate });
-  emitter.emit("deletePointArea", "zdxl_fzyc")
+  emitter.emit("deletePointArea", "zdxl_fzyc");
   if (res && res?.length > 0) {
     data.list = res;
 
-    let cc = []
+    let cc = [];
     const list = data.list?.map((el, index) => {
-      let centerPoint = [el.zxX,el.zxY]
+      let centerPoint = [el.zxX, el.zxY];
       if (index == 0) cc = centerPoint;
-      let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
+      let position = [
-      let text = el.mc
+        [Number(el.x1), Number(el.y1)],
-      let obj = { position: position, text, id: el.id ,userData: el}
+        [Number(el.x2), Number(el.y2)]
+      ];
+      let text = el.mc;
+      let obj = { position: position, text, id: el.id, userData: el };
       return obj;
-    })
+    });
 
-    emitter.emit("echoPlane", { fontColor:'red',coords: list, type:'rectangle', flag:'zdxl_fzyc', color:'rgba(2,20,51,0.5)', linecolor:'#ee0629'})
+    emitter.emit("echoPlane", {
+      fontColor: "red",
+      coords: list,
+      type: "rectangle",
+      flag: "zdxl_fzyc",
+      color: "rgba(2,20,51,0.5)",
+      linecolor: "#ee0629"
+    });
     emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
   } else {
     data.list = [];
   }
-}
+};
 
-const info = ref([])
+const info = ref([]);
 const getData = async () => {
-  const res = await fetchTbZdxlFgdwSelectList()
+  const res = await fetchTbZdxlFgdwSelectList();
   if (res && res?.length > 0) {
-    emitter.emit("deletePointArea", "tbZdxlFgdw")
+    emitter.emit("deletePointArea", "tbZdxlFgdw");
 
-    let cc = []
+    let cc = [];
     const list = res?.map((el, index) => {
-      let centerPoint = [el.zxX,el.zxY]
+      let centerPoint = [el.zxX, el.zxY];
       if (index == 0) cc = centerPoint;
-      let position = [[Number(el.x1),Number(el.y1)],[Number(el.x2),Number(el.y2)]]
+      let position = [
-      let text = el.mc
+        [Number(el.x1), Number(el.y1)],
-      let obj = { position: position, text, id: el.id ,userData: el}
+        [Number(el.x2), Number(el.y2)]
+      ];
+      let text = el.mc;
+      let obj = { position: position, text, id: el.id, userData: el };
       return obj;
-    })
+    });
 
-    info.value = list
+    info.value = list;
-    emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: list, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+    emitter.emit("echoPlane", {
+      fontColor: "#12fdb8",
+      coords: list,
+      type: "rectangle",
+      flag: "tbZdxlFgdw",
+      color: "rgba(2,20,51,0.5)",
+      linecolor: "#1C97FF"
+    });
     emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
   }
 
-  await fetchTaskList()
+  await fetchTaskList();
-}
+};
 
 const handleChange = (val) => {
-  fetchTaskList()
+  fetchTaskList();
-}
+};
 
 const handleItem = (item) => {
-  const { zxX, zxY } = item
+  const { zxX, zxY } = item;
   emitter.emit("setMapCenter", { location: [zxX, zxY], zoomLevel: 14 });
-}
+};
 
 const handleUpdate = () => {
-  emitter.emit("echoPlane", { fontColor:'#12fdb8',coords: info.value, type:'rectangle', flag:'tbZdxlFgdw', color:'rgba(2,20,51,0.5)', linecolor:'#1C97FF'})
+  emitter.emit("echoPlane", {
-}
+    fontColor: "#12fdb8",
+    coords: info.value,
+    type: "rectangle",
+    flag: "tbZdxlFgdw",
+    color: "rgba(2,20,51,0.5)",
+    linecolor: "#1C97FF"
+  });
+};
 
 onMounted(async () => {
+  emitter.emit("addPointArea", {
+    coords: [{ jd: "104.454064", wd: "31.162123" }],
+    icon: require("@/assets/point/kfd.png"),
+    flag: "st"
+  });
   // 设置当前日期
   const today = new Date();
-  data.currentDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
+  data.currentDate = today.toISOString().split("T")[0]; // 格式化为 YYYY-MM-DD
 
-  await getData()
+  await getData();
 
   emitter.on("showFzycInfo", (data) => {
-    taskDetailsRef.value?.open(data?.info)
+    taskDetailsRef.value?.open(data?.info);
-  })
+  });
-})
+  emitter.emit("setMapCenter", {
+    location: [{ jd: "104.454064", wd: "31.162123" }],
+    zoomLevel: 14
+  });
+});
 </script>
 
 <template>
@@ -94,7 +139,7 @@ onMounted(async () => {
       <PageTitle title="任务进度" />
     </div>
     <div class="task-page">
-      <div style="height: 100vh; width: 80%;">
+      <div style="height: 100vh; width: 80%">
         <gd-map />
       </div>
       <div class="right">
@@ -116,11 +161,18 @@ onMounted(async () => {
               <!--              <div>必到点名称：</div>-->
               <div>
                 <div>打卡进度：</div>
-                <el-progress width="50" :percentage="item?.bddAllProgress || 0" />
+                <el-progress
+                  width="50"
+                  :percentage="item?.bddAllProgress || 0"
+                />
               </div>
               <div>
                 <div>巡逻里程进度：</div>
-                <el-progress width="50" color="#e6a23c" :percentage="item?.bddAllProgress || 0" />
+                <el-progress
+                  width="50"
+                  color="#e6a23c"
+                  :percentage="item?.bddAllProgress || 0"
+                />
               </div>
             </div>
           </template>
@@ -128,7 +180,11 @@ onMounted(async () => {
       </div>
     </div>
 
-    <task-details-dialog ref="taskDetailsRef" v-model="visible" @update="handleUpdate" />
+    <task-details-dialog
+      ref="taskDetailsRef"
+      v-model="visible"
+      @update="handleUpdate"
+    />
   </div>
 </template>