fishery-app/src/components/other/fish.vue

<template>
  <nut-row class="fishBody">
    <view class="sticky-header">
      <nut-col :span="24" class="view_f_between" :style="{ padding: '10px' }">
        <view class="font_28 c_222" @click="cancel">取消</view>
        <view class="font_28 c_17B4B2" @click="confirm">确定</view>
      </nut-col>
      <nut-col :span="24">
        <nut-searchbar
          v-model="fishName"
          max-length="20"
          placeholder="请输入鱼类名称"
          clearable
          background="#efefef"
          @search="search"
          @clear="resTypeList"
        >
          <template #leftin>
            <Search2 />
          </template>
          <template #rightin>
            <nut-button type="primary" size="small" @click="search(fishName)"
              >搜索</nut-button
            >
          </template>
        </nut-searchbar>
      </nut-col>
    </view>
    <nut-col :span="24">
      <nut-config-provider :theme-vars="themeVars">
        <nut-category :category="data.category" @change="changeText">
          <template #default>
            <nut-checkbox-group
              ref="group"
              v-model="props.fishIds"
              :style="{ marginLeft: '10px' }"
            >
              <nut-checkbox
                :label="item.catId"
                v-for="item in data.customCategory"
                shape="button"
                :style="{ paddingTop: '10px' }"
              >
                {{ item.catName }}
              </nut-checkbox>
            </nut-checkbox-group>
          </template>
        </nut-category>
      </nut-config-provider>
    </nut-col>
  </nut-row>
</template>
<script setup lang="ts" name="Fish">
import { fishList } from "@/api/pond";
import { Search2, Left, Photograph, Message } from "@nutui/icons-vue-taro";

import Taro from "@tarojs/taro";
const props = defineProps({
  // 选中的鱼类
  fishIds: {
    type: Array,
    default: function () {
      return [];
    },
  },
});
const fishArr = ref<any>([]);
const data = reactive({
  categoryInfo: {},
  category: [{}],
  customCategory: [{}],
});
// 鱼类名称-检索
const fishName = ref("");
const fishTypeNameMap = ref({
  1: "常见鱼种",
  2: "名优鱼",
  3: "虾蟹类",
  4: "观赏鱼",
  5: "海水鱼",
  6: "贝类",
  7: "龟鳖类",
  8: "蛙类",
  9: "其它",
});
// 鱼类列表信息
const fishArray = ref<any>([]);

// 主题样式
const themeVars = ref({
  checkboxLabelColor: "#222222",
  checkboxLabelMarginLeft: "20px",
  checkboxButtonFontSize: "14px",
  checkboxButtonBorderRadius: "10px",
  checkboxButtonBorderColor: "#ccc",
});
const emit = defineEmits(["cancel", "confirm"]);
/** -----------------method start----------------- */
onMounted(() => {
  getFishList();
});
// 鱼类列表
function getFishList() {
  fishList().then((res: any) => {
    if (res.code == 200) {
      fishArray.value = res.rows || [];
      resTypeList();
    }
  });
}
// 点击文字
function changeText(index) {
  data.customCategory = [].concat(data.categoryInfo.category[index].children);
}
// 检索鱼类
function search(e) {
  if (e) {
    data.category = [];
    const customCategory: any = [];
    data.categoryInfo.category.forEach((res) => {
      res.children.forEach((child) => {
        if (child.catName.includes(e)) {
          const obj = {
            catType: 1,
            catId: child.catId,
            catName: child.catName,
          };
          customCategory.push(obj);
        }
      });
    });
    data.customCategory = customCategory;
  } else {
    resTypeList();
  }
}
// 初始化类别列表
function resTypeList() {
  const resList = fishArray.value;
  // 初始化临时结果容器
  const typeMap = {};
  // 遍历数据并按类型进行分组
  for (const item of resList) {
    const fishType = item.fishType;
    const typeName = fishTypeNameMap.value[fishType];
    if (!typeMap[fishType]) {
      typeMap[fishType] = {
        id: typeName,
        name: typeName,
        children: [],
      };
    }
    typeMap[fishType].children.push({
      id: item.id,
      name: item.fishName,
      catId: item.id,
      catName: item.fishName,
    });
  }
  const category: any = [];
  const customCategory: any = [];
  for (let [key, value] of Object.entries(fishTypeNameMap.value)) {
    category.push({ catId: value, catName: value });
    const arr = {};
    arr["catId"] = String(value);
    arr["catName"] = value;
    arr["catType"] = 1;
    const children: any = [];
    resList.forEach((item) => {
      if (item.fishType == key) {
        children.push({ catId: String(item.id), catName: item.fishName });
      }
    });
    arr["children"] = children;
    customCategory.push(arr);
  }
  // 转换为所需数组格式
  const dataArr = Object.values(typeMap);
  fishArr.value = dataArr;
  data.category = category;
  data.customCategory = customCategory[0].children;
  data.categoryInfo = {
    level: 1,
    showPic: true,
    catType: 1,
    category: customCategory,
  };
}
// 取消
function cancel() {
  emit("cancel", "");
}
// 确定
function confirm() {
  const resList = fishArray.value;
  const fishNameList = [];
  resList.forEach((item) => {
    if (props.fishIds.includes(String(item.id))) {
      fishNameList.push(item.fishName);
    }
  });
  const fishInfo = fishNameList.length > 0 ? fishNameList.join("，") : "";
  emit("confirm", { res: props.fishIds, fishInfo });
}
/** -----------------method end------------------- */
</script>
<style lang="scss">
.fishBody{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
}
</style>