添加用户

src/components/Sidebar.vue

@@ -33,6 +33,10 @@ export default {
           path: "/activity",
           name: "活动列表",
         },
+        {
+          path: "/userlist",
+          name: "用户列表",
+        },
       ],
     };
   },

src/main.js

@@ -29,7 +29,7 @@ Vue.config.productionTip = false;
 
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
-  document.title = `${to.meta.title} | 状态监测数据汇集系统`;
+  document.title = `${to.meta.title} | 运维管理系统`;
   const token = localStorage.getItem("token");
   if (!token && to.path !== "/login") {
     next({

src/router/index.js

@@ -59,6 +59,15 @@ const routes = [
           keepAlive: true,
         },
       },
+      {
+        path: "/userlist",
+        component: () => import("../views/userList/index.vue"),
+        name: "userList",
+        meta: {
+          title: "用户列表",
+          keepAlive: true,
+        },
+      },
     ],
   },
 ];

src/views/userList/components/addEditDialog.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-dialog
+    class="addUserDialog"
+    :title="title"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="rules"
+      :model="formdata"
+    >
+      <el-form-item label="用户名：" prop="userName">
+        <el-input
+          placeholder="请输入用户名"
+          v-model="formdata.userName"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="密码：" prop="password">
+        <el-input
+          placeholder="请输入密码"
+          v-model="formdata.password"
+          show-password
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="备注：" prop="notesNewVal">
+        <el-input
+          placeholder="请输入备注"
+          v-model="formdata.notesNewVal"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addUserApi, updateUserApi } from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+      roleoptions: [
+        {
+          value: 1,
+          label: "管理员",
+        },
+        {
+          value: 2,
+          label: "用户",
+        },
+      ],
+
+      formdata: {},
+      rules: {
+        userName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          // { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+          } else {
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+      this.roleUser = localStorage.getItem("role");
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      //this.$parent.deviceList();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addUserDialog {
+  .el-form-item {
+    .el-input,
+    .el-select,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/userList/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="userbox">
+    <el-button
+      class="addBtn"
+      type="primary"
+      icon="el-icon-plus"
+      @click="handleAdddevice()"
+      >新建用户</el-button
+    >
+    <div class="usercontain">
+      <el-table
+        v-loading="logLoading"
+        :data="userData"
+        border
+        stripe
+        style="width: 100%"
+        height="100%"
+      >
+        <el-table-column type="index" width="50" label="序号">
+        </el-table-column>
+
+        <el-table-column prop="name" label="用户名"> </el-table-column>
+        <el-table-column prop="mark" label="备注"> </el-table-column>
+        <el-table-column prop="updateTime" label="创建时间"> </el-table-column>
+
+        <el-table-column label="操作" class-name="editClass">
+          <template slot-scope="scope">
+            <el-link
+              type="primary"
+              @click="handleEditClick(scope.row)"
+              size="small"
+              icon="el-icon-document"
+              >修改</el-link
+            >
+            <el-link
+              type="danger"
+              @click="handleDeleteClick(scope.row)"
+              size="small"
+              icon="el-icon-delete"
+              >删除</el-link
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <addEditDialog :title="title" ref="adduserref"></addEditDialog>
+  </div>
+</template>
+<script>
+// import { getqueryUploadsApi } from "@/utils/api/index";
+import addEditDialog from "./components/addEditDialog.vue";
+export default {
+  name: "userlist",
+  components: {
+    addEditDialog,
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      logLoading: false,
+      userData: [
+        { name: "用户1", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
+        { name: "用户2", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
+        { name: "用户3", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
+      ],
+    };
+  },
+
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    //新增用户
+    handleAdddevice() {
+      this.title = "修改";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(data);
+    },
+    //修改用户
+    handleEditClick() {
+      this.title = "修改";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(data);
+    },
+    //删除用户
+    handleDeleteClick() {
+      this.$confirm("确定要删除该用户?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {})
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.userbox {
+  height: calc(100% - 24px);
+  width: calc(100% - 24px);
+  padding: 12px;
+  .addBtn {
+    display: flex;
+    margin-left: auto;
+    margin-bottom: 12px;
+  }
+  .usercontain {
+    height: calc(100% - 44px);
+    background: #fcc;
+    .el-table__cell {
+      text-align: center;
+    }
+    .el-table thead {
+      th.el-table__cell {
+        background: #fafafa;
+      }
+    }
+    .editClass {
+      .el-link.el-link--primary {
+        margin-right: 14px;
+      }
+    }
+  }
+}
+</style>