当前位置：首页 > news >正文

前端实习手记（7）：立秋快乐

news 2025/7/23 0:41:24

这周相比上周感觉挺好的哈哈哈，可能只有自己感觉蛮好的，旁边师父忙的飞起了要，不仅赶工作还要回答我乱七八糟的问题（心疼一秒）。这周也是立秋&七夕咯，立秋快乐哇家人们（虽然还是很热嘛）

总结

上周新增自定义表单对话框修改完善
更多筛选模特对话框完成
Vue.js

筛选模特对话框

功能概述

筛选模特的性别地域信息，选中模特，点击确定会将模特添加模特列表的最前面并关闭对话框，点击删除会删除模特并刷新列表。

思路

框架搭建（这点就不说了）
筛选逻辑
刷新列表
删除逻辑
取消与确定添加逻辑

一、筛选逻辑

绑定 sexList 数据列表，并将 state.sexCheckedList 作为当前选中的值列表。
在选择器中做出选择时，触发 onSexChecked 和 onAreaChecked 方法。
事件处理方法:onSexChecked: 当用户选择性别时，此方法被调用，并更新 state.sexCheckedList
携带筛选到的列表数据id，请求后端返回数据
这里要注意map的使用，在处理后端返回的数据时经过map处理会返回一个数组，后面需要把list赋给数组类型的datalist，所以这里使用map。

<script setup>...const onSexChecked = (checkedList: Array<SelectInfo>) => {state.sexCheckedList = checkedList;};const onAreaChecked = (checkedList: Array<SelectInfo>) => {state.areaCheckedList = checkedList;};const modelData = async () => {const path = '/resource/xxxx';const params = {per_page: 35,sex: state.sexCheckedList.map((i) => i.id).join(),region: state.areaCheckedList.map((i) => i.id).join(),};const res = await Http.get(path, params);return {list: res.data.list.data.map((i: any) => {return {id: i.id,path: i.image_path,name: i.name,type: i.type,age_group: i.age_group,sex: i.sex,region: i.region,delete: i.source === 'Supplier',};}),currentPage: res.data.list.current_page,perPage: res.data.list.per_page,totalPage: res.data.list.total,};};
</script>
<template><AModal>...<div><Select:data-list="sexList":checked-list="state.sexCheckedList"@checked="onSexChecked"/><Select:data-list="areaList":checked-list="state.areaCheckedList"@checked="onAreaChecked"/></div>...</AModal>
</template>

二、刷新列表

将后端返回数据赋给我们使用的字段
在组件一挂载时就更新列表

<script setup>...onMounted(() => {getModelList();});...const getModelList = async () => {const { list, currentPage, perPage, totalPage } = await modelData();tableSet.currentPage = currentPage;tableSet.perPage = perPage;tableSet.totalPage = totalPage;state.dataList = list;};
</script>

三、删除逻辑

点击删除图标，触发相应事件
获取所选模特的id
携带参数发送请求
再次刷新列表

const modelDeleted = async (modelInfo: ModelInfo) => {state.remove = true;console.log('modelDeleted');const path = '/resource/xxx';const params = {id: modelInfo.id,};await Http.post(path, params);getModelList();
};

四、取消与确定

这里还是使用了emits将事件交由父组件监听并执行相应的方法。
定义emits: 在子组件的选项中定义 emits 选项来声明组件可以触发的事件名称。
触发事件: 使用 $emit 方法来触发这些事件，并传递相应的参数。
父组件使用@监听事件，并执行相应的处理函数。

<script setup>...const handleCancel = () => {emits('cancel', state.remove);};const submitModel = () => {emits('submit', state.checked);};...
</script>
<template>...<AButton @click="handleCancel">取消</AButton><AButton type="primary" @click="submitModel">生成</AButton>...
</template>

完整代码

<script lang="ts" setup>import { ref, onMounted } from 'vue';import ModelInfo from './definition/ModelInfo';import Select from './Select.vue';import PicItem from './PicItem.vue';import SelectInfo from './definition/SelectInfo';import sexList from './data/sexList';import areaList from './data/areaList';const emits = defineEmits(['update:checkedList', 'cancel', 'submit']);const state = reactive({remove: false,dataList: [] as Array<ModelInfo>,sexCheckedList: [] as Array<SelectInfo>,areaCheckedList: [] as Array<SelectInfo>,checked: {} as ModelInfo,});const onSexChecked = (checkedList: Array<SelectInfo>) => {state.sexCheckedList = checkedList;};const onAreaChecked = (checkedList: Array<SelectInfo>) => {state.areaCheckedList = checkedList;};const modelDeleted = async (modelInfo: ModelInfo) => {state.remove = true;console.log('modelDeleted');const path = '/xxxx';const params = {id: modelInfo.id,};await Http.post(path, params);getModelList();};const onChecked = (picInfo: ModelInfo, b: boolean) => {state.checked = picInfo;};const tableSet = reactive({currentPage: 1,perPage: 1,totalPage: 200,});onMounted(() => {getModelList();});const handleCancel = () => {emits('cancel', state.remove);};const submitModel = () => {emits('submit', state.checked);};const onChange = (page, pageSize) => {getModelList();};const modelData = async () => {const path = '/resource/xxxx';const params = {per_page: 35,sex: state.sexCheckedList.map((i) => i.id).join(),region: state.areaCheckedList.map((i) => i.id).join(),};const res = await Http.get(path, params);return {list: res.data.list.data.map((i: any) => {return {id: i.id,path: i.image_path,name: i.name,type: i.type,age_group: i.age_group,sex: i.sex,region: i.region,delete: i.source === 'Supplier',};}),currentPage: res.data.list.current_page,perPage: res.data.list.per_page,totalPage: res.data.list.total,};};const getModelList = async () => {const { list, currentPage, perPage, totalPage } = await modelData();tableSet.currentPage = currentPage;tableSet.perPage = perPage;tableSet.totalPage = totalPage;state.dataList = list;};
</script>
<template><div><AModal@cancel="handleCancel"><div class="select-model"><Select:data-list="sexList":checked-list="state.sexCheckedList"@checked="onSexChecked"/><Select:data-list="areaList":checked-list="state.areaCheckedList"@checked="onAreaChecked"/></div><!-- 模特列表 --><div class="select-list"><PicItemv-for="picInfo in state.dataList":key="picInfo.id":pic-info="picInfo":checked="state.checked.id === picInfo.id"@update:checked="(b) => onChecked(picInfo, b)"@model-deleted="modelDeleted"/></div><!-- 分页器 --><div><APaginationv-model:current="tableSet.currentPage"v-model:page-size="tableSet.perPage"show-quick-jumper:total="tableSet.totalPage":show-total="showTotalFunc"@change="onChange"/></div><!-- 生成取消按钮 --><template #footer><AButton @click="handleCancel">取消</AButton><AButton type="primary" @click="submitModel">生成</AButton></template></AModal></div>
</template>