commit

src/assets/styles/mixin.less

@@ -214,6 +214,9 @@
                     font-size: 14px;
                     border-right: 1px solid @m-black9;
                     border-bottom: 1px solid @m-black9;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
                 }
             }
         }
@@ -227,6 +230,9 @@
                     border-bottom: 1px solid @m-black9;
                     font-size: 16px;
                     color: @m-white1;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
                 }
             }
         }
@@ -236,6 +242,55 @@
         }
     }
 }
+// 弹窗表格
+.dialogTable {
+    .ant-table {
+        width: 100%;
+        table {
+            border: 1px solid @m-grey20;
+            border-radius: 0;
+        }
+        .ant-table-thead {
+            tr {
+                box-shadow: 0px 1px 0px 0px #2E3539;
+                th {
+                    line-height: 36px;
+                    background: @m-grey11;
+                    padding-top: 0;
+                    padding-bottom: 0;
+                    color: @m-grey2;
+                    font-size: 16px;
+                    border-right: 1px solid @m-grey20;
+                    border-bottom: 1px solid @m-grey20;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr {
+                td {
+                    height: 36px;
+                    line-height: 36px;
+                    padding: 0 8px;
+                    border-right: 1px solid @m-grey20;
+                    border-bottom: 1px solid @m-grey20;
+                    font-size: 14px;
+                    color: @m-white1;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    background: @m-grey11;
+                }
+            }
+        }
+        .ant-table-placeholder {
+            border: 0;
+            background: @m-grey11;
+        }
+    }
+}
 .ant-empty-normal {
     color: @m-grey17;
 }

src/assets/styles/variables.less

@@ -25,6 +25,8 @@
 @m-grey16-hover: rgba(@m-grey16, .8);
 @m-grey17: #556772;
 @m-grey18: #1D2327;
+@m-grey19: #162534;
+@m-grey20: #1B2A38;
 @m-red0: #ff4d4f;
 @m-red1: #FF2B2B;
 @m-white: #fff;

src/views/information/goods/components/add/index.vue

@@ -1,185 +1,72 @@
 <template>
   <!-- 新增现货品种 -->
-  <a-modal class="addSpotVariety"
+  <a-modal class="commonModal addSpotVariety"
            title="新增现货品种"
            v-model:visible="visible"
            @cancel="cancel"
-           width="890px">
+           width="850px">
     <template #footer>
       <a-button key="submit"
                 type="primary"
                 :loading="loading"
                 @click="submit">完成</a-button>
     </template>
-    <a-form class="inlineForm"
-            :form="form"
-            @submit="handleSearch">
-      <a-row :gutter="24">
-        <a-col :span="12">
-          <a-form-item label="客户类型">
-            <a-select class="typeSelect"
+    <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-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"
-                     style="width: 200px"
-                     placeholder="请输入企业名称" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <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"
+                      placeholder="请输入现货品种名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="现货品种代码">
+              <a-input class="dialogInput"
                       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-input class="dialogInput"
-                     style="width: 200px"
-                     placeholder="请输入法定代表人" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="证件号码">
-            <a-input class="dialogInput"
-                     style="width: 200px"
-                     placeholder="请输入证件号码" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <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="营业执照">
-            <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>
-      <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-input class="dialogInput"
-                     style="width: 200px"
-                     placeholder="请输入联系人手机号" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <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>
-            &nbsp;
-          </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: 205px"
-                      placeholder="请选择省">
-              <a-select-option value="1">
-                客户一
-              </a-select-option>
-              <a-select-option value="2">
-                客户二
-              </a-select-option>
-            </a-select>
-            <a-select class="inlineFormSelect"
-                      style="width: 205px"
-                      placeholder="请选择市">
-              <a-select-option value="1">
-                客户一
-              </a-select-option>
-              <a-select-option value="2">
-                客户二
-              </a-select-option>
-            </a-select>
-            <a-select class="inlineFormSelect"
-                      style="width: 205px"
-                      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="&nbsp;">
-            <a-input class="dialogInput"
-                     style="width: 635px"
-                     placeholder="请输入详细地址" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="24">
+                      placeholder="请输入现货品种代码" />
+            </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: 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: 635px"
+                     style="width: 562px"
                      placeholder="请输入备注" />
           </a-form-item>
         </a-col>
       </a-row>
+      </fieldset>
+      <fieldset class="formFieldSet">
+        <legend>品类信息</legend>
+        <!-- <a-table class="dialogTable" :data-source="dataSource" :columns="columns" :pagination="false">
+          <a slot="name" slot-scope="text">{{ text }}</a>
+          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
+        </a-table> -->
+        <a-table  class="dialogTable" :columns="columns" :data-source="dataSource" :pagination="false">
+          <a slot="name" slot-scope="text">{{ text }}</a>
+          <span slot="customTitle">品类</span>
+        </a-table>
+      </fieldset>
     </a-form>
   </a-modal>
 </template>
@@ -195,6 +82,53 @@ export default defineComponent({
     setup() {
         const { visible, cancel } = closeModal('addGoods');
         const loading = ref<boolean>(false);
+        const columns = [
+          {
+            // title: 'name',
+            dataIndex: 'name',
+            key: 'name',
+            slots: { title: 'customTitle' },
+            scopedSlots: { customRender: 'name' },
+          },
+          {
+            title: 'age',
+            dataIndex: 'age',
+            key: 'age',
+          },
+          {
+            title: 'address',
+            dataIndex: 'address',
+            key: 'address',
+          },
+          {
+            title: 'tags',
+            key: 'tags',
+            dataIndex: 'tags',
+            // scopedSlots: { customRender: 'tags' },
+          },
+          {
+            title: 'action',
+            key: 'action',
+            scopedSlots: { customRender: 'action' },
+          },
+        ];
+
+        const dataSource = [
+          {
+            key: '1',
+            name: 'John Brown',
+            age: 32,
+            address: 'New York No. 1 Lake Park',
+            tags: ['nice', 'developer'],
+          },
+          {
+            key: '2',
+            name: 'Jim Green',
+            age: 42,
+            address: 'London No. 1 Lake Park',
+            tags: ['loser'],
+          },
+        ];
         function submit() {
             loading.value = true;
             setTimeout(() => {
@@ -208,6 +142,8 @@ export default defineComponent({
             cancel,
             submit,
             loading,
+            dataSource,
+            columns
         };
     },
 });
@@ -215,30 +151,55 @@ export default defineComponent({
 
 <style lang="less">
 .addSpotVariety {
-}
-.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;
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+  .formFieldSet {
+    border: 1px solid @m-grey19;
+    padding: 0 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;
     }
+  }
+  .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
+    width: 120px !important;
+  }
+  .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;
+      }
+  }
+  .red {
+    color: @m-red1;
+  }
 }
-</style
->;
+</style>