web/src/components/statistics/over/Retail.vue

<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        />
        <el-select v-model="source" placeholder="开单来源" style="width: 100px;margin:0 10px">
          <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-input v-model="salesOrderNumber" placeholder="销售单号" style="width: 100px;margin-right: 10px"/>
        <el-input
            v-model="phoneName"
            style="width: 240px"
            placeholder="输入姓名/手机号"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <el-select
            v-model="chargeMan"
            placeholder="收费员"
            style="width: 100px;margin-left: 10px"
        >
          <el-option
              v-for="item in chargeManOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-select
            v-model="pay"
            placeholder="支付方式"
            style="width: 100px;margin-left: 10px"
        >
          <el-option
              v-for="item in payOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <div class="content-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="销售单号" align="center"></el-table-column>
          <el-table-column label="患者姓名" align="center"></el-table-column>
          <el-table-column prop="name" label="性别" align="center"/>
          <el-table-column prop="zip" label="年龄" align="center"></el-table-column>
          <el-table-column label="手机号" align="center"></el-table-column>
          <el-table-column prop="name" label="开单来源" align="center"/>
          <el-table-column prop="zip" label="患者等级" align="center"></el-table-column>
          <el-table-column prop="zip" label="整单原价" align="center"></el-table-column>
          <el-table-column label="优惠" align="center">
            <el-table-column prop="zip" label="单项改价" align="center"></el-table-column>
            <el-table-column prop="zip" label="折扣金额" align="center"></el-table-column>
            <el-table-column prop="zip" label="优惠券" align="center"></el-table-column>
            <el-table-column prop="zip" label="满减" align="center"></el-table-column>
            <el-table-column prop="zip" label="赠品" align="center"></el-table-column>
            <el-table-column prop="zip" label="积分抵扣" align="center"></el-table-column>
            <el-table-column prop="zip" label="整单改价" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="整单改价" align="center"></el-table-column>
          <el-table-column label="应收" align="center"></el-table-column>
          <el-table-column label="实收" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  }
]
const value2 = ref([])
const shortcuts = [
  {
    text: '今天',
    value() {
      const end = new Date()
      const start = new Date()
      return [start, end]
    },
  },
  {
    text: '昨天',
    value() {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      return [start, end]
    }
  },
  {
    text: '本周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '前三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
const type = ref('')
const typeOptions = [
  {
    value: '1',
    label: '中西成药',
  },
  {
    value: '2',
    label: '中药饮片',
  },
  {
    value: '3',
    label: '医疗器械',
  },
  {
    value: '4',
    label: '其他商品',
  }
]
const source = ref('')
const sourceOptions = [
  {
    value: '1',
    label: '门诊',
  },
  {
    value: '2',
    label: '住院',
  },
  {
    value: '3',
    label: '体检',

  }
]
const chargeMan = ref('')
const chargeManOptions = [
  {
    value: '1',
    label: '张三',
  },
  {
    value: '2',
    label: '李四',
  },
  {
    value: '3',
    label: '王五',
  },
  {
    value: '4',
    label: '赵六',
  }
]
const pay = ref('')
const payOptions = [
  {
    value: '1',
    label: '现金',
  },
  {
    value: '2',
    label: '微信',
  },
  {
    value: '3',
  }
]
const salesOrderNumber = ref('')
const phoneName = ref('')
</script>
<style scoped lang="scss">
.title{
  margin-bottom: 20px;
}
</style>