<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" v-loading="formLoading" :element-loading-text="loadText">
<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="门店Id:" prop="oyStallCode">
<el-input
size="small"
v-model="addForm.oyStallCode"
placeholder="请输入门店Id"
style="width: 50%;"
/>
</el-form-item>
<el-form-item label="门店会员id:" prop="oyStallMemberId" >
<el-input
size="small"
v-model="addForm.oyStallMemberId"
placeholder="门店会员id"
style="width: 50%;"
/>
</el-form-item>
<el-form-item label="设置主管:" prop="clerkIds" >
<el-cascader :props="props" ref="direcRef" v-model="deptId" :disabled="ifDisabled" :options="parentDeptList" :show-all-levels="false" filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader>
<el-select v-model="addForm.clerkIds" filterable multiple placeholder="请选择" style="width: 30%;" clearble @change="handleMemberChange" :loading="optionLoading" loading-text="数据加载中">
<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('addStore')" 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 checkLabel = (rule, value, callback) => {
let labelReg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/;
if (value == "") {
callback(new Error("请输入部门名称"));
} else if (!labelReg.test(value)) {//引入methods中封装的检查手机格式的方法
callback(new Error("只可以输入中文、字母、数字和减号!"));
} else {
callback();
}
}
// 限制id
const idNumber = (rule, value, callback) => {
let idReg = /^\+?(0|[1-9][0-9]*)$/
if (!idReg.test(value)) {
callback(new Error("只可以输入正整数"))
} else {
callback();
}
}
const memberNumber = (rule, value, callback) => {
let idReg = /^\+?(0|[1-9][0-9]*)$/
if (!idReg.test(value) && value != '') {
callback(new Error("只可以输入正整数"))
} else {
callback();
}
}
return {
clerkIds: [],
loadText: '加载中',
treeData: [],
group_name: "",
shop_code: "",
showTree: false,
formLoading: false,
params: {
d_name: "",
d_parentId: "",
code: ""
},
checked: false,
////
addForm: {
label: '',
parentId: '',
oyStallName: '',
oyStallMemberId: '',
oyStallCode: '',
clerkIds: [],
oydeptId: ''
},
detail: 2,
ifDisabled: false,
deptId: '',
// 上级部门
parentDeptList: [],
peopleList: [],
orgTree: [],
optionLoading: false,
rules: {
label: [
{ required: true, message: "请输入部门名称", trigger: "blur" },
{ max: 50, message: "长度在50个字符以内", trigger: "blur" }
],
parentId: [{ required: true, message: "请选择上级部门", trigger: "change" }],
oyStallCode: [{ required: true, validator: idNumber, trigger: "blur" }],
oyStallMemberId: [{ required: false, validator: memberNumber, trigger: "blur" }],
clerkIds: [{ 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.formLoading = true
this.getOrgTree()
this.getDeptList()
},
methods: {
handleDpetChange(val) {
console.log(val,'val')
},
getOrgTree() {
getOrgTree().then(res => {
this.orgTree = [res.data.organizations]
this.formLoading = false
});
},
handleParentChange(val) {
this.addForm.oydeptId = val
this.optionLoading = true
this.clerkIds = []
this.addForm.clerkIds = []
this.getGroupMember(val)
},
getDeptList() {
getWxAllDeptList()
.then(res => {
console.log(res,'全部部门')
this.parentDeptList = res.data
})
.catch(err => {
console.log(err)
});
},
handleAddCancel() {
this.$emit("handleAddCancel")
},
handleAddFinish(formName) {
this.formLoading = true
this.loadText = "处理中"
this.$refs[formName].validate((valid) => {
if (valid) {
this.addForm.clerkIds = this.addForm.clerkIds + ""
// let data = Object.assign(this.addForm,{ clerkIdss })
// delete data.clerkIds
addGroup(this.addForm).then(res => {
if(res.result == "success") {
if(res.data.isSuccessful == 0) {
this.addForm.clerkIds = this.clerkIds
this.$message.error("门店id不能重复")
this.formLoading = false
}else{
this.$emit("handleAddFinish")
this.formLoading = false
}
}else {
this.addForm.clerkIds = this.clerkIds
this.$message.error(res.errorMsg)
this.formLoading = false
}
})
} else {
return false;
}
})
},
// 获取所有人员
getGroupMember(id) {
this.ifDisabled = true
getAllPeopleList({ id }).then(res => {
this.peopleList = res.data
this.optionLoading = false
this.ifDisabled = false
})
},
handleMemberChange(val) {
this.clerkIds = val
// if(val.length == 0) {
// this.addForm.clerkIds = ''
// }else {
// this.addForm.clerkIds = '验证用'
// }
}
},
watch: {
deptId() {
if (this.$refs.direcRef) {
this.$refs.direcRef.dropDownVisible = false; //监听值发生变化就关闭它
}
}
}
};
</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>