feat:菜单可配置

pages/device/periodCheckList/detail.vue

@@ -0,0 +1,118 @@
+<template>
+  <up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
+    <uni-section titleFontSize="20px" type="line" title="设备期间核查信息"> </uni-section>
+    <scroll-view scroll-y="true" class="content">
+      <up-row class="flex-wrap">
+        <up-col :span="gridCol"
+          >核查对象：
+          <text class="value">{{ detailInfo.deviceName }}</text>
+        </up-col>
+        <up-col span="4"
+          >别名：
+          <text class="value">{{ detailInfo.alias }}</text>
+        </up-col>
+        <up-col span="4"
+          >核查日期：
+          <text class="value">{{ detailInfo.checkDate }}</text>
+        </up-col>
+        <up-col :span="gridCol"
+          >核查方法：
+          <text class="value">{{ detailInfo.checkAccording }}</text>
+        </up-col>
+      </up-row>
+      <up-row class="flex-wrap">
+        <up-col span="12"
+          >核查方法描述：
+          <text class="value">{{ detailInfo.checkAccordingRemark }}</text>
+        </up-col>
+        <up-col span="12"
+          >核查记录：
+          <up-parse style="background: #f3f4f6" :content="processedContent"></up-parse>
+        </up-col>
+      </up-row>
+      <up-row>
+        <up-col span="12"
+          >备注：
+          <text class="value">{{ detailInfo.checkRemark }}</text>
+        </up-col>
+      </up-row>
+      <wf-comment :commentWf="commentWf" />
+    </scroll-view>
+  </up-popup>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { getImgBaseUrl } from '@/defaultBaseUrl'
+import { useGridCol } from '@/nx/hooks/useGridCol'
+const { gridCol } = useGridCol([700], [6, 4])
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  checkInfo: {
+    type: Object
+  }
+})
+const visible = ref(props.show)
+// 监听外部传入的show属性变化
+watch(
+  () => props.show,
+  newVal => {
+    visible.value = newVal
+  }
+)
+let detailInfo = ref({})
+// / 处理富文本内容
+const processedContent = computed(() => {
+  if (!detailInfo.value.checkContent) {
+    return ''
+  }
+  return detailInfo.value.checkContent.replace(
+    /<img([^>]+?)src="((?!http)[^"]*?)(file\/[^"]*)"/gi,
+    (match, attributes, prefix, filePath) => {
+      return `<img${attributes}src="${getImgBaseUrl()}/${filePath}"`
+    }
+  )
+})
+const emit = defineEmits(['close', 'open'])
+function handleClose() {
+  emit('close')
+}
+let commentWf = ref([])
+function handleOpen() {
+  detailInfo.value = props.checkInfo
+  if (props.checkInfo.commentJson) {
+    try {
+      commentWf.value = JSON.parse(props.checkInfo.commentJson)
+    } catch (error) {
+      uni.showToast({
+        title: '解析数据错误',
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  font-size: 18px;
+  height: 85vh;
+  width: 80vw;
+  padding: 10px;
+  .u-row {
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+  }
+
+  .value {
+    color: #666;
+    font-size: 16px;
+  }
+}
+:deep(.uicon-close) {
+  font-size: 22px !important;
+}
+</style>

pages/device/periodCheckList/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <view>
+    <uni-card spacing="0">
+      <view style="height: 72vh">
+        <zb-table
+          ref="zbTableRef"
+          isShowLoadMore
+          stripe
+          :fit="false"
+          :columns="column"
+          :cellStyle="setCellStyle"
+          :cellHeaderStyle="setCellHeaderStyle"
+          :data="listData"
+          @detail="handleDetail"
+          @pullUpLoading="pullUpLoadingAction"
+        ></zb-table>
+      </view>
+    </uni-card>
+    <period-check-detail-popup :show="detailShow" :checkInfo="checkInfo" @close="detailShow = false" />
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { setCellHeaderStyle, setCellStyle } from '@/nx/config/zbTable'
+import PeriodCheckDetailPopup from './detail.vue'
+import { list } from './period.api'
+import { useListData } from '@/nx/hooks/usePageListData'
+import nx from '@/nx'
+
+const column = reactive([
+  {
+    label: '核查日期',
+    name: 'checkDate',
+    width: 120
+  },
+  {
+    label: '核查人',
+    name: 'checkPersonName',
+    width: 120
+  },
+  {
+    label: '核查方法',
+    name: 'checkAccording',
+    width: 120
+  },
+  {
+    label: '期间核查频次',
+    name: 'frequencyRemark',
+    width: 200
+  },
+  {
+    name: 'operation',
+    type: 'operation',
+    label: '操作',
+    renders: [{ name: '详情', func: 'detail' }]
+  }
+])
+const deviceId = ref('')
+const deviceText = ref('')
+
+onMounted(() => {
+  const { id, deviceName } = nx.$store('biz').deviceInfo
+  deviceId.value = id
+  deviceText.value = deviceName
+  getInitData()
+})
+const searchParams = computed(() => ({
+  deviceId: deviceId.value,
+  effectiveFlag: '1',
+  wfStatus: 'finished',
+  cancelFlag: '0'
+}))
+const { listData, loadingData, scrollToLower, loadStatus, getInitData } = useListData({
+  searchParams,
+  api: list
+})
+const zbTableRef = ref()
+function pullUpLoadingAction() {
+  if (loadingData.value) return
+  if (loadStatus.value === 'nomore') {
+    zbTableRef.value.pullUpCompleteLoading('ok')
+  } else {
+    scrollToLower()
+  }
+}
+
+const detailShow = ref(false)
+const checkInfo = ref({})
+function handleDetail(row) {
+  checkInfo.value = row
+  detailShow.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.zb-table uni-button[type='primary']) {
+  background-color: $uni-color-primary !important;
+}
+</style>

pages/device/periodCheckList/period.api.js

@@ -0,0 +1,9 @@
+import request from '@/nx/request'
+
+export function list(params) {
+  return request({
+    url: '/lims/bus/deviceBusPeriodCheck/queryPageList',
+    method: 'GET',
+    params
+  })
+}