cmanager/src/views/manage/station/inviteCode.vue

<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :table-loading="loading"
      @date-change="dateChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
      :option="option"
      :data="inviteCodeList"
      :page.sync="page"
      @row-del="rowDel"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button
          size="small"
          @click.stop="distributionCodeDialog = true; isEdit = false; inviteCodeForm = {}"
          type="primary"
          v-show="vaildData(permission.manage_station_inviteCode_edituser, false)"
        >新增用户
        </el-button>
        <el-button
          size="small"
          @click.stop="handleCheck"
          type="primary"
        >审核
        </el-button>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button type="text" size="small" @click="rowUpdate(row)">编辑</el-button>
        <el-button type="text" size="small" @click="rowDel(row)">删除</el-button>
      </template>
      <template slot="isEnabled" slot-scope="{ row }">
        <el-switch
          :value="row.isEnabled"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeEnabled(row)">
        </el-switch>
      </template>

    </avue-crud>
    <el-drawer
      title="新增用户"
      :visible.sync="distributionCodeDialog"
      append-to-body
      width="40%"
    >
      <div class="drawer_content">
        <el-form :model="inviteCodeForm" :rules="inviteCodeRules" filterable ref="inviteCode" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="企业名称:" prop="companyId">
            <el-select v-model="inviteCodeForm.inviteCompanyId" :disabled="isEdit" filterable placeholder="请选择企业"
                       style="width: 260px">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.comname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="绑定用户:" prop="realName">
            <el-input style="width: 260px" v-model="inviteCodeForm.realName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证:" prop="idNumber">
            <el-input style="width: 260px" v-model="inviteCodeForm.idNumber" placeholder="请输入身份证"></el-input>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <el-input style="width: 260px" v-model="inviteCodeForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="备注:" prop="remarks">
            <el-input type="textarea" style="width: 260px" v-model="inviteCodeForm.remarks"
                      placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer footer_btns">
        <el-button @click="distributionCodeDialog = false">取 消</el-button>
        <el-button type="primary" @click="inviteCodeSubmit">确 定</el-button>
      </span>
      </div>
    </el-drawer>
  </basic-container>
</template>
<script>
import {mapGetters} from "vuex";
import {check18IdCardNo, isExcel, isMobile} from "@/util/validate";
import {deepClone} from "@/util/util";
import {
  getEnterpriseList,
  saveEnterpriseItem,
  getInvitationCodeList,
  getInvitationStatusUpdate,
  getInviteApproval
} from "@/api/manage/station";
import {Message} from "element-ui";
import lodash from "lodash";
import {recruitStatus} from "@/common/dic";
import {Auditing} from "@/api/manage/mission";

const inviteCodeRules = {
  stationId: [
    {required: true, message: '请选择企业', trigger: 'blur'}
  ],
  realName: [
    {required: true, message: '请输入名称', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur', pattern: /^1[3-9]{1}\d{9}/}
  ],
  idNumber: [
    {
      required: true,
      message: '请输入身份证',
      trigger: 'blur',
      pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/
    }
  ],
}
const curdOptions = {
  dateBtn: false,
  addBtn: false,
  tip: false,
  editBtn: false,
  delBtn: false,
  height: "auto",
  viewBtn: true,
  border: true,
  searchMenuSpan: 48,
  selection: true,
  index: true,
  indexLabel: "序号",
  dialogType: "drawer",
  align: 'center',
  column: [{
    label: '机构名称',
    prop: 'companyName',
    search: true,
  }, {
    label: '企业名称',
    prop: 'comname',
    search: true,
  }, {
    label: '统一信用代码',
    prop: 'companyId',
    hide: true,
  }, {
    label: '绑定用户',
    prop: 'realName',
  },
    {
      label: '手机号',
      prop: 'phone',
      search: true,
    }, {
      label: '身份证',
      prop: 'idNumber',
      search: true,
      formatter: (_, value, label) => value
    },
    {
      label: '驳回原因',
      prop: 'reviewMsg',
    },
    {
      label: '启用状态',
      prop: 'isEnabled',
      type: 'select',
      dicData: [
        {label: '否', value: 0},
        {label: '是', value: 1},
      ],
      slot: true,
      width: 100
    },
    {
      label: '审核状态',
      prop: 'reviewStatus',
      width: 100,
      type: 'select',
      dicData: recruitStatus,
      display: false,
    },
    {
      label: '创建时间',
      prop: 'createTime',
      hide: true,
    },
    {
      label: '创建用户',
      prop: 'createUser',
      hide: true,
    }
  ]
}
const page = {
  pageSize: 10,
  currentPage: 1,
  total: 0,
}
const message = lodash.throttle(
  function (options) {
    Message(options);
  },
  3000,
  {trailing: false}
);
export default {
  name: "manage_station_inviteCode",
  data() {
    return {
      distributionCodeDialog: false,
      inviteCodeRules: Object.assign({}, inviteCodeRules),
      enterpriseList: [], // 企业列表
      inviteCodeForm: {},
      inviteCodeList: [],
      selectionList: [],
      option: Object.assign({}, curdOptions),
      page: Object.assign({}, page),
      searchData: {},
      isEdit: false,
      loading: false,
    }
  },
  activated() {
    this.getList() // 企业
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  methods: {
    handleCheck() {
      let self = this
      if (this.selectionList.length < 1) {
        message({
          type: "warning",
          message: "请至少选择一条数据",
        });
        return;
      }
      let idList = this.selectionList.filter((item) => item.reviewStatus === 0).map((v) => v.id)
      if (idList.length == 0) {
        this.$message.error("只能提交【审核中】的任务");
      } else {
        let h = this.$createElement;
        this.$prompt(
          h("p", {style: "color: #F56C6C"}, "一旦驳回无法进行后续操作"),
          "请核对企业信息后再进行审核通过",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "通 过",
            cancelButtonText: "驳 回",
            type: "warning",
            center: true,
            inputType: "textarea",
            inputPlaceholder: "备注驳回原因",
            beforeClose: function (action, instance, done) {
              if (action === 'cancel') {
                if (!instance.inputValue) {
                  return this.$message({
                    type: "info",
                    message: "请输入驳回原因!",
                  });
                }
                self.handelFetchAuditing(idList, 9, instance.inputValue, "成功驳回, 操作成功!").then(() => done())
              } else if (action === 'confirm') {
                self.handelFetchAuditing(idList, 1, instance.inputValue).then(() => done())
              } else {
                done()
              }
            }
          }
        )
      }
    },
    handelFetchAuditing(idList, reviewState, msg, message) {
      return new Promise((resolve, reject) => {
        let arr = idList.map((item) => ({
          id: item,
          reviewStatus: reviewState,
          reviewMsg: msg || '',
        }))
        this.loading = true;
        getInviteApproval(arr).then(() => {
          this.loading = false;
          this.onLoad();
          this.$message({
            type: message ? "info" : "success",
            message: message || "审核通过，操作成功!",
          });
          resolve()
        }).catch(() => {
          this.loading = false;
          reject()
        });
      })
    },
    rowUpdate(row) {
      this.isEdit = true
      this.distributionCodeDialog = true
      this.inviteCodeForm = deepClone({
        inviteCompanyId: row.inviteCompanyId,
        phone: row.phone,
        remarks: row.remarks,
        id: row.id
      })
    },
    rowDel(row) {
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", {style: "font-size: 16px"}, "您确定要删除此消息吗? "),
          h("p", {style: "color: red"}, "一旦删除则无法找回"),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      )
        .then(() => {
          return getInvitationStatusUpdate({id: row.id, isDeleted: 1});
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.refreshChange();
        })
        .catch(() => {
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    async onLoad() {
      this.getInvitationCode()
    },
    currentChange(page) {
      this.page.currentPage = page
    },
    sizeChange(size) {
      this.page.pageSize = size
    },
    async changeEnabled(row) {
      const isEnabled = row.isEnabled ? 0 : 1
      let params = {id: row.id, isEnabled}
      console.log(params)
      let resData = await getInvitationStatusUpdate(params)
      if (resData.data.code === 200) {
        this.$message.success('状态修改成功');
        this.getInvitationCode()
      }
    },
    refreshChange() {
      this.getInvitationCode('refresh')
    },
    searchReset() {
      this.searchData = {};
      this.getInvitationCode('refresh')
    },
    searchChange(params, done) {
      this.searchData = params;
      this.getInvitationCode('refresh').then(() => done())
    },
    getInvitationCode(type = 'add') {
      return new Promise(async (resolve, reject) => {
        if (type === 'refresh') {
          this.page.currentPage = 1
        }
        let params = {
          ...this.searchData,
          current: this.page.currentPage,
          size: this.page.pageSize,
        }
        this.loading = true
        let resData = await getInvitationCodeList(params)
        this.loading = false
        if (resData.data.code === 200) {
          const {size, records, current, total} = resData.data.data
          this.inviteCodeList = records
          this.page = {pageSize: size, currentPage: current, total}
          resolve()
        } else {
          reject()
          this.$message.error('拉取失败');
        }
      })
    },
    async inviteCodeSubmit() {
      const companyName = this.enterpriseList.filter((item) => item.id === this.inviteCodeForm.inviteCompanyId)[0].comname;
      let params = {
        ...this.inviteCodeForm,
        companyName
      }
      let resData = null
      if (this.isEdit) {
        resData = await getInvitationStatusUpdate(params)
      } else {
        resData = await saveEnterpriseItem(params)
      }
      if (resData.data.code === 200) {
        const {code, data} = resData.data
        this.distributionCodeDialog = false
        this.getInvitationCode('refresh')
        this.$message.success('提交成功');
      } else {
        this.$message.error('创建失败');
      }
    },
    async getList() {
      let params = {}
      let resData = await getEnterpriseList(params)
      if (resData.data.code === 200) {
        const {code, data} = resData.data
        this.enterpriseList = data
      }
    }
  }
}
</script>
<style scoped>
.drawer_content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer_btns {
  display: flex;
  justify-content: flex-end;
}
</style>