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="加载中">
        <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="clerkId"  >
          <el-cascader :props="props" 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="clerkId" filterable multiple placeholder="请选择" style="width: 30%;" clearble  @change="handleMemberChange">
            <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 {
      clerkId: [],
      treeData: [],
      group_name: "",
      shop_code: "",
      showTree: false,
      formLoading: false,
      params: {
        d_name: "",
        d_parentId: "",
        code: ""
      },
      checked: false,
      ////
      addForm: {
        label: '',
        parentId: '',
        oyStallName: '',
        oyStallMemberId: '',
        oyStallCode: '',
        clerkId: ''
      },
      detail: 2,
      ifDisabled: false,
      deptId: '',
      // 上级部门
      parentDeptList: [],
      peopleList: [],
      orgTree: [],
      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" }],
        clerkId: [{  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.clerkId = []
      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) {
          const clerkIds = this.clerkId + ""
          let data = Object.assign(this.addForm,{ clerkIds })
          delete data.clerkId
          addGroup(data).then(res => {
            if(res.result == "success") {
              if(res.data.isSuccessful == 0) {       
                this.$message.error("门店id不能重复")
              }else{
                this.$emit("handleAddFinish")
              }
            }else {
              this.$message.error(res.errorMsg)
            }
            
          })
        } else {
          return false;
        }
        });
      
      // console.log(addGroup)
      
    },
    // 获取所有人员
    getGroupMember(id) {
      this.ifDisabled = true
      getAllPeopleList({ id }).then(res => {   
        this.peopleList = res.data
        this.ifDisabled = false
      })
    },
    handleMemberChange(val) {
      console.log(val,'..');
      
      if(val.length == 0) {
        this.addForm.clerkId = ''
      }else {
        this.addForm.clerkId = '验证用'
      }
    }
  }
};
</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>