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="list.push({})">新增</el-button>
      <el-button type="danger" @click="fnDelete">删除</el-button>
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <div class="tc">
      <h3>{{ year }}年度培训资金提取和使用情况管理台账</h3>
    </div>
    <p class="mb">单位名称:{{ corpName }}</p>
    <layout-table
      :data="list"
      :show-pagination="false"
      :stripe="false"
      :highlight-current-row="true"
      @row-click="fnRowClick"
      @row-dblclick="fnRowDblclick"
    >
      <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>
    <table class="print_use dn">
      <thead>
        <tr>
          <td rowspan="2">序号</td>
          <td rowspan="2">日期</td>
          <td colspan="9">费用项目</td>
          <td rowspan="2">余额</td>
        </tr>
        <tr>
          <td>提取金额</td>
          <td>培训教材教具费</td>
          <td>师资费</td>
          <td>试卷印制费</td>
          <td>外出培训费</td>
          <td>教学设备、课桌椅等购置维护费</td>
          <td>培训活动费</td>
          <td>委托培训费</td>
          <td>其他与培训有关的直接支出</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.DATE }}</td>
          <td>{{ item.AMOUNT }}</td>
          <td>{{ item.MATERIAL_COST }}</td>
          <td>{{ item.TEACHER_COST }}</td>
          <td>{{ item.PAPER_COST }}</td>
          <td>{{ item.OUTSIDE_COST }}</td>
          <td>{{ item.EQUIPMENT_COST }}</td>
          <td>{{ item.TRAIN_COST }}</td>
          <td>{{ item.ENTRUST_COST }}</td>
          <td>{{ item.OTHER_COST }}</td>
          <td>{{ item.BALANCE }}</td>
        </tr>
      </tbody>
    </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>
  <capital-add
    v-model:visible="data.addOrEditDialog.visible"
    v-model:form="data.addOrEditDialog.form"
    :type="data.addOrEditDialog.type"
    :year="year"
    @get-data="fnGetData"
  />
</template>

<script setup>
import { nextTick, reactive, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import {
  getArchivesCapitalList,
  downloadFundmanageword,
  setCapitalDelete,
  getCapitalView,
} from "@/request/training_archive_management.js";
import useListData from "@/assets/js/useListData.js";
import capitalAdd from "./capital_add.vue";

const props = defineProps({
  type: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  year: {
    type: String,
    required: true,
  },
  corpName: {
    type: String,
    required: true,
  },
});
const data = reactive({
  ARCHIVESCAPITAL_ID: "",
  addOrEditDialog: {
    visible: false,
    type: "",
    form: {
      DATE: "",
      AMOUNT: "",
      MATERIAL_COST: "",
      TEACHER_COST: "",
      PAPER_COST: "",
      OUTSIDE_COST: "",
      EQUIPMENT_COST: "",
      TRAIN_COST: "",
      ENTRUST_COST: "",
      OTHER_COST: "",
      BALANCE: "",
    },
  },
});
const emits = defineEmits(["update:type"]);
const { list, fnGetData } = useListData(getArchivesCapitalList, {
  otherParams: {
    TYPE: props.type,
    YEAR: props.year,
  },
  usePagination: false,
  immediate: false,
});
watchEffect(() => {
  if (props.type === 105) fnGetData();
});
const fnExport = debounce(
  1000,
  async () => {
    await ElMessageBox.confirm("确定要导出吗？", { type: "warning" });
    await downloadFundmanageword({
      YEAR: props.year,
      NAME: props.corpName,
    });
    await ElMessageBox.confirm(
      "导出后请前往档案下载中下载该档案！",
      "温馨提示",
      { type: "info" }
    );
  },
  { atBegin: true }
);
const fnRowClick = (row) => {
  data.ARCHIVESCAPITAL_ID = row.ARCHIVESCAPITAL_ID;
};
const fnRowDblclick = async (row) => {
  data.addOrEditDialog.visible = true;
  await nextTick();
  if (row.ARCHIVESCAPITAL_ID) {
    const resData = await getCapitalView({
      ARCHIVESCAPITAL_ID: row.ARCHIVESCAPITAL_ID,
    });
    data.addOrEditDialog.form = resData.pd;
    data.addOrEditDialog.type = "edit";
  } else data.addOrEditDialog.type = "add";
};
const fnDelete = debounce(
  1000,
  async () => {
    if (data.ARCHIVESCAPITAL_ID) {
      await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
      await setCapitalDelete({
        ARCHIVESCAPITAL_ID: data.ARCHIVESCAPITAL_ID,
      });
      ElMessage.success("删除成功");
    }
    data.ARCHIVESCAPITAL_ID = "";
    fnGetData();
  },
  { atBegin: true }
);
const fnClose = () => {
  emits("update:type", 0);
};
</script>

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