pms-app/pages/ruiDu/index.vue

<template>
  <z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <template #top>
      <uni-row class="search-row flex-row align-center justify-between">
        <uni-col :span="19">
          <uni-easyinput
            v-model="orderName"
            :styles="inputStyles"
            :placeholderStyle="placeholderStyle"
            :placeholder="$t('operation.searchText')">
          </uni-easyinput>
        </uni-col>
        <uni-col :span="5" class="flex-row justify-end">
          <button
            class="mini-btn"
            type="primary"
            size="mini"
            @click="searchList">
            {{ $t("operation.search") }}
          </button>
        </uni-col>
      </uni-row>
    </template>
    <view class="list">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view
          class="item-module flex-row align-center justify-between"
          :class="{
            tobeFilled: item.status == 0,
          }">
          <!-- 创建时间 -->
          <view class="module-name">
            {{ item.createTime ? formatDate(item.createTime) : "" }}
          </view>
          <!-- 工单状态 -->
          <view
            class="module-status"
            :class="{
              pending: item.status === 0, //待填写
            }">
            {{ fillStatusDict[item.status] }}
          </view>
        </view>
        <view class="item-content">
          <!-- 带班干部 -->
          <view class="item-title flex-row">
            <span class="item-title-width">{{ $t("ruiDu.shiftLeader") }}:</span>
            <span>{{ item.responsiblePersonNames }}</span>
          </view>
          <!-- 日报名称 -->
          <view class="item-title flex-row">
            <span class="item-title-width">{{ $t("ruiDu.reportName") }}:</span>
            <span>{{ item.reportName }}</span>
          </view>
          <!-- 项目 -->
          <view class="item-title flex-row">
            <span class="item-title-width">{{ $t("ruiDu.project") }}:</span>
            <span>{{ item.contractName }}</span>
          </view>
          <!-- 任务 -->
          <view class="item-title flex-row">
            <span class="item-title-width">{{ $t("ruiDu.task") }}:</span>
            <span>{{ item.taskName }}</span>
          </view>

          <!-- 创建时间 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("operation.createTime") }}:</span
            >
            <span>{{
              item.createTime ? formatTime(item.createTime) : ""
            }}</span>
          </view>
          <!-- 填写时间 -->
          <view class="item-title flex-row">
            <span class="item-title-width"
              >{{ $t("operation.fillTime") }}:</span
            >
            <span>{{ item.fillTime ? formatTime(item.fillTime) : "" }}</span>
          </view>
          <view class="item-title flex-row align-center">
            <span class="item-title-width">{{ "审批状态" }}:</span>
            <span
              :class="[
                'my-tag',
                item.auditStatus === 0
                  ? 'my-tag-info'
                  : item.auditStatus === 10
                    ? 'my-tag-primary'
                    : item.auditStatus === 20
                      ? 'my-tag-success'
                      : 'my-tag-danger',
              ]">
              {{
                item.auditStatus === 0
                  ? "待提交"
                  : item.auditStatus === 10
                    ? "待审批"
                    : item.auditStatus === 20
                      ? "审批通过"
                      : "审批拒绝"
              }}
            </span>
          </view>
          <view class="item-title flex-row align-center">
            <span class="item-title-width">{{ "非生产时间" }}:</span>
            <span
              :class="[
                'my-tag',
                item.nonProductFlag ? 'my-tag-success' : 'my-tag-danger',
              ]">
              {{ item.nonProductFlag ? "已填写" : "未填写" }}
            </span>
          </view>
        </view>
        <view class="item-btn flex-row align-center justify-end">
          <!--  状态：0(待填写),1(已完成),2(填写中),3(忽略) -->

          <!-- 查看 -->
          <button type="primary" plain="true" @click="navigatorDetail(item)">
            {{ $t("operation.view") }}
          </button>
          <!-- 填写 -->
          <button
            v-show="item.status === 0"
            type="primary"
            @click="navigatorEdit(item)">
            {{ $t("operation.fill") }}
          </button>
          <button
            v-show="item.auditStatus === 20 && rdNonProductFlag"
            type="primary"
            @click="navigatorEdit(item, 'true')">
            {{ $t("operation.time") }}
          </button>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { onShow } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import { getRuiDuReportPage } from "@/api/ruiDu";
import { useDataDictStore } from "@/store/modules/dataDict";
import { getLoginUserInfo } from "@/api/login";

// 获取字典项
const { getStrDictOptions } = useDataDictStore();
// 填写状态
const fillStatusDict = reactive({});
getStrDictOptions("operation_fill_order_status").map(item => {
  fillStatusDict[item.value] = item.label;
});
console.log("🚀 ~ getDataDictList ~ fillStatusDict:", fillStatusDict);

const orderName = ref("");
const placeholderStyle = ref("color:#797979;font-weight:500;font-size:16px");
const inputStyles = reactive({
  backgroundColor: "#FFFFFF",
  color: "#797979",
});
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getRuiDuReportPage({
    pageNo,
    pageSize,
  })
    .then(res => {
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value.complete(res.data.list);
    })
    .catch(res => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false);
    });
};
const searchList = () => {
  paging.value.reload();
};
const navigatorDetail = item => {
  uni.navigateTo({
    url: "/pages/ruiDu/detail?id=" + item.id,
  });
};
const navigatorEdit = (item, istime = "false") => {
  uni.navigateTo({
    url: "/pages/ruiDu/edit?id=" + item.id + "&istime=" + istime,
  });
};
const formatDate = time => {
  return dayjs(time).format("YYYY-MM-DD");
};
const formatTime = time => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};

onShow(() => {
  nextTick(() => {
    searchList();
  });
});

const rdNonProductFlag = ref(false);

const getLoginUser = async () => {
  const response = await getLoginUserInfo();
  if (response.code === 0) {
    rdNonProductFlag.value = response.data.rdNonProductFlag;
  }
};
getLoginUser();
</script>

<style lang="scss" scoped>
@import "@/style/work-order.scss";

.search-row {
  height: 35px;
  background: #f3f5f9;

  .mini-btn {
    height: 35px;
    line-height: 35px;
    width: 100%;
    margin-left: 8px;
  }
}

.item {
  width: 100%;
  // height: 245px;
  min-height: 245px;
  // max-height: fit-content;
  background: #ffffff;
  border-radius: 6px;
  margin-top: 10px;
}

.my-tag {
  display: inline-block;
  padding: 0 9px;
  height: 24px;
  line-height: 22px; /* height - border*2 */
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid;
  white-space: nowrap;
  margin-left: 12px;
}

/* 已填写 - 绿色 (Success) */
.my-tag-success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

/* 未填写 - 红色 (Danger) */
.my-tag-danger {
  background-color: #fef0f0;
  border-color: #fde2e2;
  color: #f56c6c;
}

.my-tag-primary {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}

/* 信息 - 灰色 (Info) */
.my-tag-info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
}
</style>