soc_web/src/views/resumptionEvaluate/evaluatePlan/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
        ></org-tree>
      </el-col>
      <el-col :span="20" :xs="24">
        <!--用户数据-->
        <div class="main-right-box">
          <!--    搜索条件    -->
          <div class="main-search-box">
            <!--    搜索条件    -->
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
            >
              <el-form-item label="外包评价名称">
                <el-input
                  :maxlength="20"
                  v-model="queryParams.evaluateName"
                  placeholder="请输入外包评价名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option
                    v-for="dict in dict.type.evaluate_task_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="计划时间">
                <DataRangePicker
                  v-model="queryParams.dataTime"
                  key="daterange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  @input="changeHandler"
                />
                <!-- <el-date-picker
                  v-model="queryParams.dataTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  @input="changeHandler"
                > -->
                <!-- </el-date-picker> -->
              </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </div>

          <!--用户数据-->

          <el-table
            border
            height="650"
            size="small"
            v-loading="loading"
            :data="dataList"
            align="center"
            fixed
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="序号"
              type="index"
              width="100"
            ></el-table-column>
            <el-table-column label="评价机构" prop="orgName" />
            <el-table-column label="评价角色" prop="roleName" />
            <el-table-column label="外包评价名称" prop="evaluateName" />
            <el-table-column label="计划开始时间" prop="startTime" />
            <el-table-column label="计划结束时间" prop="endTime" />
            <el-table-column label="评价人" prop="evaluateBy" />
            <el-table-column label="评价时间" prop="completeTime" />
            <el-table-column
              label="状态"
              prop="status"
              :formatter="statusChange"
            />

            <el-table-column
              label="操作"
              width="180"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button
                  size="mini"
                  v-if="isEvaluateHandler(row)"
                  @click="evaluateHandler(row)"
                  type="text"
                  icon="el-icon-plus"
                  >评价</el-button
                >

                <el-button
                  size="mini"
                  @click="editHandler(row)"
                  type="text"
                  class="el-icon-info"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>

    <editEvaluate ref="Evaluate" @success="getList()"></editEvaluate>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";

import { getEvaluatePage } from "@/api/core/evalulateTask.js";
import OrgTree from "@/components/orgTree";
import editEvaluate from "./editPlanEvaluate.vue";
export default {
  name: "SocWebIndex",
  dicts: ["sys_org_type", "evaluate_task_status"],
  components: {
    OrgTree,
    DataRangePicker,
    editEvaluate,
  },
  data() {
    return {
      loading: false,

      queryParams: {
        orgId: null,
        checkSub: true,
        status: "",
        dataTime: [],
        evaluateName: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 显示搜索条件
      showSearch: true,
      total: 0,
      dataList: [],
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(["orgId", "roleList"]),
  },
  methods: {
    statusChange(row) {
      switch (row.status) {
        case "0":
          return "待完成";
          break;
        case "1":
          return "进行中";
          break;
        case "2":
          return "已完成";
          break;
        case "3":
          return "已超期";
          break;
      }
    },
    changeHandler(time) {
      console.log(time);
    },
    //获取列表
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams));
      if (this.queryParams.dataTime.length > 0) {
        obj.startTime = this.queryParams.dataTime[0];
        obj.endTime = this.queryParams.dataTime[1];
      }
      delete obj.dataTime;
      getEvaluatePage(obj).then((res) => {
        this.dataList = res?.rows || [];
        this.total = res?.total || [];
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {},

    editHandler(row) {
      this.$refs.Evaluate.show(row.id, 1);
    },
    //判断是否能评价
    isEvaluateHandler(row) {
      let falg = false;
      let statsFalg = false;
      row.roleName?.split(",").forEach((item) => {
        this.roleList.forEach((i) => {
          if (i.roleName == item) {
            falg = true;
          }
        });
      });
      if (row.status == "0") {
        statsFalg = true;
      }
      if (statsFalg && falg) {
        return true;
      } else {
        return false;
      }
      // row
    },
    evaluateHandler(row) {
      this.$refs.Evaluate.show(row.id, 0);
    },

    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;
      this.getList();
    },
    // 节点单击事件
    clickTreeNode(data) {
      this.queryParams.orgId = data.id;
      this.getList();
    },

    cleanExecOrgList() {
      this.execOrgIds = null;
      this.queryParams.execOrgList = [];
    },

    getDefaultKey(key) {
      this.queryParams.orgId = key;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.onlyManager = false;
      this.queryParams.dataTime = [];
      this.queryParams.evaluateName = "";
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped></style>