邓洁: 用户管理及全选功能字体更改

2023-12-18 23:04:20 +08:00
parent 75a24b31d1
commit e4fada8d75
7 changed files with 283 additions and 41 deletions
--- a/src/views/site/index.vue
+++ b/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) {
--- a/src/views/tunnel-manage/index.vue
+++ b/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
--- a/src/views/user/index.vue
+++ b/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
-                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+          <el-table stripe ref="multipleTable"
+                    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;
-          height: 50px;
-          line-height: 50px;
+          cursor: pointer;
+          width: 170px;
+          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;
-            height: 50px;
+            width: 140px;
+            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;
      }
    }
  }
-}

-</style>
+  :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>