jsm-mall-front/src/views/userManagement/distributorManagement/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{ activeKey, data }">
      <div
        :style="{
          width: '100%',
          height: activeKey == 'list' ? '100%' : '0px',
          overflow: 'hidden'
        }"
      >
        <template-page
          ref="pageRef"
          :get-list="getList"
          :table-attributes="tableAttributes"
          :table-events="tableEvents"
          :operationColumnWidth="280"
          :options-evens-group="optionsEvensGroup"
          :moreParameters="moreParameters"
          :column-parsing="columnParsing"
          :operation="operation()"
          :exportList="exportList"
        >
          <div slot="moreSearch">
            <el-radio-group v-model="examineStatus" size="mini" @change="changeType">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="WAIT">待审核</el-radio-button>
              <el-radio-button label="OK">审核通过</el-radio-button>
              <el-radio-button label="FAIL">驳回</el-radio-button>
            </el-radio-group>
            <br /><br />
          </div>
        </template-page>
      </div>
      <div v-if="~['examine', 'detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
          <zj-form-module
            title=""
            label-width="100px"
            :showPackUp="false"
            :form-data="formData"
            :form-items="formItems"
          >
          </zj-form-module>
        </zj-form-container>
        <div slot="footer" class="dialog-footer">
          <el-button
            v-if="formData.examineStatus == 'WAIT'"
            size="mini"
            type="primary"
            @click="audit('OK', data.removeTab)"
            >审核通过</el-button
          >
          <el-button
            v-if="formData.examineStatus == 'WAIT'"
            size="mini"
            type="danger"
            @click="audit('FAIL', data.removeTab)"
            >审核驳回</el-button
          >
          <el-button size="mini" @click="data.removeTab()">取 消</el-button>
        </div>
      </div>
      <div v-if="~['worker'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
        <el-form ref="workerForm" :model="workerForm" label-width="110px" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="入驻网点" :required="true">
                <el-select v-model="workerForm.websitId" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in websitList" :key="item.websitId" :label="item.name" :value="item.websitId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名" :required="true">
                <el-input v-model="workerForm.name" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="身份证号码" :required="true">
                <el-input v-model="workerForm.idCard" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行卡号">
                <el-input v-model="workerForm.bankAccount" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="师傅编号" :required="true">
                <el-input v-model="workerForm.workerNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="身份证正面照" :required="true">
                <ImageUpload :fileList="fileList" :limit="1" :isEdit="true" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-for="(item, index) in imgList" :key="index">
              <el-form-item :label="item.dictValue" :required="true">
                <ImageUpload :fileList="item.imgs" :limit="1" :isEdit="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="data.removeTab()">取 消</el-button>
          <el-button type="primary" @click="memberInner(data.removeTab)">确定</el-button>
        </div>
      </div>
    </template>
  </zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import {
  memberListService2,
  memberPageExport,
  getMemberDetail,
  memberAudit,
  memberInner,
  memberInsideInner,
  getWebsit
} from '@/api/distributorManagement'
import operation_mixin from '@/components/template/operation_mixin.js'
import request from '@/utils/request'
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false,
        'row-class-name': this.tableRowClassName
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ['审核', '详情'],
      formDialog: false,
      dialogVisible: false,
      formData: {
        type: '工程师',
        examineRemark: '',
        examineStatus: ''
      },
      examineStatus: '',
      websitList: [],
      workerForm: {
        websitId: '',
        userId: '',
        idCard: '',
        workerNumber: '',
        name: '',
        bankAccount: ''
      },
      fileList: [],
      imgList: []
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [
        {
          md: 12,
          isShow: true,
          name: 'el-select',
          options: [
            { label: '待审核', value: 'WAIT' },
            { label: '驳回', value: 'FAIL' },
            { label: '通过', value: 'OK' }
          ],
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '审核状态',
            prop: 'examineStatus',
            rules: []
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'el-select',
          options: [
            { label: '业务员', value: 'SERVICE' },
            { label: '师傅', value: 'WORKER' },
            { label: '普通用户', value: 'GENERAL' }
          ],
          attributes: { disabled: true },
          formItemAttributes: {
            label: '用户类型',
            prop: 'type',
            rules: []
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '用户名称',
            prop: 'nickName',
            rules: []
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '联系电话',
            prop: 'mobile',
            rules: []
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'el-input',
          attributes: { placeholder: '请输入', disabled: true },
          formItemAttributes: {
            label: '身份证号码',
            prop: 'idCard',
            rules: []
          }
        },
        {
          md: 12,
          isShow: true,
          name: 'slot-component',
          attributes: {},
          formItemAttributes: {
            label: '身份证',
            prop: 'idCardImg',
            rules: []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            console.log(this.formData.idCardImg)
            return this.formData.idCardImg ? (
              <el-image
                src={this.$showImgUrl(this.formData.idCardImg)}
                style="width: 120px;height:120px"
                preview-src-list={[this.$showImgUrl(this.formData.idCardImg)]}
                fit="cover"
              ></el-image>
            ) : (
              ''
            )
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'el-input',
          attributes: {
            placeholder: '请输入',
            type: 'textarea',
            disabled: this.formData.examineStatus == 'WAIT' ? false : true
          },
          formItemAttributes: {
            label: '备注',
            prop: 'examineRemark',
            rules: []
          }
        }
      ]
    }
  },
  created() {
    this.getImgList()
  },
  methods: {
    // 切换状态
    changeType(val) {
      this.$refs.pageRef.refreshList()
    },
    exportList: memberPageExport,
    // 列表请求函数
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        if (this.examineStatus) {
          pam.params.push({ param: 'a.examine_status', compare: '=', value: this.examineStatus })
        }
        return memberListService2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    getImgList() {
      request({
        url: `/dictCompany/page`,
        method: 'post',
        data: { pageNum: 1, pageSize: -1, params: [{ param: 'a.dict_type', compare: '=', value: 'WORKER_IMG' }] }
      }).then(res => {
        this.imgList = res.data.records.filter(item => {
          return (item.imgs = [])
        })
      })
    },
    // 列表导出函数
    exportList: memberPageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'idCardImg') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {' '}
              {row.idCardImg
                ? row.idCardImg
                    .split(',')
                    .map(url => (
                      <el-image
                        src={this.$showImgUrl(url)}
                        preview-src-list={[this.$showImgUrl(url)]}
                        fit="fit"
                        style="width:80px;height:80px;"
                      />
                    ))
                : null}{' '}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    guanbi() {
      this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
      this.$data.formData = this.$options.data().formData
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.examineStatus === '待审核') {
        return 'redbackground'
      } else {
        return ''
      }
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        detail: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              activeKey: 'detail',
              key: 'detail',
              label: '详情',
              triggerEvent: () => {
                this.guanbi()
                this.$nextTick(() => {
                  getMemberDetail({ userId: row.userId }).then(res => {
                    Object.assign(this.formData, res.data)
                    this.formDialogType = 1
                  })
                })
              }
            })
          }
        },
        examine: {
          btnType: 'text',
          conditions: ({ row, index, column }) => {
            return row.examineStatus == 'WAIT'
          },
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              activeKey: 'examine',
              key: 'examine',
              label: '审核',
              triggerEvent: () => {
                this.guanbi()
                this.$nextTick(() => {
                  this.workerForm.userId = row.userId
                  getMemberDetail({ userId: row.userId }).then(res => {
                    Object.assign(this.formData, res.data)
                  })
                })
              },
              closeEvent: () => {}
            })
          }
        },
        setWorker: {
          btnType: 'text',
          // prompt: '请确认是否设为工程师？',
          conditions: ({ row, index, column }) => {
            return row.examineStatus != 'WAIT'
          },
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              activeKey: 'worker',
              key: 'worker',
              label: '设为工程师',
              triggerEvent: () => {
                this.guanbi()
                this.$nextTick(() => {
                  this.workerForm.userId = row.userId
                  getWebsit({ type: 'C' }).then(res => {
                    this.websitList = res.data
                    this.dialogVisible = true
                  })
                })
              },
              closeEvent: () => {}
            })
          }
        },
        setCustomer: {
          btnType: 'text',
          prompt: '请确认是否设为客户？',
          click: ({ row, index, column }) => {
            memberInner({
              type: 'GENERAL',
              userId: row.userId
            }).then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: '设为客户成功!' })
                this.$refs.pageRef.refreshList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        },
        setService: {
          name: ({ row, index, column }) => {
            return `${row.innerr ? '取消' : '设为'}内部分销员`
          },
          btnType: 'text',
          prompt: ({ row, index, column }) => {
            return `请确认是否${row.innerr ? '取消' : '设为'}内部分销员？`
          },
          click: ({ row, index, column }) => {
            memberInsideInner({
              innerr: !row.innerr,
              userIds: row.userId
            }).then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: (row.innerr ? '取消' : '设为') + '内部分销员成功!' })
                this.$refs.pageRef.refreshList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    openForm() {
      this.formDialog = true
    },
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    audit(examineStatusEnum, removeTab) {
      memberAudit({
        examineStatusEnum,
        examineRemark: this.formData.examineRemark,
        id: this.formData.id,
        userId: this.workerForm.userId
      }).then(res => {
        this.$message({ type: 'success', message: '审核成功!' })
        this.formCancel()
        removeTab('list')
        this.$refs.pageRef.refreshList()
      })
    },
    memberInner(removeTab) {
      let workerImgs = []
      for (var i = 0; i < this.imgList.length; i++) {
        if (this.imgList[i].imgs.length == 0) {
          return this.$message({ type: 'error', message: '请上传' + this.imgList[i].dictValue + '!' })
          break
        } else {
          workerImgs.push({
            imgName: this.imgList[i].dictValue,
            imgUrl: this.imgList[i].imgs.length > 0 ? this.imgList[i].imgs[0].url : ''
          })
        }
      }
      if (!this.workerForm.websitId) {
        return this.$message({ type: 'error', message: '请选择入驻网点!' })
      } else if (!this.workerForm.name) {
        return this.$message({ type: 'error', message: '请输入姓名!' })
      } else if (!this.workerForm.workerNumber) {
        return this.$message({ type: 'error', message: '请输入师傅编号!' })
      } else if (!this.workerForm.idCard) {
        return this.$message({ type: 'error', message: '请输入身份证号码!' })
      } else if (!/^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}[\dXx]$/g.test(this.workerForm.idCard)) {
        return this.$message({ type: 'error', message: '请输入正确的身份证号码!' })
      } else if (this.fileList.length == 0) {
        return this.$message({ type: 'error', message: '请上传身份证正面照!' })
      }
      memberInner({
        type: 'WORKER',
        userId: this.workerForm.userId,
        websitId: this.workerForm.websitId,
        name: this.workerForm.name,
        idCard: this.workerForm.idCard,
        workerNumber: this.workerForm.workerNumber,
        bankAccount: this.workerForm.bankAccount,
        idCardImg: this.fileList.map(item => item.url).join(','),
        workerImgs
      }).then(res => {
        removeTab('list')
        this.dialogVisible = false
        this.$message({ type: 'success', message: '设置工程师成功!' })
        this.$refs.pageRef.refreshList()
      })
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;[memberAudit][this.formDialogType](this.formData).then(res => {
            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
            this.formCancel()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.redbackground {
  background: rgb(248, 185, 185) !important;
}
.lcsebackground {
  background: rgb(212, 245, 212) !important;
}
</style>