Skip to content

F
factory_front
Commit 80ab49b2 by linjinhong
Options

修改LogisticsWaySelect组件兼容单选

parent 7349ebe7
Showing with 124 additions and 64 deletions
src/views/logistics/components/LogisticsWaySelect.tsx
...@@ -4,6 +4,8 @@ import { ...@@ -4,6 +4,8 @@ import {
ElScrollbar, ElScrollbar,
ElCheckbox, ElCheckbox,
ElCheckboxGroup, ElCheckboxGroup,
ElRadioGroup,
ElRadio,
ElInput, ElInput,
} from 'element-plus' } from 'element-plus'
...@@ -35,41 +37,60 @@ interface IwayList { ...@@ -35,41 +37,60 @@ interface IwayList {
id: string id: string
} }
interface IAllList { interface IAllList {
factoryId: number factoryId?: number
id: number id: number
name: string name: string
serviceCode: string serviceCode?: string
siteUrl: string siteUrl?: string
status: number status?: number
uinuinWarehouseId: number | null uinuinWarehouseId?: number | null
updateTime: string updateTime?: string
warehouseId: number warehouseId?: number
warehouseName: string warehouseName?: string
wayList?: IwayList[]
} }
export default defineComponent({ export default defineComponent({
name: 'CustomizeForm', name: 'CustomizeForm',
props: { props: {
modelValue: { modelValue: {
type: Array as PropType<(string | number)[]>, type: [Array, String, Number] as PropType<
(string | number)[] | string | number
>,
default: () => [], default: () => [],
// 可选：添加自定义验证器确保类型安全
validator: (value: unknown) => {
return (
Array.isArray(value) ||
typeof value === 'string' ||
typeof value === 'number'
)
},
}, },
companyList: { companyList: {
type: Array as PropType<IAllList[]>, type: Array as PropType<IAllList[] | ICompanyList[]>,
default: () => [], default: () => [],
}, },
isRadio: {
type: Boolean,
default: false,
},
}, },
emits: ['update:modelValue'], emits: ['update:modelValue'],
setup(props, { emit }) { setup(props, { emit }) {
const companyList = ref<ICompanyList[]>([]) const companyList = ref<ICompanyList[]>([])
const allList = ref<IAllList[]>([]) const allList = ref<IAllList[]>([])
const selectedList = ref<(string | number)[]>([]) const selectedList = ref<(string | number)[]>([])
const selectedRadioList = ref<string | number>()
const waysName = ref('') const waysName = ref('')
const selectedRadioName = ref('')
watch( watch(
() => props.modelValue, () => props.modelValue,
(newVal) => { (newVal) => {
selectedList.value = newVal if (props.isRadio) {
selectedRadioList.value = newVal as string | number
} else {
selectedList.value = newVal as (string | number)[]
}
}, },
{ {
immediate: true, immediate: true,
...@@ -78,23 +99,34 @@ export default defineComponent({ ...@@ -78,23 +99,34 @@ export default defineComponent({
) )
watch( watch(
[() => selectedList.value, () => props.companyList], [
() => selectedList.value,
() => props.companyList,
() => selectedRadioList.value,
],
(newVal) => { (newVal) => {
emit('update:modelValue', newVal[0]) console.log(90, newVal)
allList.value = newVal[1] if (props.isRadio) {
companyList.value = transformData(newVal[1]) emit('update:modelValue', newVal[2])
companyList.value = newVal[1] as ICompanyList[]
waysName.value = selectedRadioName.value
} else {
emit('update:modelValue', newVal[0])
allList.value = newVal[1] as IAllList[]
companyList.value = transformData(newVal[1] as IAllList[])
if (newVal[1]?.length) { if (newVal[1]?.length) {
waysName.value = newVal[1] waysName.value = (newVal[1] as IAllList[])
.filter((item) => { .filter((item) => {
if (newVal[0].includes(item.id)) { if (newVal[0].includes(item.id)) {
return item.name return item.name
} }
}) })
.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)
}
} }
}, },
{ deep: true, immediate: true }, { deep: true, immediate: true },
...@@ -173,29 +205,55 @@ export default defineComponent({ ...@@ -173,29 +205,55 @@ export default defineComponent({
<div class="companyBox" key={index}> <div class="companyBox" key={index}>
<div style={styles.titleBox}> <div style={styles.titleBox}>
<div class="title">{company.warehouseName}</div> <div class="title">{company.warehouseName}</div>
<ElCheckbox {!props.isRadio && (
modelValue={getCompanySelectedStatus.value(company)}
onChange={(v) => setCheckAll(company, v as boolean)}
class="selectAll"
>
全选
</ElCheckbox>
</div>
<ElCheckboxGroup
modelValue={selectedList.value}
onUpdate:modelValue={(value) => (selectedList.value = value)}
style={styles.checkboxGroup}
>
{company.wayList.map((item) => (
<ElCheckbox <ElCheckbox
label={item.name} modelValue={getCompanySelectedStatus.value(company)}
value={item.id} onChange={(v) => setCheckAll(company, v as boolean)}
key={`item-${item.id}`} class="selectAll"
class="checkboxItem" >
/> 全选
))} </ElCheckbox>
</ElCheckboxGroup> )}
</div>
{props.isRadio ? (
<ElRadioGroup
modelValue={selectedRadioList.value}
onUpdate:modelValue={(value) => {
console.log('company', value)
selectedRadioList.value = value as string | number
selectedRadioName.value = company.wayList.find(
(el) => el.id === value,
)?.name as string
}}
style={styles.checkboxGroup}
>
{company.wayList?.map((item) => (
<ElRadio
label={item.name}
value={item.id}
key={`item-${item.id}`}
class="radioItem"
>
{item.name}
</ElRadio>
))}
</ElRadioGroup>
) : (
<ElCheckboxGroup
modelValue={selectedList.value}
onUpdate:modelValue={(value) => (selectedList.value = value)}
style={styles.checkboxGroup}
>
{company.wayList.map((item) => (
<ElCheckbox
label={item.name}
value={item.id}
key={`item-${item.id}`}
class="checkboxItem"
/>
))}
</ElCheckboxGroup>
)}
</div> </div>
))} ))}
</ElScrollbar> </ElScrollbar>
......
src/views/logistics/logisticsMethod.vue
...@@ -422,8 +422,9 @@ const formConfig = computed<IFormConfig[]>(() => [ ...@@ -422,8 +422,9 @@ const formConfig = computed<IFormConfig[]>(() => [
]} ]}
> >
<LogisticsWaySelect <LogisticsWaySelect
v-model={item.logisticsName} v-model={item.logisticsName as string | number}
companyList={tiktokCarriers.value} isRadio={true}
companyList={tiktokCarriers.value as ICompanyList[]}
></LogisticsWaySelect> ></LogisticsWaySelect>
</el-form-item> </el-form-item>
) : ( ) : (
...@@ -450,14 +451,14 @@ const formConfig = computed<IFormConfig[]>(() => [ ...@@ -450,14 +451,14 @@ const formConfig = computed<IFormConfig[]>(() => [
<div style="display: flex;flex:17%"> <div style="display: flex;flex:17%">
{(formData?.platformList as platformObj[])?.length - 1 === {(formData?.platformList as platformObj[])?.length - 1 ===
index && ( index && (
<el-button <el-button
style="margin-left: 10px" style="margin-left: 10px"
type="primary" type="primary"
onClick={() => addCol()} onClick={() => addCol()}
> >
新增 新增
</el-button> </el-button>
)} )}
{index >= 1 && ( {index >= 1 && (
<el-button <el-button
style="margin-left: 10px" style="margin-left: 10px"
...@@ -880,15 +881,16 @@ const tiktokCarriers = ref<ICompanyList[]>([]) ...@@ -880,15 +881,16 @@ const tiktokCarriers = ref<ICompanyList[]>([])
*/ */
async function getTiktokCarriers() { async function getTiktokCarriers() {
const { data } = await getTiktokCarrier() const { data } = await getTiktokCarrier()
const labelTypeList = Array.from(new Set(data.map(e => e.label))) const labelTypeList = Array.from(new Set(data.map((e) => e.label)))
const result:ICompanyList[] = [] const result: ICompanyList[] = []
labelTypeList.forEach(label => { labelTypeList.forEach((label) => {
result.push({ result.push({
warehouseName: label, warehouseName: label,
wayList: data.filter(e => e.label === label) wayList: data.filter((e) => e.label === label),
}) })
}) })
tiktokCarriers.value = result tiktokCarriers.value = result
console.log(893, tiktokCarriers.value)
} }
/** /**
......
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