上传资料页面

src/components/UploadInforTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="upload_infor_table">
+    <table class="table">
+        <tr>
+        <td>row 1, cell 1</td>
+        <td>row 1, cell 2</td>
+        </tr>
+        <tr>
+        <td>row 2, cell 1</td>
+        <td>row 2, cell 2</td>
+        </tr>
+        </table>
+  </div>
+</template>
+
+<script>
+export default {
+    // props: {
+    //     tableHeader: {
+    //         type: Array,
+
+    //     }
+    // }
+};
+</script>
+
+<style scoped lang="less">
+.upload_infor_table{
+    margin: 5px;
+    .table{
+        border: 1px solid #eee;
+        background-color: #fff;
+    }
+}
+</style>

src/views/data/UploadInfor.vue

@@ -1,54 +1,59 @@
 <template>
   <div class="upload_record">
-    <form action="" method="" name="">
+    <form>
       <div>
-        <span>资料名称</span><input type="text">
+        <span>资料名称</span><input type="text" class="inputStyle focusStyle" v-model="inforName">
       </div>
-      <div class="form_margin">
-        <span class="inforDes">资料描述</span><textarea name="" id="" cols="30" rows="6"></textarea>
+      <div  class="inforDes">
+        <span>资料描述</span><textarea name="inforDes" cols="40" rows="4" class="focusStyle" v-model="inforDes"></textarea>
       </div>
-      <div class="form_margin">
+      <div class="selectType">
         <p>选择类型</p>
-        <div class="form_margin left_margin">
-          <span>素材时间</span><select name="" id="">
-            <option value="">请选择</option>
+        <div>
+          <span>素材时间</span>
+          <select name="materialTime" class="selectStyle" v-model="materialTime">
+            <option>请选择</option>
+            <option  v-for="(time, index) in materialTimeList" :key="index" :value="time">{{time}}</option>
           </select>
           <span>经销商范围</span>
-          <select name="" id="">
-            <option value="">请选择</option>
+          <select name="" id="" class="selectStyle" v-model="range">
+            <option>请选择</option>
+            <option v-for="(range, index) in rangeList" :key="index" :value="range">{{range}}</option>
           </select>          
         </div>
-        <div class="form_margin">
-            <p>权限设置</p>
-          <div class="form_margin left_margin">
-            <span>按区域添加</span>
-            <input type="checkbox">全区
-            <input type="checkbox">北区
-            <input type="checkbox">南区
-            <input type="checkbox">东区
-            <input type="checkbox">自定义分组
-            <button class="addBtn">添加</button>            
-          </div>
-          <div class="form_margin left_margin">
-            <span>自定义添加</span>
-            <input type="text">
-            <button class="addBtn">添加</button>
-          </div>
-          <div class="form_margin left_margin">
-            <span>按小组添加</span>
-            <select name="" id="">
-              <option value="">请选择</option>
-            </select>
-            <button class="addBtn">添加</button>
+      </div>
+      <div>
+        <p>权限设置</p>
+        <div class="addByArea">
+          <span>按区域添加</span>
+          <div v-for="(area, index) in areaList" :key="index">
+            <input type="checkbox"><span>{{area}}</span>
           </div>
+          <button>添加</button>
+        </div>
+        <div class="addByCustomize">
+          <span>自定义添加</span>
+          <input type="text" class="inputStyle focusStyle" v-model="addByCustomize">
+          <button>添加</button>
+        </div>
+        <div class="addByGroup">
+          <span>按小组添加</span>
+          <select name="" id="">
+            <option value="">请选择</option>
+          </select>
+          <button>添加</button>
         </div>
       </div>
     </form>
-    <!-- <div class=""></div> -->
+    <div class="table">
+      <!-- <UpLoadTable/> -->
+    </div>
+    <button @click="submit">提交</button>
   </div>
 </template>
 
 <script>
+// import UpLoadTable from '../../components/UploadInforTable';
 export default {
   props:{
     isManufacturer: {
@@ -56,30 +61,110 @@ export default {
       default: 'distributor'
     },
   },
-  mounted() {
-    console.log(this.isManufacturer);
+  // components: {
+  //   UpLoadTable
+  // },
+  data() {
+    return {
+      inforName: '',
+      inforDes: '',
+      materialTime: '',
+      range: '',
+      addByCustomize: '',
+      areaList: ['全区', '北区', '南区', '东区', '自定义分组'],
+      materialTimeList: ['2020-03', '2020-04'],
+      rangeList: ['1', '2', '3']
+    }
+  },
+  methods: {
+    submit: function() {
+      console.log(this.inforName, this.inforDes, this.materialTime, this.range, this.addByCustomize);
+    } 
   }
 }
 </script>
 
 <style scoped lang="less">
 .upload_record{
-  padding: 15px 30px;
+  padding: 12px 30px;
   .inforDes{
-    vertical-align: top;
-    margin-right: 10px;
+    margin: 10px 0 0 0;
+    span{
+      vertical-align: top;
+      margin-right: 17px;
+    }
+  }
+  .selectType{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    div{
+      margin-left: 65px;
+    } 
+  }
+  .selectStyle{
+    margin-left: 20px;
+    margin-right: 20px;
+    height: 20px;
+    width: 100px;
+  }
+  .addByArea{
+    margin: 10px 0 0 65px;
+    display: flex;
+    height: 28px;
+    align-items: center;
+    span{
+      margin-right: 10px;
+    }
+    div{
+      margin-right: 18px;
+      height: 18px;
+      input{
+        width: 12px;
+        height: 12px;
+        vertical-align: middle;
+        margin-top: -2px;
+      }
+      span{
+        margin-left: 2px;
+        height: 18px;
+        line-height: 18px;
+      }
+      button{
+        height: 28px;
+      }
+    }
+  }
+  .addByCustomize{
+    margin: 10px 0 0 65px;
+    button{
+      height: 28px;
+    }
+  }
+  .addByGroup{
+    margin: 10px 0 0 65px;
+    select{
+      margin-left: 17px;
+      width: 172.8px;
+      height: 28px;
+    }
+    button{
+      height: 28px;
+    }
   }
 }
-input{
-  margin-left: 10px;
-  height: 18px;
+.inputStyle{
+  margin-left: 17px;
+  height: 16px;
+  line-height: 16px;
   padding: 4px 6px;
+}
+.focusStyle{
   outline-color: #ccc;
   line-height: 20px;
   color: #555555;
 }
-input:focus{
-  animation: shadowAni 500ms linear forwards;
+.focusStyle:focus{
+  animation: shadowAni 200ms linear forwards;
 }
 @keyframes shadowAni{
   0%{
@@ -91,10 +176,4 @@ input:focus{
     box-shadow: 0px 0px 10px #75b9F0;
   }
 }
-.left_margin{
-  margin-left: 58px;
-}
-.form_margin{
-  margin-top: 20px;
-}
 </style>