WorkloadApp/pages/Project/list.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head">
        <span class="title">项目列表</span>
        <span class="self">
          <uni-data-checkbox
            multiple
            v-model="checkself"
            :localdata="self"
            @change="checkSelf()"
          ></uni-data-checkbox>
        </span>
      </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"></edit>
          </uni-collapse-item>
        </uni-collapse>
        <view class="loadmore">{{ loadMoreText }}</view>
      </scroll-view>

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

      <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 } 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 {
      user: {},
      projectList: [],
      projectFilter: {
        project_name: "",
        project_code: "",
        project_status: null,
      },
      checkself: [],
      statusList,
      self: [{ text: "只看自己", value: 0 }],
      scrollTop: 0,
      showSearch: true,
    };
  },
  onLoad() {
    this.init();
  },
  onShow() {
    this.initData();
  },
  onNavigationBarButtonTap() {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  },
  methods: {
    async init() {
      this.user = uni.getStorageSync("user");
      await this.$store.dispatch("getDep");
    },
    async getProject(params) {
      let res = {};
      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);
  // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  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;
  .title {
    font: 18px bold;
    color: #fff;
  }
  .self {
    font: 16px;
    padding-left: 20rpx;
    background-color: #fff;
  }
}
.list {
  width: 90%;
  margin-top: 150rpx;
}
.project {
  border-bottom: 2rpx solid gray;
  padding: 30rpx 0px;
  font-size: 16px;
}
.loadmore {
  padding: 30rpx 0px;
  font-size: 16px;
  color: gray;
  text-align: center;
}
.form {
  margin: 0 20px;
}
</style>