addGroup.vue

<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.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true
          this.loadText = "处理中"
          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>