change: 代码优化. 无用逻辑移除. 繁琐代码改写. props类型断言优化.

src/components/ImageUpload.vue

@@ -4,7 +4,7 @@
       v-model="imageList"
       draggable=".image-item"
       class="flex items-start flex-wrap"
-      @end="end"
+      @end="updateList"
     >
       <div
         v-for="(item, index) in imageList"
@@ -87,55 +87,39 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'ImageUpload',
-})
-</script>
 <script lang="ts" setup>
-import { defineComponent, ref, defineProps, defineEmits, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { ElMessage, ElUpload, ElIcon, ElProgress, ElDialog } from 'element-plus'
 import { Plus, Delete, ZoomIn } from '@element-plus/icons-vue'
 import { cloneDeep } from 'lodash'
 import common from '@/api/common'
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => [],
-  },
-  max: {
-    type: Number,
-    default: 16,
-  },
-  disablePreview: {
-    type: Boolean,
-    default: false,
-  },
-  width: {
-    type: String,
-    default: '150px',
-  },
-  height: {
-    type: String,
-    default: '150px',
-  },
+defineComponent({
+  name: 'ImageUpload',
 })
+const {
+  max = 16,
+  list = [],
+  disablePreview = false,
+  width = '150px',
+  height = '150px',
+} = defineProps<{
+  list: any[]
+  max?: number
+  disablePreview?: boolean
+  width?: string
+  height?: string
+}>()
 const $emit = defineEmits(['update:list'])
 
 // 组件内部数据.
 const imageList = ref([] as any[])
 const loading = ref(false)
 const uploadPercent = ref(0)
-const imageDialogVisible = ref(false)
-// 预览大图的url, 每次点击都会更新
-const imageUrl = ref('')
-
 watch(
-  () => props.list,
-  () => (imageList.value = cloneDeep(props.list)),
+  () => list,
+  () => (imageList.value = cloneDeep(list)),
 )
-
 const handleUpload = (file: any, fileList: any[]) => {
   if (file.status === 'ready') {
     loading.value = true
@@ -181,18 +165,19 @@ const handleRemove = (index: number) => {
   imageList.value.splice(index, 1)
   updateList()
 }
+const imageDialogVisible = ref(false)
+// 预览大图的url, 每次点击都会更新
+const imageUrl = ref('')
 const handlePictureCardPreview = (file: any) => {
   imageUrl.value = file.url
   imageDialogVisible.value = true
 }
+
 // 每次更新imageList后手动更新父组件的数据, 不能用watch自动更新, 因为同时要watch prop值更新iamgeList, 同时watch会死循环.
 // 直接把prop数据绑定到dragable 和 el-upload的话vue和eslint会报错, 也可能造成调试困难
 const updateList = () => {
   $emit('update:list', cloneDeep(imageList.value))
 }
-const end = () => {
-  updateList()
-}
 </script>
 
 <style lang="scss" scoped>

src/pages/indent-manage/indent/components/calcPrice/components/dialogDTD.vue

@@ -60,7 +60,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, ref, watch, defineProps, defineEmits } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import {
   ElButton,
   ElForm,
@@ -75,18 +75,10 @@ import { $t } from '@/i18n/index'
 defineComponent({
   name: 'ComponentDialogCalcPriceSetDTD',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  formData: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-})
+const { visible = false, formData = {} } = defineProps<{
+  visible: boolean
+  formData: object
+}>()
 const $emit = defineEmits(['update:visible', 'save'])
 const show = ref(false)
 const form = ref({} as any)
@@ -109,10 +101,10 @@ const optionList = [
   },
 ]
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
-    if (show.value) form.value = cloneDeep(props.formData)
+    show.value = visible
+    if (show.value) form.value = cloneDeep(formData)
   },
 )
 

src/pages/indent-manage/indent/components/calcPrice/components/dialogLCL.vue

@@ -67,27 +67,22 @@ import { $t } from '@/i18n/index'
 defineComponent({
   name: 'ComponentDialogCalcPriceSetLCL',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  formData: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-})
+const {
+  visible = false,
+  formData = {} as any,
+}  = defineProps<{
+  visible: boolean
+  formData: object
+}>()
 const $emit = defineEmits(['update:visible', 'save'])
 const show = ref(false)
 const form = ref({ unit_lcl: 0 } as any)
 
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
-    if (show.value) form.value = cloneDeep(props.formData)
+    show.value = visible
+    if (show.value) form.value = cloneDeep(formData)
   },
 )
 watch(

src/pages/indent-manage/indent/components/calcPrice/components/step1.vue

@@ -9,7 +9,7 @@
         style="width: 150px; min-width: 150px; margin-right: 8px"
       >
         <el-carousel-item
-          v-for="item in imageList as any[]"
+          v-for="item in imageList"
           :key="item"
         >
           <div class="product-image flex justify-center items-center">
@@ -119,7 +119,7 @@
       <div class="flex items-center tr">
         <div class="td column-label">箱数</div>
         <div
-          v-for="(value, index) in computedBoxNumber as any[]"
+          v-for="(value, index) in computedBoxNumber"
           :key="index"
           class="td"
         >
@@ -180,7 +180,7 @@
           </el-tooltip>
         </div>
         <div
-          v-for="(value, index) in computedTotalWeight as any[]"
+          v-for="(value, index) in computedTotalWeight"
           :key="index"
           class="td"
         >
@@ -198,7 +198,7 @@
           </el-tooltip>
         </div>
         <div
-          v-for="(value, index) in computedTotalWeightPlus as any[]"
+          v-for="(value, index) in computedTotalWeightPlus"
           :key="index"
           class="td"
         >
@@ -209,7 +209,7 @@
       <div class="flex items-center tr">
         <div class="td column-label">总体积(CBM)</div>
         <div
-          v-for="(value, index) in computedTotalBulk as any[]"
+          v-for="(value, index) in computedTotalBulk"
           :key="index"
           class="td"
         >
@@ -222,42 +222,27 @@
 
 <script lang="ts" setup>
 import { defineComponent } from 'vue'
-import {
-  ElTooltip,
-  ElCarousel,
-  ElCarouselItem,
-} from 'element-plus'
+import { ElTooltip, ElCarousel, ElCarouselItem } from 'element-plus'
 import { $t } from '@/i18n/index'
 import commonTitle from './title.vue'
 defineComponent({
   name: 'ComponentStep1',
 })
-defineProps({
-  imageList: {
-    type: Array,
-    default: () => [],
-  },
-  productInfo: {
-    type: Object,
-    default: () => {},
-  },
-  computedTotalWeightPlus: {
-    type: Array,
-    default: () => [],
-  },
-  computedTotalWeight: {
-    type: Array,
-    default: () => [],
-  },
-  computedBoxNumber: {
-    type: Array,
-    default: () => [],
-  },
-  computedTotalBulk: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  imageList = [],
+  productInfo = {} as any,
+  computedTotalWeightPlus = [],
+  computedTotalWeight = [],
+  computedBoxNumber = [],
+  computedTotalBulk = [],
+} = defineProps<{
+  imageList: any[]
+  productInfo: {}
+  computedTotalWeightPlus: any[]
+  computedTotalWeight: any[]
+  computedBoxNumber: any[]
+  computedTotalBulk: any[]
+}>()
 const prefix = 'order.indent_calc.'
 </script>
 

src/pages/indent-manage/indent/components/calcPrice/components/title.vue

@@ -6,14 +6,9 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, defineProps } from 'vue'
+import { defineComponent } from 'vue'
 defineComponent({ name: 'CompCalcTitleTitle' })
-defineProps({
-  title: {
-    default: '',
-    type: String,
-  },
-})
+defineProps<{ title: string }>()
 </script>
 
 <style lang="scss" scoped>

src/pages/indent-manage/indent/components/calcPrice/index.vue

@@ -496,11 +496,10 @@ import {
   ref,
   watch,
   computed,
-  defineProps,
-  defineEmits,
   nextTick,
   useTemplateRef,
   ShallowRef,
+  inject,
 } from 'vue'
 import {
   ElButton,
@@ -532,29 +531,21 @@ import { $t } from '@/i18n/index'
 defineComponent({
   name: 'ComponentAaaa',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  dataForCalc: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  creatorOptions: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  visible = false,
+  dataForCalc = {} as any,
+  creatorOptions = [],
+} = defineProps<{
+  visible: boolean
+  dataForCalc: object
+  creatorOptions: any[]
+}>()
 const $emit = defineEmits([
   'update:visible',
   'save-price-calc',
   'save-price-calc',
 ])
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const prefix = 'order.indent_calc.'
 const loading = ref(false)
 const componentFreightVisible = ref(false)
@@ -622,9 +613,9 @@ const lclVisible = ref(false)
 
 const show = ref(false)
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     resetData()
     if (show.value) {
       getCalcParam()
@@ -903,10 +894,10 @@ let computedCityFreightParams = computed(() => {
 // })
 
 let initProductInfo = () => {
-  const temp = cloneDeep(props.dataForCalc)
+  const temp = cloneDeep(dataForCalc)
 
   if (Array.isArray(temp.product_image) && temp.product_image.length) {
-    imageList.value = temp.product_image.map((img) => {
+    imageList.value = temp.product_image.map((img: string) => {
       return $mediaRegExp.test(img)
         ? img
         : import.meta.env.VITE_APP_OSS_PREFIX + img
@@ -1626,7 +1617,7 @@ let checkForm = (type = 1) => {
   })
   const p = Object.assign(
     {
-      id: props.dataForCalc.id || '',
+      id: dataForCalc.id || '',
     },
     cloneDeep(formData.value),
   )

src/pages/indent-manage/indent/components/exportForm.vue

@@ -20,7 +20,7 @@
             filterable
           >
             <el-option
-              v-for="item in creatorOptions as any[]"
+              v-for="item in creatorOptions"
               :key="item.value"
               :label="item.label"
               :value="item.value"
@@ -28,7 +28,7 @@
           </el-select>
         </el-form-item>
         <el-form-item
-          v-for="item in step3FormList as any[]"
+          v-for="item in step3FormList"
           :key="item.tabLabel"
           :label="item.tabLabel"
         >
@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, defineProps, defineEmits, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import {
   ElButton,
   ElForm,
@@ -102,33 +102,26 @@ import cloneDeep from 'lodash.clonedeep'
 defineComponent({
   name: 'ComponentIndentExportForm',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  formData: {
-    type: Object,
-    default: () => {},
-  },
-  creatorOptions: {
-    type: Array,
-    default: () => [],
-  },
-  step3FormList: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  visible = false,
+  formData = {} as any,
+  creatorOptions = [],
+  step3FormList = [],
+} = defineProps<{
+  visible: boolean
+  formData: object
+  creatorOptions: any[]
+  step3FormList: any[]
+}>()
 const $emit = defineEmits(['update:visible', 'save'])
 const show = ref(false)
 const form = ref({} as any)
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     if (show.value) {
-      form.value = cloneDeep(props.formData)
+      form.value = cloneDeep(formData)
     }
   },
 )

src/pages/indent-manage/indent/components/exportQuota.vue

@@ -104,7 +104,7 @@
           <div class="th">Total(ex-GST)($)</div>
         </div>
         <div
-          v-for="(row, index) in step3FormList as any[]"
+          v-for="(row, index) in step3FormList"
           :key="index"
           class="flex items-center tr"
         >
@@ -163,48 +163,28 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, defineProps, computed } from 'vue'
-// import { ElButton, ElInput, ElTree, ElDialog, ElPagination } from 'element-plus'
+import { defineComponent, computed } from 'vue'
 import jspdf from 'jspdf'
 import html2canvas from 'html2canvas'
 import dayjs from 'dayjs'
 defineComponent({
   name: 'ComponentExportQuota',
 })
-const props = defineProps({
-  city: {
-    type: String,
-    default: '',
-  },
-  productInfo: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  exportForm: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  step2FormList: {
-    type: Array,
-    default: () => {
-      return []
-    },
-  },
-  step3FormList: {
-    type: Array,
-    default: () => {
-      return []
-    },
-  },
-  creatorOptions: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  city = '',
+  productInfo = {} as any,
+  exportForm = {} as any,
+  step2FormList = [],
+  step3FormList = [],
+  creatorOptions = [],
+} = defineProps<{
+  city: string
+  productInfo: object
+  exportForm: object
+  step2FormList: any[]
+  step3FormList: any[]
+  creatorOptions: any[]
+}>()
 const city_short = {
   SYD: 'Sydney',
   Melb: 'Melbourne',
@@ -224,7 +204,7 @@ const getFreightType = (row: any) => {
     result = 'Air'
   }
   if (row.typeNumber === 3) {
-    const temp: any[] = props.step2FormList.filter(
+    const temp: any[] = step2FormList.filter(
       (i: any) => i.number === row.number,
     )
     if (
@@ -324,7 +304,7 @@ const generatePDF = () => {
     }
 
     const fileName =
-      `${props.productInfo.product_name}-Quote-` + dayjs().format('YYYYMMDD')
+      `${productInfo.product_name}-Quote-` + dayjs().format('YYYYMMDD')
     pdf.setProperties({
       title: fileName,
     })
@@ -361,27 +341,27 @@ const shouldSplit = (
 
 const mainPicture = computed(() => {
   if (
-    Array.isArray(props.productInfo.product_image) &&
-    props.productInfo.product_image.length
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length
   ) {
-    return props.productInfo.product_image[0]
+    return productInfo.product_image[0]
   }
   return ''
 })
 const otherPicture = computed(() => {
   if (
-    Array.isArray(props.productInfo.product_image) &&
-    props.productInfo.product_image.length > 1
+    Array.isArray(productInfo.product_image) &&
+    productInfo.product_image.length > 1
   ) {
-    return props.productInfo.product_image.slice(1)
+    return productInfo.product_image.slice(1)
   }
   return []
 })
 const computedCreator = computed(() => {
   let result = ''
-  if (props.creatorOptions.length) {
-    const a: any[] = props.creatorOptions.filter(
-      (i: any) => i.value === props.exportForm.saleperson,
+  if (creatorOptions.length) {
+    const a: any[] = creatorOptions.filter(
+      (i: any) => i.value === exportForm.saleperson,
     )
     if (a.length) result = a[0].label
   }

src/pages/indent-manage/indent/components/freight.vue

@@ -379,14 +379,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  defineComponent,
-  ref,
-  defineProps,
-  defineEmits,
-  watch,
-  computed,
-} from 'vue'
+import { defineComponent, ref, watch, computed } from 'vue'
 import {
   ElTabPane,
   ElTabs,
@@ -407,12 +400,7 @@ import { getSettingDetail, saveSetting } from '@/api/indent'
 defineComponent({
   name: 'EditInfo',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-})
+const { visible = false } = defineProps<{ visible: boolean }>()
 const $emit = defineEmits(['update:visible', 'save'])
 
 const activeTab = ref('1')
@@ -500,9 +488,9 @@ const getDetail = () => {
 }
 
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     if (show.value) getDetail()
   },
 )

src/pages/indent-manage/indent/components/info.vue

@@ -42,7 +42,7 @@
                 {{ $t(prefix + 'label_company_name') }}
               </div>
               <el-form
-                v-for="(item, index) in forms as any[]"
+                v-for="(item, index) in forms"
                 :ref="($e) => getFormRef($e, `vendor_id_${index}`)"
                 :key="index"
                 :show-message="false"
@@ -1012,15 +1012,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  defineComponent,
-  ref,
-  defineProps,
-  defineEmits,
-  watch,
-  computed,
-  nextTick,
-} from 'vue'
+import { defineComponent, ref, watch, computed, nextTick, inject } from 'vue'
 import {
   ElButton,
   ElForm,
@@ -1045,29 +1037,18 @@ defineComponent({
   name: 'EditInfo',
 })
 const $emit = defineEmits(['update:visible', 'create'])
-const props = defineProps({
-  visible: {
-    type: Number,
-    default: 0,
-  },
-  alreadyHasIndentCount: {
-    type: Number,
-    default: 0,
-  },
-  parentId: {
-    type: [String, Number],
-    default: () => {
-      return 0
-    },
-  },
-  dataForEdit: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-})
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const {
+  visible = 0,
+  alreadyHasIndentCount = 0,
+  parentId = 0,
+  dataForEdit = {} as any,
+} = defineProps<{
+  visible: number
+  alreadyHasIndentCount?: number
+  parentId: number | string
+  dataForEdit: object
+}>()
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const prefix = 'order.indent_edit_info.'
 const show = ref(false)
 const costOptions = [
@@ -1148,7 +1129,7 @@ const formDemo = {
 }
 const forms = ref([] as any[])
 const canAddForm = computed(() => {
-  return 100 - props.alreadyHasIndentCount - forms.value.length > 0
+  return 100 - alreadyHasIndentCount - forms.value.length > 0
 })
 const productImageList = ref([] as any[][])
 const vendorList = ref([] as any[][])
@@ -1212,9 +1193,9 @@ const numberTableAddRow = function (index: number) {
 // 仅编辑报价信息时需要初始化
 const initData = function () {
   // 查询供应商候选列表, 不然下拉框无数据匹配, 下拉框界面上会显示成供应商的id
-  queryVenderList(props.dataForEdit.vendor_name, 0)
+  queryVenderList(dataForEdit.vendor_name, 0)
 
-  const temp = cloneDeep(props.dataForEdit)
+  const temp = cloneDeep(dataForEdit)
 
   productImageList.value.push([])
   if (Array.isArray(temp.product_image) && temp.product_image.length) {
@@ -1285,25 +1266,25 @@ const deleteForm = function (index: number) {
 const addFormColumn = function () {
   if (canAddForm.value) {
     forms.value.push(
-      Object.assign(cloneDeep(formDemo), { parent_id: props.parentId }),
+      Object.assign(cloneDeep(formDemo), { parent_id: parentId }),
     )
     productImageList.value.push([])
     vendorList.value.push([])
   }
 }
 watch(
-  () => props.visible,
+  () => visible,
   () => {
     forms.value = []
     productImageList.value = []
     vendorList.value = []
 
-    if (props.visible > 1) {
+    if (visible > 1) {
       initData()
-    } else if (props.visible > 0) {
+    } else if (visible > 0) {
       addFormColumn()
     }
-    show.value = props.visible > 0
+    show.value = visible > 0
   },
 )
 const queryVenderList = function (keywords: string, index: number) {
@@ -1346,8 +1327,8 @@ const createQuoteFunc = function () {
   const params = {
     file: '', // 疑似永远为空
   } as any
-  if (props.parentId) {
-    params.parent_id = props.parentId
+  if (parentId) {
+    params.parent_id = parentId
   }
 
   let temp = cloneDeep(forms.value)

src/pages/indent-manage/indent/components/skuApply.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, defineProps, defineEmits, watch } from 'vue'
+import { defineComponent, ref, watch, inject } from 'vue'
 import {
   ElButton,
   ElInput,
@@ -83,12 +83,7 @@ const show = ref(false)
 const loading = ref(false)
 const imageList = ref([])
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-})
+const { visible = false } = defineProps<{ visible: boolean }>()
 const $emit = defineEmits(['update:visible', 'apply'])
 
 const rules = {
@@ -108,9 +103,9 @@ const rules = {
   ],
 }
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     resetData()
   },
 )
@@ -120,8 +115,7 @@ const form = ref({
   images: '',
 })
 const formRef = ref()
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 
 const checkForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return

src/pages/indent-manage/indent/components/skuSelect.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, defineProps, defineEmits, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import { ElButton, ElInput, ElTree, ElDialog, ElPagination } from 'element-plus'
 
 import { getCategoryTree, getSkuList } from '@/api/indent.js'
@@ -109,12 +109,7 @@ import skuApply from './skuApply.vue'
 defineComponent({
   name: 'ComponentSkuSelect',
 })
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-})
+const { visible = false } = defineProps<{ visible: boolean }>()
 
 const $emit = defineEmits(['update:visible', 'select'])
 const defaultProps = {
@@ -208,9 +203,9 @@ const getSku = () => {
     })
 }
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     resetData()
     if (show.value) {
       getSku()

src/pages/indent-manage/indent/edit.vue

@@ -79,7 +79,7 @@
             >
               <el-select v-model="form.require_material">
                 <el-option
-                  v-for="item in materialOptions as any[]"
+                  v-for="item in materialOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -104,7 +104,7 @@
             >
               <el-select v-model="form.product_category">
                 <el-option
-                  v-for="item in categoryOptions as any[]"
+                  v-for="item in categoryOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -129,7 +129,7 @@
             >
               <el-select v-model="form.print_method">
                 <el-option
-                  v-for="item in printOptions as any[]"
+                  v-for="item in printOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -278,10 +278,9 @@
 import {
   defineComponent,
   ref,
-  defineProps,
-  defineEmits,
   watch,
   nextTick,
+  inject,
 } from 'vue'
 import {
   ElButton,
@@ -295,7 +294,6 @@ import {
   ElDialog,
   ElNotification,
   ElDatePicker,
-
 } from 'element-plus'
 import type { FormInstance } from 'element-plus'
 import cloneDeep from 'lodash.clonedeep'
@@ -309,46 +307,35 @@ import { getCustomList, createIndent } from '@/api/indent'
 defineComponent({
   name: 'EditIndent',
 })
-const props = defineProps({
-  visible: {
-    type: Number,
-    default: 0,
-  },
+const {
+  visible = 0,
+  quotaData = {} as any,
+  indentData = {} as any,
+  categoryOptions = [],
+  printOptions = [],
+  materialOptions = [],
+} = defineProps<{
+  visible: number
   // 引用数据. 没有拼错, 不是quote询价信息列表. 这个数据是‘引用’业务克隆出来的, 虽然最终也会赋值给quoteList
-  quotaData: {
-    type: Object,
-    default: () => {},
-  },
-  categoryOptions: {
-    type: Array,
-    default: () => [],
-  },
-  printOptions: {
-    type: Array,
-    default: () => [],
-  },
-  materialOptions: {
-    type: Array,
-    default: () => [],
-  },
-  indentData: {
-    type: Object,
-    default: () => {},
-  },
-})
+  quotaData: object
+  indentData: object
+  categoryOptions: any[]
+  printOptions: any[]
+  materialOptions: any[]
+}>()
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible > 0
-    if (props.visible > 0) {
+    show.value = visible > 0
+    if (visible > 0) {
       resetData()
     }
-    if (props.visible === 1 && props.quotaData?.content?.length) {
-      quotaCreated(props.quotaData)
+    if (visible === 1 && quotaData?.content?.length) {
+      quotaCreated(quotaData)
     }
-    if (props.visible === 2) {
+    if (visible === 2) {
       // 编辑. 初始化传进来的数据
-      const temp = cloneDeep(props.indentData)
+      const temp = cloneDeep(indentData)
       if (temp.due_date) {
         temp.due_date = dayjs(temp.due_date * 1000).format('YYYY-MM-DD')
       } else {
@@ -535,8 +522,7 @@ const addInfo = () => {
   infoVisible.value = 1
 }
 
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const indentForm = ref<FormInstance>()
 const checkForm = (
   formEl: FormInstance | undefined,

src/pages/indent-manage/indent/list.vue

@@ -389,7 +389,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, ref, computed, watch } from 'vue'
+import { defineComponent, ref, computed, watch, inject } from 'vue'
 import {
   ElButton,
   ElForm,
@@ -423,8 +423,7 @@ import calcPrice from './components/calcPrice/index.vue'
 defineComponent({
   name: 'PageIndentList',
 })
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const prefix = 'order.indent.'
 const form = ref({
   product_name: '',
@@ -568,7 +567,7 @@ const stateOptions = [
     value: '1',
   },
 ]
-const mainTableConfig = [
+const mainTableConfig: any[] = [
   {
     type: 'checkbox',
     field: 'checked',
@@ -610,8 +609,8 @@ const mainTableConfig = [
     field: 'create_time',
     width: '120',
   },
-] as any[]
-const subTableConfig = [
+]
+const subTableConfig: any = [
   {
     type: 'checkbox',
     field: 'checked',
@@ -657,7 +656,7 @@ const subTableConfig = [
     field: 'update_time',
     width: '115',
   },
-] as any[]
+]
 const componentEditVisible = ref(0) // 1 新增, 2编辑. 0关闭
 const componentFreightVisible = ref(false) // 设置运费参数
 const componentEditInfoVisible = ref(0) // 编辑报价信息

src/pages/indent-manage/index.vue

@@ -1,13 +1,12 @@
 <template>
   <router-view class="bg-white" />
 </template>
-<script lang="ts">
-export default defineComponent({
+<script lang="ts" setup>
+import { defineComponent, provide } from 'vue'
+defineComponent({
   name: 'IndentManageIndex',
 })
-</script>
-<script lang="ts" setup>
-import { defineComponent } from 'vue'
+provide('mediaRegExp', /^(https?:)?\/\/.+(.com.au\/|.com\/)/)
 </script>
 <style>
 .bg-white {

src/pages/indent-manage/product/category/edit.vue

@@ -66,14 +66,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  defineComponent,
-  ref,
-  watch,
-  computed,
-  defineProps,
-  defineEmits,
-} from 'vue'
+import { defineComponent, ref, watch, computed } from 'vue'
 import {
   ElDialog,
   ElButton,
@@ -91,24 +84,17 @@ defineComponent({
   name: 'ComponentEditIndentProductCategory',
 })
 
-const props = defineProps({
-  visible: {
-    type: Number,
-    default: 0,
-  },
-  categoryData: {
-    type: Object,
-    default: () => {
-      return {
-        category_id: 0,
-      }
-    },
-  },
-  categoryList: {
-    type: Array,
-    default: () => [],
+const {
+  visible = 0,
+  categoryData = {
+    category_id: 0,
   },
-})
+  categoryList = [],
+} = defineProps<{
+  visible: number
+  categoryData: any
+  categoryList: any[]
+}>()
 const $emit = defineEmits(['update:visible'])
 const prefix = 'order.category.'
 let show = ref(false)
@@ -128,13 +114,13 @@ const rules = {
 }
 
 const computedCategoryList = computed(() => {
-  return ([{ name: '顶级分类', id: 0 }] as any[]).concat(props.categoryList)
+  return ([{ name: '顶级分类', id: 0 }] as any[]).concat(categoryList)
 })
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible > 0
-    if (props.visible === 2) form.value = cloneDeep(props.categoryData)
+    show.value = visible > 0
+    if (visible === 2) form.value = cloneDeep(categoryData)
   },
 )
 
@@ -143,9 +129,9 @@ const checkForm = () => {
   formRef.value.validate((valid) => {
     if (valid) {
       const p = cloneDeep(form.value)
-      if (props.visible === 1) {
+      if (visible === 1) {
         create(p)
-      } else if (props.visible === 2) {
+      } else if (visible === 2) {
         edit(p)
       }
     }

src/pages/indent-manage/product/components/edit.vue

@@ -27,7 +27,7 @@
           <el-cascader
             v-model="form.category_id"
             style="width: 410px"
-            :options="categoryData as any[]"
+            :options="categoryData"
             :props="{ label: 'name', value: 'id' }"
           ></el-cascader>
         </el-form-item>
@@ -78,7 +78,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref, watch, nextTick } from 'vue'
+import { defineComponent, ref, watch, nextTick, inject } from 'vue'
 import {
   ElDialog,
   ElButton,
@@ -96,28 +96,20 @@ import imageUpload from '@/components/ImageUpload.vue'
 defineComponent({
   name: 'CompIndentEditProduct',
 })
-const props = defineProps({
-  visible: {
-    type: Number,
-    default: 0,
+const {
+  visible = 0,
+  productData = {
+    category_id: 0,
   },
-  productData: {
-    type: Object,
-    default: () => {
-      return {
-        category_id: 0,
-      }
-    },
-  },
-  categoryData: {
-    type: Array,
-    default: () => [],
-  },
-})
+  categoryData = [],
+} = defineProps<{
+  visible: number
+  productData: any
+  categoryData: any[]
+}>()
 const $emit = defineEmits(['update:visible'])
 
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const imageList = ref([] as any[])
 const show = ref(false)
 const prefix = 'order.product.'
@@ -161,7 +153,7 @@ const rules = {
 }
 
 watch(
-  () => props.visible,
+  () => visible,
   (value) => {
     show.value = value > 0
     if (value > 0) {
@@ -172,10 +164,10 @@ watch(
       form.value.status = 1
     } else if (value === 2) {
       const temp: any = {}
-      if (typeof props.productData.category_id === 'number') {
-        temp.category_id = getCategory(props.productData.category_id)
+      if (typeof productData.category_id === 'number') {
+        temp.category_id = getCategory(productData.category_id)
       }
-      form.value = Object.assign({}, cloneDeep(props.productData), temp)
+      form.value = Object.assign({}, cloneDeep(productData), temp)
 
       delete form.value.admin_name
       delete form.value.admin_id
@@ -197,7 +189,7 @@ watch(
 
 const getCategory = (id: number | string) => {
   const result: any[] = []
-  props.categoryData.forEach((first: any) => {
+  categoryData.forEach((first: any) => {
     if (first.id === id) {
       result.push(first.id)
       return
@@ -239,9 +231,9 @@ const checkForm = () => {
       // p.category_id = p.category_id.join(',')
       p.category_id = p.category_id[p.category_id.length - 1].toString()
 
-      if (props.visible === 1) {
+      if (visible === 1) {
         create(p)
-      } else if (props.visible === 2) {
+      } else if (visible === 2) {
         edit(p)
       }
     }

src/pages/indent-manage/product/components/examine.vue

@@ -47,7 +47,7 @@
           <el-cascader
             v-model="form.category_id"
             style="width: 410px"
-            :options="categoryData as any[]"
+            :options="categoryData"
             :props="{ label: 'name', value: 'id' }"
           ></el-cascader>
         </el-form-item>
@@ -90,7 +90,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, ref, watch, defineProps, defineEmits } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import {
   ElRadio,
   ElRadioGroup,
@@ -110,20 +110,15 @@ defineComponent({
   name: 'DialogExamineRecord',
 })
 const $emit = defineEmits(['update:visible'])
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  dataForExamine: {
-    type: Object,
-    default: () => {},
-  },
-  categoryData: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  visible = false,
+  dataForExamine = {} as any,
+  categoryData = [],
+} = defineProps<{
+  visible: boolean
+  dataForExamine: object
+  categoryData: any[]
+}>()
 
 const prefix = 'order.product.'
 let show = ref(false)
@@ -161,17 +156,17 @@ const rules = {
 }
 
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     if (show.value) {
       const temp: any = {
         feedback: '',
       }
-      if (typeof props.dataForExamine.category_id === 'number') {
-        temp.category_id = getCategory(props.dataForExamine.category_id)
+      if (typeof dataForExamine.category_id === 'number') {
+        temp.category_id = getCategory(dataForExamine.category_id)
       }
-      form.value = Object.assign({}, cloneDeep(props.dataForExamine), temp)
+      form.value = Object.assign({}, cloneDeep(dataForExamine), temp)
       // eslint-disable-next-line
       if (form.value.status == 0) {
         //  未审核状态直接选 审核通过, 其他两种情况不管
@@ -187,7 +182,7 @@ watch(
 
 const getCategory = (id: number | string) => {
   const result: any[] = []
-  props.categoryData.forEach((first: any) => {
+  categoryData.forEach((first: any) => {
     if (first.id === id) {
       result.push(first.id)
       return

src/pages/indent-manage/product/components/record.vue

@@ -43,20 +43,15 @@ defineComponent({
   name: 'DialogExamineRecord',
 })
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  id: {
-    type: [String, Number],
-    default: '',
-  },
-  statusList: {
-    type: Array,
-    default: () => [],
-  },
-})
+const {
+  visible = false,
+  id = '',
+  statusList = [],
+} = defineProps<{
+  visible: boolean
+  id: number | string
+  statusList: any[]
+}>()
 const $emit = defineEmits(['update:visible'])
 
 let show = ref(false)
@@ -65,20 +60,20 @@ let record = ref([] as any[])
 const prefix = 'order.product.'
 
 watch(
-  () => props.visible,
+  () => visible,
   () => {
-    show.value = props.visible
+    show.value = visible
     if (show.value) getRecord
   },
 )
 
 const getStatusLabel = (value: any) => {
-  const temp: any[] = props.statusList.filter((i: any) => i.value === value)
+  const temp: any[] = statusList.filter((i: any) => i.value === value)
   return temp.length ? temp[0].label : '-'
 }
 const getRecord = () => {
   loading.value = true
-  getExamineRecord({ product_id: props.id })
+  getExamineRecord({ product_id: id })
     .then((res: any) => {
       if (res.code !== 1) {
         return

src/pages/indent-manage/product/list.vue

@@ -72,7 +72,7 @@
     >
       <el-table-column type="index"></el-table-column>
       <el-table-column
-        v-for="value in mainTableConfig as any[]"
+        v-for="value in mainTableConfig"
         :key="value.field"
         :align="value.align || 'center'"
         :width="value.width || ''"
@@ -171,7 +171,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, inject } from 'vue'
 import {
   ElButton,
   ElForm,
@@ -196,8 +196,7 @@ defineComponent({
   name: 'ComponentIndentProductList',
 })
 
-// 用来对oss的图片、视频等媒体数据的url进行匹配替换
-const $mediaRegExp = /^(https?:)?\/\/.+(.com.au\/|.com\/)/
+const $mediaRegExp = inject('mediaRegExp') as RegExp
 const prefix = 'order.product.'
 let componentEditVisible = ref(0) // 1 新增, 2编辑. 0关闭
 let componentRecordVisible = ref(false) // 审核记录
@@ -219,7 +218,7 @@ let pageForm = ref({
   limit: 20,
 })
 let list = ref([])
-const mainTableConfig = [
+const mainTableConfig: any[] = [
   {
     label: 'order.product.label_img',
     type: 'imageList',