This commit is contained in:
parent
95d0223133
commit
c423f31490
|
|
@ -8,7 +8,6 @@
|
|||
:close-on-click-modal="false"
|
||||
@close="handleClose"
|
||||
append-to-body
|
||||
width="auto"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
|
|
@ -73,7 +72,7 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="接收组织" prop="deptId">
|
||||
<el-form-item label="接收组织">
|
||||
<el-tree-select
|
||||
v-model="form.deptId"
|
||||
:data="treeDataList"
|
||||
|
|
@ -115,10 +114,10 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { ElMessage, ElLoading } from 'element-plus'
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import _ from 'lodash-es'
|
||||
import { ref, computed, onMounted, nextTick } from 'vue';
|
||||
import { ElMessage, ElLoading } from 'element-plus';
|
||||
import { Delete, Plus } from '@element-plus/icons-vue';
|
||||
import _ from 'lodash-es';
|
||||
|
||||
// API
|
||||
import {
|
||||
|
|
@ -126,12 +125,13 @@ import {
|
|||
editTransferApplyApi,
|
||||
getProSelectApi,
|
||||
getTransferApplyFilesApi,
|
||||
getTransferApplyFilesByApplyIdApi,
|
||||
} from '@/api/filesTransfer/apply'
|
||||
import { getDeptSelectApi, getDictDataByTypeApi } from '@/api/select'
|
||||
getTransferApplyFilesByApplyIdApi
|
||||
} from '@/api/filesTransfer/apply';
|
||||
import { getDeptSelectApi, getDictDataByTypeApi } from '@/api/select';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
|
||||
// 子组件
|
||||
import FileTree from '@/views/common/fileTree.vue'
|
||||
import FileTree from '@/views/common/fileTree.vue';
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
|
|
@ -140,31 +140,31 @@ const props = defineProps({
|
|||
title: String,
|
||||
disabled: Boolean,
|
||||
isAdd: String, // 'add' | 'edit'
|
||||
rowData: Object,
|
||||
})
|
||||
rowData: Object
|
||||
});
|
||||
|
||||
const emit = defineEmits(['closeDialog', 'handleQuery'])
|
||||
const emit = defineEmits(['closeDialog', 'handleQuery']);
|
||||
|
||||
// ================== Reactive Data ==================
|
||||
const dialogVisible = ref(true)
|
||||
const dialogVisible = ref(true);
|
||||
const form = ref({
|
||||
id: null,
|
||||
proId: undefined,
|
||||
deptId: undefined,
|
||||
})
|
||||
const treeDataList = ref([])
|
||||
const proList = ref([])
|
||||
const checkTreeData = ref([])
|
||||
deptId: undefined
|
||||
});
|
||||
const treeDataList = ref([]);
|
||||
const proList = ref([]);
|
||||
const checkTreeData = ref([]);
|
||||
|
||||
const ruleFormRef = ref()
|
||||
const loadingInstance = ref(null)
|
||||
const ruleFormRef = ref();
|
||||
const loadingInstance = ref(null);
|
||||
|
||||
const fileTreeTitle = ref('')
|
||||
const isflag = ref(false)
|
||||
const fileTreeRow = ref({})
|
||||
const fileTreeTitle = ref('');
|
||||
const isflag = ref(false);
|
||||
const fileTreeRow = ref({});
|
||||
|
||||
// 动态 class
|
||||
const lDialog = computed(() => (props.width > 500 ? 'w700' : 'w500'))
|
||||
const lDialog = computed(() => (props.width > 500 ? 'w700' : 'w500'));
|
||||
|
||||
// ================== Rules ==================
|
||||
const rules = {
|
||||
|
|
@ -173,70 +173,70 @@ const rules = {
|
|||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!checkTreeData.value || checkTreeData.value.length === 0) {
|
||||
callback(new Error('请选择移交档案'))
|
||||
callback(new Error('请选择移交档案'));
|
||||
} else {
|
||||
callback()
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
deptId: [{ required: true, message: '请选择接收组织', trigger: 'change' }],
|
||||
}
|
||||
deptId: [{ required: true, message: '请选择接收组织', trigger: 'change' }]
|
||||
};
|
||||
|
||||
// ================== Methods ==================
|
||||
const convertToVueTree = (data, level = 1) => {
|
||||
if (!data || !Array.isArray(data)) return []
|
||||
const convertToVueTree = (data) => {
|
||||
if (!data || !Array.isArray(data)) return [];
|
||||
return data.map((item) => {
|
||||
const node = {
|
||||
id: item.deptId,
|
||||
label: item.deptName,
|
||||
}
|
||||
id: item.id,
|
||||
label: item.title
|
||||
};
|
||||
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
||||
if (level < 3) {
|
||||
const children = convertToVueTree(item.children, level + 1)
|
||||
if (children.length > 0) node.children = children
|
||||
}
|
||||
}
|
||||
return node
|
||||
})
|
||||
const children = convertToVueTree(item.children);
|
||||
if (children.length > 0) node.children = children;
|
||||
|
||||
}
|
||||
return node;
|
||||
});
|
||||
};
|
||||
|
||||
const findNodeById = (nodes, id) => {
|
||||
for (const node of nodes) {
|
||||
if (node.id === id) return node
|
||||
if (node.id === id) return node;
|
||||
if (node.children) {
|
||||
const found = findNodeById(node.children, id)
|
||||
if (found) return found
|
||||
const found = findNodeById(node.children, id);
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const initFormData = async () => {
|
||||
// 加载字典（预留）
|
||||
await getDictDataByTypeApi( { dictType: 'data_class_type' }).catch(() => {})
|
||||
await getDictDataByTypeApi({ dictType: 'data_class_type' }).catch(() => {
|
||||
});
|
||||
|
||||
// 加载部门树
|
||||
const deptRes = await getDeptSelectApi()
|
||||
treeDataList.value = convertToVueTree(deptRes.data.data)
|
||||
const deptRes = await getDeptTree();
|
||||
treeDataList.value = convertToVueTree(deptRes.data.data);
|
||||
|
||||
// 加载项目列表
|
||||
const proRes = await getProSelectApi()
|
||||
proList.value = proRes.data.data
|
||||
const proRes = await getProSelectApi();
|
||||
proList.value = proRes.data.data;
|
||||
|
||||
// 编辑模式回显
|
||||
if (props.isAdd === 'edit' && props.rowData) {
|
||||
form.value = {
|
||||
id: props.rowData.id || null,
|
||||
proId: props.rowData.proId || undefined,
|
||||
deptId: props.rowData.deptId || undefined,
|
||||
}
|
||||
deptId: props.rowData.deptId || undefined
|
||||
};
|
||||
|
||||
const res = await getTransferApplyFilesByApplyIdApi({
|
||||
id: props.rowData.id,
|
||||
proId: props.rowData.proId,
|
||||
})
|
||||
proId: props.rowData.proId
|
||||
});
|
||||
|
||||
if (Array.isArray(res.data.data)) {
|
||||
checkTreeData.value = res.data.data.map((item) => ({
|
||||
|
|
@ -246,111 +246,111 @@ const initFormData = async () => {
|
|||
fileName: item.fileName,
|
||||
proId: item.proId,
|
||||
fileSourceId: item.fileId,
|
||||
filePath: item.filePath,
|
||||
}))
|
||||
filePath: item.filePath
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
// 新增模式重置
|
||||
form.value = {
|
||||
id: null,
|
||||
proId: undefined,
|
||||
deptId: undefined,
|
||||
}
|
||||
checkTreeData.value = []
|
||||
}
|
||||
deptId: undefined
|
||||
};
|
||||
checkTreeData.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const handleProChange = (value) => {
|
||||
checkTreeData.value = []
|
||||
}
|
||||
checkTreeData.value = [];
|
||||
};
|
||||
|
||||
const handleAddFile = () => {
|
||||
if (!form.value.proId) {
|
||||
ElMessage.error('请选择项目')
|
||||
return
|
||||
}
|
||||
fileTreeTitle.value = '选择'
|
||||
fileTreeRow.value = { proId: form.value.proId }
|
||||
isflag.value = true
|
||||
ElMessage.error('请选择项目');
|
||||
return;
|
||||
}
|
||||
fileTreeTitle.value = '选择';
|
||||
fileTreeRow.value = { proId: form.value.proId };
|
||||
isflag.value = true;
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
isflag.value = false
|
||||
}
|
||||
isflag.value = false;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false
|
||||
emit('closeDialog')
|
||||
}
|
||||
dialogVisible.value = false;
|
||||
emit('closeDialog');
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
id: null,
|
||||
proId: undefined,
|
||||
deptId: undefined,
|
||||
}
|
||||
checkTreeData.value = []
|
||||
if (ruleFormRef.value) ruleFormRef.value.clearValidate()
|
||||
}
|
||||
deptId: undefined
|
||||
};
|
||||
checkTreeData.value = [];
|
||||
if (ruleFormRef.value) ruleFormRef.value.clearValidate();
|
||||
};
|
||||
|
||||
const handleResult = (res) => {
|
||||
ElMessage.success(res.data.msg)
|
||||
reset()
|
||||
emit('handleQuery')
|
||||
handleClose()
|
||||
}
|
||||
ElMessage.success(res.data.msg);
|
||||
reset();
|
||||
emit('handleQuery');
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
try {
|
||||
await ruleFormRef.value.validate()
|
||||
await ruleFormRef.value.validate();
|
||||
} catch {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
loadingInstance.value = ElLoading.service({
|
||||
lock: true,
|
||||
text: '数据提交中，请稍候...',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
target: document.querySelector('.el-dialog') || document.body,
|
||||
})
|
||||
target: document.querySelector('.el-dialog') || document.body
|
||||
});
|
||||
|
||||
try {
|
||||
const params = _.cloneDeep(form.value)
|
||||
const params = _.cloneDeep(form.value);
|
||||
|
||||
// 补充名称
|
||||
const proObj = proList.value.find((item) => item.id === params.proId)
|
||||
params.singleProName = proObj?.name || ''
|
||||
const proObj = proList.value.find((item) => item.id === params.proId);
|
||||
params.singleProName = proObj?.name || '';
|
||||
|
||||
const deptNode = findNodeById(treeDataList.value, params.deptId)
|
||||
params.deptName = deptNode?.label || ''
|
||||
const deptNode = findNodeById(treeDataList.value, params.deptId);
|
||||
params.deptName = deptNode?.label || '';
|
||||
|
||||
params.transferFileDtos = checkTreeData.value
|
||||
params.transferFileDtos = checkTreeData.value;
|
||||
|
||||
let res
|
||||
let res;
|
||||
if (props.isAdd === 'add') {
|
||||
res = await saveTransferApplyApi(params)
|
||||
res = await saveTransferApplyApi(params);
|
||||
} else {
|
||||
res = await editTransferApplyApi(params)
|
||||
res = await editTransferApplyApi(params);
|
||||
}
|
||||
|
||||
loadingInstance.value.close()
|
||||
loadingInstance.value.close();
|
||||
|
||||
if (res.data.code === 200) {
|
||||
handleResult(res)
|
||||
handleResult(res);
|
||||
} else {
|
||||
ElMessage.error(res.data.msg)
|
||||
ElMessage.error(res.data.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
loadingInstance.value.close()
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
}
|
||||
loadingInstance.value.close();
|
||||
ElMessage.error(error.message || '操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const getTreeData = async (nodeId) => {
|
||||
const res = await getTransferApplyFilesApi({
|
||||
proId: form.value.proId,
|
||||
id: nodeId,
|
||||
})
|
||||
id: nodeId
|
||||
});
|
||||
|
||||
if (Array.isArray(res.data.data)) {
|
||||
for (const item of res.data.data) {
|
||||
|
|
@ -361,50 +361,53 @@ const getTreeData = async (nodeId) => {
|
|||
fileName: item.fileName,
|
||||
proId: item.proId,
|
||||
fileSourceId: item.fileId,
|
||||
filePath: item.filePath,
|
||||
}
|
||||
filePath: item.filePath
|
||||
};
|
||||
|
||||
const exists = checkTreeData.value.some(
|
||||
(f) => f.proFilesContentsId === newFile.proFilesContentsId
|
||||
)
|
||||
);
|
||||
if (!exists) {
|
||||
checkTreeData.value.push(newFile)
|
||||
checkTreeData.value.push(newFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 触发校验
|
||||
nextTick(() => {
|
||||
ruleFormRef.value?.validateField('checkTreeData')
|
||||
})
|
||||
}
|
||||
ruleFormRef.value?.validateField('checkTreeData');
|
||||
});
|
||||
};
|
||||
|
||||
const removeFile = (index) => {
|
||||
checkTreeData.value.splice(index, 1)
|
||||
checkTreeData.value.splice(index, 1);
|
||||
nextTick(() => {
|
||||
ruleFormRef.value?.validateField('checkTreeData')
|
||||
})
|
||||
}
|
||||
ruleFormRef.value?.validateField('checkTreeData');
|
||||
});
|
||||
};
|
||||
|
||||
// ================== Lifecycle ==================
|
||||
onMounted(() => {
|
||||
initFormData()
|
||||
})
|
||||
initFormData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w700 ::v-deep(.el-dialog) {
|
||||
width: 1100px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep(.el-dialog) {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 ::v-deep(.el-dialog__header),
|
||||
.w700 ::v-deep(.el-dialog__header) {
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue