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

<template>
    <u-popup
      :show="show"
      mode="center"
      @close="close"
      @open="open"
      :round="10"
      :closeOnClickOverlay="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"
          :rules="rules"
          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"
              clearable
              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>
    </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() {
        this.$refs.locationForm.validate(valid => {
          if (valid) {
            this.close();
            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;
        }
      }
    }
  }
  </style>