jonhon-mes-web/src/views/changeJobManagement/trainingRecordManagement.vue

<template>
  <basic-container>
    <!-- 培训记录管理 -->
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template #menu-left>
        <el-button type="primary" icon="el-icon-document-add" @click="handleIssue('all')"
          >批量下发</el-button
        >
        <el-button type="primary" icon="el-icon-upload" @click="handleUpload('all')"
          >资料批量上传</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-document-checked"
          @click="handleFinish('all')"
          >培训完成</el-button
        >
      </template>

      <template #menu="scope">
        <el-button
          type="text"
          v-if="
            scope.row.jduStatus == 3 ||
            scope.row.jduStatus == 4 ||
            scope.row.jduStatus == 5
          "
          @click="handleDetail(scope.row)"
          >培训详情</el-button
        >
        <el-button type="text" v-if="scope.row.jduStatus == 1" @click="handleIssue('one')"
          >下发</el-button
        >
        <el-button
          type="text"
          v-if="scope.row.jduStatus == 2"
          @click="handleUpload('one')"
          >资料上传</el-button
        >
        <el-button
          type="text"
          v-if="scope.row.jduStatus == 4"
          @click="handleFinish('one')"
          >完成</el-button
        >
        <!-- <el-button type="text" v-if="scope.row.jduStatus == 4 || scope.row.jduStatus == 5" @click="handleDownload('one')">附件下载</el-button> -->
      </template>
      <template #userName="{ row }">{{
        row.jtCultivateDetail.jtPostHandle.personnel.userName
      }}</template>
      <template #userCode="{ row }">{{
        row.jtCultivateDetail.jtPostHandle.personnel.userCode
      }}</template>
      <template #staffTypeTitle="{ row }">{{
        row.jtCultivateDetail.jtPostHandle.staffTypeTitle
      }}</template>
      <template #typeTitle="{ row }">{{ row.jtCultivateDetail.typeTitle }}</template>
      <template #cycle="{ row }">{{ row.jtCultivateDetail.plan.cycle }}</template>
      <template #earlyWarningDay="{ row }">{{
        row.jtCultivateDetail.plan.earlyWarningDay
      }}</template>
      <template #name="{ row }">{{ row.jtCultivateDetail.plan.name }}</template>
      <template #teacherName="{ row }">{{ row.teacher.userName }}</template>
    </avue-crud>
    <el-dialog title="资料上传" append-to-body v-model="fileDialog" width="555px">
      <avue-form :option="fileOption" v-model="fileForm" :upload-after="uploadAfter">
      </avue-form>
      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitCycle">确 定</el-button>
        </span>
      </template> -->
    </el-dialog>
    <el-dialog title="培训详情" append-to-body v-model="detailDialog">
      <el-table :data="detailData">
        <el-table-column
          align="center"
          label="培训师"
          prop="teacher.userName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="完成时间"
          prop="updateTime"
        ></el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="jduStatusTitle"
        ></el-table-column>
        <el-table-column align="center" label="资料">
          <template #default="scope">
            <el-button type="primary">资料下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      data: [],
      form: {},
      detailDialog: false,
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      fileDialog: false,
      fileForm: {},
      fileOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "资料上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "附件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "不能上传 附件，且不超过 10M",
            action: "/blade-system/user/import-user",
          },
        ],
      },
      option: {
        columnSort: true,
        tip: false,
        height: "auto",
        align: "center",
        calcHeight: 32,
        simplePage: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: false,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        editBtnText: "修改",
        editBtnIcon: " ",
        delBtnIcon: " ",
        addBtn: false,
        labelWidth: 120,
        searchLabelWidth: 120,
        menu: true,
        menuWidth: 200,
        dialogWidth: 600,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: true,
        gridBtn: false,
        searchShowBtn: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",

        column: [
          {
            label: "姓名",
            prop: "userName",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "工号",
            prop: "userCode",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入工号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "用工类型",
            prop: "staffTypeTitle",
            type: "select",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            dicData: [
              {
                value: 1,
                label: "实习工",
              },
              {
                value: 2,
                label: "正式工",
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入用工类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "培训类型",
            prop: "typeTitle",
            type: "select",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            dicData: [
              {
                value: 1,
                label: "实习",
              },
              {
                value: 2,
                label: "转岗",
              },
              {
                value: 3,
                label: "下岗",
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入培训类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "培训周期(天)",
            prop: "cycle",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入培训周期(天)",
                trigger: "blur",
              },
            ],
          },
          {
            label: "预警周期(天)",
            prop: "earlyWarningDay",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入预警周期(天)",
                trigger: "blur",
              },
            ],
          },
          {
            label: "培训计划",
            prop: "name",
            type: "select",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入培训计划",
                trigger: "blur",
              },
            ],
            dicData: [
              { label: "计划一", value: "1" },
              { label: "计划二", value: "2" },
            ],
          },
          {
            label: "培训师",
            prop: "teacherName",
            type: "select",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入培训师",
                trigger: "blur",
              },
            ],
            props: {
              label: "userName",
              value: "userCode",
            },
            dicData: [
              {
                jobName: "生产调度员",
                deptName: "外协业务交付管理室",
                ldapName: "00188",
                userSex: 0,
                deptId: 65,
                mobile: null,
                userName: "00188",
                userId: 441,
                userCode: "00188",
              },
              {
                jobName: "表面处理工",
                deptName: "复合镍班",
                ldapName: "00460",
                userSex: 1,
                deptId: 69,
                mobile: null,
                userName: "00460",
                userId: 224,
                userCode: "00460",
              },
              {
                jobName: "保管员",
                deptName: "零件管理班",
                ldapName: "00660",
                userSex: 0,
                deptId: 46,
                mobile: null,
                userName: "00660",
                userId: 322,
                userCode: "00660",
              },
            ],
          },
          {
            label: "培训时间",
            prop: "createTime",
            type: "date",
            searchRange: true,
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入培训时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "状态",
            prop: "jduStatusTitle",
            type: "select",
            span: 24,
            labelWidth: 140,
            overflow: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入状态",
                trigger: "blur",
              },
            ],
            dicData: [
              { label: "待下发", value: "1" },
              { label: "培训中", value: "2" },
              { label: "已超期", value: "3" },
              { label: "待确认", value: "4" },
              { label: "已完成", value: "5" },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    selectionChange(val) {
      this.selectionList = val;
    },
    // 培训详情
    handleDetail() {
      this.detailDialog = true;
    },
    // 批量下发
    handleIssue(type) {
      if (type == "all") {
        if (this.selectionList.length == 0) {
          this.$message.error("请至少选择一条数据");
        } else {
          let tmp = this.selectionList.find((item) => item.jduStatus != 1);
          if (tmp) {
            this.$message.error("请选择状态为待下发的数据");
          } else {
            this.$confirm("确定下发?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {});
          }
        }
      } else {
        this.$confirm("确定下发?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {});
      }
    },
    // 批量上传
    handleUpload(type) {
      if (type == "all") {
        if (this.selectionList.length == 0) {
          this.$message.error("请至少选择一条数据");
        } else {
          let tmp = this.selectionList.find((item) => item.jduStatus != 2);
          if (tmp) {
            this.$message.error("请选择状态为培训中的数据");
          } else {
            this.fileDialog = true;
          }
        }
      } else {
        this.fileDialog = true;
      }
    },
    handleDownload() {},
    // 培训完成
    handleFinish(type) {
      if (type == "all") {
        if (this.selectionList.length == 0) {
          this.$message.error("请至少选择一条数据");
        } else {
          let tmp = this.selectionList.find((item) => item.jduStatus != 4);
          if (tmp) {
            this.$message.error("请选择状态为待确认的数据");
          } else {
            this.$confirm("确定培训完成?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {});
          }
        }
      } else {
        this.$confirm("确定培训完成?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {});
      }
    },
    onLoad() {
      this.data = [
        {
          id: 1,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "李四",
                userCode: "001",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-25",
          jduStatus: "1",
          jduStatusTitle: "待下发",
        },
        {
          id: 2,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "张三",
                userCode: "002",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-25",
          jduStatus: "1",
          jduStatusTitle: "待下发",
        },
        {
          id: 3,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "李明",
                userCode: "002",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-21",
          jduStatus: "2",
          jduStatusTitle: "培训中",
        },
        {
          id: 4,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "张勇",
                userCode: "002",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-14",
          jduStatus: "3",
          jduStatusTitle: "已超期",
        },
        {
          id: 5,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "王红",
                userCode: "002",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-21",
          jduStatus: "4",
          jduStatusTitle: "待确认",
        },
        {
          id: 6,
          jtCultivateDetail: {
            jtPostHandle: {
              personnel: {
                userName: "刘丽",
                userCode: "002",
              },
              staffType: 1,
              staffTypeTitle: "实习工",
            },
            typeTitle: "实习",
            type: 1,
            plan: {
              cycle: 7,
              earlyWarningDay: 3,
              name: "计划一",
            },
          },
          teacher: {
            userName: "王五",
          },
          createTime: "2025-10-15",
          jduStatus: "5",
          jduStatusTitle: "已完成",
        },
      ];
      this.page.total = this.data.length;
    },
  },
};
</script>

<style></style>