soc_web/src/views/evaluateTable/index.vue

<template>
  <div class="app-container">
    <el-row slot="rightBar">
      <!--用户数据-->
      <el-col>
        <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="组织机构:" class="formTreeItem">
                <tree-select
                  v-model="queryParams.orgId"
                  :options="deptOptions"
                  :show-count="true"
                  :normalizer="tenantIdnormalizer"
                  :props="{ checkStrictly: true, label: 'name' }"
                  placeholder="请选择归属机构"
                  clearValueText="清除"
                  :noChildrenText="''"
                  @select="changeSelect"
                  noOptionsText="没有数据"
                  noResultsText="没有搜索结果"
                />
              </el-form-item>
              <el-form-item label="外包评价名称:" label-width="50">
                <el-select v-model="queryParams.planId" @change="changeHandler">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.evaluateName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

            </el-form>
            <!-- 按纽    -->
        <el-row :gutter="10" >
              <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-button type="primary" icon="el-icon-download" size="mini" @click="handleExport"
                         v-hasPermi="['core:evaluateTaskReport:export']">导出数据
              </el-button>
         
              </el-col>
            </el-row>
          </div>
        </div>


        <div
          v-if="obj && obj.length > 0"
          class="securityEquipmentMonitoringtable ml-4 flex-1"
        >
          <div class="title">{{ fullTableTitle }}</div>
          <table ref="tb11" class="table-scroll">
            <tr>
              <th colspan="1" rowspan="1">序号</th>
              <th colspan="1" rowspan="1" :key="item" v-for="item in obj">
                {{ item }}
              </th>

            </tr>
            <tr v-for="(item, index) in targetList" :key="index">
              <td>{{ index+1 }}</td>
              <td v-for="i in obj" :key="i">{{ item[i] }}</td>
            </tr>
            <tr>

              <th :colspan="obj.length" rowspan="1">平均得分</th>
              <th :colspan="1" rowspan="1">{{average}}</th>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { findAllRole } from "@/api/system/role";
import { list, getPlanList } from "@/api/evaluateTable/evaluateTable.js";
import { newDateMonth } from "@/utils/index.js";
import { deptTreeSelect } from "@/api/system/public";
export default {
  name: "SocWebIndex",

  components: {
  },
  data() {
    const { params, query } = this.$route;
    return {
      targetList: [],
      average:0,
      obj: {},
      loading: false,
      average:'',//平均值
      selectedValues: [],
      planRoles: [],
      options: [],
      fullTableTitle: "对押运公司月度评价",
      orgName:null,
      queryParams: {
        orgId: null,
        planId: "",
        // date: newDateMonth("", "1"),
      },
      // 显示搜索条件
      showSearch: true,
      total: 0,
      dataList: [],
      deptOptions: [], //机构数组
    };
  },
  created() {
    this.getDeptTree();
    this.getevlauteList();
  },
  watch: {
    queryParams() {
      this.getList();
    },
  },
  mounted() {
    if (this.deptOptions) {
      this.queryParams.orgId = this.orgId;
    }
  },
  computed: {
    ...mapGetters(["orgId"]),
  },
  methods: {
    changeHandler() {
      this.getList();
    },
    changeSelect() {
      this.getList();
    },
    /** 查询机构树数据 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.queryParams.orgId=response.data[0].id;
      });
    },
    /** 获取所有计划列表 */
    getevlauteList() {
      getPlanList().then((res) => {
        this.queryParams.planId = res[0].id;
        this.options = res;
        console.log(res,'res');
        if (this.queryParams.orgId && this.queryParams.planId) {
          this.getList();
        }
      });
    },
    /** treeSelect组件自定义数据*/
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.shortName,
        children: node.children,
      };
    },
    handleExport() {
      this.download('core/task/export', {
        ...this.queryParams
      }, `${'【'+this.orgName+'】'+'-外包履职评价报表-'+this.formatTime(new Date(),'YYYYMMDD')}.xlsx`)
    },
    //获取列表
    getList() {
      this.loading = true;

      list(this.queryParams).then((res) => {
        let { code, data, msg } = res;
        if (code == 200) {
          this.targetList = data.list || [];
          this.fullTableTitle=res.tittle;
this.orgName=res.orgName;
          this.average=data.average||0
          if (this.targetList) {
            this.obj = Object.keys(this.targetList[0]);
          }
        }
        this.loading = false;
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.Evaluate.show();
    },
    editHandler(row) {
      this.$refs.Evaluate.show(row);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        orgId: this.orgId,
        planId: this.options[0].id,
      };

      this.getList();
    },
    //导出
    exportExcel() {},
  },
};
</script>
<style lang="scss" scoped>
::v-deep.formTreeItem {
  .el-form-item__content {
    width: 264px;
  }
}
.securityEquipmentMonitoringtable {
  background-color: #fff;
  .table-scroll {
    // table-layout:auto;

    color: #000000;
    min-width: 100%;
    border-spacing: 0;
    text-align: center;
    border-collapse: collapse;
    max-height: 500px;
    overflow-y: auto;
    font-family: "仿宋_GB2312";

    .orgName {
      min-width: 180px !important;
      width: 180px !important;
    }

    tr th,
    tr td {
      height: 25px;
      border: 1px solid rgb(0, 0, 0);
      // min-width: 75px;
    }

    .jump {
      color: #02a7f0;
      text-decoration: underline;
    }

    .nojump {
      color: #000000;
      font-size: 10;
      //font-weight: bold;
    }

    .greentd {
      color: green;
    }
    .redtd {
      color: red;
    }
  }
}

.title {
  clear: both;
  margin: auto;
  text-align: center;
  color: black;
  font-size: x-large;
  letter-spacing: 3px;
  font-weight: bold;
}
</style>