#页面优化

zhou zhou

4 天以前 1d95b134d85c3c60cf0e72739888c9741a0bb1ee

 rsf-design/src/views/basic-info/bas-station-area/modules/bas-station-area-dialog.vue

@@ -36,9 +36,7 @@
  import {
    buildBasStationAreaDialogModel,
    createBasStationAreaFormState,
    getBasStationAreaBinaryOptions,
    getBasStationAreaStatusOptions,
    getBasStationAreaTypeOptions
    getBasStationAreaStatusOptions
  } from '../basStationAreaPage.helpers'

  const props = defineProps({
@@ -48,7 +46,8 @@
    areaOptions: { type: Array, default: () => [] },
    crossZoneAreaOptions: { type: Array, default: () => [] },
    containerTypeOptions: { type: Array, default: () => [] },
    stationOptions: { type: Array, default: () => [] }
    stationOptions: { type: Array, default: () => [] },
    useStatusOptions: { type: Array, default: () => [] }
  })

  const emit = defineEmits(['update:visible', 'submit'])
@@ -58,19 +57,47 @@

  const isEdit = computed(() => props.dialogType === 'edit')
  const dialogTitle = computed(() =>
    t(isEdit.value ? 'pages.basicInfo.basStationArea.dialog.titleEdit' : 'pages.basicInfo.basStationArea.dialog.titleAdd')
    t(
      isEdit.value
        ? 'pages.basicInfo.basStationArea.dialog.titleEdit'
        : 'pages.basicInfo.basStationArea.dialog.titleAdd'
    )
  )

  const rules = computed(() => ({
    stationAreaName: [{ required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.stationAreaName'), trigger: 'blur' }],
    stationAreaId: [{ required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.stationAreaId'), trigger: 'blur' }],
    type: [{ required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.type'), trigger: 'change' }],
    area: [{ required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.area'), trigger: 'change' }],
    containerType: [{ type: 'array', required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.containerType'), trigger: 'change' }],
    stationAlias: [{ type: 'array', required: true, message: t('pages.basicInfo.basStationArea.dialog.validation.stationAlias'), trigger: 'change' }]
    stationAreaName: [
      {
        required: true,
        message: t('pages.basicInfo.basStationArea.dialog.validation.stationAreaName'),
        trigger: 'blur'
      }
    ],
    stationAreaId: [
      {
        required: true,
        message: t('pages.basicInfo.basStationArea.dialog.validation.stationAreaId'),
        trigger: 'blur'
      }
    ],
    containerType: [
      {
        type: 'array',
        required: true,
        message: t('pages.basicInfo.basStationArea.dialog.validation.containerType'),
        trigger: 'change'
      }
    ],
    stationAlias: [
      {
        type: 'array',
        required: true,
        message: t('pages.basicInfo.basStationArea.dialog.validation.stationAlias'),
        trigger: 'change'
      }
    ]
  }))

  const formItems = computed(() => [
  const baseLegacyItems = computed(() => [
    {
      label: t('pages.basicInfo.basStationArea.dialog.stationAreaName'),
      key: 'stationAreaName',
@@ -81,42 +108,12 @@
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.stationAreaId'),
      key: 'stationAreaId',
      type: 'input',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.placeholder.stationAreaId'),
        clearable: true
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.type'),
      key: 'type',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.type'),
        clearable: true,
        options: getBasStationAreaTypeOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.area'),
      key: 'area',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.area'),
        clearable: true,
        filterable: true,
        options: props.areaOptions || []
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.crossZoneArea'),
      label: t('pages.basicInfo.basStation.table.crossZoneArea'),
      key: 'crossZoneArea',
      type: 'select',
      span: 24,
      props: {
        placeholder: t('pages.basicInfo.basStationArea.placeholder.crossZoneArea'),
        placeholder: t('pages.basicInfo.basStation.table.crossZoneArea'),
        clearable: true,
        multiple: true,
        collapseTags: true,
@@ -125,17 +122,26 @@
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.containerType'),
      label: t('pages.basicInfo.basStation.table.containerTypes'),
      key: 'containerType',
      type: 'select',
      span: 24,
      props: {
        placeholder: t('pages.basicInfo.basStationArea.placeholder.containerType'),
        placeholder: t('pages.basicInfo.basStation.table.containerTypes'),
        clearable: true,
        multiple: true,
        collapseTags: true,
        filterable: true,
        options: props.containerTypeOptions || []
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.stationAreaId'),
      key: 'stationAreaId',
      type: 'input',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.placeholder.stationAreaId'),
        clearable: true
      }
    },
    {
@@ -151,101 +157,22 @@
        filterable: true,
        options: props.stationOptions || []
      }
    },
    }
  ])

  const createOnlyItems = computed(() => [
    {
      label: t('pages.basicInfo.basStationArea.dialog.inAble'),
      key: 'inAble',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.inAble'),
        clearable: true,
        options: getBasStationAreaBinaryOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.outAble'),
      key: 'outAble',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.outAble'),
        clearable: true,
        options: getBasStationAreaBinaryOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.isCrossZone'),
      key: 'isCrossZone',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.isCrossZone'),
        clearable: true,
        options: getBasStationAreaBinaryOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.isWcs'),
      key: 'isWcs',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.isWcs'),
        clearable: true,
        options: getBasStationAreaBinaryOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.autoTransfer'),
      key: 'autoTransfer',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.autoTransfer'),
        clearable: true,
        options: getBasStationAreaBinaryOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.useStatus'),
      key: 'useStatus',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.useStatus'),
        clearable: true,
        filterable: true,
        options: props.useStatusOptions || []
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.wcsData'),
      key: 'wcsData',
      type: 'input',
      span: 24,
      props: {
        type: 'textarea',
        rows: 3,
        placeholder: t('pages.basicInfo.basStationArea.placeholder.wcsData'),
        clearable: true
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.barcode'),
      key: 'barcode',
      type: 'input',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.placeholder.barcode'),
        clearable: true
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.status'),
      label: t('table.status'),
      key: 'status',
      type: 'select',
      props: {
        placeholder: t('pages.basicInfo.basStationArea.search.status'),
        placeholder: t('table.status'),
        clearable: true,
        options: getBasStationAreaStatusOptions(t)
      }
    },
    {
      label: t('pages.basicInfo.basStationArea.dialog.memo'),
      label: t('table.memo'),
      key: 'memo',
      type: 'input',
      span: 24,
@@ -257,6 +184,10 @@
      }
    }
  ])

  const formItems = computed(() =>
    isEdit.value ? baseLegacyItems.value : [...baseLegacyItems.value, ...createOnlyItems.value]
  )

  const resetForm = () => {
    Object.assign(form, createBasStationAreaFormState())
@@ -271,7 +202,25 @@
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      emit('submit', { ...form })
      const payload = isEdit.value
        ? {
            id: form.id,
            stationAreaName: form.stationAreaName,
            crossZoneArea: Array.isArray(form.crossZoneArea) ? [...form.crossZoneArea] : [],
            containerType: Array.isArray(form.containerType) ? [...form.containerType] : [],
            stationAreaId: form.stationAreaId,
            stationAlias: Array.isArray(form.stationAlias) ? [...form.stationAlias] : []
          }
        : {
            stationAreaName: form.stationAreaName,
            crossZoneArea: Array.isArray(form.crossZoneArea) ? [...form.crossZoneArea] : [],
            containerType: Array.isArray(form.containerType) ? [...form.containerType] : [],
            stationAreaId: form.stationAreaId,
            stationAlias: Array.isArray(form.stationAlias) ? [...form.stationAlias] : [],
            status: form.status,
            memo: form.memo
          }
      emit('submit', payload)
    } catch {
      return
    }