资料目录维护页面
This commit is contained in:
zhaoxiao
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :img-for-icon="IconImg"></page-header-title>
|
||||
<a-card :bordered="false">
|
||||
<!-- 操作按钮区域-->
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
|
||||
<a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
|
||||
</div>
|
||||
|
||||
<div class="data-directory-container">
|
||||
<div class="data-directory-container-left">
|
||||
<a-tree
|
||||
v-model="checkedKeys"
|
||||
checkable
|
||||
:expanded-keys="expandedKeys"
|
||||
:auto-expand-parent="autoExpandParent"
|
||||
:selected-keys="selectedKeys"
|
||||
:tree-data="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</div>
|
||||
<div class="data-directory-container-divider"></div>
|
||||
<div class="data-directory-container-right">
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">基本信息</div>
|
||||
</div>
|
||||
<a-form :form="form">
|
||||
<a-form-item label="文件夹名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入文件夹名称"
|
||||
v-decorator="['directoryName',validatorRules.directoryName]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="上级名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入文件夹名称"
|
||||
v-decorator="['directoryName',validatorRules.directoryName]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入文件夹名称"
|
||||
v-decorator="['directoryName',validatorRules.directoryName]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-textarea
|
||||
placeholder="请输入备注"
|
||||
v-decorator="['remarks']"
|
||||
:auto-size="{ minRows: 3, maxRows: 6 }"
|
||||
:maxLength='200'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
|
||||
import IconImg from '@/assets/imgs/icon/icon_committee.png'
|
||||
import { JeroListMixin } from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: 'DataDirectoryMaintenance',
|
||||
components: { PageHeaderTitle },
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
IconImg,
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 4 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 18 }
|
||||
},
|
||||
validatorRules: {
|
||||
directoryName: {
|
||||
rules: [{ required: true, message: '请输入文件夹名称' }]
|
||||
}
|
||||
},
|
||||
url: {
|
||||
list: ''
|
||||
},
|
||||
treeData: [
|
||||
{
|
||||
title: '0-0',
|
||||
key: '0-0',
|
||||
children: [
|
||||
{
|
||||
title: '0-0-0',
|
||||
key: '0-0-0',
|
||||
children: [
|
||||
{ title: '0-0-0-0', key: '0-0-0-0' },
|
||||
{ title: '0-0-0-1', key: '0-0-0-1' },
|
||||
{ title: '0-0-0-2', key: '0-0-0-2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '0-0-1',
|
||||
key: '0-0-1',
|
||||
children: [
|
||||
{ title: '0-0-1-0', key: '0-0-1-0' },
|
||||
{ title: '0-0-1-1', key: '0-0-1-1' },
|
||||
{ title: '0-0-1-2', key: '0-0-1-2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '0-0-2',
|
||||
key: '0-0-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '0-1',
|
||||
key: '0-1',
|
||||
children: [
|
||||
{ title: '0-1-0-0', key: '0-1-0-0' },
|
||||
{ title: '0-1-0-1', key: '0-1-0-1' },
|
||||
{ title: '0-1-0-2', key: '0-1-0-2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '0-2',
|
||||
key: '0-2'
|
||||
}
|
||||
],
|
||||
expandedKeys: ['0-0-0', '0-0-1'],
|
||||
autoExpandParent: true,
|
||||
checkedKeys: ['0-0-0'],
|
||||
selectedKeys: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onExpand(expandedKeys) {
|
||||
console.log('onExpand', expandedKeys);
|
||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||
// or, you can remove all expanded children keys.
|
||||
this.expandedKeys = expandedKeys;
|
||||
this.autoExpandParent = false;
|
||||
},
|
||||
onCheck(checkedKeys) {
|
||||
console.log('onCheck', checkedKeys);
|
||||
this.checkedKeys = checkedKeys;
|
||||
},
|
||||
onSelect(selectedKeys, info) {
|
||||
console.log('onSelect', info);
|
||||
this.selectedKeys = selectedKeys;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.part-title {
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC, PingFang SC-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
|
||||
&-text {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&-text::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #069f99;
|
||||
}
|
||||
}
|
||||
|
||||
.data-directory-container {
|
||||
display: flex;
|
||||
|
||||
&-left {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
width: 2px;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: calc(55% - 2px);
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user