8 changed files with 729 additions and 41 deletions
-
1src/assets/styles/mixin.scss
-
41src/assets/styles/yxk-admin.scss
-
30src/views/system/archivesCategory/baseInfo/index.vue
-
119src/views/system/metadata/baseInfo/index.vue
-
19src/views/system/metadata/data.json
-
141src/views/system/metadata/dataList/index.vue
-
184src/views/system/metadata/form.vue
-
235src/views/system/metadata/index.vue
@ -0,0 +1,119 @@ |
|||||
|
<template> |
||||
|
<div class="system-base-info" style="display:flex; justify-content: flex-start;"> |
||||
|
<div class="base-info-left"> |
||||
|
<div class="info-item"> |
||||
|
<span>名称：</span> |
||||
|
<p>{{ selectedTreeItem.label }}</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>参照标准号：</span> |
||||
|
<p>GB/T39362-2020</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>参照标准名：</span> |
||||
|
<p>党政机关电子公文归档规范</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>参照标准类型：</span> |
||||
|
<p>党政机关电子公文归档规范</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>标准范围说明：</span> |
||||
|
<p>本标准适用于各级党政机关电子公文系统产生的电子 公文的归档和处理。其他机关和企业事业单位的电子 公文的归档和处理可参照执行。</p> |
||||
|
</div> |
||||
|
<div class="info-item"> |
||||
|
<span>默认方案：</span> |
||||
|
<el-switch v-model="defaultSetting" class="isDefault" disabled /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { getNoFormatField } from '@/api/category/fileNoFormat' |
||||
|
export default { |
||||
|
name: 'BaseInfo', |
||||
|
props: { |
||||
|
selectedTreeItem: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return { |
||||
|
label: '', |
||||
|
isType: '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultSetting: false |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
selectedTreeItem: function(newValue, oldValue) { |
||||
|
if (newValue && newValue.id) { |
||||
|
this.initData() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
console.log(this.selectedTreeItem) |
||||
|
if (this.selectedTreeItem && this.selectedTreeItem.id) { |
||||
|
this.initData() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
initData() { |
||||
|
// getNoFormatField({ categoryId: this.selectedCategory.id }).then((res) => { |
||||
|
// this.fileNoFormatStr = '' |
||||
|
// res.forEach((item) => { |
||||
|
// this.fileNoFormatStr += item.fieldCnName + item.connector |
||||
|
// }) |
||||
|
// }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@mixin baseInfo-font-style{ |
||||
|
[data-theme="dark"] & { |
||||
|
color: #fff; |
||||
|
} |
||||
|
[data-theme="light"] & { |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
} |
||||
|
.system-base-info { |
||||
|
.info-item { |
||||
|
span { |
||||
|
width: 100px; |
||||
|
} |
||||
|
p{ |
||||
|
@include baseInfo-font-style; |
||||
|
} |
||||
|
.isDefault{ |
||||
|
margin: 8px 0 0 10px; |
||||
|
::v-deep .el-switch__core{ |
||||
|
width: 28px !important; |
||||
|
height: 16px; |
||||
|
&::after{ |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-switch.is-checked .el-switch__core::after{ |
||||
|
margin-left: -13px !important; |
||||
|
} |
||||
|
::v-deep .el-switch.is-checked.is-disabled .el-switch__core{ |
||||
|
border-color: #0348f3 !important; |
||||
|
background-color: #0348f3 !important; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,19 @@ |
|||||
|
[ |
||||
|
{ |
||||
|
"id": 1, |
||||
|
"label": "元数据方案", |
||||
|
"isType": 1, |
||||
|
"children": [ |
||||
|
{ |
||||
|
"id": 2, |
||||
|
"isType": 2, |
||||
|
"label": "精简方案" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 3, |
||||
|
"isType": 2, |
||||
|
"label": "完全方案" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
@ -0,0 +1,141 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<el-button size="mini" @click="crud.toAdd"> |
||||
|
<i class="iconfont icon-xinzeng" :disabled="crud.selections.length === 0" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections)"> |
||||
|
<i class="iconfont icon-bianji" /> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px"> |
||||
|
<el-form-item label="编号" prop="number"> |
||||
|
<el-input v-model="form.number" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="元数据元素" prop="meteItem"> |
||||
|
<el-input v-model="form.metaItem" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="顶级元数据" prop="isTop"> |
||||
|
<el-radio-group v-model="form.isTop"> |
||||
|
<el-radio label="1">是</el-radio> |
||||
|
<el-radio label="0">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="form.isTop === '0'" label="父级" prop="parent"> |
||||
|
<el-select v-model="form.parent" style="width: 225px;"> |
||||
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
:data="crud.data" |
||||
|
highlight-current-row |
||||
|
row-key="id" |
||||
|
@select="crud.selectChange" |
||||
|
@select-all="crud.selectAllChange" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column type="index" label="序号" /> |
||||
|
<el-table-column prop="number" label="编号" /> |
||||
|
<el-table-column :show-overflow-tooltip="true" prop="metaItem" label="元数据元素" /> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CRUD, { presenter, header, form } from '@crud/crud' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
|
||||
|
const defaultForm = { id: null, number: null, meteItem: null, isTop: null, parent: null } |
||||
|
|
||||
|
export default { |
||||
|
name: 'MetaDataList', |
||||
|
components: { pagination }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '元数据', url: 'api/users' }) |
||||
|
}, |
||||
|
mixins: [ |
||||
|
presenter(), |
||||
|
header(), |
||||
|
form(function() { |
||||
|
return Object.assign({ dicPid: this.dicPid }, defaultForm) |
||||
|
}) |
||||
|
], |
||||
|
data() { |
||||
|
return { |
||||
|
selectOptions: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
value: 'M1 公文标识', |
||||
|
label: 'M1 公文标识' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
value: 'M2 文种', |
||||
|
label: 'M2 文种' |
||||
|
} |
||||
|
], |
||||
|
rules: { |
||||
|
number: [ |
||||
|
{ required: true, message: '编号不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
meteItem: [ |
||||
|
{ required: true, message: '元数据元素不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
isTop: [ |
||||
|
{ required: true, message: '请选择是否为顶级节点', trigger: 'change' } |
||||
|
], |
||||
|
parent: [ |
||||
|
{ required: true, message: '请选择父级元数据', trigger: 'change' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选元数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
this.crud.doDelete(datas) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-dialog{ |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<!--表单组件--> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px"> |
||||
|
<el-form-item label="" prop="filterItem"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="参照标准类型" prop="filterItem"> |
||||
|
<el-select v-model="form.filterItem" style="width: 225px;"> |
||||
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="参照标准号" prop="filterItem"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="参照标准名" prop="filterItem"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="标准范围说明" prop="filterItem"> |
||||
|
<el-input v-model="form.description" rows="5" type="textarea" style="width: 594px;" /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="默认方案" prop="filterItem"> |
||||
|
<el-radio-group v-model="form.isTop"> |
||||
|
<el-radio label="1">是</el-radio> |
||||
|
<el-radio label="0">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getCategoryTree } from '@/api/category/category' |
||||
|
import { form } from '@crud/crud' |
||||
|
import CRUD from '@crud/crud' |
||||
|
|
||||
|
const defaultForm = { id: null, parentName: null, cnName: null, code: null, packing: '1', isType: null, makeType: 'piece', remark: null, templateId: null } |
||||
|
export default { |
||||
|
mixins: [ |
||||
|
form(function() { |
||||
|
return Object.assign({ pid: this.pid }, defaultForm) |
||||
|
}) |
||||
|
], |
||||
|
props: { |
||||
|
selectedCategory: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
pid: null, |
||||
|
isAdd: false, |
||||
|
rules: { |
||||
|
parentLevel: [ |
||||
|
{ required: true, message: '所属父级不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
cnName: [ |
||||
|
{ required: true, message: '名称不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
isType: [ |
||||
|
{ required: true, message: '节点类型不可为空', trigger: 'change' } |
||||
|
], |
||||
|
code: [ |
||||
|
{ required: true, message: '编码不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
packing: [ |
||||
|
{ required: true, message: '请选择是否装盒', trigger: 'change' } |
||||
|
], |
||||
|
makeType: [ |
||||
|
{ required: true, message: '请选择装盒类型', trigger: 'change' } |
||||
|
] |
||||
|
}, |
||||
|
selectOptions: [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '门类' |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '文件夹' |
||||
|
} |
||||
|
], |
||||
|
templateTree: [], |
||||
|
selectedTemplateNode: {} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getSelectOptions() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 新建时，判断当前节点类型，“门类类型” option区分可选 |
||||
|
beforeToAdd() { |
||||
|
this.form.isType = null |
||||
|
if (this.selectedCategory.isType === 1) { |
||||
|
this.selectOptions.forEach(item => { |
||||
|
if (item.value === 4) { |
||||
|
item.typeState = true |
||||
|
} else { |
||||
|
item.typeState = false |
||||
|
} |
||||
|
}) |
||||
|
} else if (this.selectedCategory.isType === 2) { |
||||
|
this.selectOptions.forEach(item => { |
||||
|
if (item.value !== 3) { |
||||
|
item.typeState = true |
||||
|
} else { |
||||
|
item.typeState = false |
||||
|
} |
||||
|
}) |
||||
|
this.form.isType = 3 |
||||
|
} else if (this.selectedCategory.isType === 3) { |
||||
|
this.selectOptions.forEach(item => { |
||||
|
if (item.value !== 4) { |
||||
|
item.typeState = true |
||||
|
} else { |
||||
|
item.typeState = false |
||||
|
} |
||||
|
}) |
||||
|
this.form.isType = 4 |
||||
|
} |
||||
|
}, |
||||
|
[CRUD.HOOK.beforeSubmit]() { |
||||
|
if (this.form.templateId) { |
||||
|
this.form.children = [this.selectedTemplateNode] |
||||
|
} else { |
||||
|
this.form.children = null |
||||
|
} |
||||
|
}, |
||||
|
updateTemplateValue(node, instanceId) { |
||||
|
this.selectedTemplateNode = node |
||||
|
}, |
||||
|
changeType() { |
||||
|
this.isAdd = this.form.isType === '1' |
||||
|
// if (this.form.isType === 6) { |
||||
|
// // this.crudDict.getDicts() |
||||
|
// this.getTemplateTree() |
||||
|
// } else { |
||||
|
// this.form.dicExplain = null |
||||
|
// } |
||||
|
}, |
||||
|
getTemplateTree() { |
||||
|
getCategoryTree().then(res => { |
||||
|
this.templateTree = res |
||||
|
}) |
||||
|
}, |
||||
|
getSelectOptions() { |
||||
|
// getCategoryType().then(res => { |
||||
|
// for (const key in res) { |
||||
|
// this.selectOptions.push({ |
||||
|
// value: Number(key), |
||||
|
// label: res[key], |
||||
|
// typeState: false |
||||
|
// }) |
||||
|
// } |
||||
|
// }) |
||||
|
}, |
||||
|
normalizer(node) { |
||||
|
if (node.children && !node.children.length) { |
||||
|
delete node.children |
||||
|
} |
||||
|
return { |
||||
|
id: node.id, |
||||
|
label: node.cnName, |
||||
|
children: node.children, |
||||
|
isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
</style> |
||||
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<div class="app-container category-container"> |
||||
|
<!-- 门类列表 --> |
||||
|
<div class="container-main"> |
||||
|
<div class="elect-cont-left"> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:left> |
||||
|
<el-button v-permission="permission.add" size="mini" :disabled="selectedTreeItem.isType === 2 " @click="crud.toAdd"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button v-permission="permission.edit" size="mini" :disabled="selectedTreeItem.isType === 1" @click="crud.toEdit(crud.selections[0])"> |
||||
|
<i class="iconfont icon-bianji" /> |
||||
|
编辑 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
<template v-slot:right> |
||||
|
<el-button v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="selectedTreeItem.isType === 1" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<div class="container-left"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--门类树状结构--> |
||||
|
<div class="tree-scroll"> |
||||
|
<el-tree ref="tree" v-loading="crud.loading" :data="treeList" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick"> |
||||
|
<span slot-scope="{ node, data }" class="custom-tree-node"> |
||||
|
<span v-if="data.isType===1 " class="iconFolder"> |
||||
|
{{ data.label }} |
||||
|
</span> |
||||
|
<span v-if="data.isType===2 " class="iconFile"> |
||||
|
{{ data.label }} |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 门类管理tab --> |
||||
|
<div class="elect-cont-right"> |
||||
|
<div class="container-right tab-content"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<ul class="tab-nav"> |
||||
|
<li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息<i /></li> |
||||
|
<li v-if="selectedTreeItem.isType && selectedTreeItem.isType === 2" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">档案元数据<i /></li> |
||||
|
<!-- 最右侧装饰img --> |
||||
|
<span class="tab-right-img" /> |
||||
|
</ul> |
||||
|
<!-- :selected-category="selectedTreeItem" --> |
||||
|
<component :is="comName" :selected-tree-item="selectedTreeItem" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-dialog class="tip-dialog" title="提示" :visible.sync="deleteVisible" :before-close="handleClose"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="tip-content"> |
||||
|
<p class="tipMsg">此操作将删除当前所选方案</p> |
||||
|
<span>你是否还要继续?</span> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="deleteVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudCategory from '@/api/category/category' |
||||
|
import CRUD, { presenter, header } from '@crud/crud' |
||||
|
import baseInfo from './baseInfo/index' |
||||
|
import arcTableList from './dataList/index' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import dataJson from './data.json' |
||||
|
|
||||
|
export default { |
||||
|
name: 'MetaData', |
||||
|
components: { crudOperation, baseInfo, arcTableList }, |
||||
|
cruds() { |
||||
|
return [ |
||||
|
CRUD({ |
||||
|
title: '元数据', url: 'api/archives-type/menu', |
||||
|
crudMethod: { ...crudCategory }, |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
] |
||||
|
}, |
||||
|
mixins: [presenter(), header()], |
||||
|
data() { |
||||
|
return { |
||||
|
permission: { |
||||
|
add: ['admin', 'category:add'], |
||||
|
edit: ['admin', 'category:edit'], |
||||
|
del: ['admin', 'category:del'], |
||||
|
sort: ['admin', 'category:sort'] |
||||
|
}, |
||||
|
defaultProps: { |
||||
|
children: 'children', |
||||
|
label: 'label' |
||||
|
}, |
||||
|
treeList: [], |
||||
|
deleteVisible: false, |
||||
|
selectedTreeItem: {}, |
||||
|
deleteData: {}, |
||||
|
activeIndex: 0, |
||||
|
brotherNodeNum: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
comName: function() { |
||||
|
if (this.activeIndex === 0) { |
||||
|
return 'baseInfo' |
||||
|
} else if (this.activeIndex === 1) { |
||||
|
return 'arcTableList' |
||||
|
} |
||||
|
return 'baseInfo' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.treeList = dataJson |
||||
|
}, |
||||
|
methods: { |
||||
|
// 展开选中的父级 |
||||
|
expandParents(node) { |
||||
|
node.expanded = true |
||||
|
if (node.parent) { |
||||
|
this.expandParents(node.parent) |
||||
|
} |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
let currentKey |
||||
|
if (localStorage.getItem('currentMetaDataKey')) { |
||||
|
currentKey = JSON.parse(localStorage.getItem('currentMetaDataKey')) |
||||
|
} else { |
||||
|
currentKey = this.treeList[0] |
||||
|
} |
||||
|
// 设置某个节点的当前选中状态 |
||||
|
this.$refs.tree.setCurrentKey(currentKey.id) |
||||
|
this.$nextTick(() => { |
||||
|
// 设置某个节点的父级展开 |
||||
|
const selectedKey = this.$refs.tree.getCurrentNode() |
||||
|
if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) { |
||||
|
this.expandParents(this.$refs.tree.getNode(selectedKey).parent) |
||||
|
} |
||||
|
// 选中节点的门类详情 |
||||
|
this.handleNodeClick(selectedKey) |
||||
|
}) |
||||
|
}, |
||||
|
// 选中门类后，设置门类详情数据 |
||||
|
handleNodeClick(val) { |
||||
|
if (val) { |
||||
|
if (val.isType === 1) { |
||||
|
this.addBtnShow = true |
||||
|
} |
||||
|
this.selectedTreeItem = val |
||||
|
this.changeActiveTab(0) |
||||
|
} |
||||
|
}, |
||||
|
toDelete(data) { |
||||
|
this.deleteData = data |
||||
|
this.deleteVisible = true |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
this.deleteVisible = false |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
this.deleteData = {} |
||||
|
done() |
||||
|
}, |
||||
|
changeActiveTab(data) { |
||||
|
this.activeIndex = data |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@mixin metadata-right-hide{ |
||||
|
[data-theme="dark"] & { |
||||
|
width: calc(100vw - 398px); |
||||
|
} |
||||
|
[data-theme="light"] & { |
||||
|
width: calc(100vw - 400px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin metadata-right-open{ |
||||
|
[data-theme="dark"] & { |
||||
|
width: calc(100vw - 600px); |
||||
|
} |
||||
|
[data-theme="light"] & { |
||||
|
width: calc(100vw - 600px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.category-container{ |
||||
|
.elect-cont-left{ |
||||
|
width: 284px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hideSidebar{ |
||||
|
// siderbar-收起 54 + 间距 60 + treeLeft 284 |
||||
|
.category-container{ |
||||
|
.elect-cont-right{ |
||||
|
@include metadata-right-hide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.openSidebar{ |
||||
|
// siderbar-展开 256 + 间距 60 + treeLeft 284 |
||||
|
.category-container{ |
||||
|
.elect-cont-right{ |
||||
|
@include metadata-right-open; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tree-scroll{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue