1. 优化

src/views/tourism/financialManagement/detailsBox/ticketOrdersDetails.vue

@@ -0,0 +1,358 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="70%"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="form-dialog-box"
+    v-loading="loading"
+    :element-loading-text="loadingText"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0)">
+      <div
+        v-loading="loading"
+        :element-loading-text="''"
+        element-loading-spinner="''"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+        <el-form :model="form" ref="form" :rules="rules" label-width="130px">
+          <div class="form-title"><span>门票订单详情</span></div>
+          <div style="display: flex;">
+            <el-form-item label="订单号：">
+              <span style="display: block; min-width: 250px;">{{ form.id }}</span>
+            </el-form-item>
+            <el-form-item label="第三方系统订单：">
+              <span style="display: block; min-width: 250px;">{{ form.trackId }}</span>
+            </el-form-item>
+            <el-form-item label="购票人：">
+              <span style="display: block; min-width: 250px;">{{ form.memberName}}</span>
+            </el-form-item>
+          </div>
+
+          <div style="display: flex;">
+            <el-form-item label="手机号：">
+              <span style="display: block; min-width: 250px;">{{ form.memberMobile }}</span>
+            </el-form-item>
+            <el-form-item label="身份证号：">
+              <span style="display: block; min-width: 250px;">{{ form.memberCardId}}</span>
+            </el-form-item>
+          </div>
+          <div style="display: flex;">
+            <el-form-item label="景区名称：">
+              <span style="display: block; min-width: 250px;">{{ form.auditoriumName }}</span>
+            </el-form-item>
+            <el-form-item label="点位名称：">
+              <span style="display: block; min-width: 250px;">{{ form.seatTypeName}}</span>
+            </el-form-item>
+          </div>
+
+          <div style="display: flex;">
+            <el-form-item label="游玩日期：">
+              <span style="display: block; min-width: 250px;">{{ form.performDate }}</span>
+            </el-form-item>
+            <el-form-item label="购票渠道：">
+              <span style="display: block; min-width: 250px;">
+                <dict-tag :options="dict.type.tourism_ticketOrders_source" :value="form.source"/>
+              </span>
+            </el-form-item>
+          </div>
+
+          <div style="display: flex;">
+            <el-form-item label="应付金额：">
+              <span style="display: block; min-width: 250px;">{{ form.orderPrice }}</span>
+            </el-form-item>
+            <el-form-item label="购票数量：">
+              <span style="display: block; min-width: 250px;">{{ form.quantity }}</span>
+            </el-form-item>
+            <el-form-item label="实付金额：">
+              <span style="display: block; min-width: 250px;">{{ form.realPrice }}</span>
+            </el-form-item>
+          </div>
+          <div style="display: flex;">
+            <el-form-item label="下单时间：">
+              <span style="display: block; min-width: 250px;">{{ form.createTime }}</span>
+            </el-form-item>
+            <el-form-item label="订单状态：">
+              <span style="display: block; min-width: 250px;">
+                <dict-tag :options="dict.type.tourism_ticketOrders_status" :value="form.status"/>
+              </span>
+            </el-form-item>
+            <el-form-item label="流水号：">
+              <span style="display: block; min-width: 250px;">{{ form.orderNum }}</span>
+            </el-form-item>
+          </div>
+
+          <div class="form-title"><span>购票信息</span></div>
+          <div v-if="form.viewersList">
+              <el-table :data="form.viewersList">
+              <el-table-column type="index" label="序号" align="center"  />
+              <el-table-column label="票种规格" align="center" key="goodsName" prop="goodsName" :show-overflow-tooltip="true" />
+              <el-table-column label="姓名" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
+              <el-table-column label="身份证号" align="center" key="idcard" prop="idcard" :show-overflow-tooltip="true" />
+              <el-table-column label="取票码" align="center" key="qrcodeNo" prop="qrcodeNo" :show-overflow-tooltip="true" />
+              <el-table-column label="核销状态" align="center" key="qrcodeStatus" prop="qrcodeStatus" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.tourism_ticketOrders_qrcodeStatus" :value="scope.row.qrcodeStatus"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="核销时间" align="center" key="qrcodeUseTime" prop="qrcodeUseTime" :show-overflow-tooltip="true" />
+            </el-table>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+      <el-button @click="cancel">关闭</el-button>
+    </span>
+    <!-- 添加或修改对话框 End -->
+  </el-dialog>
+</template>
+
+<script>
+import { 
+  getTableDeatilsByIdApi,
+ } from '@/api/CURD'
+
+export default {
+  name: "addAndEdit",
+  dicts: ['tourism_ticketOrders_qrcodeStatus','tourism_ticketOrders_source','tourism_ticketOrders_status','tourism_ticketOrders_payStatus','tourism_ticketOrders_payWay'],
+  data() {
+    return {
+      title: "",
+      model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
+      open: false,
+      loading: false,
+      loadingText: "拼命加载数据中...",
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        add: '', // 新增地址
+        details: '/order/orderInfo/detail', // 详情地址
+        edit: '', // 编辑地址
+      },
+      form: {
+        id: undefined,
+      },
+      rules: {},
+      scenicAreaProducts: [],// 景点产品关联
+    };
+  },
+  methods: {
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loadingText = "拼命加载数据中..."
+      this.loading = true
+      this.actionUrlLoading = false
+      this.model = model
+      this.formStatus = 0
+      if(model=='ADD') { // 新增
+        this.$set(this,'form',{...row,imgUrl:[]})
+        this.formStatus = 1
+      }else if(model=='EDIT') { // 新增
+        let obj = {
+          ...row,
+          imgUrl: row.imgUrl?row.imgUrl.split(','):[]
+        }
+        this.$set(this,'form',obj)
+        this.formStatus = 1
+      }else if(model=='EDITInit') { // 新增
+        await this.getTableDeatilsFun(row)
+      }
+      this.loading = false
+      this.$nextTick(()=>{
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      })
+    },
+    /** 获取详情 */
+    async getTableDeatilsFun(row) {
+      const id = row.orderId
+      this.loading = true
+      try {
+        let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
+        if(res.code == 200) {
+          let obj = {
+            ...res.data,
+            imgUrl: res.data.imgUrl?res.data.imgUrl.split(','):[],
+        }
+          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
+      }
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      if(this.$refs["form"]) {
+        this.$refs["form"].clearValidate();
+      }
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-dialog-box {
+  padding: 0 30px;
+  padding: 0 30px;
+  min-height: 50vh;
+  max-height: 65vh;
+  overflow-y: auto;
+  >div {
+    width: 100%;
+    min-height: 50vh;
+  }
+  .form-title {
+    padding: 0 0 10px 0;
+    span {
+      display: flex;
+      color: rgba(65,80,88,1);
+      font-size: 16px;
+      font-family: SourceHanSansSC;
+      font-weight: 700;
+      line-height: 23px;
+      border-left: 4px solid rgb(22, 132, 252);
+      padding-left: 10px;
+    }
+    
+  }
+  ::v-deep .ql-editor {
+    height: 400px;
+  }
+  .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;
+  }
+}
+.el-table{
+  .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;
+  }
+}
+
+.area-container {
+  min-height: 400px;
+}
+
+::v-deep .area-wrap-city.el-cascader {
+  line-height: normal;
+  .el-input {
+    cursor: pointer;
+    width: 100% !important;
+    height: 28px !important;
+    .el-input__inner {
+      display: none !important;
+    }
+    span.el-input__suffix {
+      position: inherit !important;
+      i.el-input__icon {
+        line-height: inherit;
+        margin-left: 5px;
+      }
+    }
+
+    .el-input__wrapper {
+      box-shadow: none;
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .el-cascader__tags {
+    display: none;
+  }
+}
+
+.area-city-popper {
+  .el-cascader-panel {
+    .el-scrollbar.el-cascader-menu {
+      .el-cascader-menu__wrap.el-scrollbar__wrap {
+        height: 315px;
+      }
+    }
+  }
+}
+::v-deep .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  ::v-deep .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  ::v-deep .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
+  ::v-deep .avatar {
+    width: 100px;
+    height: 100px;
+    display: block;
+  }
+</style>
+<style>
+.custom-class-box {
+  z-index: 999999 !important;
+}
+</style>

src/views/tourism/financialManagement/detailsBox/ticketRefundOrderDetails.vue

@@ -21,9 +21,9 @@
         <el-form :model="form" ref="form" :rules="rules" label-width="120px">
           <div class="form-title"><span>订单信息</span></div>
           <div style="display: flex;">
-            <el-form-item label="订单号：">
+            <!-- <el-form-item label="订单号：">
               <span style="display: block; min-width: 250px;">{{ form.orderNum }}</span>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item label="支付单号：">
               <span style="display: block; min-width: 250px;">{{ form.transactionId }}</span>
             </el-form-item>

src/views/tourism/financialManagement/ticketRefundOrder.vue

@@ -68,7 +68,11 @@
 
         <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
           <el-table-column type="index" label="序号" align="center"  />
-          <el-table-column label="订单号" align="center" key="orderNum" prop="orderNum" v-if="columns[0].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="原订单号" align="center" key="orderId" prop="orderId" v-if="columns[0].visible" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+                <span @click="handleOrderDetails(scope.row)" style="color: #1890ff;cursor: pointer;">{{ scope.row.orderId }}</span>
+              </template>
+          </el-table-column>
           <el-table-column label="退款单号" align="center" key="refundTransactionId" prop="refundTransactionId" v-if="columns[1].visible" :show-overflow-tooltip="true" />
           <el-table-column label="支付单号" align="center" key="transactionId" prop="transactionId" v-if="columns[2].visible" :show-overflow-tooltip="true" />
           <el-table-column label="购票人手机号" align="center" key="refundMobile" prop="refundMobile" v-if="columns[3].visible" :show-overflow-tooltip="true" />
@@ -124,6 +128,8 @@
     </el-row>
     <!--  详情  -->
     <detailsBox ref="detailsBox" @refresh="getList" />
+    <!--  原订单详情 -->
+    <detailsOrderBox ref="detailsOrderBox" @refresh="getList" />
   </div>
 </template>
 
@@ -134,10 +140,11 @@ import {
   updateTableApi
 } from "@/api/CURD";
 import detailsBox from "./detailsBox/ticketRefundOrderDetails.vue"
+import detailsOrderBox from "./detailsBox/ticketOrdersDetails.vue"
 export default {
   name: "User",
   dicts: ['tourism_orderRefund_status','tourism_ticketOrders_source'],
-  components: {detailsBox},
+  components: {detailsBox,detailsOrderBox},
   data() {
     return {
       title: "门票退款管理",// 通用标题
@@ -260,6 +267,11 @@ export default {
         this.$refs.detailsBox.initData(this.title + '详情',"DEATILS", row)
       }
     },
+    handleOrderDetails(row){
+        if(this.$refs.detailsBox) {
+          this.$refs.detailsOrderBox.initData(this.title + '详情', "EDITInit",{...row})
+        }
+    },
     /**    */
     refundAuditFun(row){
       if(this.$refs.detailsBox) {

src/views/tourism/orderManagement/ticketOrdersAll/detailsBox/ticketOrdersDetails.vue

@@ -37,7 +37,15 @@
               <span style="display: block; min-width: 250px;">{{ form.memberMobile }}</span>
             </el-form-item>
             <el-form-item label="身份证号：">
-              <span style="display: block; min-width: 250px;">{{ form.idcard}}</span>
+              <span style="display: block; min-width: 250px;">{{ form.memberCardId}}</span>
+            </el-form-item>
+          </div>
+          <div style="display: flex;">
+            <el-form-item label="景区名称：">
+              <span style="display: block; min-width: 250px;">{{ form.auditoriumName }}</span>
+            </el-form-item>
+            <el-form-item label="点位名称：">
+              <span style="display: block; min-width: 250px;">{{ form.seatTypeName}}</span>
             </el-form-item>
           </div>
 
@@ -81,6 +89,7 @@
           <div v-if="form.viewersList">
               <el-table :data="form.viewersList">
               <el-table-column type="index" label="序号" align="center"  />
+              <el-table-column label="票种规格" align="center" key="goodsName" prop="goodsName" :show-overflow-tooltip="true" />
               <el-table-column label="姓名" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
               <el-table-column label="身份证号" align="center" key="idcard" prop="idcard" :show-overflow-tooltip="true" />
               <el-table-column label="取票码" align="center" key="qrcodeNo" prop="qrcodeNo" :show-overflow-tooltip="true" />

src/views/tourism/orderManagement/ticketOrdersAll/ticketOrders.vue

@@ -158,7 +158,7 @@
     components: {detailsBox},
     data() {
       return {
-        title: "会员信息",// 通用标题
+        title: "门票订单",// 通用标题
         configPermi: {
           add: [''], // 新增权限
           details: ['ticketOrdersAll:ticketOrders:details'], // 详情权限