ts自动导入和select组件的二次封装
This commit is contained in:
jiangs
parent
d99aa6377d
commit
1e1853149b
@ -322,8 +322,8 @@
|
||||
border-color: #aef5ef;
|
||||
}
|
||||
|
||||
// 表格input宽度
|
||||
.full-width-input .el-input__inner {
|
||||
// 表格input宽度,表格select宽度
|
||||
.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;
|
||||
}
|
||||
|
||||
87
src/auto-imports.d.ts
vendored
Normal file
87
src/auto-imports.d.ts
vendored
Normal file
@ -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')
|
||||
}
|
||||
46
src/components/SelectTable/YQSelectTable/index.vue
Normal file
46
src/components/SelectTable/YQSelectTable/index.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -7,6 +7,7 @@ export default function createAutoImport() {
|
||||
'vue-router',
|
||||
'pinia'
|
||||
],
|
||||
dts: false
|
||||
// 2. 生成类型声明文件（解决TS类型报错）
|
||||
dts: 'src/auto-imports.d.ts', // 生成的.d.ts文件路径（会自动创建）
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user