出入库详情弹窗

src/style/tdesign-reset.less

@@ -13,7 +13,8 @@
   padding-top: 25px;
   overflow: initial;
 }
-.t-dialog__body .t-form__label {
+.t-dialog__body .t-form__label,
+.t-drawer__body .t-form__label {
   color: #595959;
   padding-right: 8px;
 }

src/views/resource-guard/device-guard/registration-query/index.vue

@@ -4,12 +4,6 @@
       <template #service="{ item, params }">
         <select-service-unit v-model="params[item.prop]"></select-service-unit>
       </template>
-      <template #supplier="{ item, params }">
-        <select-supplier
-          v-model="params[item.prop]"
-          type="DEVICE"
-        ></select-supplier>
-      </template>
       <template #user="{ item, params }">
         <select-filter-user
           v-model="params[item.prop]"
@@ -46,8 +40,19 @@
         <template #inout-time="{ col, row }">
           {{ timestampFilter(row[col.colKey]) }}
         </template>
+        <template #detail="{ col, row }">
+          <t-link theme="primary" hover="color" @click="handleDetail(row)">
+            {{ row[col.colKey] }}
+          </t-link>
+        </template>
       </t-table>
     </div>
+
+    <!-- RegistrationDetailDialog -->
+    <registration-detail-dialog
+      v-model:visible="showRegistrationDetailDialog"
+      :cur-row="curRow"
+    ></registration-detail-dialog>
   </div>
 </template>
 
@@ -65,6 +70,10 @@ import {
   runningStatusFilter,
   timestampFilter,
 } from '@/utils/filter';
+import RegistrationDetailDialog from './registration-detail-dialog.vue';
+
+const showRegistrationDetailDialog = ref(false);
+const curRow = ref(null);
 
 const fields = ref([
   {
@@ -179,7 +188,6 @@ const params = reactive({
   deviceStatus: '',
   deviceNo: '',
   inOutTime: [],
-  supplierId: '',
   customName: '',
   location: '',
   address: '',
@@ -194,7 +202,7 @@ const computedParams = computed(() => {
 });
 
 const columns = [
-  { colKey: 'serialNo', title: '登记流水号', width: 200 },
+  { colKey: 'serialNo', title: '登记流水号', width: 200, cell: 'detail' },
   { colKey: 'serviceUnitName', title: '服务单元名称', width: 160 },
   { colKey: 'usageType', title: '用途类型', width: 100, cell: 'usage' },
   { colKey: 'deviceNo', title: '设备编号', width: 120 },
@@ -217,4 +225,9 @@ const { pagination, tableData, search, onChange } = useFetchTable(
     params: computedParams,
   }
 );
+
+const handleDetail = (row) => {
+  curRow.value = row;
+  showRegistrationDetailDialog.value = true;
+};
 </script>

src/views/resource-guard/device-guard/registration-query/registration-detail-dialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <my-drawer
+    :visible="visible"
+    size="80%"
+    header="登记详情"
+    attach="body"
+    :close-btn="true"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" labelWidth="130px" colon>
+      <t-row :gutter="[0, 0]">
+        <t-col :span="6">
+          <t-form-item label="登记流水号">
+            <span>{{ curRow.serialNo }}</span>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="设备出入库选择">
+            <span>{{ inoutTypeFilter(curRow.inOutType) }}</span>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="用途类型">
+            <span>{{ deviceUsageTypeFilter(curRow.usageType) }}</span>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="设备出入库时间">
+            <span>{{ timestampFilter(curRow.inOutTime) }}</span>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="设备出入库登记"> </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-table
+            size="small"
+            row-key="id"
+            :columns="columns"
+            :data="[curRow]"
+            bordered
+          >
+            <template #status="{ col, row }">
+              {{ runningStatusFilter(row[col.colKey]) }}
+            </template>
+            <template #photo="{ col, row }">
+              <t-image-viewer :images="[row[col.colKey]]"> </t-image-viewer>
+            </template>
+          </t-table>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="primary" @click="emit('update:visible', false)"
+        >返回</t-button
+      >
+    </template>
+  </my-drawer>
+</template>
+
+<script setup name="RegistrationDetailDialog">
+import {
+  deviceUsageTypeFilter,
+  inoutTypeFilter,
+  runningStatusFilter,
+  timestampFilter,
+} from '@/utils/filter';
+// import { BrowseIcon } from 'tdesign-icons-vue-next';
+
+const emit = defineEmits(['update:visible']);
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const columns = [
+  { colKey: 'deviceNo', title: '设备编号', width: 120 },
+  { colKey: 'deviceModel', title: '型号', width: 120 },
+  { colKey: 'supplierName', title: '供应商', width: 200 },
+  { colKey: 'deviceStatus', title: '运行状态', width: 80, cell: 'status' },
+  { colKey: 'scanCount', title: '总扫描量', width: 80 },
+  { colKey: 'location', title: '当前所在地' },
+  { colKey: 'address', title: '发往地' },
+  { colKey: 'basePhotoPath', title: '快递单拍照', width: 100, cell: 'photo' },
+];
+</script>