角色管理和访问日志

wujingjing

2024-10-24 da056d7380fff877f01c88769af3fc6d5cad7c00

 src/views/project/yw/systemManage/roleMgr/RoleMgr.vue

@@ -1,6 +1,211 @@
<template>
    <div>RoleMgr</div>
   <HMContainer type="card">
      <template #header>
         <el-form ref="queryFormRef" :inline="true" :model="queryParams">
            <el-form-item label="名称" prop="title">
               <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="名称" clearable @input="debounceQueryTable" />
            </el-form-item>

            <!-- <el-form-item>
               <el-button icon="ele-Plus" @click="openOptDlg()" type="primary"> 添加 </el-button>
            </el-form-item> -->
         </el-form>
      </template>
      <template #main>
         <div class="h-full" ref="chatDragContainerRef">
            <el-table
               v-loading="tableLoading"
               ref="draggableTableRef"
               class="h100"
               border
               :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
               :data="displayTableData"
               highlight-current-row
            >
               <el-table-column prop="title" label="名称" fixed="left" show-overflow-tooltip> </el-table-column>
               <!-- <el-table-column label="角色编码" prop="value" width="90" show-overflow-tooltip> </el-table-column> -->
					

               <!-- <el-table-column label="操作" width="180" fixed="right" show-overflow-tooltip>
                  <template #default="scope">
                     <div class="space-x-3 items-center flex">
                        <el-tooltip effect="dark" content="编辑" placement="top">
                           <i class="ywifont ywicon-bianji !text-[15px] text-blue-400 cursor-pointer" @click="openOptDlg(scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="修改密码" placement="top">
                           <i
                              class="ywifont ywicon-mima !text-[15px] text-blue-400 cursor-pointer font-bold"
                              @click="openOptPasswordDlg(scope.row)"
                           ></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="修改角色" placement="top">
                           <i
                              class="ywifont ywicon-jiaose !text-[15px] text-blue-400 cursor-pointer font-bold"
                              @click="openOptRoleDlg(scope.row)"
                           ></i>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top">
                           <i class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer" @click="deleteCurrentRow(scope.row)"></i>
                        </el-tooltip>
                     </div>
                  </template>
               </el-table-column> -->
            </el-table>
         </div>
      </template>

      <!-- <OptDlg v-model="optDlgIsShow" :item="optDlgMapRow" @insert="insertOpt" @update="updateOpt" :roleList="roleList"></OptDlg>
      <OptPasswordDlg
         v-model="optPasswordDlgIsShow"
         :item="optPasswordDlgMapRow"
         @update="updatePasswordOpt"
         :roleList="roleList"
      ></OptPasswordDlg>
      <OptRoleDlg v-model="optRoleDlgIsShow" :item="optRoleDlgMapRow" @update="updateRoleOpt" :roleList="roleList"></OptRoleDlg> -->

      <!-- <MetricPrompt v-model="infoDlgIsShow" :metricItem="infoDlgMapRow"></MetricPrompt>
      <MetricName v-model="metricNameIsShow" :metricItem="metricNameMapRow"></MetricName> -->
   </HMContainer>
</template>

<script setup lang="ts"></script>
<script setup lang="ts">
import { debounce, getItemMap } from '/@/utils/util';

import { onMounted, ref } from 'vue';
import { usePageDisplay } from '/@/hooks/usePageDisplay';
import { useQueryTable } from '/@/hooks/useQueryTable';
// import { useTableSort } from '/@/hooks/useTableSort';
// import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
import OptDlg from './optDlg/OptDlg.vue';
import OptPasswordDlg from './optDlg/OptPasswordDlg.vue';
import OptRoleDlg from './optDlg/OptRoleDlg.vue';

import * as userApi from '/@/api/auth/user';

import { getRoleInfoListByPost } from '/@/api/auth/role';
import HMContainer from '/@/components/layout/HMContainer.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { computed } from 'vue';

//#region ====================== 表格数据，table init ======================
const tableLoading = ref(false);
const tableData = ref([]);
const isDragStatus = ref(false);
const getTableData = async () => {
   const res = await getRoleInfoListByPost();

   tableData.value = res?.values ?? [];
};
//#endregion

//#region ====================== 表格查询、排序，search form init ======================

const queryParams = ref({
   title: '',
});
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => {
   displayTableData.value = tableData.value;
});
const debounceQueryTable = debounce(handleQueryTable, 400);

//#endregion

//#region ====================== 查询快捷键 ======================
const queryFormRef = ref(null);
const pressEnterSearch = (ev: KeyboardEvent) => {
   if (ev.key === 'Enter') {
      handleQueryTable();
   }
};
usePageDisplay(
   () => {
      queryFormRef.value?.$el?.addEventListener('keypress', pressEnterSearch);
   },
   () => {
      queryFormRef.value?.$el?.removeEventListener('keypress', pressEnterSearch);
   }
);
//#endregion

//#region ====================== 添加修改操作 ======================
const optDlgIsShow = ref(false);
const optDlgMapRow = ref(null);
const openOptDlg = (row?: any) => {
   optDlgMapRow.value = row;
   optDlgIsShow.value = true;
};

const updateOpt = (formValue) => {
   const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
   if (foundIndex > -1) {
      tableData.value[foundIndex] = {
         ...tableData.value[foundIndex],
         ...formValue,
      };
   }
};

const insertOpt = (newData) => {
   tableData.value.push({ ...newData });
};
//#endregion

const deleteCurrentRow = (row: any) => {
   ElMessageBox.confirm(`确定删除用户：【${row.user_name}】?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
   }).then(async () => {
      const res = await userApi.deleteUserInfoByPost({
         user_id: row.user_id,
      });
      const foundIndex = tableData.value.findIndex((item) => item === row);
      foundIndex > -1 && tableData.value.splice(foundIndex, 1);
      ElMessage.success('删除用户成功');
   });
};
//#region ====================== 修改密码操作 ======================
const optPasswordDlgIsShow = ref(false);
const optPasswordDlgMapRow = ref(null);
const openOptPasswordDlg = (row?: any) => {
   optPasswordDlgMapRow.value = row;
   optPasswordDlgIsShow.value = true;
};

const updatePasswordOpt = (formValue) => {
   const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
   if (foundIndex > -1) {
      tableData.value[foundIndex] = {
         ...tableData.value[foundIndex],
         ...formValue,
      };
   }
};

//#endregion

//#region ====================== 修改角色操作 ======================
const optRoleDlgIsShow = ref(false);
const optRoleDlgMapRow = ref(null);
const openOptRoleDlg = (row?: any) => {
   optRoleDlgMapRow.value = row;
   optRoleDlgIsShow.value = true;
};

const updateRoleOpt = (formValue) => {
   const foundIndex = tableData.value.findIndex((item) => item.user_id === formValue.user_id);
   if (foundIndex > -1) {
      tableData.value[foundIndex] = {
         ...tableData.value[foundIndex],
         ...formValue,
      };
   }
};

//#endregion

onMounted(async () => {
   getTableData();
});
</script>
<style scoped lang="scss"></style>