更新页面

package-lock.json

@@ -1780,6 +1780,16 @@
           "integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428108619&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1806,6 +1816,34 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@@ -1827,6 +1865,25 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -1891,6 +1948,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1597229595508&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1907,6 +1974,18 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
+          "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -14505,87 +14584,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz",
-      "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.2",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-3.5.2.tgz",

src/assets/styles/element.less

@@ -4,16 +4,18 @@
   font-weight: 400;
   color: #666666;
 }
-.el-button--primary{
-  background:#F23F3A;
-  border-color:#F23F3A;
-  color:#FFFFFF;
+
+.el-button--primary {
+  background: #F23F3A;
+  border-color: #F23F3A;
+  color: #FFFFFF;
 }
+
 .el-button--default {
   background: rgba(242, 63, 58, 0.1);
   color: #F23F3A;
   border-color: #F23F3A;
-  
+
 }
 
 .el-pagination {
@@ -24,7 +26,8 @@
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #F23F3A;
   border: 1px solid #F23F3A;
-  border-radius: 4px;;
+  border-radius: 4px;
+  ;
   color: #fff;
 }
 
@@ -58,13 +61,16 @@
     position: relative;
   }
 }
-.el-dialog__footer{
+
+.el-dialog__footer {
   text-align: center;
   padding: 60px 20px;
-  .el-button{
+
+  .el-button {
     width: 120px;
   }
 }
+
 .el-dialog__headerbtn {
   width: 28px;
   height: 28px;
@@ -121,9 +127,11 @@
 .rowover.hover-row {
   background: #fd5f5140 !important;
 }
-.el-table thead{
+
+.el-table thead {
   color: #040000;
 }
+
 .el-table thead.is-group th {
   background: #ffffff;
 }
@@ -138,7 +146,7 @@
   border-right: 1px solid #ebeef5;
 }
 
-.el-tree-node.is-current > .el-tree-node__content {
+.el-tree-node.is-current>.el-tree-node__content {
   background-color: #f7e0e3 !important;
 }
 
@@ -165,6 +173,7 @@ input[maxlength='32']:not([disabled]) {
 //   padding-right: 40px;
 // }
 #app #main .serchArea {
+
   .el-date-editor--daterange.el-input,
   .el-date-editor--daterange.el-input__inner,
   .el-date-editor--timerange.el-input,
@@ -177,7 +186,7 @@ input[maxlength='32']:not([disabled]) {
   padding: 0 !important;
 }
 
-.el-cascader__tags .el-tag > span {
+.el-cascader__tags .el-tag>span {
   flex: auto;
 }
 
@@ -239,6 +248,7 @@ input[maxlength='32']:not([disabled]) {
 
 // 多选限制宽度
 .el-tag__close_icon {
+
   //根据自己的需要调整文字宽度
   .el-select__tags-text {
     display: inline-block;
@@ -247,10 +257,12 @@ input[maxlength='32']:not([disabled]) {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .el-tag__close.el-icon-close {
     top: 0px;
   }
 }
+
 .el-table__row:last-child td:last-child {
   top: 0;
 }
@@ -265,14 +277,47 @@ input[maxlength='32']:not([disabled]) {
     max-width: 400px;
   }
 }
+
 .el-select-dropdown__wrap {
   max-height: 350px;
 }
+
 .screen {
   max-width: 340px !important;
   min-width: none;
 }
-.el_form_item_content{
+
+.el_form_item_content {
   width: 230px !important;
   min-width: none;
 }
+
+.header_top_form {
+  .el-form-item__label {
+    color: #333;
+    font-weight: bold;
+  }
+}
+.el-menu-item,
+.el-menu-item [class^=el-icon-] {
+  font-size: 20px;
+  color: #A5A5A5 !important;
+  font-weight: 400;
+}
+.el-menu-item{
+  padding-left: 42px !important;
+}
+.el-menu-item.is-active{
+  padding-left: 0 !important;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active [class^=el-icon-] {
+  color: #F4453E !important;
+}
+
+.el-menu-item.is-active .icon_left {
+  border-right: 4px solid #F4453E;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  margin-right: 38px;
+}

src/components/elTable/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column
-        v-for="(item, index) in listData"
-        :key="index"
-        :width="item.width"
-        :min-width="item.minWidth"
-        :align="item.align"
-      >
-        <template slot="header">
-          <div>
-            {{ item.name }}
-          </div>
-        </template>
-        <template slot-scope="scope">
-          <div>
-            <div>{{ scope.row[item.value] }}</div>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="form.currentPage4"
-      :page-sizes="[100, 200, 300, 400]"
-      :page-size="10"
-      background
-      layout="total,prev, pager, next,jumper"
-      :total="100"
-    >
-    </el-pagination>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        currentPage4: 1
-      },
-      tableData: [],
-      listData: []
-    }
-  },
-  props: {
-    formList: {
-      type: Object,
-      default: () => {}
-    },
-    listdata: {
-      type: Array,
-      default: () => []
-    },
-    tabledata: {
-      type: Array,
-      default: () => []
-    }
-  },
-  watch: {
-    listdata(val) {
-      console.log(val)
-      this.listData = val
-    },
-    tabledata(val) {
-      this.tableData = val
-    },
-    formList(val) {
-      this.form = val
-    }
-  },
-  methods: {
-    handleSizeChange() {},
-    handleCurrentChange() {}
-  }
-}
-</script>

src/layout/components/AppMain.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="app-main">
+  <section class="app-main" :id="isApp_main ? 'app-main-id' : ''">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="include">
-        <router-view :id="isApp_main?'appMain-box':''" />
+        <router-view :id="isApp_main ? 'appMain-box' : ''" />
       </keep-alive>
     </transition>
   </section>
@@ -57,23 +57,24 @@ export default {
 </script>
 
 <style lang="less" type="text/scss" scoped>
-#appMain-box{
+#appMain-box {
   margin: 28px 16px 35px 23px;
   padding: 20px;
   background: #fff;
 }
+#app-main-id {
+  max-height: calc(100vh - 70px);
+}
 .app-main {
-  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
   overflow-y: auto;
   flex: 1;
-  background: #FFF9F9;
+  background: #fff9f9;
 }
 .fixed-header + .app-main {
   padding-top: 50px;
 }
-// fix css style bug in open el-dialog
 .el-popup-parent--hidden {
   .fixed-header {
     padding-right: 15px;

src/layout/components/Sidebar/menuList.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <div style="text-align:center">
-      <img src="@/assets/image/lolo2.png" style="width:136px;margin:75px 0 60px 0" alt="">
+    <div style="text-align: center">
+      <img
+        src="@/assets/image/lolo2.png"
+        style="width: 136px; margin: 75px 0 60px 0"
+        alt=""
+      />
     </div>
     <template v-for="(item, i) in routesData">
       <el-submenu
@@ -11,8 +15,10 @@
         :key="i"
       >
         <template slot="title">
-          <i :class="item.meta.icon"></i>
-          <span slot="title">{{ item.meta.title }}</span>
+          <span>
+            <i :class="item.meta.icon"></i>
+            <span slot="title">{{ item.meta.title }}</span>
+          </span>
         </template>
         <submenu :routes-data="item.children"></submenu>
       </el-submenu>
@@ -30,6 +36,7 @@
           @click="changeMenu(item)"
           :key="item.name"
         >
+          <span class="icon_left"> </span>
           <i :class="item.meta.icon"></i>
           <span slot="title">
             {{ item.meta.title }}

src/layout/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <el-container style="overflow: hidden">
+    <el-container>
       <el-aside v-if="showComponents" width="200px">
         <Sidebar />
       </el-aside>
-      <el-container style="display: block">
+      <el-container style="display:block">
         <Navbar v-if="showComponents" />
-        <app-main />
+          <app-main />
       </el-container>
     </el-container>
   </div>

src/pages/classification/edit.vue

@@ -36,7 +36,8 @@
 export default {
   data() {
     return {
-      dialogVisible: false
+      dialogVisible: false,
+      radio:''
     }
   },
   methods: {

src/pages/classification/index.vue

@@ -1,30 +1,37 @@
 <template>
   <div class="classification_list">
     <div class="classification_list_headerSelect">
-      <el-form
-        slot="form"
-        style="display: inline"
-        inline
-        :addList="true"
-      >
-        <el-form-item label="分类名称：">
-          <el-input size="small" placeholder="请输入"></el-input>
+      <el-form slot="form" style="display: inline" :model="form" inline :addList="true">
+        <el-form-item class="header_top_form" label="分类名称：">
+          <el-input v-model.trim="form.name" size="small" placeholder="请输入"></el-input>
         </el-form-item>
-        <el-form-item label="状态：">
-          <el-input size="small"></el-input>
+        <el-form-item class="header_top_form" label="状态：">
+          <el-select v-model="form.status" size="small" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button size="small" style="width:88px" type="primary">查询</el-button>
+          <el-button size="small" style="width: 88px" type="primary"
+            >查询</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-button size="small" style="width:104px;margin-right:23px">新增</el-button>
+      <el-button size="small" style="width: 104px; margin-right: 23px"
+        >新增</el-button
+      >
     </div>
     <el-table
       :data="tableData"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
-      height="60vh"
+      height="66vh"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -82,7 +89,12 @@ export default {
   },
   data() {
     return {
+      form:{
+        name:'',
+        status:''
+      },
       tableData: [],
+      options:[],
       listData: [
         {
           name: '分类名称',
@@ -197,6 +209,69 @@ export default {
           status: true,
           userName: 'ss',
           userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
+        },
+        {
+          name: '1',
+          string: '1',
+          status: true,
+          userName: 'ss',
+          userTime: '2021'
         }
       ]
     })

src/pages/fileManagement/detail.vue

@@ -29,9 +29,14 @@
 <script>
 export default {
   data() {
+    const item = {
+      date: '2016-05-02',
+      name: '王小虎',
+      address: '上海市普陀区金沙江路 1518 弄'
+    }
     return {
       dialogVisible: false,
-      tableData: []
+      tableData: Array(20).fill(item)
     }
   },
   methods: {

src/pages/fileManagement/edit.vue

@@ -58,7 +58,8 @@
 export default {
   data() {
     return {
-      dialogVisible: false
+      dialogVisible: false,
+      radio:''
     }
   },
   methods: {

src/pages/fileManagement/index.vue

@@ -1,29 +1,40 @@
 <template>
   <div class="fileManagement_List">
     <div class="fileManagement_List_headerSelect">
-        <el-form
-        slot="form"
-        style="display: inline"
-        inline
-        :addList="true"
-      >
-        <el-form-item label="分类名称：">
-          <el-input size="small"></el-input>
+      <el-form slot="form" style="display: inline" :model="form" inline :addList="true">
+        <el-form-item class="header_top_form" label="分类名称：">
+          <el-input v-model.trim="form.name" placeholder="请输入" size="small"></el-input>
+        </el-form-item>
+        <el-form-item class="header_top_form" label="文件名称：">
+          <el-input v-model.trim="form.fileName" placeholder="请输入" size="small"></el-input>
         </el-form-item>
-        <el-form-item label="状态：">
-          <el-input size="small"></el-input>
+        <el-form-item class="header_top_form" label="状态：">
+          <el-select v-model="form.status" size="small" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button size="small" type="primary" style="width:88px" >查询</el-button>
+          <el-button size="small" type="primary" style="width: 88px"
+            >查询</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-button size="small" style="width:104px;margin-right:23px">新增</el-button>
+      <el-button size="small" style="width: 104px; margin-right: 23px"
+        >新增</el-button
+      >
     </div>
     <el-table
       :data="tableData"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
+      height="66vh"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -54,7 +65,9 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <div>
-            <el-button type="text" @click="history(scope.row)">历史版本</el-button>
+            <el-button type="text" @click="history(scope.row)"
+              >历史版本</el-button
+            >
             <el-button type="text" @click="edit">编辑</el-button>
           </div>
         </template>
@@ -72,7 +85,7 @@
     >
     </el-pagination>
     <editDialog ref="editDialogRefs" />
-    <detailDialog ref="detailDialogRefs"/>
+    <detailDialog ref="detailDialogRefs" />
   </div>
 </template>
 <script>
@@ -87,6 +100,7 @@ export default {
   data() {
     return {
       tableData: [],
+      options:[],
       listData: [
         {
           name: '分类名称',
@@ -132,7 +146,10 @@ export default {
         }
       ],
       form: {
-        pageNum: 4
+        pageNum: 4,
+        name:'',
+        fileName:'',
+        status:''
       }
     }
   },
@@ -154,7 +171,7 @@ export default {
           status: false,
           userName: '4',
           userTime: '5'
-        },
+        }
       ]
     })
   },
@@ -166,7 +183,7 @@ export default {
       this.$refs.editDialogRefs.openClose()
     },
     // 历史版本
-    history(){
+    history() {
       this.$refs.detailDialogRefs.openClose()
     }
   }

src/pages/login/index.less

@@ -122,7 +122,11 @@
     border-bottom: 1px solid #AFAFAF;
     background-color: #fff;
   }
-
+  & /deep/ .el-input__inner:focus{
+    border-top-color: #fff;
+    border-left-color: #fff;
+    border-right-color:#fff;
+  }
   & /deep/ .el-form-item__content {
     line-height: 6vh;
     font-size: 2vh;

src/pages/userManagement/edit.vue

@@ -47,7 +47,8 @@
 export default {
   data() {
     return {
-      dialogVisible: false
+      dialogVisible: false,
+      radio:''
     }
   },
   methods: {

src/pages/userManagement/index.vue

@@ -1,29 +1,32 @@
 <template>
-  <div v-loading.fullscreen.lock="fullscreenLoading" class="userManagement_list">
-      <div class="userManagement_list_headerSelect">
-        <el-form
-        slot="form"
-        style="display: inline"
-        inline
-        :addList="true"
-      >
-        <el-form-item label="分类名称：">
-          <el-input size="small"></el-input>
+  <div
+    v-loading.fullscreen.lock="fullscreenLoading"
+    class="userManagement_list"
+  >
+    <div class="userManagement_list_headerSelect">
+      <el-form slot="form" style="display: inline" inline :addList="true">
+        <el-form-item class="header_top_form" label="账号：">
+          <el-input placeholder="请输入" size="small"></el-input>
         </el-form-item>
-        <el-form-item label="状态：">
-          <el-input size="small"></el-input>
+        <el-form-item class="header_top_form" label="姓名：">
+          <el-input placeholder="请输入" size="small"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button size="small" type="primary" style="width:88px" >查询</el-button>
+          <el-button size="small" type="primary" style="width: 88px"
+            >查询</el-button
+          >
         </el-form-item>
       </el-form>
-      <el-button size="small" style="width:104px;margin-right:23px">新增</el-button>
+      <el-button size="small" style="width: 104px; margin-right: 23px"
+        >新增</el-button
+      >
     </div>
     <el-table
       :data="tableData"
       style="width: 100%"
       stripe
       :header-cell-style="{ background: '#F7F7F7' }"
+      height="66vh"
     >
       <el-table-column
         v-for="(item, index) in listData"
@@ -54,7 +57,9 @@
         <template slot-scope="scope">
           <div>
             <el-button type="text" @click="edit(scope.row)">编辑</el-button>
-            <el-button type="text" @click="resetPasswords(scope.row)">重置密码</el-button>
+            <el-button type="text" @click="resetPasswords(scope.row)"
+              >重置密码</el-button
+            >
           </div>
         </template>
       </el-table-column>
@@ -70,8 +75,8 @@
       :total="100"
     >
     </el-pagination>
-    <editDialog ref="editDialogRefs"/>
-    <detailDialog ref="detailDialogRefs"/>
+    <editDialog ref="editDialogRefs" />
+    <detailDialog ref="detailDialogRefs" />
   </div>
 </template>
 <script>
@@ -79,7 +84,7 @@ import editDialog from './edit'
 import detailDialog from './detail'
 export default {
   name: 'userManagement',
-  components:{
+  components: {
     editDialog,
     detailDialog
   },
@@ -111,21 +116,19 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(()=>{
-      this.tableData = [
-        {}
-      ]
+    this.$nextTick(() => {
+      this.tableData = [{}]
     })
   },
   methods: {
     handleSizeChange() {},
     handleCurrentChange() {},
     // 编辑
-    edit(){
+    edit() {
       this.$refs.editDialogRefs.openClose()
     },
     // 重置密码
-    resetPasswords(){
+    resetPasswords() {
       this.$refs.detailDialogRefs.openClose()
     }
   }

vue.config.js

@@ -13,6 +13,10 @@ module.exports = {
   css: {
     requireModuleExtension: true
   },
+  devServer: {
+    port: 8888, // 端口
+    open: true, // 启动后打开浏览器
+  },
   chainWebpack: config => {
     //最小化代码
     config.optimization.minimize(true)