WorkloadApp/pages/Project/list.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head" v-if="!auth">
        <span class="title">项目列表</span>
        <span class="self">
          <uni-data-checkbox
            multiple
            v-model="checkself"
            :localdata="self"
            @change="checkSelf()"
          ></uni-data-checkbox>
        </span>
      </view>
      <view class="head" v-else>
        <view class="title">审核列表</view>
      </view>
      <scroll-view
        class="list"
        :scroll-top="scrollTop"
        scroll-y="true"
        lower-threshold="20"
        @scroll="scroll"
        @scrolltolower="scrollToLower()"
      >
        <uni-collapse>
          <uni-collapse-item
            v-for="project in projectList"
            :key="project.id"
            :border="false"
            title-border="none"
          >
            <template v-slot:title>
              <uni-list>
                <uni-list-item
                  :title="project.project_name"
                  :note="project.project_full_code"
                  :rightText="statusList[project.project_status + 1].label"
                />
              </uni-list>
            </template>
            <edit
              :project="project"
              :user="user"
              :auth="auth"
              :flowList="flowList"
              :depRole="depRole"
              :isDetail="false"
            />
          </uni-collapse-item>
        </uni-collapse>
        <view class="loadmore">{{ loadMoreText }}</view>
      </scroll-view>

      <uni-fab
        v-if="!auth"
        :horizontal="'right'"
        :popMenu="false"
        @fabClick="onClickAdd()"
      />

      <search-drawer title="查询项目" ref="searchDrawer" @onOk="search">
        <uni-forms
          :modelValue="projectFilter"
          label-position="top"
          class="form"
        >
          <uni-forms-item label="项目名称">
            <uni-easyinput
              type="text"
              class="input"
              v-model="projectFilter.project_name"
            />
          </uni-forms-item>
          <uni-forms-item label="项目编号">
            <uni-easyinput
              type="text"
              class="input"
              v-model="projectFilter.project_code"
            />
          </uni-forms-item>
          <uni-forms-item label="状态">
            <picker
              @change="selectChangeStatus"
              :range="statusList"
              :range-key="'label'"
            >
              <view class="select">
                {{
                  projectFilter.project_status != null
                    ? statusList[projectFilter.project_status + 1].label
                    : "全部"
                }}
              </view>
            </picker>
          </uni-forms-item>
        </uni-forms>
      </search-drawer>
    </view>
  </view>
</template>

<script>
import {
  queryProject,
  queryAuth,
  queryFlow,
  queryUserDetail,
} from "@/services/project";
import { mapState } from "vuex";
import mixin from "@/utils/listMixin";
import edit from "./edit.vue";
const statusList = [
  { value: null, label: "全部" },
  { value: 0, label: "售前" },
  { value: 1, label: "转执行" },
  { value: 2, label: "转运营" },
  { value: 3, label: "转质保" },
];
export default {
  mixins: [mixin],
  components: {
    edit,
  },
  computed: {
    ...mapState(["currentProject", "depUserTree"]),
  },
  data() {
    return {
      auth: false,
      user: {},
      projectList: [],
      projectFilter: {
        project_name: "",
        project_code: "",
        project_status: null,
      },
      checkself: [],
      statusList,
      self: [{ text: "只看自己", value: 0 }],
      scrollTop: 0,
      showSearch: true,
      flowList: [],
      depRole: [],
    };
  },
  onLoad(options) {
    this.auth = Boolean(options.auth);
  },
  onShow() {
    this.init();
    this.initData();
  },
  onNavigationBarButtonTap() {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  },
  methods: {
    async init() {
      this.user = uni.getStorageSync("user");
      await this.$store.dispatch("getDep");
      if (this.auth) {
        let res;
        res = await queryFlow();
        this.flowList = res.data;
        res = await queryUserDetail(this.user);
        let depId = this.user.DepId;
        let dep = res.data.Dep.find((item) => item.ID == depId);
        this.depRole = dep.Role;
      }
    },
    async getProject(params) {
      let res = {};
      if (this.auth) res = await queryAuth(params);
      else res = await queryProject(params);
      this.pagination.currentPage == 1
        ? (this.projectList = res.data.list)
        : (this.projectList = this.projectList.concat(res.data.list));
      return res.data;
    },
    async checkSelf() {
      this.projectFilter = {
        ...this.projectFilter,
        filter_type: this.checkself.length,
      };
      this.pagination.currentPage = 1;
      await this.initData();
      this.scrollTop = 0;
    },
    onClickAdd() {
      uni.navigateTo({
        url: "./add",
      });
    },
    selectChangeStatus(e) {
      const item = this.statusList[e.target.value];
      this.projectFilter.project_status = item.value;
    },
    async search() {
      this.projectFilter.project_code =
        this.projectFilter.project_code.toUpperCase();
      this.pagination.currentPage = 1;
      await this.initData();
      this.$refs.searchDrawer.closeDrawer();
      this.scrollTop = 0;
    },
    scroll(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    scrollToLower() {
      if (this.projectList.length >= this.pagination.total) {
        this.loadMoreText = "没有更多数据了";
        return;
      }
      this.pagination.currentPage++;
      this.initData();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.head {
  width: calc(100% - 60rpx);
  padding: 40rpx;
  position: fixed;
  background: url("~@/static/app-plus/menu-title-bg.png") no-repeat center;
  background-size: 100% 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  .title {
    font: 18px bold;
    color: #fff;
  }
  .self {
    font: 14px;
    padding-left: 20rpx;
    ::v-deep {
      .checklist-text {
        span {
          color: #fff;
        }
      }
    }
  }
}
.list {
  width: 90%;
  margin-top: 150rpx;
  height: 90vh;
  ::v-deep {
    .uni-list--border-top {
      background-color: transparent;
    }
    .uni-list-item__container {
      padding: 12rpx 30rpx;
    }
  }
}
.loadmore {
  padding: 30rpx 0px;
  font-size: 16px;
  color: gray;
  text-align: center;
}
.form {
  margin: 0 20px;
}
</style>