sishitongtang-crm/src/views/finance/serveDetail.vue

<template>
  <div>
    <div ref="lxHeader">
      <lx-header
        icon="md-apps"
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        text="服务明细"
      >
        <div slot="content"></div>
        <slot>
          <div style="display: flex; align-items: center">
            <el-radio-group
              v-model="datePickMode"
              size="small"
              style="margin-right: 10px"
            >
              <el-radio-button :label="0">年</el-radio-button>
              <el-radio-button :label="1">月</el-radio-button>
            </el-radio-group>
            <template v-if="datePickMode">
              <el-date-picker
                size="small"
                placeholder="请选择时间"
                style="width: 200px; margin-right: 10px"
                v-model="select.month"
                type="month"
                value-format="yyyy-MM"
                @change="datePick"
              >
              </el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                size="small"
                placeholder="请选择时间"
                style="width: 200px; margin-right: 10px"
                v-model="select.year"
                type="year"
                value-format="yyyy"
                @change="datePick"
              >
              </el-date-picker>
            </template>
            <el-select size="small" style="width: 200px;margin-right: 10px" v-model="select.product_id">
              <el-option v-for="item in products" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
            <Input
              v-model="select.keyword"
              placeholder="关键字搜索"
              style="width: 200px; margin-right: 10px"
            />
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="total = 0,(select.page = 1), getList()"
              >查询</Button
            >
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="exportServe"
              >导出服务统计</Button
            >
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :default-expand-all="false"
      :total="total"
      :list="list"
      :table-item="table"
      @pageSizeChange="(e) => (select.page_size = e)"
      @pageIndexChange="
        (e) => {
          select.page = e;
          getList();
        }
      "
    >
      <template v-slot:btns>
        <el-table-column
          fixed="right"
          label="操作"
          width="68"
          header-align="center"
          align="center"
        >
          <template v-slot:default="scope">
            <Button size="small" type="primary" @click="detail(scope)"
              >查看</Button
            >
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <serveDraw :type="1" ref="serveDraw"></serveDraw>
  </div>
</template>

<script>
import { getList as getProducts } from "@/api/product"
import { serveList, getList } from "@/api/serveDetail";
import { parseTime, getAgeByIdcard } from "@/utils";
import { download } from "@/utils/downloadRequest";
import { getAuthTypes } from "@/utils/auth"
import qs from 'qs';

import serveDraw from "@/views/finance/component/serveDraw";
export default {
  components: {
    serveDraw,
  },
  provide(){
    return {
      selectedRow:() => this.selectedRow
    }
  },
  data() {
    return {
      selectedRow:{},
      isShowDraw: false,
      isShowDetail: false,
      datePickMode: 1, //0为年1为月
      products:[],
      select: {
        page: 1,
        page_size: 10,
        keyword: "",
        year: `${new Date().getFullYear()}`,
        month: this.$moment(new Date()).format("YYYY-MM"),
        product_id:''
      },
      types: [],

      total: 0,
      list: [],
      table: [
        {
          prop: "customer.name",
          label: "客户姓名",
          width: 140,
        },
        {
          prop: "customer.idcard",
          label: "年龄",
          width: 80,
          formatter: (cell, data, value) => {
            return getAgeByIdcard(value);
          },
        },
        {
          prop: "customer.sex",
          label: "性别",
          width: 80,
        },
        {
          prop: "customer.idcard",
          label: "身份证号",
          width: 180,
        },
        {
          prop: "customer.phone",
          label: "手机号",
          width: 150,
        },
        {
          prop: "server_total",
          label: "服务次数",
          width: 120,
        },
        {
          prop: "server_time",
          label: "服务时长",
          width: 120,
        },
        {
          prop: "remark",
          label: "备注",
          minWidth: 200,
          align: "left",
        },
      ],
    };
  },
  methods: {
    async getProducts(){
      const res = await getProducts({
        page:1,
        page_size:999,
      })
      let typesId = getAuthTypes(this).map(item => item.id)
      this.products = res.data.filter(item => {
        return typesId.indexOf(item.product_type_id) !== -1
      })

      this.select.product_id = this.products[0]?.id
    },

    exportServe() {
      download(
        "/api/admin/customer/schedule_list_skus",
        "get",
        {
          start_date: this.$moment(this.select.month)
            .startOf("month")
            .format("YYYY-MM-DD"),
          end_date: this.$moment(this.select.month)
            .endOf("month")
            .format("YYYY-MM-DD"),
          page: 1,
          page_size: 9999,
          is_export: 1,
        },
        `服务统计表${this.select.month}.xls`
      );
    },

    datePick() {
      if (this.datePickMode) {
        this.select.year = "";
      } else {
        this.select.month = "";
      }
    },

    detail(scope) {
      this.selectedRow = scope.row;
      this.$refs["serveDraw"].select.order_id = scope.row.id;
      //this.$refs["serveDraw"].select.customer_id = scope.row.customer.id;
      this.$refs["serveDraw"].isShow = true;
    },
    async getList() {
      const res = await serveList(this.select);
      this.total = res.total;
      this.list = res.data;
    },
  },
  async created() {
    await this.getProducts();
    await this.getList();
  },
};
</script>

<style scoped lang="scss"></style>