MTP2.0_WEB/src/views/information/spot-contract/components/add/index.vue

<template>
  <!-- 新增现货合同 -->
  <a-modal class="commonModal add-spot-contract"
           title="新增现货合同"
           v-model:visible="visible"
           centered
           :maskClosable="maskClosableFlag"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                class="cancelBtn"
                @click="submit">保存草稿</a-button>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">提交审核</a-button>
    </template>
    <a-form class="inlineForm"
            ref="formRef"
            :model="formState"
            :rules="rules">
      <fieldset class="formFieldSet">
        <legend>基本信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="合同编号"
                         name="ContractNo">
              <a-input class="dialogInput"
                       style="width: 200px"
                       v-model:value="formState.ContractNo"
                       placeholder="请输入合同编号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同类型"
                         name="ContractType">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        @change="contractChange"
                        v-model:value="formState.ContractType"
                        placeholder="请选择合同类型">
                <a-select-option v-for="item in contractType"
                                 :key="item.key"
                                 :value="item.key">
                  {{item.value}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务类型"
                         name="BizType">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        v-model:value="formState.BizType"
                        placeholder="请选择业务类型">
                <a-select-option v-for="item in businessType"
                                 :key="item.key"
                                 :value="item.key">
                  {{item.value}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="isSell">
            <a-col :span="12">
              <a-form-item label="采购方"
                           name="BuyUserID">
                <a-select class="inlineFormSelect"
                          style="width: 200px"
                          v-model:value="formState.BuyUserID"
                          placeholder="请选择客户">
                  <!-- 客户资料列表 正常 -->
                  <a-select-option :value="i"
                                   v-for="(item, i) in customList"
                                   :key="item.userid">
                    {{item.customername}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售方">
                <span class="white">{{getUserName()}}</span>
              </a-form-item>
            </a-col>
          </template>
          <template v-else>
            <a-col :span="12">
              <a-form-item label="采购方">
                <span class="white">{{getUserName()}}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="销售方"
                           name="SellUserID">
                <a-select class="inlineFormSelect"
                          v-model:value="formState.SellUserID"
                          style="width: 200px"
                          placeholder="请选择客户">
                  <!-- 客户资料列表 正常 -->
                  <a-select-option :value="i"
                                   v-for="(item, i) in customList"
                                   :key="item.userid">
                    {{item.customername}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :span="12">
            <a-form-item label="合同附件"
                         name="ContractAttachment">
              <div class="upload">
                <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                          :transform-file="transformFile">
                  <a-button class="uploadBtn">上传</a-button>
                </a-upload>
                <div class="look">查看附件</div>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>现货信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="现货品种"
                         name="DeliveryGoodsID">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        @change="deliveryGoodsChange"
                        v-model:value="formState.DeliveryGoodsID"
                        placeholder="请选择现货品种">
                <a-select-option v-for="item in deliveryGoodsList"
                                 :key="item.deliverygoodsid"
                                 :value="item.deliverygoodsid">
                  {{item.deliverygoodsname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品类"
                         name="WrStandardID">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        @change="WrStandardChange"
                        v-model:value="formState.WrStandardID"
                        placeholder="请选择品类">
                <a-select-option v-for="item in gmlist"
                                 :key="item.wrstandardid"
                                 :value="item.wrstandardid">
                  {{item.wrstandardname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品牌"
                         name="SpotGoodsBrandID">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        v-model:value="formState.SpotGoodsBrandID"
                        placeholder="请选择品牌">
                <a-select-option v-for="item in gblist"
                                 :key="item.brandid"
                                 :value="item.brandid">
                  {{item.brandname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="标仓系数"
                         name="ConvertFactor">
              <a-input class="dialogInput"
                       style="width: 200px"
                       v-model:value="formState.ConvertFactor"
                       readonly
                       placeholder="选择品类后自动填入" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="商品规格"
                         name="SpotGoodsDesc">
              <a-input class="dialogInput"
                       style="width: 200px"
                       v-model:value="formState.SpotGoodsDesc"
                       placeholder="请输入商品规格" />
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>价格信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="定价类型"
                         name="PriceType">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        v-model:value="formState.PriceType"
                        placeholder="请选择定价类型">
                <a-select-option v-for="item in priceType"
                                 :key="item.key"
                                 :value="item.key">
                  {{item.value}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="结算币种"
                         name="CurrencyID">
              <a-select class="inlineFormSelect"
                        v-model:value="formState.CurrencyID"
                        style="width: 200px"
                        placeholder="请选择结算币种">
                <a-select-option v-for="item in payCurrency"
                                 :key="item.enumdicid"
                                 :value="item.enumdicname">
                  {{item.enumdicname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数量"
                         name="Qty">
              <a-input class="dialogInput suffixGrey"
                       v-model:value="formState.Qty"
                       style="width: 200px"
                       placeholder="请输入数量"
                       :suffix="numberUnit" />
            </a-form-item>
          </a-col>
          <a-col :span="12"
                 v-if="formState.PriceType === 3">
            <a-form-item label="暂定价">
              <a-input class="dialogInput suffixGrey"
                       :suffix="payCurrencyUnit"
                       placeholder="请输入暂定价" />
            </a-form-item>
          </a-col>
          <!-- 以下是点价的价格信息 start -->
          <template v-if="formState.PriceType === 2 || formState.PriceType === 3">
            <a-col :span="12">
              <a-form-item label="点价合约"
                           name="GoodsID">
                <a-select class="inlineFormSelect"
                          v-model:value="formState.GoodsID"
                          style="width: 200px"
                          placeholder="请选择点价合约">
                  <a-select-option v-for="item in goodsList"
                                   :key="item.goodsid"
                                   :value="item.goodsid">
                    {{item.goodsname}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="升贴水"
                           name="PriceMove">
                <a-input class="dialogInput suffixGrey"
                         v-model:value="formState.PriceMove"
                         placeholder="请输入升贴水"
                         :suffix="`${payCurrencyUnit}/${numberUnit}`"
                         style="width: 200px" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="点价期">
                <a-range-picker v-model:value="priceDate"
                                class="commonPicker"
                                :disabled-date="disabledDate"
                                :show-time="{hideDisabledOptions: true}"
                                format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="交收期">
                <a-range-picker v-model:value="deliveryDate"
                                class="commonPicker"
                                :disabled-date="disabledDate"
                                :show-time="{hideDisabledOptions: true}"
                                format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
          </template>
          <!-- 以上是点价的价格信息 end -->
          <template v-if="formState.PriceType === 1">
            <a-col :span="12">
              <a-form-item label="价格"
                           name="Price">
                <a-input class="dialogInput suffixGrey"
                         v-model:value="formState.Price"
                         placeholder="请输入价格"
                         :suffix="`${payCurrencyUnit}/${numberUnit}`"
                         style="width: 200px" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="金额"
                           class="relative">
                <a-input class="dialogInput suffixGrey"
                         readonly
                         placeholder="输入数量和价格后自动算"
                         :suffix="payCurrencyUnit"
                         style="width: 200px" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="交收期">
                <a-range-picker v-model:value="deliveryDate"
                                style="width: 200px"
                                class="commonPicker"
                                :disabled-date="disabledDate"
                                :show-time="{hideDisabledOptions: true}"
                                format="YYYY-MM-DD" />
                <!-- <a-select class="inlineFormSelect"
                          style="width: 95px"
                          placeholder="请选择定价类型">
                  <a-select-option value="1">
                    日期一
                  </a-select-option>
                </a-select>
                <span class="to">-</span>
                <a-select class="inlineFormSelect"
                          style="width: 95px"
                          placeholder="请选择定价类型">
                  <a-select-option value="1">
                    日期二
                  </a-select-option>
                </a-select> -->
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>其他信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="保证金">
              <a-input class="dialogInput suffixGrey"
                       placeholder="请输入保证金"
                       style="width: 200px"
                       :suffix="payCurrencyUnit" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务员">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        placeholder="请选择业务员">
                <a-select-option value="1">
                  客户一
                </a-select-option>
                <a-select-option value="2">
                  客户二
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="跟单员">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        placeholder="请选择跟单员">
                <a-select-option value="1">
                  客户一
                </a-select-option>
                <a-select-option value="2">
                  客户二
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="期货账户">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        placeholder="请选择期货账户">
                <a-select-option value="1">
                  客户一
                </a-select-option>
                <a-select-option value="2">
                  客户二
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注">
              <a-input class="dialogInput"
                       style="width: 608px"
                       placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods';
import { handleFromState, handleContract, handlevalidate, handleDeliveryGoods, handlePrice, handleDate } from './setup';
import { getUserName } from '@/services/bus/user';
import { getGoodsList } from '@/services/bus/goods';
import { Goods } from '@/services/go/ermcp/goodsInfo/interface';
import { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface';
import { FormState } from './interface';

export default defineComponent({
    name: 'add-spot-contract',
    components: {},
    setup() {
        const { visible, cancel } = closeModal('spot_contract_btn_add');
        const loading = ref<boolean>(false);

        // 表单
        const formRef = ref();
        const { formState, businessType } = handleFromState();
        // 合同类型
        const { contractType, isSell, contractChange, customList, queryCustomList } = handleContract();
        // 自定义表单验证方法
        const { v_ContractType, v_BizType, v_BuyUser, v_SellUser, v_DeliveryGoods, v_WrStandard, v_SpotGoodsBrand, v_PriceType, v_Currency, v_Goods } = handlevalidate(formState);
        const rules = {
            ContractNo: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
            ContractType: [{ required: true, validator: v_ContractType, trigger: 'change' }],
            BizType: [{ required: true, validator: v_BizType, trigger: 'change' }],
            BuyUserID: [{ required: true, validator: v_BuyUser, trigger: 'change' }],
            SellUserID: [{ required: true, validator: v_SellUser, trigger: 'change' }],
            DeliveryGoodsID: [{ required: true, validator: v_DeliveryGoods, trigger: 'change' }],
            WrStandardID: [{ required: true, validator: v_WrStandard, trigger: 'blur' }],
            SpotGoodsBrandID: [{ required: true, validator: v_SpotGoodsBrand, trigger: 'blur' }],
            GoodsID: [{ required: true, validator: v_Goods, trigger: 'blur' }],
            ConvertFactor: [{ required: true, message: '请选择品类', trigger: 'blur' }],
            SpotGoodsDesc: [{ required: true, message: '请输入商品规格', trigger: 'blur' }],
            PriceType: [{ required: true, validator: v_PriceType, trigger: 'blur' }],
            CurrencyID: [{ required: true, validator: v_Currency, trigger: 'blur' }],
            Qty: [{ required: true, message: '请输入数量', trigger: 'blur' }],
            Price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
            PriceMove: [{ required: true, message: '请输入升贴水', trigger: 'blur' }],
        };
        //  处理现货商品
        const { deliveryGoodsList, gblist, gmlist, numberUnit, WrStandardChange, getDeliveryGoods, deliveryGoodsChange } = handleDeliveryGoods(formState);
        // 价格信息
        const { priceType, payCurrency, payCurrencyUnit, parCurrencyChange } = handlePrice(formState);
        // 日期
        const { deliveryDate, priceDate, disabledDate } = handleDate();
        // 现货商品列表
        const goodsList = ref<Goods[]>([]);
        function submit() {
            formRef.value
                .validate()
                .then(() => {
                    const param = toRaw(formState);
                    console.log('values', formState);
                })
                .catch((error: ValidateErrorEntity<FormState>) => {
                    console.log('error', error);
                });
        }
        initData(() => {
            queryCustomList();
            getDeliveryGoods();
            goodsList.value = getGoodsList();
        });
        return {
            visible,
            cancel,
            submit,
            formRef,
            loading,
            maskClosableFlag: false,
            formState,
            rules,
            businessType,
            contractType,
            isSell,
            contractChange,
            customList,
            deliveryGoodsList,
            gblist,
            gmlist,
            deliveryGoodsChange,
            WrStandardChange,
            priceType,
            payCurrency,
            payCurrencyUnit,
            parCurrencyChange,
            numberUnit,
            getUserName,
            deliveryDate,
            priceDate,
            disabledDate,
            goodsList,
        };
    },
});
</script>

<style lang="less">
.add-spot-contract {
}
</style>;