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

<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";
import _ from 'lodash';

// 充值明细表格
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 delObj = 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;
    console.log("tableData", tableData.value);
    total.value = result.data.total;
  } catch (error) {
    console.log("请求失败", 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 {
    if ((permissionAddObj.value.jwcode == "" || permissionAddObj.value.jwcode == null) || (permissionAddObj.value.name == "" || permissionAddObj.value.name == null)) {
      ElMessage.error("请选择要添加权限的用户");
      return;
    }
    if (permissionAddObj.value.permisson == "" || permissionAddObj.value.permission == null) {
      ElMessage.error("请选择权限");
      return;
    }
    console.log("新增用户权限提交", permissionAddObj.value);

    const result = await API.post("/hwjb/admin/update", permissionAddObj.value);

    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);

    ElMessage.success("添加成功");

    get();

    closePermissionAddVisible();
  } catch (error) {
    console.log("新增用户权限失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等

    ElMessage.error("新增用户权限失败");
    closePermissionAddVisible();
  }
}
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
const throttledPermissionAdd = _.throttle(permissionAdd, 5000, { trailing: false });
// 打开编辑用户权限弹窗
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 {
    const result = await API.post("/hwjb/admin/update", permissionEditObj.value);

    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);

    ElMessage.success("编辑用户权限成功");

    get();

    closePermissionEditVisible();
  } catch (error) {
    console.log("编辑用户权限失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
    ElMessage.error("编辑用户权限失败");

    closePermissionEditVisible();
  }
}
const throttledPermissionEdit = _.throttle(permissionEdit, 5000, { trailing: false });
// 删除初始化
const del = function (row) {
  delObj.value = {};
  console.log(row, "删除初始化");
  delObj.value.jwcode = row.jwcode;
}
// 删除权限
const delConfirm = async function () {
  try {
    delObj.value.permission = "4";
    console.log(delObj.value);

    const result = await API.post("/hwjb/admin/update", delObj.value);

    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);

    ElMessage.success("删除权限成功");
    delObj.value = {};
    get();

  } catch (error) {
    console.log("删除权限失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
    ElMessage.error("删除权限失败");
  }
}
// 禁用启用用户权限
const editStatus =async function (row) {
  try {
    console.log(row);

    permissionEditObj.value = {};
    permissionEditObj.value.jwcode = row.jwcode;
    permissionEditObj.value.status1 = row.status1;

    console.log("修改用户权限状态", permissionEditObj.value);

    const result = await API.post("/hwjb/admin/update", permissionEditObj.value);

    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);

    ElMessage.success(permissionEditObj.value.status1==1?"启用成功":"禁用成功");
    permissionEditObj.value = {};
    get();

  } catch (error) {
    console.log("修改用户权限失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }


}

// 挂载
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" style="width: 100%; ">
            <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 prop="remark" label="备注" />
            <el-table-column prop="operation" label="操作" width="200px">
              <template #default="scope">
                <el-button type="warning" text @click="permissionEditInit(scope.row)"
                  :disabled="scope.row.status1 === 0">
                  修改权限
                </el-button>
                <el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm">
                  <template #reference>
                    <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.status1 === 0">
                      删除
                    </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-column prop="status1" label="状态">
              <template #default="scope">
                <el-switch v-model="scope.row.status1" :active-value="1" :inactive-value="0" size="large"
                  @change="editStatus(scope.row)" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                  active-text="启用" inactive-text="禁用" inline-prompt />
              </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="throttledPermissionAdd()"> 提交 </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="throttledPermissionEdit()"> 提交 </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>