twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add @pureadmin/table

Browse Source
This commit is contained in:
xiaoxian521 2022-06-22 18:36:08 +08:00
parent bae84cd1ba
commit 1dfc67802a
4 changed files with 702 additions and 609 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package.json
View File

@ -31,9 +31,10 @@
"@logicflow/core": "^1.1.16",
"@logicflow/extension": "^1.1.16",
"@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/shared": "^8.5.0",
"@vueuse/shared": "^8.7.4",
"@wangeditor/editor": "^5.0.1",
"@wangeditor/editor-for-vue": "^5.1.10",
"animate.css": "^4.1.1",
@ -41,10 +42,10 @@
"china-area-data": "^5.0.1",
"cropperjs": "^1.5.12",
"css-color-function": "^1.3.3",
"dayjs": "^1.11.2",
"dayjs": "^1.11.3",
"driver.js": "^0.9.8",
"echarts": "^5.3.2",
"element-plus": "^2.2.2",
"echarts": "^5.3.3",
"element-plus": "^2.2.6",
"element-resize-detector": "^1.2.3",
"js-cookie": "^3.0.1",
"jsbarcode": "^3.11.5",
@ -63,9 +64,9 @@
"rgb-hex": "^4.0.0",
"swiper": "^8.1.4",
"v-contextmenu": "3.0.0",
"vue": "^3.2.36",
"vue": "^3.2.37",
"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-pdf-embed": "^1.1.2",
"vue-router": "^4.0.15",
@ -91,7 +92,7 @@
"@iconify-icons/uil": "^1.2.1",
"@iconify/vue": "^3.2.1",
"@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/js-cookie": "^3.0.1",
"@types/lodash": "^4.14.180",
@ -134,9 +135,9 @@
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"typescript": "^4.6.3",
"unocss": "^0.33.4",
"unocss": "^0.39.3",
"unplugin-vue-define-options": "^0.6.1",
"vite": "^2.9.9",
"vite": "^2.9.12",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^0.0.7",
"vite-svg-loader": "^3.3.0",

925
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

125
src/views/system/role/columns.tsx Normal file
View 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
};
}

240
src/views/system/role/index.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts">
import dayjs from "dayjs";
<script setup lang="tsx">
import { useColumns } from "./columns";
import { getRoleList } from "/@/api/system";
import { PureTable } from "@pureadmin/table";
import { reactive, ref, onMounted } from "vue";
import { type FormInstance } from "element-plus";
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";
defineOptions({
@ -16,11 +16,12 @@ const form = reactive({
code: "",
status: ""
});
let dataList = ref([]);
let pageSize = ref(10);
let totalPage = ref(0);
let loading = ref(true);
let switchLoadMap = ref({});
const { columns } = useColumns();
const formRef = ref<FormInstance>();
@ -44,46 +45,6 @@ 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.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() {
loading.value = true;
let { data } = await getRoleList();
@ -152,142 +113,81 @@ onMounted(() => {
</el-button>
</template>
<template v-slot="{ size, checkList }">
<el-table
<PureTable
border
align="center"
showOverflowTooltip
table-layout="auto"
:size="size"
:data="dataList"
:columns="columns"
:checkList="checkList"
: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="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>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
@click="handleUpdate(row)"
:icon="useRenderIcon('edits')"
>
修改
</el-button>
<el-popconfirm title="是否确认删除?">
<template #reference>
<el-button
class="ml-3"
class="reset-margin"
link
type="primary"
: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"
link
type="primary"
:size="size"
:icon="useRenderIcon('menu')"
>
菜单权限
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
link
type="primary"
:size="size"
:icon="useRenderIcon('database')"
>
数据权限
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table>
:icon="useRenderIcon('delete')"
@click="handleDelete(row)"
>
删除
</el-button>
</template>
</el-popconfirm>
<el-dropdown>
<el-button
class="ml-3"
link
type="primary"
:size="size"
@click="handleUpdate(row)"
:icon="useRenderIcon('more')"
/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
link
type="primary"
:size="size"
:icon="useRenderIcon('menu')"
>
菜单权限
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
link
type="primary"
:size="size"
:icon="useRenderIcon('database')"
>
数据权限
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</PureTable>
<el-pagination
class="flex justify-end mt-4"
:small="size === 'small' ? true : false"