<template>
<div class="dialog-box custom-form-box">
<!-- 添加数据字典 -->
<el-dialog
:title="header.name"
:visible.sync="visibleDialog"
:close-on-click-modal="false"
lock-scroll
width="1150px"
class="record-item-dialog"
:before-close="cancel"
v-dialogDrag
append-to-body
>
<el-form
class="form"
:model="form"
ref="form"
size="small"
label-position="right"
label-width="100px">
<el-form-item label="类型" prop="nodeType">
<el-select v-model="form.nodeType" placeholder="请选择">
<el-option
v-for="item in nodeTypes"
:key="item.value"
:label="item.label"
:value="item.value"
disabled
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="节点" prop="nodeId">
<el-card class="card-box-height">
<tree-view
:tree-data="treeData.data"
:showCheckbox="treeData.showCheckbox"
:treeLazy="treeData.treeLazy"
:treeType="treeType"
:defaultProps="treeData.defaultProps"
:isfilterText="treeData.isfilterText"
:checkStrictly="treeData.checkStrictly"
:highlight-current="true"
:checked-keys="checkedKey"
@check-change="handleCheckChange"
@node-click="handNodeClick"
node-key="id"
default-expand-all
ref="userTreeView"
></tree-view>
<!-- {{ typeof treeType }} -->
</el-card>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="cancel()">取 消</el-button>
<el-button type="primary" :loading="saveLoading" size="small" @click="addSubmit('form')">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TreeView from '@/components/TreeView';
import * as commonService from 'api/common';
import * as roleService from 'api/usr/role';
export default {
name: 'showUserInfo',
props: {
visible: {
type: Boolean,
default: false
},
header: {
type: Object,
default: () => {
}
},
saveLoading: {
type: Boolean,
default: false
},
formValue: { // 编辑默认参数
type: Object,
default: () => {
}
},
checkedKey: {
type: Array,
default: () => []
},
treeType: {
type: String,
default: () => []
}
},
components: { TreeView },
data () {
return {
form: {
id: '',
nodeType: ''
},
nodeId: '',
nodeTypes: [
{ value: 1, label: '指定人' },
{ value: 2, label: '部门' },
{ value: 3, label: '角色' }
],
treeData: {
data: [],
defaultProps: {
children: 'children',
label: 'deptName',
isLeaf: (data, node) => {
if (node.level === 2) {
return true;
}
}
},
// treeType: 1,
treeLazy: false,
showCheckbox: true,
isfilterText: true,
checkStrictly: true
},
checkedNodes: ''
};
},
computed: {
visibleDialog: {
get () {
return this.visible;
},
set (val) {
this.$emit('cancel', val);
}
}
},
created () {
},
watch: {
'form.nodeType': {
handler () {
// 接口联动
this.getInfo(this.form.nodeType);
}
},
formValue: {
handler (val) {
if (val.nodeType != null && undefined !== val.nodeType) {
this.form.nodeType = val.nodeType;
this.getInfo(this.form.nodeType);
}
if (val != null && val.id !== undefined && val.id != null) {
// 编辑赋值
this.form = {
...val
};
}
}
},
parentData: {
handler (val) {
// 编辑赋值
this.form.parentId = val.parentId;
}
}
},
mounted () {
// 初始化下拉框的数据
this.initDicData();
},
methods: {
// 初始化下拉框数据
initDicData () {},
// 取消
cancel () {
this.$confirm('系统不会保留您的操作,确定要关闭吗?').then(() => {
this.$emit('cancel', false);
}).catch(() => {});
},
// 提交
addSubmit (formName) {
const param = {
...this.form
};
this.checkedNodes = this.$refs.userTreeView.getTreeSelectedNode();
const checkedNode = { deptName: null, id: null };
const nameList = [];
const idList = [];
this.checkedNodes.forEach(node => {
nameList.push(node.deptName);
if (node.deptId) {
idList.push(node.deptId);
} else if (node.deptId) {
idList.push(node.deptId);
} else if (node.id) {
idList.push(node.id);
}
});
checkedNode.deptName = nameList.join(',');
checkedNode.id = idList.join(',');
param.checkedNode = checkedNode;
this.checkedNodes = checkedNode;
this.$emit('dialogSave', param);
},
formData (param) {
param.verifyFlag = param.leafFlag === '1' ? 1 : 0;
},
// #region --------- 上传组件方法
// 上传前的调用
beforeUploadHandle () {},
uploadChangeHandle (file, fileList) {
// 当多余一个的时候替换文件
if (fileList.length > 1) {
fileList.splice(0, 1);
}
},
handleCheckChange (data, check) {},
handNodeClick (item, node, self) {},
async getInfo (type) {
if (type === 1) {
commonService.getAllUser({ appId: window.g.app_id }).then(res => {
if (res && res.length) {
res.forEach(item => {
item.deptName = item.nameCn;
});
this.treeData.data = res;
// console.log(' this.userListptions =====', res);
}
});
} else if (type === 2) {
commonService.getAllOrg({ appId: window.g.app_id }).then(res => {
if (res && res.length) {
console.log('org', res);
res.forEach(item => {
item.deptName = item.orgName;
});
this.treeData.data = res;
}
});
} else if (type === 3) {
const res = await roleService.getRoleTree(window.g.app_id, 1);
if (res) {
// console.log('role', res);
res.forEach(item => {
item.deptName = item.name;
item.childs = item.roles;
});
this.treeData.data = res;
console.log(this.treeData.data); //这里有子节点childs
// this.$refs.userTreeView.redraw();
// console.log('3', this.treeData.data);
};
}
}
}
};
</script>