result.vue

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">

      <el-form-item :label="$t('报价单号')">
        <div>{{number}}</div>
      </el-form-item>

      <el-form-item :label="$t('结果')" prop="result">
        <dict-selector form-type="radio" :type="DICT_TYPE.ECW_OFFER_RESULT" v-model="form.result" />
      </el-form-item>

      <template v-if="form.result==1">
        <el-form-item :label="$t('入仓类型')" prop="warehousingType">
          <dict-selector :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" v-model="form.warehousingType" />
        </el-form-item>
        <el-form-item :label="$t('关联订单')" prop="orderIds">
          <!-- <el-input v-model="form.orderIds" style="width: 206px;"></el-input> -->
          <el-select
            v-model="form.orderNo"
            filterable
            remote
            reserve-keyword
            :placeholder="$t('订单号')"
            @focus="checkOptions"
            :remote-method="remoteMethod"
            :loading="selectLoading">
            <el-option
              v-for="item in orderNoList"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item :label="$t('原因')" prop="reason">
          <el-input style="width: 500px;" type="textarea" placeholder="" v-model="form.reason"></el-input>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="submitForm">{{form.result==1? $t("确定并新增草稿订单") : $t("提交")}}</el-button>
        <el-button @click="$router.back()">{{ $t('返 回') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { updateOfferResult } from '@/api/ecw/offer';

import CustomersSelector from '@/components/CustomersSelector'
import RoutersSelector from '@/components/RoutersSelector'
import ProductsSelector from '@/components/ProductsSelector'
import Editor from '@/components/Editor'
import Selector from '@/components/Selector/index'
import {getOrderNoSearch} from '@/api/ecw/order'
export default {
  name: "OfferResult",
  components: { CustomersSelector, RoutersSelector, ProductsSelector, Editor, Selector },
  data() {
    return {
      number: null,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        "number": null,
        "offerId": undefined,
        "orderIds": undefined,
        "reason": undefined,
        "result": 1,
        "warehousingType": undefined
      },
      // 表单校验
      rules: {
        warehousingType: {required: true, message: this.$t('请选择入仓类型')}
      },
      selectLoading: false,
      orderNoList: []
    };
  },
  computed: {

  },
  watch: {

  },
  created() {
    if(this.$route.query.number){
      this.number = this.$route.query.number
    }
    if(this.$route.query.offerId){
      this.form.offerId = this.$route.query.offerId
    }
    
  },
  methods: {
    
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        let data = Object.assign({}, this.form)
        updateOfferResult(data).then(response => {
          if(response.data > 0){
            this.$message.success(this.$t('赢单成功'))
            this.$redirect('../order/edit?id=' + response.data)
            return
          }
          this.$message.success(this.$t('输单成功'))
          this.$router.back();
        });
      });
    },
    remoteMethod(query){
      this.selectLoading = true
      getOrderNoSearch({key: query, pageSize: 200}).then(res => {
        this.orderNoList = res.data.list
      }).finally(res => {
        this.selectLoading = false
      })
    },
    checkOptions(){
      if(!this.orderNoList.length){
        this.remoteMethod("")
      }
    }
  },
};
</script>