commit

04.系统编码/Frontend/.idea/workspace.xml

@@ -47,6 +47,7 @@
       <workItem from="1638235051409" duration="129000" />
       <workItem from="1638235200843" duration="11502000" />
       <workItem from="1638248948876" duration="8558000" />
+      <workItem from="1638257712429" duration="4830000" />
     </task>
     <servers />
   </component>

04.系统编码/Frontend/src/components/SystemManagement.vue

@@ -7,7 +7,7 @@
           <div class="left">
               <h1>用户名称：</h1>
 
-            <el-select v-model="value">
+            <el-select v-model="value"  style="width: 305px">
               <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -20,21 +20,46 @@
            <img src="/images/search.png">
           </div>
           <div class="right">
-            <span>添加新用户</span>
+            <span @click="onAddClick">添加新用户</span>
           </div>
           </div>
 
           <div class="tableMessage">
-          <el-table :data="tableData" border  style="width: 100%">
+          <el-table :data="tableData" border  style="width: 100%;color: black">
             <el-table-column prop="date" label="序号" width="216px" align="center"/>
             <el-table-column prop="name" label="用户账号" width="300px" align="center"/>
-            <el-table-column prop="name" label="电话" width="301px" align="center"/>
+            <el-table-column prop="address" label="电话" width="301px" align="center"/>
             <el-table-column prop="name" label="邮箱" width="351px" align="center"/>
             <el-table-column prop="name" label="操作" width="351px" align="center"/>
           </el-table>
           </div>
 
         </div>
+      <!--弹出框--->
+      <el-dialog v-model="dialogFormVisible" title="添加新用户" show-close=false center=true width="961px">
+        <el-form :model="form">
+          <el-form-item label="用户账号：" :label-width="formLabelWidth">
+            <el-input v-model="form.accountNumber" autocomplete="off" style="width: 260px"></el-input>
+          </el-form-item>
+          <el-form-item label="用户姓名：" :label-width="formLabelWidth">
+            <el-input v-model="form.name" autocomplete="off" style="width: 260px"></el-input>
+          </el-form-item>
+          <el-form-item label="电话：" :label-width="formLabelWidth">
+            <el-input v-model="form.phone" autocomplete="off" style="width: 260px"></el-input>
+          </el-form-item>
+          <el-form-item label="邮箱：" :label-width="formLabelWidth">
+            <el-input v-model="form.mailbox" autocomplete="off" style="width: 260px"></el-input>
+          </el-form-item>
+
+
+        </el-form>
+        <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="dialogFormVisible = false" style="color:#FFFFFF;">保存</el-button>
+        <el-button  @click="dialogFormVisible = false">取消</el-button>
+      </span>
+        </template>
+      </el-dialog>
 
 
     </div>
@@ -60,12 +85,46 @@
               {
                 value: 'Option3',
                 label: 'Option3',
-              },]
+              }],
-          })
+            dialogFormVisible:false,
+            formLabelWidth:"100px",
+            form:{
+              name:'',
+              accountNumber:'',
+              phone:'',
+              mailbox:''
+            },
+            tableData:[
+              {
+                date: '1',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+              },
+              {
+                date: '2',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+              },
+              {
+                date: '3',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+              },
+              {
+                date: '4',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+              },
+            ]
 
+          })
+          const onAddClick = ()=>{
+            option.dialogFormVisible=true
+          }
             return {
               ...toRefs(option),
               value: ref(''),
+              onAddClick
             }
         }
     }
@@ -79,10 +138,12 @@
         display: flex;
         justify-content: space-between;
         .left{
-
-
           display: flex;
           justify-content: space-between;
+
+          :deep(.el-input__icon::after){
+
+          }
           h1{
             width: 100px;
             height: 26px;
@@ -121,9 +182,32 @@
         }
       }
     .tableMessage{
-
       padding: 56px 20px 20px;
+      :deep(.el-table thead){
+        color: black;
+      }
+
+    }
+
     }
+    :deep(.el-form-item__label){
+      text-align: left;
+      color: #000000;
 
     }
+    :deep(.el-form){
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+    }
+    :deep(.el-button){
+      width: 159px;
+      height: 44px;
+      opacity: 1;
+      border-radius: 4px;
+      border: 1px solid #498DF0;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #498DF0;
+    }
 </style>