|
|
@@ -2,7 +2,7 @@
|
|
|
* @Author: tengmingxue 1473375109@qq.com
|
|
|
* @Date: 2023-08-29 16:44:32
|
|
|
* @LastEditors: tengmingxue 1473375109@qq.com
|
|
|
- * @LastEditTime: 2023-08-30 17:04:36
|
|
|
+ * @LastEditTime: 2023-09-17 19:16:57
|
|
|
* @FilePath: \xld-gis-admin\src\views\dataAdmin\dataAdmin\configProcess\addStepForm.vue
|
|
|
* @Description: 流程步骤配置表单
|
|
|
-->
|
|
|
@@ -62,7 +62,7 @@
|
|
|
:labelCol="{ span: 4 }"
|
|
|
:wrapper-col="{ span: 12 }"
|
|
|
>
|
|
|
- <a-select
|
|
|
+ <!-- <a-select
|
|
|
v-model:value="formState.dept"
|
|
|
placeholder="请选择处理部门"
|
|
|
mode="multiple"
|
|
|
@@ -71,7 +71,24 @@
|
|
|
>
|
|
|
<a-select-option value="1">部门1</a-select-option>
|
|
|
<a-select-option value="2">部门2</a-select-option>
|
|
|
- </a-select>
|
|
|
+ </a-select> -->
|
|
|
+ <a-tree-select
|
|
|
+ show-search
|
|
|
+ style="width: 100%"
|
|
|
+ :replaceFields="replaceFields"
|
|
|
+ :tree-data="treeData"
|
|
|
+ v-model:value="formState.dept"
|
|
|
+ :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
+ placeholder="Please select"
|
|
|
+ allow-clear
|
|
|
+ multiple
|
|
|
+ tree-default-expand-all
|
|
|
+ @change="treeSelectChange"
|
|
|
+ >
|
|
|
+ <template #title="{ key, value }">
|
|
|
+ <span style="color: #08c" v-if="key === '0-0-1'">Child Node1 {{ value }}</span>
|
|
|
+ </template>
|
|
|
+ </a-tree-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item
|
|
|
v-if="formState.xh !== 1"
|
|
|
@@ -89,7 +106,7 @@
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<template v-for="user in handlers" :key="user.userid">
|
|
|
- <a-select-option :value="user.userid">{{ user.username }}</a-select-option>
|
|
|
+ <a-select-option :value="user.userId">{{ user.userName }}</a-select-option>
|
|
|
</template>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
@@ -102,8 +119,18 @@
|
|
|
style="height: 100%"
|
|
|
>
|
|
|
<template #operation="{ record }">
|
|
|
- <a v-if="record.xh !== 1" style="color: #2d74e7;margin: 10px;" @click="moveClick(-1,record)">上移</a>
|
|
|
- <a v-if="record.xh < userList.length" style="color: #2d74e7;margin: 10px;" @click="moveClick(1,record)">下移</a>
|
|
|
+ <a
|
|
|
+ v-if="record.xh !== 1"
|
|
|
+ style="color: #2d74e7; margin: 10px"
|
|
|
+ @click="moveClick(-1, record)"
|
|
|
+ >上移</a
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ v-if="record.xh < userList.length"
|
|
|
+ style="color: #2d74e7; margin: 10px"
|
|
|
+ @click="moveClick(1, record)"
|
|
|
+ >下移</a
|
|
|
+ >
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</a-form>
|
|
|
@@ -113,6 +140,9 @@ import { defineComponent, ref, reactive, onMounted, watch, UnwrapRef, toRaw } fr
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
import { DeleteOutlined } from '@ant-design/icons-vue';
|
|
|
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
|
|
+import { structureList } from '/@/api/sys/position';
|
|
|
+import { queryPersonByDepId } from '/@/api/sys/user';
|
|
|
+
|
|
|
const props = {
|
|
|
currStep: { type: Object, require: true },
|
|
|
};
|
|
|
@@ -139,7 +169,7 @@ export default defineComponent({
|
|
|
},
|
|
|
{
|
|
|
title: '人员',
|
|
|
- dataIndex: 'username',
|
|
|
+ dataIndex: 'userName',
|
|
|
width: '40%',
|
|
|
align: 'center',
|
|
|
},
|
|
|
@@ -151,11 +181,17 @@ export default defineComponent({
|
|
|
slots: { customRender: 'operation' },
|
|
|
},
|
|
|
];
|
|
|
- const handlers = [
|
|
|
- { userid: '001', username: '张三' },
|
|
|
- { userid: '002', username: '王维' },
|
|
|
- { userid: '003', username: '李白' },
|
|
|
- ];
|
|
|
+
|
|
|
+ const replaceFields = { children: 'children', title: 'departName', key: 'id', value: 'value' };
|
|
|
+
|
|
|
+ const treeData = ref([]);
|
|
|
+
|
|
|
+ const handlers = ref([
|
|
|
+ // { userId: '001', userName: '张三' },
|
|
|
+ // { userId: '002', userName: '王维' },
|
|
|
+ // { userId: '003', userName: '李白' },
|
|
|
+ ]);
|
|
|
+
|
|
|
const userList = ref([]);
|
|
|
const formState: UnwrapRef<FormState> = reactive({
|
|
|
xh: 1,
|
|
|
@@ -189,9 +225,9 @@ export default defineComponent({
|
|
|
watch(
|
|
|
() => formState.user,
|
|
|
(list) => {
|
|
|
- userList.value = []
|
|
|
+ userList.value = [];
|
|
|
list.map((item, index) => {
|
|
|
- const obj = handlers.find((user) => user.userid === item);
|
|
|
+ const obj = handlers.value.find((user) => user.userId === item);
|
|
|
if (obj) {
|
|
|
obj['xh'] = index + 1;
|
|
|
userList.value.push(obj);
|
|
|
@@ -199,9 +235,10 @@ export default defineComponent({
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
+
|
|
|
/**
|
|
|
* 信息内容改变
|
|
|
- */
|
|
|
+ */
|
|
|
const stepInfoChange = () => {
|
|
|
emit('editStep', formState);
|
|
|
};
|
|
|
@@ -237,28 +274,88 @@ export default defineComponent({
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ /**
|
|
|
+ * 校验数据完整性
|
|
|
+ */
|
|
|
+ const validateForm = () => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ resolve(true);
|
|
|
+ })
|
|
|
+ .catch((error: ValidateErrorEntity<FormState>) => {
|
|
|
+ console.log('校验失败', error);
|
|
|
+ resolve(false);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
/**
|
|
|
* 审核顺序改变
|
|
|
- */
|
|
|
- const moveClick = (flag,row) => {
|
|
|
+ */
|
|
|
+ const moveClick = (flag, row) => {
|
|
|
//1、修改顺序
|
|
|
const obj = userList.value.find((item) => item.xh === row.xh);
|
|
|
const index = userList.value.indexOf(obj);
|
|
|
- if(index < 0) return
|
|
|
- const temp = cloneDeep(userList.value[index])
|
|
|
- const increment = flag
|
|
|
- userList.value[index] = cloneDeep(userList.value[index + increment])
|
|
|
- userList.value[index + increment] = cloneDeep(temp)
|
|
|
+ if (index < 0) return;
|
|
|
+ const temp = cloneDeep(userList.value[index]);
|
|
|
+ const increment = flag;
|
|
|
+ userList.value[index] = cloneDeep(userList.value[index + increment]);
|
|
|
+ userList.value[index + increment] = cloneDeep(temp);
|
|
|
//2、重新生成序号
|
|
|
- userList.value.forEach((item,index)=>{
|
|
|
- item['xh'] = index + 1
|
|
|
- })
|
|
|
+ userList.value.forEach((item, index) => {
|
|
|
+ item['xh'] = index + 1;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const queryDept = async () => {
|
|
|
+ const res = await structureList();
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ treeData.value = dealData(res);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ /**
|
|
|
+ * 查询人员信息
|
|
|
+ */
|
|
|
+ const queryUsers = async (nodeIds) => {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('depId', nodeIds.toString());
|
|
|
+ const res = await queryPersonByDepId(formData);
|
|
|
+ if(res && res.resp_code === 0){
|
|
|
+ //过滤userId不存在的
|
|
|
+ handlers.value = res?.datas ? res?.datas : []
|
|
|
+ handlers.value = handlers.value.filter(user=>user.userId != null)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const treeSelectChange = (nodeIds, nodeNames, nodes) => {
|
|
|
+ //console.log('选择部门',nodeIds,nodeNames,nodes)
|
|
|
+ if (nodeIds.length > 0) queryUsers(nodeIds);
|
|
|
+ else {
|
|
|
+ handlers.value = []
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
- onMounted(async () => {});
|
|
|
+ /**
|
|
|
+ * 处理显示的数据只有叶子节点可以被选中
|
|
|
+ */
|
|
|
+ const dealData = (param) => {
|
|
|
+ return param.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ disabled: !!item.children,
|
|
|
+ children: item.children ? dealData(item.children) : [],
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ queryDept();
|
|
|
+ });
|
|
|
|
|
|
return {
|
|
|
formRef,
|
|
|
+ treeData,
|
|
|
+ replaceFields,
|
|
|
formState,
|
|
|
rules,
|
|
|
rules1,
|
|
|
@@ -267,8 +364,13 @@ export default defineComponent({
|
|
|
userList,
|
|
|
stepEdit,
|
|
|
currStep,
|
|
|
+ validateForm,
|
|
|
stepInfoChange,
|
|
|
moveClick,
|
|
|
+ queryDept,
|
|
|
+ queryUsers,
|
|
|
+ dealData,
|
|
|
+ treeSelectChange,
|
|
|
};
|
|
|
},
|
|
|
});
|