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

<template>
	<div>
		<template-page v-if="!isShowMemberDetail" 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">
		  <el-dialog title="" width="500px" 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 size="mini" @click="formCancel">取 消</el-button>
		      <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
		    </div>
		  </el-dialog>
		<!-- 入驻网点 -->
		<el-dialog title="设为工程师" :visible.sync="dialogVisible" @close="websitList = []" width="40%" :close-on-click-modal="false" :modal-append-to-body="false">
			<el-form ref="workerForm" :model="workerForm" label-width="110px" size="small" label-position="left">
				<el-row :gutter="20">
					<el-col :span="24">
						<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="24">
						<el-form-item label="姓名" :required="true">
							<el-input v-model="workerForm.name" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<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">
							<el-input v-model="workerForm.idCard" 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="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="memberInner()">确定</el-button>
			</div>
		</el-dialog>
		</template-page>
		<div class="detail" v-if="isShowMemberDetail">
			<MemberDetail :user="queryUser" @backListFromDetail="backListFromMemberDetail" />
		</div>
	</div>
</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 { memberListPageV2,memberPageExport, memberAudit, memberInner, getWebsit } from "@/api/customerManagement";
import MemberDetail from "@/components/Mall/Member/member-detail";
import request from '@/utils/request'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage, MemberDetail, ImageUpload },
  mixins: [import_mixin,operation_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: [],
      formDialog: false,
	  dialogVisible: false,
	  	formData: {
	  		storageName: '',
	  		storageMobile: '',
	  		storageAddress: '',
	  	},
	  websitList: [],
	  workerForm: {
	  		websitId: '',
	  		userId: '',
			idCard: '',
			name: '',
			bankAccount: ''
	  },
	  queryUser: {}, // 查询
	  fileList: [],
	  imgList: []
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      
    },
	isShowMemberDetail() {
	  return this.queryUser.hasOwnProperty('userId')
	}
  },
  created(){
	  this.getImgList()
  },
  methods: {
    // 列表请求函数
    getList: memberListPageV2,
    // 列表导出函数
    exportList: memberPageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
	// 详情返回显示列表
	backListFromMemberDetail() {
	  this.queryUser = {}
	},
	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 = []
			})
		})
	},
	// 表格操作列
	operation() {
		return this.operationBtn({
			detail: {
				btnType: 'text',
				click: ({ row, index, column }) => {
					this.queryUser = row
				}
			},
			setWorker: {
				btnType: 'text',
				prompt: '请确认是否设为工程师？',
				click: ({ row, index, column }) => {
					this.workerForm.userId = row.userId
					getWebsit({type: 'C'}).then(res => {
						this.websitList = res.data
						this.dialogVisible = true
					})
				}
			},
			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);
						}
					})
				}
			},
		})
	},
    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
    },
	memberInner(){
		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 => {
			this.dialogVisible = false
			this.$message({ type: 'success', message: '设置工程师成功!' })
			this.$refs.pageRef.refreshList()
		})
	},
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ([addMember, editMember][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>
	.detail{
		padding: 20px;
		box-sizing: border-box;
	}
</style>