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

<template>
  <basic-container>
    <avue-crud
      ref="crud"
      @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"
    >
      <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>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button type="text" @click="rowUpdate(row)">编辑</el-button>
        <el-button type="text" @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-dialog
      title="新增用户"
      :visible.sync="distributionCodeDialog"
      append-to-body
      width="30%">
      <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 slot="footer" class="dialog-footer">
        <el-button @click="distributionCodeDialog = false">取 消</el-button>
        <el-button type="primary" @click="inviteCodeSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </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
} from "@/api/manage/station";
import { Message } from "element-ui";
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,
  editBtn: false,
  delBtn: false,
  height: "auto",
  border: true,
  searchMenuSpan: 48,
  index: true,
  indexLabel: "序号",
  column: [{
    label: '机构名称',
    prop: 'companyName',
    search: true,
  },{
    label: '企业名称',
    prop: 'comname',
    search: true,
  },{
    label: '绑定用户',
    prop: 'realName',
    // search: true,
  },
  // {
  //   label: '邀请码',
  //   prop: 'inviteCode',
  //   search: true,
  // },

  {
    label: '手机号',
    prop: 'phone',
    search: true,
  },{
    label: '身份证',
    prop: 'idNumber',
    search: true,
    formatter:(_,value,label) => value
  },
  // {
  //   label: '备注',
  //   prop: 'remarks',
  // },
  {
    label: '启用状态',
    prop: 'isEnabled',
    slot: true,
    width: 100
  }]
}
const page = {
  pageSize: 10,
  currentPage: 1,
  total: 0,
}
export default {
  name: "manage_station_inviteCode",
  data(){
    return {
      distributionCodeDialog: false,
      inviteCodeRules: Object.assign({}, inviteCodeRules),
      enterpriseList: [], // 企业列表
      inviteCodeForm: {},
      inviteCodeList:[],
      option: Object.assign({}, curdOptions),
      page: Object.assign({}, page),
      searchData: {},
      isEdit: false,
    }
  },
  activated() {
    this.getList() // 企业
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  methods:{
    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(() => { });
    },
    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,
        }
        let resData = await getInvitationCodeList(params)
        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>

</style>