gdy_qywx_pc/src/views/setting/fixed_integral.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-alert
          class="diy-tip"
          title="什么是固定积分?"
          @close="tips_close"
          v-show="tips_show"
          type="success"
          description
          show-icon
        >
          <p>系统按照设定的时间（每月/每周/每日) 自动给员工添加的积分，比如某员工有一个工程师证，得到公司的认可，公司就会每月给他加分</p>
        </el-alert>
      </el-col>
    </el-row>
    <el-row class="fixed_integral_box">
      <el-col :span="6" class="rule_class">
        <el-row :gutter="40" style="margin:21px 0 36px;">
          <el-col :span="24">
            <div style="text-align: center; margin-bottom: 10px;">
              <el-button @click="add_grouping()" type="primary" style="padding:10px 64px;">添加分类</el-button>
            </div>
            <div style="text-align: center;">
              <el-button @click="add_rules_item" type="primary" style="padding:10px 64px;">添加规则</el-button>
            </div>
          </el-col>

          <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" @click.stop="edit_grouping(item)"></i>
                  <span class="title_top"><pre style="font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;max-width: calc(100vh - 500px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{item.name}}</pre></span>
                  <!-- <i class="el-icon-edit-outline" @click.stop="edit_grouping(item)">编辑</i> -->
                </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"><pre style="font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;max-width: calc(100vh - 500px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{data.remark}}</pre></span>
                  </el-menu-item>
                </span>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="18" class="rule_list" v-loading="table_loading">
        <el-row :gutter="60" style="margin:21px 0 36px;">
          <el-col
            :span="24"
            v-show="(rule_list.length == 0||item_list.length == 0)"
            style="text-align: center;margin: 0 auto;position: relative;top: 50%;margin-top: 120px;"
          >
            <p>
              <img src="/static/images/nodata_default.png" width="200px" alt />
            </p>
            <p style="color: #909399;">还没有分类和规则</p>
            <p style="color: #909399;">
              先
              <span style="color: #26A2FF;" @click="add_grouping">【添加分类】</span>，再
              <span style="color: #26A2FF;" @click="add_rules_item">添加规则</span>
            </p>
          </el-col>

          <el-col v-if="item_list.length != 0">
            <el-row>
              <!-- <el-col :span="24" style="font-size:20px;color:#303133;line-height:36px;">
                <pre  style="font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;display:flex">
                  <el-popover trigger="hover" placement="top" popper-class="popperSPBOX" style="padding: 9px 0 0 10px;">
                    <span style="white-space: pre-wrap">{{right_rules_detail.remark}}</span>
                    <div slot="reference" class="name-wrapper"  style=" max-width: calc(100vh - 500px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                      <span style="white-space: pre">{{right_rules_detail.remark}}</span>
                    </div>
                  </el-popover>
                  <el-popover trigger="hover" placement="top" popper-class="popperSPBOX" style="padding: 9px 0 0 10px;">
                    <span>{{right_rules_detail.min_point}}</span>
                    <div slot="reference" class="name-wrapper"  style=" max-width: calc(100vh - 830px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                      <span>{{right_rules_detail.min_point}}</span>
                    </div>
                  </el-popover>
                  <span style="padding: 9px 0 0 0;">B分</span> -->
              <!-- <el-button plain style="padding:10px 12px; margin-left: 10px;" @click="edit_rules(right_rules_detail)">编辑</el-button></pre>
              </el-col> -->

              <el-col :span="24" style="white-space: pre-wrap;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;display:flex;flex-wrap:wrap;font-size:20px;color:#303133;line-height:36px;">
                  <div><span style="font-size:19px">{{right_rules_detail.remark}}</span></div>
                  <div>
                    <span style="padding: 9px 0 0 10px;">{{right_rules_detail.min_point}}B分</span>
                    <el-button plain style="padding:10px 12px; margin-left: 10px;" @click="edit_rules(right_rules_detail)">编辑</el-button>
                  </div>
              </el-col>


            </el-row>
            <el-row :gutter="0" style="margin-top:20px;">
              <el-col :span="4">
                <el-button plain type="danger" @click="many_del">批量删除</el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="add_employee_show= true">添加人员</el-button>
              </el-col>
              <!-- <el-button
                type="primary"
                plain
                @click="import_rules_show = true"
              >导入自动积分</el-button> -->
              <el-col :span="7" style="padding-left:15px;float:right;position: relative;">
                <div v-if="dropOuOfPers.currentLabel && dropOuOfPers.currentLabel != ''" class="dropOuOfPersName" @click="takePartIn">
                  <WWOpenData type="userName" :openid="dropOuOfPers.currentLabel"></WWOpenData>
                </div>
                <el-select v-model="select_employee_id" ref="dropOuOfref"  clearable placeholder="请选择人员">
                  <el-option
                    v-for="item in employee_map"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <span style="float: left"><WWOpenData type="userName" :openid="item.name"></WWOpenData></span>
                  </el-option>
                </el-select>
                <!-- <el-input
                  placeholder="输入关键词"
                  ref="search-bar"
                  v-model="integralKeywords"
                  class="input-with-select"
                  @keyup.enter.native="onFilterChanged"
                >
                  <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
                </el-input> -->
              </el-col>
            </el-row>
            <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">
                  <span class="fl">
                    <userImage
                      :id="scope.row.employee_id"
                      :img_url="scope.row.img_url"
                      width="50px"
                      height="50px"
                      :user_name="scope.row.name"
                      v-if="scope.row"
                    ></userImage>
                  </span>
                  <span
                    style="margin-left: 10px; line-height: 50px; display: inline-block"
                    v-if="scope.row.name"
                  >
                  <WWOpenData type="userName" :openid="scope.row.name"></WWOpenData>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="cycle_remark" label="加分周期"></el-table-column>
              <template slot="empty">
                <div class="nopoint_box">
                  <div class="noimg noperson"></div>
                  <span class="title">没有对应的数据</span>
                </div>
              </template>
            </el-table>
            <div style=" text-align: center; padding: 20px;">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="page"
                @current-change="handleCurrentChange"
                :page-size.sync="pagesize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      :title="grouping_type == 'add'?'新增分类':'编辑分类'"
      :visible.sync="grouping_show"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form :model="grouping" ref="grouping" :rules="grouping_rules" label-width="100px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="grouping.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <div style="overflow: hidden;">
          <el-button
            class="fl"
            :disabled="btn_disabled"
            type="danger"
            v-show="grouping_type == 'edit'"
            @click="del_grouping(grouping)"
          >删除</el-button>
          <el-button
            class="fr"
            :disabled="btn_disabled"
            type="primary"
            @click="grouping_btn('grouping')"
          >确定</el-button>
          <el-button class="fr" :disabled="btn_disabled" @click="grouping_close('grouping')">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      :title="rules_detail_title"
      :visible.sync="rules_detail_show"
      width="532px"
      :close-on-click-modal="false"
      @close="rules_detail_close('rules_detail_form')"
    >
      <el-form
        :model="rules_detail_form"
        ref="rules_detail_form"
        :rules="rules_rules"
        label-width="120px"
      >
        <el-form-item label="规则名称" prop="remark">
          <el-input v-model="rules_detail_form.remark" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="rule_id">
          <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">
          <el-input v-model="rules_detail_form.min_point" placeholder="请输入积分"></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="rules_detail_form.is_attendance"></el-switch>
        </el-form-item> -->
        <div style="overflow: hidden;">
          <el-button
            type="danger"
            :disabled="btn_disabled"
            v-show="rules_detail_title == '编辑规则'"
            class="fl"
            @click="del_rules_detail(rules_detail_form)"
          >删除</el-button>
          <el-button
            class="fr"
            :disabled="btn_disabled"
            type="primary"
            @click="editRule('rules_detail_form')"
            v-if="rules_detail_title == '编辑规则'"
          >确定</el-button>
          <el-button
            class="fr"
            :disabled="btn_disabled"
            type="primary"
            @click="addRule('rules_detail_form')"
            v-else
          >确定</el-button>
          <el-button
            class="fr"
            :disabled="btn_disabled"
            @click="rules_detail_close('rules_detail_form')"
          >取消</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>
        <span style="color:#ff0000;padding-left:12px;">
          注：非在职状态的员工，系统不会执行自动积分
        </span>
        <div>
          <!-- <EmployeeSelector1
            :max="add_employee_max"
            :can_select_dept="false"
            :visible.sync="add_employee_visible"
            @confirm="add_employee_confirm"
            ref="Employee"
          ></EmployeeSelector1> -->
          
          <EmployeeSelector1
            :max="add_employee_max"
            :is_filtration_creator="true"
            :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 :disabled="btn_disabled" @click="add_employee_close()">取消</el-button>
          <el-button
            :disabled="btn_disabled"
            type="primary"
            @click="sub_add_employee('add_employee_form')"
          >完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 导入规则 -->
    <el-dialog
      title="导入自动积分"
      :visible.sync="import_rules_show"
      width="500px"
      @before-close="close_import">
      <el-row>
        <el-col :span="12">
          <div class="text-center">
            <p>1、导出模板，填写好规则</p>
            <p>
              <img src="/static/images/rules_mould.png" alt="">
            </p>
            <p>规则表</p>
            <p><a target="_blank" :href="publicBASE_API+'/api/download/point_auto'" ><el-button type="primary">下载模板</el-button></a></p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="text-center">
            <p>2、上传填好的规则表</p>
            <p>
              <img src="/static/images/rules_mould1.png" alt="">
            </p>
            <p>仅支持xls、xlsx格式文件</p>
            <el-upload
              class="upload-demo"
              :headers="ATOKEN"
              :data="{type:'auto_integral'}"
              ref="upload"
              :limit = '1'
              :action="integralUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="beforeFilesUpload"
              :file-list="fileList">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
            <p><el-button type="primary" @click="submitUpload" :loading="save_loading" v-show="import_btn_show" block>导入</el-button></p>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import EmployeeSelector1 from "@/views/common/EmployeeSelector1";
import { getToken } from '@/utils/auth'
import { type } from "os";
let PerformTheNumber = true;//五秒执行一次变量
export default {
  data() {
    const isInteger = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("积分不可以为空"));
      }
      setTimeout(() => {
        if (!Number(value)) {
          callback(new Error("积分必须是正整数"));
        } else {
          const re = /^[0-9]*[1-9][0-9]*$/;
          const rsCheck = re.test(value);
          if (!rsCheck) {
            callback(new Error("积分必须是正整数"));
          } else {
            callback();
          }
        }
      }, 0);
    };
    return {
      integralUpload:process.env.BASE_API + '/api/upload/excel',
      publicBASE_API:process.env.BASE_API,
      save_loading: false,
      ATOKEN: { 'A-TOKEN': getToken()},
      import_btn_show: false,
      fileList: [],
      file: null,
      import_rules_show:false,//导出弹窗
      handleCurrent:'',
      resultsItemId: "",
      btn_disabled: false,
      one_left_item: {},
      select_employee_id: "",
      employee_map: JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP")),
      table_loading: false,
      rules_detail_title: "新增规则",
      right_rules_detail: {},
      add_rulse_id: "",
      add_employee_id: "",
      add_employee_visible: false,
      add_employee_max: 0,
      rule_trees_load: false,
      rule_list_load: false,
      employee_list: [],
      active: 1,
      add_employee_show: false,
      grouping_show: false,
      grouping_type: "add",
      rules_detail_show: false,
      add_point: false,
      edit_point: false,
      defaultProps: {
        children: "child",
        label: "name",
      },
      grouping: {
        name: "",
      },
      grouping_rules: {
        name: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
          {
            max: 25,
            message: "规则名称不能大于25个字",
            trigger: "blur",
          },
        ],
      },
      rule_list: [], //分类集合
      item_list: [], //规则集合
      rules_detail_form: {
        rule_id: "",
        range_type: "1",
        prize_type: "0",
        min_point: "",
        remark: "",
        is_attendance: "0",
        cycle_type: "2",
        pt_id: "3",
      },
      rules_rules: {
        remark: [
          {
            required: true,
            message: "请输入规则名称",
            trigger: "blur",
          },
          {
            max: 50,
            message: "分类名称不能大于50个字",
            trigger: "blur",
          },
        ],
        min_point: [
          {
            required: true,
            message: "请输入积分",
            trigger: "blur",
          },
          {
            validator: isInteger,
            trigger: "blur",
          },
        ],
        rule_id: [
          {
            required: true,
            message: "请选择分类",
            trigger: "blur",
          },
        ],
      },
      task_cycle: [
        {
          name: "每天自动加分",
          value: 1,
        },
        {
          name: "每周自动加分",
          value: 2,
        },
        {
          name: "每月自动加分",
          value: 3,
        },
      ],
      task_cycle_name: '',
      add_employee_form: {
        employee_ids: [],
      },
      table_list: [],
      // selected:{employee:[], dept: []},//选择员工数据
      del_arr: {
        ids: [],
      },
      employee_id: "", //选择人员的ID
      integralKeywords: "",
      showIndex: "0",
      tips_show: false,

      total: 0, //返回的总数据
      page: 1, //默认页数  为1
      pagesize: 10, //每页显示的数据
      
      dropOuOfPers:[],
    };
  },
  components: {
    EmployeeSelector1,
  },
  watch: {
    select_employee_id(val) {
      this.employee_id = val;
      this.open_right(this.employee_id);
      this.$nextTick(()=>{
        console.log(this.$refs['dropOuOfref'].selected)
        this.dropOuOfPers = this.$refs['dropOuOfref'].selected
      })
    },
  },
  methods: {
    takePartIn(){
      this.$refs['dropOuOfref'].visible = true
    },
    //搜索
    onFilterChanged(){
      this.open_right()
    },
    close_import(){
      this.import_rules_show = false
      this.import_btn_show = false
      this.$refs.upload.clearFiles()
    },
    submitUpload() {
      this.save_loading = true
      let params = {
        file: this.file
      }
      this.$http('post','/api/integral/auto/import', params).then(res => {
        if(res.data.code == 1) {
          // this.import_rules_show = false;
          this.close_import()//成功之后关闭并清除选中的文件
          this.$message.success({message:res.data.msg})
          this.get_rule_trees();
          // if(res.data.data.list.length != 0){
          //   this.error_list_show = true
          //   this.error_list.push(res.data.data)
          // }else{
          //   this.$message.success({message:res.data.msg})
          // }
          // if(res.data.data.length != 0 && res.data.data.length != undefined){
          //   this.error_list_show = true
          //   this.error_list = res.data.data
          // }else{
          //   this.get_department_list()
          // }
        }else{
          this.$message({type:'error',message:res.data.msg})
        }
      }).catch(()=>{

      }).finally(()=>{
        this.save_loading = false
      })
    },
    //导入
    beforeFilesUpload(file) {
      const $ext_list = ['xlsx', 'xls'];
        let len =  file.name.split('.').length - 1;
        const $ext_name = file.name.split('.')[len]
        if ($ext_list.indexOf($ext_name) != -1) {
          this.import_btn_show = true
        }else {
          this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）')
          return false
        }
    },
    handleSuccess(response) {
      if(response.code == 1) {
        this.file = response.data;
      }
    },
    handleRemove(file, fileList) {
      if (fileList !== null && fileList.length != 0) {
        this.import_btn_show = true
      }else{
        this.import_btn_show = false
      }
    },
    handlePreview(file) {
      console.log(file);
    },


    handleCurrentChange(val) {
      this.page = val;
      this.open_right(this.handleCurrent);
    },

    tips_close() {
      localStorage.setItem("fixed_integral_tips", "true");
      this.tips_show = false;
    },

    add_employee_close() {
      this.task_cycle_name = "";
      this.add_employee_show = false;
    },
    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);
        });
      }
    },

    // 添加人员 提交数据
    sub_add_employee(form) {
      let self = this;
      if (!self.task_cycle_name) {
        if(PerformTheNumber){
          self.$message.error("请选择加分周期");
          PerformTheNumber = false;
          setTimeout(()=>{
            PerformTheNumber = true
          },5000)
        }
        return false;
      }
      this.$refs.Employee.confirm(); //调用组件的confirm（）；
      if (this.add_employee_form.employee_ids.length <= 0) {
        if(PerformTheNumber){
          this.$message.error("请选择员工");
          PerformTheNumber = false;
          setTimeout(()=>{
            PerformTheNumber = true
          },5000)
        }
        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 == "") {
            if(PerformTheNumber){
              self.$message.error("请先选择细则");
              PerformTheNumber = false;
              setTimeout(()=>{
                PerformTheNumber = true
              },5000)
            }
          } else {
            self.$http("post","/api/integral/auto/add",data,)
              .then((res) => {
                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();
                  self.get_rule_trees();
                } else {
                  self.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                self.$message.error(e.data.msg);
              })
              .finally(() => {
                self.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },

    handleNodeClick(data) {
    },
    handleSelectionChange(val) {
      this.del_arr.ids = [];
      val.forEach((element) => {
        this.del_arr.ids.push(element.id);
      });
    },

    // 新增规则
    addRule(form) {
      let self = this;
      self.$refs[form].validate((valid) => {
        if (valid) {
          self.btn_disabled = true;
          let data = null;
          self.rules_detail_form.max_point = self.rules_detail_form.min_point;
          self.rules_detail_form.is_attendance
            ? (self.rules_detail_form.is_attendance = 1)
            : (self.rules_detail_form.is_attendance = 0);
          data = { items: [self.rules_detail_form] };
          self
            .$http("post","/api/integral/rule/items",data,)
            .then((res) => {
              if (res.data.code == 1) {
                self.add_employee_show = true;
                self.add_employee_id = res.data.data.item_id;
                self.$message.success(res.data.msg);
                self.add_rulse_id = self.rules_detail_form.rule_id;
              } else {
                self.$message.error(res.data.msg);
              }
              self.btn_disabled = false;
            })
            .catch((e) => {
              self.$message.error(e.data.msg);
              self.btn_disabled = false;
            })
            .finally(() => {
              self.loading = false;
              self.rules_detail_show = false;
            });
        } else {
          return false;
        }
      });
    },

    // 编辑规则
    editRule(form) {
      let self = this;
      // self.table_loading = true
      self.$refs[form].validate((valid) => {
        if (valid) {
          self.btn_disabled = true;
          let data = null;
          self.rules_detail_form.max_point = self.rules_detail_form.min_point;
          self.rules_detail_form.is_attendance
            ? (self.rules_detail_form.is_attendance = 1)
            : (self.rules_detail_form.is_attendance = 0);
          self.rules_detail_form.item_id = self.rules_detail_form.id;
          data = self.rules_detail_form;
          // self.right_rules_detail = data
          self
            .$http("PUT","/api/integral/rule/items",data,)
            .then((res) => {
              if (res.data.code == 1) {
                self.get_rule_trees();
                this.rules_detail_show = false; //成功消失
                self.add_rulse_id = self.rules_detail_form.rule_id;
                self.$message.success(res.data.msg);
                self.add_employee_show = false;
                self.btn_disabled = false;
              } else {
                self.$message.error(res.data.msg);
                self.btn_disabled = false;
              }
            })
            .catch((e) => {
              self.$message.error(e.data.msg);
              self.btn_disabled = false;
            })
            .finally(() => {
              self.loading = false;
            });
        } else {
          return false;
        }
      });
    },

    rules_detail_close(form) {
      this.rules_detail_show = false;
      this.$refs[form].resetFields();
    },

    del_rules_detail(item) {
      this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http("DELETE","/api/integral/rule/items",{item_id: item.id,},)
          .then((res) => {
            if (res.data.code == 1) {
              this.get_rule_trees();
              this.$message.success(res.data.msg);
              this.rules_detail_show = false;
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            this.$message.error(e.data.msg);
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    //添加与编辑分组
    grouping_btn(form) {
      let self = this;
      self.$refs[form].validate((valid) => {
        if (valid) {
          let type = self.grouping_type;
          let data =
            type == "add"
              ? {
                  cycle_type: "2",
                  pid: "0",
                  name: self.grouping.name,
                }
              : {
                  rule_id: self.grouping.id,
                  pid: "0",
                  name: self.grouping.name,
                };
          self.btn_disabled = true;
          self
            .$http(type == "add" ? "post" : "PUT","/api/integral/rule",data,)
            .then((res) => {
              if (res.data.code == 1) {
                self.$message.success(res.data.msg);
                self.get_rule_trees();
                self.grouping_close();
              } else {
                self.$message.error(res.data.msg);
              }
              self.btn_disabled = false;
            })
            .catch((e) => {
              self.$message.error(e.data.msg);
              self.btn_disabled = false;
            })
            .finally(() => {
              self.loading = false;
              self.btn_disabled = false;
            });
        } else {
          return false;
        }
      });
    },
    add_grouping() {
      this.grouping.name = ''
      this.grouping_show = true;
      this.grouping_type = "add";
    },
    edit_grouping(item) {
      this.grouping_show = true;
      this.grouping = JSON.parse(JSON.stringify(item));
      this.grouping_type = "edit";
    },
    grouping_close(form) {
      this.grouping_show = false;
      if (form) {
        this.$refs[form].resetFields();
      }
    },
    del_grouping(item) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.btn_disabled = true;
        this.$http("DELETE","/api/integral/rule",{rule_id: item.id,},)
          .then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.msg);
              this.grouping_show = false;
              this.get_rule_trees();
            } else {
              this.$message.error(res.data.msg);
            }
            this.btn_disabled = false;
          })
          .catch((e) => {
            this.btn_disabled = false;
            this.$message.error(e.data.msg);
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },

    // 获取规则分类 与 规则细则
    get_rule_trees() {
      let self = this;
      self.rule_trees_load = true;
      self.$http('get',"/api/integral/rule/trees",{cycle_type: "2",},)
        .then((res) => {
          if (res.data.code == 1) {
            self.rule_list = res.data.data.rule_tree;
            self.item_list = res.data.data.item_list;
            if (self.item_list !== null) {
              for (const key in self.item_list) {
                for (let i = 0; i < self.item_list[key].length; i++) {
                  if (i == 0) {
                    self.open_right(self.item_list[key][i]);
                    return false;
                  }
                }
              }
            }
          } else {
            self.$message.error(res.data.msg);
          }
          self.rule_trees_load = false;
        })
        .finally(() => {
          self.rule_trees_load = false;
        });
    },

    //自动积分规则列表
    open_right(data) {
      // console.log(data)
      if(this.handleCurrent!=data){
        this.page = 1
      }
      this.handleCurrent=data
      let self = this;
      self.rule_list_load = true;
      self.table_loading = true;
      // var params = {params:{}}
      // if(data){
      //   params.params.item_id = data.id || ''
      //   params.params.employee_id = data.employee_id || ''
      //   params.params.page = self.page
      //   self.rule_id = data.rule_id
      //   self.item_id = data.id
      // }
      if (data&&data.id) {
        self.add_employee_id = data.id;
        self.add_rulse_id = data.rule_id;
        self.right_rules_detail = data;
      }
      var params = {
          item_id: self.add_employee_id,
          employee_id: self.employee_id || "",
          remark:self.integralKeywords,
          page: self.page,
          page_size: Number(this.pagesize),
      };
      self.$http('get',"/api/integral/auto/list", params).then((res) => {
          if (res.data.code == 1) {
            if (data&&data.id) {
              self.right_rules_detail = data;
            }
            self.table_list = res.data.data.list || [];
            self.total = res.data.data.total;
          } else {
            self.$message.error(res.data.msg);
          }
        })
        .finally(() => {
          self.rule_list_load = false;
          self.table_loading = false;
        });
    },

    many_del() {
      let self = this;
      if (self.del_arr.ids.length !== 0) {
        self
          .$confirm("此操作将永久删除该人员的自动加分, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            self
              .$http("post","/api/integral/auto/delete/many",self.del_arr,)
              .then((res) => {
                if (res.data.code == 1) {
                  self.$message.success(res.data.msg);
                  // self.open_right();

                  this.get_rule_trees();
                } else {
                  self.$message.error(res.data.msg);
                }
              })
              .catch((e) => {
                self.$message.error(e.data.msg);
              })
              .finally(() => {
                self.loading = false;
              });
          })
          .catch(() => {});
      } else {
        self.$message.error("请选择要移除的人员");
      }
    },
    edit_rules(data) {
      this.rules_detail_show = true;
      this.rules_detail_title = "编辑规则";
      this.rules_detail_form = JSON.parse(
        JSON.stringify(this.right_rules_detail)
      );
      this.rules_detail_form.sync = "2";
      if (this.rules_detail_form.is_attendance) {
        this.rules_detail_form.is_attendance = true;
      } else {
        this.rules_detail_form.is_attendance = false;
      }
    },

    // 新增规则
    add_rules_item() {
      this.rules_detail_title = "新增规则";
      this.rules_detail_show = true;
    },
    // 编辑规则
    edit_rules_item() {},
  },
  mounted() {
    this.get_rule_trees();
    if (localStorage.getItem("fixed_integral_tips")) {
      this.tips_show = false;
    } else {
      this.tips_show = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.el-submenu .el-icon-edit-outline {
  color: #999 !important;
}
.is-opened .el-icon-edit-outline {
  color: #409eff !important;
}
.title_top {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 130px !important;
  display: inline-block;
}
.fixed_integral_box {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  min-height: calc(100vh - 160px);
  .rule_class {
    position: relative;
    display: table-cell;
    border-right: none;

    .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;
        /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;
          }
        }
      }
      /deep/ .is-opened .el-submenu__title .title_top {
        color: #409eff !important;
      }
      /deep/ .is-opened .el-menu .el-menu-item span {
        color: #333;
      }
      /deep/ .is-opened .el-menu .is-active span {
        color: #409eff;
      }
    }
  }

  .rule_list {
    position: relative;
    display: table-cell;
  }

  .rule_list:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: #ebeef5;
  }

  .rule_search /deep/ .el-input__suffix i {
    width: 58px;
    color: #909399;
    margin-right: -5px;
    background: #dcdfe6;
    border-radius: 0 4px 4px 0;
  }

  /deep/ .alert_class_box {
    position: relative;
    display: block;
    text-align: center;
  }

  /deep/ .el-transfer-panel {
    display: inline-block;
    text-align: left;
  }

  /deep/ .employee_selector_box {
    padding: 0;
    width: 100%;
  }
}

.edit_btn_class {
  position: absolute;
  right: 10px;
  padding: 2px;
  top: 16px;
  z-index: 1;
  display: none;
}
span {
  line-height: 18px;
}
.el-submenu__title:hover {
  .edit_btn_class {
    display: inline-block;
    color: #fff;
    background: #ffa200;
  }
}
/deep/.selector_employee {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.diy-tip {
  margin-bottom: 15px;
  border: 1px solid #67c23a;
  padding: 20px 16px;
  p {
    color: #67c23a !important;
    font-size: 14px;
    margin: 0 !important;
    padding: 4px 0;
  }
}
.popperSPBOX{
  max-width: calc(100vh - 300px);
  background-color: rgb(255, 255, 255);
}

.dropOuOfPersName {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  margin: 1px 0 0 16px;
  padding-left: 14px;
  background-color: #ffffff;
  color: #1d1d1d;
  width: 156px;
  overflow: hidden;
  cursor: pointer;
  height:34px;
  line-height:34px;
  border-radius: 5px;
}
</style>