优化现货合同代码

src/views/information/spot-contract/components/check/index.vue

@@ -16,130 +16,7 @@
                 :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="合同编号">
-              <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"
-                    @click="previewImg(selectedRow.attachment)">{{ formatValue(getImgName(selectedRow.attachment)) }}</span>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="24">
-          <a-col :span="24">
-            <a-form-item label="状态">
-              <span class="green">{{ 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="24">
-            <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>
+    <Detail :selectedRow="selectedRow">
       <fieldset class="formFieldSet">
         <legend>其他信息</legend>
         <a-row :gutter="24">
@@ -218,7 +95,7 @@
           </a-col>
         </a-row>
       </fieldset>
-    </a-form>
+    </Detail>
     <a-modal :visible="previewVisible"
              :footer="null"
              @cancel="cancelImg">
@@ -248,10 +125,11 @@ import { hedgePlanReq } from '@/services/proto/hedgeplan';
 import { orderContract, spotContractStatus } from '@/services/proto/spotcontract';
 import { getUserId } from '@/services/bus/account';
 import { handlePreviewImg } from '@/common/setup/upload';
+import Detail from '../common-detail/index.vue';
 
 export default defineComponent({
     name: 'spot-contract-detail',
-    components: {},
+    components: { Detail },
     props: {
         selectedRow: {
             type: Object as PropType<Ermcp3ContractRsp>,

src/views/information/spot-contract/components/common-detail/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-form class="inlineForm">
+    <fieldset class="formFieldSet">
+      <legend>基本信息</legend>
+      <Des :list="baseInfo"
+           @onClick="baseInfoClick" />
+    </fieldset>
+    <fieldset class="formFieldSet">
+      <legend>现货信息</legend>
+      <Des :list="spotInfo" />
+    </fieldset>
+    <fieldset class="formFieldSet">
+      <legend>现货信息</legend>
+      <Des :list="priceInfo" />
+    </fieldset>
+    <slot></slot>
+    <a-modal :visible="previewVisible"
+             :footer="null"
+             @cancel="cancelImg">
+      <img alt="预览附件"
+           style="width: 100%"
+           :src="previewImage" />
+    </a-modal>
+  </a-form>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, watchEffect } from 'vue';
+import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/common/constants/enumsName';
+import { formatTime, formatValue } from '@/common/methods';
+import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
+import { handlePreviewImg } from '@/common/setup/upload';
+import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
+
+export default defineComponent({
+    name: 'custom-detail-desc',
+    components: { Des },
+    props: {
+        selectedRow: {
+            type: Object as PropType<Ermcp3ContractRsp>,
+            default: {},
+        },
+    },
+    setup(props) {
+        // 基本信息
+        const { desList: baseInfo, getDesList: getBaseInfo } = handleDesList();
+        // 现货信息
+        const { desList: spotInfo, getDesList: getSpotInfo } = handleDesList();
+        // 价格信息
+        const { desList: priceInfo, getDesList: getPriceInfo } = handleDesList();
+        // 预览附件
+        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
+        //
+        function baseInfoClick({ label }: DescriptionsList) {
+            const { attachment } = props.selectedRow;
+            switch (label) {
+                case '合同附件':
+                    previewImg(attachment);
+                    break;
+            }
+        }
+        watchEffect(() => {
+            if (props.selectedRow.contractno) {
+                console.log('props.selectedRow', props.selectedRow);
+
+                const data = props.selectedRow;
+                // 基本信息
+                const base = [
+                    { label: '合同编号', value: formatValue(data.contractno) },
+                    { label: '合同类型', value: getContractTypeName(data.contracttype) },
+                    { label: '业务类型', value: getBizTypeName(data.biztype) },
+                    { label: '采购方', value: formatValue(data.buyusername) },
+                    { label: '销售方', value: formatValue(data.sellusername) },
+                    { label: '合同附件', value: formatValue(getImgName(data.attachment)) },
+                    { label: '状态', value: getContractStatusName(data.contracctstatus), className: 'green' },
+                ];
+                getBaseInfo(base);
+                // 现货信息
+                const spot = [
+                    { label: '现货品种', value: formatValue(data.deliverygoodsname) },
+                    { label: '品类', value: formatValue(data.wrstandardname) },
+                    { label: '品牌', value: formatValue(data.brandname) },
+                    { label: '标仓系数', value: formatValue(data.convertfactor) },
+                    { label: '商品规格', value: formatValue(data.spotgoodsdesc) },
+                ];
+                getSpotInfo(spot);
+                // 价格信息
+                const price = [
+                    { label: '定价类型', value: getPriceTypeName(data.pricetype) },
+                    { label: '数量', value: formatValue(data.qty) },
+                    { label: '点价合约', value: formatValue(data.goodscode) },
+                    { label: '升贴水', value: formatValue(data.pricemove) },
+                    { label: '点价期', value: formatValue(formatTime(data.startdate, 'd') + '--' + formatTime(data.enddate, 'd')) },
+                    { label: '交收期', value: formatValue(formatTime(data.deliverystartdate, 'd') + '--' + formatTime(data.deliveryenddate, 'd')) },
+                ];
+                getPriceInfo(price);
+            }
+        });
+        return {
+            baseInfo,
+            spotInfo,
+            priceInfo,
+            previewVisible,
+            previewImage,
+            cancelImg,
+            baseInfoClick,
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.custom-detail {
+    .ant-form.inlineForm {
+        margin-top: 20px;
+    }
+    .upload {
+        .look {
+            margin-left: 0;
+        }
+    }
+}
+</style>;

src/views/information/spot-contract/components/finish/index.vue

@@ -16,7 +16,8 @@
                 :loading="loading"
                 @click="submit">确认完结</a-button>
     </template>
-    <InfoDetail :selectedRow="selectedRow" />
+    <InfoDetail :selectedRow="selectedRow"
+                :businessManager="businessManager" />
   </a-modal>
 </template>
 
@@ -24,12 +25,11 @@
 import { defineComponent, PropType, ref } from 'vue';
 import { closeModal } from '@/common/setup/modal/index';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
-import { orderContractOperateControl } from '@/views/information/spot-contract/components/setup';
 import { Modal } from 'ant-design-vue';
 import { SpotContractOperateReq } from '@/services/proto/spotcontract/interface';
 import InfoDetail from '../infoDetail/index.vue';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
-import { orderContract, spotContractStatus } from '@/services/proto/spotcontract';
+import { spotContractStatus } from '@/services/proto/spotcontract';
 
 export default defineComponent({
     name: 'spot-contract-finish',

src/views/information/spot-contract/components/infoDetail/index.vue

@@ -1,182 +1,25 @@
 <template>
-  <a-form :loading="loading"
-          class="inlineForm">
-    <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"
-                  @click="previewImg(selectedRow.attachment)">{{ formatValue(getImgName(selectedRow.attachment)) }}</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>
+  <Detail :selectedRow="selectedRow">
     <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(findManagerName(selectedRow.saleuserid, businessManager) ) }}</span>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="跟单员">
-            <span class="white">{{ formatValue(findManagerName(selectedRow.meruserid, businessManager) ) }}</span>
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="交易用户">
-            <span class="white">{{ formatValue(selectedRow.tradeusername) }}</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>
+      <Des :list="desList" />
     </fieldset>
-    <a-modal :visible="previewVisible"
-             :footer="null"
-             @cancel="cancelImg">
-      <img alt="预览附件"
-           style="width: 100%"
-           :src="previewImage" />
-    </a-modal>
-  </a-form>
+  </Detail>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
-import { formatTime, formatValue } from '@/common/methods';
-import { getBizTypeName, getContractStatusName, getContractTypeName, getPriceTypeName } from '@/common/constants/enumsName';
-import { handlerManagerList } from '@/common/setup/user';
+import { formatValue } from '@/common/methods';
 import { ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
-import { handlePreviewImg } from '@/common/setup/upload';
+import Detail from '../common-detail/index.vue';
+import { Des, handleDesList } from '@/common/components/commonDes';
+import { watchEffect } from '@vue/runtime-dom';
+import { handlerManagerList } from '@/common/setup/user';
 
 export default defineComponent({
     name: 'spot-contract-info-detail',
-    components: {},
+    components: { Detail, Des },
     props: {
         selectedRow: {
             type: Object as PropType<Ermcp3ContractRsp>,
@@ -189,24 +32,25 @@ export default defineComponent({
     },
     setup(props, context) {
         const loading = ref<boolean>(false);
+        // 预览附件
+        const { desList, getDesList } = handleDesList();
         // 获取 业务账户
         const { findManagerName } = handlerManagerList(loading, 1);
-        // 预览附件
-        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
+        watchEffect(() => {
+            if (props.selectedRow.contracctstatus) {
+                const data = props.selectedRow;
+                const list = [
+                    { label: '保证金', value: formatValue(data.contractmargin) },
+                    { label: '业务员', value: formatValue(findManagerName(data.saleuserid, props.businessManager)) },
+                    { label: '跟单员', value: formatValue(findManagerName(data.meruserid, props.businessManager)) },
+                    { label: '交易用户', value: formatValue(data.tradeusername) },
+                    { label: '备注', value: formatValue(data.remark) },
+                ];
+                getDesList(list);
+            }
+        });
         return {
-            loading,
-            formatValue,
-            getPriceTypeName,
-            getContractStatusName,
-            formatTime,
-            getContractTypeName,
-            getBizTypeName,
-            findManagerName,
-            previewVisible,
-            previewImage,
-            cancelImg,
-            previewImg,
-            getImgName,
+            desList,
         };
     },
 });