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="closeAction"
           width="890px">
    <template #footer>
      <a-button key="submit"
                class="cancelBtn"
                @click="submit(1)">保存草稿</a-button>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit(2)">提交审核</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="item.userid"
                                   v-for="item in customList"
                                   :key="item.userid">
                    {{item.nickname}}
                  </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="item.userid"
                                   v-for="item in customList"
                                   :key="item.userid">
                    {{item.nickname}}
                  </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.enumdicid">
                  {{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"
                       @change="getAmout"
                       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"
                       style="width: 200px"
                       :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-number 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"
                                style="width: 200px"
                                :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"
                                style="width: 200px"
                                :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"
                         @change="getAmout"
                         placeholder="请输入价格"
                         :suffix="`${payCurrencyUnit}/${numberUnit}`"
                         style="width: 200px" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="金额"
                           class="relative"
                           name="Amount">
                <a-input class="dialogInput suffixGrey"
                         v-model:value="formState.Amount"
                         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-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="保证金"
                         name="ContractMargin">
              <a-input class="dialogInput suffixGrey"
                       placeholder="请输入保证金"
                       v-model:value="formState.ContractMargin"
                       style="width: 200px"
                       :suffix="payCurrencyUnit" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务员"
                         name="SaleUserID">
              <a-select class="inlineFormSelect"
                        v-model:value="formState.SaleUserID"
                        style="width: 200px"
                        placeholder="请选择业务员">
                <a-select-option v-for="item in businesserList"
                                 :key="item.id"
                                 :value="item.id">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="跟单员"
                         name="MerUserID">
              <a-select class="inlineFormSelect"
                        v-model:value="formState.MerUserID"
                        style="width: 200px"
                        placeholder="请选择跟单员">
                <a-select-option v-for="item in merchandiserList"
                                 :key="item.id"
                                 :value="item.id">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="交易用户"
                         name="TradeUserID">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        v-model:value="formState.TradeUserID"
                        placeholder="请选择期货账户">
                <a-select-option v-for="item in traderList"
                                 :key="item.id"
                                 :value="item.id">
                  {{item.name}}
                </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, PropType, ref, toRaw } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods';
import { addContractReq } from './setup';
import { getUserName, getUsrId } 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';
import { formatTime } from '@/common/methods/format';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
import { handleAccountManager } from '../setup';
import { Moment } from 'moment';
import { handleFormRule, handleContract, handleDeliveryGoods, handleAmout, handlePrice, handleDate, handleFromState } from '../setup';
import { validateAction } from '@/common/setup/form';

export default defineComponent({
    name: 'add-spot-contract',
    components: {},
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
    },
    setup(props, context) {
        const { visible, cancel } = closeModal('spot_contract_btn_add');
        const { sendReq } = addContractReq();
        const loading = ref<boolean>(false);

        // 表单
        const formRef = ref();
        const { formState, businessType, initFormData } = handleFromState();
        const { rules } = handleFormRule(formState);
        // 合同类型
        const { contractType, isSell, contractChange, customList, queryCustomList } = handleContract(formState);

        //  处理现货商品
        const { deliveryGoodsList, gblist, gmlist, numberUnit, WrStandardChange, getDeliveryGoods, deliveryGoodsChange } = handleDeliveryGoods(formState);
        // 价格信息
        const { priceType, payCurrency, payCurrencyUnit, parCurrencyChange } = handlePrice(formState);
        // 日期
        const { deliveryDate, priceDate, disabledDate } = handleDate();
        // 处理金额
        const { getAmout } = handleAmout(formState);
        // 账号列表： 交易用户 业务员 跟单员
        const { traderList, businesserList, merchandiserList, getRoleList, getBusinesserList } = handleAccountManager();
        // 现货商品列表
        const goodsList = ref<Goods[]>([]);

        function submit(OperateType: 1 | 2) {
            validateAction<FormState>(formRef, formState).then((param) => {
                const id = getUsrId();
                isSell.value ? (param.SellUserID = id) : (param.BuyUserID = id);
                const fn = (value: Moment) => {
                    return formatTime(value, 'd') + ' ' + '00:00:00';
                };
                // 交收期
                const dDate = deliveryDate.value;
                if (dDate.length) {
                    const DeliveryStartDate = fn(dDate[0]);
                    const DeliveryEndDate = fn(dDate[1]);
                    Object.assign(param, { DeliveryStartDate, DeliveryEndDate });
                }

                // 点价期
                const pDate = priceDate.value;
                if (pDate.length && param.PriceType !== 1) {
                    // 点价日期[2:点价3:暂定价]
                    const StartDate = fn(pDate[0]);
                    const EndDate = fn(pDate[1]);
                    Object.assign(param, { StartDate, EndDate });
                }
                sendReq(param, loading, OperateType)
                    .then((res) => {
                        context.emit('refresh');
                        closeAction();
                    })
                    .catch((err) => {});
            });
        }
        function closeAction() {
            //清空添加成功后的数据，确保在此新增打开是个空数据
            Object.assign(formState, initFormData());
            cancel();
        }
        initData(() => {
            queryCustomList();
            getDeliveryGoods();
            goodsList.value = getGoodsList();
            getRoleList();
            getBusinesserList();
        });
        return {
            visible,
            closeAction,
            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,
            getAmout,
            traderList,
            businesserList,
            merchandiserList,
        };
    },
});
</script>

<style lang="less">
.add-spot-contract {
    .ant-upload-list-item-name {
        padding: 0 20px;
    }
}
</style>;