soc_web/src/views/scorestatistics/index.vue

<template>
  <div class="app-container">
    <el-row>
      <!--用户数据-->
      <el-col>
        <div class="main-search-box">
          <!--    搜索条件    -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            pageSize="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="''"
                :clearable="false"
                noOptionsText="没有数据"
                noResultsText="没有搜索结果"
              />
            </el-form-item>
            <el-form-item label="年月">
              <el-date-picker
                type="month"
                v-model="queryParams.date"
                placeholder="选择年月"
                :clearable="false"
                value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-form-item>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  pageSize="mini"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  pageSize="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>

        <el-table
          border
          height="650"
          pageSize="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="年月" :formatter="formatterScore" />
          <el-table-column label="机构名称" prop="orgName"> </el-table-column>
          <el-table-column label=">90 低" prop="level_gt90">
            <template slot-scope="{ row }">
              <div>
                <span class="text" @click="clickHandlerRow(row, 1)">{{
                  row.level_gt90
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="80-90 中" prop="level_80_90">
            <template slot-scope="{ row }">
              <div>
                <span class="text" @click="clickHandlerRow(row, 2)">{{
                  row.level_80_90
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="70-80 高" prop="level_70_80">
            <template slot-scope="{ row }">
              <div>
                <span class="text" @click="clickHandlerRow(row, 3)">{{
                  row.level_70_80
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="70及以下 极高" prop="level_lt70">
            <template slot-scope="{ row }">
              <div>
                <span class="text" @click="clickHandlerRow(row, 4)">{{
                  row.level_lt70
                }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-button
                pageSize="mini"
                @click="editHandler(row)"
                type="text"
                class="el-icon-view"
                >查看</el-button
              ><el-button
                pageSize="mini"
                @click="anewHandler(row)"
                type="text"
                class="el-icon-edit-outline"
                >重新计算</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"
        />
      </el-col>
    </el-row>

    <scorestatisticsDialog
      ref="Evaluate"
      :targetList="targetList"
      @success="getList()"
    ></scorestatisticsDialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { findAllRole } from "@/api/system/role";
import { list, anewDetail } from "@/api/scorestatistics/scorestatistics.js";
import OrgTree from "@/components/orgTree";
import { newDateMonth } from "@/utils/index.js";
import scorestatisticsDialog from "./scorestatisticsDialog.vue";
import { deptTreeSelect } from "@/api/system/public";
export default {
  name: "SocWebIndex",
  dicts: ["sys_org_type", "plan_status"],

  components: {
    OrgTree,
    scorestatisticsDialog,
  },
  data() {
    const { params, query } = this.$route;
    return {
      targetList: [],
      targetListChild: [],
      targetListGrandson: [],
      loading: false,
      selectedValues: [],
      planRoles: [],

      queryParams: {
        orgId: null,
        date: newDateMonth("", "1"),

        pageNum: 1,
        pageSize: 10,
      },
      // 显示搜索条件
      showSearch: true,
      total: 0,
      dataList: [],
      deptOptions: [], //机构数组
    };
  },
  created() {
    this.queryParams.orgId = this.orgId;
    this.getList();
    this.getDeptTree();
  },
  mounted() {},
  computed: {
    ...mapGetters(["orgId"]),
  },
  methods: {
    /** 查询机构树数据 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** treeSelect组件自定义数据*/
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.shortName,
        children: node.children,
      };
    },
    formatterScore({ dataYear, dataMonth }) {
      return dataYear + "-" + dataMonth;
    },

    //获取列表
    getList() {
      this.loading = true;
      // this.queryParams.orgId = this.orgId;
      list(this.queryParams).then((res) => {
        this.dataList = res?.rows || [];
        this.total = res?.total || [];
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {},
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.Evaluate.show();
    },
    editHandler(row) {
      this.$refs.Evaluate.show(row);
    },

    anewHandler(row) {
      this.$modal
        .confirm("重新计算将会等待一段时间，你确定要重新计算吗?")
        .then(function () {})
        .then(() => {
          anewDetail({
            month: row.dataMonth,
            year: row.dataYear,
            orgId: row.orgId,
          }).then((res) => {
            let { code, msg } = res;
            if (code == 200) {
              this.getList();
              this.$modal.msgSuccess("计算成功");
            } else {
              this.$modal.msgSuccess(msg);
            }
          });
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        orgId: null,
        date: "",
        pageNum: 1,
        pageSize: 10,
      };

      this.getList();
    },
    clickHandlerRow(row, num) {
      row.levelId = num;
      this.$refs.Evaluate.show(row);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.formTreeItem {
  .el-form-item__content {
    width: 264px;
  }
}
.text {
  color: #008cd6;
  text-decoration: underline;
  cursor: pointer;
}
</style>