{
this.addBtn ? Add : null
}
{
this.exportBtn ?
{
this.opreat.map((item, indexs) => {
const whiteList = ['red', 'orange'];
if (item.disabled && item.disabled(record)) {
return
{ typeof item.text === 'function' ? item.text(record) : item.text }
;
} if (whiteList.indexOf(typeof item.color === 'function' ? item.color(record) : item.color) >= 0) {
return this.menuClick(item.key, record)}
title={typeof item.msg === 'function' ? item.msg(record) : item.msg}>
{ typeof item.text === 'function' ? item.text(record) : item.text }
;
}
return this.menuClick(item.key, record)}>{typeof item.text === 'function' ? item.text(record) : item.text};
})
}
;
}
tableChange(pagination: any, filters: any, sorter: any) {
this.pageParams.pageSize = pagination.pageSize;
this.pageParams.pageNum = pagination.current;
this.getData();
}
menuClick(key: string, row: any) {
this.$emit('tableClick', key, row);
}
}
================================================
FILE: src/components/FilterTable/index.vue
================================================
{{ msg }}
For guide and recipes on how to configure / customize this project,
check out the
vue-cli documentation.
Installed CLI Plugins
Essential Links
Ecosystem
{
isMobile ? null :
{
tabList.map((item: any, index: number) => 1} key={item.name}
tab={item.name}>
)
}
);
}
}
================================================
FILE: src/components/Layout/Header/Header.less
================================================
@import '../../../styles/var.less';
@headerHeight: 56px;
.header-wrap {
height: @headerHeight;
background-color: #fff;
text-align: left;
display: flex;
justify-content: space-between;
box-shadow: 4px 4px 40px 0 rgba(0,0,0,.05);
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 999;
.menu-btn {
line-height: @headerHeight;
width: @headerHeight;
display: inline-block;
text-align: center;
transition: .3s all ease-in-out;
cursor: pointer;
&:hover {
color: @primary-color;
background-color: lighten(@primary-color, 25%);
}
}
.header-bread {
margin-left: 20px;
display: inline-block;
font-size: 12px;
}
.header-menu {
display: flex;
list-style: none;
color: #666;
li {
width: @headerHeight;
height: @headerHeight;
line-height: @headerHeight;
text-align: center;
cursor: pointer;
.el-badge__content.is-fixed {
top: 10px;
}
&:hover {
color: @primary-color;
background-color: lighten(@primary-color, 25%);
.el-dropdown-link {
color: @primary-color;
}
}
&.user {
width: auto;
padding: 0 20px;
.ant-dropdown-link {
height: 56px;
display: block;
}
.name {
margin-left: 10px;
font-size: 14px;
font-weight: 400;
}
}
}
}
}
================================================
FILE: src/components/Layout/Header/Header.tsx
================================================
import {
Component, Prop, Emit, Vue, Watch,
} from 'vue-property-decorator';
import {
Badge, Dropdown, Breadcrumb, Popover, Icon, Menu,
} from 'ant-design-vue';
import Cookies from 'js-cookie';
import { menuItem, routerItem } from '@/interface';
import { routeToArray } from '@/utils';
import MenuList from '@/components/Layout/Sidebar/MenuList';
import './Header.less';
interface breadItem {
url: string,
text: string,
}
@Component({
components: {
'a-badge': Badge,
'a-dropdown': Dropdown,
'a-menu-item': Menu.Item,
'a-breadcrumb': Breadcrumb,
'a-breadcrumb-item': Breadcrumb.Item,
'a-popover': Popover,
'menu-list': MenuList,
'a-icon': Icon,
'a-menu-divider': Menu.Divider,
'a-menu': Menu,
},
})
export default class Header extends Vue {
@Prop() private username!: string;
// data
menuData: routerItem[] = [];
breadList: breadItem[] = [];
onIndex: number = 0;
@Watch('$route', { immediate: true, deep: true })
routeChange(to: any, from: any) {
const toDepth = routeToArray(to.path);
this.onIndex = 0;
this.breadList = [];
this.routerBread(this.menuData, toDepth.routeArr);
}
@Watch('menuData')
initRouteBread() {
const toDepth = routeToArray(this.$route.path);
this.routerBread(this.menuData, toDepth.routeArr);
}
@Emit()
routerBread(data: routerItem[], toDepth: string[]) {
data.map((item: routerItem) => {
if (item.path === toDepth[this.onIndex]) {
this.breadList.push({
url: item.path,
text: item.name ? item.name : '',
});
if (item.children && (toDepth.length - 1) >= this.onIndex) {
this.onIndex += 1;
this.routerBread(item.children, toDepth);
}
}
return true;
});
}
@Emit()
menuClick(params: {item: any, key: string, keyPath: string[]}): void {
const self = this;
switch (params.key) {
case '1':
break;
case '2':
break;
case '3':
Cookies.remove('token');
this.$router.push('/login');
break;
default:
break;
}
}
@Emit()
switchSidebar(): void {
this.$store.dispatch('ToggleSideBar');
}
render() {
const { username } = this;
const { menuData, sidebar: { opened }, isMobile } = this.$store.state.app;
this.menuData = menuData;
return (
{
isMobile ?
:
}
{
isMobile ? null
:
{
this.breadList.map((item: breadItem) => {item.text} )
}
}
{config.name}
LOADING...
{
this.show ?
: ''
}
);
}
}
================================================
FILE: src/global.d.ts
================================================
interface Window {
api: {
[key: string]: (
data: any,
) => Promise<{
success: boolean;
message: string;
statusCode: number;
data: any;
}>;
};
ajax: any;
ApexCharts: any;
BMap: any;
BMapLib: any;
wangEditor: any;
CanvasLayer: any;
pointCollection: any;
BMAP_POINT_SIZE_HUGE: any;
BMAP_POINT_SHAPE_CIRCLE: any;
BMAP_DRAWING_CIRCLE: any;
BMAP_DRAWING_POLYGON: any;
BMAP_DRAWING_RECTANGLE: any;
}
interface Date {
Format(fmt: string): string;
}
interface returnData {
success: boolean;
message: string;
statusCode: number;
data: any;
}
declare module '*.json';
================================================
FILE: src/interface/index.ts
================================================
import { VNode } from 'vue';
import { ScopedSlot } from 'vue/types/vnode';
/**
* @interface 筛选表格的表单参数
* @param key 表单的key值，对应filterParams里面的值
* @param type 表单的类型，分为10种
* @param label 表单前面的标题文字
* @param placeholder 表单的占位文字
* @param value 用于范围选择或者多个值的情况，
* @param fieldNames antd的cascader组件的，自定义 options 中 label name children 的字段
* https://vue.ant.design/components/cascader-cn/#API
* @param options 用于下拉选择的选择项，可以异步加载
* @param change 表单的change事件
* @param disabledTime 时间范围选择的不可选日期，
*/
type FilterType = 'input' | 'select' | 'cascader' | 'levelcode' | 'datetime' | 'date' | 'datetimerange' | 'checkboxButton';
export interface FilterFormList {
key: string;
type: FilterType;
label: string;
placeholder: string | string[];
value?: string[];
fieldNames?: any;
options?: Array<{ value: any, label: string }>;
change?: Function;
disabledTime?: (dates: [object, object], partial: 'start'|'end') => any;
}
export interface TableColumnFilter {
text: string,
value: any
}
export interface ColumnFilterItem {
text?: string;
value?: string;
children?: any;
}
export declare type SortOrder = 'ascend' | 'descend';
// column
export interface tableList {
/**
* specify how content is aligned
* @default 'left'
* @type string
*/
align?: 'left' | 'right' | 'center';
/**
* Span of this column's title
* @type number
*/
colSpan?: number;
/**
* Display field of the data record, could be set like a.b.c
* @type string
*/
dataIndex: string;
/**
* Default order of sorted values: 'ascend' 'descend' null
* @type string
*/
defaultSortOrder?: SortOrder;
/**
* Customized filter overlay
* @type any (slot)
*/
filterDropdown?: any;
/**
* Whether filterDropdown is visible
* @type boolean
*/
filterDropdownVisible?: boolean;
/**
* Whether the dataSource is filtered
* @default false
* @type boolean
*/
filtered?: boolean;
/**
* Controlled filtered value, filter icon will highlight
* @type string[]
*/
filteredValue?: string[];
/**
* Customized filter icon
* @default false
* @type any
*/
filterIcon?: any;
/**
* Whether multiple filters can be selected
* @default true
* @type boolean
*/
filterMultiple?: boolean;
/**
* Filter menu config
* @type object[]
*/
filters?: ColumnFilterItem[];
/**
* Set column to be fixed: true(same as left) 'left' 'right'
* @default false
* @type boolean | string
*/
fixed?: boolean | 'left' | 'right';
/**
* Unique key of this column, you can ignore this prop if you've set a unique dataIndex
* @type string
*/
key?: string;
/**
* Renderer of the table cell. The return value should be a VNode,
* or an object for colSpan/rowSpan config
* @type Function | ScopedSlot
*/
customRender?: Function | ScopedSlot;
/**
* Sort function for local sort, see Array.sort's compareFunction.
* If you need sort buttons only, set to true
* @type boolean | Function
*/
sorter?: boolean | Function;
/**
* Order of sorted values: 'ascend' 'descend' false
* @type boolean | string
*/
sortOrder?: boolean | SortOrder;
/**
* Title of this column
* @type any (string | slot)
*/
title: any;
/**
* Width of this column
* @type string | number
*/
width?: string | number;
/**
* Set props on per cell
* @type Function
*/
customCell?: (
record: any,
rowIndex: number,
) => {
props: object;
attrs: object;
on: object;
class: object;
style: object;
nativeOn: object;
};
/**
* Set props on per header cell
* @type
*/
customHeaderCell?: (
column: any,
) => {
props: object;
attrs: object;
on: object;
class: object;
style: object;
nativeOn: object;
};
/**
* Callback executed when the confirm filter button is clicked,
* Use as a filter event when using template or jsx
* @type Function
*/
onFilter?: Function;
/**
* Callback executed when filterDropdownVisible is changed,
* Use as a filterDropdownVisible event when using template or jsx
* @type Function
*/
onFilterDropdownVisibleChange?: (visible: boolean) => void;
/**
* When using columns, you can use this property to configure
* the properties that support the slot,
* such as slots: { filterIcon: 'XXX'}
* @type object
*/
slots?: object;
/**
* When using columns, you can use this property to configure
* the properties that support the slot-scope,
* such as scopedSlots: { customRender: 'XXX'}
* @type object
*/
scopedSlots?: object;
}
/**
* @interface 表格组件-操作栏参数
* @param {string} key 操作的key值，用于回调事件匹配
* @param {string} rowKey 当前行数据的id值，用于自动化测试，方便区别
* @param {Function/string} color 文字颜色，可以根据当前行数据动态返回颜色值
* @param {string} text 可以根据当前行数据动态返回文字
* @param {Function} disabled 可以根据当前数据动态返回状态
* @param {Function/string} roles 可以动态返回权限，控制是否展示
*/
export interface Opreat {
key: string,
rowKey: string,
color: Function | string,
text: Function | string,
disabled?: Function;
roles: Function | boolean,
msg?: Function | string,
}
/**
* @interface 表格tag设置
* @param {} key
*/
export interface tableTag {
key: number,
color: string,
value: number,
label: string,
}
export interface menuItem {
id: number,
title: string,
url?: string,
icon?: string,
permission: string | Array