7 changed files with 532 additions and 26 deletions
-
6src/assets/styles/mixin.scss
-
26src/assets/styles/yxk-admin.scss
-
4src/utils/upload.js
-
129src/views/archiveKeeping/deviceManage/data.json
-
98src/views/archiveKeeping/deviceManage/form.vue
-
228src/views/archiveKeeping/deviceManage/index.vue
-
67src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue
@ -0,0 +1,129 @@ |
|||
{ |
|||
"code": 200, |
|||
"message": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": "934F43EED6B86A5A28F162", |
|||
"cnName": "档案库房", |
|||
"enName": null, |
|||
"code": null, |
|||
"pid": "0", |
|||
"suffix": null, |
|||
"isType": 1, |
|||
"categoryLevel": null, |
|||
"isCase": true, |
|||
"arrangeType": 0, |
|||
"isFiling": false, |
|||
"filingId": null, |
|||
"filingPosition": null, |
|||
"remark": "", |
|||
"categorySeq": null, |
|||
"archivesClasses": [], |
|||
"children": [ |
|||
{ |
|||
"id": "B127B15D1D5208FA7EC64B", |
|||
"cnName": "库房A", |
|||
"enName": null, |
|||
"code": "qzA", |
|||
"pid": "934F43EED6B86A5A28F162", |
|||
"suffix": null, |
|||
"isType": 2, |
|||
"categoryLevel": null, |
|||
"isCase": null, |
|||
"arrangeType": null, |
|||
"isFiling": null, |
|||
"filingId": null, |
|||
"filingPosition": null, |
|||
"remark": null, |
|||
"categorySeq": null, |
|||
"archivesClasses": [], |
|||
"children": [ |
|||
{ |
|||
"id": "A64C26E140DC27EE9482A7", |
|||
"cnName": "区域A", |
|||
"enName": null, |
|||
"code": "WSWJ", |
|||
"pid": "B127B15D1D5208FA7EC64B", |
|||
"suffix": "2023_10_26_1698300920764", |
|||
"isType": 3, |
|||
"categoryLevel": null, |
|||
"isCase": true, |
|||
"arrangeType": 1, |
|||
"isFiling": true, |
|||
"filingId": "16af0724183d3c5e5508786ca3dcec27", |
|||
"filingPosition": 0, |
|||
"remark": null, |
|||
"categorySeq": null, |
|||
"create_by": "admin", |
|||
"update_by": "admin", |
|||
"create_time": 1698300921000, |
|||
"update_time": 1699951254000 |
|||
}, |
|||
{ |
|||
"id": "C381E33099055A3751C72E", |
|||
"cnName": "区域B", |
|||
"enName": null, |
|||
"code": "WSAJ", |
|||
"pid": "B127B15D1D5208FA7EC64B", |
|||
"suffix": "2023_10_26_1698300883017", |
|||
"isType": 3, |
|||
"categoryLevel": null, |
|||
"isCase": true, |
|||
"arrangeType": 2, |
|||
"isFiling": null, |
|||
"filingId": null, |
|||
"filingPosition": null, |
|||
"remark": null, |
|||
"categorySeq": null, |
|||
"create_by": "admin", |
|||
"update_by": "admin", |
|||
"create_time": 1698300883000, |
|||
"update_time": 1699951263000 |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"id": "DAAC5ED3F86D6481C3C1A5", |
|||
"cnName": "库房B", |
|||
"enName": null, |
|||
"code": "JJ", |
|||
"pid": "934F43EED6B86A5A28F162", |
|||
"suffix": null, |
|||
"isType": 2, |
|||
"categoryLevel": null, |
|||
"isCase": null, |
|||
"arrangeType": null, |
|||
"isFiling": null, |
|||
"filingId": null, |
|||
"filingPosition": null, |
|||
"remark": null, |
|||
"categorySeq": null, |
|||
"archivesClasses": [], |
|||
"children": [ |
|||
{ |
|||
"id": "0DC8DF01A644D9E669E744", |
|||
"cnName": "区域C", |
|||
"enName": null, |
|||
"code": "JJXM", |
|||
"pid": "DAAC5ED3F86D6481C3C1A5", |
|||
"suffix": "2023_10_26_1698305177307", |
|||
"isType": 3, |
|||
"categoryLevel": null, |
|||
"isCase": true, |
|||
"arrangeType": 3, |
|||
"isFiling": null, |
|||
"filingId": null, |
|||
"filingPosition": null, |
|||
"remark": null, |
|||
"categorySeq": null, |
|||
"create_by": "admin", |
|||
"update_by": "admin", |
|||
"create_time": 1698305177000, |
|||
"update_time": 1698305177000 |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<!--表单组件--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="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="90px"> |
|||
<el-form-item label="库房名称" prop="name"> |
|||
<el-input v-model="name" /> |
|||
</el-form-item> |
|||
<el-form-item label="库房编码" prop="code"> |
|||
<el-input v-model="form.code" /> |
|||
</el-form-item> |
|||
<el-form-item label="管理员" prop="admin"> |
|||
<el-input v-model="form.admin" /> |
|||
</el-form-item> |
|||
<el-form-item label="联系电话" prop="phone"> |
|||
<el-input v-model="form.phone" /> |
|||
</el-form-item> |
|||
<el-row class="area-style"> |
|||
<el-form-item label="库房面积" prop="area"> |
|||
<el-input v-model="form.area" /><span class="area-unit">/m²</span> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-form-item label="备注" prop="remark"> |
|||
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" /> |
|||
</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> |
|||
</template> |
|||
|
|||
<script> |
|||
import { form } from '@crud/crud' |
|||
import CRUD from '@crud/crud' |
|||
|
|||
const defaultForm = { id: null, name: null, code: null, admin: null, phone: null, area: null, remark: null } |
|||
export default { |
|||
mixins: [form(defaultForm)], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isAdd: false, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '库房名称不可为空', trigger: 'blur' } |
|||
], |
|||
code: [ |
|||
{ required: true, message: '库房编码不可为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
selectedCategory: function(newValue, oldValue) { |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
// 新建时，判断当前节点类型，“门类类型” option区分可选 |
|||
beforeToAdd() { |
|||
this.form.isType = null |
|||
}, |
|||
[CRUD.HOOK.beforeSubmit]() { |
|||
}, |
|||
// 提交前的验证 |
|||
[CRUD.HOOK.afterValidateCU](crud) { |
|||
return true |
|||
}, |
|||
changeType() { |
|||
this.isAdd = this.form.isType === 2 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.area-style{ |
|||
::v-deep .el-form-item__content{ |
|||
position: relative; |
|||
.area-unit{ |
|||
position: absolute; |
|||
right: -26px; |
|||
top: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<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> |
|||
<!-- crud.selections.length === 0 || crud.selections[0].isType === 2 || crud.selections[0].isType === 3 || crud.selections[0].isType === 5 --> |
|||
<el-button v-permission="permission.add" size="mini" :disabled="crud.selections.length === 0 || crud.selections[0].isType === 3" @click="crud.toAdd"> |
|||
<i class="iconfont icon-xinzeng" /> |
|||
新增 |
|||
</el-button> |
|||
<el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1 || crud.selections[0].pid === '0'" @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="crud.selections.length === 0 || (crud.selections.length === 1 && crud.selections[0].pid === '0' )" @click="toDelete(crud.selections)"> |
|||
<i class="iconfont icon-shanchu" /> |
|||
删除 |
|||
</el-button> |
|||
<el-button v-permission="permission.sort" icon="el-icon-sort" size="mini" :loading="sortLoading" :disabled="brotherNodeNum <= 1 || crud.selections[0].pid === '0' " @click="toSort(crud.selections)">排序</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="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"> |
|||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|||
<span v-if="data.isType === 1" class="iconFolder"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
<span v-if="data.isType === 2" class="iconStoreHouse"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
<span v-if="data.isType === 3" class="iconArea"> |
|||
{{ data.cnName }} |
|||
</span> |
|||
</span> |
|||
</el-tree> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 门类管理tab --> |
|||
<div class="elect-cont-right"> |
|||
<div class="container-right"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
</div> |
|||
</div> |
|||
<!--修改新增表单组件--> |
|||
<eForm ref="eform" :selected-store="selectedStore" /> |
|||
<!--排序对话框组件--> |
|||
<!-- <sortDialog ref="sort" @treeNodeSort="treeNodeSort" /> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudCategory from '@/api/system/category/category' |
|||
import CRUD, { presenter, header } from '@crud/crud' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import eForm from './form' |
|||
import Vue from 'vue' |
|||
import dataJson from './data.json' |
|||
|
|||
export default { |
|||
name: 'DeviceManage', |
|||
components: { crudOperation, eForm }, |
|||
cruds() { |
|||
return [ |
|||
CRUD({ |
|||
title: '库房设备管理', url: 'api/category/menu', |
|||
crudMethod: { ...crudCategory }, |
|||
optShow: { |
|||
add: false, |
|||
edit: false, |
|||
del: false, |
|||
download: false, |
|||
group: false |
|||
} |
|||
}) |
|||
] |
|||
}, |
|||
mixins: [presenter(), header()], |
|||
data() { |
|||
return { |
|||
permission: { |
|||
add: ['admin', 'device:add'], |
|||
edit: ['admin', 'device:edit'], |
|||
del: ['admin', 'device:del'], |
|||
sort: ['admin', 'device:sort'] |
|||
}, |
|||
defaultProps: { |
|||
children: 'children', |
|||
label: 'cnName' |
|||
}, |
|||
deleteVisible: false, |
|||
reconfirmDeleteVisible: false, |
|||
selectedStore: {}, |
|||
deleteData: {}, |
|||
sortLoading: false, |
|||
brotherNodeNum: 0, |
|||
sortTableData: [] |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 逆归实现 获取指定元素 |
|||
findNode(tree, func) { |
|||
for (const node of tree) { |
|||
if (func(node)) return node |
|||
if (node.children) { |
|||
const res = this.findNode(node.children, func) |
|||
if (res) return res |
|||
} |
|||
} |
|||
return null |
|||
}, |
|||
// 展开选中的父级 |
|||
expandParents(node) { |
|||
node.expanded = true |
|||
if (node.parent) { |
|||
this.expandParents(node.parent) |
|||
} |
|||
}, |
|||
[CRUD.HOOK.afterRefresh]() { |
|||
this.crud.data = dataJson.data |
|||
let currentKey |
|||
if (localStorage.getItem('currentStoreKey')) { |
|||
currentKey = JSON.parse(localStorage.getItem('currentStoreKey')) |
|||
} else { |
|||
if (this.crud.data[0].isType === 1) { |
|||
currentKey = this.findNode(this.crud.data[0].children, (node) => { |
|||
return node.isType !== 1 |
|||
}) |
|||
} else { |
|||
currentKey = this.crud.data[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) { |
|||
this.crud.selectionChangeHandler([val]) |
|||
this.$refs.eform.pid = val.id |
|||
this.selectedStore = val |
|||
if (val.pid !== '0') { |
|||
Vue.set(this.selectedStore, 'parentName', this.$refs.tree.getNode(val.pid).data.cnName) |
|||
} |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentStoreKey', JSON.stringify(val)) |
|||
if (this.$refs.tree.getNode(val.pid) && this.$refs.tree.getNode(val.pid).childNodes) { |
|||
this.brotherNodeNum = this.$refs.tree.getNode(val.pid).childNodes.length |
|||
} |
|||
} |
|||
}, |
|||
// 新增 - 判断当前节点类型，卷内/文件不可新建 |
|||
[CRUD.HOOK.beforeToAdd](crud, form, btn) { |
|||
const isCanAddKey = JSON.parse(localStorage.getItem('currentStoreKey')) |
|||
if (isCanAddKey.isType === 4 || isCanAddKey.isType === 5) { |
|||
this.$message({ |
|||
message: '此门类下不可新建门类', |
|||
type: 'error', |
|||
duration: 2500 |
|||
}) |
|||
return false |
|||
} |
|||
this.$refs.eform.beforeToAdd() |
|||
}, |
|||
// 新增/编辑后 - 新增后默认选中新增的库房 |
|||
[CRUD.HOOK.afterSubmit](crud, addedCategory) { |
|||
if (addedCategory) { |
|||
// 缓存当前的选中的 |
|||
localStorage.setItem('currentStoreKey', JSON.stringify(addedCategory)) |
|||
} |
|||
}, |
|||
treeNodeSort(data) { |
|||
this.$refs.tree.updateKeyChildren(data[0].pid, JSON.parse(JSON.stringify(data))) |
|||
}, |
|||
// 删除门类 |
|||
toDelete(data) { |
|||
this.deleteData = data |
|||
this.$confirm('此操作将删除当前所选区域及其子集' + '<span>你是否还要继续？</span>', '提示', { |
|||
confirmButtonText: '继续', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
dangerouslyUseHTMLString: true |
|||
}).then(() => { |
|||
|
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
handleClose(done) { |
|||
this.deleteData = {} |
|||
done() |
|||
}, |
|||
toSort(data) { |
|||
this.$refs.sort.sortTableData = this.$refs.tree.getNode(data[0].pid).data.children |
|||
this.$refs.sort.sortVisible = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tree-scroll{ |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue