pms-app/pages/ruihen/index.vue

<script setup>
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { ref, reactive, nextTick } from 'vue';
  import dayjs from 'dayjs';
  import { getRuiHenReportPage } from '@/api/ruihen';
  import { useDataDictStore } from '@/store/modules/dataDict';
  import { getDeptId } from '@/utils/auth';

  const dictStore = useDataDictStore();

  const fillStatusDict = reactive({});
  const approvalStatusDict = reactive({
    0: '待提交',
    10: '待审批',
    20: '审批通过',
    30: '审批拒绝',
  });
  const constructionStatusDict = reactive({});

  const placeholderStyle = ref('color:#797979;font-weight:500;font-size:16px');
  const inputStyles = reactive({
    backgroundColor: '#FFFFFF',
    color: '#797979',
  });

  const orderName = ref('');

  const paging = ref(null);
  const dataList = ref([]);

  const queryList = (pageNo, pageSize) => {
    getRuiHenReportPage({
      pageNo,
      pageSize,
      ...(orderName.value ? { taskName: orderName.value } : {}),
      ...(orderName.value ? { contractName: orderName.value } : {}),
      deptId: getDeptId(),
    })
      .then(res => {
        paging.value.complete(res.data.list);
      })
      .catch(() => {
        paging.value.complete(false);
      });
  };

  const searchList = () => {
    paging.value.reload();
  };

  const navigatorDetail = item => {
    uni.navigateTo({
      url: '/pages/ruihen/detail?id=' + item.id + `&type=${type.value}-detail`,
    });
  };
  const navigatorEdit = item => {
    uni.navigateTo({
      url: type.value === 'edit' ? '/pages/ruihen/edit?id=' + item.id : '/pages/ruihen/approval?id=' + item.id,
    });
  };

  const formatDate = time => {
    return dayjs(time).format('YYYY-MM-DD');
  };
  const formatTime = time => {
    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
  };

  const type = ref('edit');

  onLoad(option => {
    type.value = option.type || 'edit';
  });

  onShow(() => {
    if (dictStore.dataDict.length <= 0) {
      dictStore.loadDataDictList().then(() => {
        dictStore.getStrDictOptions('operation_fill_order_status').map(item => {
          fillStatusDict[item.value] = item.label;
        });
        dictStore.getStrDictOptions('constructionStatus').map(item => {
          constructionStatusDict[item.value] = item.label;
        });
      });
    } else {
      dictStore.getStrDictOptions('operation_fill_order_status').map(item => {
        fillStatusDict[item.value] = item.label;
      });
      dictStore.getStrDictOptions('constructionStatus').map(item => {
        constructionStatusDict[item.value] = item.label;
      });
    }
    nextTick(() => {
      searchList();
    });
  });

  const showBtn = item => {
    if (type.value === 'edit') return item.status === 0;
    else return item.auditStatus === 10;
  };
</script>

<template>
  <z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
    <template #top>
      <view class="top">
        <uni-easyinput
          v-model="orderName"
          :styles="inputStyles"
          :placeholderStyle="placeholderStyle"
          :placeholder="$t('operation.searchText')">
        </uni-easyinput>
        <button class="mini-btn" type="primary" size="mini" @click="searchList">
          {{ $t('operation.search') }}
        </button>
      </view>
    </template>
    <view class="list">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="header">
          <span class="create-time">{{ item.createTime ? formatDate(item.createTime) : '' }}</span>
          <span class="fill-status" :class="`status-${item.status}`">{{ fillStatusDict[item.status] }}</span>
        </view>
        <view class="content">
          <view class="content-item">
            <span class="label">日期：</span>
            <span>{{ item.createTime ? formatTime(item.createTime) : '' }}</span>
          </view>
          <view class="content-item">
            <span class="label">项目：</span>
            <span>{{ item.contractName }}</span>
          </view>
          <view class="content-item">
            <span class="label">任务：</span>
            <span>{{ item.taskName }}</span>
          </view>
          <view class="content-item">
            <span class="label">施工队伍：</span>
            <span>{{ item.deptName }}</span>
          </view>
          <view class="content-item">
            <span class="label">施工状态：</span>
            <span :class="{ constructionStatus: item.constructionStatus }">{{
              constructionStatusDict[item.constructionStatus]
            }}</span>
          </view>
          <view class="content-item">
            <span class="label">审批状态：</span>
            <span class="auditStatus" :class="`status-${item.auditStatus}`">{{
              approvalStatusDict[item.auditStatus]
            }}</span>
          </view>
        </view>
        <view class="footer">
          <button class="button" size="mini" type="primary" plain="true" @click="navigatorDetail(item)">
            {{ $t('operation.view') }}
          </button>
          <!-- 填写 -->
          <button v-show="showBtn(item)" class="button" size="mini" type="primary" @click="navigatorEdit(item)">
            {{ type === 'edit' ? $t('operation.fill') : $t('operation.approve') }}
          </button>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style scoped>
  .page {
    padding: 10px;
  }

  .top {
    height: 40px;
    background: #f3f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  :deep(.mini-btn) {
    height: 38px !important;
    font-size: 16px !important;
  }

  .list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .item {
      background-color: #fff;
      padding: 10px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 500;

        .fill-status {
          font-size: 14px;
          font-weight: 500;
          display: inline-flex;
          padding: 5px;
          border-radius: 4px;

          &.status-0 {
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.2);
          }
          &.status-2 {
            color: #4096ff;
            background: rgba(64, 150, 255, 0.2);
          }

          &.status-1 {
            color: #00c250;
            background: rgba(0, 194, 80, 0.2);
          }
        }
      }

      .content {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .content-item {
          font-size: 14px;
          font-weight: 400;

          .label {
            display: inline-block;
            font-weight: 500;
            width: 70px;
          }

          .constructionStatus {
            font-size: 14px;
            font-weight: 500;
            display: inline-flex;
            padding: 5px;
            border-radius: 4px;
            color: #4096ff;
            background: rgba(64, 150, 255, 0.2);
          }

          .auditStatus {
            font-size: 14px;
            font-weight: 500;
            display: inline-flex;
            padding: 5px;
            border-radius: 4px;

            &.status-0 {
              color: #595959;
              background: rgba(89, 89, 89, 0.2);
            }

            &.status-30 {
              color: #ff4d4f;
              background: rgba(255, 77, 79, 0.2);
            }
            &.status-10 {
              color: #4096ff;
              background: rgba(64, 150, 255, 0.2);
            }

            &.status-20 {
              color: #00c250;
              background: rgba(0, 194, 80, 0.2);
            }
          }
        }
      }

      .footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0 12px;
        height: 32px;

        .button {
          margin: 0;
        }
      }
    }
  }
</style>