feat:菜单可配置

pages/device/deviceBusMaintain/detail.vue

@@ -0,0 +1,142 @@
+<template>
+  <up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
+    <uni-section titleFontSize="18px" type="line" title="设备维护保养信息"> </uni-section>
+    <scroll-view scroll-y="true" style="height: 85vh; width: 90vw">
+      <view class="content">
+        <up-row class="flex-wrap pt10 pl10" style="background-color: #f5f7fa">
+          <up-col class="mb8" :span="gridCol" v-for="(item, index) in detailSchema">
+            <view style="color: #666"
+              ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
+            >
+          </up-col>
+        </up-row>
+        <view class="pt5">
+          <up-row>
+            <up-col span="6">
+              <view
+                >维护保养人：
+                <text style="color: #666">
+                  {{ detailInfo.checkUserName }}
+                </text>
+              </view>
+              <view class="pt5"
+                >维护保养日期：
+                <text style="color: #666">
+                  {{ detailInfo.checkDate }}
+                </text>
+              </view>
+            </up-col>
+            <up-col span="6">
+              <u-album multiple-size="70" single-size="70" :urls="attachment" row-count="4" />
+            </up-col>
+          </up-row>
+        </view>
+        <view>
+          <up-row class="p10 font-bold" style="background-color: #f5f5f5">
+            <up-col span="5">维护保养内容</up-col>
+            <up-col span="3"> 频次</up-col>
+            <up-col span="4">维护保养标准</up-col>
+          </up-row>
+          <view>
+            <view v-for="(item, index) in detailInfo.maintainItemList" :key="index">
+              <up-row class="p10">
+                <up-col span="5">
+                  <view class="x-f">
+                    <text>
+                      {{ item.itemName }}
+                    </text>
+                  </view>
+                </up-col>
+                <up-col span="3">{{ item.frequencyRemark }}</up-col>
+                <up-col span="4">{{ item.standard }}</up-col>
+              </up-row>
+              <up-row class="fill-content">
+                <up-col span="12"
+                  ><view
+                    >维护保养情况:
+                    <text style="color: #666">
+                      {{ item.checkRemark }}
+                    </text>
+                  </view>
+                </up-col>
+              </up-row>
+            </view>
+            <view class="p10"></view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </up-popup>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { useGridCol } from '@/nx/hooks/useGridCol'
+import dailyCheckApi from '@/nx/api/dailyCheck'
+import { getImgBaseUrl } from '@/defaultBaseUrl'
+
+const { gridCol } = useGridCol([700], [6, 4])
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  checkInfo: {
+    type: Object
+  }
+})
+const detailSchema = [
+  { label: '设备名称', value: 'deviceName' },
+  { label: '别名', value: 'alias' },
+  { label: '设备型号', value: 'modelNo' },
+  { label: '设备编码', value: 'deviceCode' },
+  { label: '使用班组', value: 'deptName' }
+]
+const visible = ref(props.show)
+// 监听外部传入的show属性变化
+watch(
+  () => props.show,
+  newVal => {
+    visible.value = newVal
+  }
+)
+const attachment = computed(() => {
+  let files = detailInfo.value?.attachment?.split(',') || []
+  if (files.length > 0) {
+    return files.map(item => getImgBaseUrl() + item)
+  } else {
+    return []
+  }
+})
+let detailInfo = ref({})
+async function getDetailInfo(id) {
+  const res = await dailyCheckApi.queryById(id)
+  detailInfo.value = res
+}
+const emit = defineEmits(['close', 'open'])
+function handleClose() {
+  emit('close')
+}
+function handleOpen() {
+  getDetailInfo(props.checkInfo.id)
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-color: #fff;
+  height: 100%;
+  padding: 10px;
+  font-size: 16px;
+  .fill-content {
+    font-size: 14px;
+    border-radius: 3px;
+    box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
+    background-color: #fdf6ec;
+    padding: 10px;
+  }
+}
+:deep(.uicon-close) {
+  font-size: 22px !important;
+}
+</style>