更新系统管理

src/assets/css/homeScreen.scss

@@ -133,6 +133,7 @@
       }
       .topBtn-right {
         right: 270px;
+        top: 22px;
         .topBtn-item {
           background: url("~@/assets/images/home_btns_right.png") no-repeat center
             center;
@@ -150,7 +151,7 @@
       .rightIcon {
         position: absolute;
         right: 20px;
-        top: 20%;
+        top: 22px;
         font-size: 17px;
         span {
           color: #0bb7ff;

src/components/MyComponents/ChooseUser/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <el-dialog
+    :title="titleValue"
+    width="1400px"
+    :model-value="modelValue"
+    append-to-body
+    @close="closed"
+  >
+    <div>
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="所属部门">
+          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
+        </el-form-item>
+        <el-form-item label="用户名">
+          <el-input
+            placeholder="请输入用户名"
+            v-model="listQuery.loginName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="电话号码">
+          <el-input
+            placeholder="请输入电话号码"
+            v-model="listQuery.phone"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+      <div
+        class="tabBox"
+        :class="props.Single ? 'tabBoxRadio' : ''"
+        style="margin-top: 0px"
+      >
+        <el-table
+          ref="multipleUserRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          :row-key="keyid"
+          style="width: 100%"
+          height="450"
+        >
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column
+            prop="loginName"
+            align="center"
+            label="用户名"
+            width="150"
+          ></el-table-column>
+          <el-table-column
+            prop="idEntityCard"
+            align="center"
+            label="身份证号"
+          ></el-table-column>
+          <el-table-column
+            prop="deptName"
+            align="center"
+            label="部门"
+          ></el-table-column>
+          <el-table-column
+            prop="inDustRialId"
+            align="center"
+            width="150"
+            label="警号"
+          ></el-table-column>
+
+          <el-table-column
+            prop="mobile"
+            width="150"
+            align="center"
+            label="电话"
+          ></el-table-column>
+
+          <el-table-column prop="sex" align="center" label="性别">
+            <template #default="{ row }">
+              <span> {{ row.sex == 1 ? "男" : "女" }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="onComfirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import { selectUnAccreditPage, selectUserDeptPage } from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  titleValue: {
+    type: String,
+    default: "选择用户"
+  },
+  LeaderType: {
+    type: String,
+    default: ""
+  },
+  //是否单选
+  Single: {
+    type: Boolean,
+    default: true
+  },
+  roleIds: {
+    type: Array,
+    default: []
+  },
+});
+const total = ref(0);
+const listQuery = ref({
+  current: 1,
+  size: 20
+});
+const form = ref({});
+const tableData = ref([]);
+const emits = defineEmits(["update:modelValue", "choosedUsers"]);
+onMounted(() => {
+  handleFilter();
+});
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const reset = () => {
+  listQuery.value = {
+    current: 1,
+    size: 20,
+    loginName: "",
+    phone: ""
+  };
+  getListData();
+};
+
+const keyid = (row) => {
+  return row.id;
+};
+// 为用户分配角色
+const onComfirm = () => {
+  const userList = multipleSelectionUser.value;
+  let list = []
+  let listId = []
+  userList.forEach(val=>{
+    if(listId.indexOf(val.id) == -1) {
+      list.push(val);
+      listId.push(val.id);
+    }
+  })
+  emits("choosedUsers", list);
+  let data = { type: props.LeaderType, userList: userList };
+  emits("choosedUsersLeader", data);
+  closed();
+};
+/**
+ * pageSize 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+const getListData = () => {
+  const params = listQuery.value;
+  selectUserDeptPage(params).then(res=>{
+    tableData.value = res?.records;
+    total.value = Number(res.total);
+    multipleUser()
+  });
+};
+
+//列表回显
+function multipleUser() {
+  tableData.value.forEach(item=>{
+    if(props.roleIds.some(id=>id == item.id)){
+      multipleUserRef.value.toggleRowSelection(item, true);
+    }
+  })
+}
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+
+const multipleUserRef = ref(null);
+const multipleSelectionUser = ref([]);
+const handleSelectionChange = (val) => {
+  if (props.Single) {
+    if (val.length > 1) {
+      let del_row = val.shift();
+      multipleUserRef.value.toggleRowSelection(del_row, false);
+    }
+    multipleSelectionUser.value = val;
+  } else {
+    multipleSelectionUser.value = val;
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>
+<style>
+.tabBoxRadio .el-checkbox__inner {
+  border-radius: 50% !important;
+}
+.tabBoxRadio .el-table__header-wrapper .el-checkbox {
+  display: none;
+}
+.el-dialog{
+    background: #050e33;
+}
+.el-dialog__title{
+    color: #fff;
+}
+</style>

src/router/index.js

@@ -44,6 +44,103 @@ export const publicRoutes = [
     component: layout,
     redirect: "/IdentityManage",
     children: [
+      {
+        path: "/systemConfig",
+        // component: layout,
+        name: "systemConfigModel",
+        redirect: "/dict/index",
+        meta: {
+          title: "系统管理",
+          icon: "article"
+        },
+        children: [
+          {
+            path: "/user/department-ist",
+            name: "departmentList",
+            component: () => import("@/views/backOfficeSystem/systemConfig/department-list/index"),
+            meta: {
+              title: "部门管理",
+              icon: "article-ranking"
+            }
+          },
+    
+          {
+            path: "/user/userList",
+            name: "userList",
+            component: () => import("@/views/backOfficeSystem/systemConfig/user-list/index"),
+            meta: {
+              title: "用户管理",
+              icon: "article-ranking"
+            }
+          },
+          {
+            path: "/user/role",
+            name: "userRoleIndex",
+            component: () => import("@/views/backOfficeSystem/systemConfig/role-list/index"),
+            meta: {
+              title: "角色列表",
+              icon: "article-ranking"
+            }
+          },
+          {
+            path: "/user/menuList",
+            name: "menuList",
+            component: () => import("@/views/backOfficeSystem/systemConfig/menu-list/index"),
+            meta: {
+              title: "菜单管理",
+              icon: "article-ranking"
+            }
+          },
+          
+          {
+            path: "/dict/detail",
+            name: "dictDetail",
+            component: () => import("@/views/backOfficeSystem/systemConfig/dict/detail"),
+            meta: {
+              title: "字典数据"
+            }
+          },
+          {
+            path: "/dict/index",
+            name: "dictIndex",
+            component: () => import("@/views/backOfficeSystem/systemConfig/dict/index"),
+            meta: {
+              title: "字典列表",
+              icon: "article-ranking"
+            }
+          },
+         
+          {
+            path: "/user/deptAllocationUser/:id",
+            name: "deptAllocationUser",
+            component: () =>
+              import("@/views/backOfficeSystem/systemConfig/department-list/deptAllocationUser"),
+            meta: {
+              title: "管理用户"
+            }
+          },
+          {
+            path: "/user/allocationUser/:id",
+            name: "allocationUser",
+            component: () =>
+              import("@/views/backOfficeSystem/systemConfig/role-list/allocationUser"),
+            meta: {
+              title: "分配用户"
+            }
+          },
+         
+          {
+            path: "/user/systemConfig",
+            name: "systemConfig",
+            component: () =>
+              import("@/views/backOfficeSystem/systemConfig/system-config-list/index"),
+            meta: {
+              title: "系统配置",
+              icon: "article-ranking"
+            }
+          },
+        ]
+      },
     {
       path: "/FourColorWarning",
       name: "FourColorWarning",

src/views/backOfficeSystem/systemConfig/components/rolesDialog.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-dialog title="角色选择" :model-value="modelValue" @close="closed">
+    内容
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">关闭</el-button>
+        <el-button type="primary" @click="onConfirm">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+
+const closed = () => {
+  emits('update:moselValus',false)
+}
+/**
+ 确定按钮点击事件
+*/
+const onConfirm = async () => {
+  closed()
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/backOfficeSystem/systemConfig/department-list/components/roles.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-dialog title="配置角色" :model-value="modelValue" @close="closed">
+    <!-- <el-checkbox-group v-model="userRoleTitleList">
+      <el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.roleName" />
+    </el-checkbox-group>-->
+    <el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" style="width: 100%"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column property="orderNo" label="角色编号" />
+      <el-table-column property="roleName" label="角色名称" />
+      <el-table-column prop="xtZhxgsj" label="更新时间">
+        <template #default="{ row }">{{ $filters.dateFilter(row.xtZhxgsj) }}</template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import {
+  getRoleList,
+  saveRoleDeptInfo,
+  selectRolePageByDept,
+  getUserRoleList,
+  grantRoleToUser
+} from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  deptId: {
+    type: String,
+    required: true
+  }
+});
+const buttonLoading = ref(false)
+const emits = defineEmits(["update:modelValue", "updateRole"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+const multipleTableRef = ref(null)
+
+const multipleSelection = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  const ids = multipleSelection.value.map((item) => {
+    return item.id;
+  });
+  let params = {
+    deptId: props.deptId,
+    roleIds: ids
+  };
+  buttonLoading.value = true;
+  saveRoleDeptInfo(params).then((res) => {
+    ElMessage.success("操作成功");
+    //通知
+    emits("updateRole");
+  }).finally(() => {
+    buttonLoading.value = false;
+  }); ;
+  closed();
+};
+
+//当前用户角色
+const userRoleTitleList = ref([]);
+const getUserRoles = async () => {
+  const res = await selectRolePageByDept({ current: 1, size: 9999, deptId: props.deptId });
+  userRoleTitleList.value = res.records.map((item) => item.roleId);
+  const hx = [];
+  allRoleList.value.forEach(item => {
+    if (userRoleTitleList.value.indexOf(item.id)!=-1) {
+      hx.push(item)
+    }
+  })
+  toggleSelection(hx)
+};
+
+const toggleSelection = (rows) => {
+  if (rows) {
+    rows.forEach((row) => {
+      multipleTableRef.value.toggleRowSelection(row, true)
+    })
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+//所有角色
+const allRoleList = ref([]);
+const getAllRoleList = async () => {
+  const params = {
+    page: 1,
+    size: 999
+  };
+  const res = await getRoleList(params);
+  allRoleList.value = res?.records;
+  getUserRoles();
+};
+
+watch(
+  () => props.deptId,
+  (val) => {
+    if (val) {
+      getAllRoleList();
+    }
+  }
+);
+</script>
+
+<style>
+</style>

src/views/backOfficeSystem/systemConfig/department-list/deptAllocationUser.vue

@@ -0,0 +1,480 @@
+<template>
+  <div class="user-list-page">
+    <el-card class="table-header-wrap">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="用户ID">
+          <el-input
+            placeholder="请输入用户ID"
+            v-model="listQuery.userId"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="unbundleRole()"
+            >批量取消授权</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addUser()">添加用户</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="main-box">
+      <el-card class="user-main-wrap">
+        <el-table
+          ref="multipleTableRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          style="width: 100%"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column
+            prop="loginName"
+            align="center"
+            label="用户名"
+          ></el-table-column>
+          <el-table-column
+            prop="userName"
+            align="center"
+            label="用户昵称"
+          ></el-table-column>
+          <el-table-column
+            prop="mobile"
+            width="120px"
+            label="移动电话"
+          ></el-table-column>
+
+          <el-table-column prop="xtZhxgsj" align="center" label="录入时间">
+            <template #default="{ row }">{{
+              $filters.dateFilter(row.xtLrsj)
+            }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="120">
+            <template #default="{ row }">
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon-color="red"
+                title="确定要删除?"
+                @confirm="unbundleRole(row)"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small">取消授权</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </el-card>
+    </div>
+
+    <el-dialog
+      width="900px"
+      custom-class="way"
+      v-model="dialogFormVisible"
+      @closed="closeDialog"
+      :title="isEdit ? '修改' : '新增'"
+    >
+      <p>{{ dialogForm }}</p>
+      <el-form
+        ref="formRef"
+        :model="dialogForm"
+        label-width="120px"
+        class="mosty-from-wrap twoLine"
+        :rules="rules"
+      >
+        <el-form-item label="用户昵称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="用户昵称"
+            clearable
+            v-model="dialogForm.userName"
+          />
+        </el-form-item>
+        <el-form-item label="登录账号:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="登录账号"
+            clearable
+            v-model="dialogForm.loginName"
+          />
+        </el-form-item>
+        <el-form-item label="密码:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="密码"
+            show-password
+            v-model="dialogForm.password"
+          />
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idEntityCard">
+          <MOSTY.IdentityCard
+            width="280px"
+            v-model="dialogForm.idEntityCard"
+            clearable
+          ></MOSTY.IdentityCard>
+        </el-form-item>
+        <el-form-item label="电话号码:" prop="telePhone">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.telePhone"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="移动电话:" prop="mobile">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.mobile"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="封装民族:" prop="nation">
+          <MOSTY.PackageSelect
+            width="280px"
+            v-model="dialogForm.nation"
+            dictEnum="NATION"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="性别:" prop="">
+          <MOSTY.Sex width="220px" v-model:sex="dialogForm.sex" />
+        </el-form-item>
+        <el-form-item label="文化程度:" prop="">
+          <MOSTY.PackageSelect
+            dictEnum="EDUCATION"
+            width="280px"
+            v-model="dialogForm.whcd"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="E-mail" prop="email">
+          <MOSTY.Email
+            v-model="dialogForm.email"
+            width="280px"
+            clearable
+          ></MOSTY.Email>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="email">
+          <el-date-picker
+            v-model="dialogForm.birthday"
+            type="date"
+            placeholder="出生日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="有效期:" prop="">
+          <el-date-picker
+            v-model="dialogForm.endTime"
+            type="datetime"
+            placeholder="Select date and time"
+            format="YYYY/MM/DD hh:mm:ss"
+            value-format="x"
+          />
+        </el-form-item>
+        <el-form-item label="行业号码:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="行业号码"
+            v-model="dialogForm.inDustRialId"
+          />
+        </el-form-item>
+        <el-form-item label="管理部门名称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="管理部门名称"
+            v-model="dialogForm.managerOrgName"
+          />
+        </el-form-item>
+        <el-form-item label="管理部门ID:" prop="">
+          <MOSTY.Department
+            placeholder="管理部门ID"
+            width="280px"
+            clearable
+            filterable
+            multiple
+            v-model="dialogForm.managerOrgId"
+          />
+        </el-form-item>
+        <el-form-item label="岗位名称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="岗位名称"
+            v-model="dialogForm.positionName"
+          />
+        </el-form-item>
+        <el-form-item label="岗位ID:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="岗位ID"
+            v-model="dialogForm.positionId"
+          />
+        </el-form-item>
+
+        <el-form-item label="用户类型:" prop="">
+          <el-select v-model="dialogForm.userType" placeholder="请选择">
+            <el-option label="系统用户默认" value="00" />
+            <el-option label="注册用户" value="01" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="虚拟用户:" prop="">
+          <el-select v-model="dialogForm.isVirtualUser" placeholder="请选择">
+            <el-option label="是" value="1" />
+            <el-option label="不是" value="2" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button type="primary" v-if="isEdit" @click="onSave"
+            >保存</el-button
+          >
+          <el-button type="primary" v-else @click="onAdd">新增</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <ChooseUser
+      v-model="chooseUserVisible"
+      :roleId="route.params.id"
+      @choosedUsers="saveUsers"
+    ></ChooseUser>
+  </div>
+</template>
+
+<script setup>
+import ChooseUser from "@/components/MyComponents/ChooseUser";
+import { useRoute } from "vue-router";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { ref, reactive, computed, watch } from "vue";
+import {
+  selectUnAccreditPage,
+  batchUnboundUserRole,
+  selectUserPageByDept,
+  grantUserToRole
+} from "@/api/user-manage";
+const route = useRoute();
+const rules = ref({
+  ...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
+  ...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
+  ...rule.identityCardRule({ validator: true }), //身份证校验
+  ...rule.addressSelectRule({ require: true }), //地址
+  ...rule.emailRule({ validator: true }), //邮箱
+  packageSelect: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  other: [
+    {
+      required: true,
+      message: "自由发挥哦",
+      trigger: "blur"
+    }
+  ]
+});
+
+//查询参数
+const total = ref(0);
+const currentRow = ref({});
+const listQuery = ref({
+  current: 1,
+  size: 20
+});
+const isEdit = ref(true);
+const dialogForm = ref({
+  userName: ""
+});
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  params.current = params.page;
+  params.deptId = route.params.id;
+  const res = await selectUserPageByDept(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+
+const unbundleRole = (row) => {
+  let params = {
+    roleId: route.params.id,
+    userIdList: []
+  };
+  if (row) {
+    params.userIdList.push(row.id);
+  } else {
+    if (multipleSelection.value.length <= 0) return false;
+    multipleSelection.value.forEach((item) => {
+      params.userIdList.push(item.id);
+    });
+  }
+  batchUnboundUserRole(params).then((res) => {
+    ElMessage.success("操作成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+//分配角色
+const currentUserId = ref("");
+const roleDialogVisible = ref(false);
+const assignRoles = (row) => {
+  roleDialogVisible.value = true;
+  currentUserId.value = row.id;
+};
+
+const multipleTableRef = ref(null);
+const multipleSelection = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+const chooseUserVisible = ref(false);
+const addUser = () => {
+  chooseUserVisible.value = true;
+};
+
+//批量添加用户
+const saveUsers = (users) => {
+  if (users.length > 0) {
+    let userIds = users.map((item) => item.id);
+    let params = {
+      roleId: route.params.id,
+      userIds: userIds
+    };
+    grantUserToRole(params).then((res) => {
+      ElMessage.success("修改成功");
+      handleFilter();
+    });
+  }
+};
+
+//watch监听路由变化
+watch(roleDialogVisible, (val) => {
+  if (!val) currentUserId.value = "";
+});
+
+watch(
+  listQuery.value,
+  () => {
+    handleFilter();
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.user-list-page {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+
+  .twoLine {
+    display: flex;
+    align-items: flex-start;
+    flex-flow: wrap;
+
+    .el-form-item {
+      width: 380px;
+    }
+  }
+
+  .main-box {
+    padding-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .departmentTree-box {
+      overflow: auto;
+    }
+
+    .user-main-wrap {
+      overflow: hidden;
+      // width: calc(100% - 260px);
+      width: 100%;
+
+      .el-table--fit {
+        float: right;
+        width: 800px;
+      }
+    }
+  }
+}
+</style>

src/views/backOfficeSystem/systemConfig/department-list/index.vue

@@ -0,0 +1,617 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">部门管理</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addItemMenu">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="部门名称">
+          <el-input
+            placeholder="请输入部门名称"
+            v-model="listQuery.deptname"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleFilter">查询</el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        border
+        row-key="orgCode"
+        :tree-props="{ children: 'childDeptList', hasChildren: 'hasChildren' }"
+        style="width: 100%"
+        :height="tableHeight"
+        :key="keyCount"
+        lazy
+        :load="depLoad"
+      >
+        <el-table-column
+          sortable
+          prop="orgName"
+          label="部门名称"
+          show-overflow-tooltip
+          width="320"
+        >
+          <template #default="{ row }">
+            {{ row.orgName ? row.orgName : row.orgJc }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="orgType"
+          label="部门类型"
+          show-overflow-tooltip
+          align="center"
+        >
+          <template #default="{ row }">
+            <dict-tag :options="D_BZ_BMLX" :value="row.orgType" :tag="false" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="orgLevel"
+          label="部门等级"
+          show-overflow-tooltip
+          align="center"
+        >
+          <template #default="{ row }">
+            <dict-tag :options="D_BZ_BMDJ" :value="row.orgLevel" :tag="false" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="linkTel"
+          label="部门电话"
+          show-overflow-tooltip
+          align="center"
+        >
+        </el-table-column>
+
+        <el-table-column
+          sortable
+          prop="linkManTel"
+          label="部门联系人电话"
+          show-overflow-tooltip
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="linkMan"
+          label="部门联系人"
+          show-overflow-tooltip
+          align="center"
+        >
+        </el-table-column>
+        <!-- <el-table-column prop="qxbs" label="权限标识" align="center" width="140px"></el-table-column> -->
+        <el-table-column label="操作" align="center" fixed="right" width="320">
+          <template #default="{ row }">
+            <el-button @click="update(row)" size="small">编辑</el-button>
+            <el-button @click="addItemMenu(row)" size="small"
+              >添加下级</el-button
+            >
+            <el-button @click="assignRoles(row)" size="small"
+              >绑定角色</el-button
+            >
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delDictItem(row)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <RolesDialog
+      v-model="roleDialogVisible"
+      :deptId="currentDeptId"
+      @updateRole="handleFilter"
+    ></RolesDialog>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        class="mosty-from-wrap"
+        ref="editRef"
+        :inline="true"
+        label-position="top"
+        :model="dialogForm"
+      >
+        <el-form-item
+          label="部门名称"
+          :rules="[{ required: true, message: '请填写部门名称' }]"
+          prop="orgName"
+          label-width="140px"
+        >
+          <el-input
+            placeholder="请填写部门名称"
+            v-model="dialogForm.orgName"
+            show-word-limit
+            maxlength="30"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="部门全称"
+          show-word-limit
+          maxlength="30"
+          prop="orgQc"
+          required
+          label-width="140px"
+        >
+          <el-input
+            placeholder="请填写部门全称"
+            v-model="dialogForm.orgQc"
+            show-word-limit
+            maxlength="30"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="部门简称"
+          :rules="[{ required: true, message: '请填写部门简称' }]"
+          prop="orgJc"
+          required
+          label-width="140px"
+        >
+          <el-input
+            placeholder="请填写部门简称"
+            v-model="dialogForm.orgJc"
+            show-word-limit
+            maxlength="30"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="部门类型"
+          :rules="[{ required: true, message: '请选择部门类型' }]"
+          prop="orgType"
+          required
+          label-width="140px"
+        >
+          <!-- <el-input
+            show-word-limit
+            maxlength="30"
+            v-model="dialogForm.orgType"
+          ></el-input> -->
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.orgType"
+            class="m-4"
+            placeholder="请选择部门类型"
+          >
+            <el-option
+              v-for="item in D_BZ_BMLX"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="部门代码"
+          :rules="[{ required: true, message: '请填写部门代码' }]"
+          prop="orgCode"
+          required
+          label-width="140px"
+        >
+          <el-input
+            placeholder="请填写部门代码"
+            show-word-limit
+            maxlength="30"
+            v-model="dialogForm.orgCode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="部门等级"
+          :rules="[{ required: true, message: '请选择部门等级' }]"
+          prop="orgLevel"
+          required
+          label-width="140px"
+        >
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.orgLevel"
+            class="m-4"
+            placeholder="请选择部门等级"
+          >
+            <el-option
+              v-for="dict in D_BZ_BMDJ"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门顺序号" label-width="140px">
+          <el-input-number
+            style="width: 100%"
+            v-model="dialogForm.orgNo"
+            class="mx-4"
+            placeholder="请填写部门顺序号"
+            :min="1"
+            :max="100"
+            controls-position="right"
+          />
+        </el-form-item>
+
+        <el-form-item label="部门电话" prop="linkTel" label-width="140px">
+          <el-input
+            v-model="dialogForm.linkTel"
+            placeholder="请填写部门电话"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="部门业务类型"
+          :rules="[{ required: true, message: '请选择部门业务类型' }]"
+          prop="orgBizType"
+          required
+          label-width="140px"
+        >
+          <!-- <el-input
+            show-word-limit
+            maxlength="30"
+            v-model="dialogForm.orgBizType"
+          ></el-input> -->
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.orgBizType"
+            class="m-4"
+            placeholder="请选择部门业务类型"
+          >
+            <el-option
+              v-for="item in D_BZ_BMYWLX"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门联系人电话" label-width="140px">
+          <el-input
+            placeholder="请填写部门联系人电话"
+            v-model="dialogForm.linkManTel"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="部门联系人" label-width="140px">
+          <el-input
+            show-word-limit
+            placeholder="请填写部门联系人"
+            maxlength="30"
+            v-model="dialogForm.linkMan"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="部门邮箱" label-width="140px">
+          <el-input
+            v-model="dialogForm.email"
+            placeholder="请填写部门邮箱"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="部门名称拼音" label-width="140px">
+          <el-input
+            show-word-limit
+            maxlength="30"
+            placeholder="请填写部门名称拼音"
+            v-model="dialogForm.bmpyszm"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="部门主页" label-width="140px">
+          <el-input
+            show-word-limit
+            placeholder="请填写部门主页"
+            maxlength="50"
+            v-model="dialogForm.webUrl"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="部门所属行政区划" label-width="140px">
+          <el-input
+            show-word-limit
+            placeholder="请填写部门所属行政区划"
+            maxlength="50"
+            v-model="dialogForm.xzqh"
+          ></el-input>
+        </el-form-item>
+
+        <!-- <el-form-item label="状态" label-width="140px">
+          <el-select v-model="dialogForm.zdywlb" placeholder="请选择业务类别">
+            <el-option label="正常" value="0"></el-option>
+            <el-option label="注销" value="1"></el-option>
+          </el-select>
+        </el-form-item>-->
+        <el-form-item style="width: 100%" label="部门地址" label-width="140px">
+          <el-input
+            show-word-limit
+            placeholder="请填写部门地址"
+            maxlength="200"
+            v-model="dialogForm.address"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+        <el-form-item style="width: 100%" label="备注" label-width="140px">
+          <el-input
+            v-model="dialogForm.bz"
+            show-word-limit
+            maxlength="200"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import RolesDialog from "./components/roles.vue";
+import { ElMessage } from "element-plus";
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
+import {
+  addSysDept,
+  deleteSysDept,
+  updateSysDept,
+  selectDeptPage
+} from "@/api/user-manage";
+import { useRouter, useRoute } from "vue-router";
+const { proxy } = getCurrentInstance();
+const { D_BZ_BMYWLX, D_BZ_BMDJ, D_BZ_BMLX } = proxy.$dict(
+  "D_BZ_BMYWLX",
+  "D_BZ_BMDJ",
+  "D_BZ_BMLX"
+);
+const keyCount = ref(0); //tabel组件刷新值
+const searchBox = ref(null); // 搜索盒子
+const tableHeight = ref(); // 表格高度
+const route = useRoute();
+//查询参数
+const total = ref(0);
+const currentRow = ref({});
+const listQuery = ref({
+  deptname: "",
+  deptcode: ""
+});
+const topParentId = ref("");
+const id = ref("");
+const zdlx = ref();
+const buttonLoading = ref(false);
+const isEdit = ref(true);
+const dialogForm = ref({
+  orgNo: 1
+});
+// 数据相关
+const tableData = ref([]);
+const loading = ref(false);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+//动态加载部门数据
+function depLoad(row, treeNode, resolve) {
+  listQuery.value.parentid = row.id;
+  selectDeptPage(listQuery.value).then((res) => {
+    resolve(res);
+  });
+}
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  loading.value = true
+  const res = await selectDeptPage(params);
+  tableData.value = res;
+  loading.value = false
+  total.value = Number(res.total);
+};
+const reset = () => {
+  tableData.value = [];
+  listQuery.value = {
+    deptname: "",
+    deptcode: ""
+  };
+  getListData();
+};
+const handleFilter = () => {
+  getListData();
+};
+getListData();
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  getListData();
+};
+
+/**修改字典 */
+const update = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  // dialogForm.value.linkManTel = parseInt(dialogForm.value.linkManTel);
+  // dialogForm.value.linkTel = parseInt(dialogForm.value.linkTel);
+  dialogFormVisible.value = true;
+};
+
+function isNull(data) {
+  if (!data) return true;
+  if (JSON.stringify(data) === "{}") return true;
+  if (JSON.stringify(data) === "[]") return true;
+  return false;
+}
+const addItemMenu = (row) => {
+  id.value = isNull(row) ? topParentId.value : row.id;
+  isEdit.value = false;
+  dialogForm.value = {
+    orgNo: 1
+  };
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  editRef.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      updateSysDept({
+        ...dialogForm.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("修改成功");
+          reset();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+const editRef = ref(null);
+const onAdd = () => {
+  editRef.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      addSysDept({
+        ...dialogForm.value,
+        parentId: id.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("新增成功");
+          reset();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+
+const delDictItem = (row) => {
+  deleteSysDept({
+    id: Number(row.id)
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    reset();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+const toGoPage = (row) => {
+  router.push("/user/role?zdbh=" + row.zdbh);
+};
+
+//分配角色
+const currentDeptId = ref("");
+const roleDialogVisible = ref(false);
+const assignRoles = (row) => {
+  roleDialogVisible.value = true;
+  currentDeptId.value = row.id;
+};
+
+//分配用户
+const router = useRouter();
+const allocationUser = (row) => {
+  router.push(`/user/deptAllocationUser/${row.id}`);
+};
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 210;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+
+  .twoLine {
+    display: flex;
+    align-items: flex-start;
+    flex-flow: wrap;
+
+    .el-form-item {
+      width: 380px;
+    }
+  }
+}
+</style>

src/views/backOfficeSystem/systemConfig/dict/detail.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="user-manage-container">
+    <div class="titleBox">
+      <div class="title">字典数据</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addItemDict()">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+        <el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
+          <el-icon style="vertical-align: middle">
+            <Delete />
+          </el-icon>
+          <span style="vertical-align: middle">批量删除</span>
+        </el-button>
+        <el-button type="primary" @click="closeItemDict()"> 关闭</el-button>
+      </div>
+    </div>
+    <div ref="searchBox">
+      <el-card class="table-header-wrap">
+        <el-form :model="listQuery" :inline="true">
+          <el-form-item label="字典名称">
+            <el-input
+              placeholder="请输入字典名称"
+              v-model="listQuery.dictName"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="handleFilter"> 查询 </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="resetHandleFilter">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card :style="{ height: tableHeight + 'px' }">
+      <el-table
+        :data="tableData"
+        border
+        row-key="id"
+        @selection-change="handleSelectionChange"
+        :tree-props="{ children: 'itemList', hasChildren: true }"
+        :height="h"
+      >
+        <el-table-column type="selection" width="40" align="center" />
+        <el-table-column prop="dm" align="center" label="字典代码">
+        </el-table-column>
+        <el-table-column prop="zdmc" label="字典名称"> </el-table-column>
+        <el-table-column prop="py" label="字典拼音" align="center">
+        </el-table-column>
+        <el-table-column prop="px" label="字典排序" align="center" sortable>
+        </el-table-column>
+        <el-table-column prop="bz" label="备注"> </el-table-column>
+        <el-table-column label="操作" align="center" fixed="right" width="220">
+          <template #default="{ row }">
+            <el-button type="primary" @click="update(row)" size="small"
+              >编辑</el-button
+            >
+            <el-button
+              type="primary"
+              v-if="zdlx === 2"
+              @click="addItemDict(row)"
+              size="small"
+              >添加下级</el-button
+            >
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delDictItem(row)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <div class="fenye" :style="{ top: tableHeight + 'px' }" v-if="type == 1">
+      <el-pagination
+        class="pagination"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+
+    <el-dialog
+      custom-class="way"
+      v-model="dialogFormVisible"
+      @closed="closeDialog"
+      :title="isEdit ? '修改' : '新增'"
+    >
+      <el-form
+        v-if="dialogFormVisible"
+        ref="formDom"
+        :rules="rules"
+        :model="dialogForm"
+      >
+        <el-form-item label="字典名称" prop="zdmc" label-width="140px">
+          <el-input
+            v-model="dialogForm.zdmc"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="字典拼音" label-width="140px">
+          <el-input
+            v-model="dialogForm.py"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="字典代码" prop="dm" label-width="140px">
+          <el-input
+            v-model="dialogForm.dm"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="px" label-width="140px">
+          <el-input-number
+            v-model="dialogForm.px"
+            class="mx-4"
+            :min="1"
+            :max="100"
+            controls-position="right"
+          />
+        </el-form-item>
+        <el-form-item label="备注" label-width="140px">
+          <el-input
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            show-word-limit
+            maxlength="200"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button type="primary" v-if="isEdit" @click="onSave"
+            >保存</el-button
+          >
+          <el-button type="primary" v-else @click="onAdd">新增</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { qcckPost, qcckGet,qcckPut,qcckDelete } from "@/api/qcckApi.js";
+import { ref, reactive, onMounted, getCurrentInstance } from "vue";
+import { updateSysDictItem, getSysDictByCode, getSysDictByCodeList, deleteSysDictItem, addSysDictItem} from "@/api/sysDict";
+import { useRouter, useRoute } from "vue-router";
+const formDom = ref(null);
+const rules = ref({
+  zdmc: [{ required: true, message: "请输入字典名称" }],
+  py: [{ required: true, pattern: /^[a-zA-Z]+$/, message: "请输入字典拼音" }],
+  dm: [{ required: true, message: "请输入字典代码" }],
+  px: [{ required: true, message: "请输入字典排序" }]
+});
+const { proxy } = getCurrentInstance();
+const type = ref("1");
+const router = useRouter();
+const route = useRoute();
+//查询参数
+const currentRow = ref({});
+const listQuery = ref({
+  dictName: "",
+  dictCode: "",
+  xtZxbz: ""
+});
+const total = ref(0);
+const pageSize = ref(20);
+const pageCurrent = ref(1);
+const ids = ref([]);
+const topParentId = ref("");
+const id = ref("");
+const zdlx = ref();
+
+const isEdit = ref(true);
+const dialogForm = ref({});
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+const tableHeight = ref();
+const searchBox = ref(null);
+const h = ref();
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 280;
+  h.value = window.innerHeight - searchBox.value.offsetHeight - 300;
+  window.onresize = function () { tabHeightFn();  };
+};
+onMounted(() => {
+  type.value = route.query.zdlx;
+  tabHeightFn();
+  getListData();
+});
+
+//批量数据
+const handleSelectionChange = (val) => {
+  ids.value = val.map((v) => { return v.id; });
+};
+
+//批量删除数据
+const batchDelete = () => {
+  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
+    qcckPost(ids.value,'/mosty-base/sys-dict-item/deleteSysDictItemBatch').then(res=>{
+      proxy.$message({ message: "删除成功",type: "success"});
+      getListData();
+    })
+  }).catch(() => {
+    proxy.$message.info("已取消");
+  });
+};
+// size 改变触发
+const handleSizeChange = (currentSize) => {
+  pageSize.value = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  pageCurrent.value = currentPage;
+  getListData();
+};
+
+// 获取数据的方法
+const getListData = async () => {
+  const params = { dictCode: route.query.zdbh, zdmc: listQuery.value.dictName };
+  if (route.query.zdlx == 1) {
+    //列表
+    params.size = pageSize.value;
+    params.current = pageCurrent.value;
+    getlist(params);
+  } else {
+    getree(params);
+  }
+};
+
+const getlist = async (params) => {
+  let res = await getSysDictByCodeList(params);
+  topParentId.value = route.query.Pid;
+  tableData.value = res ? res.records : [];
+  total.value = Number(res.total);
+};
+const getree = async (params) => {
+  let res = await getSysDictByCode(params);
+  topParentId.value = res.id;
+  zdlx.value = res.zdlx;
+  tableData.value = res?.itemList;
+};
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+const resetHandleFilter = () => {
+  listQuery.value.dictName = "";
+  listQuery.value.current = 1;
+  getListData();
+};
+/**修改字典 */
+const update = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  dialogFormVisible.value = true;
+};
+function isNull(data) {
+  if (!data) return true;
+  if (JSON.stringify(data) === "{}") return true;
+  if (JSON.stringify(data) === "[]") return true;
+  return false;
+}
+const addItemDict = (row) => {
+  id.value = isNull(row) ? topParentId.value : row.id;
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+// 返回字典列表页面
+const closeItemDict = () => {
+  router.push("/dict/index");
+};
+const onSave = () => {
+  formDom.value.validate((valid) => {
+    if (!valid) {
+      return false;
+    }
+    updateSysDictItem({
+      bz: dialogForm.value.bz,
+      id: dialogForm.value.id,
+      dm: dialogForm.value.dm,
+      px: dialogForm.value.px,
+      py: dialogForm.value.py,
+      zdbh: dialogForm.value.zdbh,
+      zdmc: dialogForm.value.zdmc
+    }).then((res) => {
+      dialogFormVisible.value = false;
+      ElMessage.success("修改成功");
+      handleFilter();
+    });
+  });
+};
+
+const onAdd = () => {
+  formDom.value.validate((valid) => {
+    if (!valid) {
+      return false;
+    }
+    addSysDictItem({
+      parentId: id.value,
+      bz: dialogForm.value.bz,
+      dm: dialogForm.value.dm,
+      px: dialogForm.value.px,
+      py: dialogForm.value.py,
+      zdbh: dialogForm.value.zdbh,
+      zdmc: dialogForm.value.zdmc
+    }).then((res) => {
+      dialogFormVisible.value = false;
+      ElMessage.success("新增成功");
+      handleFilter();
+    });
+  });
+};
+
+const delDictItem = (row) => {
+  deleteSysDictItem({ id: Number(row.id) }).then((res) => {
+    ElMessage.success("删除成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+const toGoPage = (row) => {
+  router.push("/user/role?zdbh=" + row.zdbh);
+};
+</script>
+
+<style lang="scss" scoped>
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+::v-deep .el-card__body {
+  background-color: rgba(0, 0, 0, 0);
+}
+::v-deep .el-card {
+  --el-card-border-color: #143578;
+  --el-card-border-radius: 4px;
+  --el-card-padding: 20px;
+  --el-card-bg-color: #17096130;
+  position: relative;
+}
+::v-deep .el-table--fit {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  left: 14px;
+
+  // overflow-y: scroll;
+  width: calc(100% - 28px);
+}
+::v-deep .el-dialog {
+  --el-dialog-bg-color: #001238;
+}
+</style>

src/views/backOfficeSystem/systemConfig/dict/index.vue

@@ -0,0 +1,452 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">字典列表</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addDict">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="字典名称">
+          <el-input
+            placeholder="请输入字典名称"
+            v-model="listQuery.dictName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="字典编码">
+          <el-input
+            placeholder="请输入字典编码"
+            v-model="listQuery.dictCode"
+            clearable
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="字典状态">
+          <el-select
+            clearable
+            v-model="listQuery.xtZxbz"
+            placeholder="请选择状态"
+          >
+            <el-option label="正常" value="0"></el-option>
+            <el-option label="注销" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleFilter"> 查询 </el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        :data="tableData"
+        border
+        row-key="id"
+        :tree-props="{ children: 'itemList', hasChildren: true }"
+        style="width: 100%"
+        :height="tableHeight"
+        :key="keyCount"
+      >
+        <el-table-column
+          sortable
+          prop="zdbh"
+          label="字典编号"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="zdmc"
+          label="字典名称"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column sortable label="状态" width="80px">
+          <template #default="{ row }">
+            <div>
+              <el-tag size="small" type="success" v-if="row.xtZxbz == 0"
+                >正常</el-tag
+              >
+              <el-tag size="small" type="danger" v-else-if="row.xtZxbz == 1"
+                >注销</el-tag
+              >
+              <el-tag size="small" type="info" v-else>未知</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column sortable prop="bz" label="备注" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column sortable prop="xtZhxgsj" label="更新时间">
+          <template #default="{ row }">
+            {{ $filters.dateFilter(row.xtZhxgsj) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="260">
+          <template #default="{ row }">
+            <el-button @click="updateDict(row)" size="small"> 修改</el-button>
+            <el-button @click="toGoPage(row)" size="small">
+              {{ row.zdlx === 1 ? "列表" : "树形" }}</el-button
+            >
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要注销?"
+              @confirm="delDict(row)"
+              @cancel="cancelEvent">
+              <template #reference>
+                <el-button type="danger" size="small">注销</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          size
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        class="mosty-from-wrap"
+        :inline="true"
+        label-position="top"
+        :model="dialogForm"
+        :rules="rules"
+        ref="elform"
+      >
+        <el-form-item prop="zdmc" class="one" label="字典名称">
+          <el-input
+            style="width: 100%"
+            v-model="dialogForm.zdmc"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="zdbh" label="字典编码">
+          <el-input
+            style="width: 100%"
+            v-model="dialogForm.zdbh"
+            show-word-limit
+            maxlength="30"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="yybz" class="one" label="引用标准">
+          <el-input
+            style="width: 100%"
+            v-model="dialogForm.yybz"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="xtZxbz" label="状态">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.xtZxbz"
+            placeholder="请选择业务类别"
+          >
+            <el-option label="正常" :value="0"></el-option>
+            <el-option label="注销" :value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="one" label="是否是树形结构" prop="zdlx">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.zdlx"
+            placeholder="请选择"
+          >
+            <el-option label="列表" :value="1"></el-option>
+            <el-option label="树形" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="one" label="备注">
+          <el-input
+            style="width: 100%"
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            show-word-limit
+            maxlength="200"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from "vue";
+import {
+  getAllSysDict,
+  updateSysDict,
+  addSysDict,
+  deleteSysDict
+} from "@/api/sysDict";
+import { useRouter } from "vue-router";
+const { proxy } = getCurrentInstance();
+const searchBox = ref(null); // 搜索盒子
+const tableHeight = ref(); // 表格高度
+const keyCount = ref(0); //tabel组件刷新值
+const elform = ref(null);
+const router = useRouter();
+//查询参数
+const total = ref(0);
+const size = ref(20);
+const currentRow = ref({});
+const buttonLoading = ref(false);
+const listQuery = ref({
+  current: 1,
+  size: 20,
+  dictName: "",
+  dictCode: "",
+  xtZxbz: ""
+});
+const reset = () => {
+  listQuery.value = {
+    current: 1,
+    size: 20,
+    dictName: "",
+    dictCode: "",
+    xtZxbz: ""
+  };
+  getListData();
+};
+const isEdit = ref(true);
+const dialogForm = ref({});
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  //  listQuery.value.pageIndex = pageIndex.value;
+  //     this.listQuery.pageSize = this.pageSize;
+  //     for (let key in this.listQuery) {
+  //       if (this.listQuery[key] === "") {
+  //         delete this.listQuery[key];
+  //       }
+  //     }
+  const params = listQuery.value;
+  const res = await getAllSysDict(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+//验证
+const rules = ref({
+  zdmc: [{ required: true, message: "请输入字典名称", trigger: "change" }],
+  zdbh: [{ required: true, message: "请输入字典编码", trigger: "change" }],
+  xtZxbz: [{ required: true, message: "请选择业务类别", trigger: "change" }],
+  zdlx: [{ required: true, message: "请选择字典类型", trigger: "change" }],
+  yybz: [{ required: true, message: "请填写引用标准", trigger: "change" }]
+});
+
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+getListData();
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+const cancelEvent = () => {};
+
+/**修改字典 */
+const updateDict = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  dialogForm.value.zdywlb = Number(dialogForm.value.zdywlb);
+
+  dialogFormVisible.value = true;
+};
+
+const delDict = (row) => {
+  deleteSysDict({
+    id: Number(row.id)
+  }).then((res) => {
+    ElMessage.success("注销成功");
+    handleFilter();
+  });
+};
+
+const addDict = (row) => {
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const isAvailable = (val) => {
+  if (val === 0) return true;
+  if (
+    val == null ||
+    val == undefined ||
+    val == "" ||
+    val == "undefined" ||
+    val == "null"
+  ) {
+    return false;
+  } else {
+    return true;
+  }
+};
+const onSave = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    updateSysDict({
+      bz: dialogForm.value.bz,
+      id: dialogForm.value.id,
+      yybz: dialogForm.value.yybz,
+      zdbh: dialogForm.value.zdbh,
+      zdlx: dialogForm.value.zdlx,
+      zdmc: dialogForm.value.zdmc,
+      zdywlb: dialogForm.value.zdywlb,
+      xtZxbz: dialogForm.value.xtZxbz
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("修改成功");
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const onAdd = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    addSysDict({
+      bz: dialogForm.value.bz,
+      // id: dialogForm.value.id,
+      yybz: dialogForm.value.yybz,
+      zdbh: dialogForm.value.zdbh,
+      zdlx: dialogForm.value.zdlx,
+      zdmc: dialogForm.value.zdmc,
+      zdywlb: dialogForm.value.zdywlb
+    })
+      .then((res) => {
+        ElMessage.success("添加成功");
+        dialogFormVisible.value = false;
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+const toGoPage = (row) => {
+  router.push("/dict/detail?zdbh=" + row.zdbh + '&zdlx='+row.zdlx + '&Pid='+ row.id);
+};
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+// .user-manage-container {
+//   .table-header-wrap {
+//     margin-bottom: 22px;
+//   }
+
+//   ::v-deep .avatar {
+//     width: 60px;
+//     height: 60px;
+//     border-radius: 50%;
+//   }
+
+//   ::v-deep .el-tag {
+//     margin-right: 6px;
+//   }
+
+//   .pagination {
+//     margin-top: 20px;
+//   }
+// }
+</style>

src/views/backOfficeSystem/systemConfig/menu-list/index.vue

@@ -0,0 +1,547 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">菜单管理</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addItemMenu">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="菜单名称">
+          <el-input
+            placeholder="请输入菜单名称"
+            v-model="listQuery.menuName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleFilter"> 查询 </el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        v-if="refreshTable"
+        :data="tableData"
+        border
+        v-loading="loading"
+        ref="dataTreeList"
+        row-key="id"
+        :tree-props="{ children: 'sysMenuList', hasChildren: true }"
+        style="width: 100%"
+        :height="tableHeight"
+        :key="keyCount"
+      >
+        <el-table-column
+          sortable
+          prop="menuName"
+          show-overflow-tooltip
+          width="200px"
+          label="菜单名称"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="menuCode"
+          show-overflow-tooltip
+          align="center"
+          width="150px"
+          label="菜单编码"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="orderNo"
+          label="排序"
+          width="140px"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          prop="menuUrl"
+          show-overflow-tooltip
+          label="菜单地址"
+          align="center"
+          width="140px"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="menuType"
+          label="类型"
+          align="center"
+          width="140px"
+        >
+          <template #default="{ row }">
+            <el-tag v-if="row.menuType === 1" size="small">菜单组</el-tag>
+            <el-tag v-else-if="row.menuType === 2" type="success" size="small"
+              >菜单</el-tag
+            >
+            <el-tag v-else-if="row.menuType === 3" type="success" size="small"
+              >页面</el-tag
+            >
+            <el-tag v-else-if="row.menuType === 4" type="success" size="small"
+              >资源</el-tag
+            >
+            <el-tag v-else type="info" size="small">未知</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="showMode"
+          label="可见"
+          align="center"
+          width="140px"
+        >
+          <template #default="{ row }">
+            <el-tag v-if="row.showMode === 1" type="success" size="small"
+              >展示</el-tag
+            >
+            <el-tag v-else-if="row.showMode === 2" type="info" size="small"
+              >不展示</el-tag
+            >
+            <el-tag v-else type="warning">未知</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="bz"
+          show-overflow-tooltip
+          label="备注"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          prop="qxbs"
+          label="权限标识"
+          show-overflow-tooltip
+          align="center"
+          width="140px"
+        ></el-table-column>
+        <el-table-column label="操作" align="center" fixed="right" width="220">
+          <template #default="{ row }">
+            <el-button @click="update(row)" size="small">编辑</el-button>
+            <el-button @click="addItemMenu(row)" size="small"
+              >添加下级</el-button
+            >
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delDictItem(row)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        ></el-pagination>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        class="mosty-from-wrap"
+        :inline="true"
+        label-position="top"
+        ref="editRef"
+        :rules="rules"
+        :model="dialogForm"
+      >
+        <el-form-item
+          class="one"
+          label="菜单名称"
+          prop="menuName"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.menuName"
+            show-word-limit
+            maxlength="30"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="菜单编码" label-width="140px">
+          <el-input v-model="dialogForm.menuCode" show-word-limit maxlength="50" autocomplete="off"></el-input>
+        </el-form-item> -->
+        <el-form-item
+          class="one"
+          label="菜单地址"
+          prop="menuUrl"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.menuUrl"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item
+          class="one"
+          label="是否展示"
+          prop="showMode"
+          label-width="140px"
+        >
+          <el-radio-group v-model="dialogForm.showMode">
+            <el-radio :label="1">展示</el-radio>
+            <el-radio :label="2">不展示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          class="one"
+          label="菜单类型"
+          prop="menuType"
+          label-width="140px"
+        >
+          <el-radio-group :disabled="isEdit" v-model="dialogForm.menuType">
+            <el-radio :label="1">菜单组</el-radio>
+            <el-radio :label="2">菜单</el-radio>
+            <el-radio :label="3">页面</el-radio>
+            <el-radio :label="4">资源</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          v-if="dialogForm.menuType == 4"
+          prop="buttonResource"
+          label="按钮标识"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.buttonResource"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="菜单编码"
+          prop="menuCode"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.menuCode"
+            show-word-limit
+            maxlength="50"
+            placeholder="权限标识对应路由name"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="选择图标"
+          prop="iconName"
+          label-width="140px"
+        >
+          <ChooseIcon
+            width="400"
+            :limit="13"
+            :isImg="false"
+            clearable=""
+            v-model="dialogForm.iconName"
+          ></ChooseIcon>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="排序"
+          prop="orderNo"
+          label-width="140px"
+        >
+          <el-input-number
+            v-model="dialogForm.orderNo"
+            class="mx-4"
+            :min="1"
+            :max="100"
+            controls-position="right"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="状态" label-width="140px">
+          <el-select v-model="dialogForm.zdywlb" placeholder="请选择业务类别">
+            <el-option label="正常" value="0"></el-option>
+            <el-option label="注销" value="1"></el-option>
+          </el-select>
+        </el-form-item>-->
+        <el-form-item class="one" label="备注" label-width="140px">
+          <el-input
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            show-word-limit
+            maxlength="200"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ChooseIcon from "@/components/MyComponents/ChooseIcon";
+import { ElMessage } from "element-plus";
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance,
+  onUnmounted
+} from "vue";
+import {
+  getSystemMeny,
+  addSysMenu,
+  updateSysMenu,
+  deleteSysMenu
+} from "@/api/user-manage";
+import { useRouter, useRoute } from "vue-router";
+const { proxy } = getCurrentInstance();
+const keyCount = ref(0); //tabel组件刷新值
+const searchBox = ref(null); // 搜索盒子
+const tableHeight = ref(); // 表格高度
+const rules = ref({
+  menuName: [{ required: true, message: "请输入菜单名称 " }],
+  menuUrl: [{ required: true, message: "请输入菜单地址 " }],
+  showMode: [{ required: true, message: " 请选择是否展示" }],
+  menuType: [{ required: true, message: "请选择菜单类型 " }],
+  buttonResource: [{ required: true, message: "请填写菜单编码" }],
+  menuCode: [{ required: true, message: "请填写菜单编码 " }],
+  iconName: [{ required: true, message: " 请选择图标" }],
+  orderNo: [{ required: true, message: "请填写排序号 " }]
+});
+const router = useRouter();
+const route = useRoute();
+//查询参数
+const total = ref(0);
+const currentRow = ref({});
+const listQuery = ref({
+  dictName: "",
+  dictCode: "",
+  xtZxbz: "",
+  current: 1,
+  size:20
+});
+const buttonLoading = ref(false);
+const topParentId = ref("");
+const id = ref("");
+const zdlx = ref();
+const refreshTable = ref(true);
+const isExpand = ref(false); //展开折叠
+const isEdit = ref(true);
+const dialogForm = ref({});
+// 数据相关
+const tableData = ref([]);
+const loading = ref(false);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  loading.value = true
+  const res = await getSystemMeny(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+  loading.value = false
+};
+const editRef = ref(null);
+const handleFilter = () => {
+  listQuery.value.current = 1;
+  getListData();
+};
+getListData();
+//isExpand 监听 时候展开table
+watch(isExpand, (val) => {
+  refreshTable.value = false;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+});
+const reset = () => {
+  listQuery.value = {
+    current: 1,
+    size: 20,
+    menuName: ""
+  };
+  getListData();
+};
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.current = currentPage;
+  getListData();
+};
+/**修改字典 */
+const update = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  dialogFormVisible.value = true;
+};
+function isNull(data) {
+  if (!data) return true;
+  if (JSON.stringify(data) === "{}") return true;
+  if (JSON.stringify(data) === "[]") return true;
+  return false;
+}
+const addItemMenu = (row) => {
+  id.value = isNull(row) ? topParentId.value : row.id;
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  editRef.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      updateSysMenu({
+        ...dialogForm.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("修改成功");
+          buttonLoading.value = false;
+          handleFilter();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+
+const onAdd = () => {
+  editRef.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      addSysMenu({
+        ...dialogForm.value,
+        parentId: id.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("新增成功");
+          handleFilter();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+
+const delDictItem = (row) => {
+  deleteSysMenu({
+    id: Number(row.id)
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+const toGoPage = (row) => {
+  router.push("/user/role?zdbh=" + row.zdbh);
+};
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+::v-deep .el-loading-mask{
+  background:rgba(0,0,0,.5)
+}
+</style>

src/views/backOfficeSystem/systemConfig/role-list/allocationUser.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="user-list-page">
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="用户名">
+          <el-input
+            placeholder="请输入用户名"
+            v-model="listQuery.userName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="电话号码">
+          <el-input
+            placeholder="请输入电话号码"
+            v-model="listQuery.phone"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleFilter">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="reset()"> 重置 </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="danger" @click="unbundleRole()"
+            >批量取消授权</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addUser()">添加用户</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+        <el-table
+          ref="multipleTableRef"
+          @selection-change="handleSelectionChange"
+          :data="tableData"
+          border
+          :height="tableHeight"
+          :key="keyCount"
+          style="width: 100%"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column
+            prop="loginName"
+            align="center"
+            label="用户名"
+          ></el-table-column>
+          <el-table-column
+            prop="userName"
+            align="center"
+            label="用户昵称"
+          ></el-table-column>
+          <el-table-column
+            prop="mobile"
+            width="120px"
+            label="移动电话"
+          ></el-table-column>
+
+          <el-table-column prop="xtZhxgsj" align="center" label="录入时间">
+            <template #default="{ row }">{{
+              $filters.dateFilter(row.xtLrsj)
+            }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="120">
+            <template #default="{ row }">
+              <el-popconfirm
+                confirm-button-text="Yes"
+                cancel-button-text="No"
+                icon-color="red"
+                title="确定要删除?"
+                @confirm="unbundleRole(row)"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small">取消授权</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye" :style="{ top: tableHeight + 'px' }">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="listQuery.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+    </div>
+
+    <el-dialog
+      width="900px"
+      custom-class="way"
+      v-model="dialogFormVisible"
+      @closed="closeDialog"
+      :title="isEdit ? '修改' : '新增'"
+    >
+      <!-- <p>{{ dialogForm }}</p> -->
+      <el-form
+        ref="formRef"
+        :model="dialogForm"
+        label-width="120px"
+        class="mosty-from-wrap twoLine"
+        :rules="rules"
+      >
+        <el-form-item label="用户昵称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="用户昵称"
+            clearable
+            v-model="dialogForm.userName"
+          />
+        </el-form-item>
+        <el-form-item label="登录账号:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="登录账号"
+            clearable
+            v-model="dialogForm.loginName"
+          />
+        </el-form-item>
+        <el-form-item label="密码:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="密码"
+            show-password
+            v-model="dialogForm.password"
+          />
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idEntityCard">
+          <MOSTY.IdentityCard
+            width="280px"
+            v-model="dialogForm.idEntityCard"
+            clearable
+          ></MOSTY.IdentityCard>
+        </el-form-item>
+        <el-form-item label="电话号码:" prop="telePhone">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.telePhone"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="移动电话:" prop="mobile">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.mobile"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="封装民族:" prop="nation">
+          <MOSTY.PackageSelect
+            width="280px"
+            v-model="dialogForm.nation"
+            dictEnum="NATION"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="性别:" prop="">
+          <MOSTY.Sex width="220px" v-model:sex="dialogForm.sex" />
+        </el-form-item>
+        <el-form-item label="文化程度:" prop="">
+          <MOSTY.PackageSelect
+            dictEnum="EDUCATION"
+            width="280px"
+            v-model="dialogForm.whcd"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="E-mail" prop="email">
+          <MOSTY.Email
+            v-model="dialogForm.email"
+            width="280px"
+            clearable
+          ></MOSTY.Email>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="email">
+          <el-date-picker
+            v-model="dialogForm.birthday"
+            type="date"
+            placeholder="出生日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="有效期:" prop="">
+          <el-date-picker
+            v-model="dialogForm.endTime"
+            type="datetime"
+            placeholder="Select date and time"
+            format="YYYY/MM/DD hh:mm:ss"
+            value-format="x"
+          />
+        </el-form-item>
+        <el-form-item label="行业号码:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="行业号码"
+            v-model="dialogForm.inDustRialId"
+          />
+        </el-form-item>
+        <el-form-item label="管理部门名称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="管理部门名称"
+            v-model="dialogForm.managerOrgName"
+          />
+        </el-form-item>
+        <el-form-item label="管理部门ID:" prop="">
+          <MOSTY.Department
+            placeholder="管理部门ID"
+            width="280px"
+            clearable
+            filterable
+            multiple
+            v-model="dialogForm.managerOrgId"
+          />
+        </el-form-item>
+        <el-form-item label="岗位名称:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="岗位名称"
+            v-model="dialogForm.positionName"
+          />
+        </el-form-item>
+        <el-form-item label="岗位ID:" prop="">
+          <MOSTY.Other
+            width="280px"
+            placeholder="岗位ID"
+            v-model="dialogForm.positionId"
+          />
+        </el-form-item>
+
+        <el-form-item label="用户类型:" prop="">
+          <el-select v-model="dialogForm.userType" placeholder="请选择">
+            <el-option label="系统用户默认" value="00" />
+            <el-option label="注册用户" value="01" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="虚拟用户:" prop="">
+          <el-select v-model="dialogForm.isVirtualUser" placeholder="请选择">
+            <el-option label="是" value="1" />
+            <el-option label="不是" value="2" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button type="primary" v-if="isEdit" @click="onSave"
+            >保存</el-button
+          >
+          <el-button type="primary" v-else @click="onAdd">新增</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <ChooseUser
+      v-model="chooseUserVisible"
+      :roleId="route.params.id"
+      @choosedUsers="saveUsers"
+    ></ChooseUser>
+  </div>
+</template>
+
+<script setup>
+import ChooseUser from "@/components/MyComponents/ChooseUser";
+import { useRoute } from "vue-router";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { ref, reactive, computed, watch,onMounted,onUnmounted,getCurrentInstance } from "vue";
+import {
+  selectUnAccreditPage,
+  batchUnboundUserRole,
+  getRoleUserList,
+  grantUserToRole
+} from "@/api/user-manage";
+const { proxy } = getCurrentInstance();
+const route = useRoute();
+const searchBox = ref()
+const keyCount = ref(0); //tabel组件刷新值
+const tableHeight = ref(); // 表格高度
+const rules = ref({
+  ...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
+  ...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
+  ...rule.identityCardRule({ validator: true }), //身份证校验
+  ...rule.addressSelectRule({ require: true }), //地址
+  ...rule.emailRule({ validator: true }), //邮箱
+  packageSelect: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  other: [
+    {
+      required: true,
+      message: "自由发挥哦",
+      trigger: "blur"
+    }
+  ]
+});
+
+//查询参数
+const total = ref(0);
+const page = ref(1);
+const size = ref(20);
+const currentRow = ref({});
+const listQuery = ref({
+  page: 1,
+  size: 20,
+  userName: '',
+  phone: ''
+});
+const isEdit = ref(true);
+const dialogForm = ref({
+  userName: ""
+});
+//分配角色
+const currentUserId = ref("");
+const roleDialogVisible = ref(false);
+const multipleTableRef = ref(null);
+const multipleSelection = ref([]);
+const chooseUserVisible = ref(false);
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+
+
+onMounted(() => {
+  getListData();
+  tabHeightFn();
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  params.current = params.page;
+  params.roleId = route.params.id;
+  const res = await getRoleUserList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+
+const reset = () => {
+  listQuery.value = {
+    page: 1,
+    size: 5,
+    userName: "",
+    phone: ""
+  };
+  getListData();
+};
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getListData();
+};
+
+
+// 分页相关 size 改变触发
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+// 页码改变触发
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.page = currentPage;
+  getListData();
+};
+
+const unbundleRole = (row) => {
+  let params = {
+    roleId: route.params.id,
+    ids: []
+  };
+  if (row) {
+    params.ids.push(row.id);
+  } else {
+    if (multipleSelection.value.length <= 0) return false;
+    multipleSelection.value.forEach((item) => {
+      params.ids.push(item.id);
+    });
+  }
+  batchUnboundUserRole(params).then((res) => {
+    ElMessage.success("操作成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+
+const assignRoles = (row) => {
+  roleDialogVisible.value = true;
+  currentUserId.value = row.id;
+};
+
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+const addUser = () => {
+  chooseUserVisible.value = true;
+};
+
+//批量添加用户
+const saveUsers = (users) => {
+  if (users.length > 0) {
+    let userIds = users.map((item) => item.id);
+    let params = {
+      roleId: route.params.id,
+      userIds: userIds
+    };
+    grantUserToRole(params).then((res) => {
+      ElMessage.success("修改成功");
+      handleFilter();
+    });
+  }
+};
+
+// 高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 200;
+    window.onresize = function () {
+    tabHeightFn();
+  };
+};
+
+//watch监听路由变化
+watch(roleDialogVisible, (val) => {
+  if (!val) currentUserId.value = "";
+});
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+</style>

src/views/backOfficeSystem/systemConfig/role-list/conponents/PrivilegesDialog.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-dialog
+      title="分配权限"
+      width="500px"
+      :model-value="modelValue"
+      :destroy-on-close="true"
+      @close="closed"
+    >
+      <div class="treeCnt">
+        <el-tree
+          ref="treeRef"
+          :data="allPermission"
+          :props="defaultProps"
+          node-key="id"
+          show-checkbox
+          default-expand-all
+          :check-strictly="true"
+          @check="checkeTree"
+        >
+        </el-tree>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closed">取消</el-button>
+          <el-button type="primary" @click="onComfirm">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import {
+  saveRoleMenuInfo,
+  getRoleMenuIds,
+  getMenuTree
+} from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  roleId: {
+    type: String,
+    required: true
+  }
+});
+const form = ref({});
+
+const emits = defineEmits(["update:modelValue", "updateRole"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+const onComfirm = () => {
+  let params = {
+    roleId: Number(props.roleId),
+    menuIds: treeRef.value.getCheckedKeys().map((item) => Number(item))
+  };
+  saveRoleMenuInfo(params).then((res) => {
+    ElMessage.success("操作成功");
+  });
+  closed();
+};
+
+//所有权限
+const allPermission = ref([]);
+const getPermissionList = async () => {
+  const res = await getMenuTree();
+  allPermission.value = res;
+};
+getPermissionList();
+
+const treeRef = ref(null);
+//属性结构配置
+const defaultProps = {
+  children: "sysMenuList",
+  label: "menuName"
+};
+//当前角色权限
+const getRolePermission = async () => {
+  const checkedKeys = await getRoleMenuIds(props.roleId);
+  treeRef.value.setCheckedKeys(checkedKeys);
+};
+
+// 选中子节点，默认选中父节点
+const checkeTree = (data) => {
+  let thisNode = treeRef.value.getNode(data.id); // 获取当前节点
+  const keys = treeRef.value.getCheckedKeys(); // 获取已勾选节点的key值
+  if (thisNode.checked) {
+    // 当前节点若被选中
+    for (let i = thisNode.level; i > 1; i--) {
+      // 判断是否有父级节点
+      if (!thisNode.parent.checked) {
+        // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
+        thisNode = thisNode.parent;
+        // keys.push(thisNode.data.id);
+      }
+    }
+  }
+  treeRef.value.setCheckedKeys(keys); // 将所有keys数组的节点全选中
+};
+
+watch(
+  () => props.roleId,
+  (val) => {
+    if (val) {
+      getRolePermission();
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  max-height: 80vh;
+  .treeCnt {
+    height: 65vh;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/backOfficeSystem/systemConfig/role-list/index.vue

@@ -0,0 +1,465 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">角色列表</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addRole()">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="角色名称">
+          <el-input
+            placeholder="请输入角色名称"
+            v-model="listQuery.roleName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleFilter"> 查询 </el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        :data="tableData"
+        border
+        :height="tableHeight"
+        style="width: 100%"
+        :key="keyCount"
+      >
+        <el-table-column
+          sortable
+          prop="orderNo"
+          label="角色编号"
+          show-overflow-tooltip
+          width="120px"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="roleName"
+          label="角色名称"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="roleCode"
+          label="角色编码"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column sortable label="状态" width="80px">
+          <template #default="{ row }">
+            <div>
+              <el-tag size="small" type="success" v-if="row.xtZxbz === 0"
+                >正常</el-tag
+              >
+              <el-tag size="small" type="danger" v-else-if="row.xtZxbz === 1"
+                >注销</el-tag
+              >
+              <el-tag size="small" type="info" v-else>未知</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="roleDesc"
+          label="角色描述"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column sortable prop="bz" label="备注" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column sortable prop="xtZhxgsj" label="更新时间">
+          <template #default="{ row }">
+            {{ $filters.dateFilter(row.xtZhxgsj) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="320">
+          <template #default="{ row }">
+            <el-button @click="updateDict(row)" size="small">修改</el-button>
+            <el-button @click="allocationUser(row)" size="small"
+              >管理用户</el-button
+            >
+            <el-button @click="privilegesHanlder(row)" size="small"
+              >菜单权限</el-button
+            >
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delRole(row)"
+            >
+              <template #reference>
+                <!-- v-permission="['removeTest','removeTest2']" -->
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        :rules="rules"
+        ref="elform"
+        inline="true"
+        label-position="top"
+        :model="dialogForm"
+        class="mosty-from-wrap"
+      >
+        <el-form-item prop="roleName" class="one" label="角色名称">
+          <el-input
+            v-model="dialogForm.roleName"
+            show-word-limit
+            maxlength="20"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          prop="roleCode"
+          label="角色编码"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.roleCode"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="角色描述"
+          prop="roleDesc"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.roleDesc"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="排序号"
+          prop="orderNo"
+          label-width="140px"
+        >
+          <el-input-number
+            v-model="dialogForm.orderNo"
+            class="mx-4"
+            :min="1"
+            :max="100"
+            controls-position="right"
+          />
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="权限范围"
+          prop="dataPermissionLevel"
+          label-width="140px"
+        >
+          <!-- <MOSTY.PackageSelect
+            width="280px"
+            v-model="dialogForm.dataPermissionLevel"
+            dictEnum="D_ZDY_SJQX"
+            clearable
+            filterable
+          /> -->
+          <el-select
+            clearable
+            v-model="dialogForm.dataPermissionLevel"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="(dict, index) in D_ZDY_SJQX"
+              :key="index"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="one" label="备注" label-width="140px">
+          <el-input
+            v-model="dialogForm.bz"
+            show-word-limit
+            maxlength="200"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <PrivilegesDialog
+      v-model="privilegesDialogVisible"
+      :roleId="currentRow.id"
+    ></PrivilegesDialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import PrivilegesDialog from "./conponents/PrivilegesDialog.vue";
+import { ElMessage } from "element-plus";
+import { ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_ZDY_SJQX } = proxy.$dict("D_ZDY_SJQX");
+import {
+  getRoleList,
+  addSysRole,
+  updateSysRole,
+  deleteSysRole
+} from "@/api/user-manage";
+import { useRouter } from "vue-router";
+const searchBox = ref(null); // 搜索盒子
+const keyCount = ref(0); //tabel组件刷新值
+const tableHeight = ref(); // 表格高度
+//查询参数
+const total = ref(0);
+const page = ref(1);
+const size = ref(20);
+const currentRow = ref({});
+const listQuery = ref({
+  page: 1,
+  size: 20,
+  dictName: "",
+  dictCode: "",
+  xtZxbz: ""
+});
+const elform = ref(null);
+//验证
+const rules = ref({
+  roleName: [{ required: true, message: "请输入角色名称", trigger: "change" }],
+  roleCode: [{ required: true, message: "请输入角色编码", trigger: "change" }],
+  roleDesc: [{ required: true, message: "请输入角色描述", trigger: "change" }],
+  orderNo: [{ required: true, message: "请输入排序号", trigger: "change" }],
+  dataPermissionLevel: [
+    { required: true, message: "请选择权限范围", trigger: "change" }
+  ]
+});
+const isEdit = ref(true);
+const dialogForm = ref({});
+const buttonLoading = ref(false);
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  params.current = params.page;
+  const res = await getRoleList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getListData();
+};
+getListData();
+const reset = () => {
+  listQuery.value = {
+    page: 1,
+    size: 5,
+    roleName: ""
+  };
+  getListData();
+};
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.page = currentPage;
+  getListData();
+};
+
+/**修改字典 */
+const updateDict = (row) => {
+  isEdit.value = true;
+  row.dataPermissionLevel = "" + row.dataPermissionLevel;
+  dialogForm.value = { ...row };
+
+  dialogFormVisible.value = true;
+};
+
+/**privileges 分配权限 */
+const privilegesDialogVisible = ref(false);
+const privilegesHanlder = (row) => {
+  privilegesDialogVisible.value = true;
+  currentRow.value = { ...row };
+};
+
+const addRole = (row) => {
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    updateSysRole({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("修改成功");
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const onAdd = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    addSysRole({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("操作成功");
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const delRole = (row) => {
+  buttonLoading.value = true;
+  deleteSysRole({
+    id: Number(row.id)
+  })
+    .then((res) => {
+      ElMessage.success("删除成功");
+      buttonLoading.value = false;
+      handleFilter();
+    })
+    .finally(() => {
+      buttonLoading.value = false;
+    });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+//分配用户
+const router = useRouter();
+const allocationUser = (row) => {
+  //
+  router.push(`/user/allocationUser/${row.id}`);
+};
+// 高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight  - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/backOfficeSystem/systemConfig/system-config-list/index.vue

@@ -0,0 +1,387 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">系统配置</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addConfig">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="配置名称">
+          <el-input
+            placeholder="请输入配置名称"
+            v-model="listQuery.configName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="配置键">
+          <el-input
+            placeholder="请输入配置键"
+            v-model="listQuery.configKey"
+            clearable
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button @click="handleFilter"> 查询 </el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :height="tableHeight"
+        :key="keyCount"
+      >
+        <el-table-column
+          sortable
+          prop="pzmc"
+          show-overflow-tooltip
+          label="配置名称"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="pzj"
+          show-overflow-tooltip
+          label="配置键"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="pzz"
+          show-overflow-tooltip
+          label="配置值"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="xtZhxgrxm"
+          show-overflow-tooltip
+          label="修改人姓名"
+        >
+        </el-table-column>
+        <el-table-column sortable prop="bz" show-overflow-tooltip label="备注">
+        </el-table-column>
+        <el-table-column sortable prop="xtCjsj" label="采集时间">
+          <template #default="{ row }">
+            {{ $filters.dateFilter(row.xtCjsj) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="160">
+          <template #default="{ row }">
+            <el-button @click="updateDict(row)" size="small">修改</el-button>
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delConfig(row)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        ref="formRef"
+        class="mosty-from-wrap"
+        :inline="true"
+        label-position="top"
+        :model="dialogForm"
+        :rules="rules"
+      >
+        <el-form-item
+          class="one"
+          label="配置名称"
+          prop="pzmc"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.pzmc"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="one" label="配置键" prop="pzj" label-width="140px">
+          <el-input
+            v-model="dialogForm.pzj"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          label="配置值"
+          prop="pzz"
+          required
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.pzz"
+            show-word-limit
+            maxlength="50"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <!-- <el-form-item class="one" prop="xtZxbz" label="状态">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.xtZxbz"
+            placeholder="请选择配置状态"
+          >
+            <el-option label="正常" :value="0"></el-option>
+            <el-option label="注销" :value="1"></el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item class="one" label="备注" label-width="140px">
+          <el-input
+            v-model="dialogForm.bz"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            show-word-limit
+            maxlength="200"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
+import {
+  getSysConfigList,
+  addSysConfig,
+  updateSysConfig,
+  deleteSysConfig
+} from "@/api/user-manage";
+const { proxy } = getCurrentInstance();
+const keyCount = ref(0); //tabel组件刷新值
+const searchBox = ref(null); // 搜索盒子
+const tableHeight = ref(); // 表格高度
+const formRef = ref(null);
+const rules = ref({
+  pzmc: [{ required: true, message: "请填写配置名称", trigger: "blur" }],
+  pzj: [{ required: true, message: "请填写配置键", trigger: "blur" }],
+  pzz: [{ required: true, message: "请填写配置值", trigger: "blur" }],
+  xtZxbz: [{ required: true, message: "请选择配置状态", trigger: "blur" }],
+});
+//查询参数
+const total = ref(0);
+const page = ref(1);
+const size = ref(20);
+const currentRow = ref({});
+const listQuery = ref({
+  page: 1,
+  size: 20,
+  dictName: "",
+  dictCode: "",
+  xtZxbz: ""
+});
+const isEdit = ref(true);
+const dialogForm = ref({});
+const buttonLoading = ref(false);
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  params.current = params.page;
+  const res = await getSysConfigList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+const reset = () => {
+  listQuery.value = {
+    page: 1,
+    size: 20,
+    configName: "",
+    configKey: ""
+  };
+  getListData();
+};
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getListData();
+};
+getListData();
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.page = currentPage;
+  getListData();
+};
+
+/**修改字典 */
+const updateDict = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  dialogFormVisible.value = true;
+};
+
+const addConfig = (row) => {
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    updateSysConfig({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("修改成功");
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const onAdd = () => {
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    addSysConfig({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("新增成功");
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const delConfig = (row) => {
+  deleteSysConfig({
+    id: Number(row.id)
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/backOfficeSystem/systemConfig/systemFxMx/index.vue

@@ -0,0 +1,740 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">系统分析模型</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addJob()">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" :inline="true">
+        <el-form-item label="模型名称">
+          <el-input
+            placeholder="请输入模型名称"
+            v-model="listQuery.mxmc"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleFilter"> 查询 </el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="tabBox">
+      <el-table
+        :data="tableData"
+        border
+        :height="tableHeight"
+        style="width: 100%"
+        :key="keyCount"
+      >
+        <el-table-column
+          sortable
+          prop="id"
+          show-overflow-tooltip
+          label="模型编号"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="mxmc"
+          show-overflow-tooltip
+          label="模型名称"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="mxsm"
+          show-overflow-tooltip
+          label="模型说明"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="yxcs"
+          show-overflow-tooltip
+          label="运行次数"
+        >
+        </el-table-column>
+        <el-table-column
+          sortable
+          prop="yjCs"
+          show-overflow-tooltip
+          label="预警次数"
+        >
+        </el-table-column>
+        <el-table-column sortable label="模型状态" width="100px">
+          <template #default="{ row }">
+            <div>
+              <el-tag size="small" type="success" v-if="row.mxzt == '01'"
+                >运行中</el-tag
+              >
+              <el-tag size="small" type="danger" v-else-if="row.mxzt == '02'"
+                >已停止</el-tag
+              >
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="280">
+          <template #default="{ row }">
+            <template v-if="row.mxzt == '01'">
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon-color="red"
+                title="确定要停止?"
+                @confirm="startModel(row)"
+              >
+                <template #reference>
+                  <el-button size="small">停止</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+            <template v-else>
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon-color="red"
+                title="确定要启动?"
+                @confirm="stopModel(row)"
+              >
+                <template #reference>
+                  <el-button size="small">启动</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+
+            <el-button @click="csSet(row)" size="small">参数设置</el-button>
+            <el-button @click="updateJob(row)" size="small">修改</el-button>
+            <el-popconfirm
+              confirm-button-text="是"
+              cancel-button-text="否"
+              icon-color="red"
+              title="确定要删除?"
+              @confirm="delRole(row)"
+            >
+              <template #reference>
+                <el-button type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye" :style="{ top: tableHeight + 'px' }">
+        <el-pagination
+          class="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="listQuery.page"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="listQuery.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="onAdd"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        ref="elform"
+        class="mosty-from-wrap"
+        :rules="rules"
+        :inline="true"
+        label-position="top"
+        :model="dialogForm"
+      >
+      <el-form-item
+          class="one"
+          prop="id"
+          label="模型编号"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.id"
+            placeholder="请输入模型编号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          prop="ssbmid"
+          label="所属辖区"
+          label-width="140px"
+        >
+          <MOSTY.Department
+            placeholder="请选择所属辖区"
+            width="100%"
+            clearable
+            filterable
+            v-model="dialogForm.ssbmid"
+          />
+        </el-form-item>
+        <el-form-item
+          class="one"
+          prop="mxmc"
+          label="模型名称"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.mxmc"
+            placeholder="请输入模型名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="mxlx" label="模型类型">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.mxlx"
+            placeholder="请选择模型类型"
+          >
+            <el-option label="街面违法犯罪预警" :value="'01'"></el-option>
+            <el-option label="重点巡防区域预警" :value="'02'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          class="one"
+          prop="mxsm"
+          label="模型说明"
+          label-width="140px"
+        >
+          <el-input
+            v-model="dialogForm.mxsm"
+            autocomplete="off"
+            show-word-limit
+            maxlength="3000"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 模型参数 -->
+    <div v-if="dialogCSSZTableVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">参数设置</span>
+        <div>
+          <el-button size="small" @click="dialogCSSZTableVisible = false"
+            >关闭</el-button
+          >
+        </div>
+      </div>
+      <div class="mxcs_table">
+        <div class="csmxadd">
+          <el-button type="primary" @click="addCsModel()">
+            <el-icon><CirclePlus /></el-icon>
+            <span>新增</span>
+          </el-button>
+        </div>
+        <el-table
+          :data="tableCSData"
+          border
+          :height="tableHeight"
+          style="width: 100%"
+          :key="keyCount"
+        >
+          <el-table-column
+            sortable
+            prop="cslx"
+            show-overflow-toolt
+            label="参数类型"
+          >
+            <template #default="{ row }">
+                <span>{{row.cslx == '01' ? '时间（分）':row.cslx == '02' ? '次数':row.cslx == '03' ? '人数':'距离（米）'}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="csmc"
+            show-overflow-tooltip
+            label="参数名"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="csz"
+            show-overflow-tooltip
+            label="参数值"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="csdm"
+            show-overflow-tooltip
+            label="参数代码"
+          >
+          </el-table-column>
+          <el-table-column label="操作" fixed="right" width="140">
+            <template #default="{ row }">
+              <el-button @click="updateCs(row)" size="small">修改</el-button>
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon-color="red"
+                title="确定要删除?"
+                @confirm="deleteCs(row)"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small">删除</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye" :style="{ top: tableHeight + 'px' }">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChangecs"
+            @current-change="handleCurrentChangecs"
+            :current-page="csform.pageCurrent"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="csform.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="cstotal"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <!-- 模型参数新增 修改 -->
+    <div v-if="dialogcsFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ iscsEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="iscsEdit"
+            type="primary"
+            size="small"
+            @click="updateCsModel"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <!-- 新增 -->
+          <el-button
+            v-else
+            type="primary"
+            size="small"
+            @click="saveCs"
+            :loading="buttonLoading"
+            >保存</el-button
+          >
+          <el-button size="small" @click="dialogcsFormVisible = false"
+            >关闭</el-button
+          >
+        </div>
+      </div>
+      <el-form
+        ref="elcsform"
+        class="mosty-from-wrap"
+        :rules="rules"
+        :inline="true"
+        label-position="top"
+        :model="csform"
+      >
+        <el-form-item
+          class="one"
+          prop="csmc"
+          label="参数名称"
+          label-width="140px"
+        >
+          <el-input
+            v-model="csform.csmc"
+            placeholder="请输入参数名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="csz" label="参数值" label-width="140px">
+          <el-input v-model="csform.csz" placeholder="请输入参数值"></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="csdm" label="参数代码" label-width="140px">
+          <el-input v-model="csform.csdm" placeholder="请输入参数代码"></el-input>
+        </el-form-item>
+        <el-form-item class="one" prop="cslx" label="参数类型">
+          <el-select
+            style="width: 100%"
+            v-model="csform.cslx"
+            placeholder="请选择参数类型"
+          >
+            <el-option
+              v-for="item in cslxList"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
+import {
+  getYJModelList,
+  addYJmodel,
+  putYJmodel,
+  delYJModel,
+  getCsList,
+  addCs,
+  putCs,
+  delCs,
+  getCsDTQZ
+} from "@/api/basicsmanage/yjmodel";
+const { proxy } = getCurrentInstance();
+const searchBox = ref(null); // 搜索盒子
+const keyCount = ref(0); //tabel组件刷新值
+const tableHeight = ref(); // 表格高度
+//查询参数
+const total = ref(0);
+const page = ref(1);
+const size = ref(20);
+const buttonLoading = ref(false);
+const currentRow = ref({});
+const listQuery = ref({
+  pageCurrent: 1,
+  pageSize: 10,
+  mxmc: ""
+});
+const elform = ref(null);
+const elcsform = ref(null);
+//验证
+const rules = ref({
+  ssbmid: [{ required: true, message: "请选择所属辖区", trigger: "change" }],
+  mxmc: [{ required: true, message: "请输入模型名称", trigger: "change" }],
+  mxlx: [{ required: true, message: "请选择模型类型", trigger: "change" }],
+  mxsm: [{ required: true, message: "请输入模型说明", trigger: "change" }],
+  csmc: [{ required: true, message: "请输入参数名称", trigger: "change" }],
+  csz: [{ required: true, message: "请输入参数值", trigger: "change" }],
+  cslx: [{ required: true, message: "请选择参数类型", trigger: "change" }],
+  id: [{ required: true, message: "请输入模型编号", trigger: "change" }],
+  csdm: [{required: true, message: "请输入参数代码", trigger: "change"}]
+});
+// 参数类型
+const cslxList = ref([
+  {
+    label: "时间(分)",
+    value: "01"
+  },
+  {
+    label: "次数",
+    value: "02"
+  },
+  {
+    label: "人数",
+    value: "03"
+  },
+  {
+    label: "距离（米）",
+    value: "04"
+  }
+]);
+// 参数设置
+const csform = ref({});
+const csparams = ref({
+  pageSize: 10,
+  pageCurrent: 1,
+  mxid: ""
+});
+const cstotal = ref(0);
+const iscsEdit = ref(false);
+const tableCSData = ref([]);
+const dialogCSSZTableVisible = ref(false);
+const dialogcsFormVisible = ref(false);
+function csSet(row) {
+  csparams.value.mxid = row.id;
+  dialogCSSZTableVisible.value = true;
+  searchCs();
+}
+// 参数查询
+function searchCs() {
+  getCsList(csparams.value).then((res) => {
+    tableCSData.value = res.records;
+    cstotal.value = res.total;
+  });
+}
+// 参数新增
+function addCsModel() {
+  iscsEdit.value = false;
+  dialogcsFormVisible.value = true;
+  csform.value = {
+    csmc: "",
+    csz: "",
+    cslx: ""
+  };
+  csform.value.mxid = csparams.value.mxid;
+}
+function saveCs() {
+  elcsform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    addCs(csform.value).then((res) => {
+      ElMessage.success("新增成功");
+      csparams.value.pageCurrent = 1;
+      searchCs();
+      dialogcsFormVisible.value = false;
+    });
+  });
+}
+// 参数删除
+function deleteCs(row) {
+  delCs(row.id).then((res) => {
+    csparams.value.pageCurrent = 1;
+    searchCs();
+  });
+}
+// 参数修改
+function updateCs(row) {
+  iscsEdit.value = true;
+  dialogcsFormVisible.value = true;
+  csform.value = row;
+}
+function updateCsModel() {
+  elcsform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    putCs(csform.value).then((res) => {
+      ElMessage.success("修改成功");
+      csparams.value.pageCurrent = 1;
+      searchCs();
+      dialogcsFormVisible.value = false;
+    });
+  });
+}
+
+// 参数分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChangecs = (currentSize) => {
+  csform.value.pageSize = currentSize;
+  searchCs();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChangecs = (currentPage) => {
+  csform.value.pageCurrent = currentPage;
+  searchCs();
+};
+
+// 启动
+function startModel(row) {
+  getCsDTQZ(row.id).then((res) => {
+    ElMessage.success("启动成功");
+    handleFilter();
+  });
+}
+// 停止
+function stopModel(row) {
+  getCsDTQZ(row.id).then((res) => {
+    ElMessage.success("停止成功");
+    handleFilter();
+  });
+}
+
+const isEdit = ref(true);
+const dialogForm = ref({});
+const reset = () => {
+  listQuery.value = {
+    pageCurrent: 1,
+    pageSize: 10,
+    mxmc: ""
+  };
+  getListData();
+};
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const res = await getYJModelList(listQuery.value);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+
+const handleFilter = () => {
+  listQuery.value.pageCurrent = 1;
+  getListData();
+};
+getListData();
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  listQuery.value.pageSize = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.pageCurrent = currentPage;
+  getListData();
+};
+
+/**修改字典 */
+const updateJob = (row) => {
+  isEdit.value = true;
+  dialogForm.value = { ...row };
+  dialogForm.value.ssbmid = dialogForm.value.ssbmid * 1;
+  dialogFormVisible.value = true;
+};
+
+const addJob = (row) => {
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    dialogForm.value.ssbmdm = dialogForm.value.ssbmid;
+    putYJmodel({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("修改成功");
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const onAdd = () => {
+  elform.value.validate((valid) => {
+    if (!valid) {
+      ElMessage.error("请完成必填项！");
+      return false;
+    }
+    buttonLoading.value = true;
+    dialogForm.value.ssbmdm = dialogForm.value.ssbmid;
+    addYJmodel({
+      ...dialogForm.value
+    })
+      .then((res) => {
+        dialogFormVisible.value = false;
+        ElMessage.success("新增成功");
+        buttonLoading.value = false;
+        handleFilter();
+      })
+      .finally(() => {
+        buttonLoading.value = false;
+      });
+  });
+};
+
+const delRole = (row) => {
+  delYJModel(row.id).then((res) => {
+    ElMessage.success("删除成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+// 高度计算
+const tabHeightFn = () => {
+ tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/layout.scss";
+@import "@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+.cslb_text {
+  // font-size: 20px;
+  color: rgb(7, 142, 231);
+  padding: 10px;
+}
+.canshu_box {
+  width: 94%;
+  display: flex;
+  justify-content: space-between;
+}
+.csmxadd {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px;
+}
+.mxcs_table {
+  margin: 10px;
+}
+</style>

src/views/backOfficeSystem/systemConfig/useQk/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div>
+    <div class="btnBoxss">
+      <div class="title">系统使用情况</div>
+      <div class="btnBox">
+        <el-radio-group v-model="tabPos" @change="getTab">
+          <el-radio-button label="1">今日</el-radio-button>
+          <el-radio-button label="2">近7日</el-radio-button>
+          <el-radio-button label="3">近30日</el-radio-button>
+          <el-radio-button label="4">近90日</el-radio-button>
+        </el-radio-group>
+      </div>
+    </div>
+    <div class="chart_box">
+      <div class="chart_item left_item">
+          <div class="sy_pep">使用次数</div>
+        <div class="cen_box">
+            <pie :data="sbLxData" />
+        </div>
+      </div>
+      <div class="chart_item right_item">
+        <div class="sy_pep">使用人数</div>
+        <div class="cen_box">
+          <div class="content">
+            <div class="stat_box">
+              <div>人数</div>
+              <div class="num-text">{{ peopleNum }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tablebox" ref="tableList">
+      <div class="stitle ranktitle">
+        排行榜
+        <div class="rankText">
+          <el-radio-group v-model="radioList" @change="checkActive">
+            <el-radio :label="1">人员</el-radio>
+            <el-radio :label="2">部门</el-radio>
+            <el-radio :label="3">模块</el-radio>
+          </el-radio-group>
+        </div>
+      </div>
+
+      <div class="table-List">
+        <div class="table-header">
+          <span class="table-item">排名</span>
+          <span class="table-item">使用成功数</span>
+          <span class="table-item">使用失败数</span>
+          <span class="table-item">总数</span>
+          <span class="table-item" v-if="radioList === 1">人员</span>
+          <span class="table-item">{{
+            radioList === 3 ? "模块名称" : "部门名称"
+          }}</span>
+        </div>
+        <div
+          class="table-body"
+          :class="index % 2 === 0 ? 'bg' : ''"
+          v-for="(item, index) in tableData"
+          :key="index"
+        >
+          <div class="table-item">
+            <img
+              v-if="index === 0"
+              :src="require('@/assets/images/gold.png')"
+              alt=""
+              width="20"
+              height="25"
+            />
+            <img
+              v-else-if="index === 1"
+              :src="require('@/assets/images/silver.png')"
+              alt=""
+              width="20"
+              height="25"
+            />
+            <img
+              v-else-if="index === 2"
+              :src="require('@/assets/images/copper.png')"
+              alt=""
+              width="20"
+              height="25"
+            />
+            <span v-else>{{ index + 1 }}</span>
+          </div>
+          <span class="table-item">{{ active ? item.pass : item.aa }}</span>
+          <span class="table-item">{{ active ? item.noPass : item.a }}</span>
+          <span class="table-item">{{ active ? item.count : item.a }}</span>
+          <span class="table-item" v-if="radioList === 1">{{
+            item.oper_name
+          }}</span>
+          <span class="table-item" v-if="radioList != 3">{{ item.ssbm }}</span>
+          <span class="table-item" v-if="radioList === 3">
+            <dict-tag :options="D_BZ_FWMC" :value="item.mkmc" :tag="false" />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import pie from "./pie.vue";
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import ChooseIcon from "@/components/MyComponents/ChooseIcon";
+import emitter from "@/utils/eventBus.js";
+import { ElMessage } from "element-plus";
+import {
+  ref,
+  reactive,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance,
+  onUnmounted
+} from "vue";
+import { useRouter, useRoute } from "vue-router";
+const { proxy } = getCurrentInstance();
+import {
+  ryStatistics,
+  bmStatistics,
+  mkStatistics,
+  useStatistics
+} from "@/api/sys.js";
+const { D_BZ_FWMC } = proxy.$dict("D_BZ_FWMC");
+const router = useRouter();
+const route = useRoute();
+const active = ref(true);
+const tabPos = ref("1");
+const params = ref({
+  type: "1"
+});
+function getTab(val) {
+  params.value.type = val;
+  getTableData();
+  getpie();
+}
+const tableData = ref([]); //表格数据
+function getTableData() {
+  if (radioList.value === 1) {
+    ryStatistics(params.value).then((res) => {
+      tableData.value = res;
+    });
+  } else if (radioList.value === 2) {
+    bmStatistics(params.value).then((res) => {
+      tableData.value = res;
+    });
+  } else if (radioList.value === 3) {
+    mkStatistics(params.value).then((res) => {
+      tableData.value = res;
+    });
+  }
+}
+
+const radioList = ref(1);
+function checkActive(val) {
+  getTableData();
+}
+
+const sbLxData = ref([
+  {
+    name: "成功次数",
+    value: 0
+  },
+  {
+    name: "失败次数",
+    value: 0
+  }
+]);
+const peopleNum = ref(0);
+function getpie() {
+  useStatistics(params.value).then((res) => {
+    peopleNum.value = res.fwrs;
+    sbLxData.value[0].value = res.qqcgcs;
+    sbLxData.value[1].value = res.qqsbcs;
+  });
+}
+
+// 表格高度计算
+const tabHeightFn = () => {
+ tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
+};
+onMounted(() => {
+  getTableData();
+  getpie();
+});
+onUnmounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+.user-manage-container {
+  .table-header-wrap {
+    margin-bottom: 22px;
+  }
+
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+.map {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+.latlng {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.btnBoxss {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 2;
+  .title {
+    height: 60px;
+    line-height: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+  .btnBox {
+    margin-top: 14px;
+  }
+}
+.chart_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .chart_item {
+    flex: 1;
+    height: 300px;
+    border: 1px solid #07539a;
+    padding: 10px;
+  }
+  .left_item {
+    margin-right: 10px;
+  }
+  .right_item {
+    margin-left: 10px;
+  }
+  .cen_box {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.tablebox {
+  margin-top: 15px;
+  border: 1px solid #07539a;
+  height: 54vh;
+  padding: 10px;
+  .ranktitle {
+    display: flex;
+    justify-content: space-between;
+    .rankText {
+      color: #2892ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    .rankText:hover {
+      color: rgb(59, 162, 231);
+    }
+  }
+  .table-List {
+    margin-top: 10px;
+  }
+}
+.table-List {
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #54c5ff;
+    background-color: #004485;
+    padding: 10px 10px;
+  }
+  .table-body {
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+    padding: 9px 10px;
+  }
+  .table-item {
+    flex: 1;
+    text-align: center;
+  }
+  .table-item-dep {
+    flex: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .bg {
+    background-color: #002f5b;
+  }
+}
+.content {
+  height: 76.5px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  width: 160px;
+  :last-child {
+    margin-right: 0vw;
+  }
+}
+.stat_box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(76, 166, 251, 0.8);
+  border-radius: 2px;
+  margin-right: 1vw;
+  padding: 13px 0;
+  .num-text {
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 10px;
+    background: linear-gradient(to bottom right, #36e5ff, #1092ff);
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+}
+.sy_pep {
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>

src/views/backOfficeSystem/systemConfig/useQk/pie.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div id="circlecz" style="width: 500px; height: 260px"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { ref, onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  data: { type: Array }
+});
+watch(
+  () => props.data,
+  () => {
+    lineChartFn();
+  },
+  {
+      deep:true
+  }
+);
+function lineChartFn() {
+  var chartDom = document.getElementById("circlecz");
+  var myChart = echarts.init(chartDom, "dark");
+  var option;
+  var scale = 1;
+//   var echartData = props.data.map((item) => {
+//     return {
+//       value: item.value,
+//       name: item.name
+//     };
+//   });
+  var rich = {
+    yellow: {
+      color: "#ffc72b",
+      fontSize: 14 * scale,
+      padding: [5, 4],
+      align: "center"
+    },
+    total: {
+      color: "#ffc72b",
+      fontSize: 14 * scale,
+      align: "center"
+    },
+    white: {
+      color: "#fff",
+      align: "center",
+      fontSize: 14 * scale,
+      padding: [0, 0]
+    },
+    blue: {
+      color: "#49dff0",
+      fontSize: 14 * scale,
+      align: "center"
+    }
+  };
+
+  option = {
+    backgroundColor: "rgba(0,0,0,0)",
+    // title:{
+    //     show:true,
+    //     text: '使用次数'
+    // },
+    legend: {
+      orient: "vertical",
+      right: 0,
+      top: 5
+    },
+    series: [
+      {
+        name: "使用次数",
+        type: "pie",
+        radius: ["32%", "50%"],
+        hoverAnimation: false,
+        color: [
+          "#c487ee",
+          "#deb140",
+          "#49dff0",
+          "#034079",
+          "#6f81da",
+          "#00ffb4"
+        ],
+        label: {
+          normal: {
+            formatter: function (params, ticket, callback) {
+              return (
+                "{white|" +
+                params.name +
+                "}\n{yellow|" +
+                params.value +
+                "}\n{blue|" +
+                params.percent +
+                "%}"
+              );
+            },
+            rich: rich
+          }
+        },
+        data: props.data
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () {
+    myChart.resize();
+  };
+  document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/backOfficeSystem/systemConfig/user-list/components/roles.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog title="配置角色" :model-value="modelValue" @close="closed">
+    <!-- <el-checkbox-group v-model="userRoleTitleList">
+      <el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.roleName" />
+    </el-checkbox-group>-->
+    <el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" style="width: 100%"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column property="orderNo" label="角色编号" />
+      <el-table-column property="roleName" label="角色名称" />
+      <el-table-column prop="xtZhxgsj" label="更新时间">
+        <template #default="{ row }">{{ $filters.dateFilter(row.xtZhxgsj) }}</template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+import { defineProps, watch, ref, onMounted, nextTick } from "vue";
+import {
+  getRoleList,
+  getUserRoleList,
+  grantRoleToUser
+} from "@/api/user-manage";
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  userId: {
+    type: String,
+    required: true
+  }
+});
+const buttonLoading = ref(false)
+const emits = defineEmits(["update:modelValue", "updateRole"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+
+const multipleTableRef = ref(null)
+
+const multipleSelection = ref([]);
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val;
+};
+
+// 为用户分配角色
+const onComfirm = () => {
+  // const roles = userRoleTitleList.value.map((roleName) => {
+  //   return allRoleList.value.find((role) => role.roleName === roleName);
+  // });
+  // const ids = roles.map((item) => {
+  //   return item.id;
+  // });
+  const ids = multipleSelection.value.map((item) => {
+    return item.id;
+  });
+  let params = {
+    userId: props.userId,
+    roleIds: ids
+  };
+  buttonLoading.value = true;
+  grantRoleToUser(params).then((res) => {
+    ElMessage.success("操作成功");
+    //通知
+    buttonLoading.value = false;
+    emits("updateRole");
+  });
+  closed();
+};
+
+//当前用户角色
+const userRoleTitleList = ref([]);
+const getUserRoles = async () => {
+  const res = await getUserRoleList(Number(props.userId));
+  userRoleTitleList.value = res.map((item) => item.id);
+  const hx = [];
+  allRoleList.value.forEach(item => {
+    if (userRoleTitleList.value.includes(item.id)) {
+      hx.push(item)
+    }
+  })
+  toggleSelection(hx)
+};
+
+const toggleSelection = (rows) => {
+  if (rows) {
+    rows.forEach((row) => {
+      multipleTableRef.value.toggleRowSelection(row, true)
+    })
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+//所有角色
+const allRoleList = ref([]);
+const getAllRoleList = async () => {
+  const params = {
+    page: 1,
+    size: 999
+  };
+  const res = await getRoleList(params);
+  allRoleList.value = res?.records;
+  getUserRoles();
+};
+
+watch(
+  () => props.userId,
+  (val) => {
+    if (val) {
+      getAllRoleList();
+    }
+  }
+);
+</script>
+
+<style>
+</style>

src/views/backOfficeSystem/systemConfig/user-list/index.vue

@@ -0,0 +1,786 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <div class="title">用户管理</div>
+      <div class="btnBox">
+        <el-button type="primary" @click="addUserHander">
+          <el-icon><CirclePlus /></el-icon>
+          <span>新增</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="searchBox" ref="searchBox">
+      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
+        <el-form-item label="用户名">
+          <el-input
+            placeholder="请输入用户名"
+            v-model="listQuery.loginName"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="移动电话">
+          <el-input
+            placeholder="请输入移动电话"
+            v-model="listQuery.phone"
+            clearable
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="身份证号">
+          <el-input
+            placeholder="请输入身份证号"
+            v-model="listQuery.idEntityCard"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="警号">
+          <el-input
+            placeholder="请输入警号"
+            v-model="listQuery.inDustRialId"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="是否包含下级">
+          <el-select v-model="listQuery.isChild">
+            <el-option
+              v-for="item in D_BZ_SF"
+              :key="item"
+              :label="item.label"
+              :value="item.value"
+              >{{ item.label }}</el-option
+            >
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button @click="handleFilter">查询</el-button>
+          <el-button @click="reset()"> 重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="main-box">
+      <div class="treeBox" :style="{ height: treeHeight }">
+        <MOSTY.DepartmentTree
+          width="280px"
+          placeholder="管理部门ID"
+          clearable
+          filterable
+          :isBmId="true"
+          v-model="listQuery.deptId"
+        />
+      </div>
+      <div class="tabBox">
+        <el-table
+          :data="tableData"
+          border
+          style="width: 100%"
+          :height="tableHeight"
+          :key="keyCount"
+        >
+          <el-table-column
+            sortable
+            prop="userName"
+            align="center"
+            label="用户名"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="idEntityCard"
+            align="center"
+            label="身份证号"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="deptName"
+            label="部门"
+          ></el-table-column>
+          <el-table-column
+            sortable
+            prop="inDustRialId"
+            align="center"
+            label="警号"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="mobile"
+            align="center"
+            label="电话号码"
+          ></el-table-column>
+          <el-table-column align="center" sortable label="性别" width="80">
+            <template #default="{ row }">
+              <dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            align="center"
+            label="操作"
+            fixed="right"
+            width="250"
+          >
+            <template #default="{ row }">
+              <el-button @click="updateDict(row)" size="small">编辑</el-button>
+              <el-dropdown
+                style="margin-left: 12px; margin-right: 12px"
+                @command="dropdownAction"
+              >
+                <el-button style="" size="small" @click="handleClick">
+                  更多<el-icon class="el-icon--right">
+                    <arrow-down />
+                  </el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      :command="commandValue('assignRoles', row)"
+                      >分配角色</el-dropdown-item
+                    >
+                    <el-dropdown-item :command="commandValue('restPwd', row)"
+                      >重置密码</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon-color="red"
+                title="确定要删除?"
+                @confirm="delRole(row)"
+              >
+                <template #reference>
+                  <el-button type="danger" size="small">删除</el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye" :style="{ top: tableHeight + 'px' }">
+          <el-pagination
+            class="pagination"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="listQuery.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="listQuery.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+    <div v-if="dialogFormVisible" class="dialog">
+      <div class="head_box">
+        <span class="title">{{ isEdit ? "修改" : "新增" }}</span>
+        <div>
+          <!-- 修改 -->
+          <el-button
+            v-if="isEdit"
+            type="primary"
+            size="small"
+            @click="onSave"
+            :loading="buttonLoading"
+            >修改</el-button
+          >
+          <!-- 新增 -->
+          <el-button v-else type="primary" size="small" @click="onAdd"
+            >保存</el-button
+          >
+          <el-button size="small" @click="closeDialog">关闭</el-button>
+        </div>
+      </div>
+      <el-form
+        class="mosty-from-wrap"
+        ref="elform"
+        :model="dialogForm"
+        :inline="true"
+        label-position="top"
+        :rules="rules"
+      >
+        <el-form-item label="部门:" prop="ssbmdm">
+          <MOSTY.Department
+            :placeholder="dialogForm.ssbm"
+            width="280px"
+            clearable
+            filterable
+            v-model="dialogForm.ssbmdm"
+          />
+        </el-form-item>
+        <el-form-item label="用户昵称:" prop="userName">
+          <MOSTY.Other
+            width="280px"
+            placeholder="请输入用户昵称"
+            clearable
+            v-model="dialogForm.userName"
+          />
+        </el-form-item>
+        <el-form-item label="登录账号:" prop="loginName">
+          <MOSTY.Other
+            width="280px"
+            placeholder="请输入登录账号"
+            clearable
+            v-model="dialogForm.loginName"
+          />
+        </el-form-item>
+        <el-form-item label="密码:" v-if="!isEdit" prop="password">
+          <MOSTY.Other
+            width="280px"
+            placeholder="请输入密码"
+            show-password
+            v-model="dialogForm.password"
+          />
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idEntityCard">
+          <MOSTY.IdentityCard
+            width="280px"
+            v-model="dialogForm.idEntityCard"
+            @change="fn"
+            clearable
+          ></MOSTY.IdentityCard>
+        </el-form-item>
+        <el-form-item label="警号" prop="inDustRialId">
+          <MOSTY.Other
+            width="280px"
+            placeholder="请输入警号"
+            v-model="dialogForm.inDustRialId"
+          />
+        </el-form-item>
+        <el-form-item label="岗位选择">
+          <MOSTY.StationSelect
+            width="300px"
+            clearable
+            filterable
+            v-model="dialogForm.positionId"
+          />
+        </el-form-item>
+
+        <el-form-item label="用户类型:" prop="userType">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.userType"
+            placeholder="请选择用户类型"
+          >
+            <el-option
+              v-for="dict in D_BZ_YHLX"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="虚拟用户:" prop="isVirtualUser">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.isVirtualUser"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="dict in D_BZ_XNYH"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电话号码:" prop="telePhone">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.telePhone"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="移动电话:" prop="mobile">
+          <MOSTY.Phone
+            width="280px"
+            v-model="dialogForm.mobile"
+            maxlength="11"
+            clearable
+          ></MOSTY.Phone>
+        </el-form-item>
+        <el-form-item label="民族:" prop="nation">
+          <MOSTY.PackageSelect
+            width="280px"
+            v-model="dialogForm.nation"
+            dictEnum="NATION"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="性别:" prop="sex">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.sex"
+            placeholder="请选择性别"
+          >
+            <el-option
+              v-for="(item, index) in D_BZ_XB"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文化程度:" prop="whcd">
+          <MOSTY.PackageSelect
+            dictEnum="EDUCATION"
+            width="280px"
+            v-model="dialogForm.whcd"
+            clearable
+            filterable
+          />
+        </el-form-item>
+        <el-form-item label="E-mail" prop="email">
+          <MOSTY.Email
+            v-model="dialogForm.email"
+            width="280px"
+            clearable
+          ></MOSTY.Email>
+        </el-form-item>
+        <el-form-item label="出生日期" prop="birthday">
+          <el-date-picker
+            style="width: 100%"
+            v-model="dialogForm.birthday"
+            type="date"
+            placeholder="出生日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
+        </el-form-item>
+        <el-form-item label="所属模块:" prop="politic">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.politic"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="dict in D_BZ_ZZMM"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="婚姻状况:" prop="marital">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.marital"
+            placeholder="请选择婚姻状况"
+          >
+            <el-option
+              v-for="dict in D_BZ_HYZK"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="人员类别:" prop="type">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.type"
+            placeholder="请选择人员类别"
+          >
+            <el-option
+              v-for="dict in D_BZ_RYLB"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="有效期:" prop="endTime">
+          <el-date-picker
+            style="width: 100%"
+            v-model="dialogForm.endTime"
+            type="datetime"
+            placeholder="请选择有效期"
+            format="YYYY/MM/DD hh:mm:ss"
+            value-format="x"
+          />
+        </el-form-item>
+
+        <el-form-item label="是否融合">
+          <el-select
+            style="width: 100%"
+            v-model="dialogForm.sfrh"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="dict in D_BZ_SF"
+              :label="dict.label"
+              :value="dict.value"
+              :key="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item style="width: 100%" label="备注">
+          <el-input
+            v-model="dialogForm.bz"
+            show-word-limit
+            maxlength="200"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <RolesDialog
+      v-model="roleDialogVisible"
+      :userId="currentUserId"
+      @updateRole="handleFilter"
+    ></RolesDialog>
+  </div>
+</template>
+
+<script setup>
+import * as rule from "@/utils/rules.js";
+import * as MOSTY from "@/components/MyComponents/index";
+import { ElMessage } from "element-plus";
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  onMounted,
+  getCurrentInstance,
+  onUnmounted
+} from "vue";
+import RolesDialog from "./components/roles.vue";
+import {
+  getSysUserList,
+  editSysUser,
+  addUser,
+  getUserInfoToId,
+  resetPassword,
+  deleteSysUser,
+  selectDeptPage,
+  getUserRoleList
+} from "@/api/user-manage";
+const { proxy } = getCurrentInstance();
+const {
+  D_BZ_XB,
+  D_BZ_YHLX,
+  D_BZ_XNYH,
+  D_BZ_RYLB,
+  D_BZ_SF,
+  D_BZ_HYZK,
+  D_BZ_ZZMM
+} = proxy.$dict(
+  "D_BZ_XB",
+  "D_BZ_YHLX",
+  "D_BZ_XNYH",
+  "D_BZ_RYLB",
+  "D_BZ_SF",
+  "D_BZ_HYZK",
+  "D_BZ_ZZMM"
+);
+const searchBox = ref(null); // 搜索盒子
+const keyCount = ref(0); //tabel组件刷新值
+const tableHeight = ref(); // 表格高度
+const treeHeight = ref(""); // 树高度
+const rules = ref({
+  // ...rule.phoneRule({ validator: true }, "mobile"), // 是否必填 是否进行校验
+  // ...rule.phoneRule({ validator: true }, "telePhone"), // 是否必填 是否进行校验 如果props与from里面数据不一致，可以传第二个参数
+  // ...rule.identityCardRule({ validator: true }), //身份证校验
+  // ...rule.addressSelectRule({ require: true }), //地址
+  // ...rule.emailRule({ validator: true }), //邮箱
+  userName: [{ required: true, message: "请填写用户昵称" }],
+  loginName: [{ required: true, message: "请填写登录账号" }],
+  password: [{ required: true, message: "请填写密码" }],
+  // nation: [{ required: true, message: "请选择民族" }],
+  // sex: [{ required: true, message: "请选择性别", trigger: "change" }],
+  // whcd: [{ required: true, message: "请选择文化程度" }],
+  // birthday: [{ required: true, message: "请选择出生日期" }],
+  ssbmdm: [{ required: true, message: "请选择部门" }],
+  inDustRialId: [{ required: true, message: "请填写警号" }],
+  managerOrgId: [{ required: true, message: "请选择岗位" }],
+  positionId: [{ required: true, message: " " }],
+  userType: [{ required: true, message: "请选择用户类型" }],
+  isVirtualUser: [{ required: true, message: "请选择虚拟用户" }],
+  idEntityCard: [{ required: true, message: "请输入身份证号码" }],
+  packageSelect: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  other: [
+    {
+      required: true,
+      message: "自由发挥哦",
+      trigger: "blur"
+    }
+  ]
+});
+const elform = ref(null);
+const buttonLoading = ref(false);
+//查询参数
+const total = ref(0);
+const page = ref(1);
+const size = ref(20);
+const currentRow = ref({});
+const listQuery = ref({
+  page: 1,
+  size: 20,
+  loginName: "",
+  phone: ""
+});
+const isEdit = ref(true);
+const dialogForm = ref({
+  userName: ""
+});
+// 数据相关
+const tableData = ref([]);
+const dialogFormVisible = ref(false);
+const formLabelWidth = "140px";
+// 获取数据的方法
+const getListData = async () => {
+  const params = listQuery.value;
+  params.current = params.page;
+  const res = await getSysUserList(params);
+  tableData.value = res?.records;
+  total.value = Number(res.total);
+};
+getListData();
+const reset = () => {
+  listQuery.value = {
+    page: 1,
+    size: 20,
+    loginName: "",
+    phone: ""
+  };
+  getListData();
+};
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getListData();
+};
+const handleSizeChange = (currentSize) => {
+  listQuery.value.size = currentSize;
+  getListData();
+};
+
+const handleCurrentChange = (currentPage) => {
+  listQuery.value.page = currentPage;
+  getListData();
+};
+
+/**修改字典 */
+const updateDict = async (row) => {
+  getUserInfoToId(row.id).then((res) => {
+    dialogForm.value = { ...res };
+    dialogForm.value.nation = "" + res.nation;
+    dialogForm.value.isVirtualUser = "" + res.isVirtualUser;
+    isEdit.value = true;
+    dialogFormVisible.value = true;
+  });
+};
+//身份证号计算出生日期
+function getBirthdayFromIdCard(idCard) {
+  var birthday = "";
+  if (idCard != null && idCard != "") {
+    if (idCard.length == 15) {
+      birthday = "19" + idCard.substr(6, 6);
+    } else if (idCard.length == 18) {
+      birthday = idCard.substr(6, 8);
+    }
+
+    birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
+  }
+  return birthday;
+}
+function fn(e) {
+  let text = 0;
+  if (e.length >= 17) {
+    dialogForm.value.birthday = getBirthdayFromIdCard(e);
+    text = e[e.length - 2] * 1;
+    if (text % 2 === 0) {
+      dialogForm.value.sex = "2";
+    } else {
+      dialogForm.value.sex = "1";
+    }
+  }
+}
+
+const commandValue = (type, command) => {
+  return {
+    type: type,
+    command: command
+  };
+};
+const dropdownAction = (item) => {
+  const { type, command } = item;
+  if (type === "assignRoles") {
+    assignRoles(command);
+  } else if (type === "restPwd") {
+    restPwd(command);
+  }
+};
+
+const addUserHander = (row) => {
+  isEdit.value = false;
+  dialogForm.value = {};
+  dialogFormVisible.value = true;
+};
+const onSave = () => {
+  elform.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      dialogForm.value.positionName = "";
+      editSysUser({
+        ...dialogForm.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("修改成功");
+          buttonLoading.value = false;
+          handleFilter();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+//新增人员
+const onAdd = () => {
+  elform.value.validate((valid) => {
+    if (valid) {
+      buttonLoading.value = true;
+      addUser({
+        ...dialogForm.value
+      })
+        .then((res) => {
+          dialogFormVisible.value = false;
+          ElMessage.success("新增成功");
+          buttonLoading.value = false;
+          handleFilter();
+        })
+        .finally(() => {
+          buttonLoading.value = false;
+        });
+    } else {
+      ElMessage.error("请填写完必填项!");
+      return false;
+    }
+  });
+};
+
+const delRole = (row) => {
+  deleteSysUser({
+    id: Number(row.id)
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    handleFilter();
+  });
+};
+
+const closeDialog = () => {
+  dialogForm.value = {};
+  dialogFormVisible.value = false;
+};
+
+const moreAction = (e, item) => {};
+
+//分配角色
+const currentUserId = ref("");
+const roleDialogVisible = ref(false);
+const assignRoles = (row) => {
+  roleDialogVisible.value = true;
+  currentUserId.value = row.id;
+};
+
+const restPwd = (row) => {
+  resetPassword({ userId: row.id }).then((res) => {
+    dialogFormVisible.value = false;
+    ElMessage.success("操作成功");
+    handleFilter();
+  });
+};
+const handleClick = (e) => {};
+
+//watch监听路由变化
+watch(roleDialogVisible, (val) => {
+  if (!val) currentUserId.value = "";
+});
+
+watch(
+  () => listQuery.value.deptId,
+  () => {
+    handleFilter();
+  },
+  {
+    immediate: true
+  }
+);
+// 表格高度计算
+const tabHeightFn = () => {
+  tableHeight.value =
+    window.innerHeight - searchBox.value.offsetHeight - 250;
+};
+// 树高度计算
+const treeHeightFn = () => {
+  treeHeight.value = window.innerHeight - searchBox.value.offsetHeight - 213 + "px";
+};
+onMounted(() => {
+  tabHeightFn();
+  treeHeightFn();
+  window.onresize = function () {
+    treeHeightFn();
+    tabHeightFn();
+  };
+  proxy.mittBus.on("mittFn", (data) => {
+    keyCount.value = data;
+  });
+});
+onUnmounted(() => {
+  proxy.mittBus.off("mittFn");
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+// .user-list-page {
+//   .userListDialog {
+//     .el-input__inner {
+//       min-width: 260px;
+//     }
+//   }
+
+//   .table-header-wrap {
+//     margin-bottom: 22px;
+//   }
+
+//   ::v-deep .avatar {
+//     width: 60px;
+//     height: 60px;
+//     border-radius: 50%;
+//   }
+
+//   ::v-deep .el-tag {
+//     margin-right: 6px;
+//   }
+
+//   .pagination {
+//     margin-top: 20px;
+//   }
+
+//   .twoLine {
+//     display: flex;
+//     align-items: flex-start;
+//     flex-flow: wrap;
+
+//     .el-form-item {
+//       width: 380px;
+//     }
+//   }
+// }
+</style>

src/views/backOfficeSystem/systemConfig/user-manage/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="user-manage-container">
+    <el-card class="header">
+      <div>
+        分配角色
+        <el-button type="primary"> 新增</el-button>
+        <el-button type="success"> 查询 </el-button>
+      </div>
+    </el-card>
+    <el-card>
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column label="#" type="index" />
+        <el-table-column prop="username" label="姓名"> </el-table-column>
+        <el-table-column prop="mobile" label="联系方式"> </el-table-column>
+        <el-table-column label="头像" align="center">
+          <template v-slot="{ row }">
+            <el-image
+              class="avatar"
+              :src="row.avatar"
+              :preview-src-list="[row.avatar]"
+            ></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column label="角色">
+          <template #default="{ row }">
+            <div v-if="row.role && row.role.length > 0">
+              <el-tag v-for="item in row.role" :key="item.id" size="mini">{{
+                item.title
+              }}</el-tag>
+            </div>
+            <div v-else>
+              <el-tag size="mini">{{ $t("msg.excel.defaultRole") }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updateTime" label="更新时间">
+          <template #default="{ row }">
+            {{ $filters.dateFilter(row.updateTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="260">
+          <template #default>
+            <el-button type="primary" size="mini">查询</el-button>
+            <el-button type="info" size="mini">角色</el-button>
+            <el-button type="danger" size="mini">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+// 数据相关
+const tableData = ref([
+  {
+    username: "何潇",
+    mobile: "13540652686",
+    avatar: "man",
+    role: [{ title: "超级管理员", id: 1 }],
+    updateTime: "1646472058066"
+  },
+  {
+    username: "何潇",
+    mobile: "13540652686",
+    avatar: "man",
+    role: [{ title: "超级管理员", id: 1 }],
+    updateTime: "1646472047000"
+  },
+  {
+    username: "何潇",
+    mobile: "13540652686",
+    avatar: "man",
+    role: [{ title: "超级管理员", id: 1 }],
+    updateTime: "1646472047002"
+  }
+]);
+const total = ref(0);
+const page = ref(1);
+const size = ref(2);
+// 获取数据的方法
+const getListData = async () => {
+  // const result = await getUserManageList({
+  //   page: page.value,
+  //   size: size.value
+  // })
+  // tableData.value = result.list
+  // total.value = result.total
+};
+getListData();
+
+// 分页相关
+/**
+ * size 改变触发
+ */
+const handleSizeChange = (currentSize) => {
+  size.value = currentSize;
+  getListData();
+};
+
+/**
+ * 页码改变触发
+ */
+const handleCurrentChange = (currentPage) => {
+  page.value = currentPage;
+  getListData();
+};
+</script>
+
+<style lang="scss" scoped>
+.user-manage-container {
+  .header {
+    margin-bottom: 22px;
+    text-align: right;
+  }
+  ::v-deep .avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .el-tag {
+    margin-right: 6px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+  }
+}
+</style>