no message

src/views/mallManagement/settleManagElecpay/index.vue

@@ -1,35 +1,162 @@
 <template>
   <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', 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"
+      <div
+        :style="{
+          width: '100%',
+          height: activeKey == 'list' ? '100%' : '0px',
+          overflow: 'hidden'
+        }"
       >
-      </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"
+        <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"
+        >
+        </template-page>
+      </div>
+      <zj-page-container v-if="~['details'].indexOf(activeKey)">
+        <zj-page-fill>
+          <div style="box-sizing: border-box; padding: 20px">
+            <el-card size="mini">
+              <div slot="header" class="clearfix">
+                <span>基础信息</span>
+              </div>
+              <el-descriptions :column="4" border>
+                <el-descriptions-item labelStyle="width:110px" label="所属商户">{{
+                  formData.companyWechatName
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="网点名称">{{
+                  formData.websitName
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="订单单号">{{
+                  formData.settlementOrderId
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="关联工单">{{
+                  formData.workerOrderId
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="工单品牌">{{
+                  formData.brand
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="客户姓名">{{
+                  formData.userName
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="客户电话">{{
+                  formData.userMobile
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="师傅姓名">{{
+                  formData.workerName
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="师傅身份证号">{{
+                  formData.identity
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="师傅联系电话">{{
+                  formData.workerMobile
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="订单金额">{{
+                  formData.totalAmount
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="工单销售类型">{{
+                  { OWN: '自有', OUT: '外购' }[formData.settlementType]
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="支付状态">{{
+                  formData.payStatus
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="支付订单号">{{
+                  formData.orderId
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="支付时间">{{
+                  formData.payTime
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="微信流水号">{{
+                  formData.transcationId
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="分账金额">{{
+                  formData.websitAmount
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="师傅分账金额">{{
+                  formData.workerAmount
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="手续费">{{
+                  formData.workerProceAmount
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="-">-</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="创建人">{{
+                  formData.createBy
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="创建时间">{{
+                  formData.createTime
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="结算人">{{
+                  formData.settlementName
+                }}</el-descriptions-item>
+                <el-descriptions-item labelStyle="width:110px" label="结算时间">{{
+                  formData.settlementTime
+                }}</el-descriptions-item>
+              </el-descriptions>
+            </el-card>
+            <br />
+            <el-card size="mini">
+              <div slot="header" class="clearfix">
+                <span>订单信息</span>
+              </div>
+              <el-table :data="formData.settlementOrderItemList" border show-summary>
+                <el-table-column prop="goodsName" label="名称"> </el-table-column>
+                <el-table-column prop="chargeType" label="收费类型">
+                  <template slot-scope="scope">
+                    {{ { ACC: '配件', SERV: '服务', MCC: '辅材' }[scope.row.chargeType] }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="num" label="数量"> </el-table-column>
+                <el-table-column prop="normAmount" label="收费标准"> </el-table-column>
+                <el-table-column prop="totalAmount" label="订单金额"> </el-table-column>
+                <el-table-column prop="workerProceAmount" label="手续费"> </el-table-column>
+                <el-table-column prop="workerAmount" label="师傅分账金额"> </el-table-column>
+              </el-table>
+            </el-card>
+            <br />
+            <el-card size="mini">
+              <div slot="header" class="clearfix">
+                <span>分账信息</span>
+              </div>
+              <el-table :data="[formData]" border>
+                <el-table-column prop="workerAmount" label="分账金额"> </el-table-column>
+                <el-table-column prop="openId" label="分账接收方类型"> </el-table-column>
+                <el-table-column prop="openId" label="分账接收方账号"> </el-table-column>
+                <el-table-column prop="status" label="分账结果">
+                  <template slot-scope="scope">
+                    {{ { WAIT: '待结算', OK: '完成', YC: '异常结算', LINE: '线下结算' }[scope.row.status] }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="settlementTime" label="分账完成时间"> </el-table-column>
+                <el-table-column prop="ycRemark" label="分账失败原因"> </el-table-column>
+                <el-table-column prop="transcationId" label="分账明细单号"> </el-table-column>
+              </el-table>
+            </el-card>
+          </div>
+        </zj-page-fill>
+        <div style="box-sizing: border-box; padding: 10px 20px; text-align: right">
+          <el-button
+            v-if="formData.status === 'WAIT'"
+            type="primary"
+            @click="gosettlementOrderNewSettlement(formData, data.removeTab)"
+            >结算分账</el-button
+          >
+          <el-button
+            v-if="formData.status === 'YC'"
+            type="primary"
+            @click="gosettlementOrderNewLineSettlement(formData, data.removeTab)"
+            >线下结算分账</el-button
           >
-          </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>
+          <el-button @click="data.removeTab()">返回</el-button>
         </div>
-      </div>
+      </zj-page-container>
     </template>
   </zj-tab-page>
 </template>
@@ -37,7 +164,6 @@
 <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 {
   settlementOrderNewListPageV2,
   settlementOrderNewPageExport,
@@ -63,15 +189,9 @@ export default {
       },
       // 勾选选中行
       recordSelected: [],
-      /** 表单变量 */
-      formDialogType: 0,
-      formDialogTitles: ['备注'],
-      formDialog: false,
       formData: {
-        remark: ''
-      },
-      formType: 'add',
-      formVisible: false
+        settlementOrderItemList: []
+      }
     }
   },
   computed: {
@@ -127,7 +247,12 @@ export default {
       return this.operationBtn({
         details: {
           click: ({ row, index, column }) => {
-            console.log(row)
+            settlementOrderNewDetail({
+              id: row.settlementOrderId
+            }).then(res => {
+              this.formData = res.data
+              this.openForm()
+            })
           }
         },
         settle: {
@@ -137,12 +262,7 @@ export default {
           btnType: 'text',
           prompt: '是否确定结算？',
           click: ({ row, index, column }) => {
-            settlementOrderNewSettlement({
-              id: row.settlementOrderId
-            }).then(res => {
-              this.$message({ type: 'success', message: `结算成功!` })
-              this.$refs.pageRef.refreshList()
-            })
+            this.gosettlementOrderNewSettlement(row)
           }
         },
         offlineSettle: {
@@ -152,51 +272,44 @@ export default {
           btnType: 'text',
           prompt: '是否确定结算？',
           click: ({ row, index, column }) => {
-            settlementOrderNewLineSettlement({
-              id: row.settlementOrderId
-            }).then(res => {
-              this.$message({ type: 'success', message: `结算成功!` })
-              this.$refs.pageRef.refreshList()
-            })
+            this.gosettlementOrderNewLineSettlement(row)
           }
         }
       })
     },
-    openForm(type) {
+    gosettlementOrderNewLineSettlement(row, cb) {
+      settlementOrderNewLineSettlement({
+        id: row.settlementOrderId
+      }).then(res => {
+        this.$message({ type: 'success', message: `结算成功!` })
+        this.$refs.pageRef.refreshList()
+        this.$data.formData = this.$options.data().formData
+        cb && cb()
+      })
+    },
+    gosettlementOrderNewSettlement(row, cb) {
+      settlementOrderNewSettlement({
+        id: row.settlementOrderId
+      }).then(res => {
+        this.$message({ type: 'success', message: `结算成功!` })
+        this.$refs.pageRef.refreshList()
+        this.$data.formData = this.$options.data().formData
+        cb && cb()
+      })
+    },
+    openForm() {
       this.$refs.tabPage.addTab({
         // 对应显示的模块
-        activeKey: type,
+        activeKey: 'details',
         // 唯一标识
-        key: type,
+        key: 'details',
         // 页签名称
-        label: { remark: '备注' }[type],
+        label: '详情',
         // 打开时事件
-        triggerEvent: () => {
-          this.formCancel()
-          this.$nextTick(() => {
-            this.formType = type
-            this.formVisible = true
-          })
-        },
+        triggerEvent: () => {},
         // 关闭时事件
         closeEvent: () => {
-          this.formCancel()
-        }
-      })
-    },
-    formCancel() {
-      this.formVisible = false
-      this.$refs?.formRef?.resetFields()
-      this.$data.formRef = this.$options.data().formRef
-    },
-    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]}成功!` })
-            cancel('list')
-            this.$refs.pageRef.refreshList()
-          })
+          this.$data.formData = this.$options.data().formData
         }
       })
     }