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" centered width="890px">
    <template #footer>
      <a-button key="submit" type="primary" :loading="loading" :disabled="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="item.userid" v-for="item 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="item.userid" v-for="item 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">
              <UploadImg :visible="visible" :imgList="uploadImgList" @upload="uploadImgAction" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="交易主体" name="SubjectID">
              <a-select class="inlineFormSelect" style="width: 200px" v-model:value="formState.SubjectID" placeholder="请选择主体">
                <a-select-option :value="item.subjectid" v-for="item in subjectList" :key="item.subjectid">
                  {{ item.subjectname }}
                </a-select-option>
              </a-select>
            </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 wrstandardList" :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 barandList" :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="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.enumitemname" :value="item.enumitemname">
                  {{ 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="请输入升贴水" :min="0" :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.userid" :value="item.userid"> {{ item.accountname }}-{{ item.logincode }} </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.userid" :value="item.userid"> {{ item.accountname }}-{{ item.logincode }} </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.roleid" :value="item.roleid">
                  {{ item.rolename }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注" name="Remark">
              <a-input class="dialogInput" style="width: 608px" v-model:value="formState.Remark" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
    </a-form>
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelImg">
      <img alt="预览附件" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { getUserName, getUserId } from '@/services/bus/user';
import { FormState } from '../interface';
import { formatTime } from '@/common/methods/format';
import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
import moment, { Moment } from 'moment';
import { handleFormRule, handleContract, handleDeliveryGoods, handleAmout, handlePrice, handleDate, handleFromState } from '../setup';
import { addContractReq } from '@/views/information/spot-contract/components/add/setup';
import { mergeTwoObj } from '@/utils/objHandle';
import { validateAction } from '@/common/setup/form';
import { ErmcpLoginUser } from '@/services/go/ermcp/account/interface';
import { Ermcp3SubjectRsp } from '@/services/go/ermcp/subject/interface';
import { QueryPaAreaSubject } from '@/services/go/ermcp/subject';
import { handlerManagerList } from '@/common/setup/user';
import { getUploadImg } from '@/common/setup/upload';
import UploadImg from '@/common/components/uploadImg/index.vue';
import { _closeModal } from '@/common/setup/modal/modal';

export default defineComponent({
    name: 'spot_contract_btn_modify',
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<Ermcp3ContractRsp>,
            default: {},
        },
        contractType: {
            type: Number,
            required: true,
        },
    },
    components: { UploadImg },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const loading = ref<boolean>(false);
        const { sendReq } = addContractReq();
        const { formState, businessType } = handleFromState(props.contractType);
        // 表单
        const formRef = ref();

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

        //  处理现货商品
        const { deliveryGoodsList, barandList, wrstandardList, goodsList, numberUnit, WrStandardChange, deliveryGoodsChange } = handleDeliveryGoods(formState);
        // 价格信息
        const { priceType, payCurrency, payCurrencyUnit, parCurrencyChange } = handlePrice(formState);
        // 日期
        const { deliveryDate, priceDate, disabledDate } = handleDate();
        // 处理金额
        const { getAmout } = handleAmout(formState);
        // 获取 业务账户
        const { queryTable: queryBusinessManager, getBusinesserOrMerchandiser } = handlerManagerList(loading, 1);
        const { tableList: traderList, queryTable: queryTradeManager } = handlerManagerList(loading, 2, true);

        // 业务员
        const businesserList = ref<ErmcpLoginUser[]>([]);
        // 跟单员
        const merchandiserList = ref<ErmcpLoginUser[]>([]);
        queryBusinessManager().then(() => {
            businesserList.value = getBusinesserOrMerchandiser('22');
            merchandiserList.value = getBusinesserOrMerchandiser('23');
        });

        // 交易主体列表
        const subjectList = ref<Ermcp3SubjectRsp[]>([]);
        QueryPaAreaSubject().then((res) => {
            subjectList.value = res;
        });

        const { uploadImgAction, uploadImgList, handleImg } = getUploadImg();
        queryCustomList();
        queryTradeManager();
        mergeTwoObj(formState, props.selectedRow);
        isSell.value = formState.ContractType === 1 ? false : true;

        const { deliverygoodsid, qty, price, wrstandardid, spotcontractid, spotgoodsbrandid, currencyid, attachment, deliverystartdate, deliveryenddate, startdate, enddate, meruserid, tradeuserid } = props.selectedRow;
        if (deliverygoodsid) {
            deliveryGoodsChange(deliverygoodsid);
            if (wrstandardid) {
                WrStandardChange(wrstandardid);
                formState.WrStandardID = wrstandardid;
                formState.SpotGoodsBrandID = spotgoodsbrandid;
            }
        }
        formState.Qty = qty.toString();
        formState.Price = price.toString();
        formState.CurrencyID = currencyid;
        formState.ContractAttachment = attachment;
        formState.MerUserID = meruserid;
        formState.TradeUserID = tradeuserid;
        formState.SpotContractID = spotcontractid;
        if (deliverystartdate && deliverystartdate !== '--') {
            deliveryDate.value.push(moment(deliverystartdate));
        }
        if (deliveryenddate && deliveryenddate !== '--') {
            deliveryDate.value.push(moment(deliveryenddate));
        }
        if (startdate && startdate !== '--') {
            priceDate.value.push(moment(startdate));
        }
        if (enddate && enddate !== '--') {
            priceDate.value.push(moment(enddate));
        }
        if (attachment) {
            uploadImgList.value = handleImg(attachment);
        }
        function submit() {
            validateAction<FormState>(formRef, formState).then((param) => {
                const id = getUserId();
                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, 2)
                    .then((res) => {
                        cancel(true);
                    })
                    .catch((err) => {});
            });
        }
        return {
            visible,
            cancel,
            submit,
            formRef,
            loading,
            maskClosableFlag: false,
            formState,
            rules,
            businessType,
            contractType,
            isSell,
            contractChange,
            customList,
            deliveryGoodsList,
            barandList,
            wrstandardList,
            goodsList,
            deliveryGoodsChange,
            WrStandardChange,
            priceType,
            payCurrency,
            payCurrencyUnit,
            parCurrencyChange,
            numberUnit,
            getUserName,
            deliveryDate,
            priceDate,
            disabledDate,
            getAmout,
            traderList,
            businesserList,
            merchandiserList,
            uploadImgAction,
            uploadImgList,
            subjectList,
        };
    },
});
</script>