Authored by qxm

动作下拉列表

... ... @@ -52,5 +52,11 @@ export const MusclesApi = {
return await request.delete({
url: `/motion/sub-categories/delete-list?ids=${ids.join(',')}`
})
},
// 获取细分锻炼部位下拉列表
getsubCategoriesList: async () => {
return await request.get({
url: `/motion/sub-categories/simple-list`
})
}
}
... ...
... ... @@ -95,5 +95,11 @@ export const MotionCategoryApi = {
url: `/motion/categories/delete-list`,
params: { ids }
})
},
// 获取部位/动作分类下拉列表
getCategoriesList: async () => {
return await request.get({
url: `/motion/categories/simple-list`
})
}
}
... ...
... ... @@ -76,5 +76,11 @@ export const EquipmentsApi = {
params,
responseType: 'blob' // 导出文件需指定响应类型
})
},
// 获取动作器械下拉列表
getEquipmentList: async () => {
return await request.get({
url: `/motion/equipments/simple-list`
})
}
}
... ...
<template>
<!-- 采用芋道全局封装的 Dialog 组件,内置滚动和自适应处理 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="120px"
>
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="120px">
<el-form-item label="动作名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入动作名称"
maxlength="50"
show-word-limit
/>
<el-input v-model="formData.name" placeholder="请输入动作名称" maxlength="50" show-word-limit />
</el-form-item>
<el-form-item label="动作类型" prop="exerciseType">
... ... @@ -31,12 +20,7 @@
<el-form-item label="部位分类" prop="categoryId">
<el-select v-model="formData.categoryId" placeholder="请选择部位分类" class="w-full">
<el-option
v-for="item in categoryList"
:key="item.id"
:label="item.name"
:value="Number(item.id)"
/>
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="Number(item.id)" />
</el-select>
</el-form-item>
... ... @@ -47,24 +31,14 @@
</el-form-item>
<el-form-item label="主要训练部位" prop="primaryMuscles">
<el-select
v-model="formData.primaryMuscles"
multiple
placeholder="请选择主要训练部位"
class="w-full"
>
<el-option v-for="item in muscleList" :key="item.id" :label="item.name" :value="item.id" />
<el-select v-model="formData.primaryMuscles" multiple placeholder="请选择主要训练部位" class="w-full">
<el-option v-for="item in primaryAvailableMuscles" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="次要训练部位" prop="secondaryMuscles">
<el-select
v-model="formData.secondaryMuscles"
multiple
placeholder="请选择次要训练部位"
class="w-full"
>
<el-option v-for="item in muscleList" :key="item.id" :label="item.name" :value="item.id" />
<el-select v-model="formData.secondaryMuscles" multiple placeholder="请选择次要训练部位" class="w-full">
<el-option v-for="item in secondaryAvailableMuscles" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
... ... @@ -132,9 +106,21 @@ const formData = ref<any>({
})
// 基础下拉选项数据集
const muscleList = ref<any[]>([])
const categoryList = ref<any[]>([])
const toolList = ref<any[]>([])
const muscleList = ref<any[]>([])
const categoryList = ref<any[]>([])
const toolList = ref<any[]>([])
// 可选主要训练部位:排除已选次要部位
const primaryAvailableMuscles = computed(() => {
const secondaryIds = new Set(formData.value.secondaryMuscles ?? [])
return muscleList.value.filter(item => !secondaryIds.has(item.id))
})
// 可选次要训练部位:排除已选主要部位
const secondaryAvailableMuscles = computed(() => {
const primaryIds = new Set(formData.value.primaryMuscles ?? [])
return muscleList.value.filter(item => !primaryIds.has(item.id))
})
const formRules = reactive<FormRules>({
name: [{ required: true, message: '请输入动作名称', trigger: 'blur' }],
... ... @@ -164,16 +150,23 @@ const safeParseArray = (val: any): any[] => {
// 异步按需加载字典数据
const loadOptions = async () => {
if (muscleList.value.length === 0) {
const res = await MusclesApi.getMusclesPage({ pageNo: 1, pageSize: 100, name: '' })
muscleList.value = res.data?.list || res.list || []
const res = await MusclesApi.getsubCategoriesList()
muscleList.value = res || []
console.log('细分锻炼部位列表/肌肉res:', res);
console.log('muscleList 赋值后', muscleList.value)
}
if (categoryList.value.length === 0) {
const res = await MotionCategoryApi.getMotionCategoryPage({ pageNo: 1, pageSize: 100, name: '' })
categoryList.value = res.data?.list || res.list || []
const res = await MotionCategoryApi.getCategoriesList()
categoryList.value = res || []
console.log('部位列表res:', res);
console.log('categoryList 赋值后', categoryList.value)
}
if (toolList.value.length === 0) {
const res = await EquipmentsApi.getEquipmentsPage({ pageNo: 1, pageSize: 100, name: '' })
toolList.value = res.data?.list || res.list || []
const res = await EquipmentsApi.getEquipmentList()
toolList.value = res || []
console.log('器械列表res:', res);
console.log('categoryList 赋值后', categoryList.value)
}
}
... ... @@ -192,7 +185,7 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
const data = await ExercisesApi.getExercises(id)
console.log(data,"getExercises");
console.log(data, "getExercises");
// 处理回显:将后端保存的 String (如 "[1,2]") 格式化为 el-select 所需的 Array
data.primaryMuscles = safeParseArray(JSON.parse(data.primaryMuscles || '[]'))
data.secondaryMuscles = safeParseArray(JSON.parse(data.secondaryMuscles || '[]'))
... ... @@ -245,8 +238,8 @@ const submitForm = async () => {
secondaryMuscles: JSON.stringify(formData.value.secondaryMuscles || [])
}
console.log(submitData,"submitData");
console.log(submitData, "submitData");
if (formType.value === 'create') {
await ExercisesApi.addExercises(submitData)
message.success('新增成功')
... ...