1. 新增详情功能

src/views/finance/flowingWaterMr/dialog/details.vue

@@ -0,0 +1,206 @@
+<!--
+ * @Description: 详情弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 2023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\order\orderMr\dialog\details.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    title="订单详情"
+    :visible.sync="open"
+    width="80%"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog" v-if="form">
+      <!--   基础信息   -->
+      <div class="title-class" style="margin-top: 0">基础信息</div>
+      <el-row>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">票务名称: <span>{{ form.goodsName || ''}}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">订单号: <span>{{ form.id || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">购票人姓名: <span>{{ form.memberName || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">购票人手机号: <span>{{ form.memberMobile || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">购票人身份证号: <span>{{ form.memberCardId || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">剧名名称: <span>{{ form.performName || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">票务类型: <span>{{ form.seatTypeName || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">场次: <span>{{form.performDate}}   {{ form.performTimeStart }} -- {{ form.performTimeEnd }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div style="display: flex;" class="grid-content bg-purple item-class">购票渠道: <span style="display: block;margin-left: 5px;"><dict-tag :options="dict.type.order_form_type" :value="form.source"/></span></div>
+        </el-col>
+        <el-col :span="12" v-if="form.sourceRemark">
+          <div style="display: flex;" class="grid-content bg-purple item-class">来源备注: <span style="display: block;margin-left: 5px;"> {{ form.sourceRemark }} </span></div>
+        </el-col>
+        <el-col :span="12" v-if="form.orderIdOrQrCode">
+          <div style="display: flex;" class="grid-content bg-purple item-class">核销码: <span style="display: block;margin-left: 5px;"><span>{{ form.orderIdOrQrCode }}</span></span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">购票数量: <span>{{ form.viewerNum || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">支付总额: <span>￥{{ form.orderPrice || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">下单时间: <span>{{ form.createTime || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">优惠信息: <span>暂无</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">支付时间: <span>{{ form.payTime || '' }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class" style="display: flex;">支付方式: <span style="display: block;margin-left: 5px;"><dict-tag :options="dict.type.pay_way_type" :value="form.payWay"/></span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class" style="display: flex;">订单状态: <span style="display: block;margin-left: 5px;"><dict-tag :options="dict.type.order_status_type" :value="form.status"/></span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class" style="display: flex;">订单备注: <span style="display: block;margin-left: 5px;">{{ form.remark }}</span></div>
+        </el-col>
+      </el-row>
+
+
+      <!--   观影人员信息   -->
+      <div class="title-class">观影人员信息</div>
+      <el-row>
+        <el-col :span="24">
+          <el-table ref="tables" :data="form.viewersList" border>
+            <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
+            <el-table-column label="姓名" align="center" prop="name" />
+            <el-table-column label="身份证号码" align="center" prop="idcard" />
+            <el-table-column label="核销状态" align="center">
+              <template slot-scope="scope">
+                <el-tag v-if="scope.row.qrcodeStatus == 0">未使用</el-tag>
+                <el-tag v-if="scope.row.qrcodeStatus == 1" type="success">已使用</el-tag>
+                <el-tag v-if="scope.row.qrcodeStatus == 2" type="info">过期</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="核销时间" align="center" prop="qrcodeUseTime" />
+            <el-table-column label="座位信息" align="center" prop="seatName" />
+            <el-table-column label="人员类别" align="center">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.personnel_type" :value="scope.row.identity"/>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+          </el-table>
+        </el-col>
+      </el-row>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="cancel">确定</el-button>
+    </span>
+
+  </el-dialog>
+</template>
+
+<script>
+import { getSelectById } from '@/api/order/orderMr'
+export default {
+  name: "detailsDia",
+  dicts: ['order_form_type','order_status_type','pay_way_type','personnel_type'],
+  data() {
+    return {
+      title: "编辑",
+      model: "EDIT",
+      open: false,
+      loading: false,
+      form: {
+        id: undefined,
+      },
+      performerVisible: false,
+      performerList: [],
+      refund: false,
+      dataList: []
+    };
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj, type) {
+      this.open = true;
+      this.form = {}
+      this.getSelectByIdApi(obj);
+    },
+    /** 获取详情 */
+    getSelectByIdApi(row) {
+      const id = row.id
+      getSelectById(id).then(response => {
+        this.$set(this,"form",response.data)
+        //this.form = response.data;
+      });
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+  .title-class{
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+  .item-class{
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/finance/flowingWaterMr/index.vue

@@ -78,7 +78,11 @@
 
     <el-table ref="tables" v-loading="loading" :data="dataList" border>
       <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-      <el-table-column label="订单号" align="center" prop="id" />
+      <el-table-column label="订单号" align="center" prop="id">
+        <template slot-scope="scope">
+          <span style="color: #1890ff;cursor: pointer;" @click="openDetails(scope.row)">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="金额(元)" align="center" prop="type">
         <template slot-scope="scope">
           <span>￥{{ scope.row.orderPrice }}</span>
@@ -112,7 +116,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
+    <!-- 详情 -->
+    <details-dia ref="detailsDia" @getList="getList"></details-dia>
   </div>
 </template>
 
@@ -120,9 +125,11 @@
 
 import { pageList, downOrderListXls } from '@/api/financeMr/flowingWaterMr'
 import { exportExcel } from '@/utils/exportexcel'
+import detailsDia from "./dialog/details";
 export default {
   name: "agreement",
   dicts: ['agreement_type','order_form_type','pay_way_type'],
+  components: { detailsDia },
   data() {
     return {
       // 遮罩层
@@ -250,6 +257,10 @@ export default {
           this.$message.info('您已取消导出！');
         });
     },
+    /** 详情按钮操作 */
+    openDetails(row, type) {
+      this.$refs["detailsDia"].openDialog("详情", row, type);
+    },
   }
 };
 </script>