Compare commits
2 Commits
974730d660
...
ace2d675c3
| Author | SHA1 | Date | |
|---|---|---|---|
| ace2d675c3 | |||
| 823dc27462 |
84
f/web-kboss/src/utils/consultDict.js
Normal file
84
f/web-kboss/src/utils/consultDict.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
export function isEnglishLocale(i18n) {
|
||||||
|
return !!(i18n && i18n.locale === 'en-US')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDictLabel(item, isEn) {
|
||||||
|
if (!item) return ''
|
||||||
|
if (isEn) {
|
||||||
|
return item.dict_value_en || item.dict_value_zh || item.dict_value || ''
|
||||||
|
}
|
||||||
|
return item.dict_value_zh || item.dict_value || item.dict_value_en || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export function extractConsultOptionList(res) {
|
||||||
|
if (res && Array.isArray(res.data)) return res.data
|
||||||
|
if (res && res.data && Array.isArray(res.data.data)) return res.data.data
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
export function normalizeDictOptions(list, type) {
|
||||||
|
return list
|
||||||
|
.filter(item => item && item.dict_type === type)
|
||||||
|
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
||||||
|
.map(item => ({
|
||||||
|
id: String(item.dict_key),
|
||||||
|
nameZh: item.dict_value_zh || item.dict_value || '',
|
||||||
|
nameEn: item.dict_value_en || item.dict_value_zh || item.dict_value || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseDirectionParts(label, isEn) {
|
||||||
|
if (!label) {
|
||||||
|
return { title: '', desc: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = String(label)
|
||||||
|
if (isEn) {
|
||||||
|
const match = text.match(/^(.+?)\s*\((.+)\)\s*$/)
|
||||||
|
return match
|
||||||
|
? { title: match[1].trim(), desc: match[2].trim() }
|
||||||
|
: { title: text, desc: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = text.match(/^(.+?)((.+?))$/)
|
||||||
|
return match
|
||||||
|
? { title: match[1].trim(), desc: match[2].trim() }
|
||||||
|
: { title: text, desc: '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function normalizeDirectionOptions(list) {
|
||||||
|
return list
|
||||||
|
.filter(item => item && item.dict_type === 'direction')
|
||||||
|
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
||||||
|
.map(item => {
|
||||||
|
const nameZh = item.dict_value_zh || item.dict_value || ''
|
||||||
|
const nameEn = item.dict_value_en || nameZh
|
||||||
|
const parts = parseDirectionParts(nameZh, false)
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: String(item.dict_key),
|
||||||
|
nameZh,
|
||||||
|
nameEn,
|
||||||
|
titleZh: parts.title,
|
||||||
|
descZh: parts.desc,
|
||||||
|
titleEn: parseDirectionParts(nameEn, true).title,
|
||||||
|
descEn: parseDirectionParts(nameEn, true).desc
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function localizeDictOptions(options, isEn) {
|
||||||
|
return (options || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
name: isEn ? item.nameEn : item.nameZh
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function localizeDirectionOptions(options, isEn) {
|
||||||
|
return (options || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
name: isEn ? item.nameEn : item.nameZh,
|
||||||
|
title: isEn ? item.titleEn : item.titleZh,
|
||||||
|
desc: isEn ? item.descEn : item.descZh
|
||||||
|
}))
|
||||||
|
}
|
||||||
@ -63,7 +63,7 @@
|
|||||||
<el-form-item label="5. 请选择您的企业类型(单选)" prop="enterprise_type">
|
<el-form-item label="5. 请选择您的企业类型(单选)" prop="enterprise_type">
|
||||||
<el-radio-group v-model="formData.enterprise_type" class="option-grid">
|
<el-radio-group v-model="formData.enterprise_type" class="option-grid">
|
||||||
<el-radio
|
<el-radio
|
||||||
v-for="item in enterpriseOptions"
|
v-for="item in localizedEnterpriseOptions"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="String(item.id)"
|
:label="String(item.id)"
|
||||||
class="option-item"
|
class="option-item"
|
||||||
@ -82,7 +82,7 @@
|
|||||||
class="full-select"
|
class="full-select"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in provinceOptions"
|
v-for="item in localizedProvinceOptions"
|
||||||
:key="`region-${item.id}-${item.name}`"
|
:key="`region-${item.id}-${item.name}`"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="String(item.id)"
|
:value="String(item.id)"
|
||||||
@ -93,7 +93,7 @@
|
|||||||
<el-form-item label="7. 您想咨询的方向(可多选)">
|
<el-form-item label="7. 您想咨询的方向(可多选)">
|
||||||
<el-checkbox-group v-model="formData.consult_direction_list" class="direction-list">
|
<el-checkbox-group v-model="formData.consult_direction_list" class="direction-list">
|
||||||
<el-checkbox
|
<el-checkbox
|
||||||
v-for="item in consultDirectionOptions"
|
v-for="item in localizedConsultDirectionOptions"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="item.id"
|
:label="item.id"
|
||||||
class="direction-item"
|
class="direction-item"
|
||||||
@ -141,6 +141,14 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { reqConsultForm, reqProductConsult } from '@/api/H5'
|
import { reqConsultForm, reqProductConsult } from '@/api/H5'
|
||||||
|
import {
|
||||||
|
extractConsultOptionList,
|
||||||
|
isEnglishLocale,
|
||||||
|
localizeDictOptions,
|
||||||
|
localizeDirectionOptions,
|
||||||
|
normalizeDictOptions as buildDictOptions,
|
||||||
|
normalizeDirectionOptions as buildDirectionOptions
|
||||||
|
} from '@/utils/consultDict'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MobileFullScreenConsultDialog',
|
name: 'MobileFullScreenConsultDialog',
|
||||||
@ -207,9 +215,21 @@ export default {
|
|||||||
set(value) {
|
set(value) {
|
||||||
this.$emit('update:visible', value)
|
this.$emit('update:visible', value)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
localizedEnterpriseOptions() {
|
||||||
|
return localizeDictOptions(this.enterpriseOptions, isEnglishLocale(this.$i18n))
|
||||||
|
},
|
||||||
|
localizedProvinceOptions() {
|
||||||
|
return localizeDictOptions(this.provinceOptions, isEnglishLocale(this.$i18n))
|
||||||
|
},
|
||||||
|
localizedConsultDirectionOptions() {
|
||||||
|
return localizeDirectionOptions(this.consultDirectionOptions, isEnglishLocale(this.$i18n))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
'$i18n.locale'() {
|
||||||
|
this.provinceSelectKey += 1
|
||||||
|
},
|
||||||
visible: {
|
visible: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
@ -256,44 +276,15 @@ export default {
|
|||||||
this.dialogVisible = false
|
this.dialogVisible = false
|
||||||
this.$emit('close')
|
this.$emit('close')
|
||||||
},
|
},
|
||||||
normalizeDictOptions(list, type) {
|
|
||||||
return list
|
|
||||||
.filter(item => item && item.dict_type === type)
|
|
||||||
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
|
||||||
.map(item => ({
|
|
||||||
id: String(item.dict_key),
|
|
||||||
name: item.dict_value
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
normalizeDirectionOptions(list) {
|
|
||||||
return list
|
|
||||||
.filter(item => item && item.dict_type === 'direction')
|
|
||||||
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
|
||||||
.map(item => {
|
|
||||||
const value = item.dict_value || ''
|
|
||||||
const match = value.match(/^(.+?)((.+?))$/)
|
|
||||||
return {
|
|
||||||
id: String(item.dict_key),
|
|
||||||
name: value,
|
|
||||||
title: match ? match[1] : value,
|
|
||||||
desc: match ? match[2] : ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
extractConsultOptionList(res) {
|
|
||||||
if (res && Array.isArray(res.data)) return res.data
|
|
||||||
if (res && res.data && Array.isArray(res.data.data)) return res.data.data
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
async fetchConsultOptions() {
|
async fetchConsultOptions() {
|
||||||
try {
|
try {
|
||||||
const res = await reqConsultForm()
|
const res = await reqConsultForm()
|
||||||
const list = this.extractConsultOptionList(res)
|
const list = extractConsultOptionList(res)
|
||||||
if (!list.length) return
|
if (!list.length) return
|
||||||
|
|
||||||
const enterpriseOptions = this.normalizeDictOptions(list, 'enterprise_type')
|
const enterpriseOptions = buildDictOptions(list, 'enterprise_type')
|
||||||
const provinceOptions = this.normalizeDictOptions(list, 'region')
|
const provinceOptions = buildDictOptions(list, 'region')
|
||||||
const consultDirectionOptions = this.normalizeDirectionOptions(list)
|
const consultDirectionOptions = buildDirectionOptions(list)
|
||||||
|
|
||||||
if (enterpriseOptions.length) this.enterpriseOptions = enterpriseOptions
|
if (enterpriseOptions.length) this.enterpriseOptions = enterpriseOptions
|
||||||
if (provinceOptions.length) {
|
if (provinceOptions.length) {
|
||||||
|
|||||||
@ -42,13 +42,14 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('contactSales.provinceLabel')" prop="region" class="form-item--full">
|
<el-form-item :label="$t('contactSales.provinceLabel')" prop="region" class="form-item--full">
|
||||||
<el-select
|
<el-select
|
||||||
|
:key="provinceSelectKey"
|
||||||
v-model="addData.region"
|
v-model="addData.region"
|
||||||
filterable
|
filterable
|
||||||
:placeholder="$t('contactSales.provincePlaceholder')"
|
:placeholder="$t('contactSales.provincePlaceholder')"
|
||||||
class="full-select"
|
class="full-select"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in provinceOptions"
|
v-for="item in localizedProvinceOptions"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.id"
|
:value="item.id"
|
||||||
@ -88,6 +89,13 @@ import Vue from 'vue'
|
|||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { reqNewHomeConsult } from '@/api/newHome'
|
import { reqNewHomeConsult } from '@/api/newHome'
|
||||||
import { reqConsultForm } from '@/api/H5'
|
import { reqConsultForm } from '@/api/H5'
|
||||||
|
import {
|
||||||
|
extractConsultOptionList,
|
||||||
|
isEnglishLocale,
|
||||||
|
localizeDictOptions,
|
||||||
|
localizeDirectionOptions,
|
||||||
|
normalizeDictOptions as buildDictOptions
|
||||||
|
} from '@/utils/consultDict'
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
name: 'Talk',
|
name: 'Talk',
|
||||||
@ -129,6 +137,7 @@ export default Vue.extend({
|
|||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
enterpriseOptions: [],
|
enterpriseOptions: [],
|
||||||
provinceOptions: [],
|
provinceOptions: [],
|
||||||
|
provinceSelectKey: 0,
|
||||||
addData: {
|
addData: {
|
||||||
content: '', // 需求内容
|
content: '', // 需求内容
|
||||||
custom_type: '1', // 客户类型 0-个人 1-企业
|
custom_type: '1', // 客户类型 0-个人 1-企业
|
||||||
@ -158,13 +167,16 @@ export default Vue.extend({
|
|||||||
: ''
|
: ''
|
||||||
},
|
},
|
||||||
localizedEnterpriseOptions() {
|
localizedEnterpriseOptions() {
|
||||||
return this.enterpriseOptions.map(item => ({
|
return localizeDictOptions(this.enterpriseOptions, isEnglishLocale(this.$i18n))
|
||||||
...item,
|
},
|
||||||
name: this.getEnterpriseOptionName(item.name)
|
localizedProvinceOptions() {
|
||||||
}))
|
return localizeDictOptions(this.provinceOptions, isEnglishLocale(this.$i18n))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
'$i18n.locale'() {
|
||||||
|
this.provinceSelectKey += 1
|
||||||
|
},
|
||||||
showTalk: {
|
showTalk: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(value) {
|
handler(value) {
|
||||||
@ -176,23 +188,6 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getEnterpriseOptionName(name) {
|
|
||||||
const map = {
|
|
||||||
大型企业: 'largeEnterprise',
|
|
||||||
中小企业: 'sme',
|
|
||||||
OPC个人: 'opcIndividual',
|
|
||||||
高校科研机构: 'university',
|
|
||||||
高校: 'university',
|
|
||||||
政府: 'government',
|
|
||||||
其他: 'other'
|
|
||||||
}
|
|
||||||
const key = map[name]
|
|
||||||
if (!key) return name
|
|
||||||
|
|
||||||
const i18nKey = `contactSales.enterpriseOptions.${key}`
|
|
||||||
const translated = this.$t(i18nKey)
|
|
||||||
return translated === i18nKey ? name : translated
|
|
||||||
},
|
|
||||||
getDefaultFormData() {
|
getDefaultFormData() {
|
||||||
return {
|
return {
|
||||||
content: '',
|
content: '',
|
||||||
@ -205,31 +200,20 @@ export default Vue.extend({
|
|||||||
region: ''
|
region: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
normalizeDictOptions(list, type) {
|
|
||||||
return list
|
|
||||||
.filter(item => item && item.dict_type === type)
|
|
||||||
.sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
|
|
||||||
.map(item => ({
|
|
||||||
id: item.dict_key,
|
|
||||||
name: item.dict_value
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
extractConsultOptionList(res) {
|
|
||||||
if (res && Array.isArray(res.data)) return res.data
|
|
||||||
if (res && res.data && Array.isArray(res.data.data)) return res.data.data
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
async fetchConsultOptions() {
|
async fetchConsultOptions() {
|
||||||
try {
|
try {
|
||||||
const res = await reqConsultForm()
|
const res = await reqConsultForm()
|
||||||
const list = this.extractConsultOptionList(res)
|
const list = extractConsultOptionList(res)
|
||||||
if (!list.length) return
|
if (!list.length) return
|
||||||
|
|
||||||
const enterpriseOptions = this.normalizeDictOptions(list, 'enterprise_type')
|
const enterpriseOptions = buildDictOptions(list, 'enterprise_type')
|
||||||
const provinceOptions = this.normalizeDictOptions(list, 'region')
|
const provinceOptions = buildDictOptions(list, 'region')
|
||||||
|
|
||||||
if (enterpriseOptions.length) this.enterpriseOptions = enterpriseOptions
|
if (enterpriseOptions.length) this.enterpriseOptions = enterpriseOptions
|
||||||
if (provinceOptions.length) this.provinceOptions = provinceOptions
|
if (provinceOptions.length) {
|
||||||
|
this.provinceOptions = provinceOptions
|
||||||
|
this.provinceSelectKey += 1
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// 字典接口异常时保持当前选项,避免影响基础提交。
|
// 字典接口异常时保持当前选项,避免影响基础提交。
|
||||||
}
|
}
|
||||||
@ -397,7 +381,21 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-item--message {
|
.form-item--message {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .form-item--message .el-form-item__label {
|
||||||
|
width: 100% !important;
|
||||||
|
float: none;
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: normal;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .form-item--message .el-form-item__content {
|
||||||
width: calc(100% - 184px);
|
width: calc(100% - 184px);
|
||||||
|
max-width: calc(100% - 184px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-select {
|
.full-select {
|
||||||
@ -541,6 +539,11 @@ export default Vue.extend({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .form-item--message .el-form-item__content {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.agreement-checkbox {
|
.agreement-checkbox {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user