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

perf: optimization menus style

Browse Source
This commit is contained in:
xiaoxian521
2021-04-25 11:58:38 +08:00
parent a0074411ca
commit 05b106203c
10 changed files with 302 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/system/dict.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="dict-container">
<vxe-toolbar>
<template #buttons>
<vxe-input
v-model="demo1.filterName"
:placeholder="$t('message.hssearch')"
@keyup="searchEvent"
></vxe-input>
</template>
<template #tools>
<vxe-button icon="el-icon-circle-plus-outline" status="primary">{{$t('message.hsadd')}}</vxe-button>
<vxe-button
icon="el-icon-folder-opened"
status="primary"
@click="$refs.xTree.setAllTreeExpand(true)"
>{{$t('message.hsexpendAll')}}</vxe-button>
<vxe-button
icon="el-icon-folder"
status="primary"
@click="$refs.xTree.clearTreeExpand()"
>{{$t('message.hscollapseAll')}}</vxe-button>
</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="demo1.tableData"
>
<vxe-table-column tree-node field="name" title="字典名称"></vxe-table-column>
<vxe-table-column field="model" title="字典类型"></vxe-table-column>
<vxe-table-column title="操作" width="330">
<template #default="{ row }">
<vxe-button type="text" icon="el-icon-edit" @click="demo1.value8 = true">编辑</vxe-button>
<vxe-button type="text" icon="el-icon-circle-plus-outline">新增子类型</vxe-button>
<vxe-button v-show="row.model" type="text" icon="el-icon-setting">字典配置</vxe-button>
<vxe-button type="text" icon="el-icon-delete" @click="confirmEvent">删除</vxe-button>
</template>
</vxe-table-column>
</vxe-table>
<vxe-modal
v-model="demo1.value8"
title="记忆功能的窗口"
width="440"
height="230"
show-zoom
resize
remember
>
<template #default>
<vxe-form>
<vxe-form-item span="24">
<template #default>
<vxe-form
:data="demo1.formData3"
:rules="demo1.formRules3"
title-align="right"
title-width="80"
>
<vxe-form-item
title="字典名称"
field="name"
span="24"
:item-render="{name: 'input', attrs: {placeholder: '请输入字典名称'}}"
></vxe-form-item>
<vxe-form-item
title="字典类型"
field="nickname"
span="24"
:item-render="{name: 'input', attrs: {placeholder: '请输入字典类型'}}"
></vxe-form-item>
<vxe-form-item align="right" span="24">
<template #default>
<vxe-button @click="demo1.value8 = false">取消</vxe-button>
<vxe-button status="primary" @click="onEdit">保存</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</template>
</vxe-form-item>
</vxe-form>
</template>
</vxe-modal>
</div>
</template>
<script lang="ts">
import { reactive, ref, nextTick } from "vue";
import XEUtils from "xe-utils";
import { cloneDeep } from "lodash-es";
import { templateRef } from "@vueuse/core";
import { VxeTablePropTypes, VxeTableInstance, VXETable } from "vxe-table";
export default {
setup() {
const demo1 = reactive({
filterName: "",
tableData: [
{
id: 1,
name: "状态",
model: "",
children: [
{
id: "1-1",
name: "服务状态",
model: "serviceStatus"
},
{
id: "1-2",
name: "在线状态",
model: "onlienStatus"
}
]
},
{ id: 2, name: "操作系统", model: "operatingSystem" }
]
});
let originData = cloneDeep(demo1.tableData);
const xTree = templateRef<HTMLElement | null>("xTree", null);
// const = ref({} as VxeTableInstance);
const formatDate = (value: any) => {
return XEUtils.toDateString(value, "yyyy-MM-dd HH:mm:ss.S");
};
const handleSearch = () => {
const filterName = XEUtils.toValueString(demo1.filterName).trim();
if (filterName) {
const options = { children: "children" };
const searchProps = ["name"];
demo1.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 {
demo1.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 onEdit() {
demo1.value8 = false;
VXETable.modal.message({
content: "测试数据，不可编辑",
status: "error"
});
}
return {
demo1,
formatDate,
searchEvent,
confirmEvent,
onEdit
};
}
};
</script>
<style lang="scss" scoped>
.dict-container {
margin: 10px;
}
.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-button.size--medium.type--button {
margin-right: 0.07em;
}
</style>

253
src/views/system/user.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<vxe-grid v-bind="gridOptions" style="width:98%"></vxe-grid>
</template>
<script lang='ts'>
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";
export default {
name: "user",
setup() {
const gridOptions = reactive({
border: true,
resizable: true,
keepSource: true,
height: 500,
printConfig: {},
importConfig: {},
exportConfig: {},
pagerConfig: {
perfect: true,
pageSize: 15
},
editConfig: {
trigger: "click",
mode: "row",
showStatus: true
},
toolbarConfig: {
buttons: [
{
code: "insert_actived",
name: "message.hsadd",
status: "perfect",
icon: "fa fa-plus"
},
{
code: "mark_cancel",
name: "message.hsmark",
status: "perfect",
icon: "fa fa-trash-o"
},
{
code: "save",
name: "message.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"
},
{
id: 100011,
name: "Test11",
nickname: "T11",
role: "Test",
sex: "Women ",
age: 26,
address: "vxe-table 从入门到放弃"
},
{
id: 100012,
name: "Test12",
nickname: "T12",
role: "Develop",
sex: "Man ",
age: 34,
address: "Guangzhou"
},
{
id: 100013,
name: "Test13",
nickname: "T13",
role: "Test",
sex: "Women ",
age: 22,
address: "Shenzhen"
}
];
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" } },
{
field: "address",
title: "Address",
showOverflow: true,
editRender: { name: "input" }
}
]
} as VxeGridProps);
return {
gridOptions
};
}
};
</script>
<style scoped>
</style>