ts自动导入和select组件的二次封装

src/assets/styles/ruoyi.scss

@@ -322,8 +322,8 @@
    border-color: #aef5ef;
  }
 
- // 表格input宽度
+ // 表格input宽度,表格select宽度
- .full-width-input .el-input__inner {
+ .full-width-input .el-input__inner .el-select__inner {
    width: 100%;
    height: 100%;
 
@@ -339,6 +339,16 @@
      padding: 0 !important;
      outline: none;
 
+     &:hover {
+       box-shadow: none !important;
+     }
+   }
+   .el-select__wrapper {
+    box-shadow: none;
+     background: transparent !important;
+     padding: 0 !important;
+     outline: none;
+
      &:hover {
        box-shadow: none !important;
      }

src/auto-imports.d.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/components/SelectTable/YQSelectTable/index.vue

@@ -0,0 +1,46 @@
+<!--
+仪器组件的封装
+-->
+<template>
+<SelectTable v-model:data="queryParams.yq" :fields="yqFields" :tableData="instrOptions" label="yqmc" size="small"
+                    value="yq" objKey="yq" :border="true" width="9rem" placeholder="请选择仪器" :clearable="false" />
+</template>
+
+<script setup lang="ts">
+import SelectTable from '@/components/SelectTable/index.vue';
+import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
+
+const props = defineProps({
+  data: {
+    type: String,
+    required: true
+  }
+});
+
+const queryParams = ref({
+  yq: props.data
+});
+const yqFields = ref([
+  { prop: 'yq', label: '代号', width: 80, enablePinyinSearch: true },
+  { prop: 'yqmc', label: '名称', width: 150, enablePinyinSearch: true },
+]);
+const instrOptions = ref<{ yq: string; yqmc: string }[]>([])
+
+
+const getYqConfig = () => {
+  getGroupInstrdList()
+    .then((res: any) => {
+      if (res.code == 0) {
+        instrOptions.value = res.data.map((item: any) => ({
+          yq: item.yq.trim(),
+          yqmc: item.yqmc
+        }))
+      }
+    })
+}
+
+onMounted(() => {
+  getYqConfig();
+});
+
+</script>

src/views/liswork/xtwh/reportsetting/index.vue

@@ -1,8 +1,8 @@
 <template>
   <!--报告单设定-->
-  <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
+  <el-form ref="form" :model="formData" label-width="80px" size="small">
     <el-form-item label="仪器" prop="yq">
-      <el-input placeholder="仪器" v-model="formData.yq" style="width: 200px;"></el-input>
+      <YQSelectTable :data="formData.yq"/>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="handAdd">新增</el-button>
@@ -14,44 +14,43 @@
   <el-table :data="tableData" border width="100%" height="700px" @current-change="currentChange">
     <el-table-column label="仪器" prop="yq" align="center"></el-table-column>
     <el-table-column label="序号" prop="xh" align="center"></el-table-column>
-    <el-table-column label="报告单号" prop="bgdh" align="center"></el-table-column>
+    <el-table-column label="报告单号" prop="bgdh" align="center"  >
+      <template #default="{ row }">
+        <el-input v-model="row.bgdh" placeholder="请输入报告单号" class="full-width-input"></el-input>
+      </template>
+    </el-table-column>
     <el-table-column label="医疗机构" prop="yljg" align="center"></el-table-column>
     <el-table-column label="使用类型" prop="type" align="center">
       <template #default="{ row }">
-        <el-select v-model="row.type" placeholder="请选择" style="width: 120px;">
+        <el-select v-model="row.type" placeholder="请选择" class="full-width-input">
           <el-option label="默认" value="1"></el-option>
           <el-option label="参数" value="2"></el-option>
           <el-option label="根据项目来判断" value="3"></el-option>
         </el-select>
       </template>
     </el-table-column>
-    <el-table-column label="使用条件" prop="condition" align="center"></el-table-column>
+    <el-table-column label="使用条件" prop="condition" align="center">
+      <template #default="{ row }">
+        <el-input v-model="row.condition" placeholder="请输入使用条件" class="full-width-input"></el-input>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 
 <script setup lang="ts">
 import { ref} from 'vue';
 import {addReportService} from '@/api/liswork/xtwh/ReportSetting';
-import { LabReportInstr } from '@/types/Index';
+import { LabReportInstr } from '@/types/index';
+import YQSelectTable from '@/components/SelectTable/YQSelectTable/index.vue';
 
 
 
 const formData = ref({
   yq: ''
 });
-
-const rules = ref({
-  // name: [
-  //   { required: true, message: '请输入姓名', trigger: 'blur' },
-  //   { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-  // ],
-  // sex: [
-  //   { required: true, message: '请选择性别', trigger: 'blur' }
-  // ]
-});
-
 const tableData = ref<LabReportInstr[]>([]);
 
+
 const handAdd = () => {
   const newReport: LabReportInstr = {
     yq: formData.value.yq,
@@ -77,7 +76,12 @@ const handSave = () => {
 
 
 const currentChange = (currentRow: LabReportInstr, oldCurrentRow: LabReportInstr) => {
+  console.log('旧的行数据:', oldCurrentRow);
   console.log('当前行数据:', currentRow);
 };
 
+const yqHandleChange = (val: string) => {
+  formData.value.yq = val;
+};
+
 </script>

vite/plugins/auto-import.js

@@ -7,6 +7,7 @@ export default function createAutoImport() {
             'vue-router',
             'pinia'
         ],
-        dts: false
+        // 2. 生成类型声明文件（解决TS类型报错）
+        dts: 'src/auto-imports.d.ts', // 生成的.d.ts文件路径（会自动创建）
     })
 }