<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入名称" v-trim/>
|
</el-form-item>
|
<el-form-item label="选择父级" prop="parentId">
|
<!-- <el-cascader v-model="form.categoryList" :options="categorys" @change="handleChangeCategory" :show-all-levels="false"
|
clearable filterable :props="categoryprops" >
|
<template slot-scope="{ node, data }">
|
<span>{{ data.name }}</span> <!– 自定义显示内容 –>
|
</template>
|
</el-cascader>-->
|
<treeselect
|
v-model="form.parentId"
|
placeholder="请选择"
|
:options="categorys"
|
:normalizer="normalizeOptions"
|
:default-expand-level="1"
|
noChildrenText="没有子选项"
|
noOptionsText="没有可选项"
|
noResultsText="没有匹配的结果" />
|
</el-form-item>
|
<el-form-item label="排序码" prop="sortnum">
|
<el-input v-model="form.sortnum" type="number" placeholder="请输入排序码（升序）" v-trim/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" v-trim/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
export default {
|
name: 'OperaCategoryWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
name: '',
|
type: '',
|
remark: '',
|
categoryList: [],
|
sortnum: null,
|
parentId: null
|
},
|
categoryprops: {
|
label: 'name',
|
value: 'id',
|
checkStrictly: true,
|
lazyLoad: this.lazyLoad
|
},
|
categorys: [],
|
// 验证规则
|
rules: {
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/category',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
normalizeOptions (node) {
|
if (node.childList && !node.childList.length) {
|
// 去掉children=[]的children属性
|
delete node.childList
|
}
|
return {
|
id: node.id,
|
label: node.name,
|
children: node.childList
|
}
|
},
|
handleChangeCategory (value) {
|
this.form.parentId = null
|
if (this.form.categoryList && this.form.categoryList.length >= 1) {
|
this.form.parentId = this.form.categoryList[this.form.categoryList.length - 1]
|
}
|
},
|
getTreeData (data) {
|
if (!data) {
|
return data
|
}
|
for (let i = 0; i < data.length; i++) {
|
console.log(data)
|
if (data[i].childList) {
|
if (data[i].childList.length < 1) {
|
data[i].childList = [] // children若为空数组，则将children设为undefined
|
data[i].childern = [] // children若为空数组，则将children设为undefined
|
} else {
|
this.getTreeData(data[i].childList) // children若不为空数组，则继续 递归调用 本方法
|
}
|
}
|
}
|
return data
|
},
|
open (title, target, categorys, categoryType, parentId) {
|
this.title = title
|
this.categorys = JSON.parse(JSON.stringify(categorys||[]));
|
// this.categorys = this.getTreeData(this.categorys)
|
console.log(parentId)
|
this.visible = true
|
this.form = {
|
id: null,
|
name: '',
|
type: '',
|
remark: '',
|
categoryList: [],
|
sortnum: null,
|
parentId: parentId || null
|
}
|
this.form.type = categoryType
|
// 新建
|
var that = this
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form.parentId = parentId
|
this.form[this.configData['field.id']] = null
|
this.form.categoryList = []
|
/* if (parentIdPath && parentIdPath != null) {
|
var array = parentIdPath.split('/')
|
array.forEach(item => {
|
if (item && item != null && item !== '') {
|
that.form.categoryList.push(parseInt(item))
|
}
|
})
|
that.handleChangeCategory()
|
} */
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
/* this.form.categoryList = []
|
if (target.parentId && target.idParentPath) {
|
var array = target.idParentPath.split('/')
|
array.forEach(item => {
|
if (item && item != null && item !== '') {
|
that.form.categoryList.push(parseInt(item))
|
}
|
})
|
} */
|
})
|
}
|
}
|
}
|
</script>
|
