<template> <a-modal centered class="customerTypeEdit-modal" :footer="null" :maskClosable="false" :title="modalTit" v-model="isShow" @cancle="isShow=false" :width="800"> <!-- 表单 --> <div> <a-form-model id="customerTypeEdit-form" ref="ruleForm" :model="form" :rules="rules" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" > <a-tree checkable @check="onCheck" @expand="onExpand" :expandedKeys="expandedKeys" :autoExpandParent="autoExpandParent" v-model="checkedKeys" :treeData="treeData" /> </a-form-model> <div class="btn-cont"> <a-button type="primary" id="customer-type-edit-modal-save" @click="handleSave">保存</a-button> <a-button id="customer-type-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button> </div> </div> </a-modal> </template> <script> import { findMouldMenuDetail, findMouldMenuSave } from '@/api/mould' export default { name: 'MenuMouldSetModal', props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, itemId: { type: [Number, String], default: '' }, nowData: { type: Object, default: null } }, computed: { modalTit () { return '分配权限(' + (this.nowData && this.nowData.name ? this.nowData.name : '--') + ')' } }, data () { return { isShow: this.openModal, // 是否打开弹框 detailData: null, // 数据 formItemLayout: { labelCol: { span: 6 }, wrapperCol: { span: 16 } }, form: {}, rules: {}, treeData: [], expandedKeys: [], autoExpandParent: true, checkedKeys: [], checkedData: [] } }, methods: { onExpand (expandedKeys) { this.expandedKeys = expandedKeys this.autoExpandParent = false }, onCheck (checkedKeys, info) { this.checkedData = [...checkedKeys, ...info.halfCheckedKeys] this.checkedKeys = checkedKeys }, // 保存 handleSave () { const _this = this if (this.checkedData.length == 0) { return this.$message.warning('请先选择菜单') } this.$refs.ruleForm.validate(valid => { if (valid) { const arr = _this.checkedData.join(',') findMouldMenuSave({ id: _this.itemId, menuIds: arr }).then(res => { if (res.status == 200) { _this.$message.success(res.message) _this.isShow = false } }) } else { console.log('error submit!!') return false } }) }, // 详情 getDetail () { findMouldMenuDetail({ id: this.itemId, appType: 2 }).then(res => { if (res.status == 200) { this.treeData = res.data.menuList if (res.data.mould.menuIds) { const arr = res.data.mould.menuIds.split(',') this.checkedData = arr // 找出叶子节点 this.findLeaf(this.treeData, arr) } } }) }, // 查找叶子节点 findLeaf (data, arr) { for (let i = 0; i < data.length; i++) { const node = data[i] if (node.children) { this.findLeaf(node.children, arr) } else { const hasNode = arr.find(item => { return item == node.id }) if (hasNode) { this.expandedKeys.push(node.id) this.checkedKeys.push(node.id) } } } } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') this.$refs.ruleForm.resetFields() this.checkedKeys = [] this.expandedKeys = [] } }, itemId (newValue, oldValue) { if (this.isShow && newValue) { this.getDetail() } } } } </script> <style lang="less"> .customerTypeEdit-modal{ .ant-modal-body { padding: 40px 40px 24px; } .btn-cont { text-align: center; margin: 35px 0 10px; } } </style>