dd_jx_pc/src/components/set/EvaluateSet.vue

<template>
  <div class="all">
    <header class="flex-box-ce">
      <div class="flex-1"><el-input prefix-icon="el-icon-search" placeholder="搜索考核表" v-model="search_words" class="width-250" clearable></el-input></div>
      <div class="flex-box-ce" v-if="$isAuthoritys($14)">
        <el-button type="text" style="margin-right: 10px;text-decoration:underline" @click="openUsers">无考核表人员</el-button>
        <el-button type="primary" style="margin-right: 10px;" @click="handleCommand('A')">新增考核表</el-button>
        <el-button class="primaryBtn" @click="handleCommand('B')">复制考核表</el-button>
      </div>
    </header>
    <div class="main">
      <div style="margin-top: 20px;">
        <div class="yellow" v-if="isUpdata">刚刚操作了【{{isUpdata}}】，你可以 “<span class="blue" @click="$router.push({ path: '/sponsorAssess' })">发起考核</span>” 或继续 “<span class="blue" @click="handleCommand('A')">新增考核表</span>” </div>
        <el-table stripe :data="tableData" class="table-box scroll-bar" style="width: 100%;" v-loading="loading">
          <el-table-column prop="name" width="600px" sortable label="名称">
            <template slot-scope="scope">
              <PreBox :value="scope.row.name"></PreBox>
            </template>
          </el-table-column>
          <el-table-column prop="employee_num" label="参与人数"></el-table-column>
          <el-table-column prop="cycle_type" label="周期类型" sortable>
            <template slot-scope="scope">
              <span>{{ $getCycleType(scope.row.cycle_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div class="is">
                <span class="blue" @click="compile(scope.row,'1')">人员分组</span>
                <span class="blue" style="margin: 0 10px;" @click="compile(scope.row,'2')">考核模板</span>
                <span class="blue" @click="compile(scope.row,'3')">具体流程</span>

              <!-- <el-tooltip effect="dark" content="编辑" placement="top"><i class="el-icon-edit yellow" @click="compile(scope.row)"></i></el-tooltip>
                <el-tooltip effect="dark" content="预览流程" placement="top"><i class="el-icon-tickets blue" @click="preview(scope.row)"></i></el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="top"><i class="el-icon-delete red" @click="deleteItem(scope.row.id)"></i></el-tooltip> -->
              </div>
              <el-dropdown placement="bottom" :show-timeout="150" :hide-timeout="150">
                <span class="el-dropdown-links">···</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :disabled="false">
                    <el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="preview(scope.row)">预览流程</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="false">
                    <el-button type="text" class="color-red" v-loading.fullscreen.lock="bodyLoad" @click.stop="deleteItem(scope.row.id)">删除</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
      </div>
    </div>

    <BrawerBox drawerTitle="选择考核表" :showDrawer.sync="isChecks">
      <template slot="main">
        <div class="flex-box-ce">
          <el-input prefix-icon="el-icon-search" placeholder="搜索考核" v-model="search_words2"></el-input>
          <el-select v-model="cycle_type" placeholder="" style="margin: 0 10px;">
            <el-option v-for="item in $getCycleType()" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <ul class="ul" v-if="allData.length > 0">
          <li v-for="(item, index) in allData" :key="index" class="flex-box-ce li" v-if="item.name.indexOf(search_words2) >= 0">
            <el-radio v-model="cycleId" :label="item.id" class="flex-box-ce flex-1" style="padding: 15px 0;">
              <div class="flex-box-ce">
                <div class="flex-1">{{ item.name }}</div>
                <div class="blue" v-if="item.employee_num > 0">{{ item.employee_num }} 人</div>
              </div>
            </el-radio>
          </li>
        </ul>
        <NoData v-else content="暂无内容"></NoData>
      </template>
      <template slot="footer">
        <el-button plain @click="isChecks = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('detailForm')">确定</el-button>
      </template>
    </BrawerBox>

    <BrawerBox drawerTitle="无考核表人员" :showDrawer.sync="isNoUser">
      <template slot="main">
        <div class="flex-box-ce"><el-input prefix-icon="el-icon-search" placeholder="人员搜索" v-model="search_words3"></el-input></div>
        <ul class="ul" v-if="isNoUserList.length > 0">
          <li v-for="(item, index) in isNoUserList" :key="index" class="flex-box-ce li" style="padding: 15px 0;" v-if="item.name.indexOf(search_words3) >= 0">
            <userImage :user_name="item.name" fontSize="14" :img_url="item.img_url"></userImage>
            <div class="flex-box-v" style="margin: 0 10px;">
              <div>{{ item.name }}</div>
              <div v-if="item.dept_list.length > 0" style="margin-top: 5px;" class="fontColorF font-flex-word">
                <span v-for="(item2, index2) in item.dept_list" :key="index2">
                  <span>{{ item2.name }}</span>
                  <span v-if="item.dept_list.length - index2 > 1">,</span>
                </span>
              </div>
            </div>
          </li>
        </ul>
        <NoData v-else content="暂无内容"></NoData>
      </template>
      <template slot="footer">
        <el-button plain @click="isNoUser = false">关闭</el-button>
      </template>
    </BrawerBox>
  </div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import BrawerBox from '@/components/public/BrawerBox';
import { _debounce } from '@/api/auth';
export default {
  components: { EmployeeSelector, BrawerBox },
  name: 'EvaluateSet',
  data() {
    return {
      total: 0,
      page: 1,
      page_size: 10,
      tableData: [],
      allData: [],
      search_words: '', //关键字
      search_words2: '',
      search_words3: '',
      isChecks: false,
      loading: false,
      cycle_type: 0,
      cycleId: '',
      // 获取未加入考核表相关
      isNoUser: false,
      isNoUserList: [],

      bodyLoad: false,
	  isUpdata:''
    };
  },
  watch: {
    isNoUser(val) {
      if (!val) {
        this.search_words3 = '';
      }
    },
    search_words: {
      deep: true,
      handler: _debounce(function(val) {
        this.page = 1;
        this.getList();
      })
    },
    cycle_type() {
      this.getAllList();
    }
  },
  created() {
    this.getList();
    this.getAllList();
  },
  activated(e) {
	this.isUpdata=this.$getCache('isUpdata');
	if(this.isUpdata){
		this.$removeCache('isUpdata');
	}
  },
  methods: {
	  
    openUsers() {
      this.getNoEmployee(() => {
        this.isNoUser = true;
      });
    },
    // 获取未加入考核表人员
    getNoEmployee(fun = function() {}) {
      this.$axios('get', 'api/per/package/free_man').then(res => {
        this.isNoUserList = res.data.data.list;
        fun();
      });
    },
    //预览流程
    preview(item) {
      if (item.employee_num == 0) {
        this.$message.warning('该考核表没有参与人数，不可预览');
        return false;
      }
      this.$router.push({ path: '/previewTow', query: { group_id: item.id, name: item.name } });
    },
    //删除
    deleteItem(id) {
      this.$confirm('确定删除该考核表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios('post', '/api/per/evaluation/delete_group', { id: id }).then(res => {
            this.$message.success('删除成功');
            this.getList();
          });
        })
        .catch(() => {});
    },
    //编辑
    compile(item,index) {
      let http = this.$axios('get', '/api/per/evaluation/group_detail', { id: item.id });
      let http2 = this.$axios('get', '/api/per/evaluation/manager', { id: item.id });
      Promise.all([http, http2]).then(res => {
        res[0].data.data.mannager_ids = res[1].data.data.list;
        this.$router.push({ path: '/evaluate', query: { data: JSON.stringify(res[0].data.data),index:index } });
      });
    },
    search() {
      this.page = 1;
      this.getList();
    },
    // 获取全部考核表
    getAllList() {
      this.$axios('get', '/api/per/evaluation/all_group', { cycle_type: this.cycle_type }).then(res => {
        let data = res.data.data.list || [];
        this.allData = data;
      });
    },
    // 获取考核表
    getList() {
      this.loading = true;
      this.$axios('get', '/api/per/evaluation/all_group', { page: this.page, page_size: this.page_size, search_words: this.search_words })
        .then(res => {
          let data = res.data.data.list || [];
          this.total = res.data.data.total;
          this.tableData = data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    actionCheck(e, obj) {},
    handleCommand(e) {
      if (e == 'A') {
        this.$router.push({ path: '/evaluate' });
      } else {
        this.isChecks = true;
      }
    },
    submitForm() {
      if (!this.cycleId) {
        this.$message.error('请选择考核表');
        return false;
      }
      let http = this.$axios('get', '/api/per/evaluation/group_detail', { id: this.cycleId });
      this.isChecks = false;
      Promise.all([http]).then(res => {
        res[0].data.data.mannager_ids = [];
        res[0].data.data.id = '';
        res[0].data.data.name = '';
        this.$router.push({ path: '/evaluate', query: { data: JSON.stringify(res[0].data.data) } });
      });
    },
    openHome() {
      this.$router.push({ path: '/home' });
    },
    // 页面变更
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 页面跳转
    handleSizeChange(val) {
      this.page_size = val;
      this.getList();
    }
  }
};
</script>
<style scoped="scoped">
	.blue{
	cursor: pointer;
}	
.el-dropdown-links {
  font-size: 20px;
  cursor: pointer;
  color: #a6a8aa;
}

::v-deep .el-table tr:hover {
  cursor: pointer;
}
.is i {
  font-size: 18px;
  padding: 0 10px;
  /* cursor: pointer; */
}
.all {
  padding: 10px;
  min-height: calc(100vh - 210px);
  position: relative;
}
.title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.width-250 {
  width: 250px;
}
.title-f {
  margin-bottom: 20px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
}
.checkChild {
  background-color: #fbfdff;
  margin-left: 20px;
}
.li {
  border-bottom: 1px solid #f1f1f1;
}
.li:hover {
  background-color: #f5f7fa;
}
.ul {
  margin-top: 20px;
}
.table-box {
  /* max-height: calc(100vh - 330px); */
  overflow: auto;
}
</style>