gdy_qywx_pc/src/views/statistics_new/lotteryTicket_statistics.vue

<template>
  <div>
    <div class="integral_statistics_box">
      <el-row :gutter="10" style="margin-bottom: 20px;margin-right:8px;">
        <el-col :span="5">
          <el-date-picker
            v-model="formData.month"
            type="month"
            placeholder="请选择月份"
            value-format="yyyy-MM"
          ></el-date-picker
        ></el-col>
        <el-col :span="5" style="position: relative;">
          <deptData  deptStyle="padding-left:10px;" v-if="toPdept1 && toPdept1!=0" :refsName="$refs.dept1" :toPdept="toPdept1"></deptData>
          <el-cascader
            v-model="dept_name"
            :options="dept_tree"
            @change="dept1_null"
            :props="{ label: 'name', value: 'id'}"
            ref="dept1"
            filterable
            change-on-select
            placeholder="请选择部门"
            clearable
          >
            <template slot-scope="{ node, data }">
              <span>
                <WWOpenData type="departmentName" :openid="data.name"></WWOpenData>
              </span>
              <!-- <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span> -->
            </template>
          </el-cascader>
        </el-col>
        <el-col :span="5" class="search">
          <el-input
            v-model="formData.keywords"
            placeholder="输入同事姓名"
            @keyup.enter.native="get_all_integral"
          >
            <el-button
              slot="append"
              @click="get_all_integral"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table
        :data="all_integral_list"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="employee_name" label="姓名" align="left">
          <template slot-scope="scope">
            <span class="fl">
              <userImage
                :id="scope.row.id"
                width="50px"
                height="50px"
                :user_name="scope.row.name"
              ></userImage>
            </span>
            <span
              style="margin-left: 20px; line-height: 50px; display: inline-block"
              ><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span
            >
          </template>
        </el-table-column>
        <el-table-column prop="performance" label="部门" align="left">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.depart_name" :key="index"><WWOpenData type="departmentName" :openid="item"></WWOpenData><span v-if="(scope.row.depart_name.length-index)>1">,</span></span>
          </template>
        </el-table-column>
        <el-table-column prop="a" label="奖票数量" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.ticketNumber }}</span>
          </template>
        </el-table-column>
      </el-table>
      <center style="padding: 20px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="pageLimit1"
          :total="total"
        >
        </el-pagination>
      </center>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      all_integral_list: null,
      formData: {
        month: this.$moment().format("YYYY-MM"),
        keywords: "",
        dept_id: "",
        page: 1,
        page_size: 10
      },
      total: 0,
      dept_tree: [],
      dept_name: [],
      pageLimit1: 10,
      toPdept1:0,
    };
  },
  components: {},
  watch: {
    "formData.month"(val, old_val) {
      this.formData.page = 1;
      this.get_all_integral();
    },
    "formData.dept_id"(val, old_val) {
      if (!val) {
        this.formData.dept_id = 0;
      }
      this.formData.page = 1;
      this.get_all_integral();
    }
  },
  mounted() {
    if (localStorage.getItem("dept_tree")) {
      this.dept_tree = this.getTreeData(
        JSON.parse(localStorage.getItem("dept_tree"))
      );
    }
    this.get_all_integral();
  },
  methods: {
    //分页
    handleSizeChange1(val) {
      this.pageLimit1 = val;
      this.formData.page_size = this.pageLimit1;
      this.get_all_integral();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_all_integral();
    },
    //请求数据
    get_all_integral() {
      let self = this;
      self.loading = true;
      self
        .$http("get", "/api/integral/statistics/ticket", self.formData)
        .then(res => {
          if (res.data.code == 1) {
            self.all_integral_list = res.data.data.list;
            self.total = res.data.data.total;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.loading = false;
        });
    },
    dept1_null(val) {
      this.toPdept1 = val[val.length-1]
      //部门
      if (val.length == 0) {
        this.formData.dept_id = 0;
      } else {
        this.formData.dept_id = this.dept_name[this.dept_name.length - 1];
      }
      this.$nextTick(() => {
        this.$refs.dept1.dropDownVisible = false;
      });
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    }
  }
};
</script>

<style scoped>
.el-date-editor.el-input {
  width: auto;
}
.date-picker-width {
  width: 145px !important;
}
.search /deep/ .el-input-group__append:active {
  background: #26a2ff;
}
.search /deep/ .el-input-group__append:active .el-icon-search {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.integral_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
}
</style>