样式调整

src/assets/styles/mixin.less

@@ -494,4 +494,53 @@
 }
 .green {
     color: @m-green0;
+}
+
+.formFieldSet {
+    border: 1px solid @m-grey19;
+    padding: 0 20px 20px;
+}
+.formFieldSet+.formFieldSet {
+    margin-top: 35px;
+}
+.ant-form {
+    legend {
+      width: auto;
+      margin-left: 20px;
+      font-size: 16px;
+      color: @m-white0;
+      border-bottom: 0;
+      padding: 0 10px;
+    }
+  }
+  // 上传
+  .upload {
+    display: inline-flex;
+    .ant-btn.uploadBtn {
+        width: 60px;
+        height: 30px;
+        background: @m-blue0;
+        border: 0;
+        padding: 0;
+        text-align: center;
+        font-size: 14px;
+        color: @m-white0;
+        .rounded-corners(3px);
+        &:hover {
+            background: rgba(@m-blue0, 0.8);
+            color: rgba(@m-white0, 0.8);
+        }
+    }
+    .look {
+        color: @m-blue0;
+        font-size: 14px;
+        margin-left: 10px;
+        cursor: pointer;
+    }
+}
+.ml10 {
+    margin-left: 10px;
+}
+.grey {
+    color: @m-grey2;
 }

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

@@ -215,30 +215,7 @@ export default defineComponent({
 
 <style lang="less">
 .add-custom {
-  .upload {
-      display: inline-flex;
-      .ant-btn.uploadBtn {
-          width: 60px;
-          height: 30px;
-          background: @m-blue0;
-          border: 0;
-          padding: 0;
-          text-align: center;
-          font-size: 14px;
-          color: @m-white0;
-          .rounded-corners(3px);
-          &:hover {
-              background: rgba(@m-blue0, 0);
-              color: rgba(@m-white0, 0.8);
-          }
-      }
-      .look {
-          color: @m-blue0;
-          font-size: 14px;
-          margin-left: 10px;
-          cursor: pointer;
-      }
-  }
+  
 }
 </style
 >;

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 新增客户资料 -->
-  <a-modal class="add-spot-contract"
+  <a-modal class="commonModal add-spot-contract"
            title="新增现货合同"
            v-model:visible="visible"
            @cancel="cancel"
@@ -11,6 +11,189 @@
                 :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-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="价格">
+              
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="金额">
+                <span class="white">输入数量和价格后自动算</span>
+                <span>元</span>
+            </a-form-item>
+          </a-col>
+      </a-row>
+      <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="交收期">
+              
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </fieldset>
+    </a-form>
   </a-modal>
 </template>