WorkloadApp/pages/daily/projectDaily.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head">
        <span class="title">项目列表</span>
        <navigator
          :url="`/pages/daily/form?project_id=${project_id}`"
          class="self"
          open-type="navigate"
          hover-class="navigator-hover"
        >
          写日志
        </navigator>
      </view>

      <view class="search">
        <uni-search-bar
          bgColor="#FFFFFF"
          style="padding: 20rpx 30rpx"
          :radius="20"
          placeholder="请输入日志标题"
          v-model="projectFilter.searchKeyword"
          @confirm="handelSearchConfirm"
        />
        <view class="selectRow">
          <view class="selectCol">
            <picker
              style="max-width: 80%"
              :range="userList"
              range-key="CName"
              @change="handelChange"
            >
              <view class="pickerSlot">
                <view class="itemText">
                  {{ projectFilter.author_name || "提交人" }}
                </view>
                <!-- v-if="selectedValues[index] === null" -->
                <image
                  class="triangle"
                  src="/static/triangle@2x.png"
                  mode="widthFix"
                />
              </view>
            </picker>
            <uni-icons
              v-if="projectFilter.author_name"
              type="closeempty"
              size="14"
              @click="cleanSelect()"
            ></uni-icons>
          </view>
          <view class="selectCol">
            <uniDatetimePicker
              style="max-width: 80%"
              type="daterange"
              hide-second
              clear-icon
              @change="handelTimePickerChange"
            >
              <view class="pickerSlot">
                <view class="itemText">
                  {{
                    projectFilter.s_time
                      ? `${projectFilter.s_time}~${projectFilter.e_time}`
                      : "发布日期"
                  }}
                </view>
                <image
                  class="triangle"
                  src="/static/triangle@2x.png"
                  mode="widthFix"
                />
              </view>
            </uniDatetimePicker>
            <uni-icons
              v-if="projectFilter.s_time"
              type="closeempty"
              size="14"
              @click="cleanTime()"
            ></uni-icons>
          </view>
        </view>
      </view>
      <scroll-view
        class="list"
        :scroll-top="scrollTop"
        scroll-y="true"
        @scrolltolower="scrollToLower()"
      >
        <view class="item" v-for="item in list" :key="item.id">
          <view class="box">
            <view class="title">{{ item.title }}</view>
            <view class="desc">
              <view class="desc-title">日志概述：</view>
              <view class="desc-content">
                {{ item.content }}
              </view>
            </view>
            <view class="bottom">
              <view class="time">{{ item.c_time | time }}</view>
              <view class="user">提交人：{{ item.author_name }}</view>
            </view>
          </view>
        </view>
        <view class="loadmore">{{ loadMoreText }}</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import uniDatetimePicker from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { queryProjectDaily } from "@/services/daily";
import mixin from "@/utils/listMixin";

export default {
  components: {
    uniDatetimePicker,
  },
  mixins: [mixin],
  data() {
    return {
      scrollTop: 0,
      projectFilter: { searchKeyword: "", s_time: "", e_time: "" },
      project_id: "",
      list: [],
      loadMoreText: "暂无数据",
    };
  },
  filters: {
    time(t) {
      return t ? moment(t).format("MM-DD HH:mm") : "-";
    },
  },
  computed: {
    ...mapState(["userList"]),
  },
  methods: {
    ...mapActions(["queryUserList"]),
    handelSearchConfirm() {
      this.pagination.currentPage = 1;
      this.initData();
    },
    handelChange(e) {
      let select = this.userList[e.target.value];
      this.projectFilter.author = select.ID;
      this.projectFilter.author_name = select.CName;

      this.pagination.currentPage = 1;
      this.initData();
    },
    cleanSelect() {
      this.projectFilter.author = null;
      this.projectFilter.author_name = null;

      this.pagination.currentPage = 1;
      this.initData();
    },
    scrollToLower() {
      if (this.list.length >= this.pagination.total) {
        this.loadMoreText = "没有更多数据了";
        return;
      }
      this.pagination.currentPage++;
      this.initData();
    },
    handelTimePickerChange(time) {
      if (time.length !== 2) {
        return;
      }
      this.projectFilter.s_time = moment(time[0]).format("YYYY-MM-DD 00:00:00");
      this.projectFilter.e_time = moment(time[1]).format("YYYY-MM-DD 23:59:59");

      this.pagination.currentPage = 1;
      this.initData();
    },
    cleanTime() {
      this.projectFilter.s_time = null;
      this.projectFilter.e_time = null;

      this.pagination.currentPage = 1;
      this.initData();
    },
    async getList(params) {
      console.log(params);
      let res = await queryProjectDaily({
        ...params,
        project_id: this.project_id,
      });
      this.list = res.data.list;
      return res.data;
    },
  },
  onLoad(options) {
    this.project_id = options.project_id;
    this.queryUserList();
  },
  onShow() {
    this.pagination.currentPage = 1;
    this.initData();
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 150rpx;
}

.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;
  top: 0;
  .title {
    font: 18px bold;
    color: #fff;
  }
  .self {
    font: 14px;
    padding-left: 20rpx;
    color: #fff;
  }
}
.list {
  width: 90%;
  height: calc(90vh - 200rpx);
  ::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;
}
.item {
  margin-top: 20rpx;

  .box {
    padding: 40rpx;
    border-radius: 5rpx;
    border: 1px solid #ccc;
    box-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.2);
    .title {
      font-size: 28rpx;
      font-weight: 400;
      color: #4a90e2;
      line-height: 40rpx;
      margin-bottom: 18rpx;
    }
    .desc {
      display: flex;
      font-size: 28rpx;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 40rpx;
      .desc-title {
        flex-shrink: 1;
      }
      .desc-content {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #7a7a7a;
      line-height: 30rpx;
    }
  }
}
.search {
  width: 100%;
  ::v-deep {
    .uni-searchbar {
      width: 100%;
      .uni-searchbar__box {
        border: 1px solid #ccc;
      }
    }
  }
}
.selectRow {
  display: flex;
  height: 40px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.selectCol {
  width: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pickerSlot {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.itemText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.triangle {
  margin: 0;
  padding: 0;
  margin-left: 3px;
  width: 25rpx;
  margin-left: 5rpx;
}
</style>