档案目录管理
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({
|
||||
url: '/smartArchives/archive',
|
||||
url: '/smartArchives/archive/addLeft',
|
||||
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({
|
||||
url: '/smartArchives/archive',
|
||||
method: 'put',
|
||||
data,
|
||||
url: '/smartArchives/archive/editLeft',
|
||||
method: 'post',
|
||||
data:data,
|
||||
})
|
||||
}
|
||||
|
||||
// 修改档案目录
|
||||
export function editArchiveRightApi(data) {
|
||||
return request({
|
||||
url: '/smartArchives/archive/editRight',
|
||||
method: 'post',
|
||||
data:data,
|
||||
})
|
||||
}
|
||||
|
||||
// 删除档案目录
|
||||
export function delArchiveApi(data) {
|
||||
return request({
|
||||
url: '/smartArchives/archive',
|
||||
method: 'delete',
|
||||
data,
|
||||
url: '/smartArchives/archive/del',
|
||||
method: 'post',
|
||||
data:data,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -52,4 +70,13 @@ export function getArchivalCatalogueListApi(params) {
|
|||
method: 'get',
|
||||
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