app列表页（复杂筛选）

<template>
  <div class="wh main bxs">
    <div class="header bxs w">
      <van-row>
        <van-col @click="backFn" span="8" class="f18 corm pl10"
          ><van-icon name="arrow-left" class="corm" />返回</van-col
        >
        <van-col span="8" class="tc f20">用户管理</van-col>
        <van-col span="8" class="tr f16 pr10 corm">
          <span @click="addFn">新增</span>
        </van-col>
      </van-row>
    </div>
    <div class="wh bxs content">
      <div class="contentSea bxs w">
        <div class="search_condition f12" @click="showFilterFn">
          <span>筛选</span>
          <van-icon name="filter-o" />
        </div>
        <van-search
          v-model="bizTitle"
          placeholder="输入用户名/登录账号/身份证号搜索"
          @search="onSearch"
        />
      </div>
      <!-- main.js 引入注册 -->
      <scroller
        :on-infinite="infinite"
        :noDataText="noDataText"
        class="bxs p10 h"
        ref="myscroller"
      >
        <div class="contentList bxs w ptnew">
          <van-swipe-cell v-for="(item, i) of tableData" :key="i">
            <div class="w p10 list bxs mb10" @click="detailFn(item)">
              <div class="list-item">
                <div class="f16 titleInfo flex">
                  <span class="text_1">{{ item.nickName }}</span>
                </div>
                <div class="f12 mt5">
                  {{ item.userName }}
                </div>
                <div class="list-item-lf bxs p10 bgcm">
                  <div class="wh flexca">
                    <van-icon name="manager" size="25" />
                  </div>
                </div>
                <div class="list-item-rt bxs p10 bgf f12">
                  <div class="h flexca" style="color: #2e7cf9">
                    <span>
                      <i class="iconfont icon-ticket_renlianshibie"> </i>
                      信息登记</span
                    >
                    <span class="ml10 f13"
                      ><van-icon name="more-o" class="f16" /> 操作</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <template #right>
              <van-button
                square
                style="margin-left: 1px"
                type="info"
                text="删除"
                class="delete-button"
                @click="deleteFn(item)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </scroller>
    </div>
    <!-- 筛选组14 -->
    <van-popup
      class="page-filter"
      v-model="showFilter"
      position="bottom"
      :style="{ height: '450px' }"
    >
      <div class="filter-header tc f20 pt20">全部筛选</div>
      <div class="filter-content">
        <div>
          <div class="pl10 pr10 pb10 f14">是否录入人脸</div>
          <div class="pl10 pr10 pb10">
            <span
              :class="
                filterObj.identity === true
                  ? 'filter-tag filter-tag-active '
                  : 'filter-tag'
              "
              @click="filterObjChangeFn(1, true)"
              >是</span
            >
            <span
              :class="
                filterObj.identity === false
                  ? 'filter-tag filter-tag-active '
                  : 'filter-tag'
              "
              @click="filterObjChangeFn(1, false)"
              >否</span
            >
          </div>
        </div>
        <div>
          <div class="pl10 pr10 pb10 f14">用户类型</div>
          <div class="pl10 pr10 pb10">
            <span
              :class="
                filterObj.dataType === 0
                  ? 'filter-tag filter-tag-active'
                  : 'filter-tag'
              "
              @click="filterObjChangeFn(2, 0)"
              >内部用户</span
            >
            <span
              :class="
                filterObj.dataType === 1
                  ? 'filter-tag filter-tag-active'
                  : 'filter-tag'
              "
              @click="filterObjChangeFn(2, 1)"
              >外部用户</span
            >
          </div>
        </div>
        <div>
          <div class="pl10 pr10 pb10 f14">按单位筛选</div>
          <div class="pl10 pr10 pb10">
            <span
              :class="'filter-tag'"
              @click="mechanismChangeFn(1)"
              v-if="filterObj.companyIds.length == 0"
              >选择机构</span
            >
            <span
              @click="mechanismChangeFn(1)"
              class="filter-tag filter-tag-active"
              v-else
              >{{ filterObj.companyNames }}</span
            >
            <span v-if="filterObj.companyIds.length > 0">
              <span
                v-if="!filterObj.deptIds || filterObj.deptIds.length == 0"
                :class="'filter-tag'"
                @click="mechanismChangeFn(2)"
                >选择部门</span
              >
              <span
                @click="mechanismChangeFn(2)"
                class="filter-tag filter-tag-active"
                v-else
                >{{ filterObj.deptNames }}</span
              >
            </span>
          </div>
        </div>
        <div>
          <div class="pl10 pr10 pb10 f14">职务筛选</div>
          <div class="pl10 pr10 pb10">
            <span
              :class="'filter-tag'"
              @click="companyChangeFn"
              v-if="!filterObj.postValues || filterObj.postValues.length == 0"
              >选择职务</span
            >
            <span
              @click="companyChangeFn"
              class="filter-tag filter-tag-active"
              v-else
              >{{ filterObj.postValuesName }}</span
            >
          </div>
        </div>
      </div>
      <div class="filter-btm-btn flexca bxs pb20 f14">
        <div class="btn_l btn" @click="reSetFn">重置</div>
        <div class="btn_r btn" @click="complageFn">完成</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  getUserQueryList,
  delByUserIds,
} from "@/api/mine_userManage";
import {
  getDictTypeList,
} from "@/api/sys";
// 状态关联关键词*
// 筛选组
export default {
  data () {
    return {
      bizTitle: "",//搜索参数
      tableData: [],//列表初始化数据
      page: {
        index: 0,
        size: 10,
        total: null,
      },
      // 筛选弹框是否弹起
      showFilter: false,
      //弹框临时用
      filterObj: {
        identity: "", //没录入人脸
        dataType: "", //0内部 1外部
        companyIds: [],//机构id
        companyNames: '',
        deptIds: [],//部门id
        deptNames: '',
        postValues: [],//职务
        postValuesName: ''

      },
      //筛选组1 筛选条件
      formSearch: {//实际搜索用
        identity: "", //没录入人脸
        dataType: "", //0内部 1外部
        companyIds: [],
        companyNames: '',
        deptIds: [],
        deptNames: '',
        postValues: [],
      },
      //筛选组--2 start
      formSearchCopy: {}, //备份重置用
      companyShow: false,
      haveFilter: false,
      noDataTextEnd: "没有更多数据了",
      noDataText: "",
      positions: [],//职务列表
      //筛选组2-- end
    };
  },
  created () {
    //筛选组3
    this.formSearchCopy = JSON.parse(JSON.stringify(this.filterObj));
    this.employeeId = JSON.parse(localStorage.getItem("employeeId"));
    this.departmentId = localStorage.getItem("departmentId");
    //筛选组4
    var deptObj = JSON.parse(localStorage.getItem("depId"));
    if (deptObj) {
      this.showFilter = true;
      let selectNames = [];
      let selectIds = [];
      deptObj.depId.forEach((item) => {
        selectNames.push(item.label);
        selectIds.push(item.id);
      });
      if (localStorage.getItem("filterObj")) {
        this.filterObj = JSON.parse(
          localStorage.getItem("filterObj")
        );
      }
      if (deptObj.name == 'userManageList') {
        this.filterObj.companyNames = selectNames.toString();
        this.filterObj.companyIds = selectIds;
      } else {
        this.filterObj.deptNames = selectNames.toString();
        this.filterObj.deptIds = selectIds;
      }
      setTimeout(() => {
        localStorage.removeItem("depId");
        localStorage.removeItem("filterObj");
      }, 50);
    }
    //筛选组5 筛选条件
    if (localStorage.getItem("formSearch")) {
      this.haveFilter = true;
      this.formSearch = JSON.parse(
        localStorage.getItem("formSearch")
      );
    }
  },
  // 页面销毁生命周期方法
  beforeDestroy () {
    this.$toast.clear();
  },
  methods: {
    // 删除
    async deleteFn (item) {
      const res = await delByUserIds(item.userId);
      if (res.code == 200) {
        this.$toast.success("刪除成功");
        this.page.index = 0;
        this.tableData = [];
        this.getData();
      }
    },
    // 详情跳转
    detailFn (item) {
      this.$router
        .push({
          name: "userManageDetail",
          params: {
            userId: item.userId,
            item: item,
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        }); //把error 抛出来;
    },
    // 新增
    addFn () {
      this.$router
        .push({ name: "userMessAdd" })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        }); //把error 抛出来;
    },
    // 搜索
    onSearch () {
      this.page = {
        index: 0,
        size: 10,
        total: null,
      };
      console.log(this.page);
      this.$refs.myscroller.finishInfinite(false);
      this.tableData = [];
    },
    infinite (done) {
      setTimeout(() => {
        this.page.index++;
        this.getData(done);
      }, 500);
    },
    // 初始化数据
    async getData (done) {
      let datVal = {
        keyword: this.bizTitle,
        ...this.formSearch,
        pageNum: this.page.index,
        pageSize: this.page.size,
      };
      console.log(this.page.index, "index");
      const result = await getUserQueryList(datVal);
      if (this.$refs.myscroller) {
        this.$refs.myscroller.finishInfinite(true);
      }
      if (result.data.length < 10) {
        this.noDataText = this.noDataTextEnd;
      }
      if (result.data && result.data.length > 0) {
        if (typeof done == "function") {
          done();
        }
        this.tableData = this.tableData.concat(result.data);
        console.log(this.tableData, result.data);
        if (result.pageNum) {
          this.page.index = result.pageNum;
        }
        this.page.total = result.total;
      }
    },
    backFn () {
      this.$router.back();
    },
    // page筛选组件----------------------------start
    // #region
    // 筛选组6 职务
    async getlistAppointmentType () {
      const res = await getDictTypeList('user_post_type', {
        dictType: "user_post_type",
        status: 0,
      });
      this.positions = res.data;
    },
    // 筛选组7 职务 确定
    companyOnConfirm (value) {
      this.filterObj.postValues = [value.dictValue];
      this.filterObj.postValuesName = value.dictLabel;
      this.companyShow = false;
      this.showFilter = true;
    },
    //筛选组8 弹出职务
    companyChangeFn () {
      this.companyShow = true;
    },
    // 筛选组9 选择机构
    mechanismChangeFn (num) {
      localStorage.setItem(
        "filterObj",
        JSON.stringify(this.filterObj)
      );
      if (num == 1) {
        this.$router
          .push({
            name: "selectdep2",
            query: {
              name: "userManageList",
              depId: this.filterObj.companyIds,
              select: true,
            },
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        this.$router
          .push({
            name: "selectdep2",
            query: {
              name: "userManageList_dept",
              companyIds: this.filterObj.companyIds.toString(),
              select: true,
              disabledCompany: true
            },
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },

    //筛选组10 重置
    reSetFn () {
      this.filterObj = { ...this.formSearchCopy };
      localStorage.setItem(
        "formSearch",
        JSON.stringify(this.formSearchCopy)
      );
    },

    //筛选组11 完成
    complageFn () {
      this.formSearch = { ...this.filterObj };
      if (this.formSearch.companyFilter) {
        this.formSearch.companyFilter = JSON.parse(
          localStorage.getItem("departmentObj")
        ).belongToCompanyId;
      }
      localStorage.setItem(
        "formSearch",
        JSON.stringify(this.filterObj)
      );
      this.showFilter = false;
      this.onSearch();
    },
    //筛选组12 完成
    filterObjChangeFn (num, type) {
      let filterObj = this.filterObj;
      if (num == 1) {
        filterObj.identity = type;
      } else if (num == 2) {
        filterObj.dataType = type;
      } else {
        filterObj.companyFilter = type;
      }
      this.filterObj = { ...filterObj };
    },
    //筛选组13 筛选弹框
    showFilterFn () {
      this.getlistAppointmentType()
      this.filterObj = { ...this.formSearch };
      this.showFilter = true;
    },
    // #endregion
    // page筛选组件----------------------------end


  },
};
</script>
<style lang="scss" scoped>
.contentList.ptnew {
  padding-top: 105px;
}
.search_condition {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-block;
  padding: 3px 8px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 999;
}

.main {
  position: relative;
  .header {
    height: 50px;
    line-height: 50px;
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .content {
    background: #f5f8f8;
    padding-top: 105px;
    .contentSea {
      position: fixed;
      top: 50px;
      left: 0;
      background: #fff;
      z-index: 100;
    }
    .contentList {
      .list {
        background: #fff;
        position: relative;
        border-radius: 4px;
        .list-item {
          width: 100%;
          box-sizing: border-box;
          position: relative;
          padding-left: 50px;
        }
        .list-item-lf {
          position: absolute;
          left: 0;
          top: 0;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .list-item-rt {
          position: absolute;
          right: 0;
          top: 0;
        }
        // div:nth-child(1) {
        //   width: 80%;
        // }
        // .flotDiv {
        //   position: absolute;
        //   top: 10px;
        //   right: 0;
        //   background: #cc0000;
        //   color: #fff;
        // }
      }
    }
  }
}
.delete-button {
  height: 100%;
}
.filter-btm-btn {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 10px;
  .btn {
    display: inline-block;
    width: 40%;
    height: 40px;
    line-height: 40px;
    background-color: #8a8a8a;
    color: #fff;
    text-align: center;
  }
  .btn_l {
    border-radius: 20px 0 0 20px;
  }
  .btn_r {
    border-radius: 0 20px 20px 0;
    background-color: #2e7cf9;
  }
}
</style>