档案目录管理
This commit is contained in:
parent
3b8febe221
commit
ef95bc0e42
|
|
@ -10,29 +10,47 @@ export function getArchivalCatalogueTreeApi(params) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增档案目录
|
// 新增档案目录
|
||||||
export function addArchiveApi(data) {
|
export function addArchiveLeftApi(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/archive',
|
url: '/smartArchives/archive/addLeft',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data,
|
data:data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增档案表格数据
|
||||||
|
export function addArchiveRightApi(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartArchives/archive/addRight',
|
||||||
|
method: 'post',
|
||||||
|
data:data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改档案目录
|
// 修改档案目录
|
||||||
export function putArchiveApi(data) {
|
export function editArchiveLeftApi(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/archive',
|
url: '/smartArchives/archive/editLeft',
|
||||||
method: 'put',
|
method: 'post',
|
||||||
data,
|
data:data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改档案目录
|
||||||
|
export function editArchiveRightApi(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartArchives/archive/editRight',
|
||||||
|
method: 'post',
|
||||||
|
data:data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除档案目录
|
// 删除档案目录
|
||||||
export function delArchiveApi(data) {
|
export function delArchiveApi(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/archive',
|
url: '/smartArchives/archive/del',
|
||||||
method: 'delete',
|
method: 'post',
|
||||||
data,
|
data:data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,4 +70,13 @@ export function getArchivalCatalogueListApi(params) {
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询序号
|
||||||
|
export function geMaxSortApi(params) {
|
||||||
|
return request({
|
||||||
|
url: '/smartArchives/archive/geMaxSort',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 文件分类标记-通用下拉选
|
||||||
|
export async function getClassifyMarkSelApi(params) {
|
||||||
|
return await request({
|
||||||
|
url: '/smartArchives/archive/getFilesClassifyMarkSelect',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,249 @@
|
||||||
|
<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="所属案卷">
|
||||||
|
<el-input type="textarea" class="form-item" :value="belongName" :disabled="true"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件题名" prop="contentName">
|
||||||
|
<el-input type="textarea" class="form-item" v-model="form.contentName" clearable show-word-limit
|
||||||
|
placeholder="请输入文件题名" maxlength="64" :disabled="detailStatus"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="案卷期限" prop="term">
|
||||||
|
<el-input class="form-item" v-model="form.term" clearable show-word-limit
|
||||||
|
placeholder="请输入案卷期限" maxlength="32" :disabled="detailStatus"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="归档责任单位" prop="unitName">
|
||||||
|
<el-input class="form-item" v-model="form.unitName" clearable show-word-limit
|
||||||
|
placeholder="请输入归档责任单位" maxlength="32" :disabled="detailStatus"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属专业" prop="major">
|
||||||
|
<el-input class="form-item" v-model="form.major" clearable show-word-limit
|
||||||
|
placeholder="请输入所属专业" maxlength="32" :disabled="detailStatus"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="档案标识代码" prop="markCode">
|
||||||
|
<el-select class="form-item" v-model="form.markCode" :disabled="detailStatus" filterable clearable
|
||||||
|
placeholder="请选择档案标识代码">
|
||||||
|
<el-option v-for="item in dict.type.mark_code" :key="item.value" :label="item.label"
|
||||||
|
:value="item.label"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件分类标记" prop="classifyMark">
|
||||||
|
<el-select class="form-item" v-model="form.classifyMark" :disabled="detailStatus" filterable clearable>
|
||||||
|
<el-option v-for="item in classifyMarkList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</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" v-if="!detailStatus"
|
||||||
|
@click="submitForm('ruleForm')">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import {
|
||||||
|
addArchiveRightApi,
|
||||||
|
editArchiveRightApi,
|
||||||
|
} from '@/api/archivesManagement/index.js'
|
||||||
|
import {getClassifyMarkSelApi} from '@/api/select.js'
|
||||||
|
export default {
|
||||||
|
name: "AddTableData",
|
||||||
|
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||||
|
dicts: ['mark_code'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lDialog: this.width > 500 ? "w700" : "w500",
|
||||||
|
dialogVisible: true,
|
||||||
|
isDisabled: true,
|
||||||
|
getClassifyMarkSelApi,
|
||||||
|
classifyMarkList : [],
|
||||||
|
form: {
|
||||||
|
contentName: null,
|
||||||
|
term: null,
|
||||||
|
unitName: null,
|
||||||
|
major: null,
|
||||||
|
markCode: null,
|
||||||
|
classifyMark: null,
|
||||||
|
},
|
||||||
|
belongName:'',
|
||||||
|
loading: null,
|
||||||
|
detailStatus:false,
|
||||||
|
rules: {
|
||||||
|
contentName: [
|
||||||
|
{ required: true, message: '文件题名不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
term: [
|
||||||
|
{ required: true, message: '案卷期限不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
unitName: [
|
||||||
|
{ required: true, message: '归档责任单位不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
major: [
|
||||||
|
{ required: true, message: '所属专业不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
markCode: [
|
||||||
|
{ required: true, message: '请选择档案标识代码', trigger: 'change' }
|
||||||
|
],
|
||||||
|
classifyMark: [
|
||||||
|
{ required: true, message: '请选择文件分类标记', trigger: 'change' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initFormData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 初始化表单数据 */
|
||||||
|
async initFormData() {
|
||||||
|
const res = await getClassifyMarkSelApi();
|
||||||
|
this.classifyMarkList = res.data;
|
||||||
|
this.belongName = this.rowData.belongName;
|
||||||
|
this.detailStatus = this.rowData.detailStatus;
|
||||||
|
if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
|
||||||
|
// 编辑模式：填充表单数据
|
||||||
|
this.form = {
|
||||||
|
id: this.rowData.id,
|
||||||
|
contentName: this.rowData.contentName || null,
|
||||||
|
term: this.rowData.term || null,
|
||||||
|
major: this.rowData.major || null,
|
||||||
|
unitName: this.rowData.unitName || null,
|
||||||
|
markCode: this.rowData.markCode || null,
|
||||||
|
classifyMark: this.rowData.classifyMark || null,
|
||||||
|
parentId:this.rowData.parentId || null,
|
||||||
|
level:4
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 新增模式：重置表单
|
||||||
|
this.form = {
|
||||||
|
contentName: null,
|
||||||
|
term: null,
|
||||||
|
unitName: null,
|
||||||
|
major: null,
|
||||||
|
markCode: null,
|
||||||
|
classifyMark: null,
|
||||||
|
parentId:this.rowData.id || null,
|
||||||
|
level:4
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*关闭弹窗 */
|
||||||
|
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 = {
|
||||||
|
contentName: null,
|
||||||
|
term: null,
|
||||||
|
unitName: null,
|
||||||
|
major: null,
|
||||||
|
markCode: null,
|
||||||
|
classifyMark: null,
|
||||||
|
parentId:null,
|
||||||
|
level:4
|
||||||
|
};
|
||||||
|
this.resetForm("ruleForm");
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
if (this.isAdd === 'add') {
|
||||||
|
addArchiveRightApi(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 {
|
||||||
|
editArchiveRightApi(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('提交失败，请重试');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.w700 .el-dialog {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog__header,
|
||||||
|
.w700 .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>
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
<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="dynamicRules" ref="ruleForm" label-width="110px"
|
||||||
|
:validate-on-rule-change="false">
|
||||||
|
<el-form-item label="上级节点" prop="parentId">
|
||||||
|
<treeselect v-model="form.parentId" :options="treeDataList" placeholder="请选择上级节点" value-key="id"
|
||||||
|
@select="onParentSelect" noChildrenText="没有数据了" noOptionsText="没有数据了" noResultsText="没有搜索结果" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="getFormLabel('contentName')" prop="contentName">
|
||||||
|
<el-input type="textarea" class="form-item" v-model="form.contentName" clearable show-word-limit
|
||||||
|
:placeholder="getFormPlaceholder('contentName')" maxlength="64"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="getFormLabel('sort')" prop="sort">
|
||||||
|
<el-input-number v-model="form.sort" :min="0" :label="getFormPlaceholder('sort')" controls-position="right"
|
||||||
|
style="width: 100%;"></el-input-number>
|
||||||
|
<template>
|
||||||
|
<span style="color: #f00000;">{{sortTitle}}</span>
|
||||||
|
</template>
|
||||||
|
</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>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import Treeselect from "@riophae/vue-treeselect";
|
||||||
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
|
import { getArchivalCatalogueTreeApi, addArchiveLeftApi, editArchiveLeftApi,geMaxSortApi } from '@/api/archivesManagement/index.js'
|
||||||
|
export default {
|
||||||
|
name: "AddTreeData",
|
||||||
|
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||||
|
components: { Treeselect },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lDialog: this.width > 500 ? "w700" : "w500",
|
||||||
|
dialogVisible: true,
|
||||||
|
isDisabled: true,
|
||||||
|
form: {
|
||||||
|
parentId: '',
|
||||||
|
contentName: '',
|
||||||
|
sort: 1,
|
||||||
|
},
|
||||||
|
loading: null,
|
||||||
|
treeDataList: [],
|
||||||
|
selectedParentLevel: null, // 保存选中父节点的层级
|
||||||
|
geMaxSortApi,
|
||||||
|
sortTitle:'',
|
||||||
|
rules: {
|
||||||
|
parentId: [
|
||||||
|
{ required: true, message: '上级节点不能为空', trigger: 'change' }
|
||||||
|
],
|
||||||
|
contentName: [
|
||||||
|
{ required: true, message: '分类名称不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
sort: [
|
||||||
|
{ required: true, message: '分类号不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 动态验证规则
|
||||||
|
dynamicRules() {
|
||||||
|
const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
|
||||||
|
return {
|
||||||
|
parentId: [
|
||||||
|
{ required: true, message: '上级节点不能为空', trigger: 'change' }
|
||||||
|
],
|
||||||
|
contentName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: isNonRootParent ? '案卷题名不能为空' : '分类名称不能为空',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sort: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: isNonRootParent ? '案卷排序号不能为空' : '分类号不能为空',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initFormData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getMaxSort(value){
|
||||||
|
const res = await geMaxSortApi({parentId:value});
|
||||||
|
this.sortTitle = '当前已有最大排序为' + (res.data || 0);
|
||||||
|
},
|
||||||
|
/** 获取表单标签 */
|
||||||
|
getFormLabel(field) {
|
||||||
|
const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
|
||||||
|
if (isNonRootParent) {
|
||||||
|
if (field === 'contentName') {
|
||||||
|
return '案卷题名';
|
||||||
|
} else if (field === 'sort') {
|
||||||
|
return '案卷排序号';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (field === 'contentName') {
|
||||||
|
return '分类名称';
|
||||||
|
} else if (field === 'sort') {
|
||||||
|
return '分类号';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
/** 获取表单占位符 */
|
||||||
|
getFormPlaceholder(field) {
|
||||||
|
const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
|
||||||
|
if (isNonRootParent) {
|
||||||
|
if (field === 'contentName') {
|
||||||
|
return '请输入案卷题名';
|
||||||
|
} else if (field === 'sort') {
|
||||||
|
return '请输入案卷排序号';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (field === 'contentName') {
|
||||||
|
return '请输入分类名称';
|
||||||
|
} else if (field === 'sort') {
|
||||||
|
return '请输入分类号';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
/** 上级节点选择事件 */
|
||||||
|
onParentSelect(selectedNode) {
|
||||||
|
this.selectedParentLevel = selectedNode ? selectedNode.level : null;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.ruleForm) {
|
||||||
|
this.$refs.ruleForm.clearValidate(['contentName', 'sort']);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.getMaxSort(selectedNode.id);
|
||||||
|
},
|
||||||
|
/** 查找父节点层级 */
|
||||||
|
findParentLevel(treeData, parentId) {
|
||||||
|
for (const node of treeData) {
|
||||||
|
if (node.id === parentId) {
|
||||||
|
this.selectedParentLevel = node.level;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
this.findParentLevel(node.children, parentId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 初始化表单数据 */
|
||||||
|
async initFormData() {
|
||||||
|
let value = 0;
|
||||||
|
if (this.isAdd === 'edit' && this.rowData) {
|
||||||
|
// 编辑模式：填充表单数据
|
||||||
|
this.form = {
|
||||||
|
id: this.rowData.id,
|
||||||
|
parentId: this.rowData.parentId || 0,
|
||||||
|
contentName: this.rowData.label || null,
|
||||||
|
sort: this.rowData.sort || 0,
|
||||||
|
level:this.rowData.level
|
||||||
|
};
|
||||||
|
value = this.rowData.parentId;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// 新增模式：重置表单
|
||||||
|
this.form = {
|
||||||
|
parentId: this.rowData.id,
|
||||||
|
contentName: null,
|
||||||
|
sort: 0,
|
||||||
|
level:this.rowData.level
|
||||||
|
};
|
||||||
|
value = this.rowData.id;
|
||||||
|
}
|
||||||
|
await this.getLeftTreeList();
|
||||||
|
|
||||||
|
// 如果是编辑模式，需要根据父节点ID找到对应的层级
|
||||||
|
if (this.isAdd === 'edit' && this.form.parentId) {
|
||||||
|
this.findParentLevel(this.treeDataList, this.form.parentId);
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.getMaxSort(value);
|
||||||
|
},
|
||||||
|
// 树数据过滤 - 支持无限层级转换，去除层级为3的数据
|
||||||
|
convertToVueTree(data) {
|
||||||
|
if (!data || !Array.isArray(data)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.map(item => {
|
||||||
|
// 如果当前节点层级为3，则跳过
|
||||||
|
if (item.level === 3) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const node = {
|
||||||
|
id: item.id,
|
||||||
|
label: item.contentName,
|
||||||
|
level: item.level
|
||||||
|
};
|
||||||
|
|
||||||
|
// 递归处理子节点
|
||||||
|
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
||||||
|
const children = this.convertToVueTree(item.children);
|
||||||
|
// 过滤掉null值（层级为3的节点）
|
||||||
|
const filteredChildren = children.filter(child => child !== null);
|
||||||
|
// 只有当子节点不为空时才添加 children 属性
|
||||||
|
if (filteredChildren.length > 0) {
|
||||||
|
node.children = filteredChildren;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
}).filter(node => node !== null); // 过滤掉null值
|
||||||
|
},
|
||||||
|
// 获取左侧树列表
|
||||||
|
async getLeftTreeList() {
|
||||||
|
const res = await getArchivalCatalogueTreeApi()
|
||||||
|
const transformedData = this.convertToVueTree(res.data)
|
||||||
|
this.treeDataList = transformedData;
|
||||||
|
},
|
||||||
|
/*关闭弹窗 */
|
||||||
|
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 = {
|
||||||
|
parentId: undefined,
|
||||||
|
contentName: null,
|
||||||
|
sort: null,
|
||||||
|
level:null
|
||||||
|
};
|
||||||
|
this.resetForm("ruleForm");
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
if (this.isAdd === 'add') {
|
||||||
|
addArchiveLeftApi(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 {
|
||||||
|
editArchiveLeftApi(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('提交失败，请重试');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.w700 .el-dialog {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog__header,
|
||||||
|
.w700 .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>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
export const formLabel = [
|
||||||
|
{
|
||||||
|
isShow: false, // 是否展示label
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_label: '文件名称',
|
||||||
|
f_model: 'contentName',
|
||||||
|
f_max: 32,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const columnsList = [
|
||||||
|
{ t_props: 'contentName', t_label: '文件名称',t_width:220 },
|
||||||
|
{ t_props: 'term', t_label: '案卷期限' },
|
||||||
|
{ t_props: 'markCode', t_label: '档案标识代码' },
|
||||||
|
{ t_props: 'unitName', t_label: '归档责任单位' },
|
||||||
|
{ t_props: 'major', t_label: '所属专业' },
|
||||||
|
{ t_props: 'classifyMark', t_label: '文件分类标记' }
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<!-- 左侧树 -->
|
||||||
|
<div>
|
||||||
|
<el-card style="min-height: calc(100vh - 125px)">
|
||||||
|
<el-row :gutter="20" style="display: flex; align-items: center">
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-button type="primary" size="small" @click="onHandleSearch">
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button plain size="small" type="primary" icon="el-icon-plus"
|
||||||
|
v-hasPermi="['archive:catalogue:add']" @click="addTree">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<div class="tree-container">
|
||||||
|
<el-tree ref="leftTreeRef" :data="treeDataList" default-expand-all class="left-tree-list"
|
||||||
|
@node-click="onHandleNodeClick" :filter-node-method="filterNode" highlight-current node-key="id">
|
||||||
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
|
<template v-if="isTruncated(node.label)">
|
||||||
|
<el-tooltip effect="dark" :content="node.label" placement="right">
|
||||||
|
<span class="node-label">{{ truncateLabel(node.label) }}</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<span class="node-label">{{ node.label }}</span>
|
||||||
|
</template>
|
||||||
|
<span class="btn-box">
|
||||||
|
<el-button type="text" icon="el-icon-plus" v-if="node.level !== 4"
|
||||||
|
@click.stop="() => addTree(data)" v-hasPermi="['archive:catalogue:add']">
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" v-if="node.level > 1" icon="el-icon-edit-outline"
|
||||||
|
style="color: #007ce0" @click.stop="() => editTree(node, data)" v-hasPermi="['archive:catalogue:edit']">
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" v-if="node.level > 1" icon="el-icon-delete" style="color: #f00000;"
|
||||||
|
@click.stop="() => delTree(node, data)" v-hasPermi="['archive:catalogue:del']">
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<!-- 树的操作（新增、修改） -->
|
||||||
|
<AddTreeData v-if="isflag" :isAdd="isAdd" :rowData="row" :title="title" @closeDialog="closeDialog"
|
||||||
|
@showColose="showColose" :dataForm="row" :width="600" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getArchivalCatalogueTreeApi } from '@/api/archivesManagement/index.js'
|
||||||
|
import AddTreeData from './addTreeData.vue'
|
||||||
|
export default {
|
||||||
|
name: 'LeftTree',
|
||||||
|
components: { AddTreeData },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeDataList: [],
|
||||||
|
filterText: '',
|
||||||
|
originalTreeData: [], // 保存原始数据,
|
||||||
|
isflag: false,
|
||||||
|
isAdd: '',
|
||||||
|
row: {},
|
||||||
|
selectedNodeId: null, // 保存当前选中的节点ID
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 过滤后的树数据
|
||||||
|
filteredTreeData() {
|
||||||
|
if (!this.filterText) {
|
||||||
|
return this.treeDataList
|
||||||
|
}
|
||||||
|
return this.filterTreeData(this.treeDataList)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/* 刷新树节点 */
|
||||||
|
async handleQuery() {
|
||||||
|
// 保存当前选中的节点ID
|
||||||
|
const currentNode = this.$refs.leftTreeRef.getCurrentNode();
|
||||||
|
if (currentNode) {
|
||||||
|
this.selectedNodeId = currentNode.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新获取树数据
|
||||||
|
await this.getLeftTreeList();
|
||||||
|
|
||||||
|
// 恢复选中状态
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.selectedNodeId) {
|
||||||
|
this.$refs.leftTreeRef.setCurrentKey(this.selectedNodeId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closeDialog() {
|
||||||
|
this.isflag = false;
|
||||||
|
// 关闭弹窗后刷新树节点
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
showColose() {
|
||||||
|
this.isflag = false;
|
||||||
|
},
|
||||||
|
/* 新增树节点 */
|
||||||
|
addTree(data) {
|
||||||
|
this.title = "新增";
|
||||||
|
this.isAdd = 'add';
|
||||||
|
this.isflag = true;
|
||||||
|
this.row = data;
|
||||||
|
this.row.level = Number(data.level) + 1
|
||||||
|
},
|
||||||
|
/* 修改树节点 */
|
||||||
|
editTree(row, data) {
|
||||||
|
this.title = "修改";
|
||||||
|
this.isAdd = 'edit';
|
||||||
|
this.row = data;
|
||||||
|
this.isflag = true;
|
||||||
|
},
|
||||||
|
// 节点点击事件
|
||||||
|
onHandleNodeClick(data) {
|
||||||
|
// 保存选中的节点ID
|
||||||
|
this.selectedNodeId = data.id;
|
||||||
|
this.$emit('handleNodeClick', data)
|
||||||
|
},
|
||||||
|
// 树数据过滤 - 支持无限层级转换
|
||||||
|
convertToVueTree(data) {
|
||||||
|
if (!data || !Array.isArray(data)) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.map(item => {
|
||||||
|
const node = {
|
||||||
|
id: item.id,
|
||||||
|
label: item.contentName,
|
||||||
|
level: item.level,
|
||||||
|
sort: item.sort,
|
||||||
|
parentId: item.parentId,
|
||||||
|
parentName:item.parentName
|
||||||
|
};
|
||||||
|
|
||||||
|
// 递归处理子节点
|
||||||
|
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
||||||
|
const children = this.convertToVueTree(item.children);
|
||||||
|
// 只有当子节点不为空时才添加 children 属性
|
||||||
|
if (children.length > 0) {
|
||||||
|
node.children = children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return node;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 文本截断显示（超过27个字符以 ... 显示）
|
||||||
|
truncateLabel(text) {
|
||||||
|
if (!text) return '';
|
||||||
|
const max = this.getMaxLabelLength();
|
||||||
|
return text.length > max ? text.slice(0, max) + '...' : text;
|
||||||
|
},
|
||||||
|
isTruncated(text) {
|
||||||
|
if (!text) return false;
|
||||||
|
return text.length > this.getMaxLabelLength();
|
||||||
|
},
|
||||||
|
getMaxLabelLength() {
|
||||||
|
return 27; // 统一控制阈值
|
||||||
|
},
|
||||||
|
// 获取左侧树列表
|
||||||
|
async getLeftTreeList() {
|
||||||
|
const res = await getArchivalCatalogueTreeApi()
|
||||||
|
const transformedData = this.convertToVueTree(res.data)
|
||||||
|
this.treeDataList = transformedData;
|
||||||
|
// 保存原始数据
|
||||||
|
this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
onHandleSearch() {
|
||||||
|
this.$refs.leftTreeRef.filter(this.filterText)
|
||||||
|
},
|
||||||
|
// 树节点过滤方法
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.label.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
// 递归过滤树数据
|
||||||
|
filterTreeData(treeData) {
|
||||||
|
const result = []
|
||||||
|
for (const node of treeData) {
|
||||||
|
const newNode = { ...node }
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
const filteredChildren = this.filterTreeData(node.children)
|
||||||
|
if (filteredChildren.length > 0) {
|
||||||
|
newNode.children = filteredChildren
|
||||||
|
result.push(newNode)
|
||||||
|
} else if (node.label.indexOf(this.filterText) !== -1) {
|
||||||
|
// 如果父节点匹配，保留所有子节点
|
||||||
|
result.push(node)
|
||||||
|
}
|
||||||
|
} else if (node.label.indexOf(this.filterText) !== -1) {
|
||||||
|
result.push(newNode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getLeftTreeList()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tree-container {
|
||||||
|
margin-top: 10px;
|
||||||
|
max-height: calc(100vh - 230px);
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 完全隐藏滚动条但保持滚动功能 */
|
||||||
|
.tree-container::-webkit-scrollbar {
|
||||||
|
width: 0px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-container::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-container::-webkit-scrollbar-thumb {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-tree-list {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义节点行：左右布局，左侧文本省略号 */
|
||||||
|
.custom-tree-node {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-label {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中节点的背景色 */
|
||||||
|
.left-tree-list .el-tree-node.is-current>.el-tree-node__content {
|
||||||
|
background-color: #b3d9ff;
|
||||||
|
color: #006e6a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保选中节点的文字颜色正确应用 */
|
||||||
|
.left-tree-list .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
|
||||||
|
color: #006e6a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保自定义树节点中的文字颜色正确应用 */
|
||||||
|
.left-tree-list .el-tree-node.is-current>.el-tree-node__content .custom-tree-node {
|
||||||
|
color: #006e6a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停效果 */
|
||||||
|
.left-tree-list .el-tree-node__content:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中节点的悬停效果 */
|
||||||
|
.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
|
||||||
|
background-color: #8cc8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
margin-left: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬浮到整行时显示操作按钮 */
|
||||||
|
.left-tree-list .el-tree-node__content:hover .btn-box {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
<template>
|
||||||
|
<!-- 档案目录管理 -->
|
||||||
|
<div>
|
||||||
|
<el-card style="min-height: calc(100vh - 125px);">
|
||||||
|
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="tableRef"
|
||||||
|
:columnsList="columnsList" :request-api="getArchivalCatalogueListApi" :send-params="defaultParams">
|
||||||
|
<template slot="btn">
|
||||||
|
<el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['archive:catalogue:add']"
|
||||||
|
@click="handleAdd" :disabled="addBtnIsShow">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="handle" slot-scope="{ data }">
|
||||||
|
<el-button plain size="mini" type="success" icon="el-icon-warning-outline" v-hasPermi="['archive:catalogue:query']"
|
||||||
|
@click="handleDetail(data)">
|
||||||
|
详情
|
||||||
|
</el-button>
|
||||||
|
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['archive:catalogue:edit']"
|
||||||
|
@click="handleUpdate(data)">
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['archive:catalogue:del']"
|
||||||
|
@click="handleDelete(data)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</TableModel>
|
||||||
|
<!-- 新增/编辑 -->
|
||||||
|
<AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||||
|
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import { columnsList, formLabel } from './config'
|
||||||
|
import {
|
||||||
|
delArchiveApi,
|
||||||
|
getArchivalCatalogueListApi,
|
||||||
|
} from '@/api/archivesManagement/index'
|
||||||
|
import AddTableData from './addTableData'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'RightTable',
|
||||||
|
props:{
|
||||||
|
selectedNode:{
|
||||||
|
type:Object,
|
||||||
|
default:null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
AddTableData
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formLabel,
|
||||||
|
columnsList,
|
||||||
|
getArchivalCatalogueListApi,
|
||||||
|
title: "",
|
||||||
|
isflag: false,
|
||||||
|
isAdd: '',
|
||||||
|
row: {},
|
||||||
|
loading: false,
|
||||||
|
addBtnIsShow:true,
|
||||||
|
defaultParams: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
closeDialog() {
|
||||||
|
this.isflag = false;
|
||||||
|
},
|
||||||
|
showColose() {
|
||||||
|
this.isflag = false;
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.title = "新增";
|
||||||
|
this.isAdd = 'add';
|
||||||
|
this.isflag = true;
|
||||||
|
this.row = this.selectedNode;
|
||||||
|
this.row.detailStatus = false;
|
||||||
|
this.row.belongName = this.selectedNode.parentName + '/' + this.selectedNode.label
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 修改操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.title = "修改";
|
||||||
|
this.isAdd = 'edit';
|
||||||
|
this.row = row;
|
||||||
|
this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
|
||||||
|
this.row.detailStatus = false;
|
||||||
|
this.isflag = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 详情操作 */
|
||||||
|
handleDetail(row) {
|
||||||
|
this.title = "详情";
|
||||||
|
this.isAdd = 'detail';
|
||||||
|
this.row = row;
|
||||||
|
this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
|
||||||
|
this.row.detailStatus = true;
|
||||||
|
this.isflag = true;
|
||||||
|
},
|
||||||
|
/* 搜索操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.$refs.tableRef.getTableList()
|
||||||
|
},
|
||||||
|
/** 删除操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal.confirm(`是否确认删除文件名称为"${row.contentName}"的数据项？`).then(() => {
|
||||||
|
// 显示加载遮罩
|
||||||
|
this.$modal.loading("正在删除，请稍候...");
|
||||||
|
delArchiveApi({ id: row.id }).then(res => {
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
this.handleQuery();
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg);
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.$modal.closeLoading();
|
||||||
|
this.$modal.msgError("删除失败，请重试");
|
||||||
|
console.error('删除失败:', error);
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
// 用户取消删除，不需要处理
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 监听选中的节点
|
||||||
|
watch: {
|
||||||
|
selectedNode: {
|
||||||
|
handler(newVal) {
|
||||||
|
console.log(newVal);
|
||||||
|
this.addBtnIsShow = !(newVal && Number(newVal.level) === 3)
|
||||||
|
// 更新并下发默认请求参数（例如 parentId）
|
||||||
|
const parentId = newVal && newVal.id ? newVal.id : 0
|
||||||
|
this.defaultParams = { parentId }
|
||||||
|
if (this.$refs.tableRef) {
|
||||||
|
this.$refs.tableRef.queryTableList({ parentId })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true, // 表示立即执行
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,997 @@
|
||||||
|
<template>
|
||||||
|
<!-- 类型管理 -->
|
||||||
|
<div class="app-container" id="toolsType">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<!--左侧树数据-->
|
||||||
|
<el-col :span="6" :xs="24">
|
||||||
|
<div
|
||||||
|
class="head-container"
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="contentName"
|
||||||
|
placeholder="请输入类型名称"
|
||||||
|
clearable
|
||||||
|
maxlength="50"
|
||||||
|
size="small"
|
||||||
|
prefix-icon="el-icon-search"
|
||||||
|
style="width: 75%"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAddNewNode"
|
||||||
|
style="width: 20%"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="head-container" style>
|
||||||
|
<el-tree
|
||||||
|
style="height: 700px; overflow: scroll"
|
||||||
|
:data="treeOptions"
|
||||||
|
:props="defaultProps"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
node-key="id"
|
||||||
|
:default-expand-all="true"
|
||||||
|
highlight-current
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="custom-tree-node"
|
||||||
|
slot-scope="{ node, data }"
|
||||||
|
@mousemove="onMousemove(data)"
|
||||||
|
@mouseleave="onMouseleave()"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="
|
||||||
|
isMousemoveId === data.id &&
|
||||||
|
node.label.length > 5
|
||||||
|
"
|
||||||
|
>{{ node.label.slice(0, 3) + '...' }}</span
|
||||||
|
>
|
||||||
|
<span v-else>{{ node.label }}</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="btn-items"
|
||||||
|
v-if="isMousemoveId === data.id"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-if="data.level < 3"
|
||||||
|
type="text"
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
@click.stop="() => appendTreeNode(data)"
|
||||||
|
>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-edit-outline"
|
||||||
|
style="color: #67c23a"
|
||||||
|
v-if="data.id !== 0"
|
||||||
|
@click.stop="() => editTreeNode(data)"
|
||||||
|
>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
style="color: #f56c6c"
|
||||||
|
v-if="data.id !== 0 && data.level !== 0"
|
||||||
|
@click.stop="() => removeTreeNode(data)"
|
||||||
|
>
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<!--右侧-->
|
||||||
|
<el-col :span="18" :xs="24">
|
||||||
|
<el-form
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryForm"
|
||||||
|
size="small"
|
||||||
|
:inline="true"
|
||||||
|
v-show="showSearch"
|
||||||
|
label-width="68px"
|
||||||
|
@submit.native.prevent
|
||||||
|
>
|
||||||
|
<el-form-item label="" prop="contentName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.contentName"
|
||||||
|
placeholder="请输入类型名称"
|
||||||
|
clearable
|
||||||
|
style="width: 240px"
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
size="mini"
|
||||||
|
@click="handleQuery"
|
||||||
|
>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
size="mini"
|
||||||
|
@click="resetQuery"
|
||||||
|
>重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
:disabled="!nodeId"
|
||||||
|
@click="handleAdd"
|
||||||
|
>新增
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
>导出
|
||||||
|
</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="typeList" border>
|
||||||
|
<el-table-column
|
||||||
|
label="序号"
|
||||||
|
align="center"
|
||||||
|
width="80"
|
||||||
|
type="index"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{
|
||||||
|
(queryParams.pageNum - 1) * 10 +
|
||||||
|
scope.$index +
|
||||||
|
1
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="文件名称"
|
||||||
|
align="center"
|
||||||
|
key="contentName"
|
||||||
|
prop="contentName"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="案卷期限"
|
||||||
|
align="center"
|
||||||
|
key="term"
|
||||||
|
prop="term"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="档案标识代码"
|
||||||
|
align="center"
|
||||||
|
key="markCode"
|
||||||
|
prop="markCode"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="所属专业"
|
||||||
|
align="center"
|
||||||
|
key="major"
|
||||||
|
prop="major"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="文件分类标记"
|
||||||
|
align="center"
|
||||||
|
key="classifyMark"
|
||||||
|
prop="classifyMark"
|
||||||
|
show-overflow-tooltip
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-table-column label="操作" align="center" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-warning-outline"
|
||||||
|
@click="handleView(scope.row)"
|
||||||
|
style="color: #2b938d"
|
||||||
|
>
|
||||||
|
详情
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
style="color: #f56c6c"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 新增/编辑-分类弹框 -->
|
||||||
|
<el-dialog
|
||||||
|
:title="addTitle"
|
||||||
|
:visible.sync="addTitleVisible"
|
||||||
|
v-if="addTitleVisible"
|
||||||
|
width="50%"
|
||||||
|
append-to-body
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
v-loading="loading"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
label-width="120px"
|
||||||
|
:model="addFormParams"
|
||||||
|
:rules="addFormParamsRules"
|
||||||
|
ref="addFormParamsRef"
|
||||||
|
>
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item
|
||||||
|
label="上级节点"
|
||||||
|
prop="nodeId"
|
||||||
|
v-if="isNew"
|
||||||
|
>
|
||||||
|
<treeselect
|
||||||
|
v-model="addFormParams.nodeId"
|
||||||
|
:options="treeOptions"
|
||||||
|
:normalizer="normalizer"
|
||||||
|
show-count
|
||||||
|
noChildrenText="没有数据了"
|
||||||
|
noOptionsText="没有数据了"
|
||||||
|
noResultsText="没有搜索结果"
|
||||||
|
placeholder="请选择节点"
|
||||||
|
@select="selectNode"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="上级节点" v-else>
|
||||||
|
<el-input
|
||||||
|
style="width: 100%"
|
||||||
|
disabled
|
||||||
|
v-model="addFormParams.label"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="分类名称" prop="contentName">
|
||||||
|
<el-input
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="addFormParams.contentName"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="分类号" prop="sort">
|
||||||
|
<el-input-number
|
||||||
|
style="width: 100%"
|
||||||
|
v-model="addFormParams.sort"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
:min="0"
|
||||||
|
:precision="0"
|
||||||
|
controls-position="right"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
style="color: #fff"
|
||||||
|
@click="onSubmit"
|
||||||
|
>确 定</el-button
|
||||||
|
>
|
||||||
|
<el-button size="small" @click="onCancel">取 消</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
v-if="dialogVisible"
|
||||||
|
width="50%"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
v-loading="loading"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
label-width="120px"
|
||||||
|
:model="addFormDetails"
|
||||||
|
:rules="addFormDetailsRules"
|
||||||
|
ref="formDetails"
|
||||||
|
:disabled="isView"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属案卷" prop="parentName">
|
||||||
|
<el-input
|
||||||
|
v-model="addFormDetails.parentName"
|
||||||
|
placeholder="请输入所属案卷"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件题名" prop="contentName">
|
||||||
|
<el-input
|
||||||
|
v-model="addFormDetails.contentName"
|
||||||
|
placeholder="请输入文件题名"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="保管期限" prop="term">
|
||||||
|
<el-input
|
||||||
|
v-model="addFormDetails.term"
|
||||||
|
placeholder="请输入保管期限"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="归档责任单位" prop="unitName">
|
||||||
|
<el-input
|
||||||
|
v-model="addFormDetails.unitName"
|
||||||
|
placeholder="请输入归档责任单位"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所属专业" prop="major">
|
||||||
|
<el-input
|
||||||
|
v-model="addFormDetails.major"
|
||||||
|
placeholder="请输入所属专业"
|
||||||
|
maxlength="100"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="档案标识代码" prop="markCode">
|
||||||
|
<el-select
|
||||||
|
v-model="addFormDetails.markCode"
|
||||||
|
placeholder="请选择档案标识代码"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in markCodeList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文件分类标记" prop="classifyMark">
|
||||||
|
<el-select
|
||||||
|
v-model="addFormDetails.classifyMark"
|
||||||
|
placeholder="请选择文件分类标记"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in classifyMarkList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button
|
||||||
|
v-if="!isView"
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
style="color: #fff"
|
||||||
|
@click="submitForm"
|
||||||
|
>确 定</el-button
|
||||||
|
>
|
||||||
|
<el-button size="small" @click="dialogVisible = false">{{
|
||||||
|
isView ? '关 闭' : '取 消'
|
||||||
|
}}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Treeselect from '@riophae/vue-treeselect'
|
||||||
|
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||||
|
import {
|
||||||
|
getArchivalCatalogueTreeApi,
|
||||||
|
addArchiveApi,
|
||||||
|
putArchiveApi,
|
||||||
|
delArchiveApi,
|
||||||
|
getArchivalCatalogueByIdApi,
|
||||||
|
getArchivalCatalogueListApi,
|
||||||
|
} from '@/api/archivesManagement'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ArchCatalogue',
|
||||||
|
components: { Treeselect },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: false,
|
||||||
|
isSubmit: false,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 类型名称
|
||||||
|
contentName: undefined,
|
||||||
|
// 树选项
|
||||||
|
treeOptions: [],
|
||||||
|
//列表数据
|
||||||
|
typeList: [],
|
||||||
|
total: 0,
|
||||||
|
parentId: undefined,
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'contentName',
|
||||||
|
},
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
parentId: null,
|
||||||
|
contentName: null,
|
||||||
|
},
|
||||||
|
// 弹框参数
|
||||||
|
isAdd: true,
|
||||||
|
isView: false,
|
||||||
|
addFormDetails: {
|
||||||
|
parentId: '', // 所属案卷id
|
||||||
|
parentName: '', // 所属案卷
|
||||||
|
level: 4,
|
||||||
|
contentName: '', // 文件题名
|
||||||
|
term: '', // 保管期限
|
||||||
|
unitName: '', // 归档责任单位
|
||||||
|
major: '', // 所属专业
|
||||||
|
markCode: '', // 档案标识代码
|
||||||
|
classifyMark: '', // 文件分类标记
|
||||||
|
},
|
||||||
|
addFormDetailsRules: {
|
||||||
|
contentName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入文件题名',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
term: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入保管期限',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
unitName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择归档责任单位',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
major: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入所属专业',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
markCodeList: [],
|
||||||
|
classifyMarkList: [],
|
||||||
|
title: '', // 弹出层标题
|
||||||
|
dialogVisible: false,
|
||||||
|
/* 新增弹框等数据源定义 */
|
||||||
|
isNew: false,
|
||||||
|
addTitleVisible: false,
|
||||||
|
addTitle: '', // 新增弹框标题
|
||||||
|
addFormParams: {
|
||||||
|
label: '',
|
||||||
|
contentName: '',
|
||||||
|
sort: '',
|
||||||
|
},
|
||||||
|
addFormParamsRules: {
|
||||||
|
nodeId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '上级节点不能为空',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
contentName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '名称不能为空',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
sort: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '分类号不能为空',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
isMousemoveId: null,
|
||||||
|
nodeId: null,
|
||||||
|
nodeName: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 根据名称筛选部门树
|
||||||
|
contentName(val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectNode(data) {
|
||||||
|
console.log('🚀 ~ selectNode ~ data:', data)
|
||||||
|
this.addFormParams.level = data.level + 1
|
||||||
|
this.addFormParams.parentId = data.id
|
||||||
|
},
|
||||||
|
normalizer(node) {
|
||||||
|
console.log('🚀 ~ normalizer ~ node:', node)
|
||||||
|
if (node.children && !node.children.length) {
|
||||||
|
delete node.children
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
id: node.id,
|
||||||
|
label: node.contentName,
|
||||||
|
children: node.children,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询新增页面-上级类型下拉树结构 */
|
||||||
|
getTreeData() {
|
||||||
|
getArchivalCatalogueTreeApi().then((response) => {
|
||||||
|
this.treeOptions = response.data
|
||||||
|
console.log(
|
||||||
|
'🚀 ~ getTreeData ~ this.treeOptions:',
|
||||||
|
this.treeOptions,
|
||||||
|
)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 查询列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
console.log('🚀 ~ getList ~ this.queryParams:', this.queryParams)
|
||||||
|
getArchivalCatalogueListApi(this.queryParams)
|
||||||
|
.then((res) => {
|
||||||
|
this.loading = false
|
||||||
|
if (!res.rows) return
|
||||||
|
this.typeList = res.rows || []
|
||||||
|
this.total = res.total || 0
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 筛选节点 - 左侧树
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.contentName.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
// 节点单击事件 - 左侧树
|
||||||
|
async handleNodeClick(data, node) {
|
||||||
|
console.log('🚀 ~ handleNodeClick ~ data:', data)
|
||||||
|
this.nodeId = data.level == 3 ? data.id : null
|
||||||
|
this.nodeName = data.level == 3 ? data.contentName : null
|
||||||
|
this.queryParams.parentId = data.level == 3 ? data.id : null
|
||||||
|
|
||||||
|
if (data.level == 3) {
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.queryParams.pageSize = 10
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm('queryForm')
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.queryParams.pageSize = 10
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
//查看
|
||||||
|
handleView(row) {
|
||||||
|
this.isAdd = false
|
||||||
|
this.isView = true
|
||||||
|
console.log('🚀 ~ handleView ~ row:', row)
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.title = '查看卷内文件'
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.formDetails.resetFields()
|
||||||
|
this.getInfo(row.id)
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.isAdd = true
|
||||||
|
this.isView = false
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.title = '新增卷内文件'
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.formDetails.resetFields()
|
||||||
|
this.addFormDetails.parentId = this.nodeId
|
||||||
|
this.addFormDetails.parentName = this.nodeName
|
||||||
|
console.log('🚀 ~ parentName:', this.addFormDetails.parentName)
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
console.log('🚀 ~ handleUpdate ~ row:', row)
|
||||||
|
this.isAdd = false
|
||||||
|
this.isView = false
|
||||||
|
this.dialogVisible = true
|
||||||
|
this.title = '修改卷内文件'
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.formDetails.resetFields()
|
||||||
|
this.getInfo(row.id)
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除数据项？')
|
||||||
|
.then(async () => {
|
||||||
|
try {
|
||||||
|
this.isLoading = true
|
||||||
|
await delArchiveApi({ id: row.id })
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ handleDelete ~ error:', error)
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['formDetails'].validate(async (valid) => {
|
||||||
|
if (!valid) return
|
||||||
|
try {
|
||||||
|
if (this.isSubmit) return
|
||||||
|
this.isSubmit = true
|
||||||
|
this.isLoading = true
|
||||||
|
const params = { ...this.addFormDetails }
|
||||||
|
console.log('🚀 ~ submitForm ~ params:', params)
|
||||||
|
if (this.isAdd) {
|
||||||
|
await addArchiveApi(params)
|
||||||
|
} else {
|
||||||
|
await putArchiveApi(params)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$message({
|
||||||
|
message: '添加成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ submitForm ~ error:', error)
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
this.isSubmit = false
|
||||||
|
this.dialogVisible = false
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 导出按钮作 */
|
||||||
|
handleExport() {
|
||||||
|
const formatTime = (date) => {
|
||||||
|
const year = date.getFullYear()
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(date.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||||
|
return `${year}${month}${day}_${hours}${minutes}${seconds}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentTime = formatTime(new Date())
|
||||||
|
let queryTemp = this.queryParams
|
||||||
|
// queryTemp.level = 0;
|
||||||
|
this.download(
|
||||||
|
'/export',
|
||||||
|
{
|
||||||
|
...queryTemp,
|
||||||
|
},
|
||||||
|
`导出_${currentTime}.xlsx`,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
async getInfo(id) {
|
||||||
|
try {
|
||||||
|
const { data } = await getArchivalCatalogueByIdApi({ id })
|
||||||
|
this.addFormParams = { ...data }
|
||||||
|
this.addFormParams.label = data.parentName
|
||||||
|
this.addFormDetails = { ...data }
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ getInfo ~ error:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleAddNewNode() {
|
||||||
|
this.isNew = true
|
||||||
|
this.addFormParams = {
|
||||||
|
label: '',
|
||||||
|
contentName: '',
|
||||||
|
sort: '',
|
||||||
|
nodeId: null,
|
||||||
|
}
|
||||||
|
this.addTitle = '新增分类'
|
||||||
|
this.addTitleVisible = true
|
||||||
|
},
|
||||||
|
/* 树节点增加 */
|
||||||
|
appendTreeNode(data) {
|
||||||
|
console.log('dataAdd', data)
|
||||||
|
this.isNew = false
|
||||||
|
this.addFormParams.sort = null
|
||||||
|
this.addFormParams.contentName = ''
|
||||||
|
this.addFormParams.nodeId = data.id
|
||||||
|
this.addFormParams.level = data.level + 1
|
||||||
|
this.addFormParams.parentId = data.id
|
||||||
|
this.addFormParams.label = data.contentName || ''
|
||||||
|
console.log(
|
||||||
|
'🚀 ~ appendTreeNode ~ this.addFormParams:',
|
||||||
|
this.addFormParams,
|
||||||
|
)
|
||||||
|
this.addTitle = '新增分类'
|
||||||
|
this.addTitleVisible = true
|
||||||
|
},
|
||||||
|
/* 树节点修改 */
|
||||||
|
editTreeNode(data) {
|
||||||
|
this.isNew = false
|
||||||
|
this.addTitle = '修改分类'
|
||||||
|
this.addTitleVisible = true
|
||||||
|
this.getInfo(data.id)
|
||||||
|
},
|
||||||
|
/* 树节点删除 */
|
||||||
|
removeTreeNode(data) {
|
||||||
|
console.log('🚀 ~ removeTreeNode ~ data:', data)
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除数据项？')
|
||||||
|
.then(function () {
|
||||||
|
return delArchiveApi({ id: data.id })
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.$modal.msgSuccess('删除成功')
|
||||||
|
this.getTreeData()
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
/* 确定 */
|
||||||
|
onSubmit() {
|
||||||
|
console.log(
|
||||||
|
'🚀 ~ onSubmit ~ this.addFormParams:',
|
||||||
|
this.addFormParams,
|
||||||
|
)
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
id: this.addFormParams.id || '',
|
||||||
|
parentId: this.addFormParams.parentId,
|
||||||
|
contentName: this.addFormParams.contentName,
|
||||||
|
sort: this.addFormParams.sort,
|
||||||
|
level: this.addFormParams.level,
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$refs['addFormParamsRef'].validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
if (this.isSubmit) return
|
||||||
|
this.isSubmit = true
|
||||||
|
this.isLoading = true
|
||||||
|
if (this.addTitle === '新增分类') {
|
||||||
|
await addArchiveApi(params)
|
||||||
|
this.$message.success('新增成功！')
|
||||||
|
} else {
|
||||||
|
await putArchiveApi(params)
|
||||||
|
this.$message.success('修改成功！')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ onSubmit ~ error:', error)
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
this.isSubmit = false
|
||||||
|
this.addTitleVisible = false
|
||||||
|
this.getTreeData()
|
||||||
|
// this.getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/* 取消 */
|
||||||
|
onCancel() {
|
||||||
|
this.addTitleVisible = false
|
||||||
|
},
|
||||||
|
onMousemove(data) {
|
||||||
|
this.isMousemoveId = data.id
|
||||||
|
},
|
||||||
|
onMouseleave() {
|
||||||
|
this.isMousemoveId = null
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep.el-table .fixed-width .el-button--mini {
|
||||||
|
width: 60px !important;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .btn-items .el-button + .el-button {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-items {
|
||||||
|
margin-left: 4px;
|
||||||
|
|
||||||
|
.el-button--text {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree .el-tree-node__expand-icon.expanded {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree .el-icon-caret-right:before {
|
||||||
|
content: '\e783';
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep
|
||||||
|
.el-tree
|
||||||
|
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
|
||||||
|
content: '\e781';
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
|
||||||
|
color: #1890ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree-node__expand-icon.is-leaf {
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep
|
||||||
|
.el-tree--highlight-current
|
||||||
|
.el-tree-node.is-current
|
||||||
|
> .el-tree-node__content {
|
||||||
|
background-color: #8decf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
// 表单标签文字样式
|
||||||
|
.el-form-item__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 500;
|
||||||
|
// line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框文字样式
|
||||||
|
.el-input__inner {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单位文字样式
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
// color: #606266;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下拉选择框文字样式
|
||||||
|
.el-select {
|
||||||
|
.el-input__inner {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只读输入框样式
|
||||||
|
.el-input.is-disabled .el-input__inner {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border-color: #e4e7ed;
|
||||||
|
color: #606266;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格内文字样式
|
||||||
|
::v-deep .el-table {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮文字样式
|
||||||
|
::v-deep .el-button {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&--text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 树节点文字样式
|
||||||
|
::v-deep .el-tree-node__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索框文字样式
|
||||||
|
::v-deep .el-input--small {
|
||||||
|
.el-input__inner {
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog .el-input__inner {
|
||||||
|
text-align: start !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue