aiot-app/pages/ehs/accidentReport/drillOrderSelect.vue

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="cancel"
    class="drill-select-popup"
  >
    <view class="popup-content">
      <view class="popup-header"
        ><text class="popup-title">选择应急演练工单</text
        ><view class="close-btn" @click="cancel">×</view></view
      >
      <view class="search-row">
        <input
          class="search-input"
          v-model="searchKey"
          placeholder="请输入演练名称"
        />
        <button class="search-btn" @click="reload">搜索</button>
      </view>
      <scroll-view class="popup-body" scroll-y @scrolltolower="loadMore">
        <view
          v-for="(item, idx) in listData"
          :key="item.id"
          class="card-wrapper"
          @click="selectItem(item)"
        >
          <myCard
            :item="item"
            :index="idx + 1"
            :columns="cardColumns"
            :title="item.name"
            :showRadio="true"
            :radioValue="selectedId"
            @radioChange="selectItem"
          />
        </view>
        <view style="height: 20rpx"></view>
        <view v-if="loading" class="load-more">加载中...</view>
        <view v-if="isEnd && listData.length > 0" class="load-more"
          >没有更多了</view
        >
        <u-empty v-if="!loading && listData.length === 0" text="暂无工单" />
      </scroll-view>
      <view class="popup-footer">
        <u-button type="default" @click="cancel">取消</u-button>
        <u-button type="primary" :disabled="!selectedRow" @click="confirm"
          >确定</u-button
        >
      </view>
    </view>
    <u-toast ref="uToast" />
  </u-popup>
</template>

<script>
import myCard from "@/components/myCard.vue";
import { getList } from "@/api/emergencyDrill/workOrder.js";

export default {
  components: { myCard },
  data() {
    return {
      visible: false,
      searchKey: "",
      listData: [],
      page: 1,
      size: 10,
      isEnd: false,
      loading: false,
      selectedRow: null,
      selectedId: null,
      cardColumns: [
        [{ prop: "planName", label: "演练计划名称", className: "perce100" }],
        [
          { prop: "planLocation", label: "演练地点", className: "perce50" },
          {
            prop: "superviseDeptName",
            label: "主管部门",
            className: "perce50",
          },
        ],
      ],
    };
  },
  methods: {
    open() {
      this.visible = true;
      this.searchKey = "";
      this.page = 1;
      this.isEnd = false;
      this.listData = [];
      this.selectedRow = null;
      this.selectedId = null;
      this.getList();
    },
    cancel() {
      this.visible = false;
    },
    selectItem(item) {
      this.selectedRow = item;
      this.selectedId = item.id;
    },
    confirm() {
      if (!this.selectedRow) {
        this.$refs.uToast.show({ type: "warning", message: "请选择一条工单" });
        return;
      }
      this.$emit("confirm", this.selectedRow);
      this.cancel();
    },
    reload() {
      this.page = 1;
      this.isEnd = false;
      this.listData = [];
      this.getList();
    },
    async getList() {
      if (this.loading || this.isEnd) return;
      this.loading = true;
      try {
        const params = {
          pageNum: this.page,
          size: this.size,
          name: this.searchKey || undefined,
        };
        const res = await getList(params);
        const list = res.list || [];
        if (this.page === 1) this.listData = list;
        else this.listData = this.listData.concat(list);
        this.isEnd =
          list.length < this.size || this.listData.length >= res.count;
        this.page += 1;
      } catch (e) {
        this.$refs.uToast.show({ type: "error", message: e.message });
      } finally {
        this.loading = false;
      }
    },
    loadMore() {
      if (!this.isEnd && !this.loading) this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.drill-select-popup {
  /deep/ .u-popup__content {
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;
  }
}
.popup-content {
  height: 75vh;
  display: flex;
  flex-direction: column;
  background: #eff2f7;
}
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 32rpx;
  background: #fff;
  border-bottom: 2rpx solid #eef2f6;
  flex-shrink: 0;
  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
  }
  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52rpx;
    color: #8e9aae;
  }
}
.search-row {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #fff;
  gap: 12rpx;
  flex-shrink: 0;
  .search-input {
    flex: 1;
    height: 64rpx;
    background: #f5f7fb;
    border-radius: 48rpx;
    padding: 0 24rpx;
    font-size: 26rpx;
  }
  .search-btn {
    height: 64rpx;
    padding: 0 32rpx;
    background: $theme-color;
    border-radius: 48rpx;
    color: #fff;
    font-size: 26rpx;
    line-height: 64rpx;
  }
}
.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 16rpx 24rpx;
}
.card-wrapper {
  margin-top: 16rpx;
}
.popup-footer {
  display: flex;
  padding: 16rpx 24rpx;
  background: #fff;
  border-top: 2rpx solid #eef2f6;
  gap: 16rpx;
  flex-shrink: 0;
  /deep/ .u-button {
    flex: 1;
    border-radius: 48rpx;
    height: 72rpx;
  }
}
.load-more {
  text-align: center;
  font-size: 26rpx;
  color: #aaa;
  padding: 20rpx 0;
}
</style>