commit

src/assets/styles/mixin.less

@@ -415,4 +415,7 @@
     .ant-input-suffix {
         color: #E5E5E5;
     }
+    &:hover,&:focus {
+        border-color: @m-blue10;
+    }
 }

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

@@ -0,0 +1,245 @@
+<template>
+  <!-- 新增现货品种 -->
+  <a-modal class="addSpotVariety"
+           title="新增现货品种"
+           v-model:visible="visible"
+           @cancel="cancel"
+           width="890px">
+    <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"
+                      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"
+                      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">
+        <a-col :span="24">
+          <a-form-item label="备注">
+            <a-input class="dialogInput"
+                     style="width: 635px"
+                     placeholder="请输入备注" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { closeModal, openModal } from '@/common/setup/modal/index';
+import { initData } from '@/common/methods/index';
+
+export default defineComponent({
+    name: 'addSpotVariety',
+    components: {},
+    setup() {
+        const { visible, cancel } = closeModal('addSpotVariety');
+        const { openAction: addAction } = openModal('addSpotVariety');
+        const loading = ref<boolean>(false);
+        function submit() {
+            loading.value = true;
+            setTimeout(() => {
+                loading.value = false;
+                cancel();
+            }, 2000);
+        }
+        initData(() => {});
+        return {
+            visible,
+            cancel,
+            submit,
+            loading,
+        };
+    },
+});
+</script>
+
+<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;
+    }
+}
+</style
+>;