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="组织机构">
                  <org-tree
                    v-model="queryParams.orgId"
                    @defaultOrg="getDefaultOrg"
                    @checkChange="checkChange"
                    @click="clickTreeNode"
                    hangsheTree
                  ref="orgTree"
                  :showCheckSub="false"
                  ></org-tree>
              </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-item v-if="this.cycle=='0'" label="月份" prop="searchTime">
        <el-date-picker v-model="queryParams.searchTime" align="right"
                        placeholder="请选择查询月份" type="month" value-format='yyyy-MM'>
        </el-date-picker>
      </el-form-item>

      <el-form-item  v-if="this.cycle=='1'"label="统计季度" prop="searchTime">
                <QuarterPicker format="yyyy年q季度" value-format="yyyy-MM" placeholder="请选择查询季度" v-model="queryParams.searchTime" />
              </el-form-item>

              <el-form-item v-if="this.cycle=='2'" label="年份" prop="searchTime">
          <el-date-picker
            value-format='yyyy'
            v-model="queryParams.searchTime"
            type="year"
            placeholder="选择查询年份">
          </el-date-picker>
        </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";
    import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
    import QuarterPicker from '@/views/components/QuarterPicker/index.vue'
export default {
  name: "SocWebIndex",

  components: {OrgTree,QuarterPicker
  },

  data() {
    const { params, query } = this.$route;
    return {
      targetList: [],
      average:0,
      obj: {},
      loading: false,
      average:'',//平均值
      selectedValues: [],
      planRoles: [],
      options: [],
      fullTableTitle: "对押运公司月度评价",
      cycle:"0",
      orgName:null,
      queryParams: {
        orgId: null,
        planId: null,
        searchTime:new Date,
        // date: newDateMonth("", "1"),
      },
      // 显示搜索条件
      showSearch: true,
      total: 0,
      dataList: [],
      deptOptions: [], //机构数组
    };
  },

  computed: {
    ...mapGetters(["orgId"]),
  },

  watch: {
    queryParams() {
      this.getList();
    },
  },

  created() {
   // this.getDeptTree();
    this.getevlauteList();
  },

  mounted() {
    if (this.deptOptions) {
      this.queryParams.orgId = this.orgId;
    }
  },

  methods: {
    getDefaultOrg(node) {
      this.queryParams.orgId = node.id;
      this.selectedOrgName = node.shortName;
      this.getList();
    },
        //单选框状态改变
        checkChange(state) {
      this.queryParams.checkSub = state;
      this.getList();
    },
            // 节点单击事件
            clickTreeNode(data) {
      if(data==null){
        return;
      }
      this.queryParams.orgId = data.id;
      this.selectedOrgName = data.shortName;
      this.getList();
    },

    changeHandler(id) {
    this.  options.forEach(element => {
        if(element.id==id){
          this.cycle=element.evaluateCycle;
        }
      });
      console.log(this.cycle+"efijewioo")
      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;
        this.cycle=res[0].evaluateCycle;
        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,
        searchTime:new Date(),
      };
      this.cycle=this.options[0].evaluateCycle;
      this.getList();
    },
    //导出
    exportExcel() {},
  }
};
</script>

<style lang="scss" scoped>
::v-deep.formTreeItem {
  .el-form-item__content {
    width: 264px;
  }
}
.securityEquipmentMonitoringtable {
  padding-block-start: 0.83em;
  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: 24px;
  letter-spacing: 3px;
  font-weight: 500;
  // margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  padding:10px;
}
</style>