aiot-app/pages/qms/inspectionWork/components/inspectionWorkDialog.vue

<template>
  <u-popup :show="show" mode="center" :round="10" @close="close">
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">选择质检工单</text>
        <view class="close-btn" @click="close">×</view>
      </view>

      <view class="popup-body">
        <view class="search-wrap">
          <u-input v-model="keyword" placeholder="请输入工单编码或名称" border="surround" @confirm="search"></u-input>
        </view>
        <scroll-view scroll-y class="list-scroll">
          <view class="list-item" v-for="(item, index) in list" :key="index" @click="selectItem(item)">
            <view class="item-main">
              <text class="item-code">{{ item.code }}</text>
              <text class="item-name">{{ item.name }}</text>
            </view>
            <text class="arrow">›</text>
          </view>
          <view class="empty-text" v-if="list.length === 0">
            暂无数据
          </view>
        </scroll-view>
      </view>

      <view class="popup-footer">
        <u-button type="default" @click="close">取消</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      keyword: '',
      list: []
    };
  },
  methods: {
    open() {
      this.show = true;
      this.keyword = '';
      this.search();
    },
    close() {
      this.show = false;
    },
    search() {
      // 这里调用后端接口获取质检工单列表
      // 示例代码，需要替换为实际接口
      // getQualityWorkOrderList({ keyword: this.keyword }).then(res => {
      //   this.list = res.list;
      // });
      // 临时模拟数据
      this.list = [];
    },
    selectItem(item) {
      this.$emit('changeParent', item);
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.popup-content {
  width: 80vw;
  max-height: 80vh;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #e5e5e5;

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60rpx;
    color: #999;
    line-height: 1;
  }
}

.popup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20rpx 30rpx;
}

.search-wrap {
  margin-bottom: 20rpx;
}

.list-scroll {
  flex: 1;
  max-height: 60vh;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .item-main {
    flex: 1;
    display: flex;
    flex-direction: column;

    .item-code {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
    }

    .item-name {
      font-size: 26rpx;
      color: #999;
    }
  }

  .arrow {
    color: #999;
    font-size: 40rpx;
    line-height: 1;
    margin-left: 20rpx;
  }
}

.empty-text {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}

.popup-footer {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #e5e5e5;

  /deep/ .u-button {
    width: 100%;
  }
}
</style>