SmartCommunity/operationSupport/src/views/performanceManagement/performanceEvaluation/index.vue

<!--
 * @Description: 
 * @Date: 2021-05-08 08:41:26
 * @LastEditTime: 2022-09-26 18:22:44
 * @FilePath: \WEB\maintenanceManagement\src\views\performanceManage\performanceEvaluation\performanceEvaluation.vue
-->
<template>
  <div style="padding-right: 20px">
    <div class="handle-box">
      <el-input
        class="servertype-serch"
        v-model.trim="mixins_query.userName"
        placeholder="请输入用户名"
      ></el-input>
      <select-tree
        class="new-select-tree"
        selectTreeTitle="所属公司"
        placeholder="请选择所属公司"
        :options="organListCompany"
        :props="defaultProps"
        v-model="mixins_query.companyOrgId"
        @selected="selectedcompanyOrgId"
      >
      </select-tree>
      <select-tree
        class="new-select-tree"
        selectTreeTitle="所属部门"
        placeholder="请选择所属部门"
        :options="organListdepartment"
        :props="defaultProps"
        v-model="mixins_query.deptOrgId"
      >
      </select-tree>
      <el-select
        clearable
        class="servertype-serch"
        v-model="mixins_query.state"
        placeholder="请选择考评状态"
      >
        <el-option
          v-for="(item, index) in allServiceStatu"
          :key="index"
          :label="item.label"
          :value="item.id"
        >{{
                    item.label
                }}</el-option>
      </el-select>
      <el-date-picker
        v-show="mixins_query.cycle == 0"
        :clearable="false"
        class="servertype-serch"
        v-model="days"
        type="month"
        placeholder="请选择月"
        format="yyyy年MM月"
      ></el-date-picker>
      <datepicker-quarter
        v-show="mixins_query.cycle == 1"
        :clearable="false"
        class="servertype-serch"
        type="quarter"
        placeholder="请选择季"
        value-format="yyyy年MM季度"
        @change-quarter="changeQuarter"
      ></datepicker-quarter>
      <el-date-picker
        v-show="mixins_query.cycle == 2"
        :clearable="false"
        class="servertype-serch"
        v-model="days"
        type="year"
        placeholder="请选择年"
        format="yyyy年"
      ></el-date-picker>

      <el-radio-group
        v-model="mixins_query.cycle"
        class="mr20 self-el-radio-group-box"
      >
        <el-radio :label="0">月度</el-radio>
        <el-radio :label="1">季度</el-radio>
        <el-radio :label="2">年度</el-radio>
      </el-radio-group>

      <el-button
        type="primary"
        class="search-btn"
        @click="getlistpage"
        icon="el-icon-search"
      >查询 </el-button>
      <!-- <i class="fr fr-fs-fc fr-add iconfont" @click="openEvaluationHandle" v-left-txt-tip data-txt="新增">&#xe641;</i>
            <i class="fr fr-fs-fc fr-del iconfont" @click="delusergroup" v-txt-tip data-txt="删除">&#xe63b;</i> -->
    </div>

    <!-- 表格 -->
    <div class="device-manage-table">
      <zz-table
        :cols="cols"
        :settings="{ showCheckbox: false, showIndex: true, stripe: true }"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
        @selection-change="selectionChange"
      >
        <template
          slot-scope="scope"
          slot="statecolor"
        >
          <span
            v-if="scope.row.state === '未考评'"
            style="color: #fd3a68"
          >{{ scope.row.state }}</span>
          <span
            v-else
            style="color: #21d4dc"
          >{{ scope.row.state }}</span>
        </template>
        <template
          slot-scope="scope"
          slot="opt"
        >
          <div class="opt">
            <el-tooltip
              effect="light"
              placement="bottom"
              content="考评"
            >
              <i
                class="iconfont"
                @click="openEvaluationHandle(scope.row)"
              >&#xe645;</i>
            </el-tooltip>
            <el-tooltip
              effect="light"
              placement="bottom"
              content="详情"
            >
              <i
                class="zoniot_font zoniot-icon-xiangqing"
                @click="openEvaluationDetile(scope.row)"
              ></i>
            </el-tooltip>
          </div>
        </template>
      </zz-table>
    </div>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  data () {
    return {
      mixins_query: {
        userName: '',
        companyOrgId: '',
        deptOrgId: '',
        state: '',
        cycle: 0,
        year: '',
        month: '',
        sort: 1
      },
      days: new Date(),
      lastQuarter: '',
      scenetypeList: [],
      organListCompany: '',
      organListdepartment: '',
      allServiceStatu: [
        {
          id: 1,
          label: '已考评'
        },
        {
          id: 0,
          label: '未考评'
        }
      ],
      defaultProps: {
        value: 'id', // 唯一标识
        label: 'orgName', // 标签显示
        children: 'orgs' // 子级
      },
      selectRow: '',
      allSelectRow: [],
      cols: [
        {
          label: '用户名',
          prop: 'evaluationBe'
        },
        {
          label: '所属公司',
          prop: 'companyOrgName'
        },
        {
          label: '所属部门',
          prop: 'deptOrgName'
        },
        {
          label: '考评状态',
          prop: 'state',
          slot: 'statecolor'
        },
        {
          label: '考评周期',
          prop: 'cycle'
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt'
        }
      ]
    };
  },
  created () {
    this.getorgTree();
    this.getlistpage();
  },
  methods: {
    getlistpage () {
      switch (this.mixins_query.cycle) {
        case 0:
          this.mixins_query.month = this.days.getMonth() + 1;
          this.mixins_query.year = this.days.getFullYear();
          break;
        case 1:
          this.mixins_query.month = this.lastQuarter.season;
          this.mixins_query.year = this.lastQuarter.year;
          break;
        case 2:
          this.mixins_query.month = '';
          this.mixins_query.year = this.days.getFullYear();
          break;
        default:
          break;
      }
      this.mixins_dataUrl = '/sc-community/evaluation/result/find/page';
      this.mixins_pageset = {
        pageNum: this.mixins_pageset.pageNum,
        pageSize: this.mixins_pageset.pageSize
      };
      this.mixins_post = 'post';
      this.mixins_search();
    },
    changeQuarter (val) {
      this.lastQuarter = val;
    },
    openEvaluationHandle (item) {
      let row = {};
      new Promise((resolve) => {
        this.$http.postForm('/sc-community/evaluation/task/find', { evaluationResultId: item.id }).then(({ status, data, msg }) => {
          if (status === 0) {
            row = data;
            resolve();
          } else {
            this.$message.error(msg);
          }
        });
      }).then(() => {
        new Promise((resolve) => {
          this.$store.dispatch('openModal', {
            url: '/performanceManagement/performanceEvaluation/popups/evaluationEdit.vue',
            width: '1200px',
            height: '510px',
            props: {
              rowInfo: item,
              data: row,
              year: this.mixins_query.year,
              month: this.mixins_query.month,
              callback: resolve
            },
            title: '考评',
            notip: true,
            confirmButtonText: '确定',
            showCancelButton: item.state === '未考评' ? false : true,
            showConfirmButton: item.state === '未考评' ? false : true
          });
        }).then(() => {
          this.mixins_search();
        });
      });
    },
    openEvaluationDetile (item) {
      let row = {};
      new Promise((resolve) => {
        this.$http.postForm('/sc-community/evaluation/task/find', { evaluationResultId: item.id }).then(({ status, data, msg }) => {
          if (status === 0) {
            row = data;
            resolve();
          } else {
            this.$message.error(msg);
          }
        });
      }).then(() => {
        new Promise((resolve) => {
          this.$store.dispatch('openModal', {
            url: '/performanceManagement/performanceEvaluation/popups/evaluationDetail.vue',
            width: '1200px',
            height: '510px',
            props: {
              rowInfo: item,
              data: row,
              cycle: this.mixins_query.cycle,
              year: this.mixins_query.year,
              month: this.mixins_query.month,
              callback: resolve
            },
            title: '考评详情',
            notip: true,
            showCancelButton: true,
            showConfirmButton: true
          });
        }).then(() => {
          // this.mixins_search();
        });
      });
    },
    selectionChange (val) {
      this.selectRow = val;
    },
    getorgTree () {
      // 获取公司树
      this.$http.postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'company', id: '000' }).then(({ status, data, msg }) => {
        if (status === 0 && data) {
          this.organListCompany = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    selectedcompanyOrgId (e) {
      if (!e) return;
      // 获取 部门树e
      this.$http.postForm('/sc-user-center/org/getOrgUserTree', { orgType: 'department', id: e }).then(({ status, data, msg }) => {
        if (status === 0) {
          this.organListdepartment = data ? data : [];
        } else {
          this.$message.error(msg);
        }
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.handle-box {
    height: 60px;
    background: #ffffff;
    opacity: 1;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 15px 20px;
    margin-bottom: 20px;
}
.fr {
    float: right;
}
.fr:last-child {
    margin-right: 20px;
}
.fr-fs-fc {
    color: #2787f1;
    font-size: 30px;
}
.servertype-serch {
    width: 200px;
    height: 30px;
    margin-right: 20px;
    vertical-align: top;
}
.new-select-tree {
    vertical-align: top;
    display: inline-block;
    margin-right: 25px;
    width: 200px;
}
.servertype-serch-btn {
    width: 60px;
    height: 30px;
    background: #2787f1;
    opacity: 1;
    border-radius: 4px;
    padding: 0;
}
.mr20 {
    margin-right: 20px;
}
.self-el-radio-group-box {
    vertical-align: sub;
}
</style>