|
|
@@ -5,218 +5,330 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { reactive } from "vue";
|
|
|
-import { $t } from "/@/plugins/i18n";
|
|
|
-import { VxeGridProps } from "vxe-table";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import tree from "./tree.vue";
|
|
|
+import { getUserList } from "/@/api/system";
|
|
|
+import { FormInstance } from "element-plus";
|
|
|
+import { ElMessageBox } from "element-plus";
|
|
|
+import { reactive, ref, onMounted } from "vue";
|
|
|
+import { EpTableProBar } from "/@/components/ReTable";
|
|
|
+import { Switch, message } from "@pureadmin/components";
|
|
|
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
|
|
|
|
|
-const gridOptions = reactive({
|
|
|
- border: true,
|
|
|
- resizable: true,
|
|
|
- keepSource: true,
|
|
|
- height: 578,
|
|
|
- printConfig: {},
|
|
|
- importConfig: {},
|
|
|
- exportConfig: {},
|
|
|
- pagerConfig: {
|
|
|
- perfect: true,
|
|
|
- pageSize: 15
|
|
|
- },
|
|
|
- editConfig: {
|
|
|
- trigger: "click",
|
|
|
- mode: "row",
|
|
|
- showStatus: true
|
|
|
- },
|
|
|
- toolbarConfig: {
|
|
|
- buttons: [
|
|
|
- {
|
|
|
- code: "insert_actived",
|
|
|
- name: $t("buttons.hsadd"),
|
|
|
- status: "perfect",
|
|
|
- icon: "fa fa-plus"
|
|
|
- },
|
|
|
- {
|
|
|
- code: "mark_cancel",
|
|
|
- name: $t("buttons.hsmark"),
|
|
|
- status: "perfect",
|
|
|
- icon: "fa fa-trash-o"
|
|
|
- },
|
|
|
- {
|
|
|
- code: "save",
|
|
|
- name: $t("buttons.hssave"),
|
|
|
- status: "perfect",
|
|
|
- icon: "fa fa-save"
|
|
|
- }
|
|
|
- ],
|
|
|
- perfect: true,
|
|
|
- refresh: {
|
|
|
- icon: "fa fa-refresh",
|
|
|
- iconLoading: "fa fa-spinner fa-spin"
|
|
|
- },
|
|
|
- import: {
|
|
|
- icon: "fa fa-upload"
|
|
|
- },
|
|
|
- export: {
|
|
|
- icon: "fa fa-download"
|
|
|
- },
|
|
|
- print: {
|
|
|
- icon: "fa fa-print"
|
|
|
- },
|
|
|
- zoom: {
|
|
|
- iconIn: "fa fa-arrows-alt",
|
|
|
- iconOut: "fa fa-expand"
|
|
|
- },
|
|
|
- custom: {
|
|
|
- icon: "fa fa-cog"
|
|
|
- }
|
|
|
- },
|
|
|
- proxyConfig: {
|
|
|
- props: {
|
|
|
- result: "result",
|
|
|
- total: "page.total"
|
|
|
- },
|
|
|
- ajax: {
|
|
|
- // 接收 Promise
|
|
|
- query: ({ page }) => {
|
|
|
- return new Promise(resolve => {
|
|
|
- setTimeout(() => {
|
|
|
- const list = [
|
|
|
- {
|
|
|
- id: 10001,
|
|
|
- name: "Test1",
|
|
|
- nickname: "T1",
|
|
|
- role: "Develop",
|
|
|
- sex: "Man",
|
|
|
- age: 28,
|
|
|
- address: "Shenzhen"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10002,
|
|
|
- name: "Test2",
|
|
|
- nickname: "T2",
|
|
|
- role: "Test",
|
|
|
- sex: "Women",
|
|
|
- age: 22,
|
|
|
- address: "Guangzhou"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10003,
|
|
|
- name: "Test3",
|
|
|
- nickname: "T3",
|
|
|
- role: "PM",
|
|
|
- sex: "Man",
|
|
|
- age: 32,
|
|
|
- address: "Shanghai"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10004,
|
|
|
- name: "Test4",
|
|
|
- nickname: "T4",
|
|
|
- role: "Designer",
|
|
|
- sex: "Women ",
|
|
|
- age: 23,
|
|
|
- address: "Shenzhen"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10005,
|
|
|
- name: "Test5",
|
|
|
- nickname: "T5",
|
|
|
- role: "Develop",
|
|
|
- sex: "Women ",
|
|
|
- age: 30,
|
|
|
- address: "Shanghai"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10006,
|
|
|
- name: "Test6",
|
|
|
- nickname: "T6",
|
|
|
- role: "Designer",
|
|
|
- sex: "Women ",
|
|
|
- age: 21,
|
|
|
- address: "Shenzhen"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10007,
|
|
|
- name: "Test7",
|
|
|
- nickname: "T7",
|
|
|
- role: "Test",
|
|
|
- sex: "Man ",
|
|
|
- age: 29,
|
|
|
- address: "vxe-table 从入门到放弃"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10008,
|
|
|
- name: "Test8",
|
|
|
- nickname: "T8",
|
|
|
- role: "Develop",
|
|
|
- sex: "Man ",
|
|
|
- age: 35,
|
|
|
- address: "Shenzhen"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10009,
|
|
|
- name: "Test9",
|
|
|
- nickname: "T9",
|
|
|
- role: "Develop",
|
|
|
- sex: "Man ",
|
|
|
- age: 35,
|
|
|
- address: "Shenzhen"
|
|
|
- },
|
|
|
- {
|
|
|
- id: 100010,
|
|
|
- name: "Test10",
|
|
|
- nickname: "T10",
|
|
|
- role: "Develop",
|
|
|
- sex: "Man ",
|
|
|
- age: 35,
|
|
|
- address: "Guangzhou"
|
|
|
- }
|
|
|
- ];
|
|
|
- resolve({
|
|
|
- page: {
|
|
|
- total: list.length
|
|
|
- },
|
|
|
- result: list.slice(
|
|
|
- (page.currentPage - 1) * page.pageSize,
|
|
|
- page.currentPage * page.pageSize
|
|
|
- )
|
|
|
- });
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- },
|
|
|
- // body 对象： { removeRecords }
|
|
|
- delete: () => {
|
|
|
- return new Promise(resolve => {
|
|
|
- setTimeout(() => {
|
|
|
- resolve({});
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- },
|
|
|
- // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
|
|
|
- save: () => {
|
|
|
- return new Promise(resolve => {
|
|
|
- setTimeout(() => {
|
|
|
- resolve({});
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- columns: [
|
|
|
- { type: "checkbox", width: 50 },
|
|
|
- { type: "seq", width: 60 },
|
|
|
- { field: "name", title: "Name", editRender: { name: "input" } },
|
|
|
- { field: "nickname", title: "Nickname", editRender: { name: "input" } },
|
|
|
- { field: "role", title: "Role", editRender: { name: "input" } },
|
|
|
+const form = reactive({
|
|
|
+ username: "",
|
|
|
+ mobile: "",
|
|
|
+ status: ""
|
|
|
+});
|
|
|
+let dataList = ref([]);
|
|
|
+let pageSize = ref(10);
|
|
|
+let totalPage = ref(0);
|
|
|
+let loading = ref(true);
|
|
|
+let switchLoadMap = ref({});
|
|
|
+
|
|
|
+const formRef = ref<FormInstance>();
|
|
|
+
|
|
|
+function handleUpdate(row) {
|
|
|
+ console.log(row);
|
|
|
+}
|
|
|
+
|
|
|
+function handleDelete(row) {
|
|
|
+ console.log(row);
|
|
|
+}
|
|
|
+
|
|
|
+function handleCurrentChange(val: number) {
|
|
|
+ console.log(`current page: ${val}`);
|
|
|
+}
|
|
|
+
|
|
|
+function handleSizeChange(val: number) {
|
|
|
+ console.log(`${val} items per page`);
|
|
|
+}
|
|
|
+
|
|
|
+function handleSelectionChange(val) {
|
|
|
+ console.log("handleSelectionChange", val);
|
|
|
+}
|
|
|
+
|
|
|
+function onChange(checked, { $index, row }) {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ `确认要<strong>${
|
|
|
+ row.status === 0 ? "停用" : "启用"
|
|
|
+ }</strong><strong style='color:var(--el-color-primary)'>${
|
|
|
+ row.username
|
|
|
+ }</strong>用户吗?`,
|
|
|
+ "系统提示",
|
|
|
{
|
|
|
- field: "address",
|
|
|
- title: "Address",
|
|
|
- showOverflow: true,
|
|
|
- editRender: { name: "input" }
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ draggable: true
|
|
|
}
|
|
|
- ]
|
|
|
-} as VxeGridProps);
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ switchLoadMap.value[$index] = Object.assign(
|
|
|
+ {},
|
|
|
+ switchLoadMap.value[$index],
|
|
|
+ {
|
|
|
+ loading: true
|
|
|
+ }
|
|
|
+ );
|
|
|
+ setTimeout(() => {
|
|
|
+ switchLoadMap.value[$index] = Object.assign(
|
|
|
+ {},
|
|
|
+ switchLoadMap.value[$index],
|
|
|
+ {
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ );
|
|
|
+ message.success("已成功修改用户状态");
|
|
|
+ }, 300);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ row.status === 0 ? (row.status = 1) : (row.status = 0);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function onSearch() {
|
|
|
+ loading.value = true;
|
|
|
+ let { data } = await getUserList();
|
|
|
+ dataList.value = data.list;
|
|
|
+ totalPage.value = data.total;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 500);
|
|
|
+}
|
|
|
+
|
|
|
+const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ onSearch();
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ onSearch();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <vxe-grid v-bind="gridOptions" />
|
|
|
+ <div class="main flex">
|
|
|
+ <tree />
|
|
|
+ <div class="flex-1 ml-4">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :inline="true"
|
|
|
+ :model="form"
|
|
|
+ class="bg-white w-99/100 pl-8 pt-4"
|
|
|
+ >
|
|
|
+ <el-form-item label="用户名称：" prop="username">
|
|
|
+ <el-input
|
|
|
+ v-model="form.username"
|
|
|
+ placeholder="请输入用户名称"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号码：" prop="mobile">
|
|
|
+ <el-input
|
|
|
+ v-model="form.mobile"
|
|
|
+ placeholder="请输入手机号码"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态：" prop="status">
|
|
|
+ <el-select v-model="form.status" placeholder="请选择" clearable>
|
|
|
+ <el-option label="已开启" value="1" />
|
|
|
+ <el-option label="已关闭" value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="useRenderIcon('search')"
|
|
|
+ :loading="loading"
|
|
|
+ @click="onSearch"
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ :icon="useRenderIcon('refresh')"
|
|
|
+ @click="resetForm(formRef)"
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <EpTableProBar
|
|
|
+ title="用户管理"
|
|
|
+ :loading="loading"
|
|
|
+ :dataList="dataList"
|
|
|
+ @refresh="onSearch"
|
|
|
+ >
|
|
|
+ <template #buttons>
|
|
|
+ <el-button type="primary" :icon="useRenderIcon('add')">
|
|
|
+ 新增用户
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-slot="{ size, checkList }">
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ table-layout="auto"
|
|
|
+ :size="size"
|
|
|
+ :data="dataList"
|
|
|
+ :header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-if="checkList.includes('勾选列')"
|
|
|
+ type="selection"
|
|
|
+ align="center"
|
|
|
+ width="55"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-if="checkList.includes('序号列')"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ align="center"
|
|
|
+ width="70"
|
|
|
+ />
|
|
|
+ <el-table-column label="用户编号" align="center" prop="id" />
|
|
|
+ <el-table-column label="用户名称" align="center" prop="username" />
|
|
|
+ <el-table-column label="用户昵称" align="center" prop="nickname" />
|
|
|
+ <el-table-column label="性别" align="center" prop="sex">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag
|
|
|
+ :size="size"
|
|
|
+ :type="scope.row.sex === 1 ? 'danger' : ''"
|
|
|
+ effect="plain"
|
|
|
+ >
|
|
|
+ {{ scope.row.sex === 1 ? "女" : "男" }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="部门"
|
|
|
+ align="center"
|
|
|
+ prop="dept"
|
|
|
+ :formatter="
|
|
|
+ ({ dept }) => {
|
|
|
+ return dept.name;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <el-table-column label="手机号码" align="center" prop="mobile" />
|
|
|
+ <el-table-column
|
|
|
+ label="状态"
|
|
|
+ align="center"
|
|
|
+ width="130"
|
|
|
+ prop="status"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <Switch
|
|
|
+ :size="size === 'small' ? 'small' : 'default'"
|
|
|
+ :loading="switchLoadMap[scope.$index]?.loading"
|
|
|
+ v-model:checked="scope.row.status"
|
|
|
+ :checkedValue="1"
|
|
|
+ :unCheckedValue="0"
|
|
|
+ checked-children="已开启"
|
|
|
+ un-checked-children="已关闭"
|
|
|
+ @change="checked => onChange(checked, scope)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="创建时间"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="createTime"
|
|
|
+ :formatter="
|
|
|
+ ({ createTime }) => {
|
|
|
+ return dayjs(createTime).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ width="180"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ class="reset-margin"
|
|
|
+ type="text"
|
|
|
+ :size="size"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ :icon="useRenderIcon('edits')"
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-popconfirm title="是否确认删除?">
|
|
|
+ <template #reference>
|
|
|
+ <el-button
|
|
|
+ class="reset-margin"
|
|
|
+ type="text"
|
|
|
+ :size="size"
|
|
|
+ :icon="useRenderIcon('delete')"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button
|
|
|
+ class="ml-3"
|
|
|
+ type="text"
|
|
|
+ :size="size"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ :icon="useRenderIcon('more')"
|
|
|
+ />
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ class="reset-margin !h-20px !text-gray-500"
|
|
|
+ type="text"
|
|
|
+ :size="size"
|
|
|
+ :icon="useRenderIcon('password')"
|
|
|
+ >
|
|
|
+ 重置密码
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ class="reset-margin !h-20px !text-gray-500"
|
|
|
+ type="text"
|
|
|
+ :size="size"
|
|
|
+ :icon="useRenderIcon('role')"
|
|
|
+ >
|
|
|
+ 分配角色
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ class="flex justify-end mt-4"
|
|
|
+ :small="size === 'small' ? true : false"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :background="true"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="totalPage"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </EpTableProBar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+:deep(.el-dropdown-menu__item i) {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|
xiaoxian521