档案管理
This commit is contained in:
parent
ebf2ded7e8
commit
b5bc20fb8b
|
|
@ -4,25 +4,7 @@ import request from '@/utils/request'
|
|||
// 查询项目数据列表
|
||||
export function getProListAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/project/getProjectList',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 配置档案类型
|
||||
export function updateContentsNameAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/project/updateContentsName',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 档案类型下拉选
|
||||
export function getFileCatalogSelectAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/project/getFileCatalogSelect',
|
||||
url: '/smartArchives/fileManage/getProjectList',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -163,15 +163,16 @@ export const dynamicRoutes = [
|
|||
]
|
||||
},
|
||||
{
|
||||
path: '/archivesManagement/fileManager',
|
||||
path: '/archivesManagement/fileManager/file-data',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['file:manage:set'],
|
||||
children: [
|
||||
{
|
||||
path: 'file-data',
|
||||
path: 'index',
|
||||
component: () => import('@/views/archivesManagement/fileManager/file-data'),
|
||||
name: 'FileData',
|
||||
meta: { title: '档案数据管理', activeMenu: '/archivesManagement/fileManager' }
|
||||
meta: { title: '档案管理数据', activeMenu: '/archivesManagement/fileManager', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: "FileAddTableData",
|
||||
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,343 @@
|
|||
<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: "FileAddTreeData",
|
||||
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.form.level = Number(selectedNode.level) + 1;
|
||||
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;
|
||||
let treeId = null;
|
||||
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;
|
||||
treeId = this.rowData.id;
|
||||
} else {
|
||||
// 新增模式：重置表单
|
||||
this.form = {
|
||||
parentId: this.rowData.id,
|
||||
contentName: null,
|
||||
sort: 0,
|
||||
level:this.rowData.level
|
||||
};
|
||||
value = this.rowData.id;
|
||||
}
|
||||
await this.getLeftTreeList(treeId);
|
||||
|
||||
// 如果是编辑模式，需要根据父节点ID找到对应的层级
|
||||
if (this.isAdd === 'edit' && this.form.parentId) {
|
||||
this.findParentLevel(this.treeDataList, this.form.parentId);
|
||||
}
|
||||
|
||||
if(value){
|
||||
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(value) {
|
||||
const res = await getArchivalCatalogueTreeApi({id:value})
|
||||
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,350 @@
|
|||
<template>
|
||||
<!-- 左侧树 -->
|
||||
<div>
|
||||
<el-card style="min-height: calc(100vh - 190px)">
|
||||
<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,delArchiveApi } from '@/api/archivesManagement/index.js'
|
||||
import AddTreeData from './addTreeData.vue'
|
||||
export default {
|
||||
name: 'FileLeftTree',
|
||||
components: { AddTreeData },
|
||||
data() {
|
||||
return {
|
||||
treeDataList: [],
|
||||
filterText: '',
|
||||
originalTreeData: [], // 保存原始数据,
|
||||
isflag: false,
|
||||
isAdd: '',
|
||||
row: {},
|
||||
selectedNodeId: null, // 保存当前选中的节点ID
|
||||
delArchiveApi
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
/* 删除树节点 */
|
||||
delTree(row, data){
|
||||
this.$modal.confirm(`是否确认删除节点名称为"${row.label}"的数据项？`).then(() => {
|
||||
// 显示加载遮罩
|
||||
this.$modal.loading("正在删除，请稍候...");
|
||||
delArchiveApi({ id: data.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(() => {
|
||||
// 用户取消删除，不需要处理
|
||||
});
|
||||
|
||||
},
|
||||
// 节点点击事件
|
||||
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 100; // 统一控制阈值
|
||||
},
|
||||
// 获取左侧树列表
|
||||
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: visible;
|
||||
text-overflow: initial;
|
||||
white-space: normal; /* 允许换行 */
|
||||
word-break: break-word; /* 长词断行 */
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* 使行容器自适应高度并顶对齐，兼容多行文本 */
|
||||
.left-tree-list .el-tree-node__content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
min-height: 28px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* 高亮选中状态同样自适应高度 */
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
height: auto !important;
|
||||
align-items: flex-start;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* 选中节点的背景色 */
|
||||
.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;
|
||||
}
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
height: auto;
|
||||
}
|
||||
/* 选中节点的悬停效果 */
|
||||
.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;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<!-- 档案目录管理 -->
|
||||
<div>
|
||||
<el-card style="min-height: calc(100vh - 190px);">
|
||||
<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: 'FileRightTable',
|
||||
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.parentName + '/' + this.selectedNode.label
|
||||
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>
|
||||
|
|
@ -1,51 +1,99 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="page-header">
|
||||
<h2>档案数据管理</h2>
|
||||
<p>项目ID: {{ projectId }}</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>这里将显示档案数据管理的内容...</p>
|
||||
<p>当前项目ID: {{ projectId }}</p>
|
||||
</div>
|
||||
<el-card class="toolbar-card">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<el-button type="warning" plain icon="el-icon-bottom" size="mini" @click="handleClose">档案抽取</el-button>
|
||||
<el-button type="success" plain icon="el-icon-finished" size="mini" @click="handleClose">移交清单确认</el-button>
|
||||
<el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleClose">返回</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row :gutter="24" class="content-row">
|
||||
<el-col :span="9" class="pane-left">
|
||||
<LeftTree @handleNodeClick="handleNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="15" class="pane-right">
|
||||
<RightTable :selectedNode = "selectedNode" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LeftTree from './components/leftTree.vue'
|
||||
import RightTable from './components/rightTable.vue'
|
||||
export default {
|
||||
name: 'FileData',
|
||||
components: {
|
||||
LeftTree,
|
||||
RightTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
projectId: null
|
||||
projectId: null,
|
||||
// 选中的节点
|
||||
selectedNode: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取传递的项目ID
|
||||
this.projectId = this.$route.query.id
|
||||
console.log('接收到的项目ID:', this.projectId)
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
const obj = { path: "/archivesManagement/fileManager" }
|
||||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
// 节点点击事件
|
||||
handleNodeClick(data) {
|
||||
this.selectedNode = data;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
.app-container {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #303133;
|
||||
.toolbar-card {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px 0;
|
||||
.toolbar-left :deep(.el-button) + :deep(.el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.toolbar-right :deep(.el-tag) {
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.pane-left, .pane-right {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
height: 100%;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.pane-left {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pane-right {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</el-tag>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-document" v-hasPermi="['data:classify:update']"
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-document" v-hasPermi="['file:manage:set']"
|
||||
@click="openFileManager(data)">
|
||||
档案管理
|
||||
</el-button>
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
/* 打开档案管理 */
|
||||
openFileManager(row) {
|
||||
this.$router.push({
|
||||
path: '/archivesManagement/fileManager/file-data',
|
||||
name: 'FileData',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<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 v-model="filterText" placeholder="输入关键字">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
</el-row>
|
||||
|
||||
<div class="tree-container">
|
||||
<el-tree ref="leftTreeRef" :data="filteredTreeData" default-expand-all class="left-tree-list"
|
||||
@node-click="onHandleNodeClick" :filter-node-method="filterNode">
|
||||
<el-tree ref="leftTreeRef" :data="displayedTreeData" default-expand-all class="left-tree-list"
|
||||
@node-click="onHandleNodeClick">
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -36,18 +36,12 @@ export default {
|
|||
children: [],
|
||||
},
|
||||
],
|
||||
displayedTreeData: [],
|
||||
filterText: '',
|
||||
originalTreeData: [], // 保存原始数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 过滤后的树数据
|
||||
filteredTreeData() {
|
||||
if (!this.filterText) {
|
||||
return this.treeDataList
|
||||
}
|
||||
return this.filterTreeData(this.treeDataList)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 节点点击事件
|
||||
|
|
@ -72,15 +66,16 @@ export default {
|
|||
this.treeDataList[0].children = transformedData
|
||||
// 保存原始数据
|
||||
this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
// 初始化显示数据
|
||||
this.displayedTreeData = 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
|
||||
if (!this.filterText) {
|
||||
this.displayedTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
return
|
||||
}
|
||||
this.displayedTreeData = this.filterTreeData(this.treeDataList)
|
||||
},
|
||||
// 递归过滤树数据
|
||||
filterTreeData(treeData) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue