cmanager/src/views/tenant/mission/Table/WaitingMission.vue

<template>
  <div>
    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="obj" @row-del="rowDel"
      @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen" :page.sync="page"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <!--自定义按钮-->
      <template slot="menuLeft">
        <save-button type="warning" plain icon="el-icon-plus" size="small" @click="rowCopy('', 'add')"
          v-show="vaildData(permission.tenant_mission_add, false)">发布任务</save-button>
        <el-button type="success" size="small" plain icon="el-icon-plus" @click="handleImport"
          v-show="vaildData(permission.tenant_talents_groupadd, false)">导入</el-button>
      </template>
      <!--/自定义按钮-->
      <!--自定义列-->
      <template slot="missionTitle" slot-scope="{ row }">
        <el-tooltip effect="dark" :content="row.missionTitle" placement="top">
          <div style="color: black">
            <b>{{ row.missionTitle | ellipsis }}</b>
          </div>
        </el-tooltip>
      </template>
      <template slot="signUpCount" slot-scope="{ row }">
        <div>
          <span>{{ row.signUpCount }}人</span>
        </div>
      </template>
      <!-- 报名截止日期 -->
      <template slot="etimePub" slot-scope="{row}">
        <span>{{ format(row.etimePub) }}</span>
      </template>
      <!-- 开始日期 -->
      <template slot="stime" slot-scope="{row}">
        <span>{{ format(row.stime) }}</span>
      </template>
      <!-- 完成日期 -->
      <template slot="etime" slot-scope="{row}">
        <span>{{ format(row.etime) }}</span>
      </template>
      <template slot="takeOnCount" slot-scope="{ row }">
        <div style="color: #409eff;cursor: pointer;" @click="employmentNum(row)">
          <b>{{ row.takeOnCount }}人</b>
        </div>
      </template>
      <template slot="toStart" slot-scope="{ row }">
        <div>
          <i class="el-icon-warning-outline"></i> 距任务开始剩余
          <span style="color: #f56c6c">
            <b>{{ row.toStart }}天</b>
          </span>
        </div>
      </template>
      <!--/自定义列-->
      <!--自定义操作栏-->
      <div slot="menu" slot-scope="{ size, type, row }">
        <el-button type="text" size="mini" @click="recommend(row)">重点人群推送</el-button>
        <el-button type="text" size="mini" @click="employ(row, 1)">录用登记</el-button>
        <el-button icon="el-icon-view" :size="size" :type="type" @click.stop="rowView(row)"
          v-show="vaildData(permission.tenant_mission_view, false)">查看</el-button>
        <!-- <save-button icon="el-icon-check" :size="size" :type="type" @click="rowCopy(row, 'copy')">复制</save-button> -->
        <el-button icon="el-icon-edit" :size="size" :type="type" @click="rowCopy(row, 'edit')"
          :disabled="row.signUpCount !== 0" v-show="vaildData(permission.tenant_mission_edit, false)">编辑</el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type" @click="$refs.crud.rowDel(row)"
          :disabled="row.signUpCount !== 0" v-show="vaildData(permission.tenant_mission_cancel, false)">取消</el-button>
      </div>
    </avue-crud>
    <!--发布 复制 编辑dialog-->
    <copy-mission ref="copy" @back="backIndex" v-show="false"></copy-mission>
    <!--/发布 复制 编辑dialog-->
    <!--录用人员dialog-->
    <Employ ref="employ" @refresh="refreshChange" :status="status" v-show="false"></Employ>
    <employment-num ref="employmentNum" :status="1" v-show="false"></employment-num>
    <!--/录用人员dialog-->
    <!--人才推荐dialog-->
    <Recommend ref="recommend" v-show="false"></Recommend>
    <!--/人才推荐dialog-->
    <!--对比人才库dialog-->
    <Contrast ref="contrast" v-show="false"></Contrast>
    <!--对比人才库dialog-->
    <!--查看dialog-->
    <mission-view :visible.sync="viewDrawer" :model="view"></mission-view>
    <!--/查看dialog-->
    <!--批量导入-->
    <el-dialog title="导入" append-to-body :visible.sync="excelBox" :close-on-click-modal="false" width="555px">
      <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter" :upload-before="beforeAvatarUpload"
        :upload-error="uploadError">
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate()" :loading="templateLoading">
            点击下载
            <i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
    <!--/批量导入-->
  </div>
</template>

<script>
import { upload } from "@/api/tenant/mission";
import { getList, cancel, detail } from "@/api/tenant/mission";
import CopyMission from "../Dialog/CopyMission";
import Employ from "../Dialog/Employ";
import employmentNum from "../Dialog/EmployNumber";
import Recommend from "../Dialog/Recommend";
import Contrast from "../Dialog/Contrast"
import SkillSelect from "../Dialog/Skill";
import missionView from "./missionView.vue";
import SelectMap from "@/components/map/selectLocation";
import { isExcel } from "@/util/validate";
import { excelAccept } from "@/common/accept";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";
import { getTemplate } from "@/api/resource/template";
import saveButton from "./saveButton";

export default {
  components: {
    CopyMission,
    Employ,
    Recommend,
    SkillSelect,
    SelectMap,
    missionView,
    saveButton,
    Contrast,
    employmentNum,
    excelAccept
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 14) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      excelBox: false,
      excelForm: { isCovered: 1 },
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            accept: excelAccept,
            showFileList: false,
            action: upload(),
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
      status: 1,
      viewDrawer: false,
      view: {},
      loading: false,
      tradeData: [],
      tradeId: "",
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      query: {
        status: 1,
      },
      data: [],
      obj: {},
      missionNo: '',
    };
  },
  created() { },
  watch: {},
  computed: {
    ...mapGetters(["permission"]),
    /*计算时间*/
    option() {
      return {
        height: "auto",
        calcHeight: 40,
        menuWidth: 420,
        align: "center",
        menuAlign: "center",
        tip: false,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        excelBtn: false,
        columnBtn: false,
        searchBtn: false,
        searchShow: false,
        templateLoading: false,
        border: true,
        index: false,
        selection: false,
        dialogType: "drawer",
        dialogWidth: "60%",
        delBtnText: "取消",
        dialogClickModal: false,
        column: [
          {
            label: "任务名称",
            prop: "missionTitle",
            display: false,
            slot: true,
          },
          {
            label: "任务编码",
            prop: "missionNo",
            display: false,
          },
          {
            label: "报名截止日期",
            prop: "etimePub",
            display: false,
            format: "yyyy-MM-dd",
            width: 130,
            slot: true,
          },
          {
            label: "开始日期",
            prop: "stime",
            display: false,
            width: 130,
            slot: true,
          },
          {
            label: "完成日期",
            prop: "etime",
            display: false,
            width: 130,
            slot: true,
          },
          {
            label: "申请人数",
            prop: "signUpCount",
            slot: true,
            display: false,
            width: 110,
          },
          {
            label: "录用人数",
            prop: "takeOnCount",
            slot: true,
            display: false,
            width: 110,
          },

          {
            label: "提示",
            prop: "toStart",
            slot: true,
            display: false,
            width: 200,
          },
        ],
      };
    },
  },
  methods: {
    format(date) {
      if (date) {
        return dateFormat(new Date(date), "yyyy/MM/dd");
      }
    },
    // 录用人数
    employmentNum(row) {
      this.$refs.employmentNum.openDialog(row, 2);//查看已录用人员
    },
    /*打开新增 复制 编辑*/
    rowCopy(row, type) {
      this.$refs.copy.onLoad(row, type);
    },
    /*查看*/
    rowView(row) {
      detail(row.missionNo).then((res) => {
        this.viewDrawer = true;
        this.view = res;
      });
    },
    /*打开录用人员*/
    employ(row, status) {
      this.$refs.employ.openDialog(row, status);
    },
    /*打开人才推荐*/
    recommend(row) {
      this.$refs.recommend.openDialog(row);
    },
    /*打开对比人才库*/
    contrast(row) {
      this.$refs.contrast.openDialog(row);
    },
    /*取消任务*/
    rowDel(row) {
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", { style: "font-size: 16px" }, "您确定要取消此任务吗? "),
          h("p", { style: "color: red" }, "一旦取消则任务失效"),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.cancelButtonLoading = true;
              instance.closeOnPressEscape = false;
              instance.closeOnClickModal = false;
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                  instance.cancelButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          },
        }
      )
        .then(() => {
          cancel(row.id).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.onLoad(this.page, this.query);
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // });
        });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /*刷新本页 带搜索参数*/
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    /*加载数据*/
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(this.query, params)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    /*返回首页*/
    backIndex() {
      this.$emit("refresh");
    },
    /*导入任务*/
    beforeAvatarUpload(file, done, loading) {
      if (!isExcel(file)) {
        loading();
        this.$message.error("上传任务信息只能是 .xls,.xlsx 标准格式文件!");
      } else {
        done();
      }
    },
    uploadAfter(res, done) {
      if (!(res instanceof Error) && !res.data) {
        this.excelBox = false;
      } else if (res.data && res.data.code === 900) {
        const arr = [];
        const data = res.data.data;
        data.error &&
          data.error.errorList.forEach((item) => {
            arr.push(`${item.name} ${item.remarks}`);
          });
        data.auth &&
          data.auth.authList.forEach((item) => {
            arr.push(`${item.name} ${item.remarks}`);
          });
        this.$refs.ied.show(arr);
      }
      this.refreshChange();
      // this.initDept(this.tenantId);
      done();
    },
    uploadError(error) {
      if (error) {
        this.$message.error(error);
      }
    },
    handleImport() {
      this.excelBox = true;
    },
    /*下载任务模板 */
    handleTemplate() {
      this.templateLoading = true;
      getTemplate("trc")
        .then((rep) => {
          this.templateLoading = false;
          window.open(rep.data.data);
        })
        .catch(() => {
          this.templateLoading = false;
        });
    },
  },
};
</script>
<style scoped>
.el-col,
.el-form-item {
  margin-bottom: 0px;
}

.map {
  width: 100%;
  height: 300px;
}
</style>
<style>
.slotForm {
  font-size: 12px;
}
</style>