feat: 绑定点位

src/views/inspection/point/index.vue

@@ -225,9 +225,6 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="dialogVisible" title="参数配置" width="1080px">
-      <EditTable></EditTable>
-    </el-dialog>
   </div>
 </template>
 
@@ -257,7 +254,6 @@ const { proxy } = getCurrentInstance();
 
 const tableDataList = ref([]);
 const open = ref(false);
-const dialogVisible = ref(false);
 const loading = ref(false);
 const showSearch = ref(true);
 

src/views/inspection/task/index.vue

@@ -43,6 +43,7 @@
                         </el-tag>
                     </template>
                 </el-table-column>
+                <el-table-column align="center" label="所属地图" prop="mapName" show-overflow-tooltip />
                 <el-table-column align="center" label="创建人" prop="createBy" show-overflow-tooltip />
                 <el-table-column align="center" label="创建时间" prop="createTime" show-overflow-tooltip />
                 <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="260">
@@ -69,11 +70,26 @@
                     <el-input v-model="form.taskName" placeholder="请输入任务名称" />
                 </el-form-item>
                 <el-form-item label="任务类型" prop="taskType">
-                    <el-select v-model="queryParams.taskType" clearable placeholder="请选择任务类型" style="width: 100%">
+                    <el-select v-model="form.taskType" clearable placeholder="请选择任务类型" style="width: 100%">
                         <el-option label="巡检任务" value="1" />
                         <el-option label="讲解任务" value="2" />
                     </el-select>
                 </el-form-item>
+                <el-form-item label="所属地图" prop="mapId">
+                    <el-select
+                        v-model="form.mapId"
+                        clearable
+                        placeholder="请选择所属地图"
+                        style="width: 100%"
+                    >
+                        <el-option
+                        v-for="item in mapList"
+                        :key="item.id"
+                        :label="item.mapName"
+                        :value="item.id"
+                        />
+                    </el-select>
+                </el-form-item>
                 <el-form-item label="备注" prop="remark">
                     <el-input v-model="form.remark" :rows="2" placeholder="请输入备注" type="textarea" />
                 </el-form-item>
@@ -88,22 +104,54 @@
 
         <!-- 点位绑定弹窗 -->
         <el-dialog v-model="dialogVisible" title="点位绑定" width="800px">
-            <el-table ref="pointRef" v-loading="loading" height="100%" :data="pointTableDataList"
+            <el-row>
-                @row-click="handleRowClick">
+                <TableSearch :queryParams="pointQueryParams" :showSearch="showSearch" label-width="90px" @refresh="resetBindPointQuery" @search="handleBindPointQuery">
-                <el-table-column align="center" type="selection" width="55" />
+                    <template #one>
-                <el-table-column align="center" label="点位名称" prop="waypointName" show-overflow-tooltip />
+                        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" :xxl="12">
-                <el-table-column
+                            <el-form-item label="点位名称" prop="waypointName">
-                    align="center"
+                                <el-input v-model="pointQueryParams.waypointName" clearable placeholder="请输入点位名称"
-                    label="所属地图"
+                                    style="width: 100%" @keyup.enter="handleBindPointQuery" />
-                    prop="mapName"
+                            </el-form-item>
-                    :filters="[
+                        </el-col>
-                        { text: '厂区', value: '3e2116b5e15c4e999079fbe11bbb6392' },
+                    </template>
-                        { text: '车间', value: '269a6d3b480f4f11a7d36326885c931b' }
+                </TableSearch>
-                    ]"
+            </el-row>
-                    :filter-method="filterHandler"
+            <el-row :gutter="24">
-                    show-overflow-tooltip />
+                <el-col :span="12">
-                <el-table-column align="center" label="点位描述" prop="remark" show-overflow-tooltip />
+                    <div style="height: 55vh">
-            </el-table>
+                        <div class="task-title">待选择点位</div>
+
+                        <draggable :animation="340" :forceFallback="true" :list="taskLeftList" class="draggable-group"
+                            ghostClass="dragClass" group="people" itemKey="name">
+                            <template #item="{ element, index }">
+                                <div class="list-group-item">
+                                    <el-icon>
+                                        <Tools />
+                                    </el-icon>
+                                    {{ element.waypointName }}
+                                </div>
+                            </template>
+                        </draggable>
+                    </div>
+                </el-col>
+                <el-col :span="12">
+                    <div style="height: 55vh">
+                        <div class="task-title">点位排序</div>
+                        <draggable :animation="340" :forceFallback="true" :list="taskRightList" class="draggable-group"
+                            ghostClass="dragClass" group="people" itemKey="name">
+                            <template #item="{ element, index }">
+                                <div class="list-group-item">
+                                    {{ index + 1 }} 、{{ element.waypointName }}
+                                </div>
+                            </template>
+                        </draggable>
+                    </div>
+                </el-col>
+            </el-row>
+            <div class="custom-block">
+                <div class="mb5">1、将待选择点位拖拽至点位排序中</div>
+                <div>2、点位排序中可拖拽自定义其顺序</div>
+            </div>
             <template #footer>
                 <div class="dialog-footer">
                     <el-button type="primary" @click="bindPoint">确 定</el-button>
@@ -121,6 +169,9 @@ import TableSearch from "@/components/TableSearch/index.vue";
 
 import { useContainerHeight } from "@/hooks/tableHeight";
 import { ElMessage, ElMessageBox } from "element-plus";
+import draggable from "vuedraggable";
+import { reactive, ref } from "vue";
+import { getMapList } from "@/api/inspection/map";
 
 const topContainerRef = ref();
 const containerHeight = useContainerHeight(topContainerRef);
@@ -148,6 +199,12 @@ const data = reactive({
         taskName: [
             { required: true, message: "任务名称不能为空", trigger: "blur" },
         ],
+        taskType: [
+            { required: true, message: "请选择任务类型", trigger: "blur" },
+        ],
+        mapId: [
+            { required: true, message: "请选择所属地图", trigger: "blur" },
+        ],
     },
 });
 
@@ -195,6 +252,17 @@ function handleAdd() {
     title.value = "添加任务";
 }
 
+const mapList = ref([]);
+// 获取地图列表
+const getMapArr = () => {
+    getMapList({
+        pageNum: 1,
+        pageSize: 10000,
+    }).then((response) => {
+        mapList.value = response.rows;
+    });
+}
+
 /** 修改按钮操作 */
 function handleUpdate(row) {
     form.value = { ...row };
@@ -240,74 +308,78 @@ function handleDelete(row) {
     });
 }
 
+const pointQueryParams = reactive({
+    pageNum: 1,
+    pageSize: 1000000,
+    waypointName: null,
+    mapId: null
+})
+
+/** 搜索按钮操作 */
+function handleBindPointQuery() {
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+function resetBindPointQuery() {
+    handleBindPointQuery();
+}
+
 const taskId = ref(null);
 const handleBindPoint = async (row) => {
     dialogVisible.value = true;
     taskId.value = row.id;
-    await getPointTableTable();
+    pointQueryParams.mapId = row.mapId;
-    getBoundPoints(taskId.value);
+    getBindPointByTaskId(row.id)
+    getPointListData()
 };
 
-const getBoundPoints = (taskId) => {
+/** 查询点位列表 */
-    getWaypointByTaskId(taskId).then((res) => {
+const getPointListData = async () => {
-        const boundPointIds = res.data.map((point) => point.id);
+  const res = await getPointList(pointQueryParams)
-        // 这里需要等点位数据加载完成后再设置选中状态
+  if (res.code === 200) {
-        nextTick(() => {    
+    let ids = []
-            if (pointRef.value) {
+    console.log(taskRightList.value)
-                pointRef.value.clearSelection(); // 先清除之前的选择状态
+    if (taskRightList.value) {
-                pointTableDataList.value.forEach((point) => {
+        ids = taskRightList.value.map(item => item.id)
-                    if (boundPointIds.includes(point.id)) {
-                        pointRef.value.toggleRowSelection(point, true); // 设置选中状态
-                    }
-                });
-            }
-        });
-    });
-};
-
-const pointTableDataList = ref([]);
-
-const getPointTableTable = async () => {
-    loading.value = true;
-    const res = await getPointList({
-        pageNum: 1,
-        pageSize: 10000,
-    });
-    if (res.code === 200) {
-        pointTableDataList.value = res.rows;
     }
-    loading.value = false;
+    taskLeftList.value = res.rows.filter(item => {
+        return !ids.includes(item.id)
+    })
+  }
 }
 
-const pointRef = ref();
+const getBindPointByTaskId = async (taskId) => {
-
+    const res = await getWaypointByTaskId(taskId)
-const handleRowClick = (row) => {
+    if (res.code === 200) {
-    pointRef.value.toggleRowSelection(row);
+        taskRightList.value = res.data;
-};
+    }
-
-const filterHandler = (value,row,column) => {
-  return row["mapId"] === value
 }
 
-const bindPoint = () => {
+const taskLeftList = ref([])
-    // 这里可以调用绑定点位的接口，传递ids.value和当前任务的id
+const taskRightList = ref([])
-    const rows = pointRef.value.getSelectionRows(); // 绑定完成后清除选择状态
+
-    const ids = rows.map((row) => row.id);
+const bindPoint = async () => {
-    bindWaypointsToTask(taskId.value, ids).then(() => {
+    if (taskRightList.value.length === 0) {
-        ElMessage.success("绑定成功");
+        ElMessage.warning("请选择点位")
-        pointRef.value?.clearSelection();
+        return
-        cancelPoint();
+    }
-    });
+    const ids = taskRightList.value.map(item => item.id)
+    const res = await bindWaypointsToTask(taskId.value, ids)
+    if (res.code === 200) {
+        ElMessage.success("绑定点位成功")
+        cancelPoint()
+    }
 };
 
 const cancelPoint = () => {
     dialogVisible.value = false;
-    taskId.value = null;
-    pointRef.value?.clearFilter()
 };
 
 onMounted(() => {
     getList();
+    getMapArr();
 });
 
 </script>