gdy_qywx_pc/src/views/integral/PointAutoSetting.vue

<template>
  <div style=" background-color: #fff;">
    <el-row :gutter="15" style="border:1px solid #eee;">
      <el-col v-show="false" :span="24" style="margin-bottom:0; border-bottom:1px solid #eee;">
        <div style="margin-bottom:0; padding:15px;" class="inline-block-btn-list">
          <div class="gap-right-8" style="display:inline-block; width:100%; margin-bottom:0;">
            <el-input
              placeholder="输入关键词查找"
              ref="search-bar"
              v-model="filter.keywords"
              class="input-with-select"
              @keyup.enter.native="onFilterChanged"
            >
              <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4" style="margin-bottom:0;">
        <div style="padding:15px; padding-left:0; padding-right:0;">
          <el-scrollbar
            wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
            :native="false"
            style="height: 450px;"
          >
            <a
              @click="handleNodeClick({value:0})"
              v-show="profile.manager_type > 2"
              :class="{on:filter.dept_id.length == 0}"
              style="display: block; padding:7px; font-size:14px;"
            >所有部门</a>
            <el-tree
              ref="dept_tree_com"
              highlight-current
              :default-expand-all="true"
              :expand-on-click-node="false"
              :data="deptTree"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="6" style="border-left:1px solid #eee; margin-bottom:0; padding-right:0;">
        <div style="padding:15px; padding-right:0;">
          <div class="check-item-box" style="height: 450px;">
            <div style="padding-right:15px;">
              <el-scrollbar
                wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
                :native="false"
                style="height: 450px;"
              >
                <el-table
                  v-loading="loading"
                  ref="multipleTable"
                  :data="tableData"
                  :border="false"
                  tooltip-effect="dark"
                  @row-click="rowClick"
                  @selection-change="handleSelectionChange"
                  @select-all="select_all"
                  :row-class-name="is_checked"
                  style="width: 100%"
                >
                  <el-table-column prop="name" label="选择人员">
                    <template slot-scope="scope">
                      <div
                        :class="{rank_head:true, checked:checkid==scope.row.id}"
                        style="cursor: pointer;"
                      >
                        <img
                          v-if="scope.row.img_url != null"
                          v-bind:src="scope.row.img_url"
                          width="42px"
                          height="42px"
                        >
                        <img
                          v-if="scope.row.img_url == null"
                          src="static/images/head_default.png"
                          width="42px"
                          height="42px"
                        >
                        {{scope.row.name}}
                      </div>
                    </template>
                  </el-table-column>

                  <el-table-column label="已设置" width="100">
                    <template slot-scope="scope">
                      <div
                        style="cursor: pointer; height:50px;"
                        :class="{rank_head:true, checked:checkid==scope.row.id}"
                      >
                        <span
                          v-if="typeof(itemCount[scope.row.id.toString()]) != 'undefined'"
                        >{{itemCount[scope.row.id]}}个记录</span>
                        <span v-if="typeof(itemCount[scope.row.id.toString()]) == 'undefined'">暂无</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="14" style="border-left:1px solid #eee; margin-bottom:0; padding-right:0;">
        <div style="padding:15px; padding-right:0;">
          <div style="padding-right:15px; height: 450px;">
            <PointAutoList ref="pointautolistcom"></PointAutoList>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PointAutoList from "./PointAutoList";
export default {
  components: { PointAutoList },
  data() {
    return {
      loading: false,
      profile: this.$store.getters.user_info,
      accessEnabled: false,
      dialogTableVisible: false,
      filter: {
        dept_id: [],
        status: 1,
        keywords: ""
      },
      checkid: 0,
      totalCount: 0,
      pageLimit: 3000,
      currentPage: 1,
      tableData: null,
      multipleSelection: [],
      multipleSelectionId: [],
      multipleSelectionJson: {},

      pageSelectedId: [],
      dialogExcelVisible: false,
      deptTree: [],
      creatorId: "",
      department_list: [],
      itemCount: {}
    };
  },
  methods: {
    is_checked(row) {
      if (this.checkid == row.id) {
        return "td_checked";
      } else {
        return "";
      }
    },
    clearEmployee(column, event) {
      let self = this;
      if (column.columnKey == "clear") {
        for (let i in this.tableData) {
          self.$refs["multipleTable"].toggleRowSelection(
            self.tableData[i],
            false
          );
        }
        this.multipleSelectionId = [];
        this.multipleSelectionJson = {};
        this.multipleSelection = [];
        this.pageSelectedId = [];
      }
    },

    removeEmployee(id) {
      let multipleSelectionId = [];
      let multipleSelectionJson = {};
      let multipleSelection = [];
      let pageSelectedId = [];
      for (let i in this.tableData) {
        if (this.tableData[i].id == id) {
          this.$refs["multipleTable"].toggleRowSelection(
            this.tableData[i],
            false
          );
        }
      }
      for (let i in this.multipleSelection) {
        if (this.multipleSelection[i].id != id) {
          multipleSelection.push(this.multipleSelection[i]);
          multipleSelectionJson[
            this.multipleSelection[i].id
          ] = this.multipleSelection[i];
          multipleSelectionId.push(this.multipleSelection[i].id);
        }
      }

      this.multipleSelectionId = multipleSelectionId;
      this.multipleSelectionJson = multipleSelectionJson;
      this.multipleSelection = multipleSelection;
    },

    handleNodeClick(data) {
      if (data.value == 0) {
        this.loadBaseData();
        this.filter.dept_id = [];
      } else {
        this.filter.dept_id = [data.value];
      }
      this.onFilterChanged();
    },
    handleSizeChange(val) {
      this.pageLimit = val;
      this.onFilterChanged();
    },
    onFilterChanged: function() {
      this.currentPage = 1;
      this.loadEmployeeList();
    },
    toggleSelection: function(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    select_all(all) {
      let ids = [];

      for (let i in all) {
        ids.push(all[i].id);
      }
    },
    handleSelectionChange: function(val) {},
    rowClick(row, event, column) {
      if (row.id == this.checkid) {
        this.checkid = 0;
      } else {
        this.checkid = row.id;
      }
      this.$refs["pointautolistcom"].filter.employee_id = this.checkid;
      this.$refs["pointautolistcom"].onFilterChanged();
      this.$emit("check", row);
    },
    isSelectable: function(row, index) {
      return true;
    },
    toSexName: function(row, column, cellValue) {
      return cellValue == "1" ? "女" : "男";
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format("YYYY年MM月DD日");
    },
    //获取基本数据
    loadBaseData: function() {
      var self = this;
      this.$http('get',"/integral.php/ajax_request_common/prepare_integral_options",{
            id: this.profile.id,
            category_tree: 1,
            dept_tree: 1
          })
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              self.deptTree = jsonData.dept_tree;
              self.creatorId = jsonData.creator_id;

              if (self.profile.manager_type < 2) {
                self.filter.dept_id = [self.deptTree[0].value];
                self.loadEmployeeList();
              }
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    //获取基本数据
    loadDataCount: function() {
      var self = this;
      this.$http('get',"/integral.php/point_auto_setting/get_count_by_employee")
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              self.itemCount = jsonData.data;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    //获取员工列表
    loadEmployeeList: function() {
      var self = this;
      self.loading = true;
      let params = {
        site_id: this.$store.getters.site_id,
        page: this.currentPage,
        interval: this.pageLimit
      };

      for (let item in this.filter) {
        let value = this.filter[item];
        if (item == "dept_id") {
          if (!value || value.length == 0) {
            continue;
          }
          params[item] = value[value.length - 1];
        } else {
          let valueStr = value.toString();
          if (valueStr && valueStr.length > 0) {
            params[item] = valueStr;
          }
        }
      }
      this.$http('get',"/integral.php/ajax_request_common/get_employee_list",params)
        .then(function(response) {
          if (response.status == 200) {
            self.loading = false;
            var jsonData = response.data;
            try {
              self.department_list = jsonData.filter_list.department;
              self.totalCount = jsonData.total_count;
              self.tableData = jsonData.list_data;
              self.loadDataCount();
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      this.loadEmployeeList();
    }
  },
  created() {
    this.loadBaseData();
    if (this.profile.manager_type > 1) {
      this.loadEmployeeList();
    }
  }
};
</script>
<style>
.el-pagination {
  text-align: center;
  margin-top: 15px;
}
.dept_tree a.on {
  background-color: #f0f7ff;
}
.clearEmployeeBtn {
  cursor: pointer;
  color: #409eff;
  font-weight: normal;
}
.clearEmployeeBtn:hover {
  color: #66b1ff;
}
.rank_head img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-right: 5px;
}
.rank_head * {
  vertical-align: middle;
}
.check-item-box td {
  padding: 0;
}

.check-item-box .rank_head {
  padding: 10px;
}
.check-item-box .cell {
  padding: 0;
}
.check-item-box .rank_head.checked {
  background-color: #f0f7ff;
}
</style>