fashion-ssr-vue3/components/business/account/settings/profile.vue

<!-- @format -->

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { getCategoryListApi, getDictListApi } from '~/api/model/common'
import { getUserProfileApi, updateUserInfoApi } from '~/api/model/user'

const params = ref<any>({
  email: '',
  country_dictText: '',
  companyType_dictText: '',
  companyName: '',
  companyAddress: '',
  website: '',
  annualPurchaseAmount: undefined,
  firstName: '',
  lastName: '',
  mobile: '',
  mobileAreaCode: '+86',
})

const countryList = ref()
const categoryList = ref()
const mobileAreaCodeList = ref()
const businessTypesList = ref()
const annualPurchaseAmountList = ref()
const companySizeList = ref()

const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  email: [
    {
      required: true,
      message: 'Username must be filled in',
      trigger: 'blur',
    },
  ],
  country: [
    {
      required: true,
      message: 'Country must be selected',
      trigger: 'change',
    },
  ],
  companyName: [
    {
      required: true,
      message: 'CompanyName must be filled in',
      trigger: 'blur',
    },
  ],
  companyAddress: [
    {
      required: true,
      message: 'companyAddress must be filled in',
      trigger: 'blur',
    },
  ],

  companyType: [
    {
      required: true,
      message: 'CompanyType must be selected',
      trigger: 'change',
    },
  ],
  annualPurchaseAmount: [
    {
      required: true,
      message: 'annualPurchaseAmount must be filled in',
      trigger: 'blur',
    },
  ],
  companySize: [
    {
      required: true,
      message: 'CompanySize must be selected',
      trigger: 'blur',
    },
  ],
  firstName: [
    {
      required: true,
      message: 'firstName must be filled in',
      trigger: 'blur',
    },
  ],
  lastName: [
    {
      required: true,
      message: 'lastName must be filled in',
      trigger: 'blur',
    },
  ],
  mobile: [
    {
      required: true,
      message: 'mobile must be filled in',
      trigger: 'blur',
    },
  ],
  mobileAreaCode: [
    {
      required: true,
      message: 'mobileAreaCode must be filled in',
      trigger: 'blur',
    },
  ],
})
async function getMobileAreaCodeList() {
  const list = await getDictListApi('A064')
  mobileAreaCodeList.value = list
}
async function getCountryList() {
  const list = await getDictListApi('A070')
  countryList.value = list
}
async function getBusinessTypesList() {
  const list = await getDictListApi('A071')
  businessTypesList.value = list
}
async function getAnnualPurchaseAmountList() {
  const list = await getDictListApi('A072')
  annualPurchaseAmountList.value = list
}
async function getCompanySizeList() {
  const list = await getDictListApi('company_size')
  companySizeList.value = list
}
async function getCategoryList() {
  const list = await getCategoryListApi({
    all: false,
  })
  categoryList.value = list
}

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateUserInfoApi(params.value)
      ElMessage.success('Your updated profile has been submitted successfully')
    }
    else { console.log('error submit!', fields) }
  })
}
async function getUserProfile() {
  try {
    const data = await getUserProfileApi()
    params.value = {
      ...data,
      purchaseCategory: data.purchaseCategory.split(','),
    }
    console.log('params.value', params.value)
  }
  catch (error) {
    console.log(error)
  }
}

async function getData() {
  await getCountryList()
  await getCategoryList()
  await getBusinessTypesList()
  await getCompanySizeList()
  await getAnnualPurchaseAmountList()
  await getMobileAreaCodeList()
  await getUserProfile()
}
getData()
</script>

<template>
  <div class="w-500px ">
    <el-form
      ref="ruleFormRef"
      :model="params"
      :rules="rules"
      label-width="auto"
      size="default"
      status-icon
    >
      <el-form-item
        label="User Name"
        class="custom-form-item"
        prop="email"
      >
        <el-input
          v-model="params.email" :disabled="true"
          placeholder="Company name"
          class="h-50px"
        />
      </el-form-item>
      <el-form-item label="Country/Region" prop="country" class="custom-form-item">
        <!-- <el-select v-model="params.country" placeholder="Country">
          <el-option
            v-for="(item, index) in countryList"
            :key="index"
            class="!h-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-input
          v-model="params.country_dictText"
          placeholder="Country/Region"
          :disabled="true"
          class="h-50px"
        />
      </el-form-item>
      <el-form-item
        label="Company Type&Name"
        prop="companyType"
        class="custom-form-item flex "
      >
        <!-- <el-select v-model="params.companyType" placeholder="Business Types">
          <el-option
            v-for="(item, index) in businessTypesList"
            :key="index"
            class="!h-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <!-- <el-input
          v-model="params.companyName"
          placeholder="Company name"
          class="h-50px"
        /> -->
        <el-input
          v-model="params.companyType_dictText"
          placeholder="Company Types"
          :disabled="true"
          class="h-50px flex-grow-3 mr-10px !w-unset"
        />
        <el-input
          v-model="params.companyName"
          placeholder="company name"
          :disabled="true"
          class="h-50px flex-grow-2 !w-unset"
        />
      </el-form-item>
      <el-form-item
        label="Company Address"
        prop="companyAddress"
        class="custom-form-item"
      >
        <el-input
          v-model="params.companyAddress"
          type="textarea"
          placeholder="companyAddress"
          class="h-100px"
        />
      </el-form-item>
      <el-form-item
        label="Company Website"
        prop="website"
        class="custom-form-item"
      >
        <el-input
          v-model="params.website"
          placeholder="website"
          class="h-50px"
        />
      </el-form-item>
      <div class="flex">
        <el-form-item
          label="Name"
          prop="firstName"
          class="custom-form-item !w-unset flex-grow-3"
        >
          <el-input
            v-model="params.firstName"
            placeholder="firstName"
            class="h-50px"
          />
        </el-form-item>
        <el-form-item
          label=" "
          prop="lastName"
          class="custom-form-item  !w-unset flex-grow-1 ml-10px"
        >
          <el-input
            v-model="params.lastName"
            placeholder="lastName"
            class="h-50px flex-1"
          />
        </el-form-item>
      </div>
      <el-form-item
        label="Category"
        prop="purchaseCategory"
        class="custom-form-item"
      >
        <el-select v-model="params.purchaseCategory" placeholder="Category" multiple>
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.title"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="Annual sourcing budget"
        prop="annualPurchaseAmount"
        class="custom-form-item"
      >
        <el-select
          v-model="params.annualPurchaseAmount"
          placeholder="Annual sourcing budget"
        >
          <el-option
            v-for="(item, index) in annualPurchaseAmountList"
            :key="index"
            class="!h-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="company size"
        prop="companySize"
        class="custom-form-item"
      >
        <el-select
          v-model="params.companySize"
          placeholder="company size"
        >
          <el-option
            v-for="(item, index) in companySizeList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div class="flex">
        <el-form-item
          label="Mobile Number"
          class="custom-form-item"
          prop="mobile"
        >
          <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
            <template #prepend>
              <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
                <el-option
                  v-for="(item, index) in mobileAreaCodeList"
                  :key="index"
                  :value="item.value"
                  :label="`${item.value} ${item.label}`"
                >
                  {{ item.value }} {{ item.label }}
                </el-option>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
      </div>
      <el-form-item class="form-footer mt-25px">
        <el-button
          class="!bg-#C58C64 !text-#fff !ml-0 !w-100% !h-50px !text-18px !fw-500 !b-rd-6px"
          @click="submitForm(ruleFormRef)"
        >
          Save
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  width: 100%;
  margin-bottom: 22px;
  display: block !important;
  .el-select__wrapper {
    height: 50px !important;
  }
  .el-form-item__label-wrap {
    margin-left: unset !important;
    .el-form-item__label {
      margin-bottom: 5px;
      font-size: 16px !important;
      color: #5b463e !important;
    }
  }
.el-form-item__content{
  .el-textarea {
    .el-textarea__inner{
      height: 100px !important;
    }
  }
}
  .el-checkbox {
    .el-checkbox__input {
        &.is-checked {
            .el-checkbox__inner {
                color: #CC9879 !important;
                background-color: #CC9879 !important;
                border: 1px solid #CC9879 !important;
            }
        }

        .el-checkbox__inner {
            &:hover {
                border-color: #CC9879 !important;
            }
        }
    }

    &.is-checked {
        .el-checkbox__label {
            color: #CC9879 !important;
        }
    }
}
}
::v-deep(.form-footer) {
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
  }
}
</style>