aiot-app/pages/pda/outsourcing/components/searchPopup.vue

<template>
  <u-popup
    :show="show"
    mode="top"
    :round="10"
    closeable
    @close="close"
    bgColor="#fff"
  >
    <view class="search_wrap">
      <view class="title">筛选</view>
      <view class="form_item">
        <view class="label">关键字</view>
        <u-input
          v-model="form.keyWord"
          placeholder="请输入型号、规格、批次号"
        ></u-input>
      </view>
      <view class="form_item">
        <view class="label">工单编码</view>
        <u-input v-model="form.workOrderCode" placeholder="请输入"></u-input>
      </view>
      <view class="form_item">
        <view class="label">委外名称</view>
        <u-input v-model="form.name" placeholder="请输入"></u-input>
      </view>
      <view class="form_item">
        <view class="label">委外编码</view>
        <u-input v-model="form.code" placeholder="请输入"></u-input>
      </view>
      <view class="btns">
        <button class="btn reset" @click="reset">重置</button>
        <button class="btn confirm" @click="confirm">确定</button>
      </view>
    </view>
  </u-popup>
</template>

<script>
const defaultForm = () => ({
  keyWord: "",
  workOrderCode: "",
  name: "",
  code: "",
});

export default {
  props: {
    show: { type: Boolean, default: false },
  },
  data() {
    return {
      form: defaultForm(),
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    reset() {
      this.form = defaultForm();
      this.$emit("search", { ...this.form });
      this.close();
    },
    confirm() {
      this.$emit("search", { ...this.form });
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.search_wrap {
  padding: 30rpx 30rpx 40rpx;
  .title {
    font-size: 32rpx;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .form_item {
    margin-bottom: 24rpx;
    .label {
      font-size: 26rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
  }
  .btns {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
    .btn {
      flex: 1;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
    .reset {
      background: #f5f5f5;
      color: #333;
    }
    .confirm {
      background: $theme-color;
      color: #fff;
    }
  }
}
</style>