zfire-newmall-admin/src/views/userManagement/masterManagement/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', 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="200" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
          :column-parsing="columnParsing" :operation="operation()">
          <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="data.label" 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>
    </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 { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import { memberListPageV2, memberPageExport, getMemberDetail, memberAudit, memberInner } from "@/api/masterManagement";
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formData: {
        type: '工程师',
        examineRemark: '',
        examineStatus:''
      },
      examineStatus: ''
    }
  },
  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-input',
        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
          return (
            <el-image src={this.formData.idCardImg} style='width: 120px;height:120px' preview-src-list={[this.formData.idCardImg]} fit="fit"></el-image>
          )
        }
      }, {
        md: 12,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', disabled: true },
        formItemAttributes: {
          label: '所属商户',
          prop: 'companyName',
          rules: []
        }
      }, {
        md: 12,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', disabled: true },
        formItemAttributes: {
          label: '入驻网点',
          prop: 'websitName',
          rules: []
        }
      }, {
        md: 24,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', type: "textarea", disabled: this.formData.examineStatus == 'WAIT' ? false : true },
        formItemAttributes: {
          label: '备注',
          prop: 'examineRemark',
          rules: []
        }
      }]
    }
  },
  methods: {
    // 切换状态
    changeType(val) {
      this.$refs.pageRef.refreshList()
    },
    // 列表请求函数
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        if (this.examineStatus) {
          pam.params.push({ "param": "b.examine_status", "compare": "=", "value": this.examineStatus })
        }
        return memberListPageV2(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    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={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />) : null}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 表格操作列
    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({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data)
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => {
              }
            })
          }
        },
        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(() => {
                  getMemberDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data)
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => {
              }
            })
          }
        },
        setService: {
          btnType: 'text',
          prompt: '请确认是否设为分销员？',
          click: ({ row, index, column }) => {
            memberInner({
              type: 'SERVICE',
              userIds: row.userId
            }).then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: '设为分销员成功!' })
                this.$refs.pageRef.refreshList()
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        },
        setCustomer: {
          btnType: 'text',
          prompt: '请确认是否设为客户？',
          click: ({ row, index, column }) => {
            memberInner({
              type: 'GENERAL',
              userIds: row.userId
            }).then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: '设为客户成功!' })
                this.$refs.pageRef.refreshList()
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        },
      })
    },
    guanbi() {
      this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
      this.$data.formData = this.$options.data().formData
    },
    audit(examineStatusEnum, removeTab) {
      memberAudit({
        examineStatusEnum,
        examineRemark: this.formData.examineRemark,
        id: this.formData.id
      }).then(res => {
        this.$message({ type: 'success', message: '审核成功!' })
        removeTab('list')
        this.$refs.pageRef.refreshList()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}
</style>