组件ts优化

src/components/ElEditor.vue

@@ -7,16 +7,15 @@ defineOptions({
   name: 'ElEditor'
 })
 
-const props = defineProps({
-  modelValue: String,
-  mode: {
-    type: String,
-    default: 'simple'
-  },
-  height: {
-    type: String,
-    default: '400px'
-  }
+interface Props {
+  modelValue: string
+  mode?: string
+  height?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'simple',
+  height: '400px'
 })
 const emits = defineEmits(['update:modelValue', 'change'])
 

src/components/ProTable.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import router from '@/router'
 import { ElMessage, ElMessageBox, type DialogProps } from 'element-plus'
-import type { PropType } from 'vue'
 import type { AdvancedForm, BasicForm } from '@/types/form'
 import type { TableProps } from 'element-plus/es/components/table/src/table/defaults'
 
@@ -18,27 +17,18 @@ interface CustomTable {
 }
 type Table = Partial<Omit<TableProps<any>, 'data'> & CustomTable>
 
-const props = defineProps({
-  crud: {
-    required: true,
-    type: Object as PropType<CRUD>
-  },
-  pageSize: {
-    type: Number,
-    default: 10
-  },
-  selection: {
-    type: Boolean,
-    default: true
-  },
-  formConfig: {
-    type: Object as PropType<BasicForm | AdvancedForm>,
-    required: true
-  },
-  dialogConfig: {
-    type: Object as PropType<DialogProps>
-  },
-  tableConfig: Object as PropType<Table>
+interface Props {
+  crud: CRUD
+  pageSize?: number
+  selection?: boolean
+  formConfig: BasicForm | AdvancedForm
+  dialogConfig?: DialogProps
+  tableConfig?: Table
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pageSize: 10,
+  selection: true
 })
 
 // ============== 查询部分开始 ===============

src/components/form/AdvancedForm.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { AdvancedForm } from '@/types/form'
 
-const props = defineProps({
-  formConfig: {
-    required: true,
-    type: Object as PropType<AdvancedForm>
-  },
-  formData: {
-    required: true,
-    type: Object
-  }
-})
+interface Props {
+  formConfig: AdvancedForm
+  formData: any
+}
+const props = defineProps<Props>()
 
 const formData = computed(() => {
   if (props.formData.id) {

src/components/form/BasicForm.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { BasicForm } from '@/types/form'
 
-const props = defineProps({
-  formConfig: {
-    required: true,
-    type: Object as PropType<BasicForm>
-  },
-  formData: {
-    required: true,
-    type: Object
-  }
-})
+interface Props {
+  formConfig: BasicForm
+  formData: any
+}
+const props = defineProps<Props>()
 
 const formData = computed(() => {
   if (props.formData.id) {
@@ -24,11 +18,6 @@ const formData = computed(() => {
     return res
   }
 })
-
-// !props.formData.id &&
-//   props.formConfig?.formItems.forEach(item => {
-//     props.formData[item.name] = item.value
-//   })
 </script>
 
 <template>

src/components/form/DialogForm.vue

@@ -1,28 +1,18 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { BasicForm, AdvancedForm } from '@/types/form'
 import type { DialogProps } from 'element-plus'
-const props = defineProps({
-  modelValue: Boolean,
-  dialogConfig: Object as PropType<DialogProps>,
-  formConfig: {
-    required: true,
-    type: Object as PropType<BasicForm | AdvancedForm>
-  },
-  formData: {
-    required: true,
-    type: Object
-  },
-  create: {
-    required: true,
-    type: Function
-  },
-  update: {
-    required: true,
-    type: Function
-  },
-  advanced: Boolean
-})
+
+interface Props {
+  modelValue: boolean
+  dialogConfig?: DialogProps
+  formConfig: BasicForm | AdvancedForm
+  formData: any
+  create: Function
+  update: Function
+  advanced?: boolean
+}
+
+const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
 
 const formInitData = ref({})

src/components/form/FormComp.vue

@@ -1,17 +1,13 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { BasicFormItem } from '@/types/form'
 
-const props = defineProps({
-  modelValue: {
-    required: true
-  },
-  item: {
-    required: true,
-    type: Object as PropType<BasicFormItem>
-  }
-})
+interface Props {
+  modelValue: any
+  item: BasicFormItem
+}
+
+const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
 
 const modelValue = computed({

src/components/form/ProForm.vue

@@ -1,27 +1,16 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { BasicForm, AdvancedForm } from '@/types/form'
 import { ElMessage } from 'element-plus'
 
-const props = defineProps({
-  formData: {
-    required: true,
-    type: Object
-  },
-  formConfig: {
-    required: true,
-    type: Object as PropType<BasicForm | AdvancedForm>
-  },
-  create: {
-    required: true,
-    type: Function
-  },
-  update: {
-    required: true,
-    type: Function
-  },
-  advanced: Boolean
-})
+interface Props {
+  formConfig: BasicForm | AdvancedForm
+  formData: any
+  create: Function
+  update: Function
+  advanced?: boolean
+}
+
+const props = defineProps<Props>()
 
 const formProps: any = ref({
   labelWidth: '100px',