pms-app/pages/ledger/detail/index.vue

<template>
  <view class="page">
    <uni-section :title="$t('ledger.detail.section')" />
    <uni-list :border="false" style="margin-top: 10px">
      <uni-list-item v-for="item of list" :title="item.name" :right-text="item.value" />
    </uni-list>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance, ref } from "vue"
import { getDeviceLedgerDetail } from "@/api/ledger"
import { useDataDictStore } from "@/store/modules/dataDict";

const { appContext } = getCurrentInstance()
const t = appContext.config.globalProperties.$t

const list = ref([])
const mapToListItem = (info) => {
  const list = []
  list.push({ name: t('ledger.form.deviceCode'), value: info.deviceCode || '-' }) // 设备编号
  list.push({ name: t('ledger.form.deviceName'), value: info.deviceName || '-' }) // 设备名称
  list.push({ name: t('ledger.form.dept'), value: info.deptName || '-' }) // 所在部门
  list.push({ name: t('ledger.detail.assetType'), value: info.assetClassName || '-' }) // 类别
  list.push({ name: t('ledger.form.deviceStatus'), value: getStatusName(info.deviceStatus) || '-' }) // 状态
  list.push({ name: t('ledger.form.assetProperty'), value: getAssetPropertyName(info.assetProperty) || '-' }) // 资产性质
  list.push({ name: t('ledger.form.brand'), value: info.brandName || '-' }) // 品牌
  list.push({ name: t('ledger.form.model'), value: info.modelName || '-' }) // 规格型号
  list.push({ name: t('ledger.detail.user'), value: info.responsibleNames || '-' }) // 责任人
  return list
}

const getStatusName = (code) => {
  for (const item of deviceStatusList.value) {
    if (item.value === code) {
      return item.label
    }
  }
}
const getAssetPropertyName = (code) => {
  for (const item of assetPropertyList.value) {
    if (item.value === code) {
      return item.label
    }
  }
}

const { getDataDictList } = useDataDictStore()
const deviceStatusList = ref([])
const assetPropertyList = ref([])
onLoad(async (options) => {
  assetPropertyList.value = getDataDictList('pms_asset_property') // 获取资产性质字典
  deviceStatusList.value = getDataDictList('pms_device_status') // 获取设备状态字典

  const id = options.id
  const info = (await getDeviceLedgerDetail(id)).data
  list.value = mapToListItem(info)
})
</script>

<style scoped lang="scss">
:deep(.uni-section) {
  background-color: transparent;

  .uni-section-header {
    padding: 0 0 0 10px;
  }

  .uni-section__content-title {
    font-size: 16px !important;
    color: #333333 !important;
    font-weight: 500;
  }
}
:deep(.uni-list--border-top) {
  display: none;
}

:deep(.uni-list--border-bottom) {
  display: none;
}

:deep(.uni-list-item__container) {
  padding: 12px 20px;
}

:deep(.uni-list--border) {
  margin: 0 20px;
  width: auto;
  height: 1px;
  background-image: linear-gradient(to right, #CACCCF 0%, #CACCCF 50%, transparent 50%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  border-color: transparent !important;
}

:deep(.uni-list-item__content-title) {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

:deep(.uni-list-item__extra-text) {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}
</style>