index.vue 8.5 KB
<template>
  <div class="body_wrap">
    <div class="w80">
      <div class="common_con mb10">
        <el-form ref="queryForm" :model="state.queryParams" :rules="queryRules" label-position="left" label-width="80px">
          <el-row :gutter="20">
            <el-col v-for="item in state.queryColumns" :span="item.span">
              <el-form-item :label="item.label">
                <el-input v-if="item.type === 'input'" v-model.trim="state.queryParams[item.prop]" :placeholder="'请输入'+item.label" clearable size="small"></el-input>
                <el-select v-if="item.type === 'select'" style="width: 100%" v-model="state.queryParams[item.prop]" size="small" clearable>
                  <el-option v-for="dict in dict[item.options]" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                </el-select>
                <el-checkbox-group v-if="item.type === 'checkbox'" v-model="state.queryParams[item.prop]" size="small">
                  <el-checkbox v-for="dict in dict[item.options]" :label="dict.label" :value="dict.value"></el-checkbox>
                </el-checkbox-group>
                <el-radio-group v-if="item.type === 'radio'" v-model="state.queryParams[item.prop]" size="small">
                  <el-radio v-for="dict in dict[item.options]" :label="dict.dictLabel" :value="dict.dictValue"></el-radio>
                </el-radio-group>
                <el-date-picker v-if="item.type === 'date'"
                                v-model="state.queryParams[item.prop]"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                                size="small"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" icon="Search" v-debounceClick="()=>handleSearch()">查询</el-button>
                <el-button icon="Delete" v-debounceClick="()=>handleDelete()">清空</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="w80">
      <div class="common_con">
        <el-table :data="state.tableList" style="width: 100%" border v-loading="state.isLoading" class="own_table" height="500px">
          <el-table-column v-for="(table, index) in state.tableColumns" :key="'table'+index" :label="table.label" :prop="table.prop" :min-width="table.width">
            <template #default="scope">
              <template v-if="table.limitLength && scope.row[table.prop]">
                {{scope.row[table.prop].substring(0, table.limitLength)}}
              </template>
              <template v-else-if="table.type && table.type === 'date'">
                {{DateUtil.formatDate(scope.row[table.prop])}}
              </template>
              <template v-else-if="table.prop == 'reportProgressStr'">
                <div :class="'reportProgressStr'+scope.row.reportProgress">{{getreportProgressStr(scope.row.reportProgress)}}</div>
              </template>
              <template v-else>
                {{dictFormatter(scope.row[table.prop], table.prop)}}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="60px">
            <template #default="scope">
              <el-button type="primary" icon="Download" size="small" v-if="scope.row.reportProgress === '2'" @click="handleDownload(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
            v-show="state.total > 0"
            :total="state.total"
            :page.sync="state.queryParams.pageNum"
            :limit.sync="state.queryParams.pageSize"
            @pagination="({page, limit})=>getList(page, limit)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as api from "../../interface/api.ts";
  import DateUtil from "../../utils/date.js"
  import {downloadFileGet, downloadFilePost} from "../../utils/request.ts";
  import {switchToUrl} from "../../utils/until.ts";

  let dict = reactive({
    reportTypeList: [] as any,
    reportProgressList: [
      {
        label: '制作中',
        value: 1
      },
      {
        label: '已完成',
        value: 2
      },
      {
        label: '制作异常',
        value: 3
      }
    ] as any,
    entrustTypeList: [] as any,
  })

  const getreportProgressStr = (d) => {
    if (d==1) {
      return '制作中'
    } else if (d==2) {
      return '已完成'
    } else if (d==3) {
      return '制作异常'
    }
  }

  let queryForm = ref<FormInstance>()
  let state = reactive( {
    tableList: [],
    isLoading: false,
    total: 0,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      enterpriseName: "",
      reportProgressArray: [] as any,
      reportProgress: "",
      applicationDate: [] as any,
      beginTime: "",
      endTime: "",
    },
    queryColumns: [
      {
        type: "input",
        label: "企业名称",
        prop: "enterpriseName",
        span: 8,
      },{
        type: "date",
        label: "申请日期",
        prop: "applicationDate",
        span: 8,
      },{
        type: "checkbox",
        label: "报告进度",
        prop: "reportProgressArray",
        options: "reportProgressList",
        span: 24,
      }
    ],
    tableColumns: [
      {
        label: "企业名称",
        prop: "enterpriseName"
      },{
        label: "申请日期",
        prop: "createTime",
      },{
        label: "报告制作进度",
        prop: "reportProgressStr",
      },{
        label: "交付日期",
        prop: "deliveryTime",
        limitLength: "10"
      }
    ]
  })

  let queryRules = reactive<FormRules>({
  })

  let handleSearch = () => {
    state.queryParams.pageNum = 1
    state.queryParams.beginTime = ""
    state.queryParams.endTime = ""
    if (state.queryParams.applicationDate && state.queryParams.applicationDate.length > 1) {
      state.queryParams.beginTime = state.queryParams.applicationDate[0]
      state.queryParams.endTime = state.queryParams.applicationDate[1]
    }
    if (state.queryParams.reportProgressArray.includes("3")) {
      state.queryParams.reportProgressArray = state.queryParams.reportProgressArray.concat(['2','4','8'])
    } else {
      state.queryParams.reportProgressArray = state.queryParams.reportProgressArray.filter((item: any)=> {
        return item !== "2" && item !== "4" && item !== "8"
      })
    }
    state.queryParams.reportProgress = state.queryParams.reportProgressArray.join(",")
    getList()
  }

  const initialForm = {
    enterpriseName: "",
    orgName: "",
    applicationName: "",
    reportType: "",
    applicationDate: [],
    entrustTypeArray: [],
    reportProgressArray: [],
    beginTime: "",
    endTime: "",
    reportProgress: ''
  }

  let handleDelete = () => {
    state.queryParams = Object.assign(state.queryParams, initialForm)
    getList()
  }

  let handleExport = () => {
    let tempJson = Object.assign({}, state.queryParams)
    delete tempJson.pageNum;
    delete tempJson.pageSize
    downloadFilePost("/web/reportDataStorage/outPutFinanceExcelStatistics", tempJson)
  }

  let getList = (page = state.queryParams.pageNum, limit = state.queryParams.pageSize) => {
    state.isLoading = true
    state.queryParams.pageNum = page
    state.queryParams.pageSize = limit
    api.getInfoList({
      pageNum: state.queryParams.pageNum,
      pageSize: state.queryParams.pageSize,
      enterpriseName: state.queryParams.enterpriseName,
      reportProgress: state.queryParams.reportProgress,
      beginTime: state.queryParams.beginTime,
      endTime: state.queryParams.endTime
    }, '/web/order/list').then((res: any)=> {
      state.tableList = res.rows
      state.total = res.total
    }).finally(()=> {
      state.isLoading = false
    })
  }

  let dictFormatter = (value: any, prop: any) => {
    let lastVal = ""
    lastVal = value
    return lastVal
  }

  let handleDownload = (row: any) => {
    downloadFileGet(`/web/report/reportDownload?reportId=${row.id}&ename=${row.enterpriseName}`)
  }

  let getDict = () => {
    
  }

  onMounted(()=> {
    getList()
    getDict()
  })
</script>

<style scoped lang="scss">
.reportProgressStr1 {
  color: #edbd5c;
}
.reportProgressStr2 {
  color: #439053;
}
.reportProgressStr3 {
  color: #cb4e4e;
}
</style>