From 5cb4dd9ad022bb78c67190d71d68c19c7636abdb Mon Sep 17 00:00:00 2001
From: liuyi <l_cheny@foxmail.com>
Date: Fri, 19 May 2023 17:13:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Sidebar.vue       |  22 +--
 src/views/system/components/addUser.vue | 127 +++++++++++++++++
 src/views/system/userManagement.vue     | 178 +++++++++++++++++++++++-
 3 files changed, 310 insertions(+), 17 deletions(-)
 create mode 100644 src/views/system/components/addUser.vue

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index d3e99d9..996b1df 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -114,17 +114,17 @@ export default {
             // },
           ],
         },
-        // {
-        //   icon: "el-icon-monitor",
-        //   index: "system",
-        //   title: "系统管理",
-        //   subs: [
-        //     {
-        //       index: "userManagement",
-        //       title: "用户管理",
-        //     },
-        //   ],
-        // },
+        {
+          icon: "el-icon-monitor",
+          index: "/system",
+          title: "系统管理",
+          subs: [
+            {
+              index: "/userManagement",
+              title: "用户管理",
+            },
+          ],
+        },
       ],
     };
   },
diff --git a/src/views/system/components/addUser.vue b/src/views/system/components/addUser.vue
new file mode 100644
index 0000000..a352966
--- /dev/null
+++ b/src/views/system/components/addUser.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    class="addchannelDialog"
+    :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="role" >
+        <el-select v-model="formdata.role" placeholder="请选择">
+          <el-option v-for="item in roleoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </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>
+    <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 { addChannelapi, updateChannelapi } from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      isShow: false,
+      roleoptions:[{
+          value: 1,
+          label: '管理员'
+        }, {
+          value: 2,
+          label: '用户'
+        }],
+      formdata: {},
+      rules: {
+        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val == null) {
+        return (this.formdata = {});
+      }
+      this.formdata = val;
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            let formArr = [];
+            formArr.push(this.formdata);
+            addChannelapi({ list: formArr })
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("添加成功");
+                  this.$parent.deviceList();
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          } else {
+            updateChannelapi(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("修改成功");
+                  this.$parent.deviceList();
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.deviceList();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addchannelDialog {
+  .el-form-item {
+    .el-input,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/userManagement.vue b/src/views/system/userManagement.vue
index 5f26a13..0f5119b 100644
--- a/src/views/system/userManagement.vue
+++ b/src/views/system/userManagement.vue
@@ -1,13 +1,179 @@
 <template>
-  <div class="userManagement">用户管理</div>
+  <div class="camerChannel">
+    <div class="deviceBox">
+      <div class="deviceBtnGroup">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click.native.stop="handleAdddevice()"
+          >新增</el-button
+        >
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="deviceTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
+        >
+          <!-- <el-table-column type="index" width="55"> </el-table-column>
+          <el-table-column type="selection" width="55"> </el-table-column> -->
+          <el-table-column
+            label="用户名"
+            show-overflow-tooltip
+            prop="channelname"
+          ></el-table-column>
+          <el-table-column
+            label="角色"
+            show-overflow-tooltip
+            prop="maxResolutionHeight"
+          ></el-table-column>
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip
+            prop="maxResolutionWidth"
+          ></el-table-column>
+          <el-table-column fixed="right" label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button
+                @click.native.stop="handleResive(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+
+              <el-button type="text" class="deleteText" @click.native.stop="handleDelete(scope.row)" >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="page"
+            :page-size="pageSize"
+            layout=" prev, pager, next, jumper,total"
+            :total="total"
+            background
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <!-- 新增时间表 -->
+    <addUser :title="title" ref="adduserref"></addUser>
+  </div>
 </template>
+<script>
+import addUser from "./components/addUser.vue";
+import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
+
+export default {
+  components: {
+    addUser
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      deviceTableData: [],
+      //multipleSelection: [], //获取当前选中
+      page: 1, // 当前页数
+      pageSize: 10, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    this.deviceList();
+  },
+  methods: {
+    //获取线路列表数据
+    deviceList() {
+      getChannelListapi({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      })
+        .then((res) => {
+          this.deviceTableData = res.data.list;
+          this.total = res.data.total;
+        })
+        .catch((err) => {});
+    },
+    //点击行选中
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 新建
+    handleAdddevice() {
+      this.title = "新增";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(null);
+    },
 
-<script></script>
+    //修改
+    handleResive(data) {
+      this.title = "修改";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(data);
+    },
 
+    //删除数据
+    handleDelete(data) {
+      let deleteArr = [];
+      deleteArr.push({
+        id: data.id,
+      });
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteChannelapi({ list: deleteArr }).then((res) => {
+            this.deviceList(); //刷新
+          });
+          this.$message({ type: "success", message: "删除成功!" });
+        })
+        .catch(() => {
+          this.$message({ type: "info", message: "已取消删除" });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.deviceList();
+    },
+  },
+};
+</script>
 <style lang="less">
-.userManagement {
-  width: 100%;
-  height: 100%;
-  display: flex;
+.camerChannel {
+  width: calc(100% - 32px);
+  height: calc(100% - 32px);
+  padding: 16px 16px;
+  background: @color-white;
+
+  .deviceBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 32px);
+    padding: 16px;
+    border-radius: 4px;
+  }
+  .deviceBtnGroup {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .deviceTable {
+    margin-top: 16px;
+    height: calc(100% - 48px);
+    //background: #fcc;
+  }
 }
 </style>