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

<template>
	<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()">
		<!-- :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>
	  <el-dialog title="" width="800px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
	    :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
	    <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
	      <zj-form-module :title="formDialogTitles[formDialogType]" 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')">审核通过</el-button>
			<el-button v-if="formData.examineStatus == 'WAIT'" size="mini" type="danger" @click="audit('FAIL')">审核驳回</el-button>
			<el-button size="mini" @click="formCancel">取 消</el-button>
	    </div>
	  </el-dialog>
	</template-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: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ["审核", "详情"],
      formDialog: false,
      formData: {
		type: '工程师',
		examineRemark: ''
      },
	  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 }) => {
					getMemberDetail({ id: row.id }).then(res => {
					  Object.assign(this.formData, res.data)
					  this.formDialogType = 1
					  this.openForm()
					})
				}
			},
			examine: {
				btnType: 'text',
				conditions: ({ row, index, column }) => {
					return row.examineStatus == 'WAIT'
				},
				click: ({ row, index, column }) => {
					getMemberDetail({ id: row.id }).then(res => {
					  Object.assign(this.formData, res.data)
					  this.formDialogType = 0
					  this.openForm()
					})
				}
			},
			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);
						}
					})
				}
			},
		})
	},
    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){
		memberAudit({ 
			examineStatusEnum,
			examineRemark: this.formData.examineRemark,
			id: this.formData.id
		}).then(res => {
			this.$message({ type: 'success', message: '审核成功!' })
			this.formCancel()
			this.$refs.pageRef.refreshList()
		})
	},
	memberInner(type){
		memberInner({
			type,
			userIds: this.formData.userId
		}).then(res => {
			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>
	.tab{
		padding: 20px 20px 0 20px;
	}
</style>