zfire-newmall-admin/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="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: '',
				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.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: 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()
	},
	// 列表请求函数
	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={url} preview-src-list={[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.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,
			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>