374 lines
14 KiB
Vue
374 lines
14 KiB
Vue
<template>
|
||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||
<div>
|
||
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
|
||
<el-form-item label="项目" prop="proId">
|
||
<el-select class="form-item" v-model="form.proId" filterable clearable placeholder="请选择项目"
|
||
@change="handleProChange">
|
||
<el-option v-for="item in proList" :key="item.id" :label="item.name"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="选择移交档案" prop="checkTreeData">
|
||
<div>
|
||
<el-button plain type="primary" size="mini" icon="el-icon-plus"
|
||
@click="handleAddFile">选择</el-button>
|
||
<!-- 选中文件表格 -->
|
||
<div v-if="checkTreeData && checkTreeData.length > 0" style="margin-top: 10px;">
|
||
<el-table :data="checkTreeData" border size="mini" style="width: 100%">
|
||
<el-table-column prop="index" label="序号" width="60" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.$index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="parParentName" label="所属分类" min-width="200">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.parParentName || '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="parentName" label="所属案卷" min-width="100">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.parentName || '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="fileName" label="文件名称" min-width="100">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.fileName || '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="80" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" icon="el-icon-delete" size="mini" style="color: #f56c6c;"
|
||
@click="removeFile(scope.$index)">
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="接收组织" prop="deptId">
|
||
<treeselect v-model="form.deptId" :options="treeDataList" placeholder="请选择接收组织" value-key="id"
|
||
:disable-branch-nodes="true" noChildrenText="没有数据了" noOptionsText="没有数据了"
|
||
noResultsText="没有搜索结果" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||
<el-button type="primary" class="search-btn" :disabled="disabled"
|
||
@click="submitForm('ruleForm')">确认</el-button>
|
||
</span>
|
||
<FileTree v-if="isflag" :isAdd="isAdd" :rowData="fileTreeRow" :title="fileTreeTitle" @closeDialog="closeDialog"
|
||
@getTreeData="getTreeData" :dataForm="fileTreeRow" :width="600" />
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import _ from 'lodash'
|
||
import {
|
||
saveTransferApplyApi,
|
||
editTransferApplyApi,
|
||
getProSelectApi,
|
||
getTransferApplyFilesApi,
|
||
getTransferApplyFilesByApplyIdApi
|
||
} from '@/api/filesTransfer/apply'
|
||
import { getDeptSelectApi } from '@/api/select'
|
||
import Treeselect from "@riophae/vue-treeselect";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
import FileTree from '@/views/common/fileTree.vue'
|
||
export default {
|
||
name: "ApplyForm",
|
||
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||
dicts: ['data_class_type'],
|
||
components: { Treeselect, FileTree },
|
||
data() {
|
||
return {
|
||
lDialog: this.width > 500 ? "w700" : "w500",
|
||
dialogVisible: true,
|
||
isDisabled: true,
|
||
form: {
|
||
proId: undefined,
|
||
deptId: undefined,
|
||
},
|
||
treeDataList: [],
|
||
proList: [],
|
||
checkTreeData: [],
|
||
loading: null,
|
||
rules: {
|
||
proId: [
|
||
{ required: true, message: '请选择项目', trigger: 'change' }
|
||
],
|
||
checkTreeData: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (!this.checkTreeData || this.checkTreeData.length === 0) {
|
||
callback(new Error('请选择移交档案'));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
deptId: [
|
||
{ required: true, message: '请选择接收组织', trigger: 'change' }
|
||
],
|
||
},
|
||
fileTreeTitle: "",
|
||
isflag: false,
|
||
fileTreeRow: {},
|
||
};
|
||
},
|
||
created() {
|
||
this.initFormData();
|
||
},
|
||
methods: {
|
||
/** 初始化表单数据 */
|
||
async initFormData() {
|
||
await getDeptSelectApi().then(res => {
|
||
this.treeDataList = this.convertToVueTree(res.data);
|
||
});
|
||
await getProSelectApi().then(res => {
|
||
this.proList = res.data;
|
||
|
||
});
|
||
|
||
|
||
if (this.isAdd === 'edit' && this.rowData) {
|
||
// 编辑模式：填充表单数据
|
||
this.form = {
|
||
id: this.rowData.id || null,
|
||
proId: this.rowData.proId || undefined,
|
||
deptId: this.rowData.deptId || undefined,
|
||
};
|
||
const res = await getTransferApplyFilesByApplyIdApi({ id: this.rowData.id });
|
||
if (Array.isArray(res.data) && res.data.length > 0) {
|
||
res.data.map(item => {
|
||
const newFile = {
|
||
proFilesContentsId: item.id,
|
||
parParentName: item.parParentName,
|
||
parentName: item.parentName,
|
||
fileName: item.fileName,
|
||
proId: item.proId,
|
||
fileSourceId: item.fileId,
|
||
filePath: item.filePath
|
||
};
|
||
this.checkTreeData.push(newFile);
|
||
})
|
||
}
|
||
} else {
|
||
// 新增模式：重置表单
|
||
this.form = {
|
||
proId: undefined,
|
||
deptId: undefined,
|
||
};
|
||
}
|
||
},
|
||
handleProChange(value) {
|
||
// console.log(value);
|
||
this.checkTreeData = [];
|
||
},
|
||
// 选择移交档案
|
||
handleAddFile() {
|
||
if (!this.form.proId) {
|
||
return this.$modal.msgError('请选择项目');
|
||
}
|
||
const proId = this.form.proId;
|
||
this.fileTreeTitle = "选择";
|
||
this.fileTreeRow = { proId };
|
||
this.isflag = true;
|
||
},
|
||
closeDialog() {
|
||
this.isflag = false;
|
||
},
|
||
showColose() {
|
||
this.isflag = false;
|
||
},
|
||
/*关闭弹窗 */
|
||
handleClose() {
|
||
this.dialogVisible = false;
|
||
this.$emit("closeDialog");
|
||
/* setTimeout(() => {
|
||
this.dialogVisible = true;
|
||
}); */
|
||
},
|
||
/**确认弹窗 */
|
||
sureBtnClick() {
|
||
this.dialogVisible = false;
|
||
this.$emit("closeDialog");
|
||
/* setTimeout(() => {
|
||
this.dialogVisible = true;
|
||
}); */
|
||
},
|
||
/**重置表单*/
|
||
reset() {
|
||
this.form = {
|
||
id: null,
|
||
proId: undefined,
|
||
deptId: undefined
|
||
};
|
||
this.resetForm("ruleForm");
|
||
this.checkTreeData = [];
|
||
},
|
||
handleReuslt(res) {
|
||
this.$modal.msgSuccess(res.msg);
|
||
this.reset();
|
||
this.$emit('handleQuery');
|
||
this.handleClose();
|
||
},
|
||
/**验证 */
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate(valid => {
|
||
if (valid) {
|
||
// 显示遮罩层
|
||
this.loading = this.$loading({
|
||
lock: true,
|
||
text: "数据提交中，请稍候...",
|
||
background: 'rgba(0,0,0,0.5)',
|
||
target: this.$el.querySelector('.el-dialog') || document.body
|
||
})
|
||
let params = _.cloneDeep(this.form);
|
||
// 获取单项工程名称
|
||
let proObj = this.proList.find(item => item.id === params.proId);
|
||
params.singleProName = proObj.name;
|
||
// 获取接收组织名称
|
||
const obj = this.findNodeById(this.treeDataList, this.form.deptId);
|
||
params.deptName = obj?.label || '';
|
||
params.transferFileDtos = this.checkTreeData;
|
||
// console.log(params);
|
||
|
||
if (this.isAdd === 'add') {
|
||
saveTransferApplyApi(params).then(res => {
|
||
this.loading.close();
|
||
if (res.code === 200) {
|
||
this.handleReuslt(res);
|
||
} else {
|
||
this.$modal.msgError(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.loading.close();
|
||
// this.$modal.msgError('提交失败，请重试');
|
||
});
|
||
} else {
|
||
editTransferApplyApi(params).then(res => {
|
||
this.loading.close();
|
||
if (res.code === 200) {
|
||
this.handleReuslt(res);
|
||
} else {
|
||
this.$modal.msgError(res.msg);
|
||
}
|
||
}).catch(error => {
|
||
this.loading.close();
|
||
// this.$modal.msgError('提交失败，请重试');
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 树数据过滤 - 支持无限层级转换
|
||
convertToVueTree(data, level = 1) {
|
||
if (!data || !Array.isArray(data)) {
|
||
return []
|
||
}
|
||
|
||
return data.map(item => {
|
||
const node = {
|
||
id: item.deptId,
|
||
label: item.deptName,
|
||
}
|
||
|
||
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
||
if (level < 3) {
|
||
const children = this.convertToVueTree(item.children, level + 1)
|
||
if (children.length > 0) node.children = children
|
||
}
|
||
}
|
||
|
||
return node
|
||
})
|
||
},
|
||
findNodeById(nodes, id) {
|
||
for (const node of nodes) {
|
||
if (node.id === id) return node;
|
||
if (node.children) {
|
||
const found = this.findNodeById(node.children, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
return null;
|
||
},
|
||
// 获取选中的节点
|
||
async getTreeData(nodeId) {
|
||
// this.checkTreeData = [];
|
||
const res = await getTransferApplyFilesApi({ proId: this.form.proId, id: nodeId });
|
||
if (Array.isArray(res.data) && res.data.length > 0) {
|
||
res.data.map(item => {
|
||
const newFile = {
|
||
proFilesContentsId: item.id,
|
||
parParentName: item.parParentName,
|
||
parentName: item.parentName,
|
||
fileName: item.fileName,
|
||
proId: item.proId,
|
||
fileSourceId: item.fileId,
|
||
filePath: item.filePath
|
||
};
|
||
const exists = this.checkTreeData.some(f => f.proFilesContentsId === newFile.proFilesContentsId);
|
||
if (!exists) {
|
||
this.checkTreeData.push(newFile);
|
||
}
|
||
})
|
||
}
|
||
|
||
// 触发表单验证
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleForm.validateField('checkTreeData');
|
||
});
|
||
},
|
||
// 删除文件
|
||
removeFile(index) {
|
||
this.checkTreeData.splice(index, 1);
|
||
// 触发表单验证
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleForm.validateField('checkTreeData');
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</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 {
|
||
// background: #eeeeee;
|
||
|
||
.el-dialog__title {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.yxq .el-range-separator {
|
||
margin-right: 7px !important;
|
||
}
|
||
|
||
.el-date-editor--daterange.el-input__inner {
|
||
width: 260px;
|
||
}
|
||
|
||
.form-item {
|
||
width: 100%;
|
||
}
|
||
|
||
.select-style {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style> |