事件详情组件更新

src/assets/css/reset.css

@@ -91,6 +91,17 @@ table { border-collapse:collapse; border-spacing:0; }
   -ms-flex: 1;
   flex: 1;
 }
+/*flex-box与 flex-v-ce结合*/
+.flex-box-ce {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+}
 
 .flex-2 {
   -webkit-box-flex: 2;
@@ -178,6 +189,9 @@ table { border-collapse:collapse; border-spacing:0; }
 	color: #67C23A!important;
 }
 
+.fontColorB {
+	color: #777777 !important;
+}
 .fontColorZ {
 	color: #303133!important;
 }

src/components/EmployeeSelector (2).vue

@@ -0,0 +1,938 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible_"
+    :close-on-click-modal="false"
+    :before-close="close_before"
+    append-to-body
+    @open="openDialog"
+    width="640px"
+    class="employee_select_dialog"
+  >
+    <slot name="header"></slot>
+    <div class="employee_selector_box" v-if="visible_">
+      <el-row :gutter="10">
+        <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box one">
+          <div class="search-box">
+            <div class="search flex-box"><el-input v-model="keyword" placeholder="请输入内容" clearable></el-input></div>
+            <div class="search flex-box" style="margin-top: 7px;">
+              <el-cascader
+                v-show="can_select_employee&&deptId==0"
+                style="width: 100%;"
+                v-model="dept_id"
+                ref="dept"
+                :options="dept_list"
+                :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
+                clearable
+                :disabled="deptId > 0"
+                placeholder="全公司"
+              ></el-cascader>
+            </div>
+          </div>
+
+          <div class="dept_path scroll-bar flex-box flex-d-wrap" v-if="can_select_dept">
+            <template v-if="pid_list_arr.length > 0">
+              <div @click="back_by_index(0)" class="blue" style="cursor: pointer;">全公司</div>
+              <div v-for="(item, index) in pid_list_arr" :key="index" @click="back_by_index(index + 1, item)" class="font-flex-word" style="max-width: 120px;">
+                <i class="el-icon-arrow-right"></i>
+                <span class="blue" style="cursor: pointer;">{{ item.name }}</span>
+              </div>
+            </template>
+          </div>
+		  <!-- 人员 -->
+          <div class="flex-box-end" v-if="can_select_employee && isChecKedAll && multi" style="padding: 10px;border-bottom: 1px solid #f1f1f1;">
+            <el-checkbox v-model="checked" @change="checkedChange">全选</el-checkbox>
+          </div>
+          <el-scrollbar
+            wrap-class="column-wrapper scrollable-items-container"
+            :native="false"
+            :class="(can_select_dept || isChecKedAll)? 'scrollbarHeight1' : 'scrollbarHeight2'"
+            v-loading="table_loading"
+          >
+            <div class="choose_left">
+              <template v-if="can_select_dept">
+                <div class="persons_box" style="padding-top:4px;" v-if="dept_list.length > 0">
+                  <div v-for="(item, index) in dept_list" :key="index">
+                    <div class="flex-box flex-v-ce deptList" @click="select_dept(item, index)" v-show="item.name.indexOf(keyword) >= 0">
+                      <div :class="[item.checked? 'showCheckbox':'']" class="checkbox"><span class="isCheckbox"></span></div>
+                      <div class="employee_name flex-1 font-flex-word">{{ item.name }}</div>
+                      <div v-if="item.children" class="blue" @click.stop="show_child(item)">| 下级</div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+              <template v-if="can_select_employee">
+                <div class="persons_box" style="padding-top:4px;" v-if="list.length > 0">
+                  <div class="employee_cell_a" v-for="(item, index) in list" :key="index" v-show="item.id">
+                    <div class="employee_cell" @click.prevent.stop="select_employee(item)">
+                      <div class="employee_checkbox"><el-checkbox v-model="item.checked"></el-checkbox></div>
+                      <div class="employee_img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
+                      <div class="employee_name">{{ item.name }}</div>
+                      <div class="employee_cell_clear"></div>
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="fontColorF" style="text-align: center;margin-top: 50px;">暂无可选人员</div>
+              </template>
+            </div>
+          </el-scrollbar>
+        </el-col>
+        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="col-line"><span style="opacity: 0;">空</span></el-col>
+        <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="scroller-box">
+          <div class="option-box">
+            <span style="line-height: 40px; padding-left: 10px;" class="fl" v-if="multi && can_select_employee">已选择{{ employee_selected_list.length }}个员工</span>
+            <el-button type="type" @click="clear_data">清空</el-button>
+          </div>
+          <el-scrollbar wrap-class="column-wrapper scrollable-items-container" :native="false" style="height: 400px;">
+            <div class="choose_right">
+              <div class="employee_cell" v-for="(item, index) in dept_selected_list" :key="index">
+                <div class="employee_name">{{ item.dept_name }}</div>
+                <div class="employee_delete"><el-button type="default" size="mini" @click="dept_delete(item, index)" icon="el-icon-close" circle></el-button></div>
+                <div class="employee_cell_clear"></div>
+              </div>
+              <div class="employee_cell" v-for="(item, index) in employee_selected_list" :key="index">
+                <div class="employee_img_url" v-if="item.img_url"><img :src="item.img_url" class="employee_cell_head_img" /></div>
+                <div class="employee_img_url" v-else><img src="static/images/head_default.png" class="employee_cell_head_img" /></div>
+                <div class="employee_name">{{ item.name }}</div>
+                <div class="employee_delete"><el-button type="default" size="mini" @click="employee_cancel(item, true)" icon="el-icon-close" circle></el-button></div>
+                <div class="employee_cell_clear"></div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      // 标题
+      type: String,
+      default: '选择部门和员工'
+    },
+    deptId: {
+      //指定部门ID,人员列表就是该部门的
+      type: Number,
+      default: 0
+    },
+    visible: {
+      // 是否显示组件
+      type: Boolean,
+      default: false
+    },
+    can_select_dept: {
+      // 是否能选择部门(单选择部门，不能选择人员)
+      type: Boolean,
+      default: false
+    },
+    dept_not_select: {
+      // 排除部门ID
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    dept_multi: {
+      // 指定部门是否能多选
+      type: Boolean,
+      default: true
+    },
+    dept_children: {
+      //选择部门时是否包含子部门
+      type: Boolean,
+      default: true
+    },
+    can_select_employee: {
+      // 指定是否能选择员工
+      type: Boolean,
+      default: true
+    },
+    employee_not_select: {
+      // 排除员工的ID，包含ID时不出现在选择列表中
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    selected: {
+      // 已经选择的员工和部门
+      type: Object,
+      default: () => {
+        return { employee: [], dept: [] };
+      }
+    },
+    multi: {
+      // 指定员工是否能多选
+      type: Boolean,
+      default: true
+    },
+    user_employee_list: {
+      // 为true时，employee_list才生效
+      type: Boolean,
+      default: false
+    },
+    employee_list: {
+      // 指定显示的员工列表，注意：传值后组件的员工数据将不是统一向服务器获取的，而是指定的员工列表，格式是：[{id: 1, name: “张三”, img_url: “”}]
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    isChecKedAll: {
+      //是否全选
+      type: Boolean,
+      default: true
+    },
+    close_clear_data: {
+      //关闭时是否清除选择的数据
+      type: Boolean,
+      default: true
+    },
+    max: {
+      //选择的人数限制
+      type: Number,
+      default: 0
+    },
+    is_filtration_creator: {
+      //是否去除创始人
+      type: Boolean,
+      default: true
+    },
+    is_manager_only: {
+      //是否只显示管理者
+      type: Boolean,
+      default: false
+    },
+    include_self: {
+      //是否显示自己
+      type: Boolean,
+      default: true
+    },
+    child:{
+      //当人员列表点击部门筛选时不显示子部门人员 ,目前只在设置主管有使用到
+      type: Boolean,
+      default: true
+    },
+    isRequired:{
+      //是否必须选择人员或者部门
+      type: Boolean,
+      default: false
+    }
+  },
+  name: 'EmployeeSelector',
+  data() {
+    return {
+      // 基础配置
+      table_loading: false,
+      searchBox: [], //用于搜索的全部人员
+      keyword: '',
+      checked: false,
+      visible_: false,
+      // 选择人员相关
+      employee_selected_list: [],
+      employee_selected: [],
+      list: [],
+      // 选择部门相关
+      dept_selected_list: [],
+      dept_name: '',
+      dept_id: [],
+      dept_select_id: 0,
+      dept_list: [],
+      dept_list_all: [], //备用全部部门
+      pid_list_arr: []
+    };
+  },
+  watch: {
+    // 当动态改变“employee_list”时，获取employee_list与employee_selected_list的交集，用于考勤组功能
+    employee_list(val) {
+      var eSList = this.employee_selected_list;
+      this.employee_selected_list = [...eSList].filter(x => [...val].some(y => y.id === x.id));
+    },
+    visible(val) {
+      this.visible_ = JSON.parse(JSON.stringify(val));
+      if (val) {
+        setTimeout(() => {
+          this.get_user_list();
+          this.get_dept_list();
+        }, 200);
+      }
+    },
+    dept_id(val) {
+      this.dept_select_id = val[val.length - 1];
+      this.$nextTick(() => {
+        if (this.can_select_employee) {
+          this.$refs.dept.dropDownVisible = false;
+        }
+        this.get_user_list();
+        this.checked = false;
+      });
+    },
+    keyword(val) {
+      this.list = this.searchBox.filter(item => item.name.includes(this.keyword));
+      if (!val) {
+        this.checked = false;
+      }
+    }
+  },
+  methods: {
+    //打开Dialog的回调，用刷每次打开都初始化selected
+    openDialog() {
+      if (this.deptId != 0) {
+        this.dept_id = [this.deptId];
+        this.dept_select_id = this.deptId;
+      }
+      let selected = this.selected;
+      this.employee_selected = [];
+      this.employee_selected_list = JSON.parse(JSON.stringify(selected.employee));
+      this.dept_selected_list =JSON.parse(JSON.stringify(selected.dept));
+      for (let i in selected.employee) {
+        this.employee_selected.push(selected.employee[i].id);
+      }
+    },
+    close_before(done) {
+      this.close();
+      done();
+    },
+    // 全选（只用选择人员）
+    checkedChange(val) {
+      if (val) {
+        this.$nextTick(() => {
+          let employeeSelectedList = JSON.parse(JSON.stringify(this.employee_selected_list)); //获取选择的人员
+          let employeeSelectedIds = [],
+            total = 0;
+          employeeSelectedList.forEach(element => {
+            employeeSelectedIds.push(element.id);
+          });
+          for (let i in this.list) {
+            this.$set(this.list[i], 'checked', true);
+            if (!employeeSelectedIds.includes(this.list[i].id)) {
+              //去除已经选择的人员
+              this.employee_selected_list.push(this.list[i]);
+            }
+          }
+        });
+      } else {
+        this.employee_selected_list = [];
+        this.employee_selected = [];
+        for (let i in this.list) {
+          this.$set(this.list[i], 'checked', false);
+        }
+      }
+    },
+    // 点击部门导航
+    back_by_index(index, item) {
+      this.pid_list_arr.splice(index, 100);
+      if (index == 0) {
+        this.dept_list = this.dept_list_all;
+        return false;
+      }
+      if (item.children) {
+        this.dept_list = item.children;
+      }
+    },
+    //下一级
+    show_child(item) {
+      if (item.children) {
+        this.dept_list = item.children;
+      }
+      this.pid_list_arr.push(item);
+    },
+    //获取一个部门的下的所有子部门
+    getChildrens(list) {
+      var dept_list = [];
+      list.forEach(item => {
+        item.checked = true;
+        dept_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
+        if (item.children) {
+          dept_list.push(...this.getChildrens(item.children));
+        }
+      });
+      return dept_list;
+    },
+    //选择部门
+    select_dept(item, index) {
+      if (item.checked) {
+        this.dept_cancel(item);
+      } else {
+        if (!this.dept_multi) {
+          //是否能多选
+          this.dept_selected_list = [];
+          for (let i in this.dept_list_all) {
+            this.dept_cancel(this.dept_list_all[i], true);
+          }
+        }
+        item.checked = true;
+        if (item.children && this.dept_children) {
+          //是否存在子部门
+          this.dept_selected_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
+          var arr = this.getChildrens(item.children);
+          this.dept_selected_list.push(...arr);
+        } else {
+          this.dept_selected_list.push({ dept_id: item.id, dept_name: item.name, avatar: 'static/images/e66f.jpg' });
+        }
+      }
+    },
+    //清除选择的部门
+    dept_cancel(item, is) {
+      item.checked = false;
+      if (item.children) {
+        //左边
+        item.children.forEach(childrens => {
+          this.dept_cancel(childrens);
+        });
+      }
+      if (is) {
+        return false;
+      }
+      var deptSelectedList = this.dept_selected_list;
+      deptSelectedList.forEach((dept, index) => {
+        //右边
+        if (dept.dept_id == item.id) {
+          deptSelectedList.splice(index, 1);
+        }
+      });
+    },
+    //删除部门
+    dept_delete(item) {
+      var dept_list = this.dept_list;
+      var obj = this.getDeptz(item.dept_id, dept_list); //递归找到所属部门
+      this.dept_cancel(obj);
+    },
+    // 递归获取指定ID部门
+    getDeptz(id, arr) {
+      var obj = {};
+      for (let i = 0; i < arr.length; i++) {
+        if (id == arr[i].id) {
+          obj = arr[i];
+          break;
+        } else if (arr[i].children) {
+          if (this.getDeptz(id, arr[i].children).id) {
+            obj = this.getDeptz(id, arr[i].children);
+          }
+        }
+      }
+      return obj;
+    },
+
+    //清除选择的人员
+    employee_cancel(item) {
+      this.checked = false;
+      this.employee_selected.splice(this.employee_selected.indexOf(item.id), 1);
+      let delete_index = -1;
+      for (let i in this.employee_selected_list) {
+        if (this.employee_selected.indexOf(this.employee_selected_list[i].id) < 0) {
+          delete_index = i;
+        }
+      }
+      if (delete_index >= 0) {
+        for (let i in this.list) {
+          if (this.list[i].id == item.id) {
+            this.$set(this.list[i], 'checked', false);
+          }
+        }
+        for (let i in this.employee_selected_list) {
+          if (this.employee_selected_list[i].id == item.id) {
+            this.employee_selected_list.splice(i, 1);
+          }
+        }
+      }
+    },
+    //选择人员
+    select_employee(item) {
+      if (item.checked) {
+        item.checked = false;
+        this.employee_cancel(item);
+      } else {
+        if (!this.multi) {
+          this.employee_selected = [];
+          this.employee_selected_list = [];
+          for (let i in this.list) {
+            this.$set(this.list[i], 'checked', false);
+          }
+        }
+        if (this.max > 0 && this.employee_selected.length == this.max && this.multi) {
+          this.$message.error('最多只能选择' + this.max + '人');
+          return false;
+        }
+        this.employee_selected.push(item.id);
+        this.employee_selected_list.push({ id: item.id, name: item.name, img_url: item.img_url });
+        item.checked = true;
+      }
+    },
+
+    //清空
+    clear_data() {
+      this.checked = false;
+      this.employee_selected = [];
+      this.employee_selected_list = [];
+      this.dept_selected_list = [];
+      for (let i in this.list) {
+        this.$set(this.list[i], 'checked', false);
+      }
+      for (let i in this.dept_list) {
+        this.$set(this.dept_list[i], 'checked', false);
+      }
+    },
+    //关闭||清空数据
+    close() {
+      this.$emit('update:visible', false);
+      if (this.close_clear_data) {
+        this.checked = false;
+        this.keyword='';
+        this.employee_selected = [];
+        this.employee_selected_list = [];
+        this.dept_selected_list = [];
+        for (let i in this.list) {
+          this.$set(this.list[i], 'checked', false);
+        }
+        for (let i in this.dept_list) {
+          this.$set(this.dept_list[i], 'checked', false);
+        }
+      }
+    },
+    // 确定
+    confirm() {
+      if(this.isRequired){
+        if(this.employee_selected_list.length==0){
+           this.$message.error("请选择人员");
+           return false
+        }
+      }
+      this.$emit('confirm', {
+        employee: this.employee_selected_list,
+        dept: this.dept_selected_list
+      });
+      this.close();
+    },
+    // 获取部门
+    get_dept_list() {
+      this.$http('get', '/api/department/tree', '', 'v2').then(res => {
+        var list = res.data.data.list;
+        var dept_list = [];
+        // 排除部门
+        if (this.dept_not_select.length > 0) {
+          dept_list = list.filter(item => {
+            return this.dept_not_select.indexOf(item.id) == -1;
+          });
+        } else {
+          dept_list = list;
+        }
+        dept_list = this.getTreeData(dept_list); //过滤children
+        //默认选中部门
+        if (this.dept_selected_list.length > 0) {
+          this.dept_selected_list.forEach(item => {
+            this.setDeptChecked(item.dept_id, dept_list);
+          });
+        }
+        this.dept_list = dept_list;
+        this.dept_list_all = this.dept_list;
+      });
+    },
+    //设置默认部门
+    setDeptChecked(id, arr) {
+      for (let i = 0; i < arr.length; i++) {
+        if (id == arr[i].id) {
+          arr[i].checked = true;
+          break;
+        } else if (arr[i].children) {
+          this.setDeptChecked(id, arr[i].children);
+        }
+      }
+    },
+    getTreeData(data) {
+      for (var i = 0; i < data.length; i++) {
+        data[i].checked = false;
+        if (data[i].children.length < 1) {
+          // children若为空数组，则将children设为undefined
+          data[i].children = undefined;
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          this.getTreeData(data[i].children);
+        }
+      }
+      return data;
+    },
+
+    // 默认选择中的人勾上
+    parse_list(data) {
+      let _list = [];
+      data.map(item => {
+        item['checked'] = false;
+        for (var i in this.employee_selected_list) {
+          //判断传进来的员工是否是员工集合里的，是就设为已点击状态
+          if (this.employee_selected_list[i].id == item.id) {
+            item['checked'] = true;
+          }
+        }
+        if (item.img_url == '') {
+          item.img_url = 'static/images/head_default.png';
+        }
+      });
+      this.searchBox = data;
+      this.list = data;
+    },
+    //获取人员
+    get_user_list() {
+      this.table_loading = true;
+      this.$http('get', '/api/employee/index', { dept_id: this.dept_select_id, keywords: this.keyword, page: 1, page_size: 2000, child:this.child? '1':'0' }, 'v2')
+        .then(res => {
+          let list = this.filtration(res.data.data.list);
+          // 当有指定显示列表时
+          if (this.user_employee_list) {
+            var employee_list = this.employee_list;
+            var userData = [];
+            list.map(item => {
+              // 列表数据是否是自己的管理范围
+              employee_list.map(item2 => {
+                if (item.id == item2.id) {
+                  userData.push(item);
+                }
+              });
+            });
+            this.parse_list(userData);
+          } else {
+            // 没有指定人员列表
+            this.parse_list(list);
+          }
+        })
+        .finally(() => {
+          this.table_loading = false;
+        });
+    },
+    // 过滤各种条件：如：自己，创始人，只显示管理者等。。。
+    filtration(data) {
+      var list = data;
+      // 去除已经离职的人
+      for (let i = 0; i < list.length; i++) {
+        if (list[i].status == 2) {
+          list.splice(i, 1);
+          i--
+        }
+      }
+      var managerList = []; // 管理者列表
+      // 只显示管理者
+      if (this.is_manager_only) {
+        var isManager;
+        list.map(item => {
+          isManager = false;
+          item.employee_detail.role_list.map(item2 => {
+            if (item2.name == 'creator' || item2.name == 'point_manager' || item2.name == 'dept_manager' || item2.name == 'admin') {
+              isManager = true;
+            }
+          });
+          if (isManager) {
+            managerList.push(item);
+          }
+        });
+        list = managerList;
+      }
+      // 过滤自己
+      if (!this.include_self) {
+        const currUserId = this.$store.getters.user_info.id;
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].id == currUserId) {
+            list.splice(i, 1);
+            i--
+          }
+        }
+      }
+      // 过滤创始人
+      if (this.is_filtration_creator) {
+        for (let i = 0; i < list.length; i++) {
+          if (list[i].is_creator == 1) {
+            list.splice(i,1);
+            i--
+          }
+        }
+      }
+      //过滤指定人员[]
+      if (this.employee_not_select.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          if (this.employee_not_select.indexOf(list[i].id) >= 0) {
+            list.splice(i, 1);
+            i--
+          }
+        }
+      }
+      return list;
+    }
+  },
+  created() {}
+};
+</script>
+
+<style scoped lang="scss">
+.showCheckbox .isCheckbox{
+   height: 7px;
+   width: 7px;
+   background-color: #26A2FF;
+   display: inline-block;
+   border-radius: 2px;
+   line-height: 14px;
+   position: relative;
+   top: -3px;
+}
+.showCheckbox{
+  border: 1px solid #26A2FF !important;
+}
+.checkbox{
+  height: 14px;
+  width: 14px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  border-radius: 2px;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+}
+.deptList {
+  padding: 12px 0;
+  border-bottom: 1px solid #f1f1f1;
+  cursor: pointer;
+}
+.employee_selector_box {
+  width: 600px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+/* 搜索框 */
+.employee_selector_box .search {
+  margin: 0 auto;
+  width: 80%;
+  min-height: 36px;
+}
+
+.employee_selector_box .search-box button {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  width: auto;
+  padding: 0;
+  background: none;
+  border-radius: 0px;
+  border: none;
+}
+/* /搜索框 */
+
+/* 左边框 */
+.employee_selector_box .choose_left {
+  padding: 8px 10px 8px 10px;
+}
+
+.employee_selector_box .choose_left .employee_cell {
+  border-bottom: 1px #f1f1f1 solid;
+}
+
+.employee_selector_box .choose_left .employee_cell_a .employee_cell {
+  border-bottom: none;
+}
+
+.employee_selector_box .choose_left .employee_checkbox {
+  padding-left: 8px;
+}
+
+.employee_selector_box .choose_left .employee_img_url {
+  padding-left: 8px;
+}
+
+.employee_selector_box .choose_left .employee_name {
+  padding-left: 8px;
+}
+
+.employee_selector_box ::v-deep .el-scrollbar__thumb {
+  width: 2px;
+  margin: 15px 0 0 6px;
+  background: #409eff;
+}
+
+/* 左边框 */
+
+/* 右边距 */
+.employee_selector_box .option-box {
+  padding: 14px 0;
+}
+
+.employee_selector_box .option-box button {
+  margin-right: 16px;
+}
+
+.employee_selector_box .choose_right {
+  padding: 8px 10px;
+}
+
+.employee_selector_box .choose_right .employee_delete .el-button {
+  transform: scale(0.5);
+  background: #c0c4cc;
+}
+
+.employee_selector_box .choose_right .employee_delete .el-button /deep/ .el-icon-close {
+  color: #fff;
+}
+
+.employee_selector_box .choose_right .employee_delete .el-button:active {
+  background: #409eff;
+}
+
+.employee_selector_box .choose_right .employee_delete .el-button:active /deep/ .el-icon-close {
+  color: #fff;
+}
+
+.employee_selector_box .choose_right .employee_cell .employee_name {
+  padding-left: 8px;
+}
+
+.employee_selector_box .choose_right .employee_cell .employee_img_url {
+  padding-left: 8px;
+}
+
+/* 右边距 */
+
+.employee_selector_box /deep/ .employee_cell {
+  padding: 8px 0;
+  border-bottom: 1px #f1f1f1 solid;
+}
+
+.employee_selector_box /deep/ .employee_cell:hover {
+  background: #ecf5ff;
+}
+
+.employee_cell {
+  display: -webkit-inline-box;
+  cursor: pointer;
+  width: 100%;
+  color: #606266;
+  padding: 8px 0;
+  background-color: transparent;
+}
+
+.employee_cell .employee_cell_clear {
+  clear: both;
+}
+
+.employee_cell .employee_img_url {
+  display: table-cell;
+  vertical-align: middle;
+  width: 30px;
+  padding-left: 0px;
+}
+
+.employee_cell .employee_img_url img {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.employee_cell .employee_checkbox {
+  display: table-cell;
+  vertical-align: middle;
+  width: 30px;
+  text-align: center;
+}
+
+.employee_cell .employee_name {
+  display: table-cell;
+  vertical-align: middle;
+  color: #606266;
+}
+
+.employee_delete {
+  display: table-cell;
+  text-align: right;
+  padding-right: 0px;
+}
+
+.employee_cell_a {
+  display: block;
+}
+
+.employee_cell_a:hover {
+  background-color: #ecf5ff;
+  border-radius: 4px;
+}
+
+.dept_child_cell {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.dept_child_cell span {
+  float: right;
+  padding-right: 8px;
+}
+
+.dept_child_cell span:hover {
+  color: #1c1c1c;
+}
+
+.dept_child_cell span:active {
+  color: #1c1c1c;
+}
+
+.scroller-box {
+  height: 440px;
+  padding-right: 0px !important;
+  background-color: #fdfdfd;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+/* .scroller-box.one{
+    height: 440px;
+  } */
+
+.col-line {
+  position: relative;
+  height: 400px;
+}
+
+.col-line:before {
+  content: ' ';
+  width: 1px;
+  height: 400px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  background-color: #eee;
+}
+
+.search-box {
+  background-color: #fff;
+  padding: 14px 5px;
+  border-bottom: 1px solid #eee;
+  margin: 0 -5px;
+}
+
+.option-box {
+  padding: 5px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  margin: 0 -5px;
+  text-align: right;
+}
+
+.child_btn {
+  color: #409eff;
+}
+.dept_path {
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f1f1;
+  min-height: 37px;
+}
+
+.scrollbarHeight1 {
+  height: 310px;
+}
+.scrollbarHeight2 {
+  height: 350px;
+}
+</style>

src/components/Steps.vue

@@ -1,73 +1,83 @@
 <template>
-	<div>
-		<p class="row_title">
-			审批
-			<span class="row_tips">多人审批时，以最后一人为准</span>
-		</p>
-		<div class="examine_steps">
-			<el-steps direction="vertical" :space="50">
-				<el-step v-for="(item, index) in process" :key="index" style="margin-bottom: 5px;">
-					<template slot="icon">
-						<userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
-					</template>
-					<template slot="title">
-						<div style="color: #303133;font-size:14px;margin-top:-2px;">
-							{{ item.name }} {{ item.remark }}
-							<strong style="font-weight: 500;">
-								<span class="red point" v-show="item.rediv_point > 0">+{{ item.rediv_point }}</span>
-								<span class="green point" v-show="item.rediv_point < 0">{{ item.rediv_point }}</span>
-							</strong>
-						</div>
-					</template>
-					<template slot="description" style="">
-						<div class="fontColorZ" style="margin: 5px 0;">{{ item.review_remark }}</div>
-						<div>{{ item.time }}</div>
-					</template>
-				</el-step>
-			</el-steps>
-		</div>
-	</div>
+  <div>
+    <p class="row_title">
+      审批
+      <span class="row_tips">多人审批时，以最后一人为准</span>
+    </p>
+    <div class="examine_steps">
+      <el-steps direction="vertical" :space="50">
+        <el-step v-for="(item, index) in process" :key="index" style="margin-bottom: 5px;">
+          <template slot="icon">
+            <userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
+          </template>
+          <template slot="title">
+            <div>
+              <div class="flex-box-ce" style="color: #303133;font-size:14px;margin-top:-2px;">
+                <div class="flex-1">
+                  {{ item.name }}
+                  <span style="margin: 0 5px;">
+                    <span v-if="item.remark == '待审核'" style="color:#E6A23C;font-size:13px">待审批</span>
+                    <span v-else-if="item.remark == '审核通过'" style="color:#67C23A;font-size:13px">审批通过</span>
+                    <span v-else-if="item.remark == '审核驳回'" style="color:#F56C6C;font-size:13px">审批驳回</span>
+                    <span v-else>{{ item.remark }}</span>
+                  </span>
+                  <strong style="font-weight: 500;">
+                    <span class="red point" v-show="item.review_point > 0">+{{ item.review_point }}</span>
+                    <span class="green point" v-show="item.review_point < 0">{{ item.review_point }}</span>
+                  </strong>
+                </div>
+                <span class="fontColorF" style="font-size:12px;">{{ item.time }}</span>
+              </div>
+            </div>
+          </template>
+          <template slot="description" style="">
+            <div class="fontColorB" style="margin: 5px 0;">{{ item.review_remark }}</div>
+          </template>
+        </el-step>
+      </el-steps>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-	name: 'Steps',
-	props: {
-		process: {
-			type: Array,
-			default: () => {
-				return [];
-			}
-		}
-	},
-	data() {
-		return {};
-	},
-	methods: {}
+  name: 'Steps',
+  props: {
+    process: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {}
 };
 </script>
 
 <style scoped="scoped" lang="scss">
 .row_title {
-	position: relative;
-	margin: 0 0 20px 0;
-	padding-top: 12px;
-	font-size: 16px;
-	color: #303133;
-	line-height: 22px;
+  position: relative;
+  margin: 0 0 20px 0;
+  padding-top: 12px;
+  font-size: 16px;
+  color: #303133;
+  line-height: 22px;
 }
 .row_title:before {
-	position: absolute;
-	top: 0;
-	content: ' ';
-	width: 100%;
-	border-top: 1px #f8f8f8 solid;
+  position: absolute;
+  top: 0;
+  content: ' ';
+  width: 100%;
+  border-top: 1px #f8f8f8 solid;
 }
 .el-row {
-	margin-bottom: 10px;
-	font-size: 14px;
-	.el-col-4 {
-		color: #606266;
-	}
+  margin-bottom: 10px;
+  font-size: 14px;
+  .el-col-4 {
+    color: #606266;
+  }
 }
 </style>

src/main.js

@@ -19,9 +19,9 @@ import { getToken, setToken,getUserData,setUserData,getTyps,setTyps,getIsCreator
 import userImage from '@/components/UserImage'
 Vue.component('userImage', userImage)
 Vue.use(ElementUI);
-// if (process.env.NODE_ENV === 'development') {
-//   new VConsole()
-// }
+if (process.env.NODE_ENV === 'development') {
+  new VConsole()
+}
 
 Vue.prototype.$echarts = echarts
 Vue.prototype.$dd=dd;

src/views/set/framework.vue

@@ -67,9 +67,12 @@
 						<el-table-column prop="accedence_time" label="入职时间"></el-table-column>
 						<el-table-column prop="accedence_time" label="是否参与排名" align="center">
 							<template slot-scope="scope">
-								<span class="participateRank" :style="scope.row.is_ranking == 1 ? 'color:#409eff' : 'color:#F56C6C'"   @click="rankingtakePartIn(scope.row.id, scope.row.is_ranking)">
-									{{ scope.row.is_ranking == 1 ? '参与' : '不参与' }}
-								</span>
+								<template v-if="scope.row.is_creator!=1">
+									<span class="participateRank" :style="scope.row.is_ranking == 1 ? 'color:#409eff' : 'color:#F56C6C'" @click="rankingtakePartIn(scope.row.id, scope.row.is_ranking)">
+										{{ scope.row.is_ranking == 1 ? '参与' : '不参与' }}
+									</span>
+								</template>
+								<span v-else class="fontColorB">不参与</span>
 							</template>
 						</el-table-column>
 						<el-table-column label="启用积分管理">