弹窗修改

src/views/mallManagement/activity/coupon_index/index.vue

@@ -1,27 +1,30 @@
 <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="1000px" 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" :bodyViewStyle="{
-            'max-height': '600px',
-            'overflow-y': 'auto'
-          }">
-        </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>
-    <selectMember v-if="showSelectMember" :memberList="formData.userList" @cancelSelectMember="showSelectMember = false"
-      @selectMemberPass="selectMemberPass" />
-    <selectGoods v-if="showSelectGoods" :goodsList="formData.goodsList" @cancelSelectGoods="showSelectGoods = false"
-      @selectGoodsPass="selectGoodsPass" />
-  </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="120px" :showPackUp="false"
+				    :form-data="formData" :form-items="formItems" :bodyViewStyle="{
+				      'max-height': '600px',
+				      'overflow-y': 'auto'
+				    }">
+				  </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>
+			<selectMember v-if="showSelectMember" :memberList="formData.userList" @cancelSelectMember="showSelectMember = false"
+			  @selectMemberPass="selectMemberPass" />
+			<selectGoods v-if="showSelectGoods" :goodsList="formData.goodsList" @cancelSelectGoods="showSelectGoods = false"
+			  @selectGoodsPass="selectGoodsPass" />
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -78,6 +81,8 @@ export default {
       // 选择会员弹窗
       showSelectMember: false,
       showSelectGoods: false,
+			formType: 'add',
+			formVisible: false,
     }
   },
   computed: {
@@ -88,7 +93,7 @@ export default {
 				[
 					this.optionsEvensAuth("add", {
 						click: () => {
-							this.addData()
+							this.openForm('add')
 						}
 					})
 				],
@@ -117,7 +122,7 @@ export default {
     },
     formItems() {
       return [{
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -128,7 +133,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 6,
         isShow: true,
         name: 'el-radio',
         options: [{ label: "满减券", value: "SATISFY" }, { label: "商品券", value: "GOODS" }],
@@ -140,7 +145,7 @@ export default {
         }
       },
       {
-        md: 24,
+        md: 12,
         isShow: true,
         name: 'el-radio',
         options: [
@@ -317,7 +322,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: this.formData.couponType == 'SATISFY',
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -328,7 +333,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -339,7 +344,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: !this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formDialogType == 2 },
@@ -349,7 +354,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -359,7 +364,7 @@ export default {
           rules: [...required]
         }
       }, {
-        md: 12,
+        md: 6,
         isShow: !this.isService,
         name: 'el-input',
         attributes: { style: "width:100%", placeholder: '请输入', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -370,7 +375,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "datetime", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -381,7 +386,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "daterange", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -392,7 +397,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'el-date-picker',
         attributes: { style: "width:100%", placeholder: '请输入', type: "daterange", "value-format": "yyyy-MM-dd HH:mm:ss", disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
@@ -403,7 +408,7 @@ export default {
         }
       },
       {
-        md: 12,
+        md: 6,
         isShow: true,
         name: 'slot-component',
         formItemAttributes: {
@@ -476,15 +481,7 @@ export default {
 			detail: {
 				btnType: 'text',
 				click: ({ row, index, column }) => {
-					getCouponDetail({ couponId: row.couponId }).then(res => {
-						Object.assign(this.formData, res.data, {
-							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
-							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
-							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-						})
-						this.formDialogType = 2
-						this.openForm()
-					})
+					this.openForm('detail',row.couponId)
 				}
 				},
 			edit: {
@@ -493,15 +490,7 @@ export default {
 					return row.releaseFlag === 'WAIT'
 				},
 				click: ({ row, index, column }) => {
-					getCouponDetail({ couponId: row.couponId }).then(res => {
-						Object.assign(this.formData, res.data, {
-							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
-							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
-							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
-						})
-						this.formDialogType = 1
-						this.openForm()
-					})
+					this.openForm('edit',row.couponId)
 				}
 			},
 			cancel: {
@@ -526,19 +515,56 @@ export default {
 			},
 		})
 	},
-    addData() {
-      this.formDialogType = 0
-      this.openForm()
-    },
-    openForm() {
-      this.formDialog = true;
+    // 打开 新增编辑
+    openForm(type, couponId) {
+    	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
+    					getCouponDetail({ couponId }).then(res => {
+    						Object.assign(this.formData, res.data, {
+    							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
+    							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
+    							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+    						})
+    					})
+    				}else{
+    					this.formDialogType = 2
+    					getCouponDetail({ couponId }).then(res => {
+    						Object.assign(this.formData, res.data, {
+    							receiveDate: res.data.obtainStartTime ? [res.data.obtainStartTime, res.data.obtainEndTime] : [],
+    							activeDate: res.data.activeStartTime ? [res.data.activeStartTime, res.data.activeEndTime] : [],
+    							imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
+    						})
+    					})
+    				}
+    			})
+    		},
+    		// 关闭时事件
+    		closeEvent: () => {
+					this.formCancel()
+    		}
+    	})
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
+			this.formVisible = false
+			this.$refs?.formRef?.resetFields()
+			this.$data.formRef = this.$options.data().formRef
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           var pam = {
@@ -551,7 +577,7 @@ export default {
           };
           ([addCoupon, editCoupon][this.formDialogType])(pam).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }

src/views/mallManagement/order/order_refund/index.vue

@@ -1,276 +1,281 @@
 <template>
-  <div class="app-container mod-order-order">
-    <!-- 筛选条件 -->
-    <div class="screen-container">
-      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
-        <el-row :gutter="20">
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="订单号" prop="orderId">
-              <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="售后编号" prop="orderRefundId">
-              <el-input v-model="screenForm.orderRefundId" placeholder="请输入售后编号"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="会员昵称" prop="userName">
-              <el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="手机号" prop="phone">
-              <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="网点名称" prop="websitId">
-              <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
-                <el-option label="全部" value=""></el-option>
-                <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-
-          <!--          <el-col :xs="24" :sm="12" :lg="6">-->
-          <!--            <el-form-item label="当前状态" prop="orderStatus">-->
-          <!--              <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
-          <!--                <el-option label="全部" value=""></el-option>-->
-          <!--                <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
-          <!--              </el-select>-->
-          <!--            </el-form-item>-->
-          <!--          </el-col>-->
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="申请时间" prop="createDate">
-              <el-date-picker
-                v-model="screenForm.createDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6">
-            <el-form-item label="处理时间" prop="examineDate">
-              <el-date-picker
-                v-model="screenForm.examineDate"
-                type="datetimerange"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-
-          <el-col :xs="24" :sm="12" :lg="6" class="tr">
-            <el-form-item label="">
-              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
-              <el-button size="small" @click="resetScreenForm">清空</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-    <div class="tabs-container order-tabs-container clearfix">
-      <div class="fl">
-        <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs">
-          <el-tab-pane label="全部" name="ALL"></el-tab-pane>
-          <el-tab-pane label="待商家处理" name="DSJCL"></el-tab-pane>
-          <el-tab-pane label="待买家处理" name="DMJCL"></el-tab-pane>
-          <el-tab-pane label="待商家收货" name="DSJSH"></el-tab-pane>
-          <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
-        </el-tabs>
-      </div>
-      <div class="fr">
-        <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
-      </div>
-    </div>
-    <div class="order-main-container">
-      <div class="table-top">
-        <el-row style="width:100%">
-          <el-col :span="6"><span class="item product">商品信息</span></el-col>
-          <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">订单金额</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">退款金额</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">维权类型/状态</span></el-col>
-          <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
-        </el-row>
-      </div>
-      <div class="order-item" v-for="(order, index) in dataList" :key="order.orderRefundId">
-        <div class="order-top">
-          <el-row>
-            <el-col :xs="24" :sm="24" :lg="20">
-              <span><b>售后编号</b>：{{order.orderRefundId}}</span>
-              <span><b>申请时间</b>：{{order.createTime}}</span>
-              <span><b>商户</b>：{{order.companyWechatName || '无'}}</span>
-              <span><b>发货状态</b>：{{order.logisticsNo ? '已发货' : '未发货'}}</span>
-            </el-col>
-            <el-col :xs="24" :sm="24" :lg="4" style="text-align: right;">
-              <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order.orderRefundId, order.remark)">订单备注</el-link>
-              <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="showDetail(index)">查看详情</el-link>
-              <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
-            </el-col>
-          </el-row>
-        </div>
-        <div class="order-content">
-          <el-row style="width:100%">
-            <el-col :span="9" style="height: 100%;">
-              <div class="col-item-pro">
-                <div v-if="order.examineStatus === 'FAIL'">
-                  <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
-                    <div class="pro-item">
-                      <div class="left">
-                        <div class="image">
-                          <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
-                        </div>
-                        <div class="main">
-                          <span>{{orderItem.goodsName}}</span>
-                          <span class="spec">{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
-                        </div>
-                      </div>
-                      <div class="right">
-                        <span>￥{{orderItem.price}}</span>
-                        <span>x{{orderItem.num}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-else>
-                  <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
-                    <div class="pro-item" v-if="orderItem.refund">
-                      <div class="left">
-                        <div class="image">
-                          <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
-                        </div>
-                        <div class="main">
-                          <span>{{orderItem.goodsName}}</span>
-                          <span class="spec" v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
-                          <span class="spec" v-else>{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
-                        </div>
-                      </div>
-                      <div class="right">
-                        <span>￥{{orderItem.price}}</span>
-                        <span>x{{orderItem.refundNum}}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div>{{ order.userName }}</div>
-                <div>{{ order.phone }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="totalprice">￥{{ order.payAmount }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="totalprice">￥{{ order.refundAmount }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div>{{order.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
-                <div>{{ order.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</div>
-              </div>
-            </el-col>
-            <el-col :span="3" style="height: 100%;">
-              <div class="col-item">
-                <div class="operate" v-if="order.orderStatus === 'DSJCL'">
-                  <div>
-                    <el-button v-if="$restrict('agree')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'OK')">同意</el-button>
-                  </div>
-                  <div>
-                    <el-button v-if="$restrict('reject')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'FAIL')">拒绝</el-button>
-                  </div>
-                  <div>
-                    <!-- toWorkOrderDetail(order.orderId) -->
-                    <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="queryWorkOrder(order.orderId)">查看工单</el-button>
-                  </div>
-                </div>
-                <div class="operate" v-if="order.orderStatus === 'DSJSH'">
-                  <div v-if="$restrict('confirmReceipt')">
-                    <el-popconfirm title="确定要收货吗？" @confirm="receiveProd(order.orderRefundId)">
-                      <el-button slot="reference" type="text" size="small">确认收货</el-button>
-                    </el-popconfirm>
-                  </div>
-                  <div v-if="order.logisticsNo && $restrict('viewLogistics')">
-                    <el-button type="text" size="small" @click="queryLogistics(order.logisticsNo)">查看物流</el-button>
-                  </div>
-                  <div>
-                    <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="toWorkOrderDetail(order.orderId)">查看工单</el-button>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-        <div class="order-remark buyer" v-if="order.buyerMsg">买家留言：{{order.buyerMsg}}</div>
-        <div class="order-remark saler" v-if="order.remark">商家备注：{{order.remark}}</div>
-      </div>
-      <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
-    </div>
-    <div class="pagination clearfix">
-      <div class="fr">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="listTotal">
-        </el-pagination>
-      </div>
-    </div>
-    <el-dialog :title="'订单备注'" :visible.sync="remarkVisible" :show-close="false" width="50%" :close-on-click-modal="false">
-      <el-input
-        type="textarea"
-        :autosize="{ minRows: 8, maxRows: 16}"
-        placeholder="请输入备注内容"
-        v-model="remark"
-        maxlength="100"
-        show-word-limit>
-      </el-input>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveRemark">保 存</el-button>
-        <el-button @click="cancelRemark">取 消</el-button>
-      </div>
-    </el-dialog>
-    <el-dialog :title="'物流信息'" :visible.sync="logisticsVisible" :show-close="false" width="80%" :close-on-click-modal="false">
-      <el-table
-        :data="logistics"
-        style="width: 100%"
-        size="mini">
-        <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
-        <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
-        <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
-        <el-table-column prop="state" label="物流状态" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="logisticsVisible = false">关 闭</el-button>
-      </div>
-    </el-dialog>
-  </div>
+	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
+		<template slot-scope="{activeKey, data}">
+			<div v-if="activeKey == 'list'" class="app-container">
+				<div class="screen-container">
+				  <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
+				    <el-row :gutter="20">
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="订单号" prop="orderId">
+				          <el-input v-model="screenForm.orderId" placeholder="请输入订单号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="售后编号" prop="orderRefundId">
+				          <el-input v-model="screenForm.orderRefundId" placeholder="请输入售后编号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="会员昵称" prop="userName">
+				          <el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
+				        </el-form-item>
+				      </el-col>
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="手机号" prop="phone">
+				          <el-input v-model="screenForm.phone" placeholder="请输入手机号"></el-input>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="网点名称" prop="websitId">
+				          <el-select v-model="screenForm.websitId" placeholder="全部" filterable>
+				            <el-option label="全部" value=""></el-option>
+				            <el-option :label="item.name" :value="item.id" v-for="(item, index) in websiteList" :key="index"></el-option>
+				          </el-select>
+				        </el-form-item>
+				      </el-col>
+				
+				      <!--          <el-col :xs="24" :sm="12" :lg="6">-->
+				      <!--            <el-form-item label="当前状态" prop="orderStatus">-->
+				      <!--              <el-select v-model="screenForm.orderStatus" placeholder="全部">-->
+				      <!--                <el-option label="全部" value=""></el-option>-->
+				      <!--                <el-option :label="item.label" :value="item.value" v-for="(item, index) in screen_status" :key="index"></el-option>-->
+				      <!--              </el-select>-->
+				      <!--            </el-form-item>-->
+				      <!--          </el-col>-->
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="申请时间" prop="createDate">
+				          <el-date-picker
+				            v-model="screenForm.createDate"
+				            type="datetimerange"
+				            value-format="yyyy-MM-dd HH:mm:ss"
+				            range-separator="至"
+				            start-placeholder="开始日期"
+				            end-placeholder="结束日期">
+				          </el-date-picker>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6">
+				        <el-form-item label="处理时间" prop="examineDate">
+				          <el-date-picker
+				            v-model="screenForm.examineDate"
+				            type="datetimerange"
+				            value-format="yyyy-MM-dd HH:mm:ss"
+				            range-separator="至"
+				            start-placeholder="开始日期"
+				            end-placeholder="结束日期">
+				          </el-date-picker>
+				        </el-form-item>
+				      </el-col>
+				
+				      <el-col :xs="24" :sm="12" :lg="6" class="tr">
+				        <el-form-item label="">
+				          <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+				          <el-button size="small" @click="resetScreenForm">清空</el-button>
+				        </el-form-item>
+				      </el-col>
+				    </el-row>
+				  </el-form>
+				</div>
+				
+				<div class="tabs-container order-tabs-container clearfix">
+				  <div class="fl">
+				    <el-tabs v-model="tabCurrent" type="card" @tab-click="changeTabs">
+				      <el-tab-pane label="全部" name="ALL"></el-tab-pane>
+				      <el-tab-pane label="待商家处理" name="DSJCL"></el-tab-pane>
+				      <el-tab-pane label="待买家处理" name="DMJCL"></el-tab-pane>
+				      <el-tab-pane label="待商家收货" name="DSJSH"></el-tab-pane>
+				      <el-tab-pane label="已完成" name="OVER"></el-tab-pane>
+				    </el-tabs>
+				  </div>
+				  <div class="fr">
+				    <el-button v-if="$restrict('exp')" size="small" type="primary" @click="handleExport">导出报表</el-button>
+				  </div>
+				</div>
+				<div class="order-main-container">
+				  <div class="table-top">
+				    <el-row style="width:100%">
+				      <el-col :span="6"><span class="item product">商品信息</span></el-col>
+				      <el-col :span="3" style="text-align: right"><span class="item">单价(元)/数量</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">买家信息</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">订单金额</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">退款金额</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">维权类型/状态</span></el-col>
+				      <el-col :span="3" style="text-align: center"><span class="item">操作</span></el-col>
+				    </el-row>
+				  </div>
+				  <div class="order-item" v-for="(order, index) in dataList" :key="order.orderRefundId">
+				    <div class="order-top">
+				      <el-row>
+				        <el-col :xs="24" :sm="24" :lg="20">
+				          <span><b>售后编号</b>：{{order.orderRefundId}}</span>
+				          <span><b>申请时间</b>：{{order.createTime}}</span>
+				          <span><b>商户</b>：{{order.companyWechatName || '无'}}</span>
+				          <span><b>发货状态</b>：{{order.logisticsNo ? '已发货' : '未发货'}}</span>
+				        </el-col>
+				        <el-col :xs="24" :sm="24" :lg="4" style="text-align: right;">
+				          <el-link type="primary" v-if="$restrict('orderNote')" :underline="false" @click="showRemark(order)">订单备注</el-link>
+				          <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="showDetail(index)">查看详情</el-link>
+				          <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
+				        </el-col>
+				      </el-row>
+				    </div>
+				    <div class="order-content">
+				      <el-row style="width:100%">
+				        <el-col :span="9" style="height: 100%;">
+				          <div class="col-item-pro">
+				            <div v-if="order.examineStatus === 'FAIL'">
+				              <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
+				                <div class="pro-item">
+				                  <div class="left">
+				                    <div class="image">
+				                      <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
+				                    </div>
+				                    <div class="main">
+				                      <span>{{orderItem.goodsName}}</span>
+				                      <span class="spec">{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
+				                    </div>
+				                  </div>
+				                  <div class="right">
+				                    <span>￥{{orderItem.price}}</span>
+				                    <span>x{{orderItem.num}}</span>
+				                  </div>
+				                </div>
+				              </div>
+				            </div>
+				            <div v-else>
+				              <div v-for="orderItem in order.orderDetails" :key="orderItem.orderDetailId">
+				                <div class="pro-item" v-if="orderItem.refund">
+				                  <div class="left">
+				                    <div class="image">
+				                      <img :src="orderItem.imgUrl" style="height:80px;width: 80px;">
+				                    </div>
+				                    <div class="main">
+				                      <span>{{orderItem.goodsName}}</span>
+				                      <span class="spec" v-if="orderItem.goodsSpecName === '默认' && orderItem.goodsSpecValue === '默认'">默认</span>
+				                      <span class="spec" v-else>{{orderItem.goodsSpecName}}-{{orderItem.goodsSpecValue}}</span>
+				                    </div>
+				                  </div>
+				                  <div class="right">
+				                    <span>￥{{orderItem.price}}</span>
+				                    <span>x{{orderItem.refundNum}}</span>
+				                  </div>
+				                </div>
+				              </div>
+				            </div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div>{{ order.userName }}</div>
+				            <div>{{ order.phone }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="totalprice">￥{{ order.payAmount }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="totalprice">￥{{ order.refundAmount }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div>{{order.refundType | REFUND_CURRENT_TYPE_FILTER}}</div>
+				            <div>{{ order.orderStatus | ORDER_REFUND_CURRENT_STATUS_FILTER }}</div>
+				          </div>
+				        </el-col>
+				        <el-col :span="3" style="height: 100%;">
+				          <div class="col-item">
+				            <div class="operate" v-if="order.orderStatus === 'DSJCL'">
+				              <div>
+				                <el-button v-if="$restrict('agree')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'OK')">同意</el-button>
+				              </div>
+				              <div>
+				                <el-button v-if="$restrict('reject')" slot="reference" type="text" size="small" @click="changeExamineStatus(order.orderRefundId,'FAIL')">拒绝</el-button>
+				              </div>
+				              <div>
+				                <!-- toWorkOrderDetail(order.orderId) -->
+				                <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="queryWorkOrder(order.orderId)">查看工单</el-button>
+				              </div>
+				            </div>
+				            <div class="operate" v-if="order.orderStatus === 'DSJSH'">
+				              <div v-if="$restrict('confirmReceipt')">
+				                <el-popconfirm title="确定要收货吗？" @confirm="receiveProd(order.orderRefundId)">
+				                  <el-button slot="reference" type="text" size="small">确认收货</el-button>
+				                </el-popconfirm>
+				              </div>
+				              <div v-if="order.logisticsNo && $restrict('viewLogistics')">
+				                <el-button type="text" size="small" @click="queryLogistics(order)">查看物流</el-button>
+				              </div>
+				              <div>
+				                <el-button type="text" size="small" v-if="order.toWorkOrder && $restrict('workOrder_detail')" @click="toWorkOrderDetail(order.orderId)">查看工单</el-button>
+				              </div>
+				            </div>
+				          </div>
+				        </el-col>
+				      </el-row>
+				    </div>
+				    <div class="order-remark buyer" v-if="order.buyerMsg">买家留言：{{order.buyerMsg}}</div>
+				    <div class="order-remark saler" v-if="order.remark">商家备注：{{order.remark}}</div>
+				  </div>
+				  <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
+				</div>
+				<div class="pagination clearfix">
+				  <div class="fr">
+				    <el-pagination
+				      @size-change="handleSizeChange"
+				      @current-change="handleCurrentChange"
+				      :current-page="currentPage"
+				      :page-sizes="[10, 20, 30, 50]"
+				      :page-size="10"
+				      layout="total, sizes, prev, pager, next, jumper"
+				      :total="listTotal">
+				    </el-pagination>
+				  </div>
+				</div>
+			</div>
+			<!-- 订单备注 -->
+			<div v-if="activeKey == 'remark'" class="app-container">
+				<el-input
+				  type="textarea"
+				  :autosize="{ minRows: 8, maxRows: 16}"
+				  placeholder="请输入备注内容"
+				  v-model="remark"
+				  maxlength="100"
+				  show-word-limit>
+				</el-input>
+				<div slot="footer" class="dialog-footer">
+				  <el-button type="primary" @click="saveRemark(data.removeTab)">保 存</el-button>
+				  <el-button @click="cancelRemark;data.removeTab()">取 消</el-button>
+				</div>
+			</div>
+			<!-- 物流信息 -->
+			<div v-if="activeKey == 'materialDetail'" class="app-container">
+				<el-table
+				  :data="logistics"
+				  style="width: 100%"
+				  size="mini">
+				  <el-table-column prop="logisticsNo" label="快递单号" align="center"></el-table-column>
+				  <el-table-column prop="comName" label="物流公司" align="center"></el-table-column>
+				  <el-table-column prop="time" label="物流时间" align="center"></el-table-column>
+				  <el-table-column prop="state" label="物流状态" align="center">
+				    <template slot-scope="scope">
+				      {{ scope.row.state | EXPRESS_CURRENT_STATE_FILTER }}
+				    </template>
+				  </el-table-column>
+				  <el-table-column prop="context" label="物流详情" align="center"></el-table-column>
+				</el-table>
+				<div slot="footer" class="dialog-footer">
+				  <el-button @click="logisticsVisible = false;data.removeTab()">关 闭</el-button>
+				</div>
+			</div>
+		</template>
+	</zj-tab-page>
 </template>
 
 <script>
@@ -305,6 +310,8 @@ export default {
       logistics: [],
       detail: {},
       websiteList: [],
+			formType: 'add',
+			formVisible: false,
     }
   },
   created() {
@@ -354,6 +361,39 @@ export default {
         this.listLoading = false;
       })
     },
+	openForm(type,order){
+		this.$refs.tabPage.addTab({
+			// 对应显示的模块
+			activeKey: type,
+			// 唯一标识
+			key: type,
+			// 页签名称
+			label: ({ remark: "订单备注", materialDetail: "查看物流" })[type],
+			// 打开时事件
+			triggerEvent: () => {
+				
+				this.$nextTick(()=>{
+					this.formType = type
+					this.formVisible = true
+					if(type == 'remark'){
+						this.remarkVisible = true
+						this.editOrderId = order.orderRefundId
+						this.remark = order.remark
+					}
+					if(type == 'materialDetail'){
+						this.logisticsVisible = true
+						getExpress({ logisticsNo: order.logisticsNo }).then(res => {
+							this.logistics = res.data
+						})
+					}
+				})
+			},
+			// 关闭时事件
+			closeEvent: () => {
+				
+			}
+		})
+	},
     // 查看详情
     queryDetail (orderRefundId) {
     },
@@ -391,22 +431,21 @@ export default {
       })
     },
 
-    showRemark(orderId, remark) {
-      this.remarkVisible = true
-      this.editOrderId = orderId
-      this.remark = remark
+    showRemark(order) {
+		this.openForm('remark',order)
     },
     cancelRemark() {
       this.remarkVisible = false
       this.editOrderId = ''
       this.remark = ''
     },
-    saveRemark() {
+    saveRemark(cancel) {
       const params = {
         orderRefundId: this.editOrderId,
         remark: this.remark
       }
       saveRefundRemark(params).then(() => {
+				cancel('list')
         this.cancelRemark();
         this.getList();
         this.$successMsg('保存成功');
@@ -429,11 +468,8 @@ export default {
       }).catch(() => {});
     },
     // 查看物流
-    queryLogistics(logisticsNo) {
-      this.logisticsVisible = true
-      getExpress({ logisticsNo }).then(res => {
-        this.logistics = res.data
-      })
+    queryLogistics(order) {
+		this.openForm('materialDetail',order)
     },
     // 查看详情
     showDetail(index) {

src/views/mallManagement/settlement/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="~['remark'].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>
@@ -48,6 +51,8 @@ export default {
       formData: {
         remark: '',
       },
+		formType: 'add',
+		formVisible: false,
     }
   },
   computed: {
@@ -60,7 +65,7 @@ export default {
         md: 24,
         isShow: true,
         name: 'el-input',
-        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100" },
+        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100",rows: 5 },
         formItemAttributes: {
           label: '备注',
           prop: 'remark',
@@ -90,7 +95,7 @@ export default {
 				click: ({ row, index, column }) => {
 					Object.assign(this.formData, row)
 					this.formDialogType = 0
-					this.openForm()
+					this.openForm('remark',row)
 				}
 			},
 			account: {
@@ -110,20 +115,39 @@ export default {
 				},
 		})
 	},
-    openForm() {
-      this.formDialog = true;
+    openForm(type) {
+      this.$refs.tabPage.addTab({
+      	// 对应显示的模块
+      	activeKey: type,
+      	// 唯一标识
+      	key: type,
+      	// 页签名称
+      	label: ({ remark: "备注" })[type],
+      	// 打开时事件
+      	triggerEvent: () => {
+      		this.formCancel()
+      		this.$nextTick(()=>{
+      			this.formType = type
+      			this.formVisible = true
+      		})
+      	},
+      	// 关闭时事件
+      	closeEvent: () => {
+			this.formCancel()
+      	}
+      })
     },
     formCancel() {
-      this.$refs.formRef.$refs.inlineForm.clearValidate()
-      this.$data.formData = this.$options.data().formData
-      this.formDialog = false
+      this.formVisible = false
+      this.$refs?.formRef?.resetFields()
+      this.$data.formRef = this.$options.data().formRef
     },
-    formConfirm() {
+    formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           ([saveRemark][this.formDialogType])(this.formData).then(res => {
             this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
-            this.formCancel()
+            cancel('list')
             this.$refs.pageRef.refreshList()
           })
         }