Skip to content

F
factory_front
Commit 3bbe8ed8 by linjinhong Committed by qinjianhui
Options

fix：修改物流方式回显问题

parent 49dd2cce
Showing with 201 additions and 59 deletions
src/views/logistics/components/LogisticsWaySelect.tsx
...@@ -26,6 +26,11 @@ const styles = { ...@@ -26,6 +26,11 @@ const styles = {
flexWrap: 'wrap', flexWrap: 'wrap',
backgroundColor: '#efefef', backgroundColor: '#efefef',
}, },
checkbox: {
width: '33.3333%',
'margin-right': '0px !important',
},
} as const } as const
interface ICompanyList { interface ICompanyList {
...@@ -78,11 +83,13 @@ export default defineComponent({ ...@@ -78,11 +83,13 @@ export default defineComponent({
emits: ['update:modelValue'], emits: ['update:modelValue'],
setup(props, { emit }) { setup(props, { emit }) {
const companyList = ref<ICompanyList[]>([]) const companyList = ref<ICompanyList[]>([])
const templeCompanyList = ref<ICompanyList[] | IwayList[] | IAllList[]>([])
const allList = ref<IAllList[]>([]) const allList = ref<IAllList[]>([])
const allWayLists = ref<IwayList[]>([])
const selectedList = ref<(string | number)[]>([]) const selectedList = ref<(string | number)[]>([])
const selectedRadioList = ref<string | number>() const selectedRadioList = ref<string | number>()
const waysName = ref('') const waysName = ref('')
const searchName = ref('')
watch( watch(
() => props.modelValue, () => props.modelValue,
(newVal) => { (newVal) => {
...@@ -107,16 +114,17 @@ export default defineComponent({ ...@@ -107,16 +114,17 @@ export default defineComponent({
() => selectedRadioList.value, () => selectedRadioList.value,
], ],
(newVal) => { (newVal) => {
console.log(90, newVal) // console.log(90, newVal)
if (props.isRadio) { if (props.isRadio) {
emit('update:modelValue', newVal[2]) emit('update:modelValue', newVal[2])
companyList.value = newVal[1] as ICompanyList[] companyList.value = newVal[1] as ICompanyList[]
const allWayLists: IwayList[] = props.companyList.flatMap( allWayLists.value = props.companyList.flatMap(
(company) => company.wayList, (company) => company.wayList,
) as IwayList[] ) as IwayList[]
waysName.value = waysName.value =
allWayLists.find((el: IwayList) => newVal[2] === el.id)?.name || '' allWayLists.value.find((el: IwayList) => newVal[2] === el.id)
?.name || ''
} else { } else {
emit('update:modelValue', newVal[0]) emit('update:modelValue', newVal[0])
allList.value = newVal[1] as IAllList[] allList.value = newVal[1] as IAllList[]
...@@ -132,7 +140,7 @@ export default defineComponent({ ...@@ -132,7 +140,7 @@ export default defineComponent({
.map((item) => item.name) .map((item) => item.name)
.join(',') .join(',')
// emit('waysName', res) // emit('waysName', res)
console.log(87, waysName.value) // console.log(87, waysName.value)
} }
} }
}, },
...@@ -166,6 +174,31 @@ export default defineComponent({ ...@@ -166,6 +174,31 @@ export default defineComponent({
return (company: ICompanyList) => statusMap.get(company.warehouseName) return (company: ICompanyList) => statusMap.get(company.warehouseName)
}) })
function fuzzySearch<T>(
items: T[],
searchTerm: string,
key: keyof T = 'name' as keyof T,
): T[] {
// 空搜索返回所有元素
if (!searchTerm.trim()) {
return [...items]
}
// 将搜索词转为小写（不区分大小写）
const searchLower = searchTerm.toLowerCase()
return items.filter((item) => {
// 获取属性值
const value = item[key]
// 确保属性值存在且为字符串
if (typeof value !== 'string') return false
// 将属性值转为小写并检查是否包含搜索词
return value.toLowerCase().includes(searchLower)
})
}
function transformData(data: IAllList[]) { function transformData(data: IAllList[]) {
const warehouseMap = new Map() const warehouseMap = new Map()
for (const item of data) { for (const item of data) {
...@@ -193,10 +226,13 @@ export default defineComponent({ ...@@ -193,10 +226,13 @@ export default defineComponent({
return () => ( return () => (
<ElPopover <ElPopover
width="650px" width="750px"
placement="bottom-start" placement="bottom-start"
trigger="click" trigger="click"
popper-style={{ padding: 0 }} popper-style={{ padding: 0 }}
onUpdate:visible={(value) => {
if (value) searchName.value = ''
}}
v-slots={{ v-slots={{
reference: () => ( reference: () => (
<ElInput <ElInput
...@@ -207,59 +243,128 @@ export default defineComponent({ ...@@ -207,59 +243,128 @@ export default defineComponent({
), ),
}} }}
> >
<ElScrollbar class="scroll-container" maxHeight="450px"> <ElInput
{companyList.value.map((company, index) => ( modelValue={searchName.value}
<div class="companyBox" key={index}> onUpdate:modelValue={(value) => {
<div style={styles.titleBox}> if (props.isRadio) {
<div class="title">{company.warehouseName}</div> templeCompanyList.value = fuzzySearch(allWayLists.value, value)
{!props.isRadio && ( } else {
<ElCheckbox templeCompanyList.value = fuzzySearch(allList.value, value)
modelValue={getCompanySelectedStatus.value(company)} }
onChange={(v) => setCheckAll(company, v as boolean)} console.log('templeCompanyList', templeCompanyList.value)
class="selectAll" searchName.value = value
}}
clearable
style={{ width: '200px', padding: '10px' }}
placeholder="请搜索承运商"
/>
<ElScrollbar
class="scroll-container"
maxHeight="450px"
style={{ 'border-top': '1px solid #eee' }}
>
{!searchName.value ? (
companyList.value.map((company, index) => (
<div class="companyBox" key={index}>
<div style={styles.titleBox}>
<div class="title">{company.warehouseName}</div>
{!props.isRadio && (
<ElCheckbox
modelValue={getCompanySelectedStatus.value(
company as ICompanyList,
)}
onChange={(v) =>
setCheckAll(company as ICompanyList, v as boolean)
}
class="selectAll"
>
全选
</ElCheckbox>
)}
</div>
{props.isRadio ? (
<ElRadioGroup
modelValue={selectedRadioList.value}
onUpdate:modelValue={(value) => {
console.log('company', value)
selectedRadioList.value = value as string | number
}}
style={styles.checkboxGroup}
> >
全选 {company.wayList?.map((item) => (
</ElCheckbox> <div title={item.name} style={styles.checkbox}>
<ElRadio
label={item.name}
value={item.id}
key={`item-${item.id}`}
>
{item.name}
</ElRadio>
</div>
))}
</ElRadioGroup>
) : (
<ElCheckboxGroup
modelValue={selectedList.value}
onUpdate:modelValue={(value) =>
(selectedList.value = value)
}
style={styles.checkboxGroup}
>
{(company as ICompanyList).wayList.map((item) => (
<div title={item.name} style={styles.checkbox}>
<ElCheckbox
label={item.name}
value={item.id}
key={`item-${item.id}`}
class="checkboxItem"
/>
</div>
))}
</ElCheckboxGroup>
)} )}
</div> </div>
{props.isRadio ? ( ))
<ElRadioGroup ) : props.isRadio ? (
modelValue={selectedRadioList.value} <ElRadioGroup
onUpdate:modelValue={(value) => { modelValue={selectedRadioList.value}
console.log('company', value) onUpdate:modelValue={(value) => {
selectedRadioList.value = value as string | number console.log('company', value)
}} selectedRadioList.value = value as string | number
style={styles.checkboxGroup} }}
> style={styles.checkboxGroup}
{company.wayList?.map((item) => ( >
<ElRadio {(templeCompanyList.value as IwayList[]).map((item) => (
label={item.name} <div title={item.name} style={styles.checkbox}>
value={item.id} <ElRadio
key={`item-${item.id}`} label={item.name}
class="radioItem" value={item.id}
> key={`item-${item.id}`}
{item.name} >
</ElRadio> {item.name}
))} </ElRadio>
</ElRadioGroup> </div>
) : ( ))}
<ElCheckboxGroup </ElRadioGroup>
modelValue={selectedList.value} ) : (
onUpdate:modelValue={(value) => (selectedList.value = value)} <ElCheckboxGroup
style={styles.checkboxGroup} modelValue={selectedList.value}
> onUpdate:modelValue={(value) => (selectedList.value = value)}
{company.wayList.map((item) => ( style={styles.checkboxGroup}
<ElCheckbox >
label={item.name} {(templeCompanyList.value as IwayList[]).map((item) => (
value={item.id} <div title={item.name} style={styles.checkbox}>
key={`item-${item.id}`} <ElCheckbox
class="checkboxItem" label={item.name}
/> value={item.id}
))} key={`item-${item.id}`}
</ElCheckboxGroup> class="checkboxItem"
)} />
</div> </div>
))} ))}
</ElCheckboxGroup>
)}
</ElScrollbar> </ElScrollbar>
</ElPopover> </ElPopover>
) )
......
src/views/logistics/logisticsMethod.vue
...@@ -185,6 +185,45 @@ const platformList = ref([]) ...@@ -185,6 +185,45 @@ const platformList = ref([])
const ruleNameList = ref([]) const ruleNameList = ref([])
const uniuniList = ref([]) const uniuniList = ref([])
const logisticsCompanyList = ref([]) const logisticsCompanyList = ref([])
watch(
() => JSON.parse(JSON.stringify(editForm.value.platformList)),
(newValue, oldValue) => {
if (oldValue.length && newValue.length) {
// 遍历旧值数组
oldValue.forEach(
(
oldItem: { logisticsName: string; showPlatform: string[] },
index: number,
) => {
// 检查旧值项是否符合条件
if (
Array.isArray(oldItem.showPlatform) &&
oldItem.showPlatform.length === 1 &&
oldItem.showPlatform[0] === 'TIKTOK' &&
oldItem.logisticsName
) {
// 获取对应的新值项
const newItem = newValue[index]
// 检查新值项是否不再满足条件
if (
newItem &&
(!Array.isArray(newItem.showPlatform) ||
newItem.showPlatform.length === 0 ||
!newItem.showPlatform.includes('TIKTOK') ||
newItem.showPlatform.length > 1)
) {
// 清除 logisticsName
editForm.value.platformList[index].logisticsName = ''
}
}
},
)
}
},
{ deep: true },
)
const formConfig = computed<IFormConfig[]>(() => [ const formConfig = computed<IFormConfig[]>(() => [
{ title: '物流基础信息' }, { title: '物流基础信息' },
{ {
...@@ -373,9 +412,7 @@ const formConfig = computed<IFormConfig[]>(() => [ ...@@ -373,9 +412,7 @@ const formConfig = computed<IFormConfig[]>(() => [
{ {
title: '平台物流名称', title: '平台物流名称',
fixed: 'last', fixed: 'last',
render: (item, formData) => { render: (_, formData) => {
console.log(283, item, formData)
return (formData?.platformList as platformObj[])?.map( return (formData?.platformList as platformObj[])?.map(
(item: platformObj, index: number) => ( (item: platformObj, index: number) => (
<div style="display: flex; width:100%"> <div style="display: flex; width:100%">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment