pms-app/components/device/multiple.vue

<template>
  <uni-popup
    class="device-popup"
    ref="deviceChoosePopRef"
    type="bottom"
    :is-mask-click="false"
    borderRadius="10px 10px 0 0"
  >
    <z-paging
      class="page-nopadding z-page-popup"
      ref="paging"
      style="top: 100px"
      :default-page-size="15"
      v-model="dataList"
      @query="queryList"
    >
      <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
      <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
      <template #top>
        <view class="page-top">
          <uni-row class="head-row">
            <uni-col :span="22" class="head-title justify-center">
              {{ $t("device.selectDevice") }}
            </uni-col>
            <uni-col
              :span="2"
              class="head-cancel align-center justify-end"
              @click="oncancel"
            >
              <uni-icons type="closeempty" color="#333"></uni-icons>
            </uni-col>
          </uni-row>
          <view
            class="choice-row flex-row flex-wrap align-center justify-start"
          >
            <view
              class="choice-item align-center justify-center"
              v-for="item in chooseList"
              @click="onChooseDel(item)"
            >
              {{ item.deviceName }}
              <uni-icons
                class="choice-close-icon"
                type="closeempty"
                color="#fff"
              ></uni-icons>
            </view>
          </view>
          <uni-row class="search-row flex-rowc justify-between">
            <uni-col :span="18">
              <uni-easyinput
                v-model="searchValue"
                :styles="inputStyles"
                :placeholderStyle="placeholderStyle"
                :placeholder="`${$t('operation.PleaseInput')}`"
              >
              </uni-easyinput>
            </uni-col>
            <uni-col :span="6" class="flex-row justify-end">
              <button
                class="mini-btn"
                type="primary"
                size="mini"
                @click="searchList"
              >
                {{ $t("operation.search") }}
              </button>
            </uni-col>
          </uni-row>
          <uni-row
            :gutter="2"
            class="table-header flex-row align-center justify-between"
          >
            <uni-col :span="6" class="flex-row justify-center">
              {{ $t("device.deviceName") }}
            </uni-col>
            <uni-col :span="6" class="flex-row justify-center">
              {{ $t("device.assetCode") }}
            </uni-col>
            <uni-col :span="6" class="flex-row justify-center">
              {{ $t("device.department") }}
            </uni-col>
            <uni-col :span="6" class="flex-row justify-center">
              {{ $t("operation.createTime") }}
            </uni-col>
          </uni-row>
        </view>
      </template>
      <view class="page-table">
        <view class="table-content">
          <uni-row
            :gutter="2"
            class="item-row align-center"
            :class="{
              choosed: chooseIds.includes(item.id),
              'no-boms': item.hasSetMaintenanceBom === false,
            }"
            v-for="(item, index) in dataList"
            :key="index"
            @click="onChoose(item)"
          >
            <uni-col :span="6" class="item-col flex-row justify-start">
              {{ item.deviceName }}
            </uni-col>
            <uni-col :span="6" class="item-col flex-row justify-center">
              {{ item.deviceCode }}
            </uni-col>
            <uni-col :span="6" class="item-col flex-row justify-center">
              {{ item.deptName }}
            </uni-col>
            <uni-col :span="6" class="item-col flex-row justify-end">
              {{ item.createTime ? formatDate(item.createTime) : "" }}
            </uni-col>
          </uni-row>
        </view>
      </view>
      <template #bottom>
        <button style="border-radius: 0" type="primary" @click="onSubmit">
          {{ $t("operation.submit") }}
        </button>
      </template>
    </z-paging>
  </uni-popup>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import dayjs from "dayjs";
import { devicePage } from "@/api/device";

const searchValue = ref("");
const placeholderStyle = ref("color:#797979;font-weight:500;font-size:16px");
const inputStyles = reactive({
  backgroundColor: "#FFFFFF",
  color: "#797979",
});
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  devicePage({
    pageNo,
    pageSize,
    commonParam: searchValue.value,
  })
    .then((res) => {
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value.complete(res.data.list);
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false);
    });
};
const searchList = () => {
  paging.value.reload();
};
const formatDate = (time) => {
  return dayjs(time).format("YYYY-MM-DD");
};
// ----------------------------------------------
const deviceChoosePopRef = ref(null);
const open = () => {
  deviceChoosePopRef.value.open();
};
const close = () => {
  deviceChoosePopRef.value.close();
};
// 提供外部方法
const expose = {
  open,
};
defineExpose(expose);
const emit = defineEmits(["multiple-devide-submit"]);
// ---------------------------------------------
const chooseList = ref([]);
const chooseIds = computed(() => {
  // 返回chooseList的id组成新数组
  return chooseList.value.map((c) => c.id);
});
const onChoose = (item) => {
  // 判断当前点击的设备是否存在于chooseList中，
  // 若存在，则从chooseList中删除，否则添加到chooseList中
  // 若不存在则添加
  const index = chooseList.value.findIndex((v) => v.id === item.id);
  if (index > -1) {
    // chooseList.value.splice(index, 1)
  } else {
    chooseList.value.push(item);
  }
};
const onChooseDel = (item) => {
  // 判断当前点击的设备是否存在于chooseList中，
  // 若存在，则从chooseList中删除，否则添加到chooseList中
  const index = chooseList.value.findIndex((v) => v.id === item.id);
  if (index > -1) {
    chooseList.value.splice(index, 1);
  }
};
const oncancel = () => {
  chooseList.value = [];
  close();
};
const onSubmit = () => {
  emit("multiple-devide-submit", chooseList.value);
  chooseList.value = [];
  close();
  // uni.$emit('multiple-devide-submit', chooseList.value)
  // uni.navigateBack()
};
</script>

<style lang="scss" scoped>
@import "@/style/choose-device.scss";
.no-boms {
  background-color: #f2f6fc;
}
</style>