供应商管理

src/views/auxiliaryFittings/supplier/index.vue

@@ -1,20 +1,20 @@
 <template>
-	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="80"
-	  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-	  :operation="operation" :exportList="exportList">
-	  <el-dialog title="" width="1200px" 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" :disabled="formDialogType==2">
-	      </zj-form-module>
-	    </zj-form-container>
-	    <div slot="footer" class="dialog-footer">
-			<el-button size="mini" @click="formCancel">取 消</el-button>
-			<el-button size="mini" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
-	    </div>
-	  </el-dialog>
-	</template-page>
+  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+    :operationColumnWidth="80" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
+    :column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
+    <el-dialog title="" width="1200px" 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" :disabled="formDialogType == 2">
+        </zj-form-module>
+      </zj-form-container>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="formCancel">取 消</el-button>
+        <el-button size="mini" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
+      </div>
+    </el-dialog>
+  </template-page>
 </template>
 
 <script>
@@ -22,23 +22,13 @@ 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, httpUrl, email } from '@/components/template/rules_verify.js'
-import { listPageV2,pageExport, getDetail, add, edit } from "@/api/auxiliaryFittings/supplier";
+import { listPageV2, pageExport, getDetail, add, edit } from "@/api/auxiliaryFittings/supplier";
+import operation_mixin from '@/components/template/operation_mixin.js'
 export default {
   components: { TemplatePage, ImageUpload },
-  mixins: [import_mixin],
+  mixins: [import_mixin, operation_mixin],
   data() {
     return {
-      // 事件组合
-      optionsEvensGroup: [
-	  	[
-	  		[
-	  			{
-	  				name: '新建',
-	  				click: this.addData
-	  			}
-	  		],
-	  	],
-	  ],
       // 表格属性
       tableAttributes: {
         // 启用勾选列
@@ -52,32 +42,44 @@ export default {
       recordSelected: [],
       /** 表单变量 */
       formDialogType: 0,
-      formDialogTitles: ["新增","编辑", "详情"],
+      formDialogTitles: ["新增", "编辑", "详情"],
       formDialog: false,
       formData: {
-		companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-		venderName: '',
-		linkName: '',
-		linkTel: '',
-		address: '',
-		zipNo: '',
-		email: '',
-		www: '',
-		telNo: '',
-		corporation: '',
-		faxNo: '',
-		licenseId: '',
-		khBank: '',
-		bankRow: '',
-		accNo: '',
-		remark: '',
-		status: 'ON',
-		venderType: 'M',
-		imageUrl: []
+        companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+        venderName: '',
+        linkName: '',
+        linkTel: '',
+        address: '',
+        zipNo: '',
+        email: '',
+        www: '',
+        telNo: '',
+        corporation: '',
+        faxNo: '',
+        licenseId: '',
+        khBank: '',
+        bankRow: '',
+        accNo: '',
+        remark: '',
+        status: 'ON',
+        venderType: 'M',
+        imageUrl: []
       }
     }
   },
   computed: {
+    // 事件组合
+    optionsEvensGroup() {
+      return [
+        [
+          [
+            this.optionsEvensAuth("add", {
+              click: this.addData
+            }),
+          ]
+        ]
+      ]
+    },
     // 更多参数
     moreParameters() {
       return []
@@ -97,21 +99,21 @@ export default {
         md: 12,
         isShow: true,
         name: 'slot-component',
-        attributes: { },
+        attributes: {},
         formItemAttributes: {
           label: '状态',
           prop: 'status',
           rules: [...required]
         },
-		render: (h, { props, onInput }) => {
-			var { value } = props
-			return (
-				<el-radio-group v-model={this.formData.status}>
-				    <el-radio disabled={this.formDialogType==2} label="ON">启用</el-radio>
-				    <el-radio disabled={this.formDialogType==2} label="OFF">禁用</el-radio>
-				</el-radio-group>
-			)
-		}
+        render: (h, { props, onInput }) => {
+          var { value } = props
+          return (
+            <el-radio-group v-model={this.formData.status}>
+              <el-radio disabled={this.formDialogType == 2} label="ON">启用</el-radio>
+              <el-radio disabled={this.formDialogType == 2} label="OFF">禁用</el-radio>
+            </el-radio-group>
+          )
+        }
       }, {
         md: 12,
         isShow: true,
@@ -140,28 +142,28 @@ export default {
         formItemAttributes: {
           label: '联系电话',
           prop: 'linkTel',
-          rules: [...required,...mobile]
+          rules: [...required, ...mobile]
         }
       }, {
         md: 12,
         isShow: true,
         name: 'slot-component',
-        attributes: { },
+        attributes: {},
         formItemAttributes: {
           label: '供应类型',
           prop: 'venderType',
           rules: [...required]
         },
-		render: (h, { props, onInput }) => {
-			var { value } = props
-			return (
-				<el-radio-group v-model={this.formData.venderType}>
-				    <el-radio disabled={this.formDialogType==2} label="M">辅材</el-radio>
-				    <el-radio disabled={this.formDialogType==2} label="P">配件</el-radio>
-					<el-radio disabled={this.formDialogType==2} label="A">辅材和配件</el-radio>
-				</el-radio-group>
-			)
-		}
+        render: (h, { props, onInput }) => {
+          var { value } = props
+          return (
+            <el-radio-group v-model={this.formData.venderType}>
+              <el-radio disabled={this.formDialogType == 2} label="M">辅材</el-radio>
+              <el-radio disabled={this.formDialogType == 2} label="P">配件</el-radio>
+              <el-radio disabled={this.formDialogType == 2} label="A">辅材和配件</el-radio>
+            </el-radio-group>
+          )
+        }
       }, {
         md: 12,
         isShow: true,
@@ -273,25 +275,25 @@ export default {
           rules: []
         }
       }, {
-		md: 24,
-		isShow: true,
-		name: 'slot-component',
-		formItemAttributes: {
-			label: '营业执照',
-			prop: 'imageUrl',
-			rules: []
-		},
-		render: (h, { props, onInput }) => {
-			var { value } = props
-			return (
-				<ImageUpload fileList={this.formData.imageUrl} limit={1} isEdit={this.formDialogType !== 2} />
-			)
-		}
-	}, {
+        md: 24,
+        isShow: true,
+        name: 'slot-component',
+        formItemAttributes: {
+          label: '营业执照',
+          prop: 'imageUrl',
+          rules: []
+        },
+        render: (h, { props, onInput }) => {
+          var { value } = props
+          return (
+            <ImageUpload fileList={this.formData.imageUrl} limit={1} isEdit={this.formDialogType !== 2} />
+          )
+        }
+      }, {
         md: 24,
         isShow: true,
         name: 'el-input',
-        attributes: { placeholder: '请输入备注内容',type: "textarea", rows: 5 },
+        attributes: { placeholder: '请输入备注内容', type: "textarea", rows: 5 },
         formItemAttributes: {
           label: '备注',
           prop: 'remark',
@@ -302,62 +304,65 @@ export default {
   },
   methods: {
     // 列表请求函数
-	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 listPageV2(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 listPageV2(pam)
+      } catch (error) {
+        console.log(error)
+      }
+    },
     // 列表导出函数
     exportList: pageExport,
     // 表格列解析渲染数据更改
     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(h, { row, index, column }) {
-      return (
-        <div class='operation-btns'>
-          <el-button type="text" onClick={() => {
+
+    operation() {
+      return this.operationBtn({
+        detail: {
+          click: ({ row, index, column }) => {
             getDetail({ id: row.venderId }).then(res => {
-              Object.assign(this.formData, res.data,{
-				  imageUrl:res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item=>({url:item})) : []
-			  })
+              Object.assign(this.formData, res.data, {
+                imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
+              })
               this.formDialogType = 2
               this.openForm()
             })
-          }}>查看</el-button>
-		  <el-button type="text" onClick={() => {
-		    getDetail({ id: row.venderId }).then(res => {
-		      Object.assign(this.formData, res.data,{
-				  imageUrl:res.data?.imageUrl?  res.data?.imageUrl?.split(",").map(item=>({url:item})) : []
-			  })
-			   console.log(this.formData)
-		      this.formDialogType = 1
-		      this.openForm()
-		    })
-		  }}>编辑</el-button>
-        </div>
-      )
+          }
+        },
+        edit: {
+          click: ({ row, index, column }) => {
+            getDetail({ id: row.venderId }).then(res => {
+              Object.assign(this.formData, res.data, {
+                imageUrl: res.data?.imageUrl ? res.data?.imageUrl?.split(",").map(item => ({ url: item })) : []
+              })
+              console.log(this.formData)
+              this.formDialogType = 1
+              this.openForm()
+            })
+          }
+        },
+      })
     },
+
     addData() {
       this.formDialogType = 0
       this.openForm()
@@ -374,9 +379,9 @@ export default {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([add, edit][this.formDialogType])({
-			  ...this.formData,
-			  imageUrl:this.formData.imageUrl.map(item=>item.url).join(",")
-		  }).then(res => {
+            ...this.formData,
+            imageUrl: this.formData.imageUrl.map(item => item.url).join(",")
+          }).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
             this.formCancel()
             this.$refs.pageRef.refreshList()
@@ -389,7 +394,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	.tab{
-		padding: 20px 20px 0 20px;
-	}
+.tab {
+  padding: 20px 20px 0 20px;
+}
 </style>