這周相比上周感覺(jué)挺好的哈哈哈，可能只有自己感覺(jué)蠻好的，旁邊師父忙的飛起了要，不僅趕工作還要回答我亂七八糟的問(wèn)題（心疼一秒）。這周也是立秋&七夕咯，立秋快樂(lè)哇家人們（雖然還是很熱嘛）

總結(jié)

• 上周新增自定義表單對(duì)話框修改完善
• 更多篩選模特對(duì)話框 完成
• Vue.js

篩選模特對(duì)話框

功能概述

• 篩選模特的性別地域信息，選中模特，點(diǎn)擊確定會(huì)將模特添加模特列表的最前面并關(guān)閉對(duì)話框，點(diǎn)擊刪除會(huì)刪除模特并刷新列表。

思路

• 框架搭建（這點(diǎn)就不說(shuō)了）
• 篩選邏輯
• 刷新列表
• 刪除邏輯
• 取消與確定添加邏輯

一、篩選邏輯

• 綁定 sexList 數(shù)據(jù)列表，并將 state.sexCheckedList 作為當(dāng)前選中的值列表。
• 在選擇器中做出選擇時(shí)，觸發(fā) onSexChecked 和 onAreaChecked 方法。
• 事件處理方法:onSexChecked: 當(dāng)用戶選擇性別時(shí)，此方法被調(diào)用，并更新 state.sexCheckedList
• 攜帶篩選到的列表數(shù)據(jù)id，請(qǐng)求后端返回?cái)?shù)據(jù)
• 這里要注意map的使用，在處理后端返回的數(shù)據(jù)時(shí)經(jīng)過(guò)map處理會(huì)返回一個(gè)數(shù)組，后面需要把list賦給數(shù)組類型的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>

二、刷新列表

• 將后端返回?cái)?shù)據(jù)賦給我們使用的字段
• 在組件一掛載時(shí)就更新列表

<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>

三、刪除邏輯

• 點(diǎn)擊刪除圖標(biāo)，觸發(fā)相應(yīng)事件
• 獲取所選模特的id
• 攜帶參數(shù)發(fā)送請(qǐng)求
• 再次刷新列表

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將事件交由父組件監(jiān)聽(tīng)并執(zhí)行相應(yīng)的方法。
• 定義emits: 在子組件的選項(xiàng)中定義 emits 選項(xiàng)來(lái)聲明組件可以觸發(fā)的事件名稱。
• 觸發(fā)事件: 使用 $emit 方法來(lái)觸發(fā)這些事件，并傳遞相應(yīng)的參數(shù)。
• 父組件使用@監(jiān)聽(tīng)事件，并執(zhí)行相應(yīng)的處理函數(shù)。

<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><!-- 分頁(yè)器 --><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>

寫(xiě)在最后

• 又是熬夜的一天，一到晚上精神就好起來(lái)了（現(xiàn)在還是有點(diǎn)困了）
• 論實(shí)習(xí)遇到神仙師父什么感受哈哈哈，慶幸自己實(shí)習(xí)遇到的人都蠻好！開(kāi)心開(kāi)心（嘻嘻）
• 潦草的周報(bào)啊啊怎么寫(xiě)嘛！（不嘻嘻）
• 滾去睡覺(jué)了，開(kāi)啟第八周咯（馬上倆月了啊啊怎么怎么這么快）