aiot-app/pages/pda/workReport/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-radio-group
          class="radio-group"
          v-model="form.disposalStatus"
          placement="row"
          iconSize="32"
          labelSize="28"
        >
          <u-radio
            v-for="(it, idx) in disposalOpts"
            :key="idx"
            :customStyle="{ marginRight: '20rpx' }"
            :label="it.label"
            :name="it.value"
          ></u-radio>
        </u-radio-group>
      </view>
      <view class="form_item">
        <view class="label">执行状态</view>
        <u-radio-group
          class="radio-group"
          v-model="form.status"
          placement="row"
          iconSize="32"
          labelSize="28"
        >
          <u-radio
            v-for="(it, idx) in statusOpts"
            :key="idx"
            :customStyle="{ marginRight: '20rpx' }"
            :label="it.label"
            :name="it.value"
          ></u-radio>
        </u-radio-group>
      </view>
      <view class="form_item">
        <view class="label">班组名称</view>
        <u-input v-model="form.teamName" placeholder="请输入"></u-input>
      </view>
      <view class="form_item">
        <view class="label">产品名称</view>
        <u-input v-model="form.productName" placeholder="请输入"></u-input>
      </view>
      <view class="form_item">
        <view class="label">工序名称</view>
        <u-input v-model="form.workTaskName" placeholder="请输入"></u-input>
      </view>
      <view class="form_item">
        <view class="label">订单编码</view>
        <u-input v-model="form.workOrderCode" 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>
export default {
  props: {
    show: { type: Boolean, default: false },
  },
  data() {
    return {
      form: {
        disposalStatus: "",
        status: "",
        teamName: "",
        productName: "",
        workTaskName: "",
        workOrderCode: "",
      },
      disposalOpts: [
        { label: "待接收", value: 0 },
        { label: "已接收", value: 1 },
        { label: "已拒绝", value: 2 },
      ],
      statusOpts: [
        { label: "进行中", value: 1 },
        { label: "已转派", value: 2 },
        { label: "已取消", value: 3 },
        { label: "已关闭", value: 4 },
        { label: "已完成", value: 5 },
      ],
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
    reset() {
      this.form = {
        disposalStatus: "",
        status: "",
        teamName: "",
        productName: "",
        workTaskName: "",
        workOrderCode: "",
      };
      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;
    }
  }
  /deep/ .radio-group {
    flex-wrap: wrap;
    .u-radio__text {
      font-size: 28rpx !important;
    }
    .u-radio__icon-wrap {
      width: 32rpx !important;
      height: 32rpx !important;
    }
  }
  .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>