Merge pull request '邓洁: 用户管理及全选功能字体更改' (#167) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/167

src/App.vue

@@ -31,3 +31,6 @@ onMounted(() => {
   });
 });
 </script>
+<style>
+@import "./assets/fonts/font.css";
+</style>

src/assets/fonts/font.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'MicrosoftYaHei';
+    src: url('MicrosoftYaHei.ttf');
+    font-weight: normal;
+    font-style: normal;
+}

src/assets/styles/index.scss

@@ -11,6 +11,22 @@
   -ms-user-select: none; /*IE10*/
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
+  font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+}
+
+body {
+  background-color: #f5f5f5;
+}
+
+.el-container {
+  height: 100%;
+}
+
+.el-aside {
+  background-color: #ffffff;
+  height: 100%;
+  overflow: auto;
 }
 
 a {

src/views/site/index.vue

@@ -235,7 +235,9 @@ const handleSubmit = (instance) => {
   // })
 }
 const handleChooseAll=()=>{
-  console.log('全选')
+  siteList.value.map(item=>{
+    item.checked=!item.checked
+  })
 }
 const handleMoreDelete = () => {
   if (siteIds.value.length === 0) {

src/views/tunnel-manage/index.vue

@@ -10,7 +10,7 @@
         <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
           添加
         </div>
-        <div class="all-btn">
+        <div class="all-btn" @click="handleChooseAll">
           全选
         </div>
         <div class="all-btn del-btn" @click="handleMoreDelete">
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="box-content">
-      <div class="site-box" v-for="item in siteList" :key="item.tunnelId">
+      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
           <span>施工长度500米 隧道长度10公里</span>
@@ -99,7 +99,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 const router = useRouter()
 const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
-const siteList = ref([
+const tunnelList = ref([
   {
     tunnelName: '一号隧道',
     num: 1,
@@ -219,7 +219,11 @@ const form = ref({
   tunnelLength: '',
   remarks: ''
 });
-
+const handleChooseAll=()=>{
+  tunnelList.value.map(item=>{
+    item.checked=!item.checked
+  })
+}
 const handleEdit = () => {
   title.value = '编辑隧道'
   isVisited.value = true

src/views/user/index.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
-        <div class="all-btn">
+        <div class="all-btn" @click="handleAll">
           全选
         </div>
         <div class="all-btn del-btn" @click="handleMoreDelete">
@@ -28,34 +28,111 @@
             <el-button type="primary" :icon="Search" style="margin-left: 20px">搜索</el-button>
           </div>
           <div>用户管理</div>
-          <div class="add-btn">添加用户</div>
+          <div class="add-btn" @click="addUser">添加用户</div>
         </div>
         <div class="device-table">
-          <el-table stripe
+          <el-table stripe ref="multipleTable"
-                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;margin-top: 80px;"
                     :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                     :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
-            <el-table-column type="selection" width="80" />
+            <el-table-column type="selection" width="80"/>
             <el-table-column prop="account" label="账户" align="center"/>
             <el-table-column prop="password" label="密码" align="center"/>
             <el-table-column prop="identity" label="身份" align="center"/>
             <el-table-column label="操作" align="center">
               <template #default>
-                <el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;">修改</el-button>
+                <el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;" @click="editUser">修改</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </div>
+    <el-dialog v-model="isVisited" width="1658px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
+        <el-form-item label="输入账户">
+          <el-input v-model="form.account" placeholder="请输入账户"/>
+        </el-form-item>
+        <el-form-item label="输入密码">
+          <el-input v-model="form.password" placeholder="请输入密码"/>
+        </el-form-item>
+        <el-form-item label="选择身份">
+          <el-checkbox-group v-model="form.identity" @change="handleChangeCheckbox">
+            <el-checkbox v-for="item in checkList" :label="item.label" :key="item.value"/>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="btns">
+          <div class="cancel-btn" @click="isVisited=false">
+            取消
+          </div>
+          <div class="sure-btn" @click="handleSubmit(formInstance)">
+            确定
+          </div>
+        </div>
+      </template>
+    </el-dialog>
+    <div class="pagination">
+      <span>首页</span>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange"/>
+      <span>尾页</span>
+    </div>
   </div>
 </template>
 
 <script setup>
 import {Search} from '@element-plus/icons-vue'
+
 const router = useRouter()
 const username = ref()
 const userData = ref([
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
+  {
+    account: '123343546',
+    password: '243',
+    identity: '超级管理员'
+  },
   {
     account: '123343546',
     password: '243',
@@ -72,6 +149,37 @@ const userData = ref([
     identity: '超级管理员'
   }
 ])
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 6
+});
+const total = ref(10);
+const isVisited = ref(false);
+const form = ref({
+  password: '',
+  account: '',
+  identity: []
+});
+const formRules = ref({
+  account: [{required: true, message: '请输入站点名称', trigger: 'blur'}],
+  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
+})
+const checkList=ref([
+  { label: "系统管理员", value: 111 },
+  { label: "站点管理员", value: 222 },
+  { label: "隧道管理员", value: 333 },
+  { label: "巡查员", value: 444 }
+])
+const multipleTable=ref()
+const addUser = () => {
+  isVisited.value = true
+}
+const editUser = () => {
+  isVisited.value = true
+}
+const handleAll=()=>{
+  multipleTable.value.toggleAllSelection()
+}
 </script>
 
 <style scoped lang="scss">
@@ -145,7 +253,7 @@ const userData = ref([
       display: flex;
       flex-direction: column;
       width: 2194px;
-      height: 1321px;
+      height: 1480px;
       background: #064B66;
       border-radius: 20px;
       border: 2px solid #05FEFF;
@@ -155,6 +263,7 @@ const userData = ref([
       .user-top {
         width: 100%;
         display: flex;
+        align-items: center;
         justify-content: space-between;
 
         > div:nth-child(2) {
@@ -167,13 +276,14 @@ const userData = ref([
         }
 
         .add-btn {
-          width: 150px;
+          cursor: pointer;
-          height: 50px;
+          width: 170px;
-          line-height: 50px;
+          height: 60px;
+          line-height: 60px;
           background: #08B7B8;
           border-radius: 6px;
           color: #FFFFFF;
-          font-size: 28px;
+          font-size: 35px;
           padding-left: 19px;
         }
 
@@ -181,22 +291,28 @@ const userData = ref([
           display: flex;
 
           :deep(.el-button) {
-            width: 130px;
+            width: 140px;
-            height: 50px;
+            height: 60px;
             background: #08B7B8;
             border-radius: 6px;
             border: none;
-            font-size: 28px;
+            font-size: 35px;
             color: #FFFFFF;
           }
 
           :deep(.el-input__wrapper) {
             width: 292px;
-            height: 50px;
+            height: 60px;
             border-radius: 6px;
             border: 1px solid #05FEFF;
             background-color: transparent;
-            font-size: 28px;
+            font-size: 35px;
+
+            .el-input__inner {
+              height: 60px;
+              line-height: 60px;
+              color: #FFFFFF;
+            }
           }
         }
       }
@@ -228,29 +344,124 @@ const userData = ref([
         background-color: #13849C !important;
       }
 
-      :deep(.el-table__cell) {
-        .el-input {
-          width: 180px;
-          height: 53px;
-        }
-
-        .el-input__wrapper {
-          border-radius: 6px;
-          border: 1px solid #05FEFF;
-          background-color: transparent;
-
-          .el-input__inner {
-            color: #FFFFFF;
-            font-size: 40px;
-          }
-        }
-      }
-
       :deep(.el-table__inner-wrapper::before) {
         display: none;
       }
     }
   }
-}
 
+  :deep(.el-dialog) {
+    border: 2px solid #05FEFF;
+    background: #0D6578;
+    border-radius: 20px;
+    padding: 30px 40px;
+    box-sizing: border-box;
+    margin: 458px auto 0 auto;
+
+    .el-dialog__header {
+      padding: 0;
+      display: none;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-top: 40px;
+  }
+
+  :deep(.el-form-item__label) {
+    font-size: 38px;
+    font-family: MicrosoftYaHei;
+    color: #FFFFFF;
+    margin-right: 12px;
+    line-height: 50px;
+  }
+
+  :deep(.el-input) {
+    height: 75px;
+
+    .el-input__wrapper {
+      background-color: transparent;
+      border: 1px solid #08B7B8;
+
+      .el-input__inner {
+        height: auto;
+        color: #fff;
+        font-size: 38px;
+      }
+    }
+  }
+  :deep(.el-checkbox-group){
+    margin-top: 10px;
+  }
+:deep(.el-checkbox__label){
+  color: #FFFFFF;
+  font-size: 38px;
+}
+  .pagination {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 290px;
+    display: flex;
+    align-items: center;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    > span:first-child {
+      cursor: pointer;
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      cursor: pointer;
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+}
 </style>