师傅管理页面改版

src/views/userManagement/masterManagement/index.vue

@@ -1,42 +1,52 @@
 <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>
+  <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 { 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],
+  mixins: [import_mixin, operation_mixin],
   data() {
     return {
       // 事件组合
@@ -53,14 +63,11 @@ export default {
       // 勾选选中行
       recordSelected: [],
       /** 表单变量 */
-      formDialogType: 0,
-      formDialogTitles: ["审核", "详情"],
-      formDialog: false,
       formData: {
-		type: '工程师',
-		examineRemark: ''
+        type: '工程师',
+        examineRemark: ''
       },
-	  examineStatus: ''
+      examineStatus: ''
     }
   },
   computed: {
@@ -73,7 +80,7 @@ export default {
         md: 12,
         isShow: true,
         name: 'el-select',
-		options: [{label: '待审核', value: 'WAIT'},{label: '驳回', value: 'FAIL'},{label: '通过', value: 'OK'}],
+        options: [{ label: '待审核', value: 'WAIT' }, { label: '驳回', value: 'FAIL' }, { label: '通过', value: 'OK' }],
         attributes: { placeholder: '请输入', disabled: true },
         formItemAttributes: {
           label: '审核状态',
@@ -124,18 +131,18 @@ export default {
         md: 12,
         isShow: true,
         name: 'slot-component',
-        attributes: { },
+        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>
-		  )
-		}
+        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,
@@ -160,7 +167,7 @@ export default {
         md: 24,
         isShow: true,
         name: 'el-input',
-        attributes: { placeholder: '请输入',type: "textarea", disabled: this.formData.examineStatus == 'WAIT' ? false:true },
+        attributes: { placeholder: '请输入', type: "textarea", disabled: this.formData.examineStatus == 'WAIT' ? false : true },
         formItemAttributes: {
           label: '备注',
           prop: 'examineRemark',
@@ -170,152 +177,154 @@ export default {
     }
   },
   methods: {
-	// 切换状态
-	changeType(val) {
-	  this.$refs.pageRef.refreshList()
-	},
+    // 切换状态
+    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)
-	  }
-	},
+    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>
-		          )
-		        }
-		      }
+      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;
+    // 表格操作列
+    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);
+              }
+            })
+          }
+        },
+      })
     },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
+    guanbi() {
+      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()
-          })
-        }
+    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;
-	}
+.tab {
+  padding: 20px 20px 0 20px;
+}
 </style>