pms-app/components/local-search.vue

<template>
  <uni-popup
    class="local-search-popup"
    ref="localSearchPopRef"
    type="bottom"
    :is-mask-click="false"
    borderRadius="10px 10px 0 0 "
    background-color="#fff"
  >
  <view class="popup-content">

    <uni-row class="head-row align-center">
      <uni-col
        :span="6"
        class="head-cancel align-center justify-start"
        @click="oncancel"
      >
        {{ $t("operation.cancel") }}
      </uni-col>
      <uni-col :span="12" class="head-title justify-center">
        {{ title }}
      </uni-col>
      <uni-col :span="6" class="head-add align-center justify-end"> </uni-col>
    </uni-row>
    <uni-row class="search-row flex-row justify-between">
      <uni-col :span="24">
        <uni-easyinput
          v-model="searchValue"
          :styles="inputStyles"
          :placeholderStyle="placeholderStyle"
          :placeholder="`${$t('operation.PleaseInput')}`"
          :clearable="false"
          @input="searchList"
        >
        </uni-easyinput>
      </uni-col>
    </uni-row>
    <scroll-view scroll-y="true" class="page-table">
      <uni-row
        class="item-row align-center"
        :class="{ choosed: chooseIds.includes(item.value) }"
        v-for="(item, index) in dataList"
        :key="index"
        @click="onChoose(item)"
      >
        <uni-col :span="24" class="flex-row align-center">
          <text>{{ item.text }}</text>
        </uni-col>
      </uni-row>
    </scroll-view>
  </view>
  </uni-popup>
</template>

<script setup>
import dayjs from "dayjs";
import { computed, ref, reactive, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n({
  useScope: "global",
});
const chooseIds = ref([]);

const placeholderStyle = ref('color:#ADADAD;font-weight:400;font-size:12px')
	const inputStyles = reactive({
		backgroundColor: '#F5F5F5',
		color: '#797979',
	})
// 接收父组件传递的参数
const props = defineProps({});

const oncancel = () => {
  // 清空搜索值
  searchValue.value = "";
  // 关闭弹窗
  close();
};

onMounted(() => {});

// 本地搜索弹窗
const localSearchPopRef = ref(null);
// 搜索值
const searchValue = ref("");
// 弹窗标题
const title = ref("");
// 展示的列表数据的参数名
const propKey = ref("");
// 搜索列表数据
const dataList = ref([]);
// 原始数据列表
const dataListOrigin = ref([]);

// 搜索列表
const searchList = (event) => {
  console.log("🚀 ~ searchList ~ event:", event)
  console.log("🚀 ~ searchList ~ searchValue.value:", searchValue.value)
  if (event) {
    dataList.value = dataList.value.filter((item) => {
      return item.text.includes(event);
    });
  } else {
    dataList.value = dataListOrigin.value;
  }
};
// 选择列表项
const onChoose = (item) => {
  // 选择列表项时，判断是否已选择，已选择则取消选择，否则添加选择
  if (chooseIds.value.includes(item.value)) {
    // 已选择则取消选择
    chooseIds.value.splice(chooseIds.value.indexOf(item.value), 1);
  } else {
    // 未选择则添加选择
    chooseIds.value = [item.value];
  }
  emit("choosed", propKey.value, item);
  close();
};

// 打开弹窗
const open = (props) => {
  if (props.propKey !== propKey.value) {
    // 清空已选择的值
    chooseIds.value = [];
  }
  if (props.choosed) {
    // 已选择的值添加到已选择列表
    chooseIds.value = [props.choosed];
  }
  propKey.value = props.propKey;
  title.value = props.title;
  dataListOrigin.value = props.list;
  dataList.value = props.list;
  localSearchPopRef.value.open();
};

// 关闭弹窗
const close = () => {
  // 清空搜索值
  searchValue.value = "";
  localSearchPopRef.value.close();
};

const emit = defineEmits(["choosed"]);
// 提供外部方法
const expose = {
  open,
};
defineExpose(expose);
</script>

<style lang="scss" scoped>
@import "@/style/choose-device.scss";

.local-search-popup {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #cacccf;
  background-color: #fff;
  padding: 20px;
}

.popup-content {
  position: relative;
  width: 100%;
  height: calc(100% - 280px);
  max-height: 500px;
}

:deep(.uni-popup__wrapper) {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.head-row {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 21px;
  color: #a3a3a3;
  height: 40px;
  border-bottom: 1px dashed #cacccf;
}

.head-title {
  color: #333333;
  font-weight: bold;
}

.head-add {
  color: #004098;
}

.search-row {
  margin-bottom: 10px;
}
.page-table {
  width: 100%;
  position: relative;
  padding: 0;
  height: 500px;
}
.choosed {
  color: #004098;
}
</style>