<template> <div class="ct"> <el-dialog title="创建子部门" :visible.sync="addDialog" width="58%" :show-close="false" :close-on-click-modal="false" > <el-form :model="addForm" label-width="auto" ref="addStore" :rules="rules" > <el-form-item label="部门名称:" prop="label"> <el-input size="small" v-model="addForm.label" placeholder="请输入部门名称" style="width: 50%;" /> </el-form-item> <el-form-item label="上级部门:" prop="parentId"> <el-cascader v-model="addForm.parentId" :options="orgTree" :props="deptOption" :show-all-levels="false" clearable style="width: 50%;" @change="handleDpetChange"></el-cascader> </el-form-item> <el-form-item label="门店名称:" prop="oyStallName"> <el-input size="small" v-model="addForm.oyStallName" placeholder="请输入门店名称" style="width: 50%;" /> </el-form-item> <el-form-item label="是否设置详细信息:"> <el-radio-group v-model="detail" @change="handleDetailChange"> <el-radio :label="1">是</el-radio> <el-radio :label="2">否</el-radio> </el-radio-group> </el-form-item> <el-form-item label="门店Id:" prop="oyStallCode" v-if="detail == 1"> <el-input size="small" v-model="addForm.oyStallCode" placeholder="请输入门店Id" style="width: 50%;" /> </el-form-item> <el-form-item label="门店会员id:" prop="oyStallMemberId" v-if="detail == 1"> <el-input size="small" v-model="addForm.oyStallMemberId" placeholder="门店会员id:" style="width: 50%;" /> </el-form-item> <el-form-item label="设置主管:" prop="clerkId" v-if="detail == 1"> <el-cascader :props="props" v-model="deptId" :options="parentDeptList" :show-all-levels="false" filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader> <el-select v-model="addForm.clerkId" filterable multiple placeholder="请选择" style="width: 30%;" clearble> <el-option v-for="item in peopleList" :key="item.id" :label="item.userName" :value="item.id"> </el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="handleAddCancel" size="small">取 消</el-button> <el-button type="primary" @click="handleAddFinish" size="small">确 定</el-button> </span> </el-dialog> <div></div> </div> </template> <script> import { addGroup, getWxAllDeptList, getAllMemberList,getGroupById,getAllPeopleList,getOrgTree } from "@/api/in/mail"; import { log } from "util"; export default { props: { addDialog: { type: Boolean, default: false } }, data() { // 中英文验证规则 const nameValidate = (rule, value, callback) => { let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/ if (!reg.test(value)) { callback(new Error("含有非法字符(只能输入字母、汉字)!")) } else { callback() } } return { treeData: [], group_name: "", shop_code: "", showTree: false, params: { d_name: "", d_parentId: "", code: "" }, checked: false, //// addForm: { label: '', parentId: '', oyStallName: '', oyStallMemberId: '', oyStallCode: '', clerkId: [] }, detail: 2, deptId: '', // 上级部门 parentDeptList: [], peopleList: [], orgTree: [], rules: { label: [ { required: true, message: "请输入部门名称", trigger: "blur" }, { max: 50, message: "长度在50个字符以内", trigger: "blur" } ], parentId: [{ required: true, message: "请选择上级部门", trigger: "change" }] }, deptOption: { value: 'id', children: 'children', lazy: true, emitPath: false, checkStrictly: true, lazyLoad (node, resolve) { const { level } = node; setTimeout(() => { const nodes = Array.from(level) .map(item => ({ value: level.id, label: level.label, leaf: level >= 2 })) // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(nodes); }, 1000); } }, props: { value: 'id', children: 'children', lazy: true, emitPath: false, checkStrictly: true, lazyLoad (node, resolve) { const { level } = node; setTimeout(() => { const nodes = Array.from(level) .map(item => ({ value: level.id, label: level.label, leaf: level >= 2 })) // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(nodes); }, 1000); } } } }, created() { this.getOrgTree() }, methods: { handleDpetChange(val) { console.log(val,'val') }, getOrgTree() { getOrgTree().then(res => { this.orgTree = [res.data.organizations] }); }, handleDetailChange(val) { this.deptId = '' this.addForm.clerkId = [] this.peopleList = [] if(val == 1) { this.getDeptList() } }, handleParentChange(val) { this.addForm.clerkId = [] if(this.detail == 1) { this.getGroupMember(val) } }, getDeptList() { getWxAllDeptList() .then(res => { console.log(res,'全部部门') this.parentDeptList = res.data }) .catch(err => { console.log(err) }); }, handleAddCancel() { this.$emit("handleAddCancel") }, handleAddFinish() { const clerkIds = this.addForm.clerkId+"" let data = Object.assign(this.addForm,{ clerkIds }) delete data.clerkId addGroup(data).then(res => { if(res.data.isSuccessful == 0) { this.$message.fail(res.data.msg) }else{ this.$emit("handleAddFinish") } }) // console.log(addGroup) }, // 获取所有人员 getGroupMember(id) { getAllPeopleList({ id }).then(res => { console.log(res,'人员') this.peopleList = res.data }) }, /* handleNodeClick(item, node, self) { // console.log(item,node,self) this.params.d_parentId = item.id; this.paramsForShow.father_name = item.label; }, checkChange(item, node, self) {}, showTreeData() { this.showTree = !this.showTree; }, */ } }; </script> <style scoped> .tree >>> .is-leaf + .el-checkbox .el-checkbox__inner { display: inline-block; } .tree >>> .el-checkbox .el-checkbox__inner { display: none; } .choose { padding: 16px; font-size: 16px; font-weight: bold; color: rgba(56, 56, 56, 1); box-sizing: border-box; } .title { display: flex; align-items: center; justify-content: space-between; /* border-bottom: 1px solid #f8f8f8; */ padding-bottom: 10px; } .transfer-footer { margin-left: 20px; padding: 6px 5px; } .ct >>> .el-dialog__header { border-bottom: 1px solid #f8f8f8; } .ct >>> .el-dialog__body { padding: 20px 40px; } .ct >>> .el-transfer-panel { width: 250px; } .circle { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; border: 1px solid rgba(208, 2, 27, 1); position: relative; } .circle >>> .icon { width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .br { border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; padding: 24px 0; } .config_item { display: flex; flex-direction: row; align-items: center; } .config_name:before { content: "* "; color: red; } .config_name { width: 80px; text-align: center; margin-right: 10px; } .config_value { width: 230px; } .father_group { margin: 10px 0; width: 228px; height: 38px; border-radius: 4px; border: 1px solid #dcdfe6; position: relative; } .arrow_down { width: 0; height: 0; border-width: 5px; border-style: solid; border-color: #ccc transparent transparent transparent; position: absolute; right: 10px; top: 20px; } .arrow_up { width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent transparent #ccc transparent; position: absolute; right: 10px; top: 15px; } .tree_data { margin-left: 90px; } .father_name_text { line-height: 38px; padding-left: 15px; } .tips { width: 100%; text-align: center; color: red; margin: 5px 0; } </style>