feat: 绑定点位
This commit is contained in:
parent
8e53faad52
commit
7590d5a986
@ -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);
|
||||
|
||||
|
||||
@ -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"
|
||||
@row-click="handleRowClick">
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" label="点位名称" prop="waypointName" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="所属地图"
|
||||
prop="mapName"
|
||||
:filters="[
|
||||
{ text: '厂区', value: '3e2116b5e15c4e999079fbe11bbb6392' },
|
||||
{ text: '车间', value: '269a6d3b480f4f11a7d36326885c931b' }
|
||||
]"
|
||||
:filter-method="filterHandler"
|
||||
show-overflow-tooltip />
|
||||
<el-table-column align="center" label="点位描述" prop="remark" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<el-row>
|
||||
<TableSearch :queryParams="pointQueryParams" :showSearch="showSearch" label-width="90px" @refresh="resetBindPointQuery" @search="handleBindPointQuery">
|
||||
<template #one>
|
||||
<el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24" :xxl="12">
|
||||
<el-form-item label="点位名称" prop="waypointName">
|
||||
<el-input v-model="pointQueryParams.waypointName" clearable placeholder="请输入点位名称"
|
||||
style="width: 100%" @keyup.enter="handleBindPointQuery" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</TableSearch>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<div style="height: 55vh">
|
||||
<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();
|
||||
getBoundPoints(taskId.value);
|
||||
pointQueryParams.mapId = row.mapId;
|
||||
getBindPointByTaskId(row.id)
|
||||
getPointListData()
|
||||
};
|
||||
|
||||
const getBoundPoints = (taskId) => {
|
||||
getWaypointByTaskId(taskId).then((res) => {
|
||||
const boundPointIds = res.data.map((point) => point.id);
|
||||
// 这里需要等点位数据加载完成后再设置选中状态
|
||||
nextTick(() => {
|
||||
if (pointRef.value) {
|
||||
pointRef.value.clearSelection(); // 先清除之前的选择状态
|
||||
pointTableDataList.value.forEach((point) => {
|
||||
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;
|
||||
/** 查询点位列表 */
|
||||
const getPointListData = async () => {
|
||||
const res = await getPointList(pointQueryParams)
|
||||
if (res.code === 200) {
|
||||
let ids = []
|
||||
console.log(taskRightList.value)
|
||||
if (taskRightList.value) {
|
||||
ids = taskRightList.value.map(item => item.id)
|
||||
}
|
||||
loading.value = false;
|
||||
taskLeftList.value = res.rows.filter(item => {
|
||||
return !ids.includes(item.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const pointRef = ref();
|
||||
|
||||
const handleRowClick = (row) => {
|
||||
pointRef.value.toggleRowSelection(row);
|
||||
};
|
||||
|
||||
const filterHandler = (value,row,column) => {
|
||||
return row["mapId"] === value
|
||||
const getBindPointByTaskId = async (taskId) => {
|
||||
const res = await getWaypointByTaskId(taskId)
|
||||
if (res.code === 200) {
|
||||
taskRightList.value = res.data;
|
||||
}
|
||||
}
|
||||
|
||||
const bindPoint = () => {
|
||||
// 这里可以调用绑定点位的接口，传递ids.value和当前任务的id
|
||||
const rows = pointRef.value.getSelectionRows(); // 绑定完成后清除选择状态
|
||||
const ids = rows.map((row) => row.id);
|
||||
bindWaypointsToTask(taskId.value, ids).then(() => {
|
||||
ElMessage.success("绑定成功");
|
||||
pointRef.value?.clearSelection();
|
||||
cancelPoint();
|
||||
});
|
||||
const taskLeftList = ref([])
|
||||
const taskRightList = ref([])
|
||||
|
||||
const bindPoint = async () => {
|
||||
if (taskRightList.value.length === 0) {
|
||||
ElMessage.warning("请选择点位")
|
||||
return
|
||||
}
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user