cmanager/src/views/tenant/works/Table/FinishedMission.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="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="takeOnCount" slot-scope="{ row }">
        <div style="color: #409eff;cursor: pointer;"  @click="employmentNum(row)">
          <b>{{ row.takeOnCount }}人</b>
        </div>
      </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="toPayEnd" slot-scope="{ row }">
        <div v-if="row.toPayEnd < 0" style="color: #f56c6c">
          <i class="el-icon-warning-outline"></i>
          <span>已逾期，不再提供支付服务</span>
        </div>
        <div v-if="row.toPayEnd >= 0">
          <i class="el-icon-warning-outline"></i> 距工资结算剩余
          <span style="color: #f56c6c">
            <b>{{ row.toPayEnd }}天</b>
          </span>
        </div>
      </template>
      <template slot="payCount" slot-scope="{ row }">
        <div style="">
          <span>{{ row.payCount }}人</span>
        </div>
      </template>
      <template slot="missionDate" slot-scope="{ row }">
        <div>{{ format(row.stime) }}至{{ format(row.etime) }}</div>
      </template>
      <template slot="expiryTime" slot-scope="{ row }">
        <div>{{ format(row.expiryTime) }}</div>
      </template>
      <!--/自定义列-->
      <!--自定义按钮-->
      <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>
      </template>
      <!--/自定义按钮-->
      <!--自定义操作栏-->
      <div slot="menu" slot-scope="{ size, type, row }">
        <el-button
          :size="size"
          :type="type"
          @click="appraise(row)"
          v-show="vaildData(permission.tenant_mission_appraise,false)"
        >评价</el-button>
        <!-- <el-button
          icon="el-icon-view"
          :size="size"
          :type="type"
          @click="rowView(row);"
          v-show="vaildData(permission.tenant_mission_view,false)"
        >查看</el-button>-->
        <el-button
          icon="el-icon-check"
          :size="size"
          :type="type"
          @click="rowCopy(row, 'copy')"
          v-show="vaildData(permission.tenant_mission_add, false)"
        >复制</el-button>
      </div>
      <!--/自定义操作栏-->
    </avue-crud>
    <!--复制dialog-->
    <copy-mission ref="copy" @back="backIndex" v-show="false"></copy-mission>
    <!--/复制dialog-->
    <!--评价dialog-->
    <Appraise ref="appraise" v-show="false"></Appraise>
    <!--评价dialog-->
    <!--录用人员dialog-->
    <Employ ref="employ" :status="status" v-show="false"></Employ>
    <employment-num ref="employmentNumber" :status="1" v-show="false"></employment-num>
    <!--查看dialog-->
    <mission-view :visible.sync="viewDrawer" :model="view"></mission-view>
    <!--/查看dialog-->
    <!--录用人员dialog-->
  </div>
</template>

<script>
import { getList, detail, getWagePerson } from "@/api/tenant/postzp";
import CopyMission from "../Dialog/CopyMission";
import Appraise from "../Dialog/Appraise";
import Employ from "../Dialog/Employ";
import SkillSelect from "../Dialog/Skill";
import missionView from "./missionView.vue";
import employmentNum from "../Dialog/EmployNumber";
import SelectMap from "@/components/map/selectLocation";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";
import saveButton from "./saveButton";

export default {
  filters: {
    ellipsis (value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 14) + "...";
      }
      return value;
    },
  },
  data () {
    return {
      viewDrawer: false,
      view: {},
      status: 3,
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      query: {
        status: 3,
      },
      data: [],
      obj: {},
    };
  },
  components: {
    CopyMission,
    Appraise,
    Employ,
    SkillSelect,
    SelectMap,
    missionView,
    saveButton,
    employmentNum
  },
  created () { },
  computed: {
    ...mapGetters(["permission"]),
    option () {
      return {
        height: "auto",
        calcHeight: 40,
        align: "center",
        menuAlign: "center",
        tip: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        excelBtn: false,
        columnBtn: false,
        searchBtn: false,
        searchShow: false,
        labelWidth: 100,
        border: true,
        index: false,
        selection: false,
        dialogType: "drawer",
        dialogWidth: "60%",
        delBtnText: "取消",
        dialogClickModal: false,
        column: [
          {
            label: "岗位名称",
            prop: "jobName",
            display: false,
            slot: true,
          },
          {
            label: "岗位编码",
            prop: "missionNo",
            display: false,
          },
          // {
          //   label: "岗位时间",
          //   prop: "missionDate",
          //   slot: true,
          //   display: false,
          //   width: 200,
          // },
          {
            label: "开始日期",
            prop: "stime",
            display: false,
            width: 130,
            slot:true
          },
          {
            label: "完成日期",
            prop: "etime",
            display: false,
            width: 130,
            slot:true
          },
          {
            label: "录用人数",
            prop: "takeOnCount",
            slot: true,
            display: false,
            width: 130,
          },
          {
            label: "已发工资人数",
            prop: "payCount",
            slot: true,
            display: false,
            width: 130,
          },
          {
            label: "发工资截止日期",
            prop: "expiryTime",
            slot: true,
            display: false,
            width: 160,
            format: "yyyy-MM-dd",
          },
          {
            label: "提示",
            prop: "toPayEnd",
            slot: true,
            display: false,
            width: 200,
          },
        ],
      };
    },
  },
  watch: {},
  methods: {
    format (date) {
      if (date) {
        return dateFormat(new Date(date), "yyyy/MM/dd");
      }
    },
    // 录用人数
    employmentNum(row){
      this.$refs.employmentNumber.openDialog(row, 2);//查看已录用人员
    },
    /*查看*/
    rowView (row) {
      detail(row.id).then((res) => {
        this.viewDrawer = true;
        this.view = res;
      });
    },
    /*打开录用人员*/
    employ (row, state) {
      this.$refs.employ.openDialog(row, state);
    },
    /*打开复制*/
    rowCopy (row, type) {
      this.$refs.copy.onLoad(row, type);
    },
    /*打开评价*/
    appraise (row) {
      this.$refs.appraise.openDialog(row);
    },
    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;
        let data1 = data.records;
        if (data1.length > 0) {
          for (let i = 0; i < data1.length; i++) {
            getWagePerson(data1[i].missionNo).then((res) => {
              data1[i]["payCount"] = res.data.data;
            });
          }
        }
        this.data = data1;
        this.loading = false;
      });
    },
    /*返回首页*/
    backIndex () {
      this.$emit("refresh");
    },
  },
};
</script>
<style scoped>
.el-col,
.el-form-item {
  margin-bottom: 0px;
}
</style>