pms-app/pages/statusChange/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="18">
          <uni-easyinput
              v-model="assetCode"
              :styles="inputStyles"
              :placeholderStyle="placeholderStyle"
              :placeholder="$t('statusChange.searchHint')"
          />
        </uni-col>
        <uni-col :span="6" 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>
      <view class="item flex-col" v-for="(item, index) in dataList" :key="index">
        <div class="item-title-bg">
          <span class="item-title">{{ $t('statusChange.deviceName') + ': ' + item.deviceName }}</span>
          <span class="item-status">{{ getStatusName(item.deviceStatus) }}</span>
        </div>
        <uni-row class="flex-wrap" style="padding: 0 10px">
          <uni-col :span="6" style="margin-top: 15px">{{ $t('statusChange.assetCode') + ': ' }}</uni-col>
          <uni-col :span="18" style="margin-top: 15px">{{ item.deviceCode }}</uni-col>
          <uni-col :span="6" style="margin-top: 15px">{{ $t('statusChange.dept') + ': ' }}</uni-col>
          <uni-col :span="18" style="margin-top: 15px">{{ item.deptName }}</uni-col>
          <uni-col :span="6" style="margin-top: 15px">{{ $t('statusChange.createDate') + ': ' }}</uni-col>
          <uni-col :span="18" style="margin-top: 15px">{{ item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : '' }}</uni-col>
<!--          <uni-col :span="6" style="margin-top: 8px">{{ $t('statusChange.beforeStatus') }}</uni-col>-->
<!--          <uni-col :span="18" style="margin-top: 8px"></uni-col>-->
<!--          <uni-col :span="6" style="margin-top: 8px">{{ $t('statusChange.afterStatus') }}</uni-col>-->
<!--          <uni-col :span="18" style="margin-top: 8px"></uni-col>-->
          <uni-col class="flex-row" :span="24" style="margin: 15px">
            <button class="item-button" size="mini" @click="viewDetail(item)">{{ $t('statusChange.history') }}</button>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { onNavigationBarButtonTap } from '@dcloudio/uni-app'
import { getDeviceStatusChangeList } from "@/api/statusChange"
import dayjs from "dayjs";
import { useDataDictStore } from "@/store/modules/dataDict";

const assetCode = 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) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getDeviceStatusChangeList({
    pageNo,
    pageSize,
    deviceCode: assetCode.value
  }).then(res => {
    // console.log('res', res)
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    paging.value.complete(res.data.list);
  }).catch(() => {
    // 如果请求失败写paging.value.complete(false);
    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
    paging.value.complete(false);
  })
}
const searchList = () => {
  nextTick(() => paging.value.reload())
}

const viewDetail = (item) => {
  uni.navigateTo({ url: '/pages/statusChange/history/index?id=' + item.id })
}

onNavigationBarButtonTap(() => {
  uni.navigateTo({ url: '/pages/statusChange/form/index' })
})

const deviceStatusList = ref([])
const getStatusName = (code) => {
  for (const item of deviceStatusList.value) {
    if (item.value === code) {
      return item.label
    }
  }
}

const { getDataDictList } = useDataDictStore()
onMounted(async () => {
  deviceStatusList.value = getDataDictList('pms_device_status')
  uni.$once('update', () => searchList())
})
</script>

<style lang="scss" scoped>
.page {
  box-sizing: border-box;
  padding: 10px !important;
}


.search-row {
  height: 35px;
  width: 100%;
  background: #F3F5F9;
  z-index: 10;

  .mini-btn {
    height: 35px;
    line-height: 35px;
    width: calc(100% - 10px);
    margin-left: 10px;
  }
}

.item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
}

.item-module {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 10px 15px 10px 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(270deg, #FFFFFF 0%, #8EBEFF 100%);

  &.tobeFilled {
    background: linear-gradient(270deg, #FFFFFF 0%, #FFF0F0 100%);
  }

  .module-status {
    // min-width: 60px;
    height: 23px;
    padding: 0 6px;
    background: #FFEBEB;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: #E7000D;
  }
}

.item-title-width {
  min-width: 70px;
}

.item-title-bg {
  background: linear-gradient( 270deg, #FFFFFF 0%, #8EBEFF 100%);
  border-radius: 6px 6px 0 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.item-title {
  font-size: 16px;
  color: #333333;
  flex: 1;
}

.item-status {
  padding: 4px 14px;
  background: #EBF5FF;
  border-radius: 3px;
  border: 1px solid #FFFFFF;
  color: #004098;
  font-size: 14px;
}

.item-button {
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #004098;
  color: #004098;
  margin-right: 0;
}

.item-button::after {
  border: none;
}
</style>