mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-04 07:27:41 +08:00
refactor: 完全移除内置 vxe-table 支持
This commit is contained in:
xiaoxian521
parent
95940312a9
commit
3629a66535
@ -16,8 +16,6 @@ const include = [
|
||||
"echarts",
|
||||
"intro.js",
|
||||
"vue-i18n",
|
||||
"xe-utils",
|
||||
"vxe-table",
|
||||
"js-cookie",
|
||||
"lodash-es",
|
||||
"cropperjs",
|
||||
|
||||
@ -28,7 +28,6 @@ menus:
|
||||
hsempty: Empty Page
|
||||
hssysManagement: System Manage
|
||||
hsUser: User Manage
|
||||
hsDict: Dict Manage
|
||||
hsRole: Role Manage
|
||||
hsDept: Dept Manage
|
||||
hseditor: Editor
|
||||
|
||||
@ -28,7 +28,6 @@ menus:
|
||||
hsempty: 无Layout页
|
||||
hssysManagement: 系统管理
|
||||
hsUser: 用户管理
|
||||
hsDict: 字典管理
|
||||
hsRole: 角色管理
|
||||
hsDept: 部门管理
|
||||
hseditor: 编辑器
|
||||
|
||||
@ -42,17 +42,6 @@ const systemRouter = {
|
||||
title: "menus.hsDept",
|
||||
roles: ["admin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/system/dict",
|
||||
component: "/system/dict/index",
|
||||
name: "Dict",
|
||||
meta: {
|
||||
icon: "dict",
|
||||
title: "menus.hsDict",
|
||||
keepAlive: true,
|
||||
roles: ["admin"]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -78,8 +78,6 @@
|
||||
"vue-virtual-scroller": "^2.0.0-alpha.1",
|
||||
"vue3-danmaku": "^1.1.0",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "^4.3.6",
|
||||
"xe-utils": "^3.5.7",
|
||||
"xgplayer": "^2.32.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
@ -115,7 +113,6 @@
|
||||
"eslint": "^8.8.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^9.7.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "11.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
|
||||
6142
pnpm-lock.yaml
generated
6142
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -20,7 +20,6 @@ import Ppt from "@iconify-icons/ri/file-ppt-2-line";
|
||||
import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
|
||||
import FlUser from "@iconify-icons/ri/admin-line";
|
||||
import Role from "@iconify-icons/ri/admin-fill";
|
||||
import Dict from "@iconify-icons/ri/git-repository-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
@ -40,7 +39,6 @@ addIcon("ppt", Ppt);
|
||||
addIcon("checkboxCircleLine", CheckboxCircleLine);
|
||||
addIcon("flUser", FlUser);
|
||||
addIcon("role", Role);
|
||||
addIcon("dict", Dict);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("dept", Dept);
|
||||
addIcon("lollipop", Lollipop);
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
import "animate.css";
|
||||
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
|
||||
import "@/components/ReIcon/src/offlineIcon";
|
||||
// vxe-table的所有icon不支持component模式，间接依赖了font-awesome
|
||||
import "font-awesome/css/font-awesome.min.css";
|
||||
import { setType } from "./types";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useLayout } from "./hooks/useLayout";
|
||||
|
||||
@ -2,19 +2,14 @@
|
||||
* @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
|
||||
*/
|
||||
|
||||
import { EpThemeColor } from "../../../public/serverConfig.json";
|
||||
|
||||
type MultipleScopeVarsItem = {
|
||||
scopeName: string;
|
||||
varsContent: string;
|
||||
};
|
||||
|
||||
/** 将vxe默认主题色和ep默认主题色保持一致 */
|
||||
const vxeColor = EpThemeColor;
|
||||
/** 预设主题色 */
|
||||
const themeColors = {
|
||||
default: {
|
||||
vxeColor,
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#001529",
|
||||
menuHover: "#4091f7",
|
||||
@ -26,7 +21,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
light: {
|
||||
vxeColor,
|
||||
subMenuActiveText: "#409eff",
|
||||
menuBg: "#fff",
|
||||
menuHover: "#e0ebf6",
|
||||
@ -38,7 +32,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
dusk: {
|
||||
vxeColor: "#f5222d",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2a0608",
|
||||
menuHover: "#e13c39",
|
||||
@ -50,7 +43,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#e13c39"
|
||||
},
|
||||
volcano: {
|
||||
vxeColor: "#fa541c",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2b0e05",
|
||||
menuHover: "#e85f33",
|
||||
@ -62,7 +54,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#e85f33"
|
||||
},
|
||||
yellow: {
|
||||
vxeColor: "#fadb14",
|
||||
subMenuActiveText: "#d25f00",
|
||||
menuBg: "#2b2503",
|
||||
menuHover: "#f6da4d",
|
||||
@ -74,7 +65,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#f6da4d"
|
||||
},
|
||||
mingQing: {
|
||||
vxeColor: "#13c2c2",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#032121",
|
||||
menuHover: "#59bfc1",
|
||||
@ -86,7 +76,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#59bfc1"
|
||||
},
|
||||
auroraGreen: {
|
||||
vxeColor: "#52c41a",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#0b1e15",
|
||||
menuHover: "#60ac80",
|
||||
@ -98,7 +87,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#60ac80"
|
||||
},
|
||||
pink: {
|
||||
vxeColor: "#eb2f96",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#28081a",
|
||||
menuHover: "#d84493",
|
||||
@ -110,7 +98,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#d84493"
|
||||
},
|
||||
saucePurple: {
|
||||
vxeColor: "#722ed1",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#130824",
|
||||
menuHover: "#693ac9",
|
||||
@ -132,7 +119,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
|
||||
result.push({
|
||||
scopeName: `layout-theme-${key}`,
|
||||
varsContent: `
|
||||
$vxe-primary-color: ${themeColors[key].vxeColor} !default;
|
||||
$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
|
||||
$menuBg: ${themeColors[key].menuBg} !default;
|
||||
$menuHover: ${themeColors[key].menuHover} !default;
|
||||
|
||||
@ -7,7 +7,6 @@ import { getServerConfig } from "./config";
|
||||
import { createApp, Directive } from "vue";
|
||||
import { MotionPlugin } from "@vueuse/motion";
|
||||
import { useEcharts } from "@/plugins/echarts";
|
||||
import { useTable } from "@/plugins/vxe-table";
|
||||
import { injectResponsiveStorage } from "@/utils/responsive";
|
||||
|
||||
import Table from "@pureadmin/table";
|
||||
@ -55,7 +54,6 @@ getServerConfig(app).then(async config => {
|
||||
.use(ElementPlus)
|
||||
.use(Table)
|
||||
.use(PureDescriptions)
|
||||
.use(useTable)
|
||||
.use(useEcharts);
|
||||
app.mount("#app");
|
||||
});
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
@import "vxe-table/styles/variable.scss";
|
||||
@import "vxe-table/styles/modules.scss";
|
||||
|
||||
i {
|
||||
border-color: initial;
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
import "xe-utils";
|
||||
import "./index.scss";
|
||||
import XEUtils from "xe-utils";
|
||||
import { App, unref } from "vue";
|
||||
import { i18n } from "@/plugins/i18n";
|
||||
import zh from "vxe-table/lib/locale/lang/zh-CN";
|
||||
import en from "vxe-table/lib/locale/lang/en-US";
|
||||
|
||||
import {
|
||||
// 核心
|
||||
VXETable,
|
||||
// 表格功能
|
||||
Icon,
|
||||
Filter,
|
||||
Edit,
|
||||
Menu,
|
||||
Export,
|
||||
Keyboard,
|
||||
Validator,
|
||||
// 可选组件
|
||||
Column,
|
||||
Colgroup,
|
||||
Grid,
|
||||
Tooltip,
|
||||
Toolbar,
|
||||
Pager,
|
||||
Form,
|
||||
FormItem,
|
||||
FormGather,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Switch,
|
||||
Input,
|
||||
Select,
|
||||
Optgroup,
|
||||
Option,
|
||||
Textarea,
|
||||
Button,
|
||||
Modal,
|
||||
List,
|
||||
Pulldown,
|
||||
// 表格
|
||||
Table
|
||||
} from "vxe-table";
|
||||
|
||||
// 全局默认参数
|
||||
VXETable.setup({
|
||||
size: "medium",
|
||||
version: 0,
|
||||
zIndex: 1002,
|
||||
table: {
|
||||
// 自动监听父元素的变化去重新计算表格
|
||||
autoResize: true,
|
||||
// 鼠标移到行是否要高亮显示
|
||||
highlightHoverRow: true
|
||||
},
|
||||
input: {
|
||||
clearable: true
|
||||
},
|
||||
i18n: (key, args) => {
|
||||
return unref(i18n.global.locale) === "zh"
|
||||
? XEUtils.toFormatString(XEUtils.get(zh, key), args)
|
||||
: XEUtils.toFormatString(XEUtils.get(en, key), args);
|
||||
},
|
||||
translate(key) {
|
||||
const NAMESPACED = ["el.", "buttons."];
|
||||
if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
|
||||
return i18n.global.t.call(i18n.global.locale, key);
|
||||
}
|
||||
return key;
|
||||
}
|
||||
});
|
||||
|
||||
export function useTable(app: App) {
|
||||
app
|
||||
.use(Icon)
|
||||
.use(Filter)
|
||||
.use(Edit)
|
||||
.use(Menu)
|
||||
.use(Export)
|
||||
.use(Keyboard)
|
||||
.use(Validator)
|
||||
// 可选组件
|
||||
.use(Column)
|
||||
.use(Colgroup)
|
||||
.use(Grid)
|
||||
.use(Tooltip)
|
||||
.use(Toolbar)
|
||||
.use(Pager)
|
||||
.use(Form)
|
||||
.use(FormItem)
|
||||
.use(FormGather)
|
||||
.use(Checkbox)
|
||||
.use(CheckboxGroup)
|
||||
.use(Radio)
|
||||
.use(RadioGroup)
|
||||
.use(RadioButton)
|
||||
.use(Switch)
|
||||
.use(Input)
|
||||
.use(Select)
|
||||
.use(Optgroup)
|
||||
.use(Option)
|
||||
.use(Textarea)
|
||||
.use(Button)
|
||||
.use(Modal)
|
||||
.use(List)
|
||||
.use(Pulldown)
|
||||
// 安装表格
|
||||
.use(Table);
|
||||
}
|
||||
@ -41,97 +41,6 @@ html.dark {
|
||||
}
|
||||
}
|
||||
|
||||
/* vxe-table */
|
||||
.vxe-table--header-wrapper,
|
||||
.vxe-table--body-wrapper {
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-table--render-default.border--full .vxe-header--column,
|
||||
.vxe-table--render-default.border--full .vxe-body--column,
|
||||
.vxe-table--render-default.border--full .vxe-footer--column {
|
||||
background-image: linear-gradient(
|
||||
var(--el-border-color-lighter),
|
||||
var(--el-border-color-lighter)
|
||||
),
|
||||
linear-gradient(
|
||||
var(--el-border-color-lighter),
|
||||
var(--el-border-color-lighter)
|
||||
);
|
||||
}
|
||||
|
||||
/* 表头 */
|
||||
.vxe-table--header-wrapper {
|
||||
background: #262727 !important;
|
||||
}
|
||||
|
||||
.vxe-table--render-wrapper,
|
||||
.vxe-table--main-wrapper {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vxe-pager.is--perfect,
|
||||
.vxe-table--render-default .vxe-table--border-line {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.vxe-table--header-border-line {
|
||||
border-bottom: 1px solid var(--el-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
.vxe-body--row.row--hover,
|
||||
.vxe-pager {
|
||||
background-color: #262727;
|
||||
}
|
||||
|
||||
.vxe-input--inner,
|
||||
.vxe-pager .vxe-pager--jump-prev,
|
||||
.vxe-pager .vxe-pager--prev-btn,
|
||||
.vxe-pager .vxe-pager--next-btn,
|
||||
.vxe-pager .vxe-pager--jump-next,
|
||||
.vxe-pager .vxe-pager--num-btn,
|
||||
.vxe-pager .vxe-pager--jump .vxe-pager--goto {
|
||||
background-color: transparent;
|
||||
color: var(--el-text-color-primary);
|
||||
// outline: none !important;
|
||||
}
|
||||
|
||||
.vxe-select-option--wrapper {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-select-option:not(.is--disabled).is--hover {
|
||||
background: var(--el-color-primary-light-6) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--wrapper.type--modal .vxe-modal--box,
|
||||
.vxe-modal--wrapper.type--alert .vxe-modal--box,
|
||||
.vxe-modal--wrapper.type--confirm .vxe-modal--box,
|
||||
.vxe-form {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--box,
|
||||
.vxe-modal--header {
|
||||
border: none;
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--title,
|
||||
.vxe-button--content,
|
||||
.vxe-modal--header-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.vxe-button.type--button:hover {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.vxe-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 项目配置面板 */
|
||||
.right-panel-items {
|
||||
.el-divider__text {
|
||||
|
||||
@ -19,9 +19,3 @@
|
||||
.html-weakness {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
/* 重置 vxe-table 样式 */
|
||||
.vxe-button.type--button.theme--primary:hover,
|
||||
.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Print from "@/utils/print";
|
||||
import { reactive, ref } from "vue";
|
||||
import { VxeTablePropTypes } from "vxe-table";
|
||||
import Line from "../welcome/components/Line.vue";
|
||||
|
||||
defineOptions({
|
||||
@ -14,43 +13,6 @@ interface User {
|
||||
address: string;
|
||||
}
|
||||
|
||||
const demo1 = reactive({
|
||||
tableData: [
|
||||
{
|
||||
id: 10001,
|
||||
name: "Test1",
|
||||
role: "Develop",
|
||||
sex: "Man",
|
||||
age: 28,
|
||||
address: "test abc"
|
||||
},
|
||||
{
|
||||
id: 10002,
|
||||
name: "Test2",
|
||||
role: "Test",
|
||||
sex: "Women",
|
||||
age: 22,
|
||||
address: "Guangzhou"
|
||||
},
|
||||
{
|
||||
id: 10003,
|
||||
name: "Test3",
|
||||
role: "PM",
|
||||
sex: "Man",
|
||||
age: 32,
|
||||
address: "Shanghai"
|
||||
},
|
||||
{
|
||||
id: 10004,
|
||||
name: "Test4",
|
||||
role: "Designer",
|
||||
sex: "Women",
|
||||
age: 24,
|
||||
address: "Shanghai"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const value = ref("1");
|
||||
|
||||
const options = [
|
||||
@ -59,11 +21,6 @@ const options = [
|
||||
el: ".el-table",
|
||||
label: "Element-Plus Table"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
el: ".vxe-table",
|
||||
label: "Vxe Table"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
el: ".echart",
|
||||
@ -81,38 +38,6 @@ function onPrint() {
|
||||
Print(el).toPrint;
|
||||
}
|
||||
|
||||
const headerCellStyle: VxeTablePropTypes.HeaderCellStyle = ({ column }) => {
|
||||
if (column.property === "name") {
|
||||
return {
|
||||
backgroundColor: "#f60",
|
||||
color: "#ffffff"
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const rowStyle: VxeTablePropTypes.RowStyle = ({ rowIndex }) => {
|
||||
if ([2, 3, 5].includes(rowIndex)) {
|
||||
return {
|
||||
backgroundColor: "red",
|
||||
color: "#ffffff"
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
|
||||
if (column.property === "sex") {
|
||||
if (row.sex >= "1") {
|
||||
return {
|
||||
backgroundColor: "#187"
|
||||
};
|
||||
} else if (row.age === 26) {
|
||||
return {
|
||||
backgroundColor: "#2db7f5"
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
|
||||
if (rowIndex === 1) {
|
||||
return "warning-row";
|
||||
@ -205,45 +130,6 @@ const tableData: User[] = [
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="22"
|
||||
:sm="22"
|
||||
:md="11"
|
||||
:lg="11"
|
||||
:xl="11"
|
||||
style="margin: 10px; border: 0.01rem solid var(--el-color-primary)"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Vxe Table</p>
|
||||
<vxe-table
|
||||
class="vxe-table"
|
||||
border
|
||||
style="margin: 40px auto"
|
||||
:header-cell-style="headerCellStyle"
|
||||
:row-style="rowStyle"
|
||||
:cell-style="cellStyle"
|
||||
:data="demo1.tableData"
|
||||
>
|
||||
<vxe-column type="seq" width="60" />
|
||||
<vxe-column field="name" title="Name" />
|
||||
<vxe-column field="sex" title="Sex" />
|
||||
<vxe-column field="age" title="Age" />
|
||||
<vxe-column field="attr1" title="Attr1" />
|
||||
<vxe-column field="address" title="Address" show-overflow />
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="22"
|
||||
:sm="22"
|
||||
|
||||
@ -1,176 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import { type Direction } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
|
||||
interface Props {
|
||||
drawer: boolean;
|
||||
drawTitle?: string;
|
||||
direction?: Direction;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
drawer: false,
|
||||
drawTitle: "",
|
||||
direction: "rtl"
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "handleClose"): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const xTable = ref({} as VxeTableInstance);
|
||||
|
||||
const configData = reactive({
|
||||
tableData: [
|
||||
{
|
||||
name: "禁用",
|
||||
dataval: "0"
|
||||
},
|
||||
{
|
||||
name: "启用",
|
||||
dataval: "1"
|
||||
}
|
||||
],
|
||||
isAllChecked: false,
|
||||
isIndeterminate: false,
|
||||
selectRecords: [] as any[],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
});
|
||||
|
||||
// 抽屉关闭
|
||||
function handleClose() {
|
||||
configData.isAllChecked = false;
|
||||
configData.isIndeterminate = false;
|
||||
emit("handleClose");
|
||||
}
|
||||
|
||||
function editConfig(row) {
|
||||
console.log("editConfig", row);
|
||||
}
|
||||
|
||||
function delConfig(row) {
|
||||
console.log("delConfig", row);
|
||||
}
|
||||
|
||||
const changeAllEvent = () => {
|
||||
setTimeout(() => {
|
||||
console.log(xTable);
|
||||
}, 1000);
|
||||
const $table = xTable.value;
|
||||
$table.setAllCheckboxRow(configData.isAllChecked);
|
||||
configData.selectRecords = $table.getCheckboxRecords();
|
||||
};
|
||||
|
||||
const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
const $table = xTable.value;
|
||||
configData.isAllChecked = $table.isAllCheckboxChecked();
|
||||
configData.isIndeterminate = $table.isAllCheckboxIndeterminate();
|
||||
configData.selectRecords = records;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="config">
|
||||
<el-drawer
|
||||
:model-value="drawer"
|
||||
:direction="direction"
|
||||
:before-close="handleClose"
|
||||
destroy-on-close
|
||||
size="680px"
|
||||
>
|
||||
<template #header>
|
||||
<span class="text-black dark:text-white">{{ drawTitle }}</span>
|
||||
</template>
|
||||
<el-divider />
|
||||
<!-- 列表 -->
|
||||
<div class="p-2">
|
||||
<vxe-table
|
||||
ref="xTable"
|
||||
border
|
||||
:data="configData.tableData"
|
||||
@checkbox-change="checkboxChangeEvent"
|
||||
@checkbox-all="checkboxChangeEvent"
|
||||
>
|
||||
<vxe-table-column type="checkbox" width="60" />
|
||||
<vxe-table-column field="name" title="名称" />
|
||||
<vxe-table-column field="dataval" title="数据值" />
|
||||
<vxe-table-column title="操作" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="editConfig(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="delConfig(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
<vxe-pager
|
||||
perfect
|
||||
v-model:current-page="configData.tablePage.currentPage"
|
||||
v-model:page-size="configData.tablePage.pageSize"
|
||||
:total="configData.tablePage.total"
|
||||
:layouts="[
|
||||
'PrevJump',
|
||||
'PrevPage',
|
||||
'Number',
|
||||
'NextPage',
|
||||
'NextJump',
|
||||
'Sizes',
|
||||
'FullJump',
|
||||
'Total'
|
||||
]"
|
||||
>
|
||||
<template #left>
|
||||
<span class="absolute left-3 flex items-center">
|
||||
<vxe-checkbox
|
||||
v-model="configData.isAllChecked"
|
||||
:indeterminate="configData.isIndeterminate"
|
||||
@change="changeAllEvent"
|
||||
/>
|
||||
<p>已选中{{ configData.selectRecords.length }}条</p>
|
||||
<el-button link type="danger" class="ml-1">
|
||||
{{ t("buttons.hsdelete") }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</vxe-pager>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-drawer__header) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 13px 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,386 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import XEUtils from "xe-utils";
|
||||
import Config from "./config.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { reactive, ref, unref, nextTick } from "vue";
|
||||
import { useCopyToClipboard } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
VXETable,
|
||||
type TablePublicMethods,
|
||||
type VxeTableInstance,
|
||||
type VxeFormPropTypes,
|
||||
type VxeTableEvents,
|
||||
type FormMethods
|
||||
} from "vxe-table";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
|
||||
type onEditNRow = {
|
||||
name: string;
|
||||
model: string;
|
||||
};
|
||||
|
||||
defineOptions({
|
||||
name: "Dict"
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const dictData = reactive({
|
||||
submitLoading: false,
|
||||
showEdit: false,
|
||||
selectRow: null,
|
||||
filterName: "",
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
name: "状态",
|
||||
model: "",
|
||||
children: [
|
||||
{
|
||||
id: "1-1",
|
||||
name: "服务状态",
|
||||
model: "serviceStatus"
|
||||
},
|
||||
{
|
||||
id: "1-2",
|
||||
name: "在线状态",
|
||||
model: "onlienStatus"
|
||||
}
|
||||
]
|
||||
},
|
||||
{ id: 2, name: "操作系统", model: "operatingSystem" }
|
||||
],
|
||||
formData: {
|
||||
name: "",
|
||||
model: ""
|
||||
},
|
||||
formItems: [
|
||||
{
|
||||
field: "name",
|
||||
title: "字典名称",
|
||||
span: 24,
|
||||
itemRender: {
|
||||
name: "$input",
|
||||
props: { placeholder: "请输入字典名称" }
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "model",
|
||||
title: "字典类型",
|
||||
span: 24,
|
||||
itemRender: {
|
||||
name: "$input",
|
||||
props: {
|
||||
placeholder: "请输入字典类型",
|
||||
//这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
align: "right",
|
||||
span: 24,
|
||||
itemRender: {
|
||||
name: "$buttons",
|
||||
children: [
|
||||
{ props: { type: "submit", content: "提交", status: "primary" } },
|
||||
{ props: { type: "reset", content: "重置" } }
|
||||
]
|
||||
}
|
||||
}
|
||||
] as VxeFormPropTypes.Items
|
||||
});
|
||||
|
||||
const originData = clone(dictData.tableData, true);
|
||||
|
||||
const xTree = ref<TablePublicMethods>();
|
||||
const xForm = ref<FormMethods>();
|
||||
|
||||
const handleSearch = () => {
|
||||
const filterName = XEUtils.toValueString(dictData.filterName).trim();
|
||||
|
||||
if (filterName) {
|
||||
const options = { children: "children" };
|
||||
const searchProps = ["name"];
|
||||
|
||||
dictData.tableData = XEUtils.searchTree(
|
||||
originData,
|
||||
item =>
|
||||
searchProps.some(
|
||||
key => XEUtils.toValueString(item[key]).indexOf(filterName) > -1
|
||||
),
|
||||
options
|
||||
);
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
nextTick(() => {
|
||||
const $table = xTree.value;
|
||||
$table.setAllTreeExpand(true);
|
||||
});
|
||||
} else {
|
||||
dictData.tableData = originData;
|
||||
}
|
||||
};
|
||||
|
||||
// 创建一个防防抖函数，调用频率间隔 100 毫秒
|
||||
const searchEvent = XEUtils.debounce(
|
||||
function () {
|
||||
handleSearch();
|
||||
},
|
||||
100,
|
||||
{ leading: false, trailing: true }
|
||||
);
|
||||
|
||||
const confirmEvent = async () => {
|
||||
const type = await VXETable.modal.confirm("您确定要删除吗？");
|
||||
(await type) === "confirm" &&
|
||||
VXETable.modal.message({
|
||||
content: "测试数据，不可删除",
|
||||
status: "error"
|
||||
});
|
||||
};
|
||||
|
||||
function commonFn(value, disabled) {
|
||||
dictData.selectRow = value;
|
||||
dictData.showEdit = true;
|
||||
dictData.formItems[1].itemRender.props.disabled = disabled;
|
||||
}
|
||||
|
||||
// 新增
|
||||
function onAdd() {
|
||||
commonFn(null, false);
|
||||
}
|
||||
|
||||
// 新增子类型
|
||||
function onAddChild(row?: object) {
|
||||
console.log("onAddChild", row);
|
||||
commonFn(null, false);
|
||||
}
|
||||
|
||||
// 编辑
|
||||
function onEdit(row?: onEditNRow) {
|
||||
dictData.formData = {
|
||||
name: row.name,
|
||||
model: row.model ? row.model : "暂无字典类型"
|
||||
};
|
||||
commonFn(row, true);
|
||||
// VXETable.modal.message({
|
||||
// content: "测试数据，不可编辑",
|
||||
// status: "error"
|
||||
// });
|
||||
}
|
||||
|
||||
// 拷贝当前列表项的数据（字典类型）
|
||||
const { clipboardValue } = useCopyToClipboard();
|
||||
const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
|
||||
clipboardValue.value = unref(row).model;
|
||||
};
|
||||
|
||||
const xTable = ref({} as VxeTableInstance);
|
||||
|
||||
const submitEvent = () => {
|
||||
dictData.submitLoading = true;
|
||||
setTimeout(() => {
|
||||
const $table = xTable.value;
|
||||
dictData.submitLoading = false;
|
||||
dictData.showEdit = false;
|
||||
if (dictData.selectRow) {
|
||||
VXETable.modal.message({ content: "保存成功", status: "success" });
|
||||
Object.assign(dictData.selectRow, dictData.formData);
|
||||
} else {
|
||||
VXETable.modal.message({ content: "新增成功", status: "success" });
|
||||
$table.insert(dictData.formData);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const drawer = ref(false);
|
||||
|
||||
function onDeploy(value?: object) {
|
||||
console.log("onDeploy", value);
|
||||
drawer.value = true;
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
drawer.value = false;
|
||||
}
|
||||
|
||||
function onExpand() {
|
||||
xTree.value.setAllTreeExpand(true);
|
||||
}
|
||||
|
||||
function onUnExpand() {
|
||||
xTree.value.clearTreeExpand();
|
||||
}
|
||||
|
||||
function onHide() {
|
||||
xForm.value.reset();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 工具栏 -->
|
||||
<vxe-toolbar class="bg-bg_color">
|
||||
<template #buttons>
|
||||
<div class="ml-[20px]">
|
||||
<label class="dark:text-text_color_regular">字典名称： </label>
|
||||
<el-input
|
||||
class="!w-[200px]"
|
||||
v-model="dictData.filterName"
|
||||
:placeholder="t('buttons.hssearch')"
|
||||
@keyup.prevent="searchEvent"
|
||||
@input="searchEvent"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #tools>
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:plus-square-o')"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ t("buttons.hsadd") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:folder-open-o')"
|
||||
@click="onExpand"
|
||||
>
|
||||
{{ t("buttons.hsexpendAll") }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:folder-o')"
|
||||
@click="onUnExpand"
|
||||
>
|
||||
{{ t("buttons.hscollapseAll") }}
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
|
||||
<!-- 列表 -->
|
||||
<vxe-table
|
||||
ref="xTree"
|
||||
border
|
||||
resizable
|
||||
:tree-config="{
|
||||
children: 'children',
|
||||
iconOpen: 'fa fa-minus-square-o',
|
||||
iconClose: 'fa fa-plus-square-o'
|
||||
}"
|
||||
:data="dictData.tableData"
|
||||
@cell-dblclick="cellDBLClickEvent"
|
||||
>
|
||||
<vxe-table-column tree-node field="name" title="字典名称" />
|
||||
<vxe-table-column title="字典类型">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="'双击复制：' + row.model"
|
||||
placement="right"
|
||||
>
|
||||
<span class="text-model">{{ row.model }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column title="操作" width="360" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="onEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:plus-square-o')"
|
||||
@click="onAddChild(row)"
|
||||
>
|
||||
新增子类型
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="row.model"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('fa:cog')"
|
||||
@click="onDeploy(row)"
|
||||
>
|
||||
字典配置
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="confirmEvent"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
|
||||
<!-- 修改、添加弹框 -->
|
||||
<vxe-modal
|
||||
resize
|
||||
width="450"
|
||||
v-model="dictData.showEdit"
|
||||
:title="dictData.selectRow ? '编辑' : '新增'"
|
||||
:loading="dictData.submitLoading"
|
||||
@hide="onHide"
|
||||
>
|
||||
<template #default>
|
||||
<vxe-form
|
||||
ref="xForm"
|
||||
:data="dictData.formData"
|
||||
:items="dictData.formItems"
|
||||
title-align="right"
|
||||
title-width="100"
|
||||
@submit="submitEvent"
|
||||
/>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
|
||||
<Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vxe-input + .vxe-button,
|
||||
.vxe-input + .vxe-button--dropdown,
|
||||
.vxe-button + .vxe-button,
|
||||
.vxe-button + .vxe-button--dropdown {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.vxe-button.type--button:not(.is--round) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vxe-toolbar.size--medium {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vxe-table--render-default.size--medium {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.vxe-button.size--medium.type--button {
|
||||
margin-right: 0.07em;
|
||||
}
|
||||
|
||||
.text-model {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user