mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
feat: add @pureadmin/table
This commit is contained in:
xiaoxian521
parent
bae84cd1ba
commit
1dfc67802a
21
package.json
21
package.json
@ -31,9 +31,10 @@
|
|||||||
"@logicflow/core": "^1.1.16",
|
"@logicflow/core": "^1.1.16",
|
||||||
"@logicflow/extension": "^1.1.16",
|
"@logicflow/extension": "^1.1.16",
|
||||||
"@pureadmin/components": "^1.0.6",
|
"@pureadmin/components": "^1.0.6",
|
||||||
"@vueuse/core": "^8.5.0",
|
"@pureadmin/table": "^0.0.1",
|
||||||
|
"@vueuse/core": "^8.7.4",
|
||||||
"@vueuse/motion": "^2.0.0-beta.12",
|
"@vueuse/motion": "^2.0.0-beta.12",
|
||||||
"@vueuse/shared": "^8.5.0",
|
"@vueuse/shared": "^8.7.4",
|
||||||
"@wangeditor/editor": "^5.0.1",
|
"@wangeditor/editor": "^5.0.1",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.10",
|
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
@ -41,10 +42,10 @@
|
|||||||
"china-area-data": "^5.0.1",
|
"china-area-data": "^5.0.1",
|
||||||
"cropperjs": "^1.5.12",
|
"cropperjs": "^1.5.12",
|
||||||
"css-color-function": "^1.3.3",
|
"css-color-function": "^1.3.3",
|
||||||
"dayjs": "^1.11.2",
|
"dayjs": "^1.11.3",
|
||||||
"driver.js": "^0.9.8",
|
"driver.js": "^0.9.8",
|
||||||
"echarts": "^5.3.2",
|
"echarts": "^5.3.3",
|
||||||
"element-plus": "^2.2.2",
|
"element-plus": "^2.2.6",
|
||||||
"element-resize-detector": "^1.2.3",
|
"element-resize-detector": "^1.2.3",
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"jsbarcode": "^3.11.5",
|
"jsbarcode": "^3.11.5",
|
||||||
@ -63,9 +64,9 @@
|
|||||||
"rgb-hex": "^4.0.0",
|
"rgb-hex": "^4.0.0",
|
||||||
"swiper": "^8.1.4",
|
"swiper": "^8.1.4",
|
||||||
"v-contextmenu": "3.0.0",
|
"v-contextmenu": "3.0.0",
|
||||||
"vue": "^3.2.36",
|
"vue": "^3.2.37",
|
||||||
"vue-form-create2": "^1.2.8",
|
"vue-form-create2": "^1.2.8",
|
||||||
"vue-i18n": "^9.2.0-beta.35",
|
"vue-i18n": "^9.2.0-beta.36",
|
||||||
"vue-json-pretty": "^2.0.2",
|
"vue-json-pretty": "^2.0.2",
|
||||||
"vue-pdf-embed": "^1.1.2",
|
"vue-pdf-embed": "^1.1.2",
|
||||||
"vue-router": "^4.0.15",
|
"vue-router": "^4.0.15",
|
||||||
@ -91,7 +92,7 @@
|
|||||||
"@iconify-icons/uil": "^1.2.1",
|
"@iconify-icons/uil": "^1.2.1",
|
||||||
"@iconify/vue": "^3.2.1",
|
"@iconify/vue": "^3.2.1",
|
||||||
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
||||||
"@pureadmin/theme": "^2.0.0",
|
"@pureadmin/theme": "^2.4.0",
|
||||||
"@types/element-resize-detector": "1.1.3",
|
"@types/element-resize-detector": "1.1.3",
|
||||||
"@types/js-cookie": "^3.0.1",
|
"@types/js-cookie": "^3.0.1",
|
||||||
"@types/lodash": "^4.14.180",
|
"@types/lodash": "^4.14.180",
|
||||||
@ -134,9 +135,9 @@
|
|||||||
"stylelint-config-standard": "^24.0.0",
|
"stylelint-config-standard": "^24.0.0",
|
||||||
"stylelint-order": "^5.0.0",
|
"stylelint-order": "^5.0.0",
|
||||||
"typescript": "^4.6.3",
|
"typescript": "^4.6.3",
|
||||||
"unocss": "^0.33.4",
|
"unocss": "^0.39.3",
|
||||||
"unplugin-vue-define-options": "^0.6.1",
|
"unplugin-vue-define-options": "^0.6.1",
|
||||||
"vite": "^2.9.9",
|
"vite": "^2.9.12",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-remove-console": "^0.0.7",
|
"vite-plugin-remove-console": "^0.0.7",
|
||||||
"vite-svg-loader": "^3.3.0",
|
"vite-svg-loader": "^3.3.0",
|
||||||
|
|||||||
925
pnpm-lock.yaml
generated
925
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
125
src/views/system/role/columns.tsx
Normal file
125
src/views/system/role/columns.tsx
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { ElMessageBox } from "element-plus";
|
||||||
|
import { Switch, message } from "@pureadmin/components";
|
||||||
|
|
||||||
|
export function useColumns() {
|
||||||
|
const switchLoadMap = ref({});
|
||||||
|
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
type: "selection",
|
||||||
|
width: 55,
|
||||||
|
hide: ({ checkList }) => !checkList.includes("勾选列")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
type: "index",
|
||||||
|
width: 70,
|
||||||
|
hide: ({ checkList }) => !checkList.includes("序号列")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色编号",
|
||||||
|
prop: "id"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色名称",
|
||||||
|
prop: "name"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色标识",
|
||||||
|
prop: "code"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "角色类型",
|
||||||
|
prop: "type",
|
||||||
|
cellRenderer: ({ row, props }) => (
|
||||||
|
<el-tag
|
||||||
|
size={props.size}
|
||||||
|
type={row.type === 1 ? "danger" : ""}
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{row.type === 1 ? "内置" : "自定义"}
|
||||||
|
</el-tag>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "显示顺序",
|
||||||
|
prop: "sort"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
width: 130,
|
||||||
|
cellRenderer: scope => (
|
||||||
|
<Switch
|
||||||
|
size={scope.props.size === "small" ? "small" : "default"}
|
||||||
|
loading={switchLoadMap.value[scope.index]?.loading}
|
||||||
|
v-model:checked={scope.row.status}
|
||||||
|
checkedValue={1}
|
||||||
|
unCheckedValue={0}
|
||||||
|
checked-children="已开启"
|
||||||
|
un-checked-children="已关闭"
|
||||||
|
onChange={() => onChange(scope)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "创建时间",
|
||||||
|
width: "180",
|
||||||
|
prop: "createTime",
|
||||||
|
formatter: ({ createTime }) =>
|
||||||
|
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: "180",
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
function onChange({ row, index }) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`确认要<strong>${
|
||||||
|
row.status === 0 ? "停用" : "启用"
|
||||||
|
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||||
|
row.name
|
||||||
|
}</strong>角色吗?`,
|
||||||
|
"系统提示",
|
||||||
|
{
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
draggable: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="tsx">
|
||||||
import dayjs from "dayjs";
|
import { useColumns } from "./columns";
|
||||||
import { getRoleList } from "/@/api/system";
|
import { getRoleList } from "/@/api/system";
|
||||||
|
import { PureTable } from "@pureadmin/table";
|
||||||
import { reactive, ref, onMounted } from "vue";
|
import { reactive, ref, onMounted } from "vue";
|
||||||
|
import { type FormInstance } from "element-plus";
|
||||||
import { EpTableProBar } from "/@/components/ReTable";
|
import { EpTableProBar } from "/@/components/ReTable";
|
||||||
import { Switch, message } from "@pureadmin/components";
|
|
||||||
import { ElMessageBox, type FormInstance } from "element-plus";
|
|
||||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@ -16,11 +16,12 @@ const form = reactive({
|
|||||||
code: "",
|
code: "",
|
||||||
status: ""
|
status: ""
|
||||||
});
|
});
|
||||||
|
|
||||||
let dataList = ref([]);
|
let dataList = ref([]);
|
||||||
let pageSize = ref(10);
|
let pageSize = ref(10);
|
||||||
let totalPage = ref(0);
|
let totalPage = ref(0);
|
||||||
let loading = ref(true);
|
let loading = ref(true);
|
||||||
let switchLoadMap = ref({});
|
const { columns } = useColumns();
|
||||||
|
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
|
|
||||||
@ -44,46 +45,6 @@ function handleSelectionChange(val) {
|
|||||||
console.log("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.name
|
|
||||||
}</strong>角色吗?`,
|
|
||||||
"系统提示",
|
|
||||||
{
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
draggable: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.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() {
|
async function onSearch() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
let { data } = await getRoleList();
|
let { data } = await getRoleList();
|
||||||
@ -152,142 +113,81 @@ onMounted(() => {
|
|||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot="{ size, checkList }">
|
<template v-slot="{ size, checkList }">
|
||||||
<el-table
|
<PureTable
|
||||||
border
|
border
|
||||||
|
align="center"
|
||||||
|
showOverflowTooltip
|
||||||
table-layout="auto"
|
table-layout="auto"
|
||||||
:size="size"
|
:size="size"
|
||||||
:data="dataList"
|
:data="dataList"
|
||||||
|
:columns="columns"
|
||||||
|
:checkList="checkList"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
>
|
>
|
||||||
<el-table-column
|
<template #operation="{ row }">
|
||||||
v-if="checkList.includes('勾选列')"
|
<el-button
|
||||||
type="selection"
|
class="reset-margin"
|
||||||
align="center"
|
link
|
||||||
width="55"
|
type="primary"
|
||||||
/>
|
:size="size"
|
||||||
<el-table-column
|
@click="handleUpdate(row)"
|
||||||
v-if="checkList.includes('序号列')"
|
:icon="useRenderIcon('edits')"
|
||||||
type="index"
|
>
|
||||||
label="序号"
|
修改
|
||||||
align="center"
|
</el-button>
|
||||||
width="70"
|
<el-popconfirm title="是否确认删除?">
|
||||||
/>
|
<template #reference>
|
||||||
<el-table-column label="角色编号" align="center" prop="id" />
|
|
||||||
<el-table-column label="角色名称" align="center" prop="name" />
|
|
||||||
<el-table-column label="角色标识" align="center" prop="code" />
|
|
||||||
<el-table-column label="角色类型" align="center" prop="type">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag
|
|
||||||
:size="size"
|
|
||||||
:type="scope.row.type === 1 ? 'danger' : ''"
|
|
||||||
effect="plain"
|
|
||||||
>
|
|
||||||
{{ scope.row.type === 1 ? "内置" : "自定义" }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="显示顺序" align="center" prop="sort" />
|
|
||||||
<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"
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
:size="size"
|
|
||||||
@click="handleUpdate(scope.row)"
|
|
||||||
:icon="useRenderIcon('edits')"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</el-button>
|
|
||||||
<el-popconfirm title="是否确认删除?">
|
|
||||||
<template #reference>
|
|
||||||
<el-button
|
|
||||||
class="reset-margin"
|
|
||||||
link
|
|
||||||
type="primary"
|
|
||||||
:size="size"
|
|
||||||
:icon="useRenderIcon('delete')"
|
|
||||||
@click="handleDelete(scope.row)"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popconfirm>
|
|
||||||
<el-dropdown>
|
|
||||||
<el-button
|
<el-button
|
||||||
class="ml-3"
|
class="reset-margin"
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
:size="size"
|
:size="size"
|
||||||
@click="handleUpdate(scope.row)"
|
:icon="useRenderIcon('delete')"
|
||||||
:icon="useRenderIcon('more')"
|
@click="handleDelete(row)"
|
||||||
/>
|
>
|
||||||
<template #dropdown>
|
删除
|
||||||
<el-dropdown-menu>
|
</el-button>
|
||||||
<el-dropdown-item>
|
</template>
|
||||||
<el-button
|
</el-popconfirm>
|
||||||
class="reset-margin !h-20px !text-gray-500"
|
<el-dropdown>
|
||||||
link
|
<el-button
|
||||||
type="primary"
|
class="ml-3"
|
||||||
:size="size"
|
link
|
||||||
:icon="useRenderIcon('menu')"
|
type="primary"
|
||||||
>
|
:size="size"
|
||||||
菜单权限
|
@click="handleUpdate(row)"
|
||||||
</el-button>
|
:icon="useRenderIcon('more')"
|
||||||
</el-dropdown-item>
|
/>
|
||||||
<el-dropdown-item>
|
<template #dropdown>
|
||||||
<el-button
|
<el-dropdown-menu>
|
||||||
class="reset-margin !h-20px !text-gray-500"
|
<el-dropdown-item>
|
||||||
link
|
<el-button
|
||||||
type="primary"
|
class="reset-margin !h-20px !text-gray-500"
|
||||||
:size="size"
|
link
|
||||||
:icon="useRenderIcon('database')"
|
type="primary"
|
||||||
>
|
:size="size"
|
||||||
数据权限
|
:icon="useRenderIcon('menu')"
|
||||||
</el-button>
|
>
|
||||||
</el-dropdown-item>
|
菜单权限
|
||||||
</el-dropdown-menu>
|
</el-button>
|
||||||
</template>
|
</el-dropdown-item>
|
||||||
</el-dropdown>
|
<el-dropdown-item>
|
||||||
</template>
|
<el-button
|
||||||
</el-table-column>
|
class="reset-margin !h-20px !text-gray-500"
|
||||||
</el-table>
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon('database')"
|
||||||
|
>
|
||||||
|
数据权限
|
||||||
|
</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
</PureTable>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
class="flex justify-end mt-4"
|
class="flex justify-end mt-4"
|
||||||
:small="size === 'small' ? true : false"
|
:small="size === 'small' ? true : false"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user