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

<template>
  <!-- 现货合同详情-->
  <a-modal class="add-custom custom-detail"
           title="现货合同详情"
           v-model:visible="visible"
           centered
           :maskClosable="maskClosableFlag"
           @cancel="cancel"
           width="890px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">关闭</a-button>
    </template>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1"
                  tab="合同详情"></a-tab-pane>
      <a-tab-pane key="2"
                  tab="点价记录"></a-tab-pane>
      <a-tab-pane key="3"
                  tab="交收记录"></a-tab-pane>
      <a-tab-pane key="4"
                  tab="款项记录"></a-tab-pane>
      <a-tab-pane key="5"
                  tab="发票记录"></a-tab-pane>
      <a-tab-pane key="6"
                  tab="入库记录"></a-tab-pane>
      <a-tab-pane key="7"
                  tab="变更记录"></a-tab-pane>
    </a-tabs>
    <a-form class="inlineForm"
            v-if="activeKey == 1">
      <fieldset class="formFieldSet">
        <legend>基本信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="合同编号">
              <span class="white">{{ formatValue(selectedRow.contractno) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同类型">
              <span class="white">{{ getContractTypeName(selectedRow.contracttype) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="业务类型">
              <span class="white">{{ getBizTypeName(selectedRow.biztype) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="采购方">
              <span class="white">{{ formatValue(selectedRow.buyusername) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="销售方">
              <span class="white">{{ formatValue(selectedRow.sellusername) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同附件">
              <span class="white">{{ formatValue(selectedRow.contracctstatus) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="状态">
              <span class="yellow">{{ formatValue(getContractStatusName(selectedRow.contracctstatus)) }}</span>
            </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="现货品种">
              <span class="white">{{ formatValue(selectedRow.deliverygoodsname) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品类">
              <span class="white">{{ formatValue(selectedRow.wrstandardname) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="品牌">
              <span class="white">{{ formatValue(selectedRow.brandname) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="标仓系数">
              <span class="white">{{ formatValue(selectedRow.convertfactor) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="商品规格">
              <span class="white">{{ formatValue(selectedRow.spotgoodsdesc) }}</span>
            </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="定价类型">
              <span class="white">{{ getPriceTypeName(formatValue(selectedRow.pricetype)) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数量">
              <span class="white">{{ formatValue(selectedRow.qty) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="点价合约">
              <span class="white">{{ formatValue(selectedRow.goodscode) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="升贴水">
              <span class="white">{{ formatValue(selectedRow.pricemove) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="点价期">
              <span class="white">{{ formatValue(formatTime(selectedRow.startdate, "d") + '--' + formatTime(selectedRow.enddate, "d")) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="交收期">
              <span class="white">{{ formatValue(formatTime(selectedRow.deliverystartdate, "d") + '--' + formatTime(selectedRow.deliveryenddate, "d"))}}</span>
            </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="保证金">
              <span class="white">{{ formatValue(selectedRow.contractmargin) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="业务员">
              <span class="white">{{ formatValue(selectedRow.saleuserlogincode) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="跟单员">
              <span class="white">{{ formatValue(selectedRow.meruserlogincode) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="期货账户">
              <span class="white">{{ formatValue(selectedRow.accountid) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="备注">
              <span class="white">{{ formatValue(selectedRow.remark) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
    </a-form>
    <div class="tableDatas"
         v-if="activeKey == 2">
      <a-table class="dialogTable"
               :columns="columns"
               :data-source="data"
               :pagination="false">
        <template #status="{ text }">
          <span class="yellow">{{ text }}</span>
          <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow'   -->
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, ref } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { QueryCustomInfoType } from '@/services/go/ermcp/customInfo/interface';
import {Ermcp3ContractRsp, QueryChangeLogReq} from '@/services/go/ermcp/spot-contract/interface';
import { getStatusName } from '@/common/constants/enumsName';
import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/views/information/spot-contract/setup';
import { formatValue, formatTime } from '@/common/methods/format';
import { v4 as uuidv4 } from 'uuid';
import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
import {QueryAddUserInfoApply} from "@/services/go/ermcp/customInfo";
import {QueryBusinessFp, QueryBusinessKx} from "@/services/go/ermcp/finance-review";
import {QueryBusinessFpReq, QueryBusinessKxReq} from "@/services/go/ermcp/finance-review/interface";
import {QueryBusinessDj, QueryBusinessJs} from "@/services/go/ermcp/business-review";
import {QueryBusinessDjReq, QueryBusinessJsReq} from "@/services/go/ermcp/business-review/interface";
import {QueryAreaStockApply} from "@/services/go/ermcp/inventory-review";
import {QueryAreaStockApplyReq} from "@/services/go/ermcp/inventory-review/interface";
import {QueryChangeLog} from "@/services/go/ermcp/spot-contract";
import * as Long from "long";

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

        function submit() {
            cancel();

            let kxParam: QueryBusinessKxReq = {
                relatedid: props.selectedRow.spotcontractid
            }
            requestResultLoadingAndInfo(QueryBusinessKx, kxParam, loading, ['款项记录请求成功', '款项记录请求失败:']).then((res) => {
                console.log("款项记录请求成功:  \n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

            let jsParam: QueryBusinessJsReq = {
                relatedid: props.selectedRow.spotcontractid
            }
            requestResultLoadingAndInfo(QueryBusinessJs, jsParam, loading, ['交收记录请求成功', '交收记录请求失败:']).then((res) => {
                console.log("交收记录请求成功:  \n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

            let fpParam: QueryBusinessFpReq = {
                relatedid: props.selectedRow.spotcontractid
            }
            requestResultLoadingAndInfo(QueryBusinessFp, fpParam, loading, ['发票记录请求成功', '发票记录请求失败:']).then((res) => {
                console.log("发票记录请求成功:  \n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

            let djParam: QueryBusinessDjReq = {
                relatedid: props.selectedRow.spotcontractid
            }
            requestResultLoadingAndInfo(QueryBusinessDj, djParam, loading, ['点价记录请求成功', '点价记录请求失败:']).then((res) => {
                console.log("点价记录请求成功:  \n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

            let StockParam: QueryAreaStockApplyReq = {
                spotcontractid: props.selectedRow.spotcontractid,
                inouttype: '1,3'
            }
            requestResultLoadingAndInfo(QueryAreaStockApply, StockParam, loading, ['入库记录请求成功', '入库记录请求失败:']).then((res) => {
                console.log("入库记录请求成功:  \n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

            let changParam: QueryChangeLogReq = {
                RelatedId: props.selectedRow.spotcontractid
            }
            requestResultLoadingAndInfo(QueryChangeLog, changParam, loading, ['变更记录请求成功', '变更记录请求失败:']).then((res) => {
                console.log("变更记录请求成功:  /n")
                console.log(res)
                cancel();
                context.emit('refresh');
            });

        }

        const columns = [
            {
                title: '序号',
                dataIndex: 'no',
                key: 'no',
                align: 'center',
            },
            {
                title: '点价登记时间',
                dataIndex: 'time',
                key: 'time',
                align: 'center',
            },
            {
                title: '点价审核时间',
                dataIndex: 'adutTime',
                key: 'adutTime',
                align: 'center',
            },
            {
                title: '点价价格',
                dataIndex: 'price',
                key: 'price',
                align: 'center',
            },
            {
                title: '升贴水',
                dataIndex: 'money',
                key: 'money',
                align: 'center',
            },
            {
                title: '点价数量',
                dataIndex: 'num',
                key: 'num',
                align: 'center',
            },
            {
                title: '点价金额',
                dataIndex: 'pointAmount',
                key: 'pointAmount',
                align: 'center',
            },
            {
                title: '申请人',
                dataIndex: 'apply',
                key: 'apply',
                align: 'center',
            },
            {
                title: '审核人',
                dataIndex: 'adutPerson',
                key: 'adutPerson',
                align: 'center',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                align: 'center',
                slots: {customRender: 'status'},
            },
        ];

        const data = [
            {
                key: '1',
                no: '1',
                time: '20-12-01 19:37',
                adutTime: '20-12-01 20:37',
                price: '1000.00',
                money: '100',
                num: '1',
                pointAmount: '10100.00',
                apply: 'lishunli',
                adutPerson: 'wamgping',
                status: '审核通过',
            },
            {
                key: '2',
                no: '2',
                time: '20-12-01 19:37',
                adutTime: '20-12-01 20:37',
                price: '1000.00',
                money: '100',
                num: '1',
                pointAmount: '10100.00',
                apply: 'lishunli',
                adutPerson: 'wamgping',
                status: '审核驳回',
            },
        ];
        return {
            visible,
            cancel,
            submit,
            loading,
            formatValue,
            getContractStatusName,
            getPriceTypeName,
            formatTime,
            maskClosableFlag,
            getContractTypeName,
            getBizTypeName,
            activeKey: ref('1'),
            columns,
            data,
        };
    },
});
</script>

<style lang="less">
.custom-detail {
    .ant-modal-content {
        .ant-modal-body {
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;
            .ant-tabs {
                background: @m-black11;
                width: 100%;
                padding: 0 24px;
                .ant-tabs-bar {
                    margin-bottom: 0;
                    border-bottom: 0;
                }
                .ant-tabs-nav-container {
                    .ant-tabs-nav-wrap {
                        .ant-tabs-nav {
                            .ant-tabs-tab {
                                width: 70px;
                                margin-right: 43px;
                                text-align: center;
                                font-size: 16px;
                                color: #88a0ae;
                                padding: 0;
                                line-height: 45px;
                            }
                            .ant-tabs-tab-active.ant-tabs-tab {
                                color: #3a87f7;
                            }
                            .ant-tabs-ink-bar {
                                width: 70px !important;
                                background: #3a87f7;
                                .rounded-corners(1px);
                            }
                        }
                    }
                }
            }
        }
    }
    .tableDatas {
        margin-top: 26px;
        padding: 0 24px;
        overflow: hidden;
        .dialogTable {
            width: 100%;
            overflow: overlay;
        }
    }
    .ant-form.inlineForm {
        margin-top: 20px;
        padding: 0 24px;
    }
}
</style
>;