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

<template>
  <!-- 新增合同 -->
  <a-modal class="commonModal add-spot-contract" :title="formState.ContractType === 1 ? '新增现货合同' : '新增销售合同'" v-model:visible="visible" centered :maskClosable="false" @cancel="closeAction" width="890px">
    <template #footer>
      <a-button key="submit" class="cancelBtn" :loading="loading" :disabled="loading" @click="submit(1)">保存草稿</a-button>
      <a-button key="submit" type="primary" :loading="loading" :disabled="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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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-form-item label="合同类型">
              <span class="white">{{ getContractTypeName(formState.ContractType) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务类型" name="BizType">
              <a-select class="inlineFormSelect" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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">{{ getRootUserInfo().accountname }}</span>
              </a-form-item>
            </a-col>
          </template>
          <template v-else>
            <a-col :span="12">
              <a-form-item label="采购方">
                <span class="white">{{ getRootUserInfo().accountname }}</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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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="合同附件" class="checkboxGroupItem" name="ContractAttachment">
              <UploadImg :visible="visible" @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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" @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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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="CurrencyID">
              <a-select class="inlineFormSelect" v-model:value="formState.CurrencyID" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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">
            <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>
          <a-col :span="12">
            <a-form-item label="定价类型" name="PriceType">
              <a-select class="inlineFormSelect" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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>
          <!-- 以下是点价的价格信息 start -->
          <template v-if="formState.PriceType === 2 || formState.PriceType === 3">
            <a-col :span="12">
              <a-form-item label="点价类型">
                <a-select class="inlineFormSelect" v-model:value="pricingType" style="width: 200px" placeholder="请选择点价类型" @change="pricingTypeChange">
                  <a-select-option :value="0">现货</a-select-option>
                  <a-select-option :value="1">期货</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="pricingType === 1">
              <a-form-item label="点价合约" name="GoodsID">
                <a-select class="inlineFormSelect" v-model:value="formState.GoodsID" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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" 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>
            <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-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>
          </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>
          </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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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" :getPopupContainer="(triggerNode) => triggerNode.parentNode" 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>
      </fieldset>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { addContractReq } from './setup';
import { getRootUserInfo, 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 } from 'moment';
import { handleFormRule, handleContract, handleDeliveryGoods, handleAmout, handlePrice, handleDate, handleFromState } from '../setup';
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';
import { getContractTypeName } from '@/common/constants/enumsName';

export default defineComponent({
  name: 'add-spot-contract',
  components: { UploadImg },
  emits: ['cancel', 'update'],
  props: {
    selectedRow: {
      type: Object as PropType<Ermcp3ContractRsp>,
      default: {},
    },
    contractType: {
      type: Number,
      required: true,
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    const { sendReq } = addContractReq();
    const loading = ref<boolean>(false);
    const pricingType = ref(1); // 点价类型

    // 表单
    const formRef = ref();
    const { formState, businessType, initFormData } = handleFromState(props.contractType);
    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[]>([]);
    const { getFirstImg, uploadImgAction } = getUploadImg();

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

    queryCustomList();
    queryTradeManager();
    queryBusinessManager().then(() => {
      businesserList.value = getBusinesserOrMerchandiser('22');
      merchandiserList.value = getBusinesserOrMerchandiser('23');
    });
    function submit(OperateType: 1 | 2) {
      console.log(formState)
      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 });
        }
        // 合同附件
        param.ContractAttachment = getFirstImg();
        sendReq(param, loading, OperateType)
          .then((res) => {
            cancel(true);
          })
          .catch((err) => { });
      });
    }

    function closeAction() {
      //清空添加成功后的数据，确保在此新增打开是个空数据
      Object.assign(formState, initFormData());
      cancel();
    }

    // 选择点价类型
    const pricingTypeChange = (value: number) => {
      if (value === 0) {
        formState.GoodsID = 0;
      } else {
        formState.GoodsID = undefined;
      }
    }

    return {
      visible,
      closeAction,
      submit,
      formRef,
      loading,
      pricingType,
      maskClosableFlag: false,
      formState,
      rules,
      businessType,
      contractType,
      isSell,
      contractChange,
      pricingTypeChange,
      customList,
      deliveryGoodsList,
      barandList,
      wrstandardList,
      goodsList,
      deliveryGoodsChange,
      wrStandardChange,
      priceType,
      payCurrency,
      payCurrencyUnit,
      parCurrencyChange,
      numberUnit,
      getUserName,
      deliveryDate,
      priceDate,
      disabledDate,
      getAmout,
      traderList,
      businesserList,
      merchandiserList,
      uploadImgAction,
      getRootUserInfo,
      subjectList,
      getContractTypeName,
    };
  },
});
</script>

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