<template>
|
<div class="mod-config">
|
<basic-container>
|
<el-tabs type="border-card" ref="resource">
|
<el-tab-pane label="资源">
|
<el-row>
|
<el-col :span="8" style="margin-top:40px;">
|
<el-tree
|
:data="treeData"
|
:props="defaultProps"
|
:filter-node-method="filterNode"
|
class="filter-tree"
|
node-key="id"
|
highlight-current
|
default-expand-all
|
@node-click="getNodeData"
|
/>
|
</el-col>
|
<el-tabs type="border-card" ref="tabs">
|
<el-tab-pane label="资源">
|
<div class="filter-container">
|
<el-button-group>
|
<el-button type="primary" icon="plus" @click="handlerAdd"
|
>添加
|
</el-button>
|
<el-button type="primary" icon="edit" @click="handlerEdit"
|
>编辑
|
</el-button>
|
<el-button
|
type="primary"
|
icon="delete"
|
@click="handleDelete"
|
>删除
|
</el-button>
|
</el-button-group>
|
</div>
|
<el-col :span="16" style="margin-top:15px;">
|
<el-card class="box-card">
|
<el-form
|
ref="form"
|
:label-position="labelPosition"
|
:rules="rules"
|
:model="form"
|
label-width="100px"
|
class="l-mes"
|
>
|
<el-form-item label="父级节点" prop="parentId">
|
<el-input
|
v-model="form.parentName"
|
disabled
|
placeholder="请输入父级节点"
|
/>
|
</el-form-item>
|
<el-form-item v-if="formEdit" label="节点编号" prop="id">
|
<el-input
|
v-model="form.id"
|
:disabled="formEdit"
|
placeholder="节点编号"
|
/>
|
</el-form-item>
|
<el-form-item label="资源名称" prop="rscGroupName">
|
<el-input
|
v-model="form.rscGroupName"
|
:disabled="formEdit"
|
placeholder="请输入资源分组名称"
|
/>
|
</el-form-item>
|
<el-form-item label="资源分组序号" prop="rscGroupNo">
|
<el-input
|
v-model="form.rscGroupNo"
|
:disabled="formEdit"
|
type="number"
|
placeholder="请输入资源分组序号"
|
/>
|
</el-form-item>
|
<el-form-item
|
v-if="formStatus == 'update'"
|
style="margin-top: 20px"
|
>
|
<el-button type="primary" @click="update"
|
>更新
|
</el-button>
|
<el-button @click="onCancel">取消</el-button>
|
</el-form-item>
|
<el-form-item
|
v-if="formStatus == 'create'"
|
style="margin-top: 20px"
|
>
|
<el-button
|
type="primary"
|
:disabled="isSubmit"
|
v-thinclick="`create`"
|
>保存
|
</el-button>
|
<el-button @click="onCancel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-col>
|
</el-tab-pane>
|
<el-tab-pane label="库存明细">
|
<join-group
|
:resourceId="this.currentId"
|
ref="JoinGroup"
|
@listenToTreeEvent="getUpdateResource"
|
>
|
</join-group>
|
</el-tab-pane>
|
</el-tabs>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="关联资源">
|
<resource-dialog ref="resources"> </resource-dialog>
|
</el-tab-pane>
|
</el-tabs>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import { addObj, delObj, fetchTree, getObj, putObj } from '@/api/aps/tree'
|
import { mapGetters } from 'vuex'
|
import JoinGroup from '@/views/aps/joinresgroup/index'
|
import ResourceDialog from './resource'
|
export default {
|
components: {
|
JoinGroup,
|
ResourceDialog
|
},
|
name: 'index',
|
data() {
|
return {
|
resourceStatus: false,
|
list: null,
|
total: null,
|
formEdit: true,
|
formAdd: true,
|
formStatus: '',
|
typeOptions: ['0', '1'],
|
methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
|
listQuery: {
|
name: undefined
|
},
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
rules: {
|
parentId: [
|
{ required: true, message: '请输入父级节点', trigger: 'blur' }
|
],
|
id: [{ required: true, message: '请输入节点编号', trigger: 'blur' }],
|
rscGroupName: [
|
{ required: true, message: '请输入资源分组名称', trigger: 'blur' },
|
{ min: 2, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
|
],
|
rscGroupNo: [
|
{ required: true, message: '请输入资源分组排序值', trigger: 'blur' }
|
]
|
},
|
labelPosition: 'right',
|
form: {
|
rscGroupName: undefined,
|
rscGroupNo: undefined,
|
parentId: undefined,
|
id: undefined
|
},
|
currentId: 0,
|
isSubmit: false
|
}
|
},
|
|
computed: {
|
...mapGetters(['elements', 'permissions'])
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
fetchTree(this.listQuery).then((response) => {
|
this.treeData = response.data.data
|
})
|
},
|
getUpdateResource() {
|
this.$refs.resources.getData()
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
getNodeData(data) {
|
if (!this.formEdit) {
|
this.formStatus = 'update'
|
}
|
getObj(data.id).then((response) => {
|
this.form = response.data.data
|
})
|
this.currentId = data.id
|
},
|
handlerEdit() {
|
if (this.form.id) {
|
this.formEdit = false
|
this.formStatus = 'update'
|
}
|
},
|
handlerAdd() {
|
this.resetForm()
|
this.formEdit = false
|
this.formStatus = 'create'
|
},
|
handleDelete() {
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
}).then(() => {
|
delObj(this.currentId).then(() => {
|
this.getList()
|
this.resetForm()
|
this.onCancel()
|
this.$notify.success('删除成功')
|
})
|
})
|
},
|
update() {
|
this.$refs.form.validate((valid) => {
|
if (!valid) return
|
putObj(this.form).then(() => {
|
this.getList()
|
this.onCancel()
|
this.$notify.success('更新成功')
|
})
|
})
|
},
|
create() {
|
this.isSubmit = true
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
addObj(this.form).then(() => {
|
this.getList()
|
this.onCancel()
|
this.isSubmit = false
|
this.$notify.success('创建成功')
|
})
|
} else {
|
this.isSubmit = false
|
}
|
})
|
},
|
onCancel() {
|
this.formEdit = true
|
this.formStatus = ''
|
},
|
resetForm() {
|
this.form = {
|
parentId: this.currentId,
|
parentName: this.form.rscGroupName
|
}
|
}
|
}
|
}
|
</script>
|
