|
|
@@ -0,0 +1,1017 @@
|
|
|
+<template>
|
|
|
+ <div class="all-box">
|
|
|
+ <div class="all">
|
|
|
+ <div class="flex-box" v-loading="groups_loading">
|
|
|
+ <div class="terr-left">
|
|
|
+ <el-button v-if="employeeOrdept" size="medium" @click="addGroup" type="primary">新建分组</el-button>
|
|
|
+ <el-menu default-active="0" class="el-menu-vertical-demo" style="border: none" v-if="groups_list.length>0">
|
|
|
+ <el-menu-item
|
|
|
+ style="height: 47px;line-height: 47px;"
|
|
|
+ :index="index.toString()"
|
|
|
+ class="font-flex-word"
|
|
|
+ v-for="(item, index) in groups_list"
|
|
|
+ :key="index"
|
|
|
+ @click="open_right(item)"
|
|
|
+ v-show="item.code !== 'employee'"
|
|
|
+ >
|
|
|
+ <i class="el-icon-document-copy"></i>
|
|
|
+ <span slot="title">{{ item.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ <div v-else style="text-align: center;margin-top: 10%;" class="fontColorF">
|
|
|
+ <img src="@/assets/image/nodata.png" style="width: 180px;height: 120px;margin: 30px auto;">
|
|
|
+ 还没有自定义分组
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="terr-right border-right flex-1" v-loading="table_loading">
|
|
|
+ <div class="listData" v-if="table_list.length > 0">
|
|
|
+ <div class="flex-box">
|
|
|
+ <div class="flex-box flex-v-ce margin-bottom">
|
|
|
+ <div class="groupsName">{{groups_info.name}}<span class="blue">({{total}}人)</span></div>
|
|
|
+ <el-button v-if="employeeOrdept" @click="editGroup" size="medium">编辑</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- form -->
|
|
|
+ <el-form :model="params" :inline="true" ref="params">
|
|
|
+ <!-- <el-form-item label="时间" label-width="40px">
|
|
|
+ <el-date-picker v-model="params.month" size="medium" type="month" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
|
|
|
+ </el-form-item> -->
|
|
|
+
|
|
|
+ <el-form-item label="月份" label-width="40px" v-if="newGroupForm.date_interval == 1">
|
|
|
+ <el-date-picker v-model="time.month" type="month" :clearable="false" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="年份" label-width="40px" v-if="newGroupForm.date_interval == 3">
|
|
|
+ <el-date-picker v-model="time.year" type="year" :clearable="false" placeholder="请选择年份" value-format="yyyy"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="季度" label-width="40px" v-if="newGroupForm.date_interval == 2">
|
|
|
+ <!-- <el-date-picker
|
|
|
+ v-model="time.quarter"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择季度"
|
|
|
+ value-format="Q"
|
|
|
+ ></el-date-picker> -->
|
|
|
+
|
|
|
+ <Season :defaultHint="true" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></Season>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-checkbox v-model="sort" size="medium" label="由低到高" border></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table :data="table_list" style="width: 100%" >
|
|
|
+ <el-table-column label="名次" width="80" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt="" />
|
|
|
+ <img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt="" />
|
|
|
+ <img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt="" />
|
|
|
+ <span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="姓名" align="left">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="flex-box">
|
|
|
+ <userImage class="fl" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
|
|
|
+ <span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="B分" align="left" prop="point"></el-table-column>
|
|
|
+ <template slot="empty">
|
|
|
+ <noData></noData>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <center style="padding: 20px 0;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ :page-size="params.page_size"
|
|
|
+ :current-page="params.page"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </center>
|
|
|
+ </div>
|
|
|
+ <div v-else style="margin-top: 10%;">
|
|
|
+ <noData :isSolt="true">
|
|
|
+ <template v-slot:default>
|
|
|
+ <div style="text-align: center;">还没有分组<span v-if="employeeOrdept">,</span><span v-if="employeeOrdept" style="color:#26A2FF;cursor:pointer" @click="addGroup">去添加 >></span></div>
|
|
|
+ </template>
|
|
|
+ </noData>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 新增编辑分组 -->
|
|
|
+ <el-dialog :title="popupType? '新增分组':'编辑分组'" width="660px" top="5%" :visible.sync="groupShow" @close="resetForm('newGroupForm')" :close-on-click-modal="false">
|
|
|
+ <el-form ref="newGroupForm" :model="newGroupForm" :rules="rules" label-width="85px" @submit.native.prevent>
|
|
|
+ <el-form-item label="分组名称" prop="group_name">
|
|
|
+ <el-input v-model="newGroupForm.group_name" placeholder="请输入分组名称" :clearable="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分组成员">
|
|
|
+ <el-input v-model="employeeNames" placeholder="全部成员"></el-input>
|
|
|
+ <div @click="isEmployeeShow=true" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
|
|
|
+ <el-dialog title="选择人员" width="700px" :visible.sync="isEmployeeShow" append-to-body :before-close="handleClose">
|
|
|
+ <EmployeeSelector
|
|
|
+ v-if="isEmployeeShow"
|
|
|
+ ref="Employee"
|
|
|
+ :user_no_select="false"
|
|
|
+ :can_select_dept="true"
|
|
|
+ :selected="employees_selected"
|
|
|
+ :close_clear_data="true"
|
|
|
+ @confirm="move_employee_confirm"/>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="isEmployeeShow = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitEmployee()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="积分规则">
|
|
|
+ <el-input v-model="newGroupFormRules" placeholder="全部规则分类"></el-input>
|
|
|
+ <div @click="ruleDialogTableVisibles" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
|
|
|
+ <div style="margin-bottom:12px;">
|
|
|
+ <span style="font-size:13px;color:rgb(138 138 138);position: absolute; top: 30px; left: 0;">{{ruleHint}}</span>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="选择规则" width="800px" :visible.sync="ruleDialogTableVisible" append-to-body :before-close="handleClose">
|
|
|
+ <div style="display:flex;position: relative;width:100%;height:40px">
|
|
|
+ <span style="position: absolute;line-height:40px;left:20px">已选：{{ valuesOrLength.length }}条</span>
|
|
|
+ <el-input type="text" class="search" style="position: absolute;right:20px;width:20%" placeholder="输入关键字搜索" v-model.trim="keyword" />
|
|
|
+ </div>
|
|
|
+ <el-row class="architecture">
|
|
|
+ <el-col :span="8" class="RuleLeft" style="height:500px">
|
|
|
+ <div class="rule_class_box">
|
|
|
+ <el-tree
|
|
|
+ ref="menum"
|
|
|
+ class="cate-tree"
|
|
|
+ node-key="id"
|
|
|
+ :accordion="true"
|
|
|
+ :highlight-current="true"
|
|
|
+ :data="rule_trees"
|
|
|
+ :default-expand-all="false"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ <div content="tree" v-if="!data.dis" v-show="rule_trees.length != 0" slot-scope="{ node, data }">
|
|
|
+ <span class="name">{{ data.name }}</span>
|
|
|
+ </div>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="RuleRight" v-loading="tableLoadingRule" style="height:500px;overflow-y:auto">
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData_rule"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%;cursor:pointer"
|
|
|
+ @select="onTableSelect"
|
|
|
+ @select-all="selectAll"
|
|
|
+ @cell-click="clicktable"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
+ <el-table-column prop="remark" :label="'全选'" show-overflow-tooltip></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="ruleDialogTableVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="ruleDialogTableVisibleQD">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="统计周期" label-width="85px" prop="date_interval" :show-message="false">
|
|
|
+ <el-select v-model="newGroupForm.date_interval" placeholder="请选择周期">
|
|
|
+ <el-option v-for="item in options_time" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="flex-box flex-v-ce">
|
|
|
+ <el-button type="danger" v-if="!popupType" :disabled="delLoad" :loading="delLoad" @click="delItem">删除</el-button>
|
|
|
+ <div class="flex-1"></div>
|
|
|
+ <el-button @click="resetForm('newGroupForm')">取 消</el-button>
|
|
|
+ <el-button type="primary" :loading="saveLoad" :disabled="saveLoad" @click="subGroupForm('newGroupForm')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import EmployeeSelector from '@/components/EmployeeSelector.vue';
|
|
|
+import noData from '@/components/noData';
|
|
|
+import moment from 'moment'
|
|
|
+var selecteds = [];
|
|
|
+let selectionID = [];
|
|
|
+export default {
|
|
|
+ components: { EmployeeSelector, noData },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ total: null,
|
|
|
+ tips_show:false,
|
|
|
+ groups_list:[],
|
|
|
+ groups_loading:false,
|
|
|
+ table_loading:false,
|
|
|
+ table_list:[],
|
|
|
+ time: {
|
|
|
+ year: moment().format('YYYY'), //年
|
|
|
+ quarter: moment().format('YYYYQ'), //季度
|
|
|
+ month: moment().format('YYYY-MM') //月
|
|
|
+ },
|
|
|
+ groups_info: {
|
|
|
+ name:'',
|
|
|
+ employees: []
|
|
|
+ },
|
|
|
+ //
|
|
|
+ params:{
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ group_id: '',
|
|
|
+ // month: moment().format('YYYY-MM'),
|
|
|
+ sort: 'asc',
|
|
|
+ // rule_id: '',
|
|
|
+ },
|
|
|
+ rule_trees: [],
|
|
|
+ clickItem: null,
|
|
|
+ groupShow: false,
|
|
|
+ rules: {
|
|
|
+ group_name: [{ required: true, message: '请输入分组名称', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
|
|
|
+ date_interval: [{ required: true, message: '请选择周期', trigger: 'change' }],
|
|
|
+ },
|
|
|
+ newGroupForm:{
|
|
|
+ group_name: "",
|
|
|
+ employees: [],
|
|
|
+ items:[],
|
|
|
+ date_interval:"1",
|
|
|
+ },
|
|
|
+ saveLoad: false,
|
|
|
+ delLoad: false,
|
|
|
+ show_employee_selector: false,
|
|
|
+ employee_not_select: [],
|
|
|
+ employees_selected: {employee:[], dept: []},
|
|
|
+ props:{checkStrictly: true,value: 'id', label: 'name',children:'child'},
|
|
|
+ sort: false,
|
|
|
+
|
|
|
+ popupType: false,
|
|
|
+
|
|
|
+ // 添加分组（第二期内容添加）
|
|
|
+ ruleDialogTableVisible:false,
|
|
|
+ defaultProps: {
|
|
|
+ children: 'child',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ tableLoadingRule:false,
|
|
|
+ tableData_rule: [],
|
|
|
+ options_time_value: '',
|
|
|
+ options_time: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '月度'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '季度'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '年度'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ newGroupFormRules:'',
|
|
|
+ ruleHint:'统计所有积分(基础分和工龄分除外)',
|
|
|
+ valuesOrLength: [],
|
|
|
+ keyword:'',
|
|
|
+ treedata: [],
|
|
|
+ isEmployeeShow:false,
|
|
|
+ employeeNames:'',
|
|
|
+ employeeOrdept:!this.$authoritys('employee') && !this.$authoritys('dept_manager'),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRuleList();
|
|
|
+ this.get_groups_list(true);
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ 'params.rule_id'(){
|
|
|
+ this.$refs.rule.dropDownVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ 'time.month'(val, old_val) {
|
|
|
+ this.time.month = val;
|
|
|
+ this.params.page = 1;
|
|
|
+ this.open_right(this.clickItem);
|
|
|
+ },
|
|
|
+ 'time.year'(val, old_val) {
|
|
|
+ this.time.year = val;
|
|
|
+ this.params.page = 1;
|
|
|
+ this.open_right(this.clickItem);
|
|
|
+ },
|
|
|
+ // 'params.month'(val,old_val){
|
|
|
+ // this.page = 1
|
|
|
+ // this.open_right()
|
|
|
+ // },
|
|
|
+ 'sort'(val){
|
|
|
+ this.params.page = 1;
|
|
|
+ val ? (this.params.sort = 'desc') : (this.params.sort = 'asc');
|
|
|
+ this.open_right(this.clickItem);
|
|
|
+ },
|
|
|
+ keyword() {
|
|
|
+ //函数节流
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ }
|
|
|
+ //清空 全部
|
|
|
+ if (!this.keyword) {
|
|
|
+ this.tableData_rule = this.tableData_rule2;
|
|
|
+ this.ifPitchOnChild(this.tableData_rule, selecteds);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ const result = [];
|
|
|
+ this.tableData_rule2.forEach(val => {
|
|
|
+ if (val.remark.indexOf(this.keyword) > -1) {
|
|
|
+ result.push(val);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tableData_rule = result;
|
|
|
+ this.ifPitchOnChild(this.tableData_rule, selecteds);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 第二期内容
|
|
|
+
|
|
|
+ //
|
|
|
+ submitEmployee(){
|
|
|
+ this.$refs.Employee.confirm();//调用组件的confirm（）；
|
|
|
+ },
|
|
|
+ //点击规则弹出窗口
|
|
|
+ ruleDialogTableVisibles() {
|
|
|
+ this.tableLoadingRule = true;
|
|
|
+ selecteds = this.valuesOrLength;
|
|
|
+ //点击弹出窗口并展示所有数据
|
|
|
+ let tableData_r = [];
|
|
|
+ for (let i in this.itemList) {
|
|
|
+ for (let a in this.itemList[i]) {
|
|
|
+ tableData_r.push(this.itemList[i][a]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableData_rule2 = tableData_r; //赋予筛选数据
|
|
|
+ this.tableData_rule = tableData_r;
|
|
|
+ this.ruleDialogTableVisible = true;
|
|
|
+ this.ifPitchOnChild(this.tableData_rule, selecteds);
|
|
|
+ },
|
|
|
+
|
|
|
+ //规则弹窗确定
|
|
|
+ ruleDialogTableVisibleQD() {
|
|
|
+ let valuesLengths = [];
|
|
|
+ for (let i in selecteds) {
|
|
|
+ valuesLengths.push(selecteds[i]);
|
|
|
+ }
|
|
|
+ this.valuesOrLength = valuesLengths;
|
|
|
+ this.newGroupForm.items = this.valuesOrLength;
|
|
|
+ if (this.valuesOrLength.length >= 1) {
|
|
|
+ this.newGroupFormRules = this.valuesOrLength.length + '条规则';
|
|
|
+ this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
|
|
|
+ } else {
|
|
|
+ this.newGroupFormRules = '';
|
|
|
+ this.ruleHint = '统计所有积分(基础分和工龄分除外)'
|
|
|
+ }
|
|
|
+ this.ruleDialogTableVisible = false;
|
|
|
+ },
|
|
|
+ //点击某行
|
|
|
+ clicktable(row, column, cell, event) {
|
|
|
+ let selectedsif = false;
|
|
|
+ for (let i in selecteds) {
|
|
|
+ if (row.id == selecteds[i]) {
|
|
|
+ selectedsif = true;
|
|
|
+ selecteds.splice(i, 1);
|
|
|
+ this.toggleSelection([row], false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (selectedsif == false) {
|
|
|
+ selecteds.push(row.id);
|
|
|
+ this.ifPitchOnChild(this.tableData_rule, selecteds);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //全选
|
|
|
+ selectAll(selection) {
|
|
|
+ for (let i in selection) {
|
|
|
+ selectionID.push(selection[i].id);
|
|
|
+ }
|
|
|
+ let tableData_rules = []; //当前分页id
|
|
|
+ for (let i in this.tableData_rule) {
|
|
|
+ tableData_rules.push(this.tableData_rule[i].id);
|
|
|
+ }
|
|
|
+ selectionID = [...new Set(selectionID)];
|
|
|
+ if (selection.length == 0) {
|
|
|
+ //全不选
|
|
|
+ var diff = [];
|
|
|
+ var tmp = tableData_rules;
|
|
|
+ selectionID.forEach(function(val1, i) {
|
|
|
+ if (tableData_rules.indexOf(val1) < 0) {
|
|
|
+ diff.push(val1);
|
|
|
+ } else {
|
|
|
+ tmp.splice(tmp.indexOf(val1), 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ selectionID = diff.concat(tmp);
|
|
|
+ }
|
|
|
+ selecteds = [...new Set(selectionID)];
|
|
|
+ this.valuesOrLength = selecteds;
|
|
|
+ },
|
|
|
+ onTableSelect(rows, row) {
|
|
|
+ let selected = rows.length && rows.indexOf(row) !== -1;
|
|
|
+ if (selected) {
|
|
|
+ selecteds.push(row.id);
|
|
|
+ } else {
|
|
|
+ for (let i in selecteds) {
|
|
|
+ if (row.id == selecteds[i]) {
|
|
|
+ selecteds.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //关闭
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ // 选择时间-季度
|
|
|
+ export_quarter_confirm(val) {
|
|
|
+ this.time.quarter = val;
|
|
|
+ this.params.page = 1;
|
|
|
+ console.log("1")
|
|
|
+ this.open_right(this.clickItem);
|
|
|
+ },
|
|
|
+ //此方法：拿到当前点击规则分类的所有子节点ID,（为了包含子分类 规则）
|
|
|
+ menuIdInit(menus) {
|
|
|
+ var _this = this;
|
|
|
+ var _menu = menus;
|
|
|
+ var menuId = [];
|
|
|
+ var len = _menu.length;
|
|
|
+ for (var i = 0; i < len; i++) {
|
|
|
+ var item = _menu[i];
|
|
|
+ if (item.child && item.child.length != 0) {
|
|
|
+ var child = item.child;
|
|
|
+ for (var j = 0; j < child.length; j++) {
|
|
|
+ _menu[len + j] = child[j];
|
|
|
+ }
|
|
|
+ len = _menu.length;
|
|
|
+ }
|
|
|
+ menuId.push(item.id);
|
|
|
+ }
|
|
|
+ return menuId;
|
|
|
+ },
|
|
|
+ //点击规则分类
|
|
|
+ handleNodeClick(data) {
|
|
|
+ let dataArr = this.menuIdInit([data]); //调用方法
|
|
|
+ this.tableLoadingRule = true;
|
|
|
+ this.keyword = ''; //切换规则重置搜索框
|
|
|
+ let tableData_r = [];
|
|
|
+ for (let i in this.itemList) {
|
|
|
+ for (let a in this.itemList[i]) {
|
|
|
+ for (let x in dataArr) {
|
|
|
+ if (dataArr[x] == this.itemList[i][a].rule_id) {
|
|
|
+ tableData_r.push(this.itemList[i][a]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableData_rule2 = tableData_r; //赋予筛选数据
|
|
|
+ this.tableData_rule = tableData_r;
|
|
|
+ this.ifPitchOnChild(this.tableData_rule, selecteds);
|
|
|
+ },
|
|
|
+ ifPitchOnChild(item, indexID) {
|
|
|
+ let pitchOnChild = [];
|
|
|
+ for (let i in item) {
|
|
|
+ for (let a in indexID) {
|
|
|
+ //判断外层的值相不相等
|
|
|
+ if (indexID[a] == item[i].id) {
|
|
|
+ pitchOnChild.push(item[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.toggleSelection(pitchOnChild, true);
|
|
|
+ },
|
|
|
+ //默认选中
|
|
|
+ toggleSelection(rows, selected) {
|
|
|
+ if (rows) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ rows.forEach(row => {
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(row, selected);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$refs.multipleTable.clearSelection();
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ //给遮到层，让默认选中的有缓冲时间
|
|
|
+ this.tableLoadingRule = false;
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ subGroupForm(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.saveFun()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取分组详情
|
|
|
+ getGroupDetail(func){
|
|
|
+ this.$axios('get','/api/integral/statistics/groups/info', {group_id: this.groups_info.id}).then(res => {
|
|
|
+ func(res.data.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ editGroup(){
|
|
|
+ var that=this;
|
|
|
+ this.getGroupDetail(function(res){
|
|
|
+ that.groups_info = res;
|
|
|
+ // 分组名称
|
|
|
+ that.newGroupForm.group_name = res.name;
|
|
|
+
|
|
|
+ // 规则
|
|
|
+ that.newGroupForm.items = [];
|
|
|
+ for (let i in res.items) {
|
|
|
+ that.newGroupForm.items.push(res.items[i].id);
|
|
|
+ }
|
|
|
+ that.valuesOrLength = that.newGroupForm.items;
|
|
|
+ if (that.valuesOrLength.length >= 1) {
|
|
|
+ that.newGroupFormRules = that.valuesOrLength.length + '条规则';
|
|
|
+ that.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
|
|
|
+ } else {
|
|
|
+ that.newGroupFormRules = '';
|
|
|
+ that.ruleHint = '统计所有积分(基础分和工龄分除外)'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统计周期
|
|
|
+ that.newGroupForm.date_interval = String(res.date_interval);
|
|
|
+ that.options_time_value = res.date_interval == 1 ? '月度' : res.date_interval == 2 ? '季度' : res.date_interval == 3 ? '年度' : '';
|
|
|
+
|
|
|
+ // 分组人员
|
|
|
+ that.newGroupForm.employees = [];
|
|
|
+ that.employeeNames ="";
|
|
|
+ res.employees.forEach(element => {
|
|
|
+ that.newGroupForm.employees.push(element.id);
|
|
|
+ that.employeeNames += element.name + ',';
|
|
|
+ });
|
|
|
+ that.employees_selected.employee=res.employees;
|
|
|
+
|
|
|
+
|
|
|
+ that.popupType = false;
|
|
|
+ that.groupShow = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //添加编辑组
|
|
|
+ saveFun(){
|
|
|
+ this.saveLoad = true;
|
|
|
+ var url=this.popupType? '/api/integral/statistics/groups/create':'/api/integral/statistics/groups'
|
|
|
+ this.newGroupForm.group_id=this.groups_info.id;
|
|
|
+ // return;
|
|
|
+ var obj={//为编辑时
|
|
|
+ name:this.newGroupForm.group_name,
|
|
|
+ id:this.popupType?'':this.groups_info.id,
|
|
|
+ employees:this.newGroupForm.employees,
|
|
|
+ }
|
|
|
+ this.$axios('post',url,this.newGroupForm).then((res) => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.$message.success(res.data.msg);
|
|
|
+ if(!this.popupType){//为编辑时
|
|
|
+ this.groups_info=obj;
|
|
|
+ }
|
|
|
+ if(this.groups_list.length==0){
|
|
|
+ this.get_groups_list(true)
|
|
|
+ }else{
|
|
|
+ this.get_groups_list()
|
|
|
+ }
|
|
|
+ this.resetForm('newGroupForm');
|
|
|
+ }else{
|
|
|
+ this.saveLoad = false
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ this.saveLoad = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 重置表单
|
|
|
+ resetForm(formName){
|
|
|
+ this.$refs[formName].resetFields()
|
|
|
+ this.newGroupForm.employees = []
|
|
|
+ this.employee_not_select = []
|
|
|
+ this.employeeNames='';
|
|
|
+ this.employees_selected = {employee:[], dept: []}
|
|
|
+ this.groupShow = false
|
|
|
+ },
|
|
|
+ // 新增分组
|
|
|
+ addGroup(){
|
|
|
+ this.employee_not_select = []
|
|
|
+ this.newGroupFormRules='';
|
|
|
+ this.employees_selected = {employee:[], dept: []}
|
|
|
+ this.newGroupForm = {
|
|
|
+ group_name: "",
|
|
|
+ employees: [],
|
|
|
+ items:[],
|
|
|
+ date_interval:"1",
|
|
|
+ }
|
|
|
+ this.groupShow = true
|
|
|
+ this.popupType = true
|
|
|
+ },
|
|
|
+ // 删除分组
|
|
|
+ delItem(){
|
|
|
+ this.$confirm('确定要删除当前分组吗？, 是否继续?', '删除分组', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ let data = {group_id:this.groups_info.id};
|
|
|
+ this.delLoad = true
|
|
|
+ this.$axios('post','/api/integral/statistics/groups/drop',data).then((res) => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.$message.success(res.data.msg)
|
|
|
+ this.groupShow = false
|
|
|
+ this.get_groups_list(true);
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.data.msg)
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ this.delLoad = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选人组件提交
|
|
|
+ move_employee_confirm(data){
|
|
|
+ this.employeeNames='';
|
|
|
+ this.newGroupForm.employees=[];
|
|
|
+ var employee=data.employee;
|
|
|
+ if(employee.length>0){
|
|
|
+ employee.forEach(item=>{
|
|
|
+ this.employeeNames+=item.name+','
|
|
|
+ this.newGroupForm.employees.push(item.id);
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.newGroupForm.employees=[];
|
|
|
+ }
|
|
|
+ this.employees_selected.employee=employee;
|
|
|
+ this.isEmployeeShow=false;
|
|
|
+ },
|
|
|
+ // 递归判断列表，把最后的children设为undefined
|
|
|
+ getTreeData(data) {
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].child.length < 1) {
|
|
|
+ // children若为空数组，则将children设为undefined
|
|
|
+ data[i].child = undefined;
|
|
|
+ } else {
|
|
|
+ // children若不为空数组，则继续 递归调用 本方法
|
|
|
+ this.getTreeData(data[i].child);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ //获取规则
|
|
|
+ getRuleList() {
|
|
|
+ this.$axios('get','/api/integral/rule/trees', {cycle_type: 1}).then(res => {
|
|
|
+ this.rule_trees = this.getTreeData(res.data.data.rule_tree || []);
|
|
|
+ this.itemList = res.data.data.item_list; //规则
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 规则分类改变之后请求数据
|
|
|
+ rule_null(val){
|
|
|
+ this.params.rule_id=val.length == 0? '': val[val.length -1]
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.page = 1
|
|
|
+ this.open_right()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取初始化数据
|
|
|
+ get_groups_list(isAdd) {
|
|
|
+ this.groups_loading = true;
|
|
|
+ this.$axios('get','/api/integral/statistics/groups').then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ let lists = res.data.data.list;
|
|
|
+ if(this.$authoritys('employee')){//员工权限只能查看包含自己的
|
|
|
+ let user = this.$getUserData().id
|
|
|
+ let data = []
|
|
|
+ lists.forEach(item=>{
|
|
|
+ if(item.employees.length == 0){
|
|
|
+ data.push(item)
|
|
|
+ }else{
|
|
|
+ if(item.employees.indexOf(user.toString())!=-1){
|
|
|
+ data.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.groups_list = data;
|
|
|
+ }else{
|
|
|
+ this.groups_list = lists;
|
|
|
+ }
|
|
|
+ if(this.groups_list[0]){
|
|
|
+ isAdd? this.open_right(this.groups_list[0]):this.open_right();
|
|
|
+ }else{
|
|
|
+ this.table_list=[];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.groups_loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 打开右边列表
|
|
|
+ open_right(item){
|
|
|
+ console.log(item)
|
|
|
+ this.table_loading = true;
|
|
|
+ this.clickItem = item;
|
|
|
+
|
|
|
+ if (!item) {
|
|
|
+ this.table_loading = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ let data = JSON.parse(JSON.stringify(this.params));
|
|
|
+ data.rule ? '' : delete data.rule;
|
|
|
+ data.group_id = item.id;
|
|
|
+ let months;
|
|
|
+ if (this.newGroupForm.date_interval == '1') {
|
|
|
+ months = this.time.month.replace('-', '');
|
|
|
+ }
|
|
|
+ data.date =
|
|
|
+ this.newGroupForm.date_interval == '1' ? months : this.newGroupForm.date_interval == '2' ? this.time.quarter : this.newGroupForm.date_interval == '3' ? this.time.year : '';
|
|
|
+ // var data={};
|
|
|
+ // if(item){
|
|
|
+ // this.groups_info=item;
|
|
|
+ // data={
|
|
|
+ // group_id: item.id,
|
|
|
+ // month: this.params.month,
|
|
|
+ // sort: this.params.sort,
|
|
|
+ // rule_id: this.params.rule_id,
|
|
|
+ // pt_id: 3,
|
|
|
+ // }
|
|
|
+ // }else{
|
|
|
+ // data={
|
|
|
+ // group_id: this.groups_info.id,
|
|
|
+ // month: this.params.month,
|
|
|
+ // sort: this.params.sort,
|
|
|
+ // rule_id: this.params.rule_id,
|
|
|
+ // pt_id: 3,
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // this.$axios('get','/api/integral/statistics/groups/rank',data).then((res) => {
|
|
|
+ // if (res.data.code == 1) {
|
|
|
+ // this.table_list = res.data.data.list
|
|
|
+ // this.total = res.data.data.total
|
|
|
+ // }else{
|
|
|
+ // this.$message.error(res.data.data.msg)
|
|
|
+ // }
|
|
|
+ // }).finally(() => {
|
|
|
+ // this.table_loading = false
|
|
|
+ // })
|
|
|
+ this.$axios('get','/api/integral/statistics/groups/rank',data).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.table_list = res.data.data.list;
|
|
|
+ this.total = res.data.data.total;
|
|
|
+ // this.lastUpdateTime = res.data.data.update_time;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.data.msg)
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.table_loading = false;
|
|
|
+ });
|
|
|
+ // this.$axios('get','/api/integral/statistics/ranking',data,'v2').then((res) => {
|
|
|
+ // if (res.data.code == 1) {
|
|
|
+ // this.table_list = res.data.data.list
|
|
|
+ // this.total = res.data.data.total
|
|
|
+ // }else{
|
|
|
+ // this.$message.error(res.data.data.msg)
|
|
|
+ // }
|
|
|
+ // }).finally(() => {
|
|
|
+ // this.table_loading = false
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 页码变更
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.params.page = val
|
|
|
+ this.open_right(this.groups_info)
|
|
|
+ },
|
|
|
+ handleSizeChange(val){
|
|
|
+ this.params.page_size = val
|
|
|
+ this.open_right(this.groups_info)
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.architecture {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ padding-left: 0px;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: default;
|
|
|
+ min-height: calc(60vh - 160px);
|
|
|
+}
|
|
|
+.architecture .RuleLine {
|
|
|
+ display: table-cell;
|
|
|
+ width: 1px;
|
|
|
+ min-height: 600px;
|
|
|
+ background: hsl(0, 2%, 76%);
|
|
|
+}
|
|
|
+.architecture .RuleLeft {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 10px;
|
|
|
+ border-right: none;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: none;
|
|
|
+}
|
|
|
+/*滚动条的宽度*/
|
|
|
+
|
|
|
+.architecture .RuleLeft::-webkit-scrollbar {
|
|
|
+ width: 9px;
|
|
|
+ height: 9px;
|
|
|
+}
|
|
|
+.architecture .RuleRight::-webkit-scrollbar {
|
|
|
+ width: 9px;
|
|
|
+ height: 9px;
|
|
|
+}
|
|
|
+
|
|
|
+/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
|
|
|
+
|
|
|
+.architecture .RuleLeft::-webkit-scrollbar-track {
|
|
|
+ width: 6px;
|
|
|
+ background-color: #fff0;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+.architecture .RuleRight::-webkit-scrollbar-track {
|
|
|
+ width: 6px;
|
|
|
+ background-color: #fff0;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+/*滚动条的设置*/
|
|
|
+
|
|
|
+.architecture .RuleLeft::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #fff0;
|
|
|
+ background-clip: padding-box;
|
|
|
+ min-height: 28px;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+.architecture .RuleRight::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #fff0;
|
|
|
+ background-clip: padding-box;
|
|
|
+ min-height: 28px;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
+}
|
|
|
+/*滚动条移上去的背景*/
|
|
|
+
|
|
|
+.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
|
|
|
+ overflow-x: none;
|
|
|
+ background-color: rgba(144, 147, 153, 0.3);
|
|
|
+}
|
|
|
+.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(115, 118, 124, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.architecture .RuleLeft .company_name {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ text-align: left;
|
|
|
+ padding: 15px 28px 17px;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ border-bottom: 1px #f8f8f8 solid;
|
|
|
+}
|
|
|
+.architecture .RuleLeft .company_name img {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ top: 2px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 4px;
|
|
|
+}
|
|
|
+.architecture .RuleLeft ::v-deep .el-button {
|
|
|
+ margin-bottom: 16px !important;
|
|
|
+}
|
|
|
+.architecture .RuleRight {
|
|
|
+ position: relative;
|
|
|
+ display: table-cell;
|
|
|
+ text-align: left;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.architecture .RuleRight .title span .sapn {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ max-width: 600px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.architecture .RuleRight:after {
|
|
|
+ content: ' ';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 1px;
|
|
|
+ background: #ebeef5;
|
|
|
+}
|
|
|
+.architecture .RuleRight .list_box {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.architecture .RuleRight .list_box ::v-deep table {
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+::v-deep .el-radio .el-radio__label {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ background: #dcdfe6;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.groupsName {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-right:20px
|
|
|
+}
|
|
|
+.groupsName span{
|
|
|
+ margin-left:5px
|
|
|
+}
|
|
|
+
|
|
|
+.user_text {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.cursor_pointer {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.terr-left button{
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+::v-deep .el-menu-item{
|
|
|
+ padding:0 10px !important;
|
|
|
+}
|
|
|
+.rule_class_box {
|
|
|
+ ::v-deep .el-tree-node {
|
|
|
+ border-bottom: 1px #f8f8f8 solid;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__content {
|
|
|
+ padding: 10px 0;
|
|
|
+ // border-bottom: 1px #f8f8f8 solid;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__content:hover {
|
|
|
+ background: #ecf5ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ ::v-deep .is-current .el-tree-node__content .el-icon-caret-right {
|
|
|
+ color: #409eff !important;
|
|
|
+ }
|
|
|
+ ::v-deep .is-current .el-tree-node__content .el-tree-node__label {
|
|
|
+ color: #409eff !important;
|
|
|
+ }
|
|
|
+ ::v-deep .is-current .el-tree-node__children .el-icon-caret-right {
|
|
|
+ color: #c0c4cc !important;
|
|
|
+ }
|
|
|
+ ::v-deep .is-current .el-tree-node__children .el-tree-node__label {
|
|
|
+ color: #606266 !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__label {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
347617796@qq.com