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

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

news 来源：原创 2025/5/8 23:54:00

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

总结

上周新增自定义表单对话框修改完善
更多筛选模特对话框完成
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">
                <PicItem
                    v-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>
                <APagination
                    v-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>