|
@@ -8,9 +8,20 @@
|
|
|
<!-- 第一行 -->
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label="单位名称:" prop="unitId">
|
|
|
- <el-select v-model="queryForm.unitId" placeholder="全部" clearable>
|
|
|
- <el-option v-for="item in unitList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
|
|
|
- </el-select>
|
|
|
+<!-- <el-select v-model="queryForm.unitId" placeholder="全部" clearable>-->
|
|
|
+<!-- <el-option v-for="item in unitList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>-->
|
|
|
+<!-- </el-select>-->
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryForm.unitId"
|
|
|
+ :data="unitList"
|
|
|
+ :render-after-expand="false"
|
|
|
+ placeholder="请选择单位"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ style="width: 468px !important"
|
|
|
+ :props="props"
|
|
|
+ node-key="deptId"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
@@ -72,9 +83,19 @@
|
|
|
<div class="common-dialog-box">
|
|
|
<el-form ref="addFormRef" :model="addForm" :rules="rules" label-width="120px">
|
|
|
<el-form-item label="单位名称:" prop="unitId">
|
|
|
- <el-select v-model="addForm.unitId" placeholder="请选择单位" clearable style="width: 468px !important">
|
|
|
- <el-option v-for="item in unitList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
|
|
|
- </el-select>
|
|
|
+<!-- <el-select v-model="addForm.unitId" placeholder="请选择单位" clearable style="width: 468px !important">-->
|
|
|
+<!-- <el-option v-for="item in unitList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>-->
|
|
|
+<!-- </el-select>-->
|
|
|
+ <el-tree-select
|
|
|
+ v-model="addForm.unitId"
|
|
|
+ :data="unitList"
|
|
|
+ :render-after-expand="false"
|
|
|
+ placeholder="请选择单位"
|
|
|
+ clearable
|
|
|
+ style="width: 468px !important"
|
|
|
+ :props="props"
|
|
|
+ node-key="deptId"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="联系人:" prop="contactName">
|
|
|
<el-input v-model="addForm.contactName" placeholder="请输入联系人" style="width: 468px !important" />
|
|
@@ -121,6 +142,7 @@ import {
|
|
|
} from '@/api/riskPrevention/planManage';
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
import { to } from 'await-to-js';
|
|
|
+import { validatePhone } from '@/utils/validate';
|
|
|
|
|
|
interface QueryForm {
|
|
|
page: number;
|
|
@@ -136,7 +158,9 @@ interface resultVO {
|
|
|
position: string;
|
|
|
phone: string;
|
|
|
}
|
|
|
-
|
|
|
+const props = ref({
|
|
|
+ label:'deptName'
|
|
|
+})
|
|
|
const queryForm = reactive<QueryForm>({
|
|
|
page: 1,
|
|
|
pageSize: 10,
|
|
@@ -170,10 +194,36 @@ const getList = async () => {
|
|
|
|
|
|
onMounted(async () => {
|
|
|
const res = await listDept();
|
|
|
- unitList.value = res.data;
|
|
|
+ unitList.value = transformToTree(res.data);
|
|
|
getList();
|
|
|
});
|
|
|
|
|
|
+const transformToTree = (data, parentId = 0) => {
|
|
|
+ const map = {};
|
|
|
+ const result = [];
|
|
|
+ // 首先,将所有数据项放入一个映射中,以便快速查找
|
|
|
+ data.forEach(item => {
|
|
|
+ map[item.deptId] = { ...item, children: [] };
|
|
|
+ });
|
|
|
+ // 然后,遍历数据项,构建树形结构
|
|
|
+ data.forEach(item => {
|
|
|
+ const node = map[item.deptId];
|
|
|
+ if (item.parentId === parentId) {
|
|
|
+ // 如果 parentId 匹配,则将该节点添加到结果数组中
|
|
|
+ result.push(node);
|
|
|
+ } else {
|
|
|
+ // 否则,找到其父节点,并将其添加到父节点的 children 数组中
|
|
|
+ const parentNode = map[item.parentId];
|
|
|
+ if (parentNode) {
|
|
|
+ parentNode.children.push(node);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log('fanhui', result);
|
|
|
+ return result;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
const handleQuery = () => {
|
|
|
queryForm.page = 1;
|
|
|
getList();
|
|
@@ -242,10 +292,11 @@ let addForm = ref({
|
|
|
});
|
|
|
|
|
|
const rules = reactive({
|
|
|
- unitId: [{ required: true, message: '单位名称', trigger: 'blur' }],
|
|
|
- contactName: [{ required: true, message: '联系人', trigger: 'blur' }],
|
|
|
- position: [{ required: true, message: '职务', trigger: 'blur' }],
|
|
|
- phone: [{ required: true, message: '粤政易手机号码', trigger: 'blur' }]
|
|
|
+ unitId: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
|
|
|
+ contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
|
|
+ position: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
|
|
|
+ phone: [{ required: true, message: '粤政易手机号码不能为空', trigger: 'blur' },
|
|
|
+ { validator: validatePhone, message: '请输入正确格式的联系电话', trigger: 'blur' }]
|
|
|
});
|
|
|
|
|
|
const resetForm = () => {
|