芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/www/invoicer.pulsehost.co.uk/resources/scripts/admin/views/customers/Create.vue

<BaseBreadcrumb-item :title="pageTitle" to="#" active />
        </BaseBreadcrumb>

<template #actions>
          <div class="flex items-center justify-end">
            <BaseButton type="submit" :loading="isSaving" :disabled="isSaving">
              <template #left="slotProps">
                <BaseIcon name="SaveIcon" :class="slotProps.class" />
              </template>
              {{
                isEdit
                  ? $t('customers.update_customer')
                  : $t('customers.save_customer')
              }}
            </BaseButton>
          </div>
        </template>
      </BasePageHeader>

<BaseCard class="mt-5">
        
        <div class="grid grid-cols-5 gap-4 mb-8">
          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
            {{ $t('customers.basic_info') }}
          </h6>

<div class="grid grid-cols-5 gap-4 mb-8">
          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
            {{ $t('customers.portal_access') }}
          </h6>

<BaseInputGrid class="col-span-5 lg:col-span-4">
            <div class="md:col-span-2">
              <p class="text-sm text-gray-500">
                {{ $t('customers.portal_access_text') }}
              </p>

<div class="grid grid-cols-5 gap-4 mb-8">
          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
            {{ $t('customers.billing_address') }}
          </h6>

<div
          class="flex items-center justify-start mb-6 md:justify-end md:mb-0"
        >
          <div class="p-1">
            <BaseButton
              type="button"
              :content-loading="isFetchingInitialData"
              size="sm"
              variant="primary-outline"
              @click="customerStore.copyAddress(true)"
            >
              <template #left="slotProps">
                <BaseIcon
                  name="DocumentDuplicateIcon"
                  :class="slotProps.class"
                />
              </template>
              {{ $t('customers.copy_billing_address') }}
            </BaseButton>
          </div>
        </div>

<div
          v-if="customerStore.currentCustomer.shipping"
          class="grid grid-cols-5 gap-4 mb-8"
        >
          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
            {{ $t('customers.shipping_address') }}
          </h6>

<BaseDivider
          v-if="customFieldStore.customFields.length > 0"
          class="mb-5 md:mb-8"
        />

<div class="grid grid-cols-5 gap-2 mb-8">
          <h6
            v-if="customFieldStore.customFields.length > 0"
            class="col-span-5 text-lg font-semibold text-left lg:col-span-1"
          >
            {{ $t('settings.custom_fields.title') }}
          </h6>

const customerStore = useCustomerStore()
const customFieldStore = useCustomFieldStore()
const globalStore = useGlobalStore()
const companyStore = useCompanyStore()

const customFieldValidationScope = 'customFields'

const { t } = useI18n()

const router = useRouter()
const route = useRoute()

let isFetchingInitialData = ref(false)
let isShowPassword = ref(false)
let isShowConfirmPassword = ref(false)

let active = ref(false)
const isSaving = ref(false)

const isEdit = computed(() => route.name === 'customers.edit')

let isLoadingContent = computed(() => customerStore.isFetchingInitialSettings)

const pageTitle = computed(() =>
  isEdit.value ? t('customers.edit_customer') : t('customers.new_customer')
)

const rules = computed(() => {
  return {
    currentCustomer: {
      name: {
        required: helpers.withMessage(t('validation.required'), required),
        minLength: helpers.withMessage(
          t('validation.name_min_length', { count: 3 }),
          minLength(3)
        ),
      },
      prefix: {
        minLength: helpers.withMessage(
          t('validation.name_min_length', { count: 3 }),
          minLength(3)
        ),
      },
      currency_id: {
        required: helpers.withMessage(t('validation.required'), required),
      },

email: {
        required: helpers.withMessage(
          t('validation.required'),
          requiredIf(customerStore.currentCustomer.enable_portal == true)
        ),
        email: helpers.withMessage(t('validation.email_incorrect'), email),
      },
      password: {
        required: helpers.withMessage(
          t('validation.required'),
          requiredIf(
            customerStore.currentCustomer.enable_portal == true &&
              !customerStore.currentCustomer.password_added
          )
        ),
        minLength: helpers.withMessage(
          t('validation.password_min_length', { count: 8 }),
          minLength(8)
        ),
      },
      confirm_password: {
        sameAsPassword: helpers.withMessage(
          t('validation.password_incorrect'),
          sameAs(customerStore.currentCustomer.password)
        ),
      },

website: {
        url: helpers.withMessage(t('validation.invalid_url'), url),
      },
      billing: {
        address_street_1: {
          maxLength: helpers.withMessage(
            t('validation.address_maxlength', { count: 255 }),
            maxLength(255)
          ),
        },

address_street_2: {
          maxLength: helpers.withMessage(
            t('validation.address_maxlength', { count: 255 }),
            maxLength(255)
          ),
        },
      },

shipping: {
        address_street_1: {
          maxLength: helpers.withMessage(
            t('validation.address_maxlength', { count: 255 }),
            maxLength(255)
          ),
        },

address_street_2: {
          maxLength: helpers.withMessage(
            t('validation.address_maxlength', { count: 255 }),
            maxLength(255)
          ),
        },
      },
    },
  }
})

const getCustomerPortalUrl = computed(() => {
  return `${window.location.origin}/${companyStore.selectedCompany.slug}/customer/login`
})

const v$ = useVuelidate(rules, customerStore, {
  $scope: customFieldValidationScope,
})

customerStore.resetCurrentCustomer()

customerStore.fetchCustomerInitialSettings(isEdit.value)

async function submitCustomerData() {
  v$.value.$touch()

if (v$.value.$invalid) {
    return true
  }

isSaving.value = true

let data = {
    ...customerStore.currentCustomer,
  }

let response = null

try {
    const action = isEdit.value
      ? customerStore.updateCustomer
      : customerStore.addCustomer
    response = await action(data)
  } catch (err) {
    isSaving.value = false
    return
  }

router.push(`/admin/customers/${response.data.data.id}/view`)
}
</script>