样式更新

src/views/account/register.vue

@@ -4,7 +4,6 @@
       <el-col :span="24" class="btn">
         <el-col :span="20"><h3>账号注册</h3></el-col>
         <el-col :span="4"><el-button type="success" icon="el-icon-plus">添加</el-button></el-col>
-        <el-col></el-col>
       </el-col>
       <el-col :span="24" class="search">
         <el-col :span="3" class="searchSel">
@@ -25,8 +24,13 @@
           :load="load"
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         >
-          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
-          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+          <el-table-column label="姓名" width="180">
+            <template v-slot="scope">
+              <tag type="success" v-if="scope.row.hasChildren">{{ scope.row.zhu }}</tag>
+              <tag type="warning">{{ scope.row.cong }}</tag>
+              <tag>{{ scope.row.name }} </tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="address" label="地址"> </el-table-column>
           <el-table-column prop="state" label="状态">
             <template v-slot="scope">
@@ -34,9 +38,10 @@
             </template>
           </el-table-column>
           <el-table-column label="操作">
-            <template slot-scope="scope">
+            <template v-slot="scope">
               <el-button size="mini" @click="openDialog(scope.$index)">修改</el-button>
-              <el-button size="mini" type="danger" @click="open">注销</el-button>
+              <el-button v-if="scope.row.state == 1" size="mini" type="danger" @click="open1(scope.$index)">注销</el-button>
+              <el-button v-if="scope.row.state == 0" type="success" size="mini" @click="open2(scope.$index)">恢复</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -96,39 +101,38 @@ export default {
     tableData: [
       {
         id: 1,
-        date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄',
         state: '0',
+        zhu: '主',
       },
       {
         id: 2,
-        date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1517 弄',
         state: '1',
+        zhu: '主',
       },
       {
         id: 3,
-        date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1519 弄',
         state: '0',
+        zhu: '主',
         hasChildren: true,
       },
       {
         id: 4,
-        date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄',
         state: '0',
+        zhu: '主',
       },
     ],
     editForm: {
       date: '',
       name: '',
       address: '',
-      state: '',
     },
     editFormVisible: false,
   }),
@@ -140,31 +144,33 @@ export default {
         resolve([
           {
             id: 31,
-            date: '2016-05-01',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1519 弄',
             state: '1',
+            cong: '从',
           },
           {
             id: 32,
-            date: '2016-05-01',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1519 弄',
             state: '0',
+            cong: '从',
           },
         ]);
       }, 1000);
     },
-    open() {
-      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+    open1(num) {
+      console.log(num);
+      this.$confirm('确认注销此用户吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       })
         .then(() => {
+          this.$set(this.tableData[num], `state`, '0');
           this.$message({
             type: 'success',
-            message: '删除成功!',
+            message: '注销成功!',
           });
         })
         .catch(() => {
@@ -174,6 +180,27 @@ export default {
           });
         });
     },
+    open2(num) {
+      console.log(num);
+      this.$confirm('确认恢复此用户吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.$set(this.tableData[num], `state`, '1');
+          this.$message({
+            type: 'success',
+            message: '恢复成功!',
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消',
+          });
+        });
+    },
     openDialog(index) {
       this.editFormVisible = true;
       let data = JSON.parse(JSON.stringify(this.tableData[index]));

src/views/certificate/index.vue

@@ -1,35 +1,38 @@
 <template lang="html">
   <div id="certificate">
-    <span style="padding:1rem;font-size:25px ">凭证管理</span>
-    <el-row style="padding:2rem;">
-      <el-col :span="12">
-        <el-input placeholder="请输入需查询用户信息" v-model="input">
-          <el-select v-model="value" slot="prepend" multiple placeholder="请选择查询凭证方式" style="width: 224px;">
+    <el-row class="register">
+      <el-col :span="24" class="btn">
+        <el-col :span="20"><h3>凭证管理</h3></el-col>
+      </el-col>
+      <el-col :span="24" class="search">
+        <el-col :span="3" class="searchSel">
+          <el-select v-model="value" placeholder="请选择">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
           </el-select>
-          <el-button slot="append" icon="el-icon-search"></el-button>
-        </el-input>
+        </el-col>
+        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
+        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
+      </el-col>
+      <el-col>
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column align="center" prop="user" label="用户" width="200"> </el-table-column>
+          <el-table-column align="center" prop="word" label="口令"> </el-table-column>
+          <el-table-column align="center" prop="certificate" label="证书"> </el-table-column>
+          <el-table-column align="center" prop="fingerprint" label="指纹"> </el-table-column>
+          <el-table-column align="center" prop="state" label="状态">
+            <template v-slot="scope">
+              {{ scope.row.state === '0' ? '冻结' : '使用中' }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="操作" width="300">
+            <template v-slot="scope">
+              <el-button icon="el-icon-edit" @click="dialogFormVisible = true">修改</el-button>
+              <el-button v-if="scope.row.state == 1" type="danger" icon="el-icon-delete" @click="open1(scope.$index)">注销</el-button>
+              <el-button v-if="scope.row.state == 0" type="danger" icon="el-icon-delete" @click="open2(scope.$index)">恢复</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-col>
-    </el-row>
-    <el-row style="padding:2rem;">
-      <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column align="center" prop="user" label="用户" width="200"> </el-table-column>
-        <el-table-column align="center" prop="word" label="口令"> </el-table-column>
-        <el-table-column align="center" prop="certificate" label="证书"> </el-table-column>
-        <el-table-column align="center" prop="fingerprint" label="指纹"> </el-table-column>
-        <el-table-column align="center" prop="state" label="状态">
-          <template v-slot="scope">
-            {{ scope.row.state === '0' ? '冻结' : '使用中' }}
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="操作" width="300">
-          <template v-slot="scope">
-            <el-button icon="el-icon-edit" @click="dialogFormVisible = true">修改</el-button>
-            <el-button v-if="tableData[scope.row].state == 1" type="danger" icon="el-icon-delete" @click="open1(scope.$index)">注销</el-button>
-            <el-button v-if="tableData[scope.row].state == 0" type="danger" icon="el-icon-delete" @click="open2(scope.$index)">恢复</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </el-row>
     <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="25%">
       <el-form :model="form">
@@ -171,4 +174,38 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.register {
+  width: 100%;
+  padding: 20px;
+}
+.btn {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 20px 0;
+}
+.search {
+  height: 40px;
+  line-height: 40px;
+  margin: 0 0 20px 0;
+}
+.searchSel .el-select {
+  border-radius: 0;
+}
+/deep/.searchInp .el-input__inner {
+  border-radius: 0;
+}
+.searchBtn .el-button {
+  border-radius: 0;
+}
+</style>