integrated_traffic_vue/src/views/archives_management/enterprise/components/capital.vue

<template>
  <el-dialog
    :title="title"
    :model-value="type === 105"
    width="1100px"
    @close="fnClose"
  >
    <div class="tr">
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <div class="tc">
      <h3>{{ year }}年度培训资金提取和使用情况管理台账</h3>
    </div>
    <p class="mb">单位名称:{{ name }}</p>
    <layout-table :data="data.list" :show-pagination="false">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="DATE" label="日期" />
      <el-table-column label="费用项目">
        <el-table-column prop="AMOUNT" label="提取金额" />
        <el-table-column prop="ITEM_TYPE" label="项目类型" />
        <el-table-column prop="MATERIAL_COST" label="培训教材教具费" />
        <el-table-column prop="TEACHER_COST" label="师资费" />
        <el-table-column prop="PAPER_COST" label="试卷印制费" />
        <el-table-column prop="OUTSIDE_COST" label="外出培训费" />
        <el-table-column
          prop="EQUIPMENT_COST"
          label="教学设备、课桌椅等购置维护费"
        />
        <el-table-column prop="TRAIN_COST" label="培训活动费" />
        <el-table-column prop="ENTRUST_COST" label="委托培训费" />
        <el-table-column prop="OTHER_COST" label="其他与培训有关的直接支出" />
      </el-table-column>
      <el-table-column prop="BALANCE" label="余额" />
    </layout-table>
    <div class="flex mt">
      <div>制表人:</div>
      <div>编制日期:</div>
      <div>审核人:</div>
      <div>审核日期:</div>
    </div>
    <div class="mt">
      填表说明:1.将实际发生的费用金额记录在费用项目栏内。2.培训提取比例按职工工资1.5%，可按季或月提取。
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import LayoutTable from "@/components/table/index";
import { reactive, watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import {
  getArchivesCapitalList,
  downloadFundmanageword,
} from "@/request/training_archive_management.js";

const props = defineProps({
  type: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  CORPINFO_ID: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  year: {
    type: String,
    required: true,
  },
});
const data = reactive({
  list: [],
});
const emits = defineEmits(["update:type"]);
const fnGetData = async () => {
  const resData = await getArchivesCapitalList({
    TYPE: props.type,
    CORPINFO_ID: props.CORPINFO_ID,
    YEAR: props.year,
  });
  data.list = resData.varList;
};
watchEffect(() => {
  if (props.type === 105) fnGetData();
});
const fnExport = debounce(
  1000,
  async () => {
    await ElMessageBox.confirm("确定要导出吗？", { type: "warning" });
    await downloadFundmanageword({
      YEAR: props.year,
      CORPINFO_ID: props.CORPINFO_ID,
      NAME: props.name,
    });
    await ElMessageBox.confirm(
      "导出后请前往档案下载中下载该档案！",
      "温馨提示",
      { type: "info" }
    );
  },
  { atBegin: true }
);
const fnClose = () => {
  emits("update:type", 0);
};
</script>

<style scoped lang="scss">
.flex {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
</style>