dd_pc/src/views/ranking/lotteryTicket_statistics.vue

<template>
  <div>
    <el-row :span="24" style="display:flex;min-width:650px;">
      <el-col style="width:200px;padding-right:5px;">
        <el-date-picker
          v-model="formData.month"
          type="month"
          placeholder="请选择月份"
          value-format="yyyy-MM"
        ></el-date-picker
      ></el-col>
      <el-col style="width:200px;">
        <el-cascader
          v-model="dept_name"
          :options="dept_tree"
          @change="dept1_null"
          :props="{
            checkStrictly: true,
            value: 'id',
            label: 'name',
            children: '_child',
          }"
          ref="dept1"
          filterable
          change-on-select
          placeholder="全公司"
          clearable
        ></el-cascader>
      </el-col>

      <el-col class="search" style="width:200px;">
        <el-input
          v-model="formData.keywords"
          placeholder="输入同事姓名"
          @keyup.enter.native="get_all_integral"
        >
          <el-button
            class="buttonCLo"
            slot="append"
            @click="get_all_integral"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <div class="all">
      <div>
        <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">
              <div style="display:flex">
                <span class="fl">
                  <userImage
                    :id="scope.row.id"
                    width="50px"
                    height="50px"
                    fontSize="1"
                    :user_name="scope.row.name"
                    :img_url="scope.row.img_url"
                  ></userImage>
                </span>
                <span
                  style="margin-left: 20px; line-height: 50px; display: inline-block"
                  >{{ scope.row.name }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="performance" label="部门" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.dept_name }}</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>
          <template slot="empty">
            <noData></noData>
          </template>
        </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>
  </div>
</template>
<script>
import noData from '@/components/noData';
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_name: [],
      dept_tree: [],
      pageLimit1: 10
    };
  },
  components: {noData},
  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() {
    this.get_all_integral();
    this.getDepartment(); //部门
  },
  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
        .$axios("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) {
      //部门
      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;
    // },

    
    //获取部门
    getDepartment() {
      this.$axios("get", "/api/department/tree").then((res) => {
        this.dept_tree = this.getTreeData(res.data.data.list);
      });
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i]._child.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i]._child = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i]._child);
        }
      }
      return data;
    },
  }
};
</script>

<style scoped lang="scss">
.el-date-editor.el-input {
  width: auto;
}
.date-picker-width {
  width: 145px !important;
}

.search ::v-deep .el-input-group__append{
  background: #FFF;
}
.search ::v-deep .el-input-group__append:active {
  background: #26a2ff;
}
.search ::v-deep .el-input-group__append:active .el-icon-search {
  color: #fff;
}
</style>
<style scoped="scoped" lang="scss">

  .all{
    margin-top:10px;
    padding:10px 20px 0px 20px;
    min-height: calc(100vh - 204px);
    
  }
</style>