权限管理页，加上路由

gold-system/src/router/index.js

@@ -38,6 +38,8 @@ const router=createRouter({
                 {path:'/usergold',component:()=>import("../views/usergold/index.vue")},
                 // 客户金币余额
                 {path:'/usergoldInfo',component:()=>import("../views/usergoldInfo/index.vue")},
+                // 权限管理
+                {path:'/permissions',component:()=>import("../views/permissions/index.vue")},
             ]
         },
         

gold-system/src/views/permissions/index.vue

@@ -0,0 +1,472 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from "vue";
+import ElementPlus from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+import axios from "axios";
+import moment from "moment";
+import { ta } from "element-plus/es/locales.mjs";
+import API from "../../api/index.js";
+import { UserFilled } from "@element-plus/icons-vue";
+
+// 充值明细表格
+const tableData = ref([]);
+// 搜索===========================================
+//分页总条目
+const total = ref(100);
+// 搜索detailY
+const admin = ref({});
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50,
+});
+// 新增用户权限弹窗
+const permissionAddVisible = ref(false);
+// 编辑用户权限弹窗
+const permissionEditVisible = ref(false);
+//选地区
+const area = ref([]);
+// 选部门
+const store = ref([]);
+// 新增用户权限对象
+const permissionAddObj = ref({});
+// 编辑用户权限对象
+const permissionEditObj = ref({});
+
+// 搜索接口
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === "number") {
+      getObj.value.pageNum = val;
+    }
+    console.log("搜索参数", getObj.value);
+    // 发送POST请求
+    const result = await API.post("/hwjb/admin/search", {
+      ...getObj.value,
+      admin: { ...admin.value },
+    });
+    tableData.value = result.data.list;
+    total.value = result.data.total;
+  } catch (error) { }
+};
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1;
+  get();
+};
+// 重置
+const reset = function () {
+  admin.value = {};
+};
+
+// 获取地区
+const getArea = async function () {
+  try {
+    const result = await API.post("/hwjb/admin/area", {});
+    area.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取部门
+const getStore = async function () {
+  try {
+    const result = await API.post("/hwjb/admin/store", {});
+    store.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === "number") {
+    console.log(
+      "总共有多少页" + Math.ceil(total.value / getObj.value.pageSize)
+    );
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum);
+      console.log("输入的数字合法");
+      get();
+    } else {
+      //提示
+      ElMessage({
+        type: "error",
+        message: "请检查输入内容",
+      });
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: "error",
+      message: "请检查输入内容",
+    });
+  }
+};
+
+// 打开新增用户权限弹窗
+const openPermissionAddVisible = function () {
+  permissionAddVisible.value = true;
+}
+// 关闭新增用户权限弹窗
+const closePermissionAddVisible = function () {
+  permissionAddVisible.value = false;
+}
+// 新增用户权限初始化
+const permissionAddInit = function () {
+  permissionAddObj.value = {};
+  openPermissionAddVisible();
+}
+// 通过精网号查询没有权限的用户
+const getAdminByJwcodeWithoutPermission = async function () {
+  try {
+    const result = await API.post("/hwjb/admin/selectNo", permissionAddObj.value);
+    if (result.code == 200) {
+      permissionAddObj.value = result.data[0];
+      ElMessage.success("精网号查询成功");
+    }else{
+      ElMessage.error(result.msg);
+    }
+    console.log("精网号查询没有权限的用户", permissionAddObj.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 新增用户权限提交
+const permissionAdd = async function () {
+  try {
+    console.log("新增用户权限提交", permissionAddObj.value);
+  } catch (error) {
+    console.log("新增用户权限失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  } finally {
+    closePermissionAddVisible();
+  }
+}
+// 打开编辑用户权限弹窗
+const openPermissionEditVisible = function () {
+  permissionEditVisible.value = true;
+}
+// 关闭编辑用户权限弹窗
+const closePermissionEditVisible = function () {
+  permissionEditVisible.value = false;
+}
+// 编辑用户权限初始化
+const permissionEditInit = function (row) {
+  permissionEditObj.value = {};
+  permissionEditObj.value.jwcode = row.jwcode;
+  permissionEditObj.value.name = row.name;
+  permissionEditObj.value.area = row.area;
+  permissionEditObj.value.store = row.store;
+  permissionEditObj.value.permission = row.permission;
+  console.log("编辑用户权限", permissionEditObj.value);
+  openPermissionEditVisible();
+}
+// 编辑用户权限提交
+const permissionEdit = async function () {
+  try {
+    console.log("编辑用户权限提交", permissionEditObj.value);
+  } catch (error) {
+    console.log("编辑用户权限失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  } finally {
+    closePermissionEditVisible();
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await get();
+  await getArea();
+  await getStore();
+});
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px">
+        <div class="head-card">
+          <div class="head-card-element">
+            <el-text class="mx-1" size="large">精网号：</el-text>
+            <el-input v-model="admin.jwcode" style="width: 240px" placeholder="请输入精网号" clearable />
+          </div>
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-select v-model="admin.area" placeholder="请选择所属地区" style="width: 240px" clearable>
+              <el-option v-for="item in area" :key="item" :label="item" :value="item" />
+            </el-select>
+          </div>
+
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">所属部门：</el-text>
+            <el-select v-model="admin.store" placeholder="请选择部门" style="width: 240px" clearable>
+              <el-option v-for="item in store" :key="item" :label="item" :value="item" />
+            </el-select>
+          </div>
+
+          <div class="head-card-btn">
+            <el-button @click="reset()">重置</el-button>
+            <el-button type="primary" @click="search()">查询</el-button>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <!-- 添加 -->
+        <div class="add-item">
+          <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增用户权限</el-button>
+        </div>
+        <div>
+          <el-table :data="tableData" :height="tableHeight" style="width: 100%; text-align: center;">
+            <el-table-column type="index" label="序号" width="100px" fixed="left">
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="jwcode" label="精网号" />
+            <el-table-column prop="name" label="姓名" />
+            <el-table-column prop="area" label="所属地区" />
+            <el-table-column prop="store" label="所属部门" />
+            <el-table-column prop="permission" label="部门权限">
+              <template #default="scope">
+                <span v-if="scope.row.permission === '1'">
+                  总部管理员
+                </span>
+                <span v-if="scope.row.permission === '2'">
+                  分部管理员
+                </span>
+                <span v-if="scope.row.permission === '3'">
+                  分部审核员
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" prop="operation" label="操作">
+              <template #default="scope">
+                <el-button type="warning" text @click="permissionEditInit(scope.row)">
+                  修改权限
+                </el-button>
+                <el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm">
+                  <template #reference>
+                    <el-button type="danger" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination background :page-size="getObj.pageSize" layout="slot" :total="total">
+            <div>共{{ total }}条,每页</div>
+            <el-select v-model="getObj.pageSize" class="page-size" @change="get()" style="width: 80px">
+              <el-option v-for="item in [5, 10, 20, 50, 100]" :key="item" :label="item" :value="item"></el-option>
+            </el-select>
+            <div>条</div>
+          </el-pagination>
+          <el-pagination background layout="prev, pager, next,slot" :page-size="getObj.pageSize" :total="total"
+            :current-page="getObj.pageNum" @current-change="get">
+            <div>跳至</div>
+            <el-input v-model="getObj.pageNum" style="width: 40px" @change="checkNumber" />
+            <div>页</div>
+          </el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <!-- 这是新增用户权限弹窗 -->
+  <el-dialog v-model="permissionAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
+
+    <div style="display: flex; margin: 20px 0px 20px 0px;">
+      <span class="permissionVisible" style="margin-right: 10px;">精网号:</span>
+      <el-input placeholder="请输入精网号" v-model="permissionAddObj.jwcode" style="width: 240px; margin-right: 10px;"
+        clearable></el-input>
+      <el-button type="primary" @click="getAdminByJwcodeWithoutPermission()">查询</el-button>
+    </div>
+
+    <el-descriptions class="margin-top" :column="2" :size="size" border label-width="200px">
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionAddObj.jwcode }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionAddObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionAddObj.area }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionAddObj.store }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px;">权限设置:</span>
+      <el-radio-group v-model="permissionAddObj.permission">
+        <el-radio value="1" border>总部管理员</el-radio>
+        <el-radio value="2" border>分部管理员</el-radio>
+        <el-radio value="3" border>分部审核员</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="permissionAdd()"> 提交 </el-button>
+      </div>
+
+    </template>
+  </el-dialog>
+
+  <!-- 这是编辑用户权限弹窗 -->
+  <el-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
+    <el-descriptions class="margin-top" :column="2" :size="size" border label-width="200px">
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionEditObj.jwcode }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionEditObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionEditObj.area }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionEditObj.store }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px;">权限设置:</span>
+      <el-radio-group v-model="permissionEditObj.permission">
+        <el-radio value=1 border>总部管理员</el-radio>
+        <el-radio value=2 border>分部管理员</el-radio>
+        <el-radio value=3 border>分部审核员</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionEditVisible()">取消</el-button>
+        <el-button type="primary" @click="permissionEdit()"> 提交 </el-button>
+      </div>
+
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.permissionVisible {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+</style>