自动积分

src/components/publics/EmployeeSelector1.vue

@@ -0,0 +1,972 @@
+<template>
+  <div>
+    <div class="employee_selector_box">
+      <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">
+              <el-button slot="append" icon="el-icon-search" class="manager_button"></el-button>
+              <el-input v-model="keyword" placeholder="请输入内容"></el-input>
+            </div>
+          </div>
+          <div class="dept_path">
+            <a
+              href="javascript:void(0);"
+              @click="back_by_index(0)"
+              style="cursor: pointer;color: inherit;text-decoration: none;"
+            >全公司</a>
+            <a
+              v-for="(item, index) in pid_list_arr"
+              :key="index"
+              href="javascript:void(0);"
+              @click="back_by_index(index + 1)"
+            >
+              <i class="el-icon-arrow-right"></i>
+              {{item.name}}
+            </a>
+          </div>
+          <el-checkbox
+            v-if="isChecKedAll"
+            v-model="checked"
+            @change="checkedChange"
+            :indeterminate="indeterminate"
+          >全选</el-checkbox>
+          <el-scrollbar
+            wrap-class="column-wrapper scrollable-items-container"
+            :native="false"
+            style="height: 354px;"
+          >
+            <div class="choose_left">
+              <a href="javascript:void(0)" v-for="(item,index) in dept_list" :key="index">
+                <div
+                  class="employee_cell"
+                  @click="select_dept(item)"
+                  v-show="item.pid == pid && item.name.indexOf(keyword) >= 0 && dept_not_select.indexOf(item.id) < 0"
+                >
+                  <i class="el-icon-caret-right" style=" display: inline-block;"></i>
+                  <div class="employee_checkbox" v-if="can_select_dept">
+                    <el-checkbox v-model="item.checked"></el-checkbox>
+                  </div>
+                  <div class="employee_name">{{item.name}}</div>
+
+                  <div v-if="can_select_dept" class="dept_child_cell">
+                    <span
+                      href="javascript:void(0);"
+                      class="child_btn"
+                      @click.stop="show_child(item)"
+                    >| 下级</span>
+                  </div>
+
+                  <div class="employee_cell_clear"></div>
+                </div>
+              </a>
+
+              <div class="persons_box" style="padding-top:4px;">
+                <a
+                  class="employee_cell_a"
+                  href="javascript:void(0)"
+                  v-for="(item,index) in list"
+                  :key="index"
+                  v-show="item.show"
+                >
+
+
+                 <!-- class="employee_cell flex-box flex-v-ce" -->
+                  <div
+                    class="employee_cell"
+                    v-if="can_select_employee"
+                    @click.prevent.stop="select_employee(item)"
+                    v-show="employee_not_select.indexOf(item.id) < 0"
+                  >
+                    <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" />
+                      <!-- <userImage
+                      :user_name="item.name"
+                      :img_url="item.img_url"
+                      width="30px"
+                      height="30px"
+                    ></userImage> -->
+                    </div>
+                    <div class="employee_name">{{item.name}}</div>
+                    <div class="employee_cell_clear"></div>
+                  </div>
+                </a>
+              </div>
+            </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-show="multi"
+            >已选择{{employee_selected_list.length}}个员工</span>
+            <el-button type="type" @click="clear_data">清空</el-button>
+          </div>
+          <!-- <div class="option-box flex-box flex-v-ce">
+            <div class="fontColorF flex-1" v-show="multi">已选择{{employee_selected_list.length}}个员工</div>
+            <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_cancel(item)"
+                    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>
+
+            <!-- <div class="choose_right">
+              <div
+                class="employee_cell flex-box flex-v-ce"
+                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_cancel(item)"
+                    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"
+              >
+                <userImage
+                  :user_name="item.name"
+                  :img_url="item.img_url"
+                  width="30px"
+                  height="30px"
+                ></userImage>
+                <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>-->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    append_body: {
+      type: Boolean,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    can_select_dept: {
+      type: Boolean,
+      default: true,
+    },
+    can_select_employee: {
+      type: Boolean,
+      default: true,
+    },
+    employee_not_select: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    dept_not_select: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    selected: {
+      type: Object,
+      default: () => {
+        return {
+          employee: [],
+          dept: [],
+        };
+      },
+    },
+    multi: {
+      type: Boolean,
+      default: true,
+    },
+    dept_multi: {
+      type: Boolean,
+      default: true,
+    },
+    employee_list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    close_clear_data: {
+      type: Boolean,
+      default: true,
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
+    user_no_select: {
+      type: Boolean,
+      default: false,
+    },
+    isChecKedAll: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  name: "EmployeeSelector1",
+  data() {
+    let selected = JSON.parse(JSON.stringify(this.selected));
+    let user_no_select = JSON.parse(JSON.stringify(this.user_no_select));
+    return {
+      dialogVisible: true,
+      employee_selected_list: selected.employee,
+      dept_selected_list: selected.dept,
+      employee_selected: [],
+      dept_selected: [],
+      com_height: "100%",
+      company_info: {},
+      actions_show: false,
+      dept_name: "",
+      dept_id: 0,
+      list: [],
+      dept_list: [],//部门分类
+      keyword: "",
+      owner_id: 0,
+      user_info: this.$store.getters.user_info,
+      pid: 0,
+      pid_list: [],
+      selected_box_width: "0",
+      pid_list_arr: [],
+      checked: false,
+      indeterminate: false,
+      not_user: user_no_select,
+    };
+  },
+  watch: {
+    max(val) {
+      this.set_button_width();
+    },
+    selected(val) {
+      console.log(val);
+      let selected = JSON.parse(JSON.stringify(val));
+      this.employee_selected = [];
+      this.dept_selected = [];
+      this.employee_selected_list = selected.employee;
+      this.dept_selected_list = selected.dept;z
+      for (let i in selected.employee) {
+        this.employee_selected.push(selected.employee[i].id);
+      }
+      for (let i in selected.dept) {
+        this.dept_selected.push(selected.dept[i].dept_id);
+      }
+      this.set_button_width();
+    },
+    visible(val) {
+      // this.visible_ = JSON.parse(JSON.stringify(val))
+      // if(val){
+      setTimeout(() => {
+        if (this.$route.query.pid) {
+          this.pid = this.$route.query.pid;
+        }
+        this.get_user_list();
+        this.get_dept_list();
+      }, 200);
+      // }
+      this.set_button_width();
+    },
+    employee_selected_list() {
+      let l =
+        this.employee_selected_list.length + this.dept_selected_list.length;
+      let width = 0.9 * l;
+      this.selected_box_width = width + "rem";
+      this.set_button_width();
+    },
+    dept_selected_list() {
+      let l =
+        this.employee_selected_list.length + this.dept_selected_list.length;
+      let width = 0.9 * l;
+      this.selected_box_width = width + "rem";
+      this.set_button_width();
+    },
+    //搜索
+    keyword() {
+      this.get_user_list(function () {});
+    },
+  },
+  methods: {
+    checkedChange(val) {
+      if (val) {
+        for (let i in this.list) {
+          this.$set(this.list[i], "checked", true);
+        }
+        this.$nextTick(() => {
+          let employeeSelectedList = JSON.parse(
+            JSON.stringify(this.employee_selected_list)
+          );
+          let employeeSelectedIds = [],
+            total = 0;
+          employeeSelectedList.forEach((element) => {
+            employeeSelectedIds.push(element.id);
+          });
+          for (const i in this.list) {
+            if (employeeSelectedIds.includes(this.list[i].id)) {
+              total += 1;
+            } else {
+              this.employee_selected_list.push(this.list[i]);
+            }
+          }
+          // 未处理好 20200713
+          // this.lsit.length == total?this.indeterminate = true:this.indeterminate = false
+        });
+      } else {
+        this.clear_data();
+      }
+    },
+    close_before(done) {
+      this.close();
+    },
+    set_button_width() {},
+    back() {
+      this.pid = this.pid_list[this.pid_list.length - 1];
+      this.pid_list.splice(this.pid_list.length - 1);
+      this.pid_list_arr.splice(this.pid_list_arr.length - 1);
+      this.get_user_list();
+    },
+    back_by_index(index) {
+      if (index == this.pid_list.length) {
+        return false;
+      }
+      this.pid = this.pid_list[index];
+      this.pid_list.splice(index, 100);
+      this.pid_list_arr.splice(index, 100);
+      this.get_user_list(function () {});
+    },
+    show_child(item) {
+      this.pid_list.push(this.pid);
+      this.pid_list_arr.push(item);
+      this.pid = item.id;
+      this.get_user_list(function () {});
+    },
+    //添加或移除已添加的员工
+    employee_cancel(item) {
+      this.employee_selected_list.map((arr, index) => {
+        if (arr.id == item.id) {
+          this.employee_selected_list.splice(index, 1);
+        }
+      });
+      this.list.map((arr, index) => {
+        if (arr.id == item.id) {
+          this.$set(arr, "checked", false);
+        }
+      });
+    },
+    dept_cancel(item) {
+      this.dept_selected.splice(this.dept_selected.indexOf(item.id), 1);
+      let delete_index = -1;
+      for (let i in this.dept_selected_list) {
+        if (this.dept_selected.indexOf(this.dept_selected_list[i].id) < 0) {
+          delete_index = i;
+        }
+      }
+      if (delete_index >= 0) {
+        this.dept_selected_list.splice(delete_index, 1);
+        for (let i in this.dept_list) {
+          if (this.dept_list[i].dept_id == item.id) {
+            this.$set(this.dept_list[i], "checked", false);
+          }
+        }
+      }
+    },
+    //选择员工
+    select_employee(item) {
+      if (this.employee_not_select.indexOf(item.id) >= 0) {
+        return false;
+      }
+      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_list.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;
+      }
+    },
+
+    select_dept(item) {
+      if (!this.can_select_dept) {
+        this.show_child(item);
+        return false;
+      }
+      if (item.checked) {
+        item.checked = false;
+        this.dept_cancel(item);
+      } else {
+        if (!this.dept_multi) {
+          this.dept_selected = [];
+          this.dept_selected_list = [];
+          for (let i in this.dept_list) {
+            this.$set(this.dept_list[i], "checked", false);
+          }
+        }
+        this.dept_selected.push(item.id);
+        this.dept_selected_list.push({
+          dept_id: item.id,
+          dept_name: item.name,
+          avatar: "static/images/e66f.jpg",
+          // avatar: "@/assets/image/e66f.jpg",
+        });
+        item.checked = true;
+      }
+    },
+    clear_data() {
+      this.employee_selected = [];
+      this.employee_selected_list = [];
+      this.dept_selected = [];
+      this.dept_selected_list = [];
+      this.checked = false;
+      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.visible = false
+      this.$emit("update:visible", false);
+      this.$emit("cancel");
+      if (this.close_clear_data) {
+        this.employee_selected = [];
+        this.employee_selected_list = [];
+        this.dept_selected = [];
+        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() {
+      this.$emit("confirm", {
+        employee: this.employee_selected_list,
+        dept: this.dept_selected_list,
+      });
+      this.close();
+    },
+    //获取部门列表
+    get_dept_list() {
+      if (this.employee_list.length > 0) {
+        return;
+      }
+
+      this.$axios
+        .get("/api/department/index", {
+          params: {
+            pid: this.pid,
+            keyword: this.keyword,
+          },
+        })
+        .then((res) => {
+          console.log(res)
+          for (let i in res.data.data.list) {
+            res.data.data.list[i]["checked"] = false;
+            if (this.dept_selected.indexOf(res.data.data.list[i].id) >= 0) {
+              res.data.data.list[i]["checked"] = true;
+            }
+          }
+          this.dept_list = res.data.data.list;
+          this.owner_id = res.data.data.owner_id;
+          this.company_info = res.data.data.company_info;
+          if (res.data.data.dept_info == null) {
+            this.dept_name = JSON.parse(
+              JSON.stringify(res.data.data.company_info.name)
+            );
+            this.dept_id = 0;
+          } else {
+            this.dept_name = JSON.parse(
+              JSON.stringify(res.data.data.dept_info.name)
+            );
+            this.dept_id = res.data.data.dept_info.id;
+          }
+        })
+        .catch((e) => {});
+    },
+    //获取员工详情
+    get_user_list() {
+      var _this = this;
+      var employee_selected_list = this.employee_selected_list;
+      if (this.employee_list.length > 0) {
+        let list = this.employee_list;
+        for (let i in list) {
+          list[i]["letter_index"] = "#";
+          if (this.$store.getters.employee_map[list[i].id]) {
+            list[i]["letter_index"] = this.$store.getters.employee_map[
+              list[i].id
+            ].letter_index;
+            if (this.$store.getters.employee_map[list[i].id].img_url == "") {
+              list[i]["img_url"] = "static/images/head_default.png";
+            } else {
+              list[i]["img_url"] = this.$store.getters.employee_map[
+                list[i].id
+              ].img_url;
+            }
+          }
+
+          list[i]["checked"] = false;
+          if (this.employee_selected.indexOf(list[i].id) >= 0) {
+            list[i]["checked"] = true;
+          }
+        }
+        this.list = list.sort((a, b) => {
+          return a.letter_index.charCodeAt(0) - b.letter_index.charCodeAt(0);
+        });
+        return false;
+      }
+      this.list = [];
+      this.$axios
+        .get("/api/employee/index", {
+          params: {
+            dept_id: this.pid, //员工ID
+            keywords: this.keyword, //搜索关键字
+            page: 0,
+            page_size: 2000,
+          },
+        })
+        .then((res) => {
+          var employee = res.data.data.list || [];
+          employee.map((item) => {
+            if (this.not_user && item.is_creator == 1) {
+              item["show"] = false;
+            } else {
+              item["show"] = true;
+            }
+            item["checked"] = false;
+            if (item.img_url == "") {
+              item.img_url = "static/images/head_default.png";
+            }
+            for (var i in employee_selected_list) {
+              //判断传进来的员工是否是员工集合里的，是就设为已点击状态
+              if (employee_selected_list[i].id == item.id) {
+                item["checked"] = true;
+              }
+            }
+          });
+          if (employee.length == employee_selected_list.length) {
+            this.checked = true;
+          }
+          _this.list = employee;
+        })
+        .catch((e) => {
+          _this.$message.error(e.data.msg);
+        });
+    },
+  },
+  created() {
+    if (document.documentElement.style.height) {
+      this.com_height = document.documentElement.style.height;
+    }
+    setTimeout(() => {
+      if (this.$route.query.pid) {
+        this.pid = this.$route.query.pid;
+      }
+      this.get_user_list();
+      this.get_dept_list();
+    }, 200);
+  },
+};
+</script>
+
+<style scoped>
+.employee_selector_box {
+  width: 600px;
+  padding: 24px;
+}
+
+/* 搜索框 */
+.employee_selector_box .search {
+  width: 82%;
+  position: relative;
+  display: flex;
+  left: 10%;
+  padding: 0;
+  border: 1px #c0c4cc solid;
+  border-radius: 18.5px;
+}
+
+.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 .search-box /deep/ .el-input {
+  display: inline-block;
+  width: 84%;
+  padding: 0 24px 0 6px;
+  background: none;
+  border-radius: 0px;
+  border: none;
+}
+
+.employee_selector_box .search-box /deep/ .el-input input {
+  padding: 0;
+  line-height: 34px;
+  border: none;
+}
+
+/* /搜索框 */
+
+/* 左边框 */
+.employee_selector_box .choose_left {
+  padding: 8px 10px 8px 10px;
+}
+
+.employee_selector_box .choose_left .employee_cell {
+  border-bottom: 1px #f8f8f8 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 /deep/ .el-scrollbar__thumb {
+  width: 2px;
+  margin: 15px 0 0 6px;
+  background: #409eff;
+}
+
+/* 左边框 */
+
+/* 右边距 */
+.employee_selector_box .option-box {
+  display: flex;
+    justify-content: space-between;
+  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;
+}
+
+.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 {
+  margin: 10px 0;
+  display: block;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+/*滚动条的宽度*/
+
+.dept_path::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
+
+.dept_path::-webkit-scrollbar-track {
+  width: 6px;
+  background-color: #fff0;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+/*滚动条的设置*/
+
+.dept_path::-webkit-scrollbar-thumb {
+  background-color: #fff0;
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+/*滚动条移上去的背景*/
+
+.dept_path:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+}
+</style>

src/views/guide.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="all">
+		向导
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+	export default {
+		data() {
+			return {
+
+			};
+		},
+		created() {
+
+		},
+		mounted() {
+
+		},
+		methods:{
+			
+		}
+	};
+</style>

src/views/voluntarilyPoint.vue

@@ -1,213 +1,892 @@
 <template>
-	<div>
-        <el-alert class="diy-tip" title="什么是固定积分?" @close="tips_close" v-if="tips_show" type="success" description show-icon>
-          <p>系统按照设定的时间（每月/每周/每日) 自动给员工添加的积分，比如某员工有一个工程师证，得到公司的认可，公司就会每月给他加分</p>
-        </el-alert>
-		<div class="all">
-			<div class="flex-box">
-				<div class="terr-left">
-					<div><el-button size="medium" @click="add_class" type="primary">+ 添加规则分类</el-button></div>
-					<div><el-button size="medium" @click="add_class" type="primary">+ 添加规则分类</el-button></div>
-					<el-menu class="rule_name" :unique-opened="true">
-					  <el-submenu  :index="index.toString()" v-for="(item,index) in rule_list" :key="index">
-						<template slot="title">
-						  <i class="el-icon-edit-outline" @click.stop="edit_grouping(item)"></i>
-						  <span class="title_top">{{item.name}}</span>
-						</template>
-						<span :index="i.toString()" v-for="(d,i) in item_list" :key="i" v-show="d[0].rule_id == item.id">
-						  <el-menu-item :index="i1.toString()" v-for="(data,i1) in d" :key="i1" @click="open_right(data)">
-							<span slot="title">{{data.remark}}</span>
-						  </el-menu-item>
-						</span>
-					  </el-submenu>
-					</el-menu>  
-				</div>
-				<div class="terr-right border-right flex-1">
-					<div class="flex-box flex-v-ce">
-						<div class="name">你好啊</div>
-						<el-button size="small" plain>编辑</el-button>
-					</div>
-					<div class="flex-box btns flex-v-ce">
-						<el-button size="medium"  @click="del_item" type="danger" plain>批量删除</el-button>
-						<el-button size="medium" @click="add_rule" type="primary">添加规则</el-button>
-						<el-button size="medium"  @click="import_rules_show = true" plain>导入规则</el-button>
-					</div>
-					<el-table stripe ref="multipleTable" :data="list" tooltip-effect="dark" 
-					  @selection-change="handleSelectionChange" @row-click="editDetails">
-					  <el-table-column type="selection" width="55">
-					  </el-table-column>
-					  <el-table-column prop="remark" label="内容" width="500" style="padding-right:30px;"></el-table-column>
-					  <el-table-column label="分值">
-					    <template slot-scope="scope">
-					      <div v-if="scope.row.range_type == 1"><span :class="scope.row.min_point > 0?'color_red':'color_green'"> {{scope.row.min_point}} </span> {{types_list[scope.row.pt_id]}} </div>
-					      <div v-if="scope.row.range_type == 2"><span :class="scope.row.min_point > 0?'color_red':'color_green'"> {{scope.row.min_point}} </span> 至 <span :class="scope.row.max_point > 0?'color_red':'color_green'"> {{scope.row.max_point}} </span> {{types_list[scope.row.pt_id]}} </div>
-					    </template>
-					  </el-table-column>
-					</el-table>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div>
+    <el-alert
+      class="diy-tip"
+      title="什么是固定积分?"
+      @close="tips_close"
+      v-if="tips_show"
+      type="success"
+      description
+      show-icon
+    >
+      <p>系统按照设定的时间（每月/每周/每日) 自动给员工添加的积分，比如某员工有一个工程师证，得到公司的认可，公司就会每月给他加分</p>
+    </el-alert>
+    <div class="all">
+      <div class="flex-box">
+        <div class="terr-left">
+          <div>
+            <el-button size="medium" @click="add_grouping()" plain>新增加分组</el-button>
+          </div>
+          <div>
+            <el-button size="medium" @click="add_rules_detail" plain>新增加分项</el-button>
+          </div>
+
+          <!-- 循环分组 -->
+          <el-col :span="24" style="padding-right: 0;" v-loading="rule_trees_load">
+            <el-menu class="rule_name" :unique-opened="true">
+              <el-submenu :index="index.toString()" v-for="(item,index) in rule_list" :key="index">
+                <template slot="title">
+                  <i class="el-icon-edit-outline title_top" @click.stop="edit_grouping(item)"></i>
+                  <span class="title_top">{{item.name}}</span>
+                </template>
+                <span
+                  :index="i.toString()"
+                  v-for="(d,i) in item_list"
+                  :key="i"
+                  v-show="d[0].rule_id == item.id"
+                >
+                  <el-menu-item
+                    :index="i1.toString()"
+                    v-for="(data,i1) in d"
+                    :key="i1"
+                    @click="open_right(data)"
+                  >
+                    <span slot="title">{{data.remark}}</span>
+                  </el-menu-item>
+                </span>
+                <!-- <el-menu-item :index="i.toString()" v-for="(data,i) in item.data" :key="i" @click="open_right(data)" >{{data.name}}</el-menu-item> -->
+              </el-submenu>
+            </el-menu>
+          </el-col>
+        </div>
+
+        <div class="terr-right border-right flex-1" v-loading="table_loading">
+          <!-- <div class="flex-box flex-v-ce">
+            <div class="name">{{item_info.remark}}</div>
+            <el-button size="small" plain  @click="edit_rules()">编辑</el-button>
+          </div> -->
+		  	<el-row> 
+              <el-col :span="24" style="font-size:20px;color:#303133;line-height:36px;">
+               {{right_rules_detail.remark}} <span style="padding-left: 10px;">{{right_rules_detail.min_point}}B分</span>
+                <el-button plain style="padding:10px 12px; margin-left: 10px;" @click="edit_rules(item_info)">编辑</el-button>
+              </el-col>
+            </el-row>
+          <div class="flex-box btns flex-v-ce">
+            <el-button size="medium" @click="del_item" type="danger" plain>批量移除</el-button>
+            <el-button type="primary" @click="add_employee_show= true">添加人员</el-button>
+
+            <!-- <el-select v-model="select_employee_id" clearable placeholder="请选择人员">
+              <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select> -->
+
+          </div>
+          <!-- <el-table
+            stripe
+            ref="multipleTable"
+            :data="table_list"
+            tooltip-effect="dark"
+            @selection-change="handleSelectionChange"
+            @row-click="editDetails"
+          >
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column prop="remark" label="姓名" width="500" style="padding-right:30px;"></el-table-column>
+            <el-table-column label="加分周期">
+              <template slot-scope="scope">
+                <div v-if="scope.row.range_type == 1">
+                  <span
+                    :class="scope.row.min_point > 0?'color_red':'color_green'"
+                  >{{scope.row.min_point}}</span>
+                  {{types_list[scope.row.pt_id]}}
+                </div>
+                <div v-if="scope.row.range_type == 2">
+                  <span
+                    :class="scope.row.min_point > 0?'color_red':'color_green'"
+                  >{{scope.row.min_point}}</span> 至
+                  <span
+                    :class="scope.row.max_point > 0?'color_red':'color_green'"
+                  >{{scope.row.max_point}}</span>
+                  {{types_list[scope.row.pt_id]}}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table> -->
+          <el-table ref="multipleTable" :data="table_list" v-loading="table_loading" tooltip-effect="dark" style="width: 100%;margin-top:20px;"
+              @selection-change="handleSelectionChange" >
+              <el-table-column type="selection" width="45"></el-table-column>
+              <el-table-column label="姓名">
+                <template slot-scope="scope">
+                  <div  style="display:flex">
+                  <span class="fl">
+                    <userImage :id="scope.row.employee_id" width="50px" height="50px" :user_name="scope.row.employee.name" :img_url="scope.row.employee.img_url" v-if="scope.row.employee"></userImage>
+                  </span>
+                  <span style="margin-left: 10px; line-height: 50px; display: inline-block" v-if="scope.row.employee">{{scope.row.employee.name}}</span>
+                </div></template>
+              </el-table-column>
+              <el-table-column prop="cycle_remark" label="加分周期"></el-table-column>
+            </el-table>
+
+          <!-- 分页 -->
+            <div style=" text-align: center; padding: 20px;">
+              <el-pagination background layout="total, prev, pager, next" :current-page="page+1" @current-change="handleCurrentChange"
+                :total="total">
+              </el-pagination>
+            </div>
+        </div>
+      </div>
+
+      <!-- 可写公共组建： -->
+      <!-- 新增加分组弹出框 -->
+      <el-dialog
+        :close-on-click-modal="false"
+        :title="grouping_type?'编辑分类':'新增分类'"
+        :visible.sync="dialogVisible"
+        width="40%"
+      >
+        <el-form
+          :model="numberValidateForm"
+          ref="numberValidateForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item
+            label="分组名称"
+            prop="name"
+            :rules="[
+						{ required: true, message: '请输入分组名称'},
+						]"
+          >
+            <el-input
+              type="age"
+              v-model="numberValidateForm.name"
+              autocomplete="off"
+              placeholder="请输入分组名称"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer" style=" overflow: hidden;">
+          <el-button
+            class="fl"
+            type="danger"
+            v-show="grouping_type"
+            @click="del_grouping(numberValidateForm)"
+            style="float:left"
+            :disabled="disabled"
+          >删除</el-button>
+          <el-button
+            type="primary"
+            @click="submitForm('numberValidateForm')"
+            :disabled="disabled"
+          >确 定</el-button>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+        </span>
+      </el-dialog>
+
+      <!-- 新增加分项 -->
+      <el-dialog :title="rules_detail_title?'编辑规则':'新增规则'" :visible.sync="dialogFormVisible" width="500px">
+        <el-form :model="rules_detail_form" ref="rules_detail_form" :rules="rules_rules" label-width="120px">
+          <el-form-item label="规则名称" :label-width="formLabelWidth" prop="remark" :rules="[{ required: true, message: '请输入规则名称'},]">
+            <el-input v-model="rules_detail_form.remark" placeholder="请输入规则名称" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="分类" :label-width="formLabelWidth" prop="rule_id" :rules="[{ required: true, message: '请选择分类'},]">
+            <el-select v-model="rules_detail_form.rule_id" style="width: 100%;" placeholder="请选择分类">
+            	<el-option v-for="item in rule_list" :key="item.value" :label="item.name" :value="item.id">
+            	</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="积分" prop="min_point" :rules="[{ required: true, message: '请输入积分'},]">
+            <el-input v-model="rules_detail_form.min_point" placeholder="请输入积分" oninput="if(this.value=='0'){this.value='';}else{this.value=this.value.replace(/[^0-9]/g,'')}"></el-input>
+            <span
+              data-v-a17f1960=""
+              style="display: block; font-size: 12px; color: rgb(96, 98, 102);text-align: left;"
+            >固定加分加B分</span>
+          </el-form-item>
+          <el-form-item label="是否与考勤挂钩" prop="is_attendance">
+            <el-switch v-model="is_attendance"></el-switch>
+          </el-form-item>
+          <div style="overflow: hidden;">
+            <el-button
+              type="danger"
+              v-show="rules_detail_title"
+              class="fl"
+              @click="del_rules_detail(rules_detail_form)"
+			   style="float:left"
+			   :disabled="disabled"
+            >删除</el-button>
+            <el-button class="fr" type="primary" @click="next('rules_detail_form') " style="float:right" :disabled="disabled">确 定</el-button>
+            <el-button class="fr" @click="rules_detail_close('rules_detail_form')" style="float:right">取 消</el-button>
+          </div>
+        </el-form>
+      </el-dialog>
+
+
+      <el-dialog title="添加人员" :visible.sync="add_employee_show"  :before-close="add_employee_close"
+      width="700px">
+        <el-form :model="add_employee_form" ref="add_employee_form" label-width="80px">
+          <el-form-item label="加分周期" :rules="[{ required: true, message: '请选择加分周期', trigger: 'change' }]">
+            <el-select v-model="task_cycle_name" placeholder="请选择加分周期">
+              <el-option v-for="item in task_cycle" :key="item.value" :label="item.name" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div>
+            <EmployeeSelector1 :max='add_employee_max' :can_select_dept="false" :visible.sync="add_employee_visible" @confirm="add_employee_confirm" ref="Employee"></EmployeeSelector1>
+          </div>
+          <el-form-item style="text-align: right; margin-bottom: 0;margin-top: 20px;">
+            <el-button @click="add_employee_close()">取消</el-button>
+            <el-button type="primary" @click="sub_add_employee('add_employee_form')" 
+            :disabled="disabled">完成</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import EmployeeSelector1 from "@/components/EmployeeSelector"
 export default {
-	data() {
-		return {
-			rule_list: [{ name: '阿萨德' }, { name: '阿萨德' }, { name: '阿萨德' }, { name: '阿萨德' }],
-			table_list: [],
-			tips_show: false,
-			role_loading: false,
-			item_info: {}
-		};
-	},
-	created() {},
-	mounted() {
-		if (localStorage.getItem('framework')) {
-			this.tips_show = false;
-		} else {
-			this.tips_show = true;
-		}
-	},
-	methods: {
-		del_item() {},
-		add_item() {},
-		// 关闭提示语
-		tips_close() {
-			localStorage.setItem('framework', 'true');
-			this.tips_show = false;
-		},
-		get_role_list() {
-			let self = this;
-			self.role_loading = true;
-			self.$axios
-				.get('/api/role/list')
-				.then(res => {
-					if (res.data.code == 1) {
-						this.role_list = res.data.data.list;
-						this.open_right(this.role_list[0]);
-					} else {
-						self.$message.error(res.data.msg);
-					}
-				})
-				.finally(() => {
-					self.role_loading = false;
-				});
-		},
-		open_right(data) {
-			this.item_info = data;
-			this.get_table_list();
-		},
-		get_table_list() {
-			let self = this;
-			self.table_loading = true;
-			self.$http
-				.get('/api/role/user', { params: { role_id: self.item_info.id } })
-				.then(res => {
-					if (res.data.code == 1) {
-						let point_types = self.$store.getters.point_types;
-						let point_type_map = {};
-						for (let i in point_types) {
-							point_type_map[point_types[i].id] = point_types[i];
-						}
-						let data = res.data.data.list;
-						// 处理添加人员的组件选中问题
-						this.rules_employee_arr.employee = [];
-						for (let i in data) {
-							this.rules_employee_arr.employee.push({ id: data[i].id, img_url: data[i].img_url, name: data[i].name });
-							if (data[i].point_limit !== null && data[i].point_limit.length == 0) {
-								data[i].point_limit = [{ name: 'A分', point: 0, pt_id: 2 }, { name: 'B分', point: 0, pt_id: 3 }];
-							}
-							if (data[i].deduct_task_monthly !== null && data[i].deduct_task_monthly.length == 0) {
-								data[i].deduct_task_monthly = [{ name: 'A分', point: 0, pt_id: 2 }, { name: 'B分', point: 0, pt_id: 3 }];
-							}
-							if (data[i].reward_task_monthly !== null && data[i].reward_task_monthly.length == 0) {
-								data[i].reward_task_monthly = [{ name: 'A分', point: 0, pt_id: 2 }, { name: 'B分', point: 0, pt_id: 3 }];
-							}
-							if (!data[i]['point_limit_obj']) {
-								data[i]['point_limit_obj'] = {};
-							}
-							for (let k in data[i].point_limit) {
-								data[i]['point_limit_obj'][point_type_map[data[i].point_limit[k].pt_id].code] = data[i].point_limit[k].point;
-							}
-						}
-						this.table_list = data;
-					} else {
-						self.$message.error(res.data.msg);
-					}
-				})
-				.finally(() => {
-					self.table_loading = false;
-				});
-		}
-	}
-};
-</script>
+  data() {
+    return {
+      table_list: [],
+      tips_show: false,
+      item_info: {},
+      rule_trees_load: false,
+      dialogVisible: false,
+      
+      rules_detail_show: false,//是否弹出添加人员弹窗
+      add_employee_visible: false,
+        add_employee_max: 0,
+        add_employee_show: false,
 
-<style scoped="scoped" lang="scss">
-      .rule_name {
-        border-right: 0;
-        margin-top:16px;
-        li {
-          // margin-right:20px !important;
-          border-bottom:1px #f8f8f8 solid;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          ::v-deep .el-submenu__title {
-            padding:0 10px !important;
-            i.el-submenu__icon-arrow.el-icon-arrow-down{
-              color: #909399 !important;
+        
+        task_cycle_name: 1,
+        add_employee_form: {
+          employee_ids: []
+        },
+        
+        del_arr: {
+          ids: []
+        },
+        page: 0,
+        total: 0,
+        table_loading: false,
+
+      dialogFormVisible: false,
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      formLabelWidth: "120px",
+
+      numberValidateForm: {
+        name: "",
+      },
+      disabled: false, //按钮不能被多次点击
+      grouping_type: "",
+      rules_detail_title: "",
+      rule_list: [], //分类集合
+	    item_list: [], //规则集合
+	  
+		  right_rules_detail: {},
+		
+      add_employee_id: '',
+      add_employee_id: '',
+      rules_detail_form: {
+        rule_id: "",
+        range_type: "1",
+        prize_type: "0",
+        min_point: "",
+        remark: "",
+        is_attendance: "0",
+        cycle_type: "2",
+        pt_id: "3",
+    },
+    is_attendance:false,
+	  rules_rules: {
+          remark: [{
+              required: true,
+              message: '请输入规则名称',
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: '分类名称不能大于100个字符',
+              trigger: 'blur'
+            }
+          ],
+          min_point: [{
+              required: true,
+              message: '请输入积分',
+              trigger: 'blur'
+            },
+          ],
+          rule_id: [{
+            required: true,
+            message: '请选择分类',
+            trigger: 'blur'
+          }],
+        },
+        task_cycle: [{
+            name: '每天自动加分',
+            value: 1
+          },
+          {
+            name: '每周自动加分',
+            value: 2
+          },
+          {
+            name: '每月自动加分',
+            value: 3
+          },
+        ],
+    };
+  },
+  components: {
+    EmployeeSelector1
+  },
+  created() {},
+  mounted() {
+    if (localStorage.getItem("framework")) {
+      this.tips_show = false;
+    } else {
+      this.tips_show = true;
+    }
+    this.get_role_lists();
+  },
+  methods: {
+    
+      handleCurrentChange(val) {
+        this.page = val-1
+        this.open_right();
+			},
+    // 组建
+      add_employee_confirm(val) {
+        this.add_employee_form.employee_ids = []
+        if (val.employee.length !== 0) {
+          val.employee.forEach(element => {
+            this.add_employee_form.employee_ids.push(element.id)
+          });
+        }
+      },
+
+      // 添加成员点击取消
+      add_employee_close() {
+         this.task_cycle_name='';
+         this.add_employee_show = false
+      },
+      // 添加成员点击完成
+      sub_add_employee(form) {
+        let self = this;
+        if(!self.task_cycle_name){
+           self.$message.error('请选择加分周期');
+           return false;
+        }
+        this.$refs.Employee.confirm();//调用组件的confirm（）；
+        if(this.add_employee_form.employee_ids.length<=0){
+          this.$message.error("请选择员工")
+          return false;
+        }
+        let data = {
+          employee_ids: this.add_employee_form.employee_ids,
+          task_cycle: self.task_cycle_name,
+          item_id: self.add_employee_id,
+          rule_id: self.add_rulse_id
+        }
+        self.$refs[form].validate((valid) => {
+          if (valid) {
+            if (data.rule_id == '' || data.item_id == '') {
+              self.$message.error('请先选择细则')
+            } else {
+              this.disabled = true;
+              self.$axios({
+                url: '/api/integral/auto/add',
+                method: 'post',
+                data: data,
+              }).then((res) => {
+                this.disabled = false;
+                if (res.data.code == 1) {
+                  self.add_employee_show = false
+                  self.$message.success('此次操作成功' + res.data.data.success + '条,失败' + res.data.data.error +
+                    '条,已经存在的' + res.data.data.exist + '条')
+                     self.open_right();
+                } else {
+                  self.$message.error(res.data.msg)
+                }
+              }).catch((e) => {
+                self.$message.error(e.data.msg)
+              }).finally(() => {
+                self.loading = false
+              })
             }
+          } else {
+            return false;
           }
-          li:hover .el-submenu__title{
-          background:#e7f6ff;
+        });
+      },
+
+
+
+
+    editDetails() {},
+      handleSelectionChange(val) {
+        this.del_arr.ids = []
+        val.forEach(element => {
+          this.del_arr.ids.push(element.id)
+        });
+      },
+    add_item() {},
+    // 批量删除
+    del_item() {
+        let self = this
+        if (self.del_arr.ids.length !== 0) {
+          self.$confirm('此操作将永久删除该人员的自动加分, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            self.$axios({
+              url: '/api/integral/auto/delete/many',
+              method: 'post',
+              data: self.del_arr,
+            }).then((res) => {
+              if (res.data.code == 1) {
+                self.$message.success(res.data.msg)
+                self.open_right();
+              } else {
+                self.$message.error(res.data.msg)
+              }
+            }).catch((e) => {
+              self.$message.error(e.data.msg)
+            }).finally(() => {
+              self.loading = false
+            })
+          }).catch(() => {});
+        } else {
+          self.$message.error('请选择要移除的人员')
+        }
+      },
+    //导入规则
+    import_rules_show() {},
+    // 关闭提示语
+    tips_close() {
+      localStorage.setItem("framework", "true");
+      this.tips_show = false;
+    },
+    get_role_list() {
+      let self = this;
+      self.rule_trees_load = true;
+      self.$axios
+        .get("/api/role/list")
+        .then((res) => {
+          if (res.data.code == 1) {
+            this.role_list = res.data.data.list;
+            this.open_right(this.role_list[0]);
+          } else {
+            self.$message.error(res.data.msg);
           }
-          ul{
-            li.is-active{
-              background-color:#e7f6ff !important;
-            }
+        })
+        .finally(() => {
+          self.rule_trees_load = false;
+        });
+  },
+  
+
+  //   get_table_list() {
+  //     let self = this;
+  //     self.table_loading = true;
+  //     self.$axios
+  //       .get("/api/role/user", { params: { role_id: self.item_info.id } })
+  //       .then((res) => {
+  //         if (res.data.code == 1) {
+  //           let point_types = self.$store.getters.point_types;
+  //           let point_type_map = {};
+  //           for (let i in point_types) {
+  //             point_type_map[point_types[i].id] = point_types[i];
+  //           }
+  //           let data = res.data.data.list;
+  //           // 处理添加人员的组件选中问题
+	// 		      this.rules_employee_arr.employee = [];
+  //           for (let i in data) {
+  //             this.rules_employee_arr.employee.push({
+  //               id: data[i].id,
+  //               img_url: data[i].img_url,
+  //               name: data[i].name,
+  //             });
+  //             if (
+  //               data[i].point_limit !== null &&
+  //               data[i].point_limit.length == 0
+  //             ) {
+  //               data[i].point_limit = [
+  //                 { name: "A分", point: 0, pt_id: 2 },
+  //                 { name: "B分", point: 0, pt_id: 3 },
+  //               ];
+  //             }
+  //             if (
+  //               data[i].deduct_task_monthly !== null &&
+  //               data[i].deduct_task_monthly.length == 0
+  //             ) {
+  //               data[i].deduct_task_monthly = [
+  //                 { name: "A分", point: 0, pt_id: 2 },
+  //                 { name: "B分", point: 0, pt_id: 3 },
+  //               ];
+  //             }
+  //             if (
+  //               data[i].reward_task_monthly !== null &&
+  //               data[i].reward_task_monthly.length == 0
+  //             ) {
+  //               data[i].reward_task_monthly = [
+  //                 { name: "A分", point: 0, pt_id: 2 },
+  //                 { name: "B分", point: 0, pt_id: 3 },
+  //               ];
+  //             }
+  //             if (!data[i]["point_limit_obj"]) {
+  //               data[i]["point_limit_obj"] = {};
+  //             }
+  //             for (let k in data[i].point_limit) {
+  //               data[i]["point_limit_obj"][
+  //                 point_type_map[data[i].point_limit[k].pt_id].code
+  //               ] = data[i].point_limit[k].point;
+  //             }
+  //           }
+  //           this.table_list = data;
+  //         } else {
+  //           self.$message.error(res.data.msg);
+  //         }
+  //       })
+  //       .finally(() => {
+  //         self.table_loading = false;
+  //       });
+	// },
+
+	
+
+
+//新增规则
+	add_rules_detail(){
+		 this.dialogFormVisible = true;
+		this.rules_detail_title = false;
+  },
+  
+	// 点击确定提交积分规则
+	next(form) {
+        let self = this
+        let data = null
+        self.rules_detail_form.max_point = self.rules_detail_form.min_point
+        //更改位置，可以发送请求时再传入
+        // if (self.rules_detail_form.is_attendance) {
+        //   self.rules_detail_form.is_attendance = 1
+        // } else {
+        //   self.rules_detail_form.is_attendance = 0
+        // }
+        if (this.rules_detail_title == false) {
+          data = {
+            items: [self.rules_detail_form]
           }
+        } else {
+          self.rules_detail_form.item_id = self.rules_detail_form.id
+          data = self.rules_detail_form
         }
-       ::v-deep .is-opened .el-submenu__title .title_top{
-            color:#409eff !important;
+        self.$refs[form].validate((valid) => {
+          if (valid) {
+            this.disabled = true;
+            console.log(this.is_attendance)
+            if (this.is_attendance) {
+              self.rules_detail_form.is_attendance = 1
+            } else {
+              self.rules_detail_form.is_attendance = 0
+            }
+            self.$axios({
+              url: this.rules_detail_title?'api/integral/rule/items/edit':'/api/integral/rule/items',
+              method: 'post' ,
+              data: data,
+            }).then((res) => {
+              console.log(res)
+      	      this.disabled = false;
+              this.dialogFormVisible = false;
+              setTimeout(() => {
+                this.is_attendance = false;
+              }, 300);
+              if (res.data.code == 1) {
+                self.$message.success(res.data.msg)
+                self.rules_detail_show = false
+                self.add_employee_id = res.data.data.item_id
+				        self.add_rulse_id = self.rules_detail_form.rule_id
+                self.get_role_lists()
+                if (this.rules_detail_title == false) {
+                  setTimeout(() => {
+                    self.add_employee_show = true
+                  }, 600);
+                }
+              } else {
+                self.$message.error(res.data.msg)
+              }
+            }).catch((e) => {
+              self.$message.error(e.data.msg)
+            }).finally(() => {
+              self.loading = false
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+	//点击取消
+      rules_detail_close(form) {
+		    this.dialogFormVisible = false;
+        this.rules_detail_show = false;
+        this.$refs[form].resetFields();
+	  },
+
+	open_right(data) {
+		let self = this
+        if (data) {
+          self.add_employee_id = data.id
+          self.add_rulse_id = data.rule_id
+          self.right_rules_detail = data
         }
-       ::v-deep .is-opened .el-menu .el-menu-item span{
-            color:#333;
+        self.rule_list_load = true
+        self.table_loading = true
+        var params = {
+          params: {
+            item_id: self.add_employee_id || '',
+            employee_id: self.employee_id || '',
+            page: self.page,
+          },
         }
-       ::v-deep .is-opened .el-menu .is-active span{
-            color:#409eff;
+        self.$axios.get('/api/integral/auto/list', params).then((res) => {
+          console.log(res)
+          if (res.data.code == 1) {
+            self.table_list = res.data.data.list||[]
+            self.total = res.data.data.total
+          } else {
+            self.$message.error(res.data.msg)
+          }
+        }).finally(() => {
+          self.table_loading = false
+        })
+      },
+	
+	//   编辑规则
+	edit_rules(data){
+		this.rules_detail_title = true;
+		this.dialogFormVisible = true;
+		this.rules_detail_title = true;
+    this.rules_detail_form = JSON.parse(JSON.stringify(this.right_rules_detail))
+    this.is_attendance=this.rules_detail_form.is_attendance == '0'?false:true
+	},
+	// 删除规则
+	del_rules_detail(item) {
+        this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+			
+      		this.disabled = true;
+          this.$axios({
+            url: '/api/integral/rule/items/destroy',
+            method: 'post',
+            data: {
+              item_id: item.id
+            },
+          }).then((res) => {
+			  
+		      this.dialogFormVisible = false;
+      		this.disabled = false;
+            if (res.data.code == 1) {
+				
+         	this.get_role_lists();
+              this.$message.success(res.data.msg)
+              this.rules_detail_show = false
+              this.get_rule_trees()
+            } else {
+              this.$message.error(res.data.msg)
+            }
+          }).catch((err) => {
+          }).finally(() => {
+            this.loading = false
+          })
+        })
+
+	  },
+	  
+
+
+
+    //新增加分组展示不同渲染
+    add_grouping() {
+      this.dialogVisible = true;
+      this.grouping_type = false;
+    },
+    // 新增加分组
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let data = this.grouping_type
+            ? {
+                rule_id: this.numberValidateForm.id,
+                pid: "0",
+                name: this.numberValidateForm.name,
+              }
+            : {
+                cycle_type: "2",
+                pid: "0",
+                name: this.numberValidateForm.name,
+              };
+          this.disabled = true;
+          this.$axios({
+            url: this.grouping_type
+              ? "api/integral/rule/edit"
+              : "/api/integral/rule",
+            method: "post",
+            data: data,
+          }).then((res) => {
+            this.dialogVisible = false;
+            this.disabled = false;
+            if (res.data.code == "1") {
+              this.get_role_lists();
+              this.$message.success(
+                this.grouping_type ? "修改积分规则" : res.data.msg
+              );
+            }
+          }).catch(err => {
+			  
+		  });
+        } else {
+          console.log("error submit!!");
+          return false;
         }
-	}
+      });
+    },
+    //修改分组
+    edit_grouping(item) {
+      this.dialogVisible = true;
+      this.numberValidateForm = JSON.parse(JSON.stringify(item));
+      this.grouping_type = true;
+    },
+    //删除分组
+    del_grouping(item) {
+      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.disabled = true;
+          this.$axios({
+            url: "api/integral/rule/destroy",
+            method: "post",
+            data: {
+              rule_id: item.id,
+            },
+          }).then((res) => {
+            this.dialogVisible = false;
+            this.disabled = false;
+            if (res.data.code == 1) {
+              this.get_role_lists();
+              this.$message.success("删除成功");
+            }
+          }).catch(err => {});
+        })
+        .catch(() => {
+			setTimeout(() => {
+            	this.dialogVisible = false;
+            }, 300);
+		});
+    },
+    // 获取分组
+    get_role_lists() {
+      this.rule_trees_load = true;
+      this.$axios
+        .get("/api/integral/rule/trees", {
+          params: {
+            cycle_type: "2",
+          },
+        })
+        .then((res) => {
+          console.log(res)
+          
+          this.is_attendance=this.rules_detail_form.is_attendance == '0'?false:true
+          this.rule_list = res.data.data.rule_tree;
+          this.item_list = res.data.data.item_list;
+		      this.rule_trees_load = false;
+		      if (this.item_list !== null) {
+              for (const key in this.item_list) {
+                for (let i = 0; i < this.item_list[key].length; i++) {
+                  if (i == 0) {
+                    this.open_right(this.item_list[key][i])
+                    return false
+                  }
+                }
+              }
+            }
+        });
+    },
+  },
+};
+</script>
 
-    .rule_list {
-      position: relative;
-      display: table-cell;
+<style scoped="scoped" lang="scss">
+.rule_name {
+  border-right: 0;
+  margin-top: 16px;
+  li {
+    // margin-right:20px !important;
+    border-bottom: 1px #f8f8f8 solid;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    ::v-deep .el-submenu__title {
+      padding: 0 10px !important;
+      i.el-submenu__icon-arrow.el-icon-arrow-down {
+        color: #909399 !important;
+      }
+    }
+    li:hover .el-submenu__title {
+      background: #e7f6ff;
     }
+    ul {
+      li.is-active {
+        background-color: #e7f6ff !important;
+      }
+    }
+  }
+  ::v-deep .is-opened .el-submenu__title .title_top {
+    color: #409eff !important;
+  }
+  ::v-deep .is-opened .el-menu .el-menu-item span {
+    color: #333;
+  }
+  ::v-deep .is-opened .el-menu .is-active span {
+    color: #409eff;
+  }
+}
 
-    .rule_list:after {
-      content: " ";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 1px;
-      background: #EBEEF5;
-    }	
-.terr-right{
-	.name{
-		font-size: 18px;
-		margin-right: 20px;
-	}
-	.btns button{
-		margin-top: 20px;
-		margin-right: 5px;
-	}
-}	
-.terr-left button {
-	margin: 0 auto;
-	display: block;
-	margin-bottom: 10px;
+.rule_list {
+  position: relative;
+  display: table-cell;
 }
 
+.rule_list:after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background: #ebeef5;
+}
+.terr-right {
+    min-height: calc(100vh - 224px);
+  .name {
+    height: 100%;
+    font-size: 18px;
+    margin-right: 20px;
+  }
+  .btns button {
+    margin-top: 20px;
+    margin-right: 5px;
+  }
+}
+.terr-left button {
+  margin: 0 auto;
+  display: block;
+  margin-bottom: 10px;
+}
 </style>