integrated_traffic_vue/src/views/archives/semester/components/training_schedule.vue

<template>
  <div>
    <el-dialog
      v-if="type === 101"
      :model-value="type === 101"
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <el-button type="primary" @click="fnAdd">新增</el-button>
        <el-button type="danger" @click="fnDelete"> 删除 </el-button>
        <el-button type="primary" v-print="'#printContent'">打印</el-button>
      </el-space>

      <div id="printContent">
        <table class="print_use" style="width: 100%">
          <thead>
            <tr>
              <td colspan="12" style="border: none">
                <div class="tc">
                  <h3>{{ CORP_NAME }}培训计划</h3>
                </div>
                <div class="tl">单位名称:{{ CORP_NAME }}</div>
              </td>
            </tr>
            <tr>
              <td class="title">序号</td>
              <td class="title">培训组织部门</td>
              <td class="title">培训日期</td>
              <td class="title">培训时间</td>
              <td class="title">培训内容</td>
              <td class="title">培训方式</td>
              <td class="title">培训对象</td>
              <td class="title">考核方式</td>
              <td class="title">地点</td>
              <td class="title">培训教师</td>
              <td class="title">经费保障</td>
              <td class="title">质量评估</td>
            </tr>
          </thead>
          <tbody>
            <template v-if="data.dataList && data.dataList.length > 0">
              <tr v-for="(item, index) in data.dataList" :key="index">
                <td class="tc">{{ index + 1 }}</td>
                <td class="tc">{{ item.ORGANIZATION_DEPARTMENT }}</td>
                <td class="tc">{{ item.TRAINING_DATE }}</td>
                <td class="tc">{{ item.TRAINING_TIME }}</td>
                <td class="tc">{{ item.TRAINING_CONTENT }}</td>
                <td class="tc">{{ item.TRAINING_METHODS }}</td>
                <td class="tc">{{ item.TRAINING_OBJECT }}</td>
                <td class="tc">{{ item.ASSESSMENT_METHOD }}</td>
                <td class="tc">{{ item.PLACE }}</td>
                <td class="tc">{{ item.TRAINING_TEACHER }}</td>
                <td class="tc">{{ item.FUND_GUARANTEE }}</td>
                <td class="tc">{{ item.QUALITY_ASSESSMENT }}</td>
              </tr>
            </template>
          </tbody>
        </table>

        <div class="print_no_use mt-10">
          <div class="tc">
            <h3>{{ CORP_NAME }}培训计划</h3>
          </div>
          <p class="mtb-10">单位名称:{{ CORP_NAME }}</p>
          <layout-table
            :data="data.dataList"
            :show-pagination="false"
            highlight-current-row
            @row-click="fnCurrentChange"
            @row-dblclick="fnAddOrUpdate"
          >
            <el-table-column label="序号" width="45">
              <template v-slot="{ $index }">
                {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="ORGANIZATION_DEPARTMENT"
              label="培训组织部门"
            />
            <el-table-column prop="TRAINING_DATE" label="培训日期" width="85" />
            <el-table-column prop="TRAINING_TIME" label="培训时间" width="85" />
            <el-table-column
              show-overflow-tooltip
              prop="TRAINING_CONTENT"
              label="培训内容"
            />
            <el-table-column prop="TRAINING_METHODS" label="培训方式" />
            <el-table-column prop="TRAINING_OBJECT" label="培训对象" />
            <el-table-column prop="ASSESSMENT_METHOD" label="考核方式" />
            <el-table-column show-overflow-tooltip prop="PLACE" label="地点" />
            <el-table-column prop="TRAINING_TEACHER" label="培训教师" />
            <el-table-column
              show-overflow-tooltip
              prop="FUND_GUARANTEE"
              label="经费保障"
            />
            <el-table-column
              show-overflow-tooltip
              prop="QUALITY_ASSESSMENT"
              label="质量评估"
            />
          </layout-table>
        </div>
        <el-row class="mt-10">
          <el-col :span="6">编制人:</el-col>
          <el-col :span="6">编制日期:</el-col>
          <el-col :span="6">审核人:</el-col>
          <el-col :span="6">审核日期:</el-col>
        </el-row>
      </div>
      <div v-html="PRINT_STYLE" />
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
    <training-schedule-form
      v-if="data.formVisible"
      v-model:visible="data.formVisible"
      :TRAININGSCHEDULE_ID="data.current.TRAININGSCHEDULE_ID"
      :type="data.current.TRAININGSCHEDULE_ID ? 'edit' : 'add'"
      :study-task-id="studyTaskId"
      @get-data="fnGetList"
    />
  </div>
</template>

<script setup>
import {
  deleteArchivesTrainingSchedule,
  getArchivesTrainingScheduleList,
} from "@/request/archives.js";
import { reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { useUserStore } from "@/pinia/user.js";
import LayoutTable from "@/components/table/index.vue";
import { serialNumber } from "@/assets/js/utils.js";
import TrainingScheduleForm from "./training_schedule_form.vue";
import { ElMessageBox } from "element-plus";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const userStore = useUserStore();
const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, type, studyTaskId } = useVModels(props);

const data = reactive({
  dataList: [],
  current: undefined,
  formVisible: false,
});

const emits = defineEmits(["update:visible", "update:current"]);

const fnClose = () => {
  emits("update:current", undefined);
};

const fnCurrentChange = (row) => {
  data.current = row;
};

const fnAdd = () => {
  data.dataList.push({});
};

const fnDelete = async () => {
  if (data.current) {
    if (data.current.TRAININGSCHEDULE_ID) {
      await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
      await deleteArchivesTrainingSchedule({
        TRAININGSCHEDULE_ID: data.current.TRAININGSCHEDULE_ID,
      });
    }
    data.current = undefined;
    await fnGetList();
  }
};

const fnGetList = async () => {
  const respData = await getArchivesTrainingScheduleList({
    STUDYTASK_ID: studyTaskId.value,
  });
  if (respData && respData.varList) {
    data.dataList = respData.varList;
  }
};
await fnGetList();

const fnAddOrUpdate = (row) => {
  data.current = row;
  if (row) {
    data.formVisible = true;
  }
};
</script>

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