t添加订单接口对接完成

gongjinbao

2025-01-09 cbe9a13f83d4876812e2f5201e0bc16c1b915054

t添加订单接口对接完成

 src/view/Home.vue

@@ -107,7 +107,6 @@
import UserInfo from '@/component/userInfo.vue'
import Header from '@/component/Header.vue'
import NoticeComponent from '@/component/Notice.vue'
import AddedInformation from '@/component/AddedInformation.vue'
import { getList } from './home'
export default {
    name: "Home",
@@ -115,7 +114,6 @@
        UserInfo,
        Header,
        NoticeComponent,
        AddedInformation
    },
    data() {
        return {

 src/view/addOrder.vue

@@ -8,7 +8,7 @@
          <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
        </div>
        <div class="box-cards">
          <div class="flex tab">
          <div class="flex tab"  v-if="type=='detail'">
            <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
              基础信息
            </div>
@@ -100,7 +100,7 @@
                    <div class="box_text2">Pickup Location</div>
                  </div>
                  <el-select v-model="form.pickupLocation" clearable placeholder="请选择">
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                    <el-option :label="item.label" :value="item.value" v-for="item in optionsPL"
                      :key="item.value"></el-option>
                  </el-select>
                </div>
@@ -114,7 +114,7 @@
                    </div>
                    <div class="box_text2">ETA</div>
                  </div>
                  <el-date-picker type="date" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
                  <el-date-picker type="datetime" suffix-icon="el-icon-date" placeholder="选择日期" v-model="form.ETA"
                    style="width: 100%">
                    <div></div>
                  </el-date-picker>
@@ -122,7 +122,7 @@
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="" prop="SOC" label-width="0">
              <el-form-item label="" class="label1" prop="SOC" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box4">
                    <div class="flex">
@@ -136,7 +136,7 @@
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="" prop="DG" label-width="0">
              <el-form-item label="" class="label7" prop="DG" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box5">
                    <div class="flex">
@@ -150,7 +150,7 @@
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="" prop="overweight" label-width="0">
              <el-form-item label="" class="label8" prop="overweight" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box6">
                    <div class="flex">
@@ -165,7 +165,7 @@
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="" class="" prop="customsInspection" label-width="0">
              <el-form-item label="" class="label4" prop="customsInspection" label-width="0">
                <div class="flex" style="align-items: center">
                  <div class="box7">
                    <div class="flex">
@@ -270,7 +270,7 @@
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="" class="label1" prop="weight" label-width="0px">
              <el-form-item label="" class="label6" prop="weight" label-width="0px">
                <div class="flex">
                  <div class="box9">
                    <div class="flex">
@@ -279,7 +279,7 @@
                    </div>
                    <div class="box_text2">Weight</div>
                  </div>
                  <el-input v-model="form.weight" placeholder="请输入">
                  <el-input v-model="form.weight" @input="onInput" placeholder="请输入">
                    <div style="line-height: 50px;" slot="prefix-icon">KG</div>
                  </el-input>
                </div>
@@ -294,7 +294,7 @@
                    </div>
                    <div class="box_text2">≈Pound weight</div>
                  </div>
                  <el-input v-model="form.poundWeight" placeholder="请输入">
                  <el-input disabled v-model="form.poundWeight" placeholder="请输入">
                    <div style="line-height: 50px;" slot="suffix">LBS</div>
                  </el-input>
                </div>
@@ -320,7 +320,7 @@
        <el-card class="box-card mt-13">
          <div slot="header" class="clearfix">
            <span class="clearfix_text">收件人信息 ｜ Consignee</span>
            <div class="clearfix_btn">
            <div class="clearfix_btn" @click="addShow">
              <img class="clearfix_btn_img" src="@/assets/addOrder/img5@2x.png" alt="" />
              <span>选择已添加信息</span>
            </div>
@@ -363,10 +363,9 @@
                      </div>
                      <div class="box_text2">Post</div>
                    </div>
                    <el-select v-model="form.post" clearable placeholder="请选择" prop="type">
                      <el-option :label="item.label" :value="item.value" v-for="item in options"
                        :key="item.value"></el-option>
                    </el-select>

                    <el-input v-model="form.post" placeholder="请输入"></el-input>

                  </div>
                </el-form-item>
                <el-form-item label="" class="label4" prop="address" label-width="0">
@@ -394,10 +393,8 @@
                        </div>
                        <div class="box_text2">Tel</div>
                      </div>
                      <el-select v-model="form.tel" clearable placeholder="请选择">
                        <el-option :label="item.label" :value="item.value" v-for="item in optionsSc"
                          :key="item.value"></el-option>
                      </el-select>
                      <el-input v-model="form.tel" placeholder="请输入"></el-input>

                    </div>
                  </el-form-item>
                  <div class="tip">
@@ -437,10 +434,10 @@
                <div class="box_text3">Other Information</div>
              </div>
              <quill-editor class="editor" v-model="form.specialRequest" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
              </quill-editor>
            </div>
         


          </div>
          <div class="flex " style="padding-bottom: 27px;">
@@ -454,29 +451,28 @@
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>
       



        </el-card>
  

        <el-card class="box-card mt-13">
          <div slot="header" class="clearfix">
            <span class="clearfix_text">附件</span>
          </div>
          <div class="box-carde">
            <div class="flex">
              <el-form-item label="Do：" class="mr-129" prop="DOFileUrl" label-width="88px">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                  :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                  <div class="upload_btn">+上传附件</div>
              <el-form-item label="Do：" class="w-316" prop="DOFileUrl" label-width="88px">

                <el-upload class="upload-demo" :on-preview="handlePreview" :http-request="handleUpload1" action="#"
                  :on-remove="handleRemove1" :on-exceed="handleExceed" :file-list="fileList1">
                  <div class="upload_btn" v-if="form.DOFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="PU#：" class="mr-129" prop="PUFileUrl" label-width="88px">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                  :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                  <div class="upload_btn">+上传附件</div>
              <el-form-item label="PU#：" class="w-316" prop="PUFileUrl" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove2"
                  :http-request="handleUpload2" action="#" :on-exceed="handleExceed" :file-list="fileList2">
                  <div class="upload_btn" v-if="form.PUFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="PU说明：" class="" prop="PUExplain" label-width="80px">
@@ -484,18 +480,16 @@
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="POD：" class="mr-129" prop="PODFileUrls" label-width="88px">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                  :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                  <div class="upload_btn">+上传附件</div>
              <el-form-item label="POD：" class=" w-316" prop="PODFileUrls" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove3"
                  :http-request="handleUpload3" action="#" :on-exceed="handleExceed" :file-list="fileList3">
                  <div class="upload_btn" v-if="form.PODFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="其他附件：" class="" prop="otherFileUrls" label-width="88px">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                  :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                  <div class="upload_btn">+上传附件</div>
              <el-form-item label="其他附件：" class="w-316" prop="otherFileUrls" label-width="88px">
                <el-upload class="upload-demo" :on-preview="handlePreview" :on-remove="handleRemove4"
                  :http-request="handleUpload4" action="#" :on-exceed="handleExceed" :file-list="fileList4">
                  <div class="upload_btn" v-if="form.otherFileUrl == ''">+上传附件</div>
                </el-upload>
              </el-form-item>
            </div>
@@ -506,31 +500,37 @@
      <DetailInfo v-else />

      <div class="btn">
        <div class="btn_close">关闭</div>
        <div class="btn_close" @click="$router.go(-1)">关闭</div>
        <div v-if="activeTab == 1" class="btn_comfirm" @click="submitForm('form')">确认</div>
      </div>
    </el-form>
    <AddedInformation v-if="show" :show="show" @close="show = false" @submit="submit"></AddedInformation>
  </div>
</template>

<script>
import { addOrder } from './addservier'
import { addOrder, getaddress } from './addservier'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import AddedInformation from '@/component/AddedInformation.vue'

import { quillEditor, Quill } from 'vue-quill-editor' //引入插件

import DetailInfoTop from '@/component/detailInfoTop'
import DetailInfo from '../component/detailInfo.vue'
import axios from 'axios'

export default {
  components: {
    quillEditor, DetailInfoTop, DetailInfo
    AddedInformation,
    quillEditor, DetailInfoTop, DetailInfo,
  },
  data() {
    return {
      type:'add',
      activeTab: 1,
      show: false,
      form: {
        container: "", //集装箱号
        bol: "", //提单号
@@ -559,8 +559,8 @@
        PUExplain: '',//PU说明
        PUFileUrl: '',//PU附件
        DOFileUrl: '',//DO附件
        PODFileUrls: '',//POD附件
        otherFileUrls: '',//其他附件
        PODFileUrl: '',//POD附件
        otherFileUrl: '',//其他附件
        specialRequest: '',//特殊要求
        remark: '',//备注
      },
@@ -588,6 +588,7 @@

      // 导入参数
      upload: {
        data: {},
        // 是否显示弹出层
        open: false,
        // 弹出层标题
@@ -601,7 +602,10 @@
        // 上传的地址
        url: 'http://47.108.239.173:2020' + "/api/oss/new_temp_upload"
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      options: [
        {
          value: "20GP",
@@ -694,23 +698,24 @@
          label: "others",
        },
      ],
      optionsPL: [],
      rules: {
        container: [{ required: true, message: "请输入", trigger: "blur" }],
        bol: [{ required: true, message: "请输入", trigger: "blur" }],
        cargoType: [{ required: true, message: "请选择", trigger: "change" }],
        carrier: [{ required: true, message: "请选择", trigger: "change" }],
        cargoType: [{ required: true, message: "请选择", trigger: "blur" }],
        carrier: [{ required: true, message: "请选择", trigger: "blur" }],
        vesselAndVoyage: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        pickupLocation: [
          { required: true, message: "请选择", trigger: "change" },
          { required: true, message: "请选择", trigger: "blur" },
        ],
        ETA: [{ required: true, message: "请选择", trigger: "change" }],
        SOC: [{ required: true, message: "请选择", trigger: "change" }],
        DG: [{ required: true, message: "请选择", trigger: "change" }],
        overweight: [{ required: true, message: "请选择", trigger: "change" }],
        ETA: [{ required: true, message: "请选择", trigger: "blur" }],
        SOC: [{ required: true, message: "请选择", trigger: "blur" }],
        DG: [{ required: true, message: "请选择", trigger: "blur" }],
        overweight: [{ required: true, message: "请选择", trigger: "blur" }],
        customsInspection: [
          { required: true, message: "请选择", trigger: "change" },
          { required: true, message: "请选择", trigger: "blur" },
        ],
        product: [{ required: true, message: "请输入", trigger: "blur" }],
        QTY: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -724,7 +729,41 @@
      },
    };
  },
  created() {
    getaddress({
      extra: JSON.parse(localStorage.getItem('userInfo')).extra
    }).then(resp => {
      console.log(resp, '----');
      if (resp.data.length > 0) {
        this.optionsPL = resp.data[0].ports.map(item => {
          item.value = item.port
          item.label = item.port
          return item
        })
      }


    })
  },
  methods: {
    addShow() {
      this.show = true
    },
    onInput(e) {
      this.form.poundWeight = Number(e * 2.2).toFixed(2)

    },
    submit(e) {
      console.log(e, 'e');
      this.form.contact = e.receiverName
      this.form.tel = e.receiverPhone
      this.form.email = e.receiverEmail

      this.form.address = e.receiverAddress
      this.form.remark = e.remark
      this.show =false

    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
@@ -742,38 +781,193 @@

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid, '----');


        if (valid) {
          alert("submit!");
          if (!this.form.tel && !this.form.email) {
            this.$message.error('联系电话和邮箱至少填写其中一项');

          } else {
            // 添加订单
            addOrder({
              ...this.form,
              extra: JSON.parse(localStorage.getItem('userInfo')).extra
            }).then(resp => {
              if (resp.data.status === 'SUCCESS') {
                this.$message.success('添加成功');
                this.form = {
                  container: "", //集装箱号
                  bol: "", //提单号
                  cargoType: "", //货柜类型
                  carrier: "", //船司
                  vesselAndVoyage: "", //航名航次
                  pickupLocation: "", //提柜地
                  ETA: "", //预计到达日期
                  SOC: "", //SOC
                  DG: "", //DG
                  overweight: "", //超重
                  customsInspection: "", //查验
                  dropOrLive: "", //DROP/LIVE
                  clientOrder: "", //客户订单号
                  product: "", //品名
                  QTY: "", //包装数量
                  weight: "", //重量
                  poundWeight: "", //≈重量(磅)
                  volume: "", //体积
                  contact: "", //收件人
                  consigneeCompany: "", //收件人公司
                  post: "", //目的地邮编
                  address: "", //地址
                  tel: "", //联系电话
                  email: "", //邮箱
                  PUExplain: '',//PU说明
                  PUFileUrl: '',//PU附件
                  DOFileUrl: '',//DO附件
                  PODFileUrl: '',//POD附件
                  otherFileUrl: '',//其他附件
                  specialRequest: '',//特殊要求
                  remark: '',//备注
                 
                }
                this.fileList1=[]
                this.fileList2=[]
                this.fileList3=[]
                this.fileList4=[]
                 
              }

            })
          }

        } else {
          console.log("error submit!!");
          this.$message.error('请填写必填内容');

          return false;
        }
      });
    },
    handleFileSuccesspicture(resp, file, fileList) {
      console.log(resp, file, fileList);


    },

    handlePreview(e) {
      console.log(e, 'e');

    },

    handleRemove(e) {
    handleRemove1(e) {
      console.log(e, 'e');


      this.form.DOFileUrl = '';
    },
    beforeRemove(e) {
    handleRemove2(e) {
      console.log(e, 'e');

      this.form.DOFileUrl = '';
    },
    handleRemove3(e) {
      console.log(e, 'e');
      this.form.DOFileUrl = '';
    },
    handleRemove4(e) {
      console.log(e, 'e');
      this.form.DOFileUrl = '';
    },

    handleExceed(e) {
      console.log(e, 'e');

    },
    uploadFile(e, obj, value) {
      axios.post('http://47.108.239.173:2020/api/oss/new_temp_upload', obj).then(res => {
        if (res.status == 200) {
          const fileName = new FormData();
          fileName.append('file', e.file);
          axios.post('http://47.108.239.173:2020/api/oss/upload_file', fileName, {
            headers: {
              'File-Name': res.data.data
            }
          }).then(resp => {
            console.log(resp, value, 'asdasdasdasdas');
            if (resp.data.status === 0) {
              if (value == 1) {
                this.form.DOFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else if (value == 2) {
                this.form.PUFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else if (value == 3) {
                this.form.PODFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              } else {
                this.form.otherFileUrl = 'http://47.108.239.173:2020/api/oss/download/' + res.data.data
              }
            }

          })
        }
      })
    },
    handleUpload1(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 1)

    },
    handleUpload2(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 2)

    },
    handleUpload3(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 3)

    },
    handleUpload4(e) {

      let obj = {
        orgId: JSON.parse(localStorage.getItem('userInfo')).extra,
        fileSize: e.file.size,
        fileSuffix: e.file.type.split('/')[1],
        originalName: e.file.name,
        fileSource: {
          appId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.appId,
          formId: JSON.parse(localStorage.getItem('userInfo')).companyExtra.formId,
          isDevelop: true,
        },
        uploadPath: 'file',
        uploadTargetType: 'FORM_ROW',
      }
      this.uploadFile(e, obj, 4)

    },
  },
@@ -783,6 +977,10 @@
<style lang="less" scoped>
.tab {
  padding-bottom: 35px;
}

.w-316 {
  width: 316px;
}

.noactive {
@@ -855,12 +1053,22 @@
  }
}

::v-deep .el-upload-list__item:first-child {
  margin-top: 0 !important;
}

::v-deep .el-form-item__content {
  margin: 0 !important;
}

::v-deep .el-card {
  border-radius: 6px !important;
}

::v-deep .upload-demo {
  display: flex !important;
  align-items: center !important;

}

::v-deep .el-card__body {
@@ -881,27 +1089,29 @@
  align-items: center !important;
}

::v-deep .el-radio__label {
  font-size: 16px !important;
  color: rgba(59, 63, 86, 0.8) !important;

::v-deep .el-radio__inner::after {
  display: none;
}

::v-deep .el-radio__inner {
  width: 24px !important;
  height: 24px !important;
  box-sizing: border-box;
}

::v-deep .el-radio__input.is-checked {
  padding: 4px 4px 3px 4px;
  border: 1px solid #014099;
  border-radius: 50%;
  box-sizing: border-box;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: 4px solid #fff !important;

  border-color: rgba(1, 64, 153, 1) !important;
  width: 12.5px !important;
  height: 12px !important;
  border: unset;
  background: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio__inner::after {
  // width: 16px !important;
  // height: 16px !important;
  // background-color: rgba(1, 64, 153, 1) !important;
}

::v-deep .el-radio {
@@ -1057,6 +1267,22 @@
  }
}

.label6 {
  ::v-deep .el-form-item__error {
    left: 110px !important;
  }
}
.label7{
  ::v-deep .el-form-item__error {
    left: 205px !important;
  }
}
.label8{
  ::v-deep .el-form-item__error {
    left: 188px !important;
  }
}

.label2 {
  ::v-deep .el-form-item__error {
    left: 214px !important;

 src/view/addservier.js

@@ -4,3 +4,11 @@
export const addOrder = (data) => {
  return axios.post("/zj0FFk5wx4S05X-zksG9xBd0i00XB-1", data);
};
//查询提柜地
export const getaddress = (data) => {
    return axios.post("/zj0FFk5wx4S05X-zksJKOZX19c0XC-1", data);
  };
export const uploader = (data) => {
    return axios.post("http://47.108.239.173:2020/api/oss/new_temp_upload", data);
  };