cnbg_web/src/views/serviceManagement/servicesToBeReviewed/index.vue

<template>
  <basic-container>
    <div class="search-content">
      <el-form :model="searchFrom" label-width="120px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="年度">
              <el-date-picker clearable class="w100" v-model="searchFrom.year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="季度">
              <el-select v-model="searchFrom.quarter" placeholder="请选择服务类型" class="w100" clearable>
                <el-option label="第一季度" :value="1"></el-option>
                <el-option label="第二季度" :value="2"></el-option>
                <el-option label="第三季度" :value="3"></el-option>
                <el-option label="第四季度" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代表提交时间">
              <el-date-picker class="w100" clearable v-model="searchFrom.createTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="服务类型">
              <el-select v-model="searchFrom.taskTypeId" placeholder="请选择服务类型" class="w100" clearable>
                <el-option :label="item.name" :value="item.id" v-for="item in taskTypeAvailArr" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="服务包所属省份">
              <el-select v-model="searchFrom.provAbbr" placeholder="请选择省份" class="w100" clearable>
                <el-option v-for="province in abbreviationsProvincesList" :key="province" :label="province" :value="province" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产企业">
              <el-select v-model="searchFrom.mahName" placeholder="请选择省份" class="w100" clearable @change="">
                <el-option v-for="item in mahName" :key="mahNameArr" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="success" @click="clickBtn">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <vxe-table border allAlign="center" show-overflow highlight-hover-row height="1000" :loading="tableLoading" :data="tableData" :scroll-y="{ enabled: false }">
      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
      <vxe-table-column field="taskNumber" title="服务编号"></vxe-table-column>
      <vxe-table-column field="pkgName" title="执行包名称"></vxe-table-column>
      <vxe-table-column field="taskTypeName" title="服务类型" width="200"></vxe-table-column>
      <vxe-table-column field="taskScore" title="服务分值" width="100"></vxe-table-column>
      <vxe-table-column field="salesName" title="推广员姓名" width="150"></vxe-table-column>
      <vxe-table-column field="createTime" title="服务提交时间"></vxe-table-column>
      <vxe-table-column field="taskStatusName" title="审核状态" width="100"></vxe-table-column>
      <vxe-table-column field="entName" title="服务提供商"></vxe-table-column>
      <vxe-table-column field="skuName" title="服务产品"></vxe-table-column>
      <vxe-table-column field="mahName" title="所属生产企业"></vxe-table-column>
      <vxe-table-column field="provAbbr" title="所属省份"></vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="page.currentPage"
      :page-size.sync="page.pageSize"
      :total="page.total"
      :page-sizes="page.pageSizes"
      @page-change="pageChange"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>
  </basic-container>
</template>

<script>
import { getTaskV2PageApi, getTaskTypeAvailApi } from '@/api/serviceManagement/servicesToBeReviewed/index.js';
import { tableOptin } from './index.js';
import { getDictType } from '@/api/common';
import abbreviationsProvinces from '@/const/abbreviationsProvinces.js';

export default {
  data() {
    return {
      tableOptin,
      tableData: [],
      tableLoading: false,
      taskStatusArr: [],
      taskTypeAvailArr: [],
      mahNameArr: [],
      abbreviationsProvincesList: abbreviationsProvinces,
      searchFrom: {
        year: '',
        taskTypeId: '',
        quarter: '',
        createTime: '',
        provAbbr: '',
        mahName: ''
      },
      page: {
        pageSizes: [10, 50, 100, 300, 500],
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 300 // 每页显示多少条
      }
    };
  },
  async created() {
    await this.getDict();
    this.getList();
  },
  methods: {
    getDict() {
      getDictType({ type: 'task_status' }).then((res) => {
        this.taskStatusArr = res.data.data;
      });
      getDictType({ type: 'mah_name' }).then((res) => {
        this.mahNameArr = res.data.data;
      });
      getTaskTypeAvailApi().then((res) => {
        this.taskTypeAvailArr = res.data.data;
      });
    },
    async getList() {
      this.tableLoading = true;
      const obj = Object.assign(
        {
          current: this.page.currentPage,
          size: this.page.pageSize
        },
        {
          nodeId: 1,
          year: 2024,
          quarter: 4
        },
        this.searchFrom
      );
      const res = await getTaskV2PageApi(obj);
      this.tableLoading = false;
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.tableData.forEach((item) => {
          const currA = this.taskTypeAvailArr.find((itn) => itn.id === item.taskTypeId);
          const currB = this.taskStatusArr.find((itn) => itn.value === item.taskStatus);
          item.taskTypeName = currA?.name ?? '';
          item.taskStatusName = currB?.label ?? '';
        });
        this.page.total = res.data.data.total;
      }
    },
    clickBtn() {
      this.tableData = [];
      this.page.currentPage = 1;
      this.getList();
    },
    pageChange(obj) {
      console.log('obj', obj);
      this.page.currentPage = obj.currentPage;
      this.page.pageSize = obj.pageSize;
      this.getList();
    }
  }
};
</script>

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