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" >
        <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 => {
        console.log(res)
      })
      // console.log(addGroup)
      this.$emit("handleAddFinish")
    },
    // 获取所有人员
    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>