integrated_traffic_vue/src/views/archives_management/semester/components/review.vue

<template>
  <el-dialog
    :title="title"
    :model-value="type === 100"
    width="1100px"
    @close="fnClose"
  >
    <div class="tr mb">
      <el-button type="primary" @click="fnAdd"> 新增</el-button>
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <el-divider content-position="left">
      生产经营单位安全培训教材会审表
    </el-divider>
    <table class="print_table">
      <tr>
        <th>教材名称</th>
        <td colspan="3">{{ props.curriculumname }}</td>
        <th>出版书号</th>
        <td>
          <el-input v-model="data.form.BOOK_NUM" />
        </td>
      </tr>
      <tr>
        <th>编写单位</th>
        <td colspan="3">
          <el-input v-model="data.form.CORP_NAME" />
        </td>
        <th>编写时间</th>
        <td>
          <el-date-picker
            v-model="data.form.CREATTIME"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
        </td>
      </tr>
      <tr>
        <th>教材类型</th>
        <td colspan="5">{{ props.industryAllName }}</td>
      </tr>
      <tr>
        <th width="12%">会审地点</th>
        <td width="15%">
          <el-input v-model="data.form.enterpriseName" />
        </td>
        <th width="12%">主持人</th>
        <td width="25%">
          <el-input v-model="data.form.REVIEW_PERSON" />
        </td>
        <th width="12%">会审时间</th>
        <td width="24%">
          <el-date-picker
            v-model="data.form.REVIEW_TIME"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
        </td>
      </tr>
      <tr>
        <th colspan="6">安全培训教材会审情况</th>
      </tr>
      <tr>
        <td colspan="6" style="padding: 0">
          <layout-table
            :data="data.reviewRecordList"
            :show-pagination="false"
            @row-dblclick="fnEdit"
          >
            <el-table-column label="审查人员" prop="NAME" />
            <el-table-column label="工作部门" prop="DEPARTMENT_NAME" />
            <el-table-column label="职务/职称" prop="DUTIES" />
            <el-table-column label="审查意见" prop="CHECK_OPINION" />
            <el-table-column label="本人签字">
              <template #default="{ row }">
                <viewer v-if="row.SIGN_PICTURE">
                  <img
                    :src="FILE_URL + row.SIGN_PICTURE"
                    alt=""
                    width="100"
                    height="25"
                  />
                </viewer>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  text
                  link
                  @click="fnDelete(row.ARCHIVES_REVIEW_RECORD_ID)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </layout-table>
        </td>
      </tr>
      <tr style="height: 200px">
        <th>会审意见</th>
        <td colspan="5">
          <el-input v-model="data.form.REVIEW_OPINIONS" />
        </td>
      </tr>
    </table>
    <div class="footer">
      <div>
        单位（盖章）：
        <img :src="data.form.OFFICIAL_SEAL_PATH" />
      </div>
      <div>档案编号：{{ data.form.CODE }}</div>
      <div>
        归档日期：{{ dayjs(data.form.END_TIME).format("YYYY年MM月DD日") }}
      </div>
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </template>
  </el-dialog>
  <add-review
    v-model:visible="data.addDialog.visible"
    v-model:form="data.addDialog.form"
    :type="data.addDialog.type"
    :outer-layer-form="data.form"
    :curriculum-id="curriculumId"
    @get-data="fnGetData"
  />
</template>

<script setup>
import dayjs from "dayjs";
import { nextTick, reactive, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getClassGoEdit,
  getReviewGoEdit,
  getReviewRecordList,
  downloadHs,
  getReviewAdd,
  getReviewEdit,
  setReviewRecordDelete,
  setReviewRecordView,
} from "@/request/training_archive_management.js";
import { debounce } from "throttle-debounce";
import AddReview from "./add_review.vue";

const FILE_URL = import.meta.env.VITE_FILE_URL;
const props = defineProps({
  type: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  clazzId: {
    type: String,
    required: true,
  },
  corpInfoId: {
    type: String,
    required: true,
  },
  industryAllName: {
    type: String,
    required: true,
  },
  curriculumname: {
    type: String,
    required: true,
  },
  curriculumId: {
    type: String,
    required: true,
  },
});
const data = reactive({
  form: {
    ARCHIVES_REVIEW_ID: "",
    CODE: "",
    END_TIME: "",
    BOOK_NUM: "",
    CORP_NAME: "",
    CREATTIME: "",
    CURRICULUM_ID: "",
    enterpriseName: "",
    REVIEW_PERSON: "",
    REVIEW_TIME: "",
    REVIEW_OPINIONS: "此教材符合相关文件要求，同意使用。",
  },
  reviewRecordList: [],
  addDialog: {
    visible: false,
    type: "",
    form: {
      REVIEW_USER: "",
      DEPARTMENT_NAME: "",
      DUTIES: "",
      CHECK_OPINION: "",
      SIGN_PICTURE: "",
    },
  },
});
const emits = defineEmits(["update:type"]);
const fnGetData = async () => {
  const resData = await getClassGoEdit({
    TYPE: props.type,
    CLASS_ID: props.clazzId,
  });
  data.form = resData.pd;

  // 会审表详情
  const reviewInfo = await getReviewGoEdit({
    CLASS_ID: props.clazzId,
    CURRICULUM_ID: props.curriculumId,
  });
  if (reviewInfo.pd) {
    data.reviewInfo = reviewInfo.pd;
    if (reviewInfo.pd.ARCHIVES_REVIEW_ID) {
      data.form.ARCHIVES_REVIEW_ID = reviewInfo.pd.ARCHIVES_REVIEW_ID;
      if (reviewInfo.pd.REVIEW_TIME)
        data.form.REVIEW_TIME = reviewInfo.pd.REVIEW_TIME;
      if (reviewInfo.pd.REVIEW_PERSON)
        data.form.REVIEW_PERSON = reviewInfo.pd.REVIEW_PERSON;
      if (reviewInfo.pd.BOOK_NUM) data.form.BOOK_NUM = reviewInfo.pd.BOOK_NUM;
      data.form.REVIEW_OPINIONS =
        reviewInfo.pd.REVIEW_OPINIONS || "此教材符合相关文件要求，同意使用。";
      if (reviewInfo.pd.CODE) data.form.CODE = reviewInfo.pd.CODE;
      if (reviewInfo.pd.END_TIME) data.form.END_TIME = reviewInfo.pd.END_TIME;
      if (reviewInfo.pd.enterpriseName)
        data.form.enterpriseName = reviewInfo.pd.enterpriseName;
      if (reviewInfo.pd.CORP_NAME)
        data.form.CORP_NAME = reviewInfo.pd.CORP_NAME;
      if (reviewInfo.pd.CREATTIME)
        data.form.CREATTIME = reviewInfo.pd.CREATTIME;
      await fnGetReviewRecordList();
    }
  } else {
    data.reviewInfo = {};
    data.reviewRecordList = [];
    data.form.REVIEW_OPINIONS =
      data.form.REVIEW_OPINIONS || "此教材符合相关文件要求，同意使用。";
  }
};
const fnGetReviewRecordList = async () => {
  const reviewRecord = await getReviewRecordList({
    ARCHIVES_REVIEW_ID: data.form.ARCHIVES_REVIEW_ID,
  });
  data.reviewRecordList = reviewRecord.varList;
};
watchEffect(() => {
  if (props.type === 100) fnGetData();
});
const fnAdd = () => {
  if (data.reviewRecordList.length < 10) {
    data.reviewRecordList.push({});
  } else {
    ElMessage.warning("已经超出上限，最多只能添加10条");
  }
};
const fnEdit = async ({ ARCHIVES_REVIEW_RECORD_ID }) => {
  data.addDialog.visible = true;
  await nextTick();
  if (!ARCHIVES_REVIEW_RECORD_ID) {
    data.addDialog.type = "add";
  } else {
    const resData = await setReviewRecordView({ ARCHIVES_REVIEW_RECORD_ID });
    data.addDialog.form = resData.pd;
    data.addDialog.type = "edit";
  }
};
const fnDelete = debounce(
  1000,
  async (ARCHIVES_REVIEW_RECORD_ID) => {
    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
    ARCHIVES_REVIEW_RECORD_ID &&
      (await setReviewRecordDelete({ ARCHIVES_REVIEW_RECORD_ID }));
    ElMessage.success("删除成功");
    await fnGetReviewRecordList();
  },
  { atBegin: true }
);
const fnExport = async () => {
  await ElMessageBox.confirm("确定要导出吗？", { type: "warning" });
  await downloadHs({
    CLASS_ID: props.clazzId,
    CORPINFO_ID: props.corpInfoId,
    CURRICULUM_ID: props.curriculumId,
  });
  await ElMessageBox.confirm("导出后请前往档案下载中下载该档案！", "温馨提示", {
    type: "info",
  });
};
const fnClose = () => {
  emits("update:type", 0);
};
const fnSubmit = debounce(
  1000,
  async () => {
    !data.form.ARCHIVES_REVIEW_ID
      ? await getReviewAdd({ ...data.form, CURRICULUM_ID: props.curriculumId })
      : await getReviewEdit({
          ...data.form,
          CURRICULUM_ID: props.curriculumId,
        });
    ElMessage.success("保存成功");
    fnClose();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss">
.footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  div:first-child {
    position: relative;

    img {
      width: 120px;
      height: 120px;
      position: absolute;
      top: -41px;
      left: -13px;
    }
  }
}

:deep(.el-input) {
  .el-input__wrapper {
    box-shadow: none;
    background-color: transparent;
  }
}
</style>