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

<template>
  <!-- 修改现货合同-->
  <a-modal class="commonModal modify-custom"
           title="修改现货合同"
           v-if="visible"
           v-model:visible="visible"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <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.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 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, onMounted, PropType, ref, toRaw, watchEffect } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods';
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';

interface Obj {
    [props: string]: any;
}
export default defineComponent({
    name: 'modify-spot-contract',
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
    },
    components: {},
    setup(props, context) {
        const { visible, cancel } = closeModal('spot_contract_btn_modify');
        const loading = ref<boolean>(false);
        const { formState, businessType } = handleFromState();
        console.log('props.selectedRow', props.selectedRow);

        // 表单
        const formRef = ref();

        const { rules } = handleFormRule(formState);
        // 合同类型
        const { contractType, isSell, contractChange, customList, queryCustomList } = handleContract();

        //  处理现货商品
        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[]>([]);
        watchEffect(() => {
            // // formState.ContractAttachment = props.selectedRow.attachment
            // formState.ContractAttachment = new Uint8Array()
            // formState.SpotGoodsBrandID = +props.selectedRow.spotcontractid
            if (props.selectedRow.contractno) {
                // 处理第一次加载的
                const obj: Obj = {};
                Object.keys(formState).forEach((el) => {
                    const key = el.toLocaleLowerCase() as keyof Ermcp3ContractRsp;
                    if (Reflect.has(props.selectedRow, key)) {
                        obj[el] = props.selectedRow[key];
                    } else {
                        console.warn(`${key}不对应`);
                    }
                });
                Object.assign(formState, obj);
                props.selectedRow.deliverygoodsid && deliveryGoodsChange(props.selectedRow.deliverygoodsid);
            }
        });
        function submit() {}
        initData(() => {
            queryCustomList();
            getDeliveryGoods();
            goodsList.value = getGoodsList();
            getRoleList();
            getBusinesserList();
        });
        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,
            getAmout,
            traderList,
            businesserList,
            merchandiserList,
        };
    },
});
</script>

<style lang="less">
.modify-custom {
}
</style
>;