<template>
|
<div class="mod-config">
|
<basic-container>
|
<el-tabs type="border-card" ref="product">
|
<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 label="人工类型分组名称" prop="name">
|
<el-input
|
v-model="form.name"
|
:disabled="formEdit"
|
placeholder="请输入人工类型分组名称"
|
/>
|
</el-form-item>
|
<el-form-item label="人工类型分组序号" prop="sort">
|
<el-input
|
v-model="form.sort"
|
: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="人工类型">
|
<handymanTypeDialog
|
:joinId="this.currentId"
|
ref="commonHandymanTypeTable"
|
@handleSelectionChange="selectHandymanType"
|
/>
|
</el-tab-pane>
|
</el-tabs>
|
</el-row>
|
</el-tabs>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import {
|
fetchTree,
|
addObj,
|
getObj,
|
putObj,
|
delObj
|
} from '../../../api/product/artificialinformationjoin'
|
import handymanTypeDialog from './handymantype.vue'
|
export default {
|
components: {
|
handymanTypeDialog
|
},
|
name: 'index',
|
data() {
|
return {
|
resourceStatus: false,
|
list: null,
|
total: null,
|
formEdit: true,
|
formAdd: true,
|
formStatus: '',
|
listQuery: {
|
name: undefined
|
},
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
rules: {
|
parentId: [
|
{ required: true, message: '请输入父级节点', trigger: 'blur' }
|
],
|
name: [
|
{ required: true, message: '请输入资源分组名称', trigger: 'blur' },
|
{ min: 2, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
|
],
|
sort: [
|
{ required: true, message: '请输入资源分组排序值', trigger: 'blur' }
|
]
|
},
|
labelPosition: 'right',
|
form: {
|
name: undefined,
|
parentId: undefined,
|
sort: undefined
|
},
|
currentId: 0,
|
isSubmit: false
|
}
|
},
|
|
computed: {
|
...mapGetters(['elements', 'permissions'])
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
fetchTree(this.listQuery).then((response) => {
|
this.treeData = response.data.data
|
})
|
},
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
selectHandymanType() {
|
this.$refs.commonHandymanTypeTable.getData()
|
},
|
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.name
|
}
|
}
|
}
|
}
|
</script>
|
