zfire-newmall-admin/src/views/userManagement/masterManagement/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="260" :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>
          <el-dialog title="绑定辅助师傅" width="500px" :modal="true" :visible.sync="formDialogaddsf" :show-close="true"
            :close-on-click-modal="false" :before-close="formCancelaa">
            <zj-form-container ref="formRefaa" :form-data="formDataaa" :styleSwitch="false" :formAttributes="{
              'label-position': 'top'
            }">
              <zj-form-module title="绑定辅助师傅" label-width="100px" :showHade="false" :form-data="formDataaa"
                :form-items="formItemsaa">
              </zj-form-module>
            </zj-form-container>
            <div slot="footer">
              <el-button size="mini" @click="formCancelaa">取 消</el-button>
              <el-button size="mini" @click="queding">确 定</el-button>
            </div>
          </el-dialog>
        </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,...imageList]">
          </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 { memberSlaveBind, 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: '',
      formDialogaddsf: false,
      formDataaa: {
        slaveUserId: "",
        userId: "",
        websitId: ""
      },
      suoyoushifu: [],
			imageList: []
    }
  },
  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
          console.log(this.formData.idCardImg)
          return (
            this.formData.idCardImg ? <el-image src={this.formData.idCardImg} style='width: 120px;height:120px' preview-src-list={[this.formData.idCardImg]} fit="cover"></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: 12,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', disabled: true },
        formItemAttributes: {
          label: '银行卡',
          prop: 'bankAccount',
          rules: []
        }
      }, {
        md: 24,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', type: "textarea", disabled: this.formData.examineStatus == 'WAIT' ? false : true },
        formItemAttributes: {
          label: '备注',
          prop: 'examineRemark',
          rules: []
        }
      }]
    },
    formItemsaa() {
      return [{
        md: 24,
        isShow: true,
        name: 'el-select',
        options: this.suoyoushifu,
        attributes: { placeholder: '请输入' },
        formItemAttributes: {
          label: '选择师傅',
          prop: 'slaveUserId',
          rules: [...required]
        },
        events: {
          change: (val) => {
            if (val) {
              this.formDataaa.websitId = this.suoyoushifu.find(item => item.value == val)?.websitId
            } else {
              this.formDataaa.websitId = ""
            }
          }
        }
      },]
    }
  },
  methods: {
    queding() {
      this.$refs.formRefaa.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          memberSlaveBind(this.formDataaa).then(res => {
            this.$message({
              type: 'success',
              message: '绑定成功成功'
            })
            this.formCancelaa()
            this.$refs.pageRef.refreshList()
          })
        }
      })
    },
    formCancelaa() {
      this.$refs?.formRefaa?.$refs?.inlineForm?.clearValidate()
      this.$data.formDataaa = this.$options.data().formDataaa
      this.formDialogaddsf = false
    },
    // 切换状态
    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.imageList = []
                this.$nextTick(() => {
                  getMemberDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data)
					res.data.workerImgList.forEach(item=>{
						this.imageList.push({
							md: 12,
							isShow: true,
							name: 'slot-component',
							attributes: {},
							formItemAttributes: {
							  label: item.imgName,
							  prop: 'imgName',
							  rules: []
							},
							render: (h, { props, onInput }) => {
							  var { value } = props
							  return (
							    item.imgUrl ? <el-image src={item.imgUrl} style='width: 120px;height:120px' preview-src-list={[item.imgUrl]} fit="cover"></el-image> : ''
							  )
							}
						})
					})
                  })
                })
              },
              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',
              userId: 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',
              userId: row.userId
            }).then(res => {
              if (res.code == 200) {
                this.$message({ type: 'success', message: '设为客户成功!' })
                this.$refs.pageRef.refreshList()
              } else {
                this.$message.error(res.msg);
              }
            })
          }
        },
        bindWorker: {
          btnType: 'text',
          conditions: ({ row, index, column }) => {
            return row.examineStatus == 'OK'
          },
          click: ({ row, index, column }) => {
            memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [{"param":"b.examine_status","compare":"=","value":"OK"},{"param":"b.websit_id","compare":"=","value": row.websitId}] }).then(res => {
              this.suoyoushifu = res.data.records.filter(item => item.id != row.id).map(item => ({
                label: item.nickName,
                value: item.userId,
                websitId: item.websitId
              }))
              this.formDataaa.userId = row.userId
              this.formDialogaddsf = true
            })
          }
        },
      })
    },
    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>