antissoft / lvqianmeiye_ERP

  <template>
    <div class="NCC-common-layout">
      <div class="NCC-common-layout-center">
        <!-- 筛选条件 -->
        <el-row class="NCC-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <!-- <el-col :span="6">
              <el-form-item label="门店">
                <el-select v-model="query.storeId" placeholder="请选择门店" clearable filterable>
                  <el-option v-for="store in storeOptions" :key="store.id" :label="store.dm" :value="store.id" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker 
                  v-model="query.startTime" 
                  type="datetime" 
                  value-format="yyyy-MM-dd HH:mm:ss" 
                  format="yyyy-MM-dd HH:mm:ss" 
                  placeholder="开始时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束时间">
                <el-date-picker 
                  v-model="query.endTime" 
                  type="datetime" 
                  value-format="yyyy-MM-dd HH:mm:ss" 
                  format="yyyy-MM-dd HH:mm:ss" 
                  placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品项">
                <el-select
                  v-model="query.itemId"
                  placeholder="请选择品项"
                  clearable
                  filterable
                  :style='{"width":"100%"}'>
                  <el-option
                    v-for="item in itemOptions"
                    :key="item.id"
                    :label="item.xmmc"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item label="品项分类">
                <el-select
                  v-model="query.itemCategory"
                  placeholder="请选择品项分类"
                  clearable
                  filterable
                  :style='{"width":"100%"}'>
                  <el-option
                    v-for="item in itemCategoryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>

                <el-button icon="el-icon-setting" @click="showColumnDialog = true">字段设置</el-button>

              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
  
        <!-- 统计卡片 -->
        <div class="statistics-cards" v-if="summaryData">
          <el-row :gutter="16">
            <el-col :span="6">
              <div class="statistics-card">
                <div class="card-icon">
                  <i class="el-icon-goods"></i>
                </div>
                <div class="card-content">
                  <div class="card-title">品项总数</div>
                  <div class="card-value">{{ summaryData.totalItems || 0 }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistics-card">
                <div class="card-icon">
                  <i class="el-icon-money"></i>
                </div>
                <div class="card-content">
                  <div class="card-title">开单金额合计</div>
                  <div class="card-value">¥{{ formatMoney(summaryData.totalBillingAmount) }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistics-card">
                <div class="card-icon">
                  <i class="el-icon-user"></i>
                </div>
                <div class="card-content">
                  <div class="card-title">购买人次</div>
                  <div class="card-value">{{ summaryData.totalBuyers || 0 }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="statistics-card">
                <div class="card-icon">
                  <i class="el-icon-delete"></i>
                </div>
                <div class="card-content">
                  <div class="card-title">退款金额</div>
                  <div class="card-value">¥{{ formatMoney(summaryData.totalRefundAmount) }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
  
        <!-- 数据表格 -->

        <div class="NCC-common-layout-main NCC-flex-main table-wrapper">
          <el-table 
            v-loading="listLoading" 
            :data="list" 
            border
            class="NCC-common-table"
            :height="tableHeight"
            @sort-change="handleSortChange">
            <el-table-column 
              v-for="col in visibleColumns" 
              :key="col.prop"
              :prop="col.prop" 
              :label="col.label" 
              :width="col.width"
              :min-width="col.minWidth"
              :sortable="col.sortable ? 'custom' : false"
              :align="col.align || 'left'">

              <template slot-scope="scope">

                <span v-if="col.prop === 'ItemName'" class="item-name-link" @click="handleItemNameClick(scope.row)">

                  <i class="el-icon-goods" style="margin-right: 4px; color: #409EFF;"></i>
                  {{ scope.row.ItemName || '无' }}
                </span>

                <el-tag v-else-if="col.prop === 'ItemCategory'" 
                  :type="getItemCategoryType(scope.row.ItemCategory)" 
                  size="small">
                  {{ scope.row.ItemCategory || '无' }}
                </el-tag>

                <span v-else-if="col.prop === 'BillingAmount'" class="amount-value">
                  ¥{{ formatMoney(scope.row.BillingAmount) }}
                </span>
                <span v-else-if="col.prop === 'BillingAmountRatio'">
                  {{ formatPercent(scope.row.BillingAmountRatio) }}%
                </span>
                <span v-else-if="col.prop === 'ItemRatio'">
                  {{ formatPercent(scope.row.ItemRatio) }}%
                </span>
                <span v-else-if="col.prop === 'RepeatBuyRate'">
                  {{ formatPercent(scope.row.RepeatBuyRate) }}%
                </span>
                <span v-else-if="col.prop === 'ConsumeAmount'" class="amount-paid">
                  ¥{{ formatMoney(scope.row.ConsumeAmount) }}
                </span>
                <span v-else-if="col.prop === 'ConsumeAmountRatio'">
                  {{ formatPercent(scope.row.ConsumeAmountRatio) }}%
                </span>
                <span v-else-if="col.prop === 'RefundAmount'" class="amount-debt">
                  ¥{{ formatMoney(scope.row.RefundAmount) }}
                </span>
                <span v-else-if="col.prop === 'RefundCount'">
                  {{ scope.row.RefundCount || 0 }}
                </span>

                <span v-else-if="col.prop === 'DeductAmount'" class="amount-debt">
                  ¥{{ formatMoney(scope.row.DeductAmount) }}
                </span>
                <span v-else-if="col.prop === 'DeductCount'">
                  {{ scope.row.DeductCount || 0 }}
                </span>

                <span v-else>
                  {{ scope.row[col.prop] !== null && scope.row[col.prop] !== undefined ? scope.row[col.prop] : '无' }}
                </span>

              </template>
            </el-table-column>

            <template slot="empty">
              <el-empty description="暂无数据" :image-size="120"></el-empty>
            </template>
          </el-table>

        </div>
      </div>

  
      <!-- 门店统计详情弹窗 -->
      <store-statistics-dialog
        :visible="dialogVisible"
        :item-id="currentItemId"
        :start-time="query.startTime"
        :end-time="query.endTime"
        @close="dialogVisible = false"
      />

  
      <!-- 字段设置弹窗 -->
      <el-dialog title="字段设置" :visible.sync="showColumnDialog" width="500px" append-to-body>
        <div class="column-settings">
          <div class="column-actions" style="margin-bottom: 15px;">
            <el-button size="small" @click="selectAllColumns">全选</el-button>
            <el-button size="small" @click="clearAllColumns">清空</el-button>
          </div>
          <el-checkbox-group v-model="selectedColumns">
            <el-checkbox 
              v-for="col in columnOptions" 
              :key="col.prop" 
              :label="col.prop"
              style="display: block; margin-bottom: 10px;">
              {{ col.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showColumnDialog = false">取消</el-button>
          <el-button type="primary" @click="saveColumnSettings">确定</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  import request from '@/utils/request'

  import StoreStatisticsDialog from './components/store-statistics-dialog.vue'

  
  export default {
    name: 'ItemStatistics',

    components: {
      StoreStatisticsDialog
    },

    data() {
      return {
        query: {
          storeId: undefined,
          startTime: undefined,
          endTime: undefined,

          itemId: undefined,
          itemCategory: undefined

        },
        storeOptions: [],
        itemOptions: [],

        itemCategoryOptions: [],

        summaryData: null,
        list: [],

        listLoading: false,
        dialogVisible: false,

        currentItemId: null,
        showColumnDialog: false,
        selectedColumns: [],
        sortInfo: {
          prop: '',
          order: ''
        },
        // 所有列配置
        columnOptions: [
          { prop: 'ItemNumber', label: '品项编号', width: 120, sortable: true, align: 'left' },
          { prop: 'ItemName', label: '品项名称', minWidth: 150, sortable: true, align: 'left', slot: true },

          { prop: 'ItemCategory', label: '品项分类', width: 100, sortable: true, align: 'left', slot: true },

          { prop: 'BillingAmount', label: '开单金额', width: 120, sortable: true, align: 'right', slot: true },
          { prop: 'BillingAmountRatio', label: '开单占比', width: 110, sortable: true, align: 'right', slot: true },
          { prop: 'TotalBuyers', label: '购买人数', width: 100, sortable: true, align: 'right' },
          { prop: 'ItemRatio', label: '人次占比', width: 110, sortable: true, align: 'right', slot: true },
          { prop: 'RepeatBuyers', label: '复购人数', width: 100, sortable: true, align: 'right' },
          { prop: 'RepeatBuyRate', label: '复购率', width: 100, sortable: true, align: 'right', slot: true },
          { prop: 'ConsumeAmount', label: '耗卡金额', width: 120, sortable: true, align: 'right', slot: true },
          { prop: 'ConsumeAmountRatio', label: '耗卡占比', width: 110, sortable: true, align: 'right', slot: true },
          { prop: 'ConsumePurchaseCount', label: '购买耗卡次数', width: 140, sortable: true, align: 'right' },
          { prop: 'ConsumeGiftCount', label: '赠送耗卡次数', width: 140, sortable: true, align: 'right' },
          { prop: 'ConsumeExperienceCount', label: '体验耗卡次数', width: 140, sortable: true, align: 'right' },
          { prop: 'RefundAmount', label: '退款金额', width: 120, sortable: true, align: 'right', slot: true },

          { prop: 'RefundCount', label: '退款次数', width: 100, sortable: true, align: 'right', slot: true },
          { prop: 'DeductAmount', label: '储扣金额', width: 120, sortable: true, align: 'right', slot: true },
          { prop: 'DeductCount', label: '储扣次数', width: 100, sortable: true, align: 'right', slot: true }

        ]
      }
    },
    computed: {
      // 可见的列
      visibleColumns() {
        return this.columnOptions.filter(col => this.selectedColumns.includes(col.prop))
      },
      // 计算表格高度
      tableHeight() {
        // 根据视口高度动态计算，减去筛选条件、统计卡片等的高度
        return 'calc(100vh - 400px)'

      }
    },
    created() {
      this.setDefaultTimeRange()
      this.initStoreOptions()
      this.initItemOptions()

      this.initItemCategoryOptions()

      this.initColumnSettings()

      this.search()
    },
    methods: {
      // 设置默认时间范围（本月1号到现在）
      setDefaultTimeRange() {
        const now = new Date()
        const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
        
        this.query.startTime = this.formatDateTime(firstDayOfMonth.getTime())
        this.query.endTime = this.formatDateTime(now.getTime())
      },
  
      // 初始化门店选项
      initStoreOptions() {
        request({
          url: '/api/Extend/LqMdxx',
          method: 'GET',
          data: {
            currentPage: 1,
            pageSize: 1000
          }
        }).then(res => {
          this.storeOptions = res.data.list || []
        }).catch(err => {
          console.error('获取门店列表失败:', err)
        })
      },
  
      // 初始化品项选项
      initItemOptions() {
        request({
          url: '/api/Extend/LqXmzl',
          method: 'GET',
          data: {
            currentPage: 1,
            pageSize: 1000
          }
        }).then(res => {
          this.itemOptions = res.data.list || []
        }).catch(err => {
          console.error('获取品项列表失败:', err)
        })
      },
  

      // 初始化品项分类选项（使用项目资料表 qt2 字段）
      initItemCategoryOptions() {
        request({
          url: '/api/Extend/lqxmzl/GetDistinctFieldData?fieldName=qt2',
          method: 'GET'
        }).then(res => {
          if (res.code === 200 && res.data && res.data.values) {
            this.itemCategoryOptions = res.data.values.map(item => ({
              label: item,
              value: item
            }))
          } else {
            this.itemCategoryOptions = []
          }
        }).catch(err => {
          console.error('获取品项分类列表失败:', err)
          this.itemCategoryOptions = []
        })
      },
  

      // 查询数据
      search() {
        this.listLoading = true
  
        const params = {}
  
        if (this.query.storeId) {
          params.storeId = this.query.storeId
        }
        
        if (this.query.startTime) {
          params.startTime = this.query.startTime
        }
        
        if (this.query.endTime) {
          params.endTime = this.query.endTime
        }
  
        if (this.query.itemId) {
          params.itemId = this.query.itemId
        }
  

        if (this.query.itemCategory) {
          params.itemCategory = this.query.itemCategory
        }
  

        request({
          url: '/api/Extend/lqxmzl/GetItemStatistics',
          method: 'POST',
          data: params
        }).then(res => {
          if (res.data && res.data.data) {
            this.list = res.data.data
            this.calculateSummary()
          } else {
            this.list = []
            this.summaryData = null
          }
          this.listLoading = false
        }).catch(err => {
          console.error('查询失败:', err)
          this.$message({
            type: 'error',
            message: '查询失败，请重试',
            duration: 1500
          })
          this.listLoading = false
        })
      },
  
      // 计算汇总数据
      calculateSummary() {
        if (!this.list || this.list.length === 0) {
          this.summaryData = null
          return
        }
  
        const summary = {
          totalItems: this.list.length,
          totalBillingAmount: this.list.reduce((sum, item) => sum + (item.BillingAmount || 0), 0),
          totalBuyers: this.list.reduce((sum, item) => sum + (item.TotalBuyers || 0), 0),
          totalRefundAmount: this.list.reduce((sum, item) => sum + (item.RefundAmount || 0), 0)
        }
  
        this.summaryData = summary
      },
  
      // 重置查询条件
      reset() {
        this.query = {
          storeId: undefined,
          startTime: undefined,
          endTime: undefined,

          itemId: undefined,
          itemCategory: undefined

        }
        this.setDefaultTimeRange()
        this.summaryData = null
        this.list = []
        this.search()
      },
  
      // 格式化金额
      formatMoney(amount) {
        if (!amount && amount !== 0) return '0.00'
        return Number(amount).toFixed(2)
      },
  
      // 格式化百分比
      formatPercent(ratio) {
        if (!ratio && ratio !== 0) return '0.00'
        return (Number(ratio) * 100).toFixed(2)
      },
  
      // 格式化日期时间（用于API传参）
      formatDateTime(timestamp) {
        if (!timestamp) return ''
        const date = new Date(timestamp)
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

      },
  
      // 点击品项名称
      handleItemNameClick(row) {
        if (!row.ItemId) {
          this.$message({
            type: 'warning',
            message: '品项ID不存在',
            duration: 1500
          })
          return
        }
  
        if (!this.query.startTime || !this.query.endTime) {
          this.$message({
            type: 'warning',
            message: '请先选择开始时间和结束时间',
            duration: 1500
          })
          return
        }
  
        this.currentItemId = row.ItemId
        this.dialogVisible = true

      },
  
      // 初始化列设置
      initColumnSettings() {
        // 默认显示所有列

        const allColumns = this.columnOptions.map(col => col.prop)

        // 尝试从本地存储读取
        const savedColumns = localStorage.getItem('form4_column_settings')
        if (savedColumns) {
          try {
            const columns = JSON.parse(savedColumns)
            if (Array.isArray(columns) && columns.length > 0) {

              // 合并本地存储的列和新添加的列（确保新字段也被包含）
              const newFields = ['ItemCategory', 'DeductAmount', 'DeductCount']
              const mergedColumns = [...columns]
              // 添加新字段（如果不存在）
              newFields.forEach(field => {
                if (!mergedColumns.includes(field)) {
                  mergedColumns.push(field)
                }
              })
              // 过滤掉不存在的列（兼容性处理）
              this.selectedColumns = mergedColumns.filter(col => allColumns.includes(col))
              // 如果过滤后为空，使用默认所有列
              if (this.selectedColumns.length === 0) {
                this.selectedColumns = allColumns
              }
            } else {
              this.selectedColumns = allColumns

            }
          } catch (e) {
            console.error('读取列设置失败:', e)

            this.selectedColumns = allColumns

          }

        } else {
          this.selectedColumns = allColumns

        }
      },
  
      // 全选列
      selectAllColumns() {
        this.selectedColumns = this.columnOptions.map(col => col.prop)
      },
  
      // 清空列
      clearAllColumns() {
        this.selectedColumns = []
      },
  
      // 保存列设置
      saveColumnSettings() {
        if (this.selectedColumns.length === 0) {
          this.$message({
            type: 'warning',
            message: '至少需要显示一列',
            duration: 1500
          })
          return
        }
        // 保存到本地存储
        localStorage.setItem('form4_column_settings', JSON.stringify(this.selectedColumns))
        this.showColumnDialog = false
        this.$message({
          type: 'success',
          message: '字段设置已保存',
          duration: 1500
        })
      },
  
      // 排序变化
      handleSortChange({ column, prop, order }) {
        this.sortInfo = {
          prop: prop || '',
          order: order || ''
        }
        this.sortList()
      },
  
      // 排序列表
      sortList() {
        if (!this.sortInfo.prop || !this.sortInfo.order) {
          return
        }
  
        const prop = this.sortInfo.prop
        const order = this.sortInfo.order
        const isAsc = order === 'ascending'
  

        // 字符串类型字段（如品项分类）使用字符串比较
        const stringFields = ['ItemCategory', 'ItemName', 'ItemNumber']
        const isStringField = stringFields.includes(prop)
  

        this.list.sort((a, b) => {
          let aVal = a[prop]
          let bVal = b[prop]
  

          // 字符串字段处理
          if (isStringField) {
            aVal = aVal !== null && aVal !== undefined ? String(aVal) : ''
            bVal = bVal !== null && bVal !== undefined ? String(bVal) : ''
            if (isAsc) {
              return aVal.localeCompare(bVal)
            } else {
              return bVal.localeCompare(aVal)
            }
          }
  
          // 数字字段处理

          // 处理空值
          if (aVal === null || aVal === undefined) aVal = 0
          if (bVal === null || bVal === undefined) bVal = 0
  
          // 转换为数字进行比较
          aVal = Number(aVal)
          bVal = Number(bVal)
  
          if (isNaN(aVal)) aVal = 0
          if (isNaN(bVal)) bVal = 0
  
          if (isAsc) {
            return aVal - bVal
          } else {
            return bVal - aVal
          }
        })

      },
  
      // 获取品项分类的标签类型
      getItemCategoryType(category) {
        if (!category) {
          return 'info'
        }
        if (category === '医美') {
          return 'danger'
        } else if (category === '科美') {
          return 'warning'
        } else if (category === '生美') {
          return 'success'
        }
        return 'info'

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .statistics-cards {
    margin-bottom: 20px;
  }
  
  .statistics-card {
    height: 100px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    
    .card-icon {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      background: linear-gradient(135deg, #409EFF, #67C23A);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      i {
        font-size: 24px;
        color: #fff;
      }
    }
    
    .card-content {
      flex: 1;
      
      .card-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }
      
      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
  
  .amount-value {
    color: #409EFF;
    font-weight: 500;
  }
  
  .amount-paid {
    color: #67C23A;
    font-weight: 500;
  }
  
  .amount-debt {
    color: #F56C6C;
    font-weight: 500;
  }

  
  .item-name-link {
    color: #409EFF;
    cursor: pointer;
    transition: color 0.3s;
    
    &:hover {
      color: #66b1ff;
      text-decoration: underline;
    }
  }

  
  .table-wrapper {
    height: 100%;
    overflow: hidden;
    
    ::v-deep .el-table {
      width: 100%;
    }
    
    ::v-deep .el-table__body-wrapper {
      overflow-y: auto;
      overflow-x: auto;
    }
    
    ::v-deep .el-table__header-wrapper {
      overflow-x: auto;
      overflow-y: hidden;
      // 隐藏滚动条但保持滚动功能
      scrollbar-width: none; // Firefox
      -ms-overflow-style: none; // IE 和 Edge
      
      &::-webkit-scrollbar {
        display: none; // Chrome, Safari, Opera
        width: 0;
        height: 0;
      }
    }
  }

  </style>