表格显示字段配置

src/api/configSetting.js

@@ -0,0 +1,11 @@
+import http from '@/utils/request'
+
+// 添加用户配置
+export function addUserConfig (params) {
+  return http.post('/admin/statFieldConfig/add', { data: params })
+}
+
+// 获取用户配置
+export function getUserConfig (params) {
+  return http.post('/admin/statFieldConfig/getFiledByStatKey', { data: params })
+}

src/components/GlobalComponents/OrderDetail.vue

@@ -73,7 +73,15 @@
       <el-tabs v-model="activeTab" type="card">
         <el-tab-pane class="block-title" label="门票信息" name="ticketCheckInfo">
           <div class="title" style="display: flex;justify-content: space-between;margin-bottom: 10px;">
-            检票景点明细
+            <div>
+              检票景点明细
+              <el-button
+                type="primary"
+                style="margin-left: 20px;"
+                @click="showColumnConfig">
+                设置显示列
+              </el-button>
+            </div>
             <el-input v-model="ticketNoSearch1" placeholder="输入票号查询"></el-input>
           </div>
           <el-table border :data="checkDetailList" :max-height="450">
@@ -109,14 +117,26 @@
                 </el-table>
               </template>
             </el-table-column>
-            <el-table-column width="160" prop="ticketNo" label="票号">
+              <el-table-column
+                v-if="isColumnVisible('ticketNo')"
+                width="160"
+                prop="ticketNo"
+                label="票号">
               <template slot-scope="scope">
                 <div class="">{{ scope.row.ticketNo }}</div>
                 <img v-if="scope.row.ticketNoImg" :src="scope.row.ticketNoImg || ''" style="width: 130px;height: 130px;" alt="">
               </template>
             </el-table-column>
-            <el-table-column width="100" prop="ticketTypeName" label="票种"> </el-table-column>
-            <el-table-column width="80" prop="price" label="单价(￥)">
+              <el-table-column
+                v-if="isColumnVisible('ticketTypeName')"
+                width="100"
+                prop="ticketTypeName"
+                label="票种"> </el-table-column>
+              <el-table-column
+                v-if="isColumnVisible('unitPrice')"
+                width="80"
+                prop="price"
+                label="单价(￥)">
               <template slot-scope="scope">
                 <div class="">{{ scope.row.checkNum ? scope.row.price / scope.row.checkNum : scope.row.price }}</div>
                 <div v-if="scope.row.discountPrice" style="color: #bbb">原价：{{ scope.row.originalPrice }}</div>
@@ -124,13 +144,25 @@
                 <div v-if="scope.row.price !== scope.row.settlementPrice" style="color: #0080ff">结算价：{{ scope.row.settlementPrice }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="80" prop="price" label="小计"></el-table-column>
-            <el-table-column width="100" prop="status" label="状态">
+              <el-table-column
+                v-if="isColumnVisible('subtotal')"
+                width="80"
+                prop="price"
+                label="小计"></el-table-column>
+              <el-table-column
+                v-if="isColumnVisible('status')"
+                width="100"
+                prop="status"
+                label="状态">
               <template slot-scope="scope">
                 <TicketStatusTag :value="scope.row.status"></TicketStatusTag>
               </template>
             </el-table-column>
-            <el-table-column width="210" prop="guestInfo" label="游客信息">
+              <el-table-column
+                v-if="isColumnVisible('guestInfo')"
+                width="210"
+                prop="guestInfo"
+                label="游客信息">
               <template slot-scope="scope">
                 <div class=""><span>姓名：</span>{{ scope.row.guestName }}</div>
                 <div class=""><span>手机号：</span>{{ scope.row.guestPhone }}</div>
@@ -138,7 +170,11 @@
                 <div class=""><span>证件号码：</span>{{ scope.row.guestIdentify }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="260" prop="ticketCheckInfo" label="检票信息">
+              <el-table-column
+                v-if="isColumnVisible('ticketCheckInfo')"
+                width="260"
+                prop="ticketCheckInfo"
+                label="检票信息">
               <template slot-scope="scope">
                 <div class=""><span>检票人数：</span>{{ scope.row.checkNum }}</div>
                 <div class=""><span>首次检票时间：</span>{{ scope.row.firstCheckTime }}</div>
@@ -146,7 +182,11 @@
                 <div class=""><span>最近一次检票设备：</span>{{ scope.row.checkerName }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="260" prop="ticketPrintInfo" label="取票信息">
+              <el-table-column
+                v-if="isColumnVisible('ticketPrintInfo')"
+                width="260"
+                prop="ticketPrintInfo"
+                label="取票信息">
               <template slot-scope="scope">
                 <div class=""><span>取票状态：</span>
                   <el-tag :type="scope.row.isPrint ? 'success' : 'info'">
@@ -158,7 +198,11 @@
                 <div class=""><span>取票自助机：</span>{{ scope.row.printTermName }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="260" prop="ticketRefundInfo" label="退票信息">
+              <el-table-column
+                v-if="isColumnVisible('ticketRefundInfo')"
+                width="260"
+                prop="ticketRefundInfo"
+                label="退票信息">
               <template slot-scope="scope">
                 <div class=""><span>退款操作人：</span>{{ scope.row.cancelAdminName }}</div>
                 <div class=""><span>退款金额：</span>{{ scope.row.cancelPrice }}</div>
@@ -167,18 +211,29 @@
                 <div class=""><span>是否强制取消：</span>{{ scope.row.isForceCancel ? '是' : '否' }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="160" prop="playDateBegin" label="游玩时间">
+              <el-table-column
+                v-if="isColumnVisible('playDate')"
+                width="160"
+                prop="playDateBegin"
+                label="游玩时间">
               <template slot-scope="scope">
                 <div v-if="scope.row.batchConfigName"><span>场次：</span>{{ scope.row.batchConfigName || '' }}</div>
                 {{ scope.row.playDateBegin || scope.row.playDateEnd ? `${scope.row.playDateBegin || ''} - ${scope.row.playDateEnd || ''}` : "无限制" }}
               </template>
             </el-table-column>
-            <el-table-column min-width="180" label="检票景点">
+              <el-table-column
+                v-if="isColumnVisible('checkScenic')"
+                min-width="180"
+                label="检票景点">
               <template slot-scope="scope">
                 {{ scope.row.ticketCheckScenicList.map(item => item.scenicName).join(',') }}
               </template>
             </el-table-column>
-            <el-table-column width="240" prop="ticketCardInfo" label="卡信息">
+              <el-table-column
+                v-if="isColumnVisible('ticketCardInfo')"
+                width="240"
+                prop="ticketCardInfo"
+                label="卡信息">
               <template slot-scope="scope" v-if="scope.row.card">
                 <div class=""><span>卡片编号：</span>{{ scope.row.card.cardNo }}</div>
                 <div class=""><span>有效时间：</span>{{ scope.row.card.validDateStart }} - {{ scope.row.card.validDateEnd }}</div>
@@ -188,7 +243,11 @@
                 <div class="" v-if="scope.row.card.status === 2"><span>挂失时间：</span>{{ scope.row.card.repealTime }}</div>
               </template>
             </el-table-column>
-            <el-table-column width="240" prop="ticketFaceInfo" label="人脸信息">
+              <el-table-column
+                v-if="isColumnVisible('ticketFaceInfo')"
+                width="240"
+                prop="ticketFaceInfo"
+                label="人脸信息">
               <template slot-scope="scope" v-if="scope.row.face">
                 <div class=""><span>有效时间：</span>{{ scope.row.face.validDateStart }} - {{ scope.row.face.validDateEnd }}</div>
                 <div class=""><span>卡片状态：</span>{{ scope.row.face.status === 0 ? '可用' : '不可用' }}</div>
@@ -246,6 +305,18 @@
             <el-table-column prop="checkTime" label="检票时间"> </el-table-column>
           </el-table>
         </el-tab-pane>
+        <el-dialog
+          title="选择显示列"
+          :visible.sync="dialogVisible"
+          append-to-body>
+          <el-checkbox-group v-model="tempSelectedColumns">
+            <el-checkbox v-for="column in fixedColumns" :key="column.value" :label="column.value">{{ column.label }}</el-checkbox>
+          </el-checkbox-group>
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="saveUserConfig">确 定</el-button>
+          </span>
+        </el-dialog>
         <el-tab-pane class="block-title" label="支付信息" name="payInfo">
           <el-form-item label="支付方式">
             {{ orderData.payChannel }}
@@ -447,8 +518,27 @@
 <script>
 import { channelList, IDENTIFY_TYPES } from '@/assets/staticData'
 import { getPayStatus } from '@/utils/index'
+import { addUserConfig, getUserConfig } from '@/api/configSetting'
 import QRCode from 'qrcode'
 
+const fixedColumns = [
+  { value: 'ticketNo', label: '票号' },
+  { value: 'ticketTypeName', label: '票种' },
+  { value: 'unitPrice', label: '单价(￥)' },
+  { value: 'subtotal', label: '小计' },
+  { value: 'status', label: '状态' },
+  { value: 'guestInfo', label: '游客信息' },
+  { value: 'ticketCheckInfo', label: '检票信息' },
+  { value: 'ticketPrintInfo', label: '取票信息' },
+  { value: 'ticketRefundInfo', label: '退票信息' },
+  { value: 'playDate', label: '游玩时间' },
+  { value: 'checkScenic', label: '检票景点' },
+  { value: 'ticketCardInfo', label: '卡信息' },
+  { value: 'ticketFaceInfo', label: '人脸信息' }
+]
+
+const STAT_KEY = 'orderDetailTicketColumns'
+
 export default {
   created () {
     this.posType = this.$localStore.get('posType')
@@ -492,6 +582,10 @@ export default {
       detailVisible: false,
       record: {},
       activeTab: 'ticketCheckInfo',
+      dialogVisible: false,
+      fixedColumns,
+      selectedColumns: fixedColumns.map(i => i.value),
+      tempSelectedColumns: fixedColumns.map(i => i.value),
       ticketNoSearch: '',
       ticketNoSearch1: '',
       ticketNoSearch2: '',
@@ -592,6 +686,7 @@ export default {
     async show (data) {
       this.orderData = data
       this.visible = true
+      this.loadUserConfig(true)
       if (data.pictureRemarks) {
         data.pictureRemarks = data.pictureRemarks.filter(i => i.url)
       }
@@ -646,6 +741,47 @@ export default {
       this.activeTab = 'ticketCheckInfo'
       this.orderData = null
     },
+    showColumnConfig () {
+      this.dialogVisible = true
+      this.loadUserConfig(false)
+    },
+    loadUserConfig (applyToTable = true) {
+      getUserConfig({ statKey: STAT_KEY }).then(config => {
+        const fields = config?.data?.fields || config?.fields || config?.data?.columns || config?.columns || config?.data || []
+        let nextSelected = []
+        if (Array.isArray(fields) && fields.length) {
+          nextSelected = fields
+            .filter(i => Number(i.isShow) === 1)
+            .map(i => i.fieldKey)
+        } else {
+          nextSelected = fixedColumns.map(i => i.value)
+        }
+        if (applyToTable) {
+          this.selectedColumns = nextSelected
+        }
+        this.tempSelectedColumns = [...nextSelected]
+      }).catch(() => {
+        const nextSelected = fixedColumns.map(i => i.value)
+        if (applyToTable) {
+          this.selectedColumns = nextSelected
+        }
+        this.tempSelectedColumns = [...nextSelected]
+      })
+    },
+    saveUserConfig () {
+      const fields = this.fixedColumns.map(item => ({
+        fieldKey: item.value,
+        fieldName: item.label,
+        isShow: this.tempSelectedColumns.includes(item.value) ? 1 : 0
+      }))
+      addUserConfig({ statKey: STAT_KEY, fields }).then(() => {
+        this.selectedColumns = [...this.tempSelectedColumns]
+        this.dialogVisible = false
+      })
+    },
+    isColumnVisible (columnKey) {
+      return this.selectedColumns.includes(columnKey)
+    },
     copySuccess () {
       this.$message.success('复制成功')
     },

src/pages/queryReport/OrderStatistic.vue

@@ -205,6 +205,12 @@
           @click="getSaleStatistic">
           搜索
         </el-button>
+        <el-button
+          :disabled="loading"
+          type="primary"
+          @click="showColumnConfig">
+          设置显示列
+        </el-button>
       </div>
     </el-form>
 
@@ -224,14 +230,17 @@
         </el-table-column>
 
         <el-table-column
+          v-if="isColumnVisible('salePrice')"
           prop="salePrice"
           label="售票金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('saleSettlementPrice')"
           prop="saleSettlementPrice"
           label="售票结算金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('saleNum')"
           prop="saleNum">
           <template
             slot="header">
@@ -241,6 +250,7 @@
         </el-table-column>
 
         <el-table-column
+          v-if="isColumnVisible('saleCheckNum')"
           prop="saleCheckNum"
           label="售票人数">
           <template
@@ -261,14 +271,17 @@
         </el-table-column> -->
 
         <el-table-column
+          v-if="isColumnVisible('cancelPrice')"
           prop="cancelPrice"
           label="退票金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('cancelSettlementPrice')"
           prop="cancelSettlementPrice"
           label="退票结算金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('cancelNum')"
           width="100"
           prop="cancelNum"
           label="退票张数">
@@ -280,6 +293,7 @@
         </el-table-column>
 
         <el-table-column
+          v-if="isColumnVisible('cancelCheckNum')"
           prop="cancelCheckNum"
           label="退票人数">
           <template
@@ -290,18 +304,22 @@
         </el-table-column>
 
         <el-table-column
+          v-if="isColumnVisible('actualPrice')"
           prop="actualPrice"
           label="实售金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('actualSettlementPrice')"
           prop="actualSettlementPrice"
           label="实售结算金额">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('actualNum')"
           prop="actualNum"
           label="实售张数">
         </el-table-column>
         <el-table-column
+          v-if="isColumnVisible('actualCheckNum')"
           prop="actualCheckNum"
           label="实售人数">
         </el-table-column>
@@ -335,6 +353,15 @@
         </el-table-column> -->
       </el-table>
     </div>
+    <el-dialog title="选择显示列" :visible.sync="dialogVisible">
+      <el-checkbox-group v-model="tempSelectedColumns">
+        <el-checkbox v-for="column in fixedColumns" :key="column.value" :label="column.value">{{ column.label }}</el-checkbox>
+      </el-checkbox-group>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveUserConfig">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -344,6 +371,7 @@ import { getOrderStatistics } from '@/api/order'
 import { exportCustomizeOrderStatistics } from '@/api/queryReport'
 import { ticketStatusDic } from '@/assets/staticData'
 import { getSystemConfigList } from '@/api/systemConfig'
+import { addUserConfig, getUserConfig } from '@/api/configSetting'
 import draggable from 'vuedraggable'
 import Tip from '@/components/Tip'
 import moment from 'moment'
@@ -361,6 +389,23 @@ const groupKeys = [
   { value: 'orderDateYear', label: '统计年份' }
 ]
 
+const fixedColumns = [
+  { value: 'salePrice', label: '售票金额' },
+  { value: 'saleSettlementPrice', label: '售票结算金额' },
+  { value: 'saleNum', label: '售票张数' },
+  { value: 'saleCheckNum', label: '售票人数' },
+  { value: 'cancelPrice', label: '退票金额' },
+  { value: 'cancelSettlementPrice', label: '退票结算金额' },
+  { value: 'cancelNum', label: '退票张数' },
+  { value: 'cancelCheckNum', label: '退票人数' },
+  { value: 'actualPrice', label: '实售金额' },
+  { value: 'actualSettlementPrice', label: '实售结算金额' },
+  { value: 'actualNum', label: '实售张数' },
+  { value: 'actualCheckNum', label: '实售人数' }
+]
+
+const STAT_KEY = 'orderSaleStatistics'
+
 export default {
   computed: {
     ticketCategoryList () {
@@ -385,6 +430,10 @@ export default {
   },
   data () {
     return {
+      dialogVisible: false,
+      selectedColumns: fixedColumns.map(i => i.value),
+      tempSelectedColumns: fixedColumns.map(i => i.value),
+      fixedColumns,
       finalGroup: [
         { value: 'ticketTypeName', label: '票种', prop: 'ticketTypeName' },
         { value: 'adminName', label: '售票员', prop: 'adminName' },
@@ -426,6 +475,7 @@ export default {
     this.getTicketTypeList()
     this.getScenicList()
     this.getSaleStatistic()
+    this.loadUserConfig()
     const res = await getSystemConfigList()
     /*
     const orderTagList = res.list.find(v => v.configKey === 'orderTagList')?.configValue || []
@@ -434,6 +484,47 @@ export default {
     this.orderTagList = res.list.find(v => v.configKey === 'orderTagList')?.configValue?.replace(/\s+/g, '')?.split(',') || []
   },
   methods: {
+    showColumnConfig () {
+      this.dialogVisible = true
+      this.loadUserConfig(false)
+    },
+    loadUserConfig (applyToTable = true) {
+      getUserConfig({ statKey: STAT_KEY }).then(config => {
+        const columns = config?.data?.columns || config?.columns || config?.data || []
+        let nextSelected = []
+        if (Array.isArray(columns) && columns.length) {
+          nextSelected = columns
+            .filter(i => Number(i.isShow) === 1)
+            .map(i => i.fieldKey)
+        } else {
+          nextSelected = fixedColumns.map(i => i.value)
+        }
+        if (applyToTable) {
+          this.selectedColumns = nextSelected
+        }
+        this.tempSelectedColumns = [...nextSelected]
+      }).catch(() => {
+        const nextSelected = fixedColumns.map(i => i.value)
+        if (applyToTable) {
+          this.selectedColumns = nextSelected
+        }
+        this.tempSelectedColumns = [...nextSelected]
+      })
+    },
+    saveUserConfig () {
+      const columns = this.fixedColumns.map(item => ({
+        fieldKey: item.value,
+        fieldName: item.label,
+        isShow: this.tempSelectedColumns.includes(item.value) ? 1 : 0
+      }))
+      addUserConfig({ statKey: STAT_KEY, fields: columns }).then(() => {
+        this.selectedColumns = [...this.tempSelectedColumns]
+        this.dialogVisible = false
+      })
+    },
+    isColumnVisible (columnKey) {
+      return this.selectedColumns.includes(columnKey)
+    },
 
     // 单元格颜色边框设置
     handleCellStyle ({ row, column, rowIndex, columnIndex }) {