integrated_traffic_vue/src/views/security_investment/plan_review/index.vue

<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="90px"
        @submit.prevent="fnResetPagination"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="计划名称" prop="KEYWORDS">
              <el-input v-model="searchForm.KEYWORDS"
                        placeholder="请输入计划名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计划年份" prop="PLAN_YEAR">
              <el-select v-model="searchForm.PLAN_YEAR">
                <el-option
                  v-for="item in yearList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计划周期" prop="PLAN_PERIOD">
              <el-select v-model="searchForm.PLAN_PERIOD">
                <el-option
                  v-for="item in planPeriodList"
                  :key="item.ID"
                  :value="item.ID"
                  :label="item.NAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="STATUS">
              <el-select v-model="searchForm.STATUS">
                <el-option
                  v-for="item in statusList"
                  :key="item.ID"
                  :value="item.ID"
                  :label="item.NAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPagination">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        v-model:pagination="pagination"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="PLAN_NAME" label="计划名称" />
        <el-table-column prop="PLAN_YEAR" label="计划年份" width="80" />
        <el-table-column prop="PLAN_PERIOD" label="计划周期" />
        <el-table-column prop="INFO_COUNT" label="涉及费用项数" width="100" />
        <el-table-column prop="TOTAL_AMOUNT" label="总金额" width="100" />
        <el-table-column prop="CREATOR" label="编制人" />
        <el-table-column label="审核人">
          <template #default="{ row }">
            <span v-if="row.STATUS !== 0">{{ row.OPERATOR }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template #default="{ row }">
            {{ translationStatus(row.STATUS, statusList) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button
              v-if="row.STATUS === 0"
              type="primary"
              text
              link
              @click="fnReview(row.SAFETYINVESTMENTPLAN_ID)"
            >
              审核
            </el-button>
          </template>
        </el-table-column>
      </layout-table>
    </layout-card>
    <view-info
      v-model:visible="data.reviewDialog.visible"
      :info="data.reviewDialog.info"
      type="review"
      @get-data="fnResetPagination"
    />
  </div>
</template>

<script setup>
import { serialNumber, translationStatus } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import { getPlanList, getPlanView } from "@/request/security_investment.js";
import ViewInfo from "../plan/components/view.vue";
import { reactive } from "vue";

const yearList = (() => {
  const year = new Date().getFullYear();
  const arr = [];
  for (let i = 2021; i <= year + 1; i++) {
    arr.push(i);
  }
  return arr;
})();
const planPeriodList = [
  { NAME: "季度计划1", ID: "季度计划1" },
  { NAME: "季度计划2", ID: "季度计划2" },
  { NAME: "季度计划3", ID: "季度计划3" },
  { NAME: "季度计划4", ID: "季度计划4" },
];
const statusList = [
  { NAME: "待审核", ID: 0 },
  { NAME: "已归档", ID: 1 },
  { NAME: "已打回", ID: -1 },
];
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getPlanList);
const data = reactive({
  reviewDialog: {
    visible: false,
    info: {},
  },
});
const fnReview = async (SAFETYINVESTMENTPLAN_ID) => {
  const resData = await getPlanView({ SAFETYINVESTMENTPLAN_ID });
  data.reviewDialog.info = resData.pd;
  data.reviewDialog.info.infos = resData.infoList;
  data.reviewDialog.visible = true;
};
</script>

<style scoped></style>