easybill-ui 0.1.15 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CurdForm/src/FormTooltip.vue +11 -17
- package/components/CurdForm/src/components/schema-form-checkbox.vue +10 -8
- package/components/CurdForm/src/types.ts +1 -1
- package/components/CurdTable/src/CurdTable.vue +21 -19
- package/components/CurdTable/src/STableColumnControl.vue +1 -2
- package/components/CurdTable/src/STableItem.vue +4 -2
- package/components/CurdTable/src/hooks/useColumnHook.ts +2 -2
- package/components/CurdTable/src/types.ts +1 -1
- package/package.json +2 -2
- package/theme-chalk/curd-table.css +1 -1
- package/theme-chalk/index.css +1 -1
- package/components/CurdTable/src/STableSinglePage.vue +0 -101
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<el-tooltip :content="
|
|
2
|
+
<el-tooltip :content="tooltipModel.content" v-bind="tooltipModel || {}">
|
|
3
3
|
<el-button class="tooltip" type="primary" link>
|
|
4
4
|
<el-icon><Warning /></el-icon>
|
|
5
5
|
</el-button>
|
|
6
6
|
<template #content>
|
|
7
|
-
<div v-html="
|
|
7
|
+
<div v-html="tooltipModel.content"></div>
|
|
8
8
|
</template>
|
|
9
9
|
</el-tooltip>
|
|
10
10
|
</template>
|
|
11
11
|
<script lang="ts" setup>
|
|
12
12
|
import { PropType, computed } from "vue"
|
|
13
13
|
import { Warning } from "@element-plus/icons-vue"
|
|
14
|
-
import { ElButton, ElIcon, ElTooltip } from "element-plus"
|
|
14
|
+
import { ElButton, ElIcon, ElTooltip, ElTooltipProps } from "element-plus"
|
|
15
15
|
import { FormItem, Fields } from "./types"
|
|
16
16
|
const props = defineProps({
|
|
17
17
|
tooltip: {
|
|
@@ -31,31 +31,25 @@ const props = defineProps({
|
|
|
31
31
|
const is = (val: any, type: string) => {
|
|
32
32
|
return Object.prototype.toString.call(val) === `[object ${type}]`
|
|
33
33
|
}
|
|
34
|
-
const
|
|
35
|
-
|
|
34
|
+
const tooltipModel = computed(() => {
|
|
35
|
+
let tooltip: any = props.tooltip
|
|
36
36
|
if (!tooltip) {
|
|
37
37
|
return {}
|
|
38
38
|
}
|
|
39
39
|
if (is(tooltip, "Function")) {
|
|
40
|
-
|
|
40
|
+
tooltip = tooltip(props.formModel, props.formItem)
|
|
41
|
+
return getTooltip(tooltip)
|
|
41
42
|
}
|
|
42
|
-
|
|
43
|
-
return { content: tooltip }
|
|
44
|
-
}
|
|
45
|
-
return tooltip
|
|
43
|
+
return getTooltip(tooltip)
|
|
46
44
|
})
|
|
47
45
|
// 获取组件tooltip内容
|
|
48
|
-
const
|
|
49
|
-
const tooltip: any = props.tooltip
|
|
46
|
+
const getTooltip = (tooltip: ElTooltipProps | String) => {
|
|
50
47
|
if (!tooltip) {
|
|
51
48
|
return ""
|
|
52
49
|
}
|
|
53
|
-
if (is(tooltip, "Function")) {
|
|
54
|
-
return tooltip(props.formModel, props.formItem)
|
|
55
|
-
}
|
|
56
50
|
if (is(tooltip, "String")) {
|
|
57
|
-
return tooltip
|
|
51
|
+
return { content: tooltip }
|
|
58
52
|
}
|
|
59
|
-
return
|
|
53
|
+
return tooltip
|
|
60
54
|
}
|
|
61
55
|
</script>
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
<
|
|
2
|
+
<div class="schema-form-radio">
|
|
3
|
+
<div v-if="formItem.loading" class="loading" style="color: #999; font-size: 12px">
|
|
4
|
+
<el-icon class="is-loading"><Loading /></el-icon> 加载中...
|
|
5
|
+
</div>
|
|
6
|
+
<el-checkbox-group v-else v-model="model" :class="[props?.showType]" style="width: 100%" v-bind="props" v-on="eventObject">
|
|
7
|
+
<template v-for="option in formItem.options" :key="option.value">
|
|
8
|
+
<el-checkbox-button v-if="props?.componentName == 'button'" :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox-button>
|
|
9
|
+
<el-checkbox v-else :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox>
|
|
10
|
+
</template>
|
|
11
|
+
</el-checkbox-group>
|
|
4
12
|
</div>
|
|
5
|
-
<el-checkbox-group v-else v-model="model" :class="[props?.showType]" style="width: 100%" v-bind="props" v-on="eventObject">
|
|
6
|
-
<template v-for="option in formItem.options" :key="option.value">
|
|
7
|
-
<el-checkbox-button v-if="props?.componentName == 'button'" :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox-button>
|
|
8
|
-
<el-checkbox v-else :label="option.value" :disabled="option.disabled"> {{ option.label }} </el-checkbox>
|
|
9
|
-
</template>
|
|
10
|
-
</el-checkbox-group>
|
|
11
13
|
</template>
|
|
12
14
|
<script lang="ts">
|
|
13
15
|
import { defineComponent, computed, PropType } from "vue"
|
|
@@ -25,7 +25,7 @@ export interface FormItem {
|
|
|
25
25
|
labelWidth?: string
|
|
26
26
|
span?: number
|
|
27
27
|
disabled?: boolean
|
|
28
|
-
tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps>) | Partial<ElTooltipProps>
|
|
28
|
+
tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<ElTooltipProps> | String) | Partial<ElTooltipProps>
|
|
29
29
|
autoload?: boolean
|
|
30
30
|
prefix?: string | any
|
|
31
31
|
suffix?: string | any
|
|
@@ -80,23 +80,26 @@
|
|
|
80
80
|
</template>
|
|
81
81
|
</el-table>
|
|
82
82
|
</div>
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
83
|
+
<div class="table-pager">
|
|
84
|
+
<div class="page-left"><slot name="pageLeft"></slot></div>
|
|
85
|
+
<el-pagination
|
|
86
|
+
v-if="total != -1 && !option.hidePage"
|
|
87
|
+
v-model:current-page="listQuery.pageIndex"
|
|
88
|
+
v-model:page-size="listQuery.pageSize"
|
|
89
|
+
class="pagination"
|
|
90
|
+
background
|
|
91
|
+
layout="total, sizes, prev, pager, next, jumper"
|
|
92
|
+
:total="total"
|
|
93
|
+
v-bind="option.pageProps"
|
|
94
|
+
@current-change="fetchData"
|
|
95
|
+
@size-change="fetchData"
|
|
96
|
+
>
|
|
97
|
+
<ul class="el-pager">
|
|
98
|
+
<li class="is-active number">{{ listQuery.pageIndex }}</li>
|
|
99
|
+
</ul>
|
|
100
|
+
</el-pagination>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
100
103
|
<STableDetail ref="STableDetailRef" />
|
|
101
104
|
</div>
|
|
102
105
|
</template>
|
|
@@ -111,7 +114,6 @@ import STableItem from "./STableItem.vue"
|
|
|
111
114
|
import STableFilter from "./STableFilter.vue"
|
|
112
115
|
import STableMenu from "./STableMenu.vue"
|
|
113
116
|
import STableDetail from "./STableDetail.vue"
|
|
114
|
-
import STableSinglePage from "./STableSinglePage.vue"
|
|
115
117
|
import { deepClone } from "../utils/common"
|
|
116
118
|
import { Edit, Delete, Plus, ArrowDown, Document } from "@element-plus/icons-vue"
|
|
117
119
|
import { ColumnItem, PropOption, TableAttr, FetchDataOpt, MenuEventKey } from "./types"
|
|
@@ -366,7 +368,7 @@ const create = (row?: any) => {
|
|
|
366
368
|
if (!a.form) return
|
|
367
369
|
let formValue: FormItem
|
|
368
370
|
if (a.form instanceof Function) {
|
|
369
|
-
formValue = a.form(a, row)
|
|
371
|
+
formValue = a.form(a, row, search)
|
|
370
372
|
} else {
|
|
371
373
|
formValue = a.form
|
|
372
374
|
}
|
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
<el-table :data="columnDatas">
|
|
4
4
|
<el-table-column property="label" label="列名称"></el-table-column>
|
|
5
5
|
<el-table-column property="hidden" label="显示" width="60">
|
|
6
|
-
<template #default="scope"
|
|
7
|
-
>{{ scope }}
|
|
6
|
+
<template #default="scope">
|
|
8
7
|
<el-switch v-model="scope.row.hidden" :active-value="false" :inactive-value="true" size="small" @change="onChangeHidden(scope.row)"></el-switch>
|
|
9
8
|
</template>
|
|
10
9
|
</el-table-column>
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
<template #default="scope">
|
|
11
11
|
<slot v-bind="scope"></slot>
|
|
12
12
|
<template v-if="!props.isSlot">
|
|
13
|
-
<
|
|
13
|
+
<!-- <div v-if="props.schema.options">{{ ops }}</div> -->
|
|
14
|
+
<ConstantStatus v-if="props.schema.options" :value="scope.row[props.schema.prop]" :options="ops" />
|
|
14
15
|
<template v-else-if="props.schema.form && props.schema.form.type == 'file'">
|
|
15
16
|
<el-image :src="scope.row[props.schema.prop]" :preview-src-list="[scope.row[props.schema.prop]]" style="width: 40px; height: 40px; vertical-align: top" fit="cover" @click.stop></el-image>
|
|
16
17
|
</template>
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
</el-table-column>
|
|
29
30
|
</template>
|
|
30
31
|
<script lang="ts" setup>
|
|
31
|
-
import { computed, inject, PropType, ref, Ref } from "vue"
|
|
32
|
+
import { computed, inject, PropType, ref, Ref, shallowRef } from "vue"
|
|
32
33
|
import ConstantStatus from "../../ConstantStatus"
|
|
33
34
|
import STableItemFilter from "./STableItemFilter.vue"
|
|
34
35
|
import STableItemHeader from "./STableItemHeader.vue"
|
|
@@ -58,6 +59,7 @@ const props = defineProps({
|
|
|
58
59
|
default: () => ({}),
|
|
59
60
|
},
|
|
60
61
|
})
|
|
62
|
+
const ops = shallowRef(props.schema.options)
|
|
61
63
|
const selectParams = inject<Ref<Array<ParamsItem>>>("selectParams")
|
|
62
64
|
const filterSchema = computed(() => {
|
|
63
65
|
let result = selectParams?.value.filter((a) => a.prop == props.schema.filter?.prop || a.prop == props.schema.prop) //getFilterFromColumn(props.schema)
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Ref, ref, provide, watch } from "vue"
|
|
1
|
+
import { Ref, ref, provide, watch, shallowRef } from "vue"
|
|
2
2
|
import { ColumnItem } from "../types"
|
|
3
3
|
import { deepClone } from "../../utils/common"
|
|
4
4
|
import { ParamsItem } from "../../../TableFilter"
|
|
5
5
|
|
|
6
6
|
export function useColumnHook(props: any) {
|
|
7
|
-
const columns: Ref<Array<ColumnItem>> =
|
|
7
|
+
const columns: Ref<Array<ColumnItem>> = shallowRef([])
|
|
8
8
|
const cs = deepClone(props.columns)
|
|
9
9
|
columns.value = cs //.filter((a) => !a.hidden)
|
|
10
10
|
provide("columns", columns)
|
|
@@ -25,7 +25,7 @@ export interface ColumnItemCtx<T> {
|
|
|
25
25
|
children?: Array<ColumnItem> // 暂时不支持
|
|
26
26
|
options?: Array<OptionItem> //数据字典
|
|
27
27
|
asyncOptions?: () => Promise<OptionItem[]>
|
|
28
|
-
form?: Partial<FormItemType> | ((formItem: FormItemType, row: T) => Partial<FormItemType>)
|
|
28
|
+
form?: Partial<FormItemType> | ((formItem: FormItemType, row: T, query: Fields) => Partial<FormItemType>)
|
|
29
29
|
filter?: ColumnItemFilter
|
|
30
30
|
detail?: ColumnItemDetail
|
|
31
31
|
//继承自el-table-column属性
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "easybill-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.17",
|
|
4
4
|
"description": "A component library for easybill",
|
|
5
5
|
"author": "tuchongyang <779311998@qq.com>",
|
|
6
6
|
"private": false,
|
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
|
-
"gitHead": "
|
|
17
|
+
"gitHead": "d252ca9411fe5b50332c38f62cb719ea98bf2fc9"
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.table-container .
|
|
1
|
+
.table-container .table-pager{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.table-container .table-pager .pagination{justify-content:end;font-weight:400}.table-container .table-control{display:flex;justify-content:space-between;padding-bottom:10px;align-items:flex-end}.table-container .table-control .min-control>.el-button{margin-right:10px}.table-container .s-table-filter .el-form--inline .el-form-item{margin-right:15px}.table-container .el-button+.dropdown-item{margin-left:10px}.table-container .copy{cursor:pointer;margin-right:3px}.table-container .header-td{display:flex;align-items:center;word-break:break-word}.table-container .header-td.center{justify-content:center}.table-container .header-td.right{justify-content:flex-end}.table-container .filter-dropdown-toggle{display:inline-block;line-height:1;cursor:pointer;position:relative;margin-left:3px}.table-container .filter-dropdown-toggle.active{color:var(--el-color-primary)}.table-container .table-menu{display:inline-block;vertical-align:middle;position:relative}.table-container .table-menu .table-menu-item{color:var(--el-button-text-color);font-size:14px;border-radius:4px;border:1px solid var(--el-button-border-color);padding:0;height:28px;width:28px}.table-container .table-menu .table-menu-item:not(.is-disabled):active,.table-container .table-menu .table-menu-item:not(.is-disabled):focus{border-color:var(--el-button-border-color)}.table-container .table-menu .table-menu-item+.table-menu-item{margin-left:3px}.table-container .table-menu .table-menu-item:hover{background-color:var(--el-fill-color-light);border-color:var(--el-button-border-color)}.table-container .table-menu .current-size{color:var(--el-color-primary)}.table-container .simple-page{padding:20px 0;text-align:right}.table-container .simple-page>span{margin:0 10px}.curd-table-dropdown-menu .el-dropdown-menu__item{padding:0}.curd-table-dropdown-menu .el-dropdown-menu__item:hover{background-color:var(--el-fill-color-light)}.curd-table-dropdown-menu .el-dropdown-menu__item .el-button{display:block;padding:5px 16px;flex:1;text-align:left;font-size:12px}.table-main-filter-dropdown{padding:0}.table-main-filter-dropdown .search{position:relative;margin-bottom:5px}.table-main-filter-dropdown .search input{outline:0;border:0;width:100%;padding:5px 10px;background:#f4f4f4}.table-main-filter-dropdown .search .icon-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.table-main-filter-dropdown .search .icon-close1{position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.7}.table-main-filter-dropdown .search .icon-close1:hover{opacity:1;color:#444}.table-main-filter-dropdown .select li{line-height:30px;padding:0 20px;list-style:none;cursor:pointer}.table-main-filter-dropdown .select li:hover{background:#f4f4f4}.table-main-filter-dropdown .select li.active{color:var(--el-color-primary)}.filter-type-popper{width:auto!important;min-width:0!important;padding:0!important;box-shadow:none!important}
|
package/theme-chalk/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.constant-status{--el-tag-border-opacity:1;--el-tag-bg-opacity:1;--el-tag-font-size:var(--el-font-size-base)}.constant-status .el-tag__content{display:flex;align-items:center;line-height:1}.constant-status .el-icon,.constant-status .name{vertical-align:top;line-height:1}.constant-status .dot{width:5px;height:5px;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--el-tag-text-color);margin-right:5px}.constant-status.no-border{padding:0}.constant-status.dot-status{padding:0}.constant-status.dot-status .name{color:var(--el-text-color-primary)}.constant-status.el-tag--default{padding:0;--el-tag-bg-color:transparent;--el-tag-border-color:transparent;--el-tag-hover-color:var(--el-text-color-primary);--el-tag-text-color:var(--el-text-color-primary)}.constant-status.el-tag--blue{--el-tag-bg-color:rgba(236, 245, 255, var(--el-tag-bg-color));--el-tag-border-color:rgba(217, 236, 255, var(--el-tag-border-color));--el-tag-hover-color:rgba(111, 122, 175, 1);--el-tag-text-color:rgba(111, 122, 175, 1)}.constant-status.el-tag--blue.el-tag--dark{--el-tag-bg-color:rgba(111, 122, 175, 1);--el-tag-border-color:rgba(111, 122, 175, 1);--el-tag-hover-color:rgba(111, 122, 175, 0.8);--el-tag-text-color:#fff}.constant-status.el-tag--blue.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--yellow{--el-tag-bg-color:rgba(255, 251, 230, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(255, 229, 143, var(--el-tag-borer-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:rgba(212, 136, 6, 1)}.constant-status.el-tag--yellow.el-tag--dark{--el-tag-bg-color:rgba(212, 136, 6, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(212, 136, 6, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:#fff}.constant-status.el-tag--yellow.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blue-dark{--el-tag-bg-color:rgba(240, 245, 255, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(173, 198, 255, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:rgba(29, 57, 196, 1)}.constant-status.el-tag--blue-dark.el-tag--dark{--el-tag-bg-color:rgba(29, 57, 196, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(29, 57, 196, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blue-dark.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--red-purple{--el-tag-bg-color:rgba(251, 243, 248, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(227, 206, 219, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:rgba(191, 117, 163, 1)}.constant-status.el-tag--red-purple.el-tag--dark{--el-tag-bg-color:rgba(191, 117, 163, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(191, 117, 163, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:#fff}.constant-status.el-tag--red-purple.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blueness{--el-tag-bg-color:rgba(243, 250, 251, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(194, 213, 221, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:rgba(99, 150, 177, 1)}.constant-status.el-tag--blueness.el-tag--dark{--el-tag-bg-color:rgba(99, 150, 177, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(99, 150, 177, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blueness.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.no-border{border:0!important;background:0 0}.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;align-items:flex-start}.curd-form:not(.el-form--inline) .el-form-item{flex:0 0 100%;box-sizing:border-box}.curd-form .form-item{width:100%;display:flex}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}.table-container .pagination{margin:15px 0;justify-content:end;font-weight:400}.table-container .table-control{display:flex;justify-content:space-between;padding-bottom:10px;align-items:flex-end}.table-container .table-control .min-control>.el-button{margin-right:10px}.table-container .s-table-filter .el-form--inline .el-form-item{margin-right:15px}.table-container .el-button+.dropdown-item{margin-left:10px}.table-container .copy{cursor:pointer;margin-right:3px}.table-container .header-td{display:flex;align-items:center;word-break:break-word}.table-container .header-td.center{justify-content:center}.table-container .header-td.right{justify-content:flex-end}.table-container .filter-dropdown-toggle{display:inline-block;line-height:1;cursor:pointer;position:relative;margin-left:3px}.table-container .filter-dropdown-toggle.active{color:var(--el-color-primary)}.table-container .table-menu{display:inline-block;vertical-align:middle;position:relative}.table-container .table-menu .table-menu-item{color:var(--el-button-text-color);font-size:14px;border-radius:4px;border:1px solid var(--el-button-border-color);padding:0;height:28px;width:28px}.table-container .table-menu .table-menu-item:not(.is-disabled):active,.table-container .table-menu .table-menu-item:not(.is-disabled):focus{border-color:var(--el-button-border-color)}.table-container .table-menu .table-menu-item+.table-menu-item{margin-left:3px}.table-container .table-menu .table-menu-item:hover{background-color:var(--el-fill-color-light);border-color:var(--el-button-border-color)}.table-container .table-menu .current-size{color:var(--el-color-primary)}.table-container .simple-page{padding:20px 0;text-align:right}.table-container .simple-page>span{margin:0 10px}.curd-table-dropdown-menu .el-dropdown-menu__item{padding:0}.curd-table-dropdown-menu .el-dropdown-menu__item:hover{background-color:var(--el-fill-color-light)}.curd-table-dropdown-menu .el-dropdown-menu__item .el-button{display:block;padding:5px 16px;flex:1;text-align:left;font-size:12px}.table-main-filter-dropdown{padding:0}.table-main-filter-dropdown .search{position:relative;margin-bottom:5px}.table-main-filter-dropdown .search input{outline:0;border:0;width:100%;padding:5px 10px;background:#f4f4f4}.table-main-filter-dropdown .search .icon-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.table-main-filter-dropdown .search .icon-close1{position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.7}.table-main-filter-dropdown .search .icon-close1:hover{opacity:1;color:#444}.table-main-filter-dropdown .select li{line-height:30px;padding:0 20px;list-style:none;cursor:pointer}.table-main-filter-dropdown .select li:hover{background:#f4f4f4}.table-main-filter-dropdown .select li.active{color:var(--el-color-primary)}.filter-type-popper{width:auto!important;min-width:0!important;padding:0!important;box-shadow:none!important}.table-filter{display:flex;flex-direction:column;position:relative}.table-filter .filter-search-box{min-height:32px;border-width:1px;border-style:solid;border-color:var(--el-border-color);display:flex;min-width:460px;align-items:center;justify-items:center;justify-content:space-between;overflow:hidden;border-radius:var(--el-border-radius-base);transition:all .3s}.table-filter .filter-search-box.is-focus{border-color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action{height:32px;line-height:32px;align-self:flex-end;display:flex}.table-filter .filter-search-box .filter-action div{cursor:pointer}.table-filter .filter-search-box .filter-action .empty{color:var(--el-color-info);margin-right:15px;padding-left:10px}.table-filter .filter-search-box .filter-action .empty:hover{color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action .search{padding:0 20px;text-align:center;position:relative;display:flex;align-items:center}.table-filter .filter-search-box .filter-action .search:before{content:"";display:block;width:1px;height:20px;background:var(--el-border-color);position:absolute;left:0;top:50%;transform:translateY(-50%)}.table-filter .filter-search-box .filter-action .search:hover{color:var(--el-color-primary)}.table-filter .filter-external .el-form-item{margin-bottom:10px}.table-filter .filter-tags{height:100%;flex-wrap:wrap;display:flex;flex:1;align-items:flex-start;justify-items:center}.table-filter .filter-tags .tag-title{font-size:12px;color:var(--el-text-color-placeholder);height:24px;line-height:24px;margin:0 15px 5px 0}.table-filter .filter-tags .dropdown-toggle{white-space:nowrap;display:flex;align-items:center;justify-items:center;font-size:12px}.table-filter .filter-tags .tag-list{flex:1;display:flex;flex-wrap:wrap}.table-filter .filter-tags .tag-item{height:24px;line-height:24px;white-space:nowrap;display:flex;align-items:center;justify-items:center;padding:0 10px;color:var(--el-color-info-dark-2);background:var(--el-color-info-light-9);font-size:12px;border-radius:var(--el-border-radius-base);margin-right:5px;margin-bottom:10px;cursor:pointer}.table-filter .filter-tags .tag-item .action{color:var(--el-color-info-light-5);text-align:center;width:14px;height:14px;line-height:14px;border-radius:50%;margin-left:10px;font-size:14px;cursor:pointer}.table-filter .filter-tags .tag-item .action:hover{color:var(--el-color-primary)}.table-filter .tag-clear{margin-bottom:2px;margin-left:10px}.table-filter .filter-item .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter .filter-item .base-select .el-input .el-input__wrapper{box-shadow:none!important}.table-filter .filter-item .base-select .remote-input{width:100%}.table-filter .filter-item .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter .filter-item .base-select .el-empty__image svg{height:50px}.table-filter .filter-item .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter .filter-item .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--el-font-size-base)}.table-filter .filter-item .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter .filter-item .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-type{box-shadow:var(--el-box-shadow-light);background:var(--el-bg-color);z-index:3060;min-width:150px;max-height:300px;overflow:hidden;--el-font-size-base:12px}.table-filter-type .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-type .base-select .remote-input{width:100%}.table-filter-type .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-type .base-select .el-empty__image svg{height:50px}.table-filter-type .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-type .base-select .select-spinner ul{margin:0;padding:0}.table-filter-type .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;font-size:var(--el-font-size-base)}.table-filter-type .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-type .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-toggle{padding:0 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-width:120px;font-size:12px}.table-filter-toggle .current-filter-label{margin-right:20px}.table-filter-List{box-shadow:0 2px 8px 0 rgba(0,0,0,.2);background:var(--el-bg-color);z-index:3060;border-radius:2px;max-height:300px;overflow-y:auto;font-size:12px}.table-filter-List ul{width:100%;margin:0;padding:0}.table-filter-List ul li{width:100%;list-style:none;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;cursor:pointer}.table-filter-List ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-List ul li.active{color:var(--el-color-primary);font-weight:600}.table-filter-tag-popper{max-height:400px;overflow:auto;padding:0!important;width:250px!important}.table-filter-tag-popper .select-list .item{line-height:18px;cursor:pointer;padding:6px 10px;font-size:12px}.table-filter-tag-popper .select-list .item:hover{background-color:var(--el-fill-color-light)}.table-filter-tag-popper .select-list .item.active{color:var(--el-color-primary);font-weight:700}.detail-info{flex:1}.detail-info .detail-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.detail-info .title{border-left:3px solid var(--el-color-primary);padding-left:10px;line-height:1.2}.detail-info+.detail-info{margin-top:30px}.detail-info.card{background:var(--el-bg-color);border-radius:0;opacity:1;border:1px solid var(--el-border-color)}.detail-info.card[shadow]{box-shadow:var(--el-box-shadow-lighter)}.detail-info.card .detail-info-header{height:50px;border-bottom:1px solid var(--el-border-color);margin:0;padding:0 20px}.detail-info.card .detail-info-header .title{border-left:0;padding:0}.detail-info.card .detail-info-body{padding:10px 20px 20px 20px;margin:0}.detail-info .detail-info-body{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}.detail-info .detail-info-body .table-detail-col{box-sizing:border-box}.detail-info .detail-info-body .item-col{line-height:20px;height:100%;box-sizing:border-box;display:flex}.detail-info .detail-info-body .item-col .label{padding:4px 0;color:var(--el-text-color-secondary);box-sizing:border-box;vertical-align:middle;float:left;display:flex;align-items:center}.detail-info .detail-info-body .item-col .det{flex:1;padding:4px 10px;box-sizing:border-box;min-height:20px;height:100%;word-break:break-all;overflow:hidden}.detail-info .detail-info-body.table{border-top:1px solid var(--el-border-color);border-left:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .table-detail-col{padding:0!important;border-bottom:1px solid var(--el-border-color);border-right:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .item-col{background:var(--el-fill-color-light);border:1px solid var(--el-bg-color)}.detail-info .detail-info-body.table .item-col .label{padding-left:10px;padding-right:10px;width:100px}.detail-info .detail-info-body.table .item-col .det{border-left:1px solid var(--el-border-color);background-color:var(--el-bg-color)}
|
|
1
|
+
.constant-status{--el-tag-border-opacity:1;--el-tag-bg-opacity:1;--el-tag-font-size:var(--el-font-size-base)}.constant-status .el-tag__content{display:flex;align-items:center;line-height:1}.constant-status .el-icon,.constant-status .name{vertical-align:top;line-height:1}.constant-status .dot{width:5px;height:5px;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--el-tag-text-color);margin-right:5px}.constant-status.no-border{padding:0}.constant-status.dot-status{padding:0}.constant-status.dot-status .name{color:var(--el-text-color-primary)}.constant-status.el-tag--default{padding:0;--el-tag-bg-color:transparent;--el-tag-border-color:transparent;--el-tag-hover-color:var(--el-text-color-primary);--el-tag-text-color:var(--el-text-color-primary)}.constant-status.el-tag--blue{--el-tag-bg-color:rgba(236, 245, 255, var(--el-tag-bg-color));--el-tag-border-color:rgba(217, 236, 255, var(--el-tag-border-color));--el-tag-hover-color:rgba(111, 122, 175, 1);--el-tag-text-color:rgba(111, 122, 175, 1)}.constant-status.el-tag--blue.el-tag--dark{--el-tag-bg-color:rgba(111, 122, 175, 1);--el-tag-border-color:rgba(111, 122, 175, 1);--el-tag-hover-color:rgba(111, 122, 175, 0.8);--el-tag-text-color:#fff}.constant-status.el-tag--blue.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--yellow{--el-tag-bg-color:rgba(255, 251, 230, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(255, 229, 143, var(--el-tag-borer-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:rgba(212, 136, 6, 1)}.constant-status.el-tag--yellow.el-tag--dark{--el-tag-bg-color:rgba(212, 136, 6, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(212, 136, 6, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:#fff}.constant-status.el-tag--yellow.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blue-dark{--el-tag-bg-color:rgba(240, 245, 255, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(173, 198, 255, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:rgba(29, 57, 196, 1)}.constant-status.el-tag--blue-dark.el-tag--dark{--el-tag-bg-color:rgba(29, 57, 196, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(29, 57, 196, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blue-dark.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--red-purple{--el-tag-bg-color:rgba(251, 243, 248, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(227, 206, 219, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:rgba(191, 117, 163, 1)}.constant-status.el-tag--red-purple.el-tag--dark{--el-tag-bg-color:rgba(191, 117, 163, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(191, 117, 163, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:#fff}.constant-status.el-tag--red-purple.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blueness{--el-tag-bg-color:rgba(243, 250, 251, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(194, 213, 221, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:rgba(99, 150, 177, 1)}.constant-status.el-tag--blueness.el-tag--dark{--el-tag-bg-color:rgba(99, 150, 177, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(99, 150, 177, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blueness.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.no-border{border:0!important;background:0 0}.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;align-items:flex-start}.curd-form:not(.el-form--inline) .el-form-item{flex:0 0 100%;box-sizing:border-box}.curd-form .form-item{width:100%;display:flex}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}.table-container .table-pager{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.table-container .table-pager .pagination{justify-content:end;font-weight:400}.table-container .table-control{display:flex;justify-content:space-between;padding-bottom:10px;align-items:flex-end}.table-container .table-control .min-control>.el-button{margin-right:10px}.table-container .s-table-filter .el-form--inline .el-form-item{margin-right:15px}.table-container .el-button+.dropdown-item{margin-left:10px}.table-container .copy{cursor:pointer;margin-right:3px}.table-container .header-td{display:flex;align-items:center;word-break:break-word}.table-container .header-td.center{justify-content:center}.table-container .header-td.right{justify-content:flex-end}.table-container .filter-dropdown-toggle{display:inline-block;line-height:1;cursor:pointer;position:relative;margin-left:3px}.table-container .filter-dropdown-toggle.active{color:var(--el-color-primary)}.table-container .table-menu{display:inline-block;vertical-align:middle;position:relative}.table-container .table-menu .table-menu-item{color:var(--el-button-text-color);font-size:14px;border-radius:4px;border:1px solid var(--el-button-border-color);padding:0;height:28px;width:28px}.table-container .table-menu .table-menu-item:not(.is-disabled):active,.table-container .table-menu .table-menu-item:not(.is-disabled):focus{border-color:var(--el-button-border-color)}.table-container .table-menu .table-menu-item+.table-menu-item{margin-left:3px}.table-container .table-menu .table-menu-item:hover{background-color:var(--el-fill-color-light);border-color:var(--el-button-border-color)}.table-container .table-menu .current-size{color:var(--el-color-primary)}.table-container .simple-page{padding:20px 0;text-align:right}.table-container .simple-page>span{margin:0 10px}.curd-table-dropdown-menu .el-dropdown-menu__item{padding:0}.curd-table-dropdown-menu .el-dropdown-menu__item:hover{background-color:var(--el-fill-color-light)}.curd-table-dropdown-menu .el-dropdown-menu__item .el-button{display:block;padding:5px 16px;flex:1;text-align:left;font-size:12px}.table-main-filter-dropdown{padding:0}.table-main-filter-dropdown .search{position:relative;margin-bottom:5px}.table-main-filter-dropdown .search input{outline:0;border:0;width:100%;padding:5px 10px;background:#f4f4f4}.table-main-filter-dropdown .search .icon-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.table-main-filter-dropdown .search .icon-close1{position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.7}.table-main-filter-dropdown .search .icon-close1:hover{opacity:1;color:#444}.table-main-filter-dropdown .select li{line-height:30px;padding:0 20px;list-style:none;cursor:pointer}.table-main-filter-dropdown .select li:hover{background:#f4f4f4}.table-main-filter-dropdown .select li.active{color:var(--el-color-primary)}.filter-type-popper{width:auto!important;min-width:0!important;padding:0!important;box-shadow:none!important}.table-filter{display:flex;flex-direction:column;position:relative}.table-filter .filter-search-box{min-height:32px;border-width:1px;border-style:solid;border-color:var(--el-border-color);display:flex;min-width:460px;align-items:center;justify-items:center;justify-content:space-between;overflow:hidden;border-radius:var(--el-border-radius-base);transition:all .3s}.table-filter .filter-search-box.is-focus{border-color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action{height:32px;line-height:32px;align-self:flex-end;display:flex}.table-filter .filter-search-box .filter-action div{cursor:pointer}.table-filter .filter-search-box .filter-action .empty{color:var(--el-color-info);margin-right:15px;padding-left:10px}.table-filter .filter-search-box .filter-action .empty:hover{color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action .search{padding:0 20px;text-align:center;position:relative;display:flex;align-items:center}.table-filter .filter-search-box .filter-action .search:before{content:"";display:block;width:1px;height:20px;background:var(--el-border-color);position:absolute;left:0;top:50%;transform:translateY(-50%)}.table-filter .filter-search-box .filter-action .search:hover{color:var(--el-color-primary)}.table-filter .filter-external .el-form-item{margin-bottom:10px}.table-filter .filter-tags{height:100%;flex-wrap:wrap;display:flex;flex:1;align-items:flex-start;justify-items:center}.table-filter .filter-tags .tag-title{font-size:12px;color:var(--el-text-color-placeholder);height:24px;line-height:24px;margin:0 15px 5px 0}.table-filter .filter-tags .dropdown-toggle{white-space:nowrap;display:flex;align-items:center;justify-items:center;font-size:12px}.table-filter .filter-tags .tag-list{flex:1;display:flex;flex-wrap:wrap}.table-filter .filter-tags .tag-item{height:24px;line-height:24px;white-space:nowrap;display:flex;align-items:center;justify-items:center;padding:0 10px;color:var(--el-color-info-dark-2);background:var(--el-color-info-light-9);font-size:12px;border-radius:var(--el-border-radius-base);margin-right:5px;margin-bottom:10px;cursor:pointer}.table-filter .filter-tags .tag-item .action{color:var(--el-color-info-light-5);text-align:center;width:14px;height:14px;line-height:14px;border-radius:50%;margin-left:10px;font-size:14px;cursor:pointer}.table-filter .filter-tags .tag-item .action:hover{color:var(--el-color-primary)}.table-filter .tag-clear{margin-bottom:2px;margin-left:10px}.table-filter .filter-item .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter .filter-item .base-select .el-input .el-input__wrapper{box-shadow:none!important}.table-filter .filter-item .base-select .remote-input{width:100%}.table-filter .filter-item .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter .filter-item .base-select .el-empty__image svg{height:50px}.table-filter .filter-item .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter .filter-item .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--el-font-size-base)}.table-filter .filter-item .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter .filter-item .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-type{box-shadow:var(--el-box-shadow-light);background:var(--el-bg-color);z-index:3060;min-width:150px;max-height:300px;overflow:hidden;--el-font-size-base:12px}.table-filter-type .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-type .base-select .remote-input{width:100%}.table-filter-type .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-type .base-select .el-empty__image svg{height:50px}.table-filter-type .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-type .base-select .select-spinner ul{margin:0;padding:0}.table-filter-type .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;font-size:var(--el-font-size-base)}.table-filter-type .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-type .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-toggle{padding:0 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-width:120px;font-size:12px}.table-filter-toggle .current-filter-label{margin-right:20px}.table-filter-List{box-shadow:0 2px 8px 0 rgba(0,0,0,.2);background:var(--el-bg-color);z-index:3060;border-radius:2px;max-height:300px;overflow-y:auto;font-size:12px}.table-filter-List ul{width:100%;margin:0;padding:0}.table-filter-List ul li{width:100%;list-style:none;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;cursor:pointer}.table-filter-List ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-List ul li.active{color:var(--el-color-primary);font-weight:600}.table-filter-tag-popper{max-height:400px;overflow:auto;padding:0!important;width:250px!important}.table-filter-tag-popper .select-list .item{line-height:18px;cursor:pointer;padding:6px 10px;font-size:12px}.table-filter-tag-popper .select-list .item:hover{background-color:var(--el-fill-color-light)}.table-filter-tag-popper .select-list .item.active{color:var(--el-color-primary);font-weight:700}.detail-info{flex:1}.detail-info .detail-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.detail-info .title{border-left:3px solid var(--el-color-primary);padding-left:10px;line-height:1.2}.detail-info+.detail-info{margin-top:30px}.detail-info.card{background:var(--el-bg-color);border-radius:0;opacity:1;border:1px solid var(--el-border-color)}.detail-info.card[shadow]{box-shadow:var(--el-box-shadow-lighter)}.detail-info.card .detail-info-header{height:50px;border-bottom:1px solid var(--el-border-color);margin:0;padding:0 20px}.detail-info.card .detail-info-header .title{border-left:0;padding:0}.detail-info.card .detail-info-body{padding:10px 20px 20px 20px;margin:0}.detail-info .detail-info-body{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}.detail-info .detail-info-body .table-detail-col{box-sizing:border-box}.detail-info .detail-info-body .item-col{line-height:20px;height:100%;box-sizing:border-box;display:flex}.detail-info .detail-info-body .item-col .label{padding:4px 0;color:var(--el-text-color-secondary);box-sizing:border-box;vertical-align:middle;float:left;display:flex;align-items:center}.detail-info .detail-info-body .item-col .det{flex:1;padding:4px 10px;box-sizing:border-box;min-height:20px;height:100%;word-break:break-all;overflow:hidden}.detail-info .detail-info-body.table{border-top:1px solid var(--el-border-color);border-left:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .table-detail-col{padding:0!important;border-bottom:1px solid var(--el-border-color);border-right:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .item-col{background:var(--el-fill-color-light);border:1px solid var(--el-bg-color)}.detail-info .detail-info-body.table .item-col .label{padding-left:10px;padding-right:10px;width:100px}.detail-info .detail-info-body.table .item-col .det{border-left:1px solid var(--el-border-color);background-color:var(--el-bg-color)}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="simple-page">
|
|
3
|
-
<span v-if="props.total > -1">共 {{ props.total }} 条</span>
|
|
4
|
-
<span v-if="props.total == -1"
|
|
5
|
-
><el-icon class="is-loading"><Loading /></el-icon>总页数计算中...</span
|
|
6
|
-
>
|
|
7
|
-
<span
|
|
8
|
-
>第 {{ props.currentPage }}<span v-if="maxPage > 0">/{{ maxPage }}</span> 页</span
|
|
9
|
-
>
|
|
10
|
-
|
|
11
|
-
<el-button :disabled="props.currentPage <= 1" @click="prev"><</el-button>
|
|
12
|
-
<el-button :disabled="(total > -1 && props.currentPage >= maxPage) || list.length < props.pageSize" @click="next">></el-button>
|
|
13
|
-
</div>
|
|
14
|
-
</template>
|
|
15
|
-
<script lang="ts" setup>
|
|
16
|
-
import { ref, computed, PropType,onBeforeUnmount,watch } from "vue"
|
|
17
|
-
import { Loading } from "@element-plus/icons-vue"
|
|
18
|
-
const props = defineProps({
|
|
19
|
-
currentPage: {
|
|
20
|
-
type: Number,
|
|
21
|
-
default: 1,
|
|
22
|
-
},
|
|
23
|
-
pageSize: {
|
|
24
|
-
type: Number,
|
|
25
|
-
default: 10,
|
|
26
|
-
},
|
|
27
|
-
total: {
|
|
28
|
-
type: Number,
|
|
29
|
-
default: -1,
|
|
30
|
-
},
|
|
31
|
-
list: {
|
|
32
|
-
type: Array as PropType<any[]>,
|
|
33
|
-
default: () => [],
|
|
34
|
-
},
|
|
35
|
-
fetchData: {
|
|
36
|
-
type: Function,
|
|
37
|
-
default: null,
|
|
38
|
-
},
|
|
39
|
-
})
|
|
40
|
-
const emit = defineEmits(["update:currentPage", "current-change"])
|
|
41
|
-
const lastIdMap = ref<any>({})
|
|
42
|
-
const total = ref(-1)
|
|
43
|
-
const maxPage = computed(() => Math.ceil(props.total / props.pageSize))
|
|
44
|
-
const totalIdList = props.list.map((a) => a.id) || []
|
|
45
|
-
const prev = () => {
|
|
46
|
-
emit("update:currentPage", props.currentPage - 1)
|
|
47
|
-
emit("current-change", { query: { lastId: lastIdMap.value[props.currentPage - 2] } })
|
|
48
|
-
}
|
|
49
|
-
const next = () => {
|
|
50
|
-
emit("update:currentPage", props.currentPage + 1)
|
|
51
|
-
emit("current-change", { query: { lastId: lastIdMap.value[props.currentPage] } })
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const initLastId = () => {
|
|
55
|
-
if (props.list && props.list.length) {
|
|
56
|
-
const c = props.currentPage
|
|
57
|
-
lastIdMap.value[c] = props.list[props.list.length - 1].id
|
|
58
|
-
}
|
|
59
|
-
if (props.list.length < props.pageSize) {
|
|
60
|
-
// total.value = props.list.length
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
initLastId()
|
|
64
|
-
let timer: any = null
|
|
65
|
-
let isOn = true
|
|
66
|
-
const fetchData = () => {
|
|
67
|
-
if (!isOn) return
|
|
68
|
-
if (props.total == -1 && props.fetchData) {
|
|
69
|
-
timer = setTimeout(() => {
|
|
70
|
-
props.fetchData({ showLoading: false }).finally(() => {
|
|
71
|
-
fetchData()
|
|
72
|
-
})
|
|
73
|
-
}, 3000)
|
|
74
|
-
} else if (props.total > -1) {
|
|
75
|
-
total.value = props.total
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
fetchData()
|
|
79
|
-
onBeforeUnmount(() => {
|
|
80
|
-
isOn = false
|
|
81
|
-
timer && window.clearTimeout(timer)
|
|
82
|
-
})
|
|
83
|
-
watch(
|
|
84
|
-
() => props.list,
|
|
85
|
-
(val) => {
|
|
86
|
-
if (!val.length) return
|
|
87
|
-
lastIdMap.value[props.currentPage] = val[val.length - 1].id
|
|
88
|
-
for (let i = 0; i < val.length; i++) {
|
|
89
|
-
if (!totalIdList.includes(val[i].id)) {
|
|
90
|
-
totalIdList.push(val[i].id)
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (val.length < props.pageSize) {
|
|
94
|
-
// total.value = totalIdList.length
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
</script>
|
|
99
|
-
<style lang="scss" scoped>
|
|
100
|
-
|
|
101
|
-
</style>
|