jsh_erp_app/pages/inventory-task/components/categoryPopup.vue

<template>
  <u-popup
    :show="show"
    mode="center"
    @close="close"
    @open="open"
    :round="10"
    :closeOnClickOverlay="false"
    :safeAreaInsetBottom="false"
    width="580rpx"
  >
    <view class="location-edit-popup">
      <view class="popup-header">
        <text class="popup-title">修改库位</text>
        <u-icon name="close" size="20" @click="close"></u-icon>
      </view>

      <u-form
        :model="formData"
        ref="locationForm"
        labelPosition="top"
        labelWidth="100%"
        :borderBottom="false"
      >
        <u-form-item label="原库位" prop="originLocation" :borderBottom="false">
          <u--input
            v-model="formData.originLocation"
            border="surround"
            placeholder="请输入原库位"
            height="80rpx"
            disabled
            fontSize="28rpx"
            color="#333333"
          ></u--input>
        </u-form-item>

        <u-form-item
          label="新库位"
          prop="newLocation"
          :borderBottom="false"
          class="mt-20"
        >
          <u--input
            v-model="formData.newLocation"
            border="surround"
            placeholder="请输入新库位"
            height="80rpx"
            clearable
            fontSize="28rpx"
            color="#333333"
          ></u--input>
        </u-form-item>
      </u-form>

      <view class="btn-group">
        <u-button
          class="btn cancel-btn"
          :plain="true"
          shape="square"
          @click="onCancel"
          >取消</u-button
        >
        <u-button
          class="btn confirm-btn"
          type="primary"
          shape="square"
          @click="onConfirm"
          >确认</u-button
        >
      </view>
      <view class="tips-box"> *修改库位后，经过erp后台审核后方可生效 </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "locationEditPopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    originalLocation: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        originLocation: "",
        newLocation: "",
      },
      // rules: {
      //   newLocation: {
      //     type: "string",
      //     required: true,
      //     message: "请输入新库位",
      //     trigger: ["blur", "change"],
      //   },
      // },
    };
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.formData.originLocation = this.originalLocation;
        this.formData.newLocation = "";
      }
    },
    originalLocation(val) {
      this.formData.originLocation = val;
    },
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    open() {},
    onCancel() {
      this.close();
      this.$emit("cancel");
    },
    onConfirm() {
      console.log(999000);
      if (!this.formData.newLocation) {
        uni.$u.toast("请输入新库位");
        return;
      }
      this.$emit("confirm", this.formData.newLocation);
    },
  },
};
</script>

<style lang="scss" scoped>
.location-edit-popup {
  padding: 30rpx;
  width: 580rpx;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .mt-20 {
    margin-top: 20rpx;
  }

  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    .btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;

      &.cancel-btn {
        margin-right: 20rpx;
        color: #666666;
        border-color: #dddddd;
      }

      &.confirm-btn {
        background-color: #2979ff;
      }
    }
  }

  .tips-box {
    color: #bfc8db;
    font-size: 24rpx;
    font-weight: 400;
    margin-top: 24rpx;
  }
}
</style>