pan
2025-11-18 ca881f5c16de3e6e63c4bd07f65d362cbac18c20
ÏîÄ¿´úÂë/WIDESEA_WMSClient/src/extension/outbound/outboundOrder.js
@@ -1,7 +1,7 @@
//此js文件是用来自定义扩展业务代码,可以扩展一些自定义页面或者重新配置生成的代码
import http from '@/api/http.js'
import { h,createVNode, render,reactive  } from 'vue';
import { h,createVNode, render,reactive ,ref } from 'vue';
import { ElDialog , ElForm, ElFormItem, ElInput, ElButton, ElMessage ,ElSelect, ElOption} from 'element-plus';
import gridBody from './extend/outOrderDetail.vue'
@@ -49,26 +49,63 @@
  value: '空托盘出库',
  onClick: function () {
    
    // 2. ç”Ÿæˆ3-12站台选项(默认第一个为站台3)
    const platformOptions = Array.from({ length: 1 }, (_, i) => {
      const num = 1;
      return { label: `站台${num}`, value: `1-2` };
    });
    const quantityOptions = Array.from({ length: 6 }, (_, i) => ({
      label: (i + 1).toString(),
      value: i + 1
    }));
    const warehouseOptions = ref([]);
    const isLoadingWarehouses = ref(false);
    const getWarehouseList = async () => {
      isLoadingWarehouses.value = true;
      try {
        const { data, status } = await http.post('/api/LocationInfo/GetLocationTypes');
        if (status && Array.isArray(data)) {
          // æ ¼å¼åŒ–仓库选项:适配ElSelect的label-value格式
          warehouseOptions.value = data.map(item => ({
            label: item.locationTypeDesc,
            value: item.locationType
          }));
        } else {
          ElMessage.error('获取区域列表失败');
          warehouseOptions.value = [];
        }
      } catch (err) {
        ElMessage.error('区域数据请求异常,请稍后重试');
        warehouseOptions.value = [];
      } finally {
        isLoadingWarehouses.value = false;
      }
    };
    const mountNode = document.createElement('div');
    document.body.appendChild(mountNode);
    // 3. è¡¨å•数据(默认选中站台3)
    const formData = reactive({
      warehouseCode:'',
      palletCode: '',
      selectedPlatform: platformOptions[0].value // é»˜è®¤ç»‘定站台3的value
      selectedPlatform: platformOptions[0].value,
      quantity:1
    });
    const vnode = createVNode(ElDialog, {
      title: '空托盘出库',
      width: '500px', // å¾®è°ƒå®½åº¦æ›´åè°ƒ
      width: '500px',
      modelValue: true,
      appendToBody: true,
      onOpened: async () => {
        await getWarehouseList();
        const inputRef = vnode.component.refs.boxCodeInput;
        inputRef?.focus();
      },
      'onUpdate:modelValue': (isVisible) => {
        if (!isVisible) {
          render(null, mountNode);
@@ -76,43 +113,72 @@
        }
      },
      style: {
        padding: '20px 0', // å¼¹çª—内上下留白,避免内容紧贴边框
        borderRadius: '8px' // è½»å¾®åœ†è§’,提升质感
        padding: '20px 0',
        borderRadius: '8px'
      }
    }, {
      default: () => h(ElForm, {
        model: formData,
        rules: {
          warehouseCode:[
            { required: true, message: '请选择区域', trigger: ['change', 'blur'] }
          ],
          palletCode: [
            { type: 'string', message: '料箱号必须为字符串', trigger: 'blur' }
          ],
          selectedPlatform: [
            { required: true, message: '请选择出库站台', trigger: 'change' }
          ]
          ],
          quantity:[
            { required: true, message: '请选择空箱数量', trigger: 'change'}
          ]
        },
        ref: 'batchOutForm',
        labelWidth: '100px', // å›ºå®šæ ‡ç­¾å®½åº¦ï¼Œç¡®ä¿å¯¹é½
        labelWidth: '100px',
        style: {
          padding: '0 30px', // è¡¨å•左右留白,增加呼吸感
          padding: '0 30px',
        }
      }, [
        // å‡ºåº“站台(上,优化样式)
       },
       [
      //   h(ElFormItem, {
      //     label: '仓库区域',
      //     prop: 'warehouseCode',
      //     style: {
      //       marginBottom: '24px'
      //     }
      //   }, [
      //     h(ElSelect, {
      //       placeholder: '请选择仓库区域',
      //       modelValue: formData.warehouseCode,
      //       'onUpdate:modelValue': (val) => {
      //         formData.warehouseCode = val;
      //       },
      //       style: {
      //         width: '100%',
      //         height: '40px',
      //         borderRadius: '4px',
      //         borderColor: '#dcdfe6'
      //       }
      //     }, warehouseOptions.value.map(platform =>
      //       h(ElOption, { label: platform.label, value: platform.value })
      //     ))
      //   ]),
        h(ElFormItem, {
          label: '出库站台',
          prop: 'selectedPlatform',
          style: {
            marginBottom: '24px' // è¡¨å•项间距优化
            marginBottom: '24px'
          }
        }, [
          h(ElSelect, {
            placeholder: '请选择出库站台(3-12)',
            placeholder: '请选择出库站台',
            modelValue: formData.selectedPlatform,
            'onUpdate:modelValue': (val) => {
              formData.selectedPlatform = val;
            },
            style: {
              width: '100%',
              height: '40px', // ç»Ÿä¸€ç»„件高度
              height: '40px',
              borderRadius: '4px',
              borderColor: '#dcdfe6'
            }
@@ -120,12 +186,38 @@
            h(ElOption, { label: platform.label, value: platform.value })
          ))
        ]),
        // æ‰˜ç›˜ç¼–号(下,优化样式)
      //   h(ElFormItem,{
      //     label:'出库数量',
      //     prop:'quantity',
      //     style:{
      //       marginBottom:'24px'
      //     }
      //   },[h(ElSelect,{
      //     placeholder:'请选择空箱数量',
      //     modelValue:formData.quantity,
      //     'onUpdate:modelValue':(val)=>{
      //       formData.quantity=val;
      //     },
      //     style:{
      //       width:'100%',
      //       height:'40px',
      //       borderRadius:'4px',
      //       borderColor:'#dcdfe6'
      //     },
      //     filterable:false
      //   },
      //   quantityOptions.map(option=>
      //     h(ElOption,{
      //       label:option.label,
      //       value:option.value
      //     })
      //   )
      // )]),
        h(ElFormItem, {
          label: '料箱号',
          prop: 'palletCode',
          style: {
            marginBottom: '16px' // ä¸ŽæŒ‰é’®åŒºæ‹‰å¼€åˆç†é—´è·
            marginBottom: '16px'
          }
        }, [
          h(ElInput, {
@@ -137,21 +229,21 @@
            },
            style: {
              width: '100%',
              height: '40px', // ä¸Žé€‰æ‹©å™¨é«˜åº¦ç»Ÿä¸€
              height: '40px',
              borderRadius: '4px',
              borderColor: '#dcdfe6'
            },
            attrs: {
              placeholderStyle: 'color: #909399;' // å ä½æ–‡å­—颜色优化,更柔和
              placeholderStyle: 'color: #909399;'
            }
          })
        ]),
        // åº•部按钮区(样式优化)
        h('div', {
          style: {
            textAlign: 'right',
            marginTop: '8px',
            paddingRight: '4px' // æŒ‰é’®ä¸Žå³ä¾§å¯¹é½å¾®è°ƒ
            paddingRight: '4px'
          }
        }, [
          h(ElButton, {
@@ -163,7 +255,7 @@
            },
            style: {
              marginRight: '8px',
              color: '#606266' // å–消按钮颜色优化
              color: '#606266'
            }
          }, '取消'),
          h(ElButton, {
@@ -180,7 +272,8 @@
                
              }).then(({ data, status, message }) => {
                if (status) {
                  ElMessage.success(`出库成功,分配的托盘编号:${data.palletCode || formData.palletCode}`);
                  ElMessage.success(`出库成功`);
                  this.refresh();
                  render(null, mountNode);
                  document.body.removeChild(mountNode);
@@ -193,7 +286,7 @@
            },
            style: {
              borderRadius: '4px',
              padding: '8px 20px' // æŒ‰é’®å†…边距优化,点击区域更舒适
              padding: '8px 20px'
            }
          }, '确定')
        ])
@@ -221,6 +314,13 @@
              );
          },
          click: (row) => {
            const table = this.$refs.table.$refs.table;
            if(table){
              table.clearSelection();
              table.toggleRowSelection(row,true);
            }
              const rowId =row.id;
              console.log(rowId);
              this.$refs.gridBody.open(row);
          }
      });