ZhongRui/ALDbanyunxiangmu.git

 
//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
import http from '@/api/http.js'
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'
let extension = {
    components: {
      //查询界面扩展组件
      gridHeader: '',
      gridBody: gridBody,
      gridFooter: '',
      //新建、编辑弹出框扩展组件
      modelHeader: '',
      modelBody: '',
      modelFooter: ''
    },
    tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
    buttons: { view: [
       /* {
        name: '出库',
        type: 'primary',
        value: '出库',
        onClick: function () { // 修复：用ElMessage替代this.$message
          const selectedRows = this.$refs.table.getSelected();
          if (selectedRows.length === 0) {
            ElMessage.warning('请先选择要生成任务的行');
            return;
          }
          if (selectedRows.length > 1) {
            ElMessage.warning('只能选择一行');
            return;
          }
    
 
          // 所有校验通过，触发主组件打开出库弹窗
          console.log('所有校验通过，触发openOutboundDialog事件，单据数据：', selectedRows[0]);
         
          this.$emit('openOutboundDialog', {
            transNo: selectedRows[0].transNo,       // 出库单编号
            createDate: selectedRows[0].createDate || new Date().toLocaleDateString()  // 出库日期
          });
        }
      }, */
      {
  name: '空托盘出库',
  type: 'primary',
  value: '空托盘出库',
  onClick: function () {
    
   
    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);
 
    
    const formData = reactive({
      warehouseCode:'',
      palletCode: '',
      selectedPlatform: platformOptions[0].value,
      quantity:1 
    });
 
    const vnode = createVNode(ElDialog, {
      title: '空托盘出库',
      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);
          document.body.removeChild(mountNode);
        }
      },
      style: {
        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', 
        style: {
          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' 
          }
        }, [
          h(ElSelect, {
            placeholder: '请选择出库站台',
            modelValue: formData.selectedPlatform,
            'onUpdate:modelValue': (val) => {
              formData.selectedPlatform = val;
            },
            style: {
              width: '100%',
              height: '40px', 
              borderRadius: '4px',
              borderColor: '#dcdfe6'
            }
          }, platformOptions.map(platform => 
            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' 
          }
        }, [
          h(ElInput, {
            type: 'text',
            placeholder: '可选输入料箱号，不填则自动分配空料箱',
            modelValue: formData.palletCode,
            'onUpdate:modelValue': (val) => {
              formData.palletCode = val;
            },
            style: {
              width: '100%',
              height: '40px', 
              borderRadius: '4px',
              borderColor: '#dcdfe6'
            },
            attrs: {
              placeholderStyle: 'color: #909399;' 
            }
          })
        ]),
        
        h('div', {
          style: {
            textAlign: 'right',
            marginTop: '8px',
            paddingRight: '4px' 
          }
        }, [
          h(ElButton, {
            type: 'text',
            onClick: () => {
              render(null, mountNode);
              document.body.removeChild(mountNode);
              ElMessage.info('取消出库操作');
            },
            style: {
              marginRight: '8px',
              color: '#606266' 
            }
          }, '取消'),
          h(ElButton, {
            type: 'primary',
            onClick: async () => {
              const formRef = vnode.component.refs.batchOutForm;
              try {
                await formRef.validate();
              } catch (err) {
                return;
              }
 
              http.post('/api/Task/PalletOutboundTask?palletCode='+formData.palletCode+'&endStation='+formData.selectedPlatform, {
                
              }).then(({ data, status, message }) => {
                if (status) {
 
                  ElMessage.success(`出库成功`);
                  this.refresh();
                  render(null, mountNode);
                  document.body.removeChild(mountNode);
                } else {
                  ElMessage.error(message || data?.message || '出库失败');
                }
              }).catch(() => {
                ElMessage.error('请求失败，请稍后重试');
              });
            },
            style: {
              borderRadius: '4px',
              padding: '8px 20px' 
            }
          }, '确定')
        ])
      ])
    });
 
    vnode.appContext = this.$.appContext;
    render(vnode, mountNode);
  }
}
    ], box: [], detail: [] }, //扩展的按钮
    methods: {
       //下面这些方法可以保留也可以删除
      onInit() {  
        //扩展页面初始化操作
        this.columns.push({
          field: '操作',
          title: '操作',
          width: 90,
          fixed: 'right',
          align: 'center',
          formatter: (row) => {
              return (
                  '<i style="cursor: pointer;color: #2d8cf0;"class="el-icon-view">查看明细</i>'
              );
          },
          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);
          }
      });
      },
      onInited() {
        //框架初始化配置后
        //如果要配置明细表,在此方法操作
        //this.detailOptions.columns.forEach(column=>{ });
      },
      searchBefore(param) {
        //界面查询前,可以给param.wheres添加查询参数
        //返回false，则不会执行查询
       //   this.searchFormFields.orderType=[215]
 
        let wheres = [{
            'name': 'orderType',
            'value': '215',
            'displayType': 'text'}];
   
 
          param.wheres.push(...wheres);
        return true;
      },
      searchAfter(result) {
        //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
        return true;
      },
      addBefore(formData) {
        //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
        return true;
      },
      updateBefore(formData) {
        //编辑保存前formData为对象，包括明细表、删除行的Id
        return true;
      },
      rowClick({ row, column, event }) {
        //查询界面点击行事件
        this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
      },
      modelOpenAfter(row) {
        //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
        //(1)判断是编辑还是新建操作： this.currentAction=='Add';
        //(2)给弹出框设置默认值
        //(3)this.editFormFields.字段='xxx';
        //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
        //看不懂就把输出看：console.log(this.editFormOptions)
      }
    }
  };
  export default extension;