样式修改

src/assets/styles/mixin.less

@@ -342,7 +342,7 @@
         }
         .ant-modal-body {
             min-height: 380px;
-            max-height: calc(100% - 115px);
+            max-height: calc(100vh - 115px);
             overflow-y: auto;
         }
         .ant-modal-footer {
@@ -353,7 +353,7 @@
             .ant-btn-primary {
                 width: 200px;
                 height: 34px;
-                line-height: 34px;
+                line-height: 32px;
                 border: 0;
                 background: linear-gradient(0deg, @m-blue8 0%, @m-blue9 100%);
                 border-radius: 3px;
@@ -367,7 +367,7 @@
             .ant-btn.cancelBtn {
                 width: 200px;
                 height: 34px;
-                line-height: 34px;
+                line-height: 32px;
                 border: 1px solid @m-blue10;
                 border-radius: 3px;
                 background: transparent;
@@ -410,6 +410,13 @@
             font-size: 14px;
             color: @m-grey1;
         }
+        .ant-form-item-control {
+            width: 200px;
+            .unit {
+                float: right;
+                color: @m-grey2;
+            }
+        }
     }
     .tc.ant-form-item {
         .ant-form-item-control-wrapper {
@@ -501,6 +508,11 @@
         border-color: @m-blue10;
     }
 }
+.suffixGrey {
+    .ant-input-suffix {
+        color: @m-grey2;
+    }
+}
 .white {
     color: @m-white0;
 }
@@ -510,7 +522,9 @@
 .green {
     color: @m-green0;
 }
-
+.yellow {
+    color: @m-yellow0;
+}
 .formFieldSet {
     border: 1px solid @m-grey19;
     padding: 0 20px 20px;
@@ -662,4 +676,11 @@
             }
         }
     }
+}
+
+.to {
+    font-size: 14px;
+    color: @m-grey2;
+    margin-left: -8px;
+    margin-right: 2px;
 }

src/assets/styles/variables.less

@@ -69,6 +69,7 @@
 @m-red0-hover: rgba(@m-red0, .8);
 @m-red1: #FB7F75;
 @m-red1-hover: rgba(@m-red1, .8);
+@m-yellow0: #FF9600;
 
 @font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 

src/views/information/custom/compoments/detail/index.vue

@@ -3,6 +3,8 @@
   <a-modal class="add-custom custom-detail"
            title="客户资料详情"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
@@ -128,6 +130,7 @@ export default defineComponent({
 
         const { visible, cancel } = closeModal('detail');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -142,6 +145,7 @@ export default defineComponent({
             loading,
             formatValue,
             getStatusName,
+            maskClosableFlag,
         };
     },
 });

src/views/information/custom/compoments/disable/index.vue

@@ -3,6 +3,8 @@
   <a-modal class="commonModal warehouse-disable"
            title="停用客户资料"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
@@ -117,6 +119,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('custom_info_btn_disable');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -129,12 +132,13 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag,
         };
     },
 });
 </script>
 
 <style lang="less">
-.arehouse-disable {
+.warehouse-disable {
 }
 </style>

src/views/information/custom/compoments/modify/index.vue

@@ -4,6 +4,8 @@
            title="修改客户资料"
            v-if="visible"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
@@ -203,6 +205,7 @@ export default defineComponent({
         const { visible, cancel } = closeModal('custom_info_btn_modify');
 
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -216,6 +219,7 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag,
         };
     },
 });

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

@@ -1,5 +1,5 @@
 <template>
-  <!-- 新增客户资料 -->
+  <!-- 新增现货合同 -->
   <a-modal class="commonModal add-spot-contract"
            title="新增现货合同"
            v-model:visible="visible"
@@ -9,9 +9,12 @@
            width="890px">
     <template #footer>
       <a-button key="submit"
+                class="cancelBtn"
+                @click="cancel">保存草稿</a-button>
+      <a-button key="submit"
                 type="primary"
                 :loading="loading"
-                @click="submit">完成</a-button>
+                @click="submit">提交审核</a-button>
     </template>
     <a-form class="inlineForm">
       <fieldset class="formFieldSet">
@@ -160,37 +163,177 @@
                         style="width: 200px"
                         placeholder="请选择定价类型">
                 <a-select-option value="1">
-                  客户一
+                  点价
                 </a-select-option>
                 <a-select-option value="2">
-                  客户二
+                  一口价
                 </a-select-option>
               </a-select>
             </a-form-item>
           </a-col>
           <a-col :span="12">
             <a-form-item label="数量">
-              
+              <a-input class="dialogInput suffixGrey" placeholder="请输入数量" suffix="单位" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <!-- 以下是点价的价格信息 start -->
+        <!-- <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价合约">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择点价合约">
+                <a-select-option value="1">
+                  合约一
+                </a-select-option>
+                <a-select-option value="2">
+                  合约二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="升贴水">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入升贴水" suffix="元/单位" style="width: 200px"/>
             </a-form-item>
           </a-col>
         </a-row>
         <a-row :gutter="24">
           <a-col :span="12">
+            <a-form-item label="点价期">
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择点价期">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row> -->
+        <!-- 以上是点价的价格信息 end -->
+        <a-row :gutter="24">
+          <a-col :span="12">
             <a-form-item label="价格">
-              
+              <a-input class="dialogInput suffixGrey" placeholder="请输入价格" suffix="元/单位" style="width: 200px"/>
             </a-form-item>
           </a-col>
           <a-col :span="12">
-            <a-form-item label="金额">
+            <a-form-item label="金额" class="relative">
                 <span class="white">输入数量和价格后自动算</span>
-                <span>元</span>
+                <span class="unit">元</span>
             </a-form-item>
           </a-col>
       </a-row>
       <a-row :gutter="24">
           <a-col :span="24">
             <a-form-item label="交收期">
-              
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </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="保证金">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入保证金" suffix="元" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="业务员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择业务员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="跟单员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择跟单员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="期货账户">
+                <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择期货账户">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </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: 620px"
+                      placeholder="请输入备注" />
             </a-form-item>
           </a-col>
         </a-row>

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

@@ -3,15 +3,176 @@
   <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"
+        <a-button key="submit"
+                class="cancelBtn"
+                @click="cancel">取消</a-button>
+        <a-button key="submit"
                 type="primary"
                 :loading="loading"
-                @click="submit">关闭</a-button>
+                @click="submit">确认撤销</a-button>
     </template>
-    现货合同撤销
+    <a-form class="inlineForm">
+      <fieldset class="formFieldSet">
+        <legend>基本信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="合同编号">
+              <span class="white">NPCQ-2020121001</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同类型">
+              <span class="white">采购合同</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="业务类型">
+              <span class="white">套保</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="采购方">
+                <span class="white">河北石家庄刚强矿石公司</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="销售方">
+             <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同附件">
+                <div class="upload">
+                    <div class="look">查看附件</div>
+                </div>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="状态">
+             <span class="yellow">待审核</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">螺纹钢12</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="品类">
+              <span class="white">10mm</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="品牌">
+              <span class="white">江铜</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="标仓系数">
+                <span class="white">1.1</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="商品规格">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</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">点价</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="数量">
+              <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价合约">
+              <span class="white">CU2011</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="升贴水">
+              <span class="white">100元/吨</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价期">
+              <span class="white">2020-12-10～2021-02-10</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <span class="white">2020-12-10～2021-02-10</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">13700元</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="业务员">
+              <span class="white">李顺利（lishunli）</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="跟单员">
+              <span class="white">王平（wangping）</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="期货账户">
+                <span class="white">25000000001</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="备注">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>
 
@@ -25,6 +186,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('spot_contract_btn_cancel');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -37,10 +199,18 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag,
         };
     },
 });
 </script>
 
 <style lang="less">
+.custom-detail {
+    .upload {
+        .look {
+            margin-left: 0;
+        }
+    }
+}
 </style>;

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

@@ -3,15 +3,215 @@
   <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"
+     <template #footer>
+       <a-button key="submit"
+                class="cancelBtn"
+                @click="cancel">审核拒绝</a-button>
+        <a-button key="submit"
                 type="primary"
                 :loading="loading"
-                @click="submit">关闭</a-button>
+                @click="submit">审核通过</a-button>
     </template>
-    现货合同审核
+    <a-form class="inlineForm">
+      <fieldset class="formFieldSet">
+        <legend>基本信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="合同编号">
+              <span class="white">NPCQ-2020121001</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同类型">
+              <span class="white">采购合同</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="业务类型">
+              <span class="white">套保</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="采购方">
+                <span class="white">河北石家庄刚强矿石公司</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="销售方">
+             <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同附件">
+                <div class="upload">
+                    <div class="look">查看附件</div>
+                </div>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="状态">
+             <span class="green">正常</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">螺纹钢12</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="品类">
+              <span class="white">10mm</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="品牌">
+              <span class="white">江铜</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="标仓系数">
+                <span class="white">1.1</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="商品规格">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</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">点价</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="数量">
+              <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价合约">
+              <span class="white">CU2011</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="升贴水">
+              <span class="white">100元/吨</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价期">
+              <span class="white">2020-12-10～2021-02-10</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <span class="white">2020-12-10～2021-02-10</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">13700元</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="业务员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择业务员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="跟单员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择跟单员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="期货账户">
+                <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择期货账户">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="备注">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+      <fieldset class="formFieldSet">
+        <legend>审核信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="审核意见">
+              <a-input class="dialogInput"
+                      style="width: 620px"
+                      placeholder="请输入审核意见" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>
 
@@ -25,6 +225,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('spot_contract_btn_check');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -37,10 +238,18 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag,
         };
     },
 });
 </script>
 
 <style lang="less">
+.add-custom custom-detail {
+    .upload {
+        .look {
+            margin-left: 0;
+        }
+    }
+}
 </style>;

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

@@ -3,14 +3,176 @@
   <a-modal class="recover-custom"
            title="删除现货合同"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
       <a-button key="submit"
+                class="cancelBtn"
+                @click="cancel">取消</a-button>
+        <a-button key="submit"
                 type="primary"
                 :loading="loading"
-                @click="submit">完成</a-button>
+                @click="submit">确认删除</a-button>
     </template>
+    <a-form class="inlineForm"
+            :form="form"
+            @submit="handleSearch">
+      <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">{{ formatValue(selectedRow.contractno) }}</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.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="blue">{{ 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>
   </a-modal>
 </template>
 
@@ -24,6 +186,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('spot_contract_btn_delete');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -36,6 +199,7 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag,
         };
     },
 });

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

@@ -3,6 +3,8 @@
   <a-modal class="add-custom custom-detail"
            title="现货合同详情"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
@@ -11,174 +13,162 @@
                 :loading="loading"
                 @click="submit">关闭</a-button>
     </template>
-    <a class="white">
-      基本信息
-    </a>
     <a-form class="inlineForm"
             :form="form"
             @submit="handleSearch">
-      <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">{{ formatValue(selectedRow.contractno) }}</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.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="white">{{ formatValue(getContractStatusName(selectedRow.contracctstatus)) }}</span>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
-    <a class="white">
-      现货信息
-    </a>
-    <a-form class="inlineForm"
-            :form="form"
-            @submit="handleSearch">
-      <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>
-    </a-form>
-    <a class="white">
-      价格信息
-    </a>
-    <a-form class="inlineForm"
-            :form="form"
-            @submit="handleSearch">
-      <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>
-    </a-form>
-    <a class="white">
-      其它信息
-    </a>
-    <a-form class="inlineForm"
-            :form="form"
-            @submit="handleSearch">
-      <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 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">{{ formatValue(selectedRow.contractno) }}</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.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>
   </a-modal>
 </template>
@@ -204,6 +194,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('detail');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -220,6 +211,7 @@ export default defineComponent({
             getContractStatusName,
             getPriceTypeName,
             formatTime,
+            maskClosableFlag,
         };
     },
 });

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

@@ -1,17 +1,178 @@
 <template>
   <!-- 现货合同正常完结-->
-  <a-modal class="custom-detail"
+  <a-modal class="commonModal custom-finish"
            title="现货合同正常完结"
            v-model:visible="visible"
+           centered
+           :maskClosable="maskClosableFlag"
            @cancel="cancel"
            width="890px">
     <template #footer>
-      <a-button key="submit"
+       <a-button key="submit"
+                class="cancelBtn"
+                @click="cancel">取消</a-button>
+        <a-button key="submit"
                 type="primary"
                 :loading="loading"
-                @click="submit">关闭</a-button>
+                @click="submit">确认完结</a-button>
     </template>
-    现货合同正常完结
+    <a-form class="inlineForm">
+      <fieldset class="formFieldSet">
+        <legend>基本信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="合同编号">
+              <span class="white">NPCQ-2020121001</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同类型">
+              <span class="white">采购合同</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="业务类型">
+              <span class="white">套保</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="采购方">
+                <span class="white">河北石家庄刚强矿石公司</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="销售方">
+             <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同附件">
+                <div class="upload">
+                    <div class="look">查看附件</div>
+                </div>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="状态">
+             <span class="green">正常</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">螺纹钢12</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="品类">
+              <span class="white">10mm</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="品牌">
+              <span class="white">江铜</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="标仓系数">
+                <span class="white">1.1</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="商品规格">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</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">点价</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="数量">
+              <span class="white">菏泽已成钢材有限公司</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价合约">
+              <span class="white">CU2011</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="升贴水">
+              <span class="white">100元/吨</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价期">
+              <span class="white">2020-12-10～2021-02-10</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <span class="white">2020-12-10～2021-02-10</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">13700元</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="业务员">
+              <span class="white">李顺利（lishunli）</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="跟单员">
+              <span class="white">王平（wangping）</span>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="期货账户">
+                <span class="white">25000000001</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="备注">
+              <span class="white">符合国际GB/T1196-2008AL99.70规定，其中铝含量不低于99.7%</span>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>
 
@@ -25,6 +186,7 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('spot_contract_btn_finish');
         const loading = ref<boolean>(false);
+        const maskClosableFlag = ref<boolean>(false);
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -37,10 +199,18 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            maskClosableFlag
         };
     },
 });
 </script>
 
 <style lang="less">
+.custom-finish {
+    .upload {
+        .look {
+            margin-left: 0;
+        }
+    }
+}
 </style>;

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

@@ -11,6 +11,329 @@
                 :loading="loading"
                 @click="submit">完成</a-button>
     </template>
+    <a-form class="inlineForm">
+      <fieldset class="formFieldSet">
+        <legend>基本信息</legend>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="合同编号">
+              <a-input class="dialogInput"
+                      style="width: 200px"
+                      placeholder="请输入合同编号" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同类型">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择合同类型">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="业务类型">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择业务类型">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="采购方">
+                <span class="white">河北石家庄刚强矿石公司</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="销售方">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择销售方">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="合同附件">
+                <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="现货品种">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择现货品种">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="品类">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择品类">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="品牌">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择品牌">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="标仓系数">
+                <span class="white">输入数量和价格后自动算</span>
+            </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: 200px"
+                      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="定价类型">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  点价
+                </a-select-option>
+                <a-select-option value="2">
+                  一口价
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="数量">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入数量" suffix="单位" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <!-- 以下是点价的价格信息 start -->
+        <!-- <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价合约">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择点价合约">
+                <a-select-option value="1">
+                  合约一
+                </a-select-option>
+                <a-select-option value="2">
+                  合约二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="升贴水">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入升贴水" suffix="元/单位" style="width: 200px"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="点价期">
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择点价期">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="交收期">
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row> -->
+        <!-- 以上是点价的价格信息 end -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="价格">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入价格" suffix="元/单位" style="width: 200px"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="金额" class="relative">
+                <span class="white">输入数量和价格后自动算</span>
+                <span class="unit">元</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="交收期">
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期一
+                </a-select-option>
+              </a-select>
+              <span class="to">-</span>
+              <a-select class="inlineFormSelect"
+                        style="width: 95px"
+                        placeholder="请选择定价类型">
+                <a-select-option value="1">
+                  日期二
+                </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="保证金">
+              <a-input class="dialogInput suffixGrey" placeholder="请输入保证金" suffix="元" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="业务员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择业务员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="跟单员">
+              <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择跟单员">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="期货账户">
+                <a-select class="inlineFormSelect"
+                        style="width: 200px"
+                        placeholder="请选择期货账户">
+                <a-select-option value="1">
+                  客户一
+                </a-select-option>
+                <a-select-option value="2">
+                  客户二
+                </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: 620px"
+                      placeholder="请输入备注" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>