弹窗修改

package-lock.json

@@ -4716,9 +4716,9 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "@zjlib/element-plugins": {
-      "version": "2.13.9",
-      "resolved": "http://121.41.110.30:4873/@zjlib%2felement-plugins/-/element-plugins-2.13.9.tgz",
-      "integrity": "sha512-3OBzQqTFIaV2AYu0KHMWgdSz04bOQSO3UHMJBCx08wXjcBezzrXoODQLdfWBYQDNhE+hpZo3mfxTLcOwbANrzw==",
+      "version": "2.13.13",
+      "resolved": "http://121.41.110.30:4873/@zjlib%2felement-plugins/-/element-plugins-2.13.13.tgz",
+      "integrity": "sha512-9WH9T7kBuKc1IHSUrQ5w7RsDU4yA/Q5u3muvjS893p3J3hR9K3r/dEmcfWXKXsPCROd/+QqNqBsUEvIaiofvIQ==",
       "requires": {
         "@turf/turf": "^6.5.0",
         "@vuemap/vue-amap": "^0.1.12",

package.json

@@ -18,7 +18,7 @@
     "@turf/turf": "^6.5.0",
     "@vue-office/excel": "^1.3.0",
     "@vue/composition-api": "^1.7.1",
-    "@zjlib/element-plugins": "^2.13.9",
+    "@zjlib/element-plugins": "^2.13.13",
     "@zjlib/element-ui2": "^1.0.3",
     "axios": "0.18.1",
     "chatgpt": "^4.1.2",

src/views/mallManagement/configCenter/chargingStandard/index.vue

@@ -1,20 +1,24 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-    :operation="operation()">
-    <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="120px" :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 v-if="this.formDialogType !== 2" size="mini" @click="formConfirm" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit', 'detail'].indexOf(activeKey)">
+				<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 size="mini" @click="data.removeTab()">取 消</el-button>
+				  <el-button v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
+
 </template>
 
 <script>
@@ -57,6 +61,8 @@ export default {
       brandList: [], // 品牌列表
       mainList: [], // 一级分类列表
       smallList: [], // 二级分类列表
+	  formType: 'add',
+	  formVisible: false,
     }
   },
   computed: {
@@ -67,7 +73,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -80,7 +86,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.businessTypeList,
@@ -92,7 +98,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.brandList,
@@ -104,7 +110,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.mainList,
@@ -131,7 +137,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-select',
         options: this.smallList,
@@ -143,7 +149,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "开启", value: true }, { label: "禁用", value: false }],
@@ -200,48 +206,80 @@ export default {
 		return this.operationBtn({
 			detail: {
 				btnType: 'text',
-			  click: ({ row, index, column }) => {
-			    getMainDetail({ id: row.id }).then(res => {
-			      Object.assign(this.formData, res.data, {
-			        imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-			      })
-			      this.formDialogType = 2
-			      this.openForm()
-			    })
-			  }
+				click: ({ row, index, column }) => {
+					this.openForm('detail',row.id)
+				}
 			},
-		  edit: {
+			edit: {
 				btnType: 'text',
-		    click: ({ row, index, column }) => {
-		      getMainDetail({ id: row.id }).then(res => {
-		        Object.assign(this.formData, res.data, {
-		          imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
-		        })
-		        this.formDialogType = 1
-		        this.openForm()
-		      })
-		    }
-		  },
-		  del: {
+				click: ({ row, index, column }) => {
+					this.openForm('edit',row.id)
+				}
+			},
+			del: {
 				btnType: 'text',
 				prompt: '确定删除吗？',
-		    click: ({ row, index, column }) => {
-		      deleteMain({ id: row.id }).then(res => {
-		        this.$message({
-		          type: 'success',
-		          message: `删除成功!`,
-		        })
-		        this.$refs.pageRef.refreshList()
-		      })
-		    }
-		  }
+				click: ({ row, index, column }) => {
+					deleteMain({ id: row.id }).then(res => {
+						this.$message({
+							type: 'success',
+							message: `删除成功!`,
+						})
+						this.$refs.pageRef.refreshList()
+					})
+				}
+			}
 		})
     },
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
+	// 取消 新增编辑
+	formCancel() {
+	  this.formVisible = false
+	  this.$refs?.formRef?.resetFields()
+	  this.$data.formRef = this.$options.data().formRef
+	},
+	// 打开 新增编辑 网点表单
+	openForm(type, id) {
+	  this.$refs.tabPage.addTab({
+	    // 对应显示的模块
+	    activeKey: type,
+	    // 唯一标识
+	    key: type,
+	    // 页签名称
+	    label: ({ edit: "编辑", add: "新增", detail: "查看" })[type],
+	    // 打开时事件
+	    triggerEvent: () => {
+	      this.formCancel()
+	      this.$nextTick(()=>{
+	        this.formType = type
+	        this.formVisible = true
+	        if (type == 'add') {
+	          this.formDialogType = 0
+	        } else if(type == 'edit'){
+				this.formDialogType = 1
+				getMainDetail({ id }).then(res => {
+					Object.assign(this.formData, res.data, {
+						imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+					})
+					this.initData()
+				})
+	        }else{
+				this.formDialogType = 2
+				getMainDetail({ id }).then(res => {
+					Object.assign(this.formData, res.data, {
+						imageUrl: res.data.imageUrl ? [{ url: res.data.imageUrl }] : [],
+					})
+					this.initData()
+				})
+			}
+	      })
+	    },
+	    // 关闭时事件
+	    closeEvent: () => {
+	      
+	    }
+	  })
+	},
+    initData() {
       Promise.all([
         getTypeList(),
         getBrandList(),
@@ -274,14 +312,8 @@ export default {
             data: item
           })) || [];
         }
-        this.formDialog = true;
       })
     },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
     formConfirm() {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {

src/views/mallManagement/configCenter/slideshowConfig/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
-    :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>
-  </template-page>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
+			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
+			  :operation="operation()" :exportList="exportList">
+			</template-page>
+			<div v-if="~['add', 'edit'].indexOf(activeKey)">
+				<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 size="mini" @click="data.removeTab">取 消</el-button>
+				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -54,7 +57,9 @@ export default {
         appId: "",
         linkUrl: "",
       },
-      goodsList: []
+      goodsList: [],
+	  formType: 'add',
+	  formVisible: false,
     }
   },
   computed: {
@@ -65,7 +70,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -88,7 +93,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -98,22 +103,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 24,
-        isShow: true,
-        name: 'slot-component',
-        formItemAttributes: {
-          label: '封面图片',
-          prop: 'imgSrc',
-          rules: [...required]
-        },
-        render: (h, { props, onInput }) => {
-          var { value } = props
-          return (
-            <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
-          )
-        }
-      }, {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入' },
@@ -123,7 +113,7 @@ export default {
           rules: []
         }
       }, {
-        md: 24,
+        md: 8,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "商品链接", value: 1 }, { label: "凡科活动链接", value: 2 }, { label: "专区活动链接", value: 3 }],
@@ -140,7 +130,7 @@ export default {
           this.formData.linkUrl = ""
           // this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-select',
             options: this.goodsList,
@@ -154,7 +144,7 @@ export default {
         } else if (this.formData.type == 2) {
           this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-input',
             attributes: { placeholder: '请输入' },
@@ -164,7 +154,7 @@ export default {
               rules: []
             }
           }, {
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-input',
             attributes: { placeholder: '请输入' },
@@ -179,7 +169,7 @@ export default {
           this.formData.linkUrl = ""
           // this.formData.goodsId = ""
           return [{
-            md: 24,
+            md: 6,
             isShow: true,
             name: 'el-select',
             options: [
@@ -206,6 +196,22 @@ export default {
         }
         return []
       })()
+	  , {
+	    md: 24,
+	    isShow: true,
+	    name: 'slot-component',
+	    formItemAttributes: {
+	      label: '封面图片',
+	      prop: 'imgSrc',
+	      rules: [...required]
+	    },
+	    render: (h, { props, onInput }) => {
+	      var { value } = props
+	      return (
+	        <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
+	      )
+	    }
+	  }
       ]
     }
   },
@@ -228,13 +234,7 @@ export default {
 		  edit: {
 			btnType: 'text',
 		    click: ({ row, index, column }) => {
-		      getBannerDetail({ id: row.id }).then(res => {
-		        Object.assign(this.formData, res.data, {
-		          imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-		        })
-		        this.formDialogType = 1
-		        this.openForm()
-		      })
+				this.openForm('edit',row.id)
 		    }
 		  },
 		  del: {
@@ -264,40 +264,67 @@ export default {
 		  },
 		})
     },
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      getGoodsList({
-        pageNum: 1,
-        pageSize: -1
-      }).then(res => {
-        this.goodsList = res.data.records.map(item => ({
-          value: item.goodsId,
-          label: item.goodsName
-        }));
-        this.formDialog = true;
-      })
-    },
-    formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
-    },
-    formConfirm() {
-      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
-        if (valid) {
-          ([addBanner, editBanner][this.formDialogType])({
-            ...this.formData,
-            imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
-          }).then(res => {
-            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
-            this.$refs.pageRef.refreshList()
-          })
-        }
-      })
+	// 取消 新增编辑
+	formCancel() {
+	  this.formVisible = false
+	  this.$refs?.formRef?.resetFields()
+	  this.$data.formRef = this.$options.data().formRef
+	},
+	// 打开 新增编辑 网点表单
+	openForm(type, id) {
+	  this.$refs.tabPage.addTab({
+	    // 对应显示的模块
+	    activeKey: type,
+	    // 唯一标识
+	    key: type,
+	    // 页签名称
+	    label: ({ edit: "编辑", add: "新增" })[type],
+	    // 打开时事件
+	    triggerEvent: () => {
+	      this.formCancel()
+	      this.$nextTick(()=>{
+	        this.formType = type
+	        this.formVisible = true
+	        if (type == 'add') {
+	          this.formDialogType = 0
+	        } else {
+				this.formDialogType = 1
+	          getBannerDetail({ id }).then(res => {
+	            Object.assign(this.formData, res.data, {
+	              imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+	            })
+	            getGoodsList({
+	              pageNum: 1,
+	              pageSize: -1
+	            }).then(res => {
+	              this.goodsList = res.data.records.map(item => ({
+	                value: item.goodsId,
+	                label: item.goodsName
+	              }));
+	            })
+	          })
+	        }
+	      })
+	    },
+	    // 关闭时事件
+	    closeEvent: () => {
+	      
+	    }
+	  })
+	},
+    formConfirm(cancel) {
+		this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
+			if (valid) {
+				([addBanner, editBanner][this.formDialogType])({
+					...this.formData,
+					imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
+				}).then(res => {
+					this.$message({ type: 'success', message: `${({ edit: "编辑", add: "新增" })[this.formType]}成功!` })
+					cancel('list')
+					this.$refs.pageRef.refreshList()
+				})
+			}
+		})
     },
     batchDelete() {
       if (this.recordSelected && this.recordSelected.length > 0) {
@@ -323,4 +350,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+	
+</style>
+<style>
+	.dialog-footer{
+		padding: 0 30px;
+		display: flex;
+		justify-content: flex-end;
+	}
+</style>