dy-admin-manager/src/views/OAMananger/manager.vue

<template>
  <div>
    <div>
      <save-form
        :inline="true"
        class="searchForm"
        ref="searchForm"
        @submit="search"
        @reset="reset"
        :model="searchForm"
      >
        <el-form-item prop="search">
          <el-input
            type="text"
            clearable
            v-model.trim="searchForm.search"
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="姓名/编号/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="jobNature">
          <el-select
            v-model.trim="searchForm.jobNature"
            clearable
            filterable
            placeholder="请选择工作类型"
          >
            <el-option label="全职" value="FULL_TIME"></el-option>
            <el-option label="兼职" value="PART_TIME"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="deptId">
          <el-cascader
            v-model="searchForm.deptId"
            placeholder="请选择社保分部"
            clearable
            style="width: 100%"
            :options="deptList"
            :show-all-levels="false"
            :collapse-tags="true"
            :props="{ checkStrictly: false }"
          ></el-cascader>
        </el-form-item>
        <el-form-item prop="deptIds">
          <el-cascader
            v-model="searchForm.deptIds"
            placeholder="请选择所属部门"
            clearable
            style="width: 100%"
            :options="deptList"
            :show-all-levels="false"
            :collapse-tags="true"
            @change="onDeptChange"
            :props="{ multiple: true, checkStrictly: false }"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <!-- <el-button
        type="primary"
        style="margin-bottom: 20px"
        @click="roleOperation('create')"
        v-permission="'employee/add'"
        >添加</el-button
      > -->
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column align="center" prop="id" label="员工编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.id }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="realName" label="姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.realName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phone" label="手机号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.phone }}</copy-text>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="deptName" label="社保分部">
          </el-table-column>
          <el-table-column align="center" prop="deptsName" label="所属部门">
          </el-table-column> -->
          <!-- <el-table-column align="center" label="角色分类">
            <template slot-scope="scope">
              <tooltip
                :content="scope.row.roleNames | joinArray(',')"
              ></tooltip>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="jobNature" label="工作类型">
            <template slot-scope="scope">
              {{ scope.row.jobNature | jobNature }}
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" label="所属分部">
            <template slot-scope="scope">
              <tooltip
                :content="scope.row.organNameList | joinArray(',')"
              ></tooltip>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            align="center"
            label="状态"
            :formatter="formatLockFlag"
          >
          </el-table-column> -->
          <!-- <el-table-column align="center" label="入职时间">
            <template slot-scope="scope">
              {{ scope.row.entryDate | formatTimer }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="离职时间">
            <template slot-scope="scope">
              {{ scope.row.demissionDate | formatTimer }}
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            width="250px"
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                @click="roleOperation('update', scope.row)"
                v-if="permission('employee/update')"
                type="text"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="pageInfo.total"
          :page.sync="pageInfo.page"
          :limit.sync="pageInfo.limit"
          :page-sizes="pageInfo.page_size"
          @pagination="getList"
        />
      </div>
    </div>

    <el-dialog
      :title="formTitle[formActionTitle]"
      :visible.sync="roleStatus"
      @close="onFormClose('ruleForm')"
      width="650px"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-alert
          style="margin: 10px 0"
          title="OA信息"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="所属部门"
              prop="deptIds"
              :label-width="formLabelWidth"
            >
              <el-cascader
                v-model="form.deptIds"
                placeholder="请选择所属部门"
                clearable
                style="width: 100%"
                :options="deptList"
                :show-all-levels="false"
                :collapse-tags="true"
                @change="onDeptChange"
                :props="{ multiple: true, checkStrictly: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="社保分部"
              prop="deptId"
              :label-width="formLabelWidth"
            >
              <el-cascader
                v-model="form.deptId"
                placeholder="请选择社保分部"
                clearable
                style="width: 100%"
                :options="deptSmallList"
                :show-all-levels="false"
                :collapse-tags="true"
                :props="{ checkStrictly: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <div v-for="(postDeptIds, index) in form.postDeptIds" :key="index">
          <el-form-item
            :label="'岗位管理' + (index + 1)"
            :label-width="formLabelWidth"
            class="setWidth"
            :prop="'postDeptIds.' + index + '.postId'"
          >
            <el-select
              filterable
              clearable
              placeholder="所属岗位"
              style="width: 180px !important"
              v-model.trim="postDeptIds.postId"
            >
              <el-option
                v-for="item in postList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="setWidth"
            style="margin: 0 10px; width: 190px !important"
            :prop="'postDeptIds.' + index + '.deptIds'"
          >
            <el-cascader
              v-model="postDeptIds.deptIds"
              placeholder="管理部门"
              clearable
              :options="deptList"
              :show-all-levels="false"
              :collapse-tags="true"
              :props="{ multiple: true, checkStrictly: false }"
            ></el-cascader>
          </el-form-item>
          <el-button
            icon="el-icon-minus"
            circle
            v-if="form.postDeptIds.length > 1"
            @click.prevent="removePostDept(postDeptIds)"
          ></el-button>
          <el-button
            icon="el-icon-plus"
            @click.prevent="addPostDept"
            circle
            style="margin-left: 5px"
          ></el-button>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleStatus = false">取 消</el-button>
        <el-button @click="onRoleSubmit('ruleForm')" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { permission } from "@/utils/directivePage";
import {
  queryEmployByOrganId,
  employeeOperate,
  getUserRole,
  employeeAdd,
  employeeUpdate,
  hasCourseGroupRelation,
  updateEducationTeacherId,
  queryEmployeeOrganByUser,
  getDepts,
  getPosts
} from "@/api/systemManage";
import deepClone from "@/helpers/deep-clone";
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Tooltip from "@/components/Tooltip/index";
import { isvalidPhone } from "@/utils/validate";
let validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
export default {
  name: "staffManager",
  components: { pagination, Tooltip },
  data() {
    return {
      roleResetList: [],
      organList: [],
      tableList: [],
      educationList: [],
      deptList: [],
      deptSmallList: [],
      postList: [],
      educationForm: {
        targetUserId: ""
      },
      educationViseble: false,
      activeRow: null,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      detail: null,
      handoverVisible: false,
      roleStatus: false,
      formActionTitle: "create",
      roleList: [], // 角色列表,
      roleBaseList: [], // 登陆人角色

      formTitle: {
        create: "添加员工",
        update: "修改员工"
      },
      formLabelWidth: "100px",
      form: {
        realName: null,
        gender: null,
        phone: null,
        roleIds: [],
        deptId: null, // 社保分部
        organIdLists: [],
        postDeptIds: [
          {
            postId: null,
            deptIds: []
          }
        ],
        deptIds: [],
        // postIds: [],
        jobNature: null,
        entryDate: null,
        contactAddress: null,
        postalCode: null
      },
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phone: [
          {
            type: "number",
            required: true,
            validator: validPhone,
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        roleIds: [
          {
            type: "array",
            required: true,
            message: "请选择分类",
            trigger: "change"
          }
        ],
        // deptId: [{ required: true, message: '请选择社保分部', trigger: 'change' }],
        organIdLists: [
          {
            type: "array",
            required: true,
            message: "请选择所属分部",
            trigger: "change"
          }
        ],
        // deptIds: [{ type: 'array', required: true, message: '请选择所属部门', trigger: 'change' }],
        // postIds: [{ type: 'array', required: true, message: '请选择所属岗位', trigger: 'change' }],
        jobNature: [
          { required: true, message: "请选择工作类型", trigger: "change" }
        ],
        entryDate: [
          { required: true, message: "请选择入职时间", trigger: "blur" }
        ]
      },
      searchForm: {
        search: null,
        jobNature: null,
        organId: null,
        roleId: null,
        deptId: null,
        deptIds: null
      }
    };
  },
  mounted() {
    this.getList();
    this.getRoleList();
  },
  methods: {
    permission,
    handover(row) {
      this.detail = row;
      this.handoverVisible = true;
    },
    onBranchCheckAll() {
      this.form.organIdLists = [];

      this.organList.forEach(item => {
        this.form.organIdLists.push(item.id);
      });
    },
    onRoleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const {
            organIdLists,
            postDeptIds,
            deptIds,
            deptId,
            ...res
          } = this.form;
          let tempPost = [];
          postDeptIds.forEach(post => {
            let tempIds = [];
            post.deptIds.forEach(item => {
              tempIds.push(item[item.length - 1]);
            });
            tempPost.push({
              postId: post.postId,
              deptIds: tempIds
            });
          });
          const tempDeptIds = [];
          deptIds.forEach(ds => {
            tempDeptIds.push(ds[ds.length - 1]);
          });

          const tempDeptId = deptId ? deptId[deptId.length - 1] : "";

          let tempForm = {
            postDeptIds: JSON.stringify(tempPost),
            organIdList: organIdLists.join(","),
            deptIds: tempDeptIds,
            deptId: tempDeptId,
            ...res
          };
          if (this.formActionTitle == "create") {
            if (this.form.id) {
              // 判断有没有Id，如果有则删除
              delete this.form.id;
            }
            employeeAdd(tempForm).then(res => {
              this.messageTips("添加", res);
            });
          } else if (this.formActionTitle == "update") {
            employeeUpdate(tempForm).then(res => {
              this.messageTips("修改", res);
            });
          }
        } else {
          return;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        this.roleStatus = false;
        this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    search() {
      this.pageInfo.page = 1;
      this.getList();
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    getList() {
      let searchForm = this.searchForm;
      let params = {
        search: searchForm.search ? searchForm.search : null,
        jobNature: searchForm.jobNature ? searchForm.jobNature : null,
        organId: searchForm.organId ? searchForm.organId : null,
        roleId: searchForm.roleId ? searchForm.roleId : null,
        rows: this.pageInfo.limit,
        page: this.pageInfo.page
      };
      queryEmployByOrganId(params).then(res => {
        if (res.code == 200 && res.data) {
          this.tableList = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      let temp = [];
      if (node.children && node.children.length > 0) {
        node.children.forEach(item => {
          let child = this.normalizer(item, status);
          let obj = {
            value: item.deptId,
            label: item.deptName
          };
          if (child && child.length > 0) {
            obj.children = child;
          }
          temp.push(obj);
        });
      }
      return temp;
    },
    async getRoleList() {
      // 获取角色
      getUserRole({ delFlag: 0, rows: 9999 }).then(res => {
        let result = res.data;
        if (res.code == 200 && result && result.rows.length > 0) {
          this.roleList = [];
          result.rows.forEach(item => {
            this.roleList.push({
              label: item.roleName,
              value: item.id,
              disabled: false
            });
          });
        }
      });
      // 获取可编辑角色
      // try {
      //   const res = await userRole();
      //   this.roleResetList = [];
      //   res.data.forEach((item) => {
      //     this.roleResetList.push({
      //       label: item.roleName,
      //       value: item.id,
      //       disabled: false,
      //     });
      //   });
      // } catch (e) {
      //   console.log(e);
      // }

      getDepts({ rows: 9999 }).then(res => {
        if (res.code == 200 && res.data && res.data.length > 0) {
          const depts = res.data || [];
          const formatArr = [];
          depts.forEach(dep => {
            formatArr.push({
              value: dep.deptId,
              label: dep.deptName,
              children: this.normalizer(dep)
            });
          });
          this.deptList = formatArr;
        }
      });
      // 岗位
      getPosts({ rows: 9999 }).then(res => {
        if (res.code == 200 && res.data && res.data.length > 0) {
          this.postList = [];
          res.data.forEach(item => {
            this.postList.push({
              label: item.postName,
              value: item.postId
            });
          });
        }
      });
      this.$store.dispatch("setBranchs");
    },
    onDeptChange(value) {
      this.form.deptId = null;
      this.deptSmallList = [];
      let selectList = value.flat(Infinity);
      selectList = [...new Set(selectList)];
      const depts = deepClone(this.deptList);
      const formatArr = [];
      depts.forEach(dep => {
        formatArr.push({
          value: dep.value,
          label: dep.label,
          disabled: !selectList.includes(dep.value),
          children: this.normalizer2(dep, selectList)
        });
      });
      this.deptSmallList = formatArr;
    },
    /** 转换菜单数据结构 */
    normalizer2(node, selectList) {
      let temp = [];
      if (node.children && node.children.length > 0) {
        node.children.forEach(item => {
          let child = this.normalizer2(item, selectList);
          let obj = {
            value: item.value,
            label: item.label,
            disabled: !selectList.includes(item.value)
          };
          if (child && child.length > 0) {
            obj.children = child;
          }
          temp.push(obj);
        });
      }
      return temp;
    },
    async roleOperation(type, data) {
      // 获取分部
      // await queryEmployeeOrganByUser().then(res => {
      //   if (res.code == 200) {
      //     this.organList = res.data;
      //   }
      // });
      this.formActionTitle = type;
      this.roleStatus = true;

      //  格式化 可选角色

      // 修改的时候
      if (type == "update") {
        let roleIdList = [...data.roleIds];
        // this.roleBaseList.forEach((item) => {
        //   if (roleIdList.indexOf(item.value) == -1) {
        //     roleIdList.push(item.value);
        //   }
        // });
        // this.roleResetList = [...this.roleList];
        // this.roleList.forEach((role) => {
        //   if (roleIdList.indexOf(role.value) != -1) {
        //     this.roleResetList.push(role);
        //   }
        // });
        // 初始化数据
        let postDeptArr = [];
        const postDept = data.postDeptIds ? JSON.parse(data.postDeptIds) : [];

        if (postDept.length > 0) {
          postDept.forEach(dept => {
            let deptIds = dept.deptIds || [];
            let deptArr = [];
            deptIds.forEach(ds => {
              deptArr.push(this.formatParentId(ds, this.deptList));
            });
            postDeptArr.push({
              postId: dept.postId,
              deptIds: deptArr
            });
          });
        } else {
          postDeptArr = [
            {
              postId: null,
              deptIds: []
            }
          ];
        }

        const deptIds = data.deptIds ? eval(data.deptIds) : [];
        const tempDeptIds = [];
        if (deptIds.length > 0) {
          deptIds.forEach(ds => {
            tempDeptIds.push(this.formatParentId(ds, this.deptList));
          });
        }
        this.onDeptChange(tempDeptIds);
        this.form = {
          id: data.id,
          realName: data.realName,
          gender: data.gender,
          phone: Number(data.phone),
          roleIds: data.roleIds,
          deptId: data.deptId
            ? this.formatParentId(data.deptId, this.deptList)
            : null,
          organIdLists: data.organIdList ? data.organIdList : [],
          jobNature: data.jobNature,
          entryDate: data.entryDate,
          contactAddress: data.contactAddress,
          postalCode: data.postalCode,
          postDeptIds: postDeptArr,
          deptIds: tempDeptIds
        };
      } else {
        this.roleResetList = [...this.roleBaseList];
      }
    },
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.children) {
          const cIds = this.formatParentId(id, item.children, [
            ...ids,
            item.value
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.value === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    onFormClose(formName) {
      // 关闭弹窗重置验证
      this.form = {
        realName: null,
        gender: null,
        phone: null,
        roleName: null,
        roleIds: [],
        deptId: null,
        organIdLists: [],
        jobNature: null,
        entryDate: null,
        contactAddress: null,
        postalCode: null,
        deptIds: [],
        postDeptIds: [
          {
            postId: null,
            deptIds: []
          }
        ]
      };
      this.$refs[formName].resetFields();
    },
    formatLockFlag(row) {
      let reuslt = ["正常", "冻结"];
      if (row.demissionDate) {
        return "离职";
      } else {
        return reuslt[row.lockFlag];
      }
    },

    submitEducation() {
      // 发请求 提交信息
      updateEducationTeacherId({
        currentUserId: this.activeRow.id,
        targetUserId: this.educationForm.targetUserId
      }).then(res => {
        if (res.code === 200) {
          const type = "DEMISSION";
          const data = this.activeRow;
          employeeOperate({
            employeeId: data.id,
            operate: type
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("更改成功");
              this.roleStatus = false;
              this.educationViseble = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    removePostDept(item) {
      const index = this.form.postDeptIds.indexOf(item);
      if (index !== -1) {
        this.form.postDeptIds.splice(index, 1);
      }
    },
    addPostDept() {
      this.form.postDeptIds.push({
        postId: null,
        deptIds: []
      });
    }
  },
  watch: {
    educationViseble(val) {
      if (!val) {
        this.educationForm.targetUserId = "";
        this.$refs["educationForm"].resetFields();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  // padding: 0 20px;
}
::v-deep .el-select,
::v-deep .el-date-editor.el-input {
  width: 100% !important;
}
.setWidth {
  display: inline-block;
}
</style>