aiot-app/pages/production/execute/components/carPopu.vue

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <div class="popup">
        <div class="popup-top">
          <div class="top-left">选择周转车</div>
          <div class="top-right">
            <button @click="close">关闭</button>
            <button @click="confirm">确定</button>
          </div>
        </div>
        <view class="search-box">
          <uni-easyinput
            prefixIcon="search"
            v-model="searchKey"
            placeholder="请输入搜索内容"
          >
          </uni-easyinput>
          <view class="search-botton">搜索</view>
        </view>
        <uni-table
          border
          stripe
          type="selection"
          ref="tableRef"
          emptyText="暂无更多数据"
          @selection-change="selectionChange"
        >
          <uni-tr>
            <uni-th align="center">编码</uni-th>
            <uni-th align="center">名称</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in tableDataShow" :key="index">
            <uni-td>{{ item.code }}</uni-td>
            <uni-td>{{ item.name }}</uni-td>
          </uni-tr>
        </uni-table>
      </div>
    </uni-popup>
  </view>
</template>

<script>
import { getByRootLevelId } from "@/api/classifyManage/itemInformation";
export default {
  components: {},
  data() {
    return {
      searchKey: "",
      tableData: [],
      selectedIndexs: [],
    };
  },
  mounted() {
    this._getList();
  },
  computed: {
    tableDataShow() {
      return this.tableData.filter((item) => {
        if (!this.searchKey) return true;

        return (
          item.code.includes(this.searchKey) ||
          item.name.includes(this.searchKey)
        );
      });
    },
  },
  methods: {
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.selectedIndexs = [];
      this.$refs.tableRef.clearSelection();
      this.$refs.popup.close();
    },
    confirm() {
      if (!this.selectedIndexs.length) {
        return uni.showToast({
          title: "请选择周转车",
          icon: "none",
        });
      }
      this.$emit(
        "confirm",
        this.tableData.filter((itm, index) =>
          this.selectedIndexs.includes(index)
        )
      );
      this.close();
    },
    // 多选
    selectionChange(e) {
      this.selectedIndexs = e.detail.index;
    },
    async _getList() {
      const res = await getByRootLevelId(7);
      this.tableData = res;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup {
  width: 100%;
  height: 900rpx;
  background: #fff;
  .popup-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    background: rgba(21, 122, 44, 1);
    color: #fff;
    .top-left {
      font-size: 32rpx;
      margin-left: 10rpx;
    }
    .top-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 10rpx;
      uni-button {
        background: rgba(21, 122, 44, 1);
        color: #fff;
        width: 100rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        padding: 0;
        border: 1rpx solid #fff;
        margin-left: 20rpx;
      }
    }
  }
  .search-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 94%;
    margin: 20rpx auto;
    .search-botton {
      background: rgba(112, 182, 3, 1);
      color: #fff;
      padding: 10rpx 20rpx;
      border-radius: 8rpx;
      margin-left: 20rpx;
    }
  }
}
</style>