easybill-ui 1.2.26 → 1.3.0
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/CurdGroupForm/index.ts +2 -0
- package/components/CurdGroupForm/src/CurdGroupForm.vue +95 -0
- package/components/CurdGroupForm/src/components/CurdFormGroup.vue +39 -0
- package/components/CurdGroupForm/src/hooks/useFormHook.ts +55 -0
- package/components/CurdGroupForm/types.ts +22 -0
- package/components/FormDialog/src/FormDialog.vue +107 -47
- package/components/FormDialog/src/hooks/index.ts +2 -0
- package/components/FormDialog/src/hooks/useStepList.ts +49 -0
- package/components/FormDialog/src/hooks/useStepNavigation.ts +74 -0
- package/components/FormDialog/src/types.ts +29 -1
- package/index.ts +5 -2
- package/package.json +1 -1
- package/theme-chalk/curd-form.css +1 -1
- package/theme-chalk/curd-group-form.css +1 -0
- package/theme-chalk/index.css +1 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<CurdFormGroup v-for="(item, index) in props.schema.items" v-show="!schemaItemHidden(item)" :key="index" :item="item" :title="item.groupName" :icon="item.icon" :label-position="item.labelPosition">
|
|
3
|
+
<template v-if="item.headerRight" #headerRight>
|
|
4
|
+
<component :is="item.headerRight" :schema="props.schema" :schemaItem="item" :form-model="form" />
|
|
5
|
+
</template>
|
|
6
|
+
<template v-if="item.headerTitle" #title>
|
|
7
|
+
<component :is="item.headerTitle" :schema="props.schema" :schemaItem="item" :form-model="form" />
|
|
8
|
+
</template>
|
|
9
|
+
<template v-if="item.headerBottom" #headerBottom>
|
|
10
|
+
<component :is="item.headerBottom" :schema="props.schema" :schemaItem="item" :form-model="form" />
|
|
11
|
+
</template>
|
|
12
|
+
<div class="curdform-group-content" data-instance-form-wrap>
|
|
13
|
+
<CurdForm
|
|
14
|
+
:ref="(el: Element | ComponentPublicInstance | null) => (formRef[(item.step || '') + item.groupName + index] = el as InstanceType<typeof CurdForm>)"
|
|
15
|
+
v-model="form"
|
|
16
|
+
:form-schema="item.schema"
|
|
17
|
+
:extend-context="extendContext"
|
|
18
|
+
:validateOnRuleChange="false"
|
|
19
|
+
:scroll-to-error="true"
|
|
20
|
+
@change="onChange"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
</CurdFormGroup>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script lang="ts" setup>
|
|
27
|
+
import { CurdForm } from "easybill-ui"
|
|
28
|
+
import type { ComponentPublicInstance, PropType } from "vue"
|
|
29
|
+
import { watch } from "vue"
|
|
30
|
+
import type { CurdGroupFormSchema } from "../types"
|
|
31
|
+
import CurdFormGroup from "./components/CurdFormGroup.vue"
|
|
32
|
+
import { useFormHook } from "./hooks/useFormHook"
|
|
33
|
+
const props = defineProps({
|
|
34
|
+
modelValue: {
|
|
35
|
+
type: Object as PropType<Record<string, unknown>>,
|
|
36
|
+
default: () => ({}),
|
|
37
|
+
},
|
|
38
|
+
schema: {
|
|
39
|
+
type: Object as PropType<CurdGroupFormSchema>,
|
|
40
|
+
default: () => ({}),
|
|
41
|
+
},
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
const emits = defineEmits(["update:modelValue", "change", "loadOptions"])
|
|
45
|
+
const { form, formRef, schema: formSchema, validate, schemaItemHidden } = useFormHook()
|
|
46
|
+
const init = () => {
|
|
47
|
+
form.value = props.modelValue || {}
|
|
48
|
+
formSchema.value = props.schema
|
|
49
|
+
}
|
|
50
|
+
init()
|
|
51
|
+
watch(
|
|
52
|
+
() => props.schema,
|
|
53
|
+
() => {
|
|
54
|
+
formSchema.value = props.schema
|
|
55
|
+
},
|
|
56
|
+
)
|
|
57
|
+
|
|
58
|
+
watch(
|
|
59
|
+
() => props.modelValue,
|
|
60
|
+
() => {
|
|
61
|
+
if (form.value != props.modelValue) {
|
|
62
|
+
form.value = props.modelValue
|
|
63
|
+
// emits("update:modelValue", form.value)
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
)
|
|
67
|
+
|
|
68
|
+
const loadOptions = (prop: string, config?: unknown) => {
|
|
69
|
+
if (!props.schema) return
|
|
70
|
+
let has = false
|
|
71
|
+
for (const index in props.schema.items) {
|
|
72
|
+
const group = props.schema.items[index]
|
|
73
|
+
const formItem = group.schema.formItem
|
|
74
|
+
for (const i in formItem) {
|
|
75
|
+
const item = formItem[i]
|
|
76
|
+
if (item.prop == prop) {
|
|
77
|
+
has = true
|
|
78
|
+
formRef.value[(group.step || "") + group.groupName + index]?.loadOptions(prop, config)
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (!has) {
|
|
83
|
+
emits("loadOptions", prop)
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
const extendContext = {
|
|
87
|
+
loadOptions,
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const onChange = (v: unknown, l: unknown) => {
|
|
91
|
+
emits("change", v, l)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
defineExpose({ loadOptions, validate })
|
|
95
|
+
</script>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="curdform-group" :style="props.item.style" :class="props.item.class">
|
|
3
|
+
<div v-if="props.title || $slots.title" class="curdform-group-head">
|
|
4
|
+
<div class="left">
|
|
5
|
+
<span v-if="props.icon" class="icon"><i v-if="typeof props.icon == 'string'" :class="props.icon"></i><component v-else :is="props.icon"></component></span>
|
|
6
|
+
<div v-if="!$slots.title" class="title">{{ props.title }}</div>
|
|
7
|
+
<slot name="title"></slot>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="right">
|
|
10
|
+
<slot name="headerRight"></slot>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div v-if="props.item.desc" class="curdform-group-desc">{{ props.item.desc }}</div>
|
|
14
|
+
<slot name="headerBottom"></slot>
|
|
15
|
+
<div v-if="$slots.default" class="curdform-group-body">
|
|
16
|
+
<slot></slot>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script lang="ts" setup>
|
|
22
|
+
import type { PropType } from "vue"
|
|
23
|
+
import type { CurdGroupFormSchemaItem } from "../../types"
|
|
24
|
+
|
|
25
|
+
const props = defineProps({
|
|
26
|
+
title: {
|
|
27
|
+
type: String,
|
|
28
|
+
default: "",
|
|
29
|
+
},
|
|
30
|
+
icon: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: "",
|
|
33
|
+
},
|
|
34
|
+
item: {
|
|
35
|
+
type: Object as PropType<CurdGroupFormSchemaItem>,
|
|
36
|
+
default: () => ({}),
|
|
37
|
+
},
|
|
38
|
+
})
|
|
39
|
+
</script>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { CurdForm } from "easybill-ui"
|
|
2
|
+
import { ref, type Ref } from "vue"
|
|
3
|
+
import type { Schema, SchemaItem } from "../../types"
|
|
4
|
+
|
|
5
|
+
export const useFormHook = (): {
|
|
6
|
+
form: Ref<Record<string, unknown>>
|
|
7
|
+
formRef: Ref<Record<string, InstanceType<typeof CurdForm>>>
|
|
8
|
+
submit: () => void
|
|
9
|
+
schema: Ref<Schema | undefined>
|
|
10
|
+
validate: (callback: (valid: boolean) => void) => void
|
|
11
|
+
loading: Ref<boolean>
|
|
12
|
+
schemaItemHidden: (item: SchemaItem) => boolean
|
|
13
|
+
} => {
|
|
14
|
+
const formRef = ref<Record<string, InstanceType<typeof CurdForm>>>({})
|
|
15
|
+
const form = ref<Record<string, unknown>>({})
|
|
16
|
+
const schema = ref<Schema>()
|
|
17
|
+
const loading = ref(false)
|
|
18
|
+
const schemaItemHidden = (item: SchemaItem) => {
|
|
19
|
+
if (item?.hidden && item?.hidden instanceof Function) {
|
|
20
|
+
return item.hidden(form.value, item)
|
|
21
|
+
}
|
|
22
|
+
return !!item?.hidden
|
|
23
|
+
}
|
|
24
|
+
const validate = (callback: (valid: boolean) => void) => {
|
|
25
|
+
const validMap: boolean[] = []
|
|
26
|
+
for (const i in formRef.value) {
|
|
27
|
+
const curSchema = schema.value?.items.find((a, index) => (a.step || "") + a.groupName + index == i)
|
|
28
|
+
// 如果当前item隐藏了，则直接跳过校验
|
|
29
|
+
if (curSchema && schemaItemHidden(curSchema)) {
|
|
30
|
+
validMap.push(true)
|
|
31
|
+
continue
|
|
32
|
+
}
|
|
33
|
+
const cur = formRef.value[i]
|
|
34
|
+
cur.validate((valid: boolean) => {
|
|
35
|
+
validMap.push(valid)
|
|
36
|
+
if (validMap.length >= Object.keys(formRef.value).length && callback) callback(validMap.every((a) => a))
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
const submit = () => {
|
|
41
|
+
validate((valid) => {
|
|
42
|
+
if (!valid) return
|
|
43
|
+
})
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return {
|
|
47
|
+
form,
|
|
48
|
+
formRef,
|
|
49
|
+
submit,
|
|
50
|
+
schema,
|
|
51
|
+
validate,
|
|
52
|
+
loading,
|
|
53
|
+
schemaItemHidden,
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { Fields, FormSchema } from "easybill-ui"
|
|
2
|
+
import type { Component, VNode } from "vue"
|
|
3
|
+
export interface CurdGroupFormSchema {
|
|
4
|
+
items: CurdGroupFormSchemaItem[]
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export interface CurdGroupFormSchemaItem {
|
|
8
|
+
groupName: string
|
|
9
|
+
schema: FormSchema
|
|
10
|
+
icon?: string
|
|
11
|
+
prop?: string // 唯一标识 不可修改
|
|
12
|
+
desc?: string
|
|
13
|
+
step?: string
|
|
14
|
+
stepIndex?: number
|
|
15
|
+
class?: string
|
|
16
|
+
style?: string
|
|
17
|
+
labelPosition?: string | "left" | "right" | "top"
|
|
18
|
+
hidden?: boolean | ((form: Fields, schemaItem: CurdGroupFormSchemaItem) => boolean)
|
|
19
|
+
headerRight?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
|
|
20
|
+
headerBottom?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
|
|
21
|
+
headerTitle?: Component | ((props: { schema: CurdGroupFormSchema; schemaItem: CurdGroupFormSchemaItem; formModel: Fields }) => VNode | VNode[])
|
|
22
|
+
}
|
|
@@ -1,30 +1,43 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component :is="componentName" v-bind="containerProps">
|
|
3
|
-
<el-steps v-if="
|
|
4
|
-
<el-step v-for="(
|
|
3
|
+
<el-steps v-if="isGroupMode && hasMultipleSteps && !stepComponent" :active="activeStep" align-center style="margin-bottom: 20px; position: sticky; top: 0; z-index: 2000; background: var(--el-bg-color)" v-bind="stepProps">
|
|
4
|
+
<el-step v-for="(stepItem, i) in stepList" :key="i" :title="stepItem.name" />
|
|
5
5
|
</el-steps>
|
|
6
|
+
<component v-if="stepComponent" :is="stepComponent" :step="activeStep" :steps="stepList" />
|
|
6
7
|
<div v-loading="confirmLoading" class="form-dialog-content">
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
<!-- 单表单模式 -->
|
|
9
|
+
<curd-form v-if="isFormMode" ref="curdFormRef" v-model="form" :fields="fields" :form-schema="formSchema" :extend-context="extendContexts" />
|
|
10
|
+
<!-- 分组表单模式 -->
|
|
11
|
+
<template v-else-if="isGroupMode">
|
|
12
|
+
<div v-for="(stepItem, i) in stepList" :key="i" class="form-dialog-step" v-show="activeStep === i">
|
|
13
|
+
<curd-group-form :ref="(el: any) => el && (groupFormRef[i] = el)" v-model="form" :schema="stepItem.schema" :fields="fields" :extend-context="extendContexts" />
|
|
14
|
+
</div>
|
|
9
15
|
</template>
|
|
10
16
|
</div>
|
|
11
17
|
<template #footer>
|
|
12
|
-
<
|
|
18
|
+
<component v-if="footerComponent" :is="footerComponent" />
|
|
19
|
+
<span v-else-if="handleOk" class="dialog-footer">
|
|
13
20
|
<el-button v-if="cancelBtnTextLabel" :disabled="confirmLoading" type="default" @click="onCancel()">{{ cancelBtnTextLabel }}</el-button>
|
|
14
|
-
<el-button v-if="
|
|
15
|
-
<el-button v-if="
|
|
16
|
-
<el-button v-if="
|
|
21
|
+
<el-button v-if="isGroupMode && hasMultipleSteps && canPrev" :disabled="confirmLoading" type="primary" plain @click="prev()">{{ t("el.formDialog.preStep") }}</el-button>
|
|
22
|
+
<el-button v-if="isGroupMode && hasMultipleSteps && canNext" :disabled="confirmLoading" type="primary" plain @click="next()">{{ t("el.formDialog.nextStep") }}</el-button>
|
|
23
|
+
<el-button v-if="!isGroupMode || isLastStep" :disabled="confirmLoading" type="primary" :loading="confirmLoading" @click="onOk">{{ confirmBtnTextLabel }}</el-button>
|
|
17
24
|
</span>
|
|
18
25
|
</template>
|
|
19
26
|
</component>
|
|
20
27
|
</template>
|
|
21
28
|
|
|
22
29
|
<script lang="ts">
|
|
23
|
-
import { useLocale } from "easybill-ui"
|
|
24
|
-
import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref,
|
|
30
|
+
import { CurdForm, CurdGroupForm, type CurdGroupFormSchema, useLocale } from "easybill-ui"
|
|
31
|
+
import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref, toRefs, useAttrs } from "vue"
|
|
25
32
|
import { type Fields, type FormSchema } from "../../CurdForm"
|
|
33
|
+
import { useStepList } from "./hooks/useStepList"
|
|
34
|
+
import { useStepNavigation } from "./hooks/useStepNavigation"
|
|
26
35
|
export default defineComponent({
|
|
27
36
|
name: "FormDialog",
|
|
37
|
+
components: {
|
|
38
|
+
CurdForm,
|
|
39
|
+
CurdGroupForm,
|
|
40
|
+
},
|
|
28
41
|
props: {
|
|
29
42
|
title: {
|
|
30
43
|
type: String,
|
|
@@ -35,14 +48,15 @@ export default defineComponent({
|
|
|
35
48
|
type: Function as PropType<() => void>,
|
|
36
49
|
default: null,
|
|
37
50
|
},
|
|
38
|
-
stepSchema: {
|
|
39
|
-
type: Array as PropType<{ name: string; description?: string; formSchema: FormSchema }[]>,
|
|
40
|
-
default: () => [],
|
|
41
|
-
},
|
|
42
51
|
formSchema: {
|
|
43
52
|
// 表单项
|
|
44
53
|
type: Object as PropType<FormSchema>,
|
|
45
|
-
default: () =>
|
|
54
|
+
default: () => null,
|
|
55
|
+
},
|
|
56
|
+
groupSchema: {
|
|
57
|
+
// 分组表单项
|
|
58
|
+
type: Object as PropType<CurdGroupFormSchema>,
|
|
59
|
+
default: () => null,
|
|
46
60
|
},
|
|
47
61
|
fields: {
|
|
48
62
|
// 默认值，一般编辑时传入
|
|
@@ -84,45 +98,66 @@ export default defineComponent({
|
|
|
84
98
|
type: String as PropType<"dialog" | "drawer">,
|
|
85
99
|
default: "dialog",
|
|
86
100
|
},
|
|
101
|
+
stepComponent: {
|
|
102
|
+
type: Object,
|
|
103
|
+
default: null,
|
|
104
|
+
},
|
|
105
|
+
footerComponent: {
|
|
106
|
+
type: Object,
|
|
107
|
+
default: null,
|
|
108
|
+
},
|
|
87
109
|
},
|
|
88
110
|
setup(props) {
|
|
89
111
|
const attrs = useAttrs()
|
|
90
112
|
const curdFormRef = ref()
|
|
91
113
|
const form = ref<Fields>({})
|
|
92
114
|
const state = reactive({
|
|
93
|
-
step: 0,
|
|
94
115
|
visible: true,
|
|
95
116
|
confirmLoading: false,
|
|
96
117
|
})
|
|
97
118
|
const { t } = useLocale()
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
const
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
if (valid) state.step++
|
|
110
|
-
})
|
|
111
|
-
}
|
|
112
|
-
}
|
|
119
|
+
|
|
120
|
+
// 模式判断
|
|
121
|
+
const isGroupMode = computed(() => !!props.groupSchema)
|
|
122
|
+
const isFormMode = computed(() => !!props.formSchema && !isGroupMode.value)
|
|
123
|
+
|
|
124
|
+
// 步骤列表
|
|
125
|
+
const { stepList, stepCount, hasMultipleSteps } = useStepList(computed(() => props.groupSchema))
|
|
126
|
+
|
|
127
|
+
// 步骤导航
|
|
128
|
+
const { activeStep, groupFormRef, canPrev, canNext, isLastStep, prev, next, validateCurrentStep } = useStepNavigation(stepCount)
|
|
129
|
+
|
|
113
130
|
const onOk = () => {
|
|
114
131
|
state.confirmLoading = true
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
132
|
+
|
|
133
|
+
const getValidatePromise = (): Promise<boolean> => {
|
|
134
|
+
if (isFormMode.value) {
|
|
135
|
+
return (
|
|
136
|
+
curdFormRef.value
|
|
137
|
+
?.validate()
|
|
138
|
+
.then(() => true)
|
|
139
|
+
.catch(() => false) ?? Promise.resolve(true)
|
|
140
|
+
)
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
return new Promise<boolean>((resolve) => {
|
|
144
|
+
validateCurrentStep((valid) => resolve(valid))
|
|
145
|
+
})
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
getValidatePromise()
|
|
149
|
+
.then(async (valid) => {
|
|
150
|
+
if (!valid) {
|
|
151
|
+
state.confirmLoading = false
|
|
152
|
+
return
|
|
153
|
+
}
|
|
118
154
|
const pass = await (props.handleOk && props.handleOk(form.value, state)).finally(() => (state.confirmLoading = false))
|
|
119
155
|
if (typeof pass == "undefined" || pass) {
|
|
120
156
|
state.visible = false
|
|
121
157
|
onCancel()
|
|
122
158
|
}
|
|
123
159
|
})
|
|
124
|
-
.catch((
|
|
125
|
-
console.error(e)
|
|
160
|
+
.catch(() => {
|
|
126
161
|
state.confirmLoading = false
|
|
127
162
|
})
|
|
128
163
|
}
|
|
@@ -141,16 +176,12 @@ export default defineComponent({
|
|
|
141
176
|
}, 300)
|
|
142
177
|
}
|
|
143
178
|
const loadOptions = (prop: string, config?: unknown) => {
|
|
144
|
-
if (
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
if (item.prop == prop) {
|
|
151
|
-
curdFormRef.value[i]?.loadOptions(prop, config)
|
|
152
|
-
}
|
|
153
|
-
}
|
|
179
|
+
if (isFormMode.value) {
|
|
180
|
+
curdFormRef.value?.loadOptions(prop, config)
|
|
181
|
+
} else if (isGroupMode.value) {
|
|
182
|
+
Object.values(groupFormRef.value).forEach((form) => {
|
|
183
|
+
form?.loadOptions(prop, config)
|
|
184
|
+
})
|
|
154
185
|
}
|
|
155
186
|
}
|
|
156
187
|
const extendContexts = {
|
|
@@ -186,11 +217,31 @@ export default defineComponent({
|
|
|
186
217
|
const formDialogContext = reactive({
|
|
187
218
|
form,
|
|
188
219
|
state,
|
|
220
|
+
stepList,
|
|
221
|
+
activeStep,
|
|
189
222
|
loadOptions,
|
|
190
223
|
prev,
|
|
191
224
|
next,
|
|
225
|
+
goTo: (step: number) => {
|
|
226
|
+
if (step >= 0 && step < stepCount.value) {
|
|
227
|
+
// 验证当前步骤
|
|
228
|
+
validateCurrentStep((valid) => {
|
|
229
|
+
if (valid) {
|
|
230
|
+
activeStep.value = step
|
|
231
|
+
}
|
|
232
|
+
})
|
|
233
|
+
}
|
|
234
|
+
},
|
|
192
235
|
close: onBeforeClose,
|
|
193
236
|
handleOk: onOk,
|
|
237
|
+
validateCurrentStep,
|
|
238
|
+
canPrev,
|
|
239
|
+
canNext,
|
|
240
|
+
isLastStep,
|
|
241
|
+
isGroupMode,
|
|
242
|
+
isFormMode,
|
|
243
|
+
confirmBtnTextLabel,
|
|
244
|
+
cancelBtnTextLabel,
|
|
194
245
|
})
|
|
195
246
|
provide("formDialogContext", formDialogContext)
|
|
196
247
|
return {
|
|
@@ -199,7 +250,7 @@ export default defineComponent({
|
|
|
199
250
|
onCancel,
|
|
200
251
|
onBeforeClose,
|
|
201
252
|
curdFormRef,
|
|
202
|
-
|
|
253
|
+
stepList,
|
|
203
254
|
form,
|
|
204
255
|
prev,
|
|
205
256
|
next,
|
|
@@ -209,6 +260,15 @@ export default defineComponent({
|
|
|
209
260
|
cancelBtnTextLabel,
|
|
210
261
|
componentName,
|
|
211
262
|
containerProps,
|
|
263
|
+
isGroupMode,
|
|
264
|
+
isFormMode,
|
|
265
|
+
hasMultipleSteps,
|
|
266
|
+
activeStep,
|
|
267
|
+
groupFormRef,
|
|
268
|
+
canPrev,
|
|
269
|
+
canNext,
|
|
270
|
+
isLastStep,
|
|
271
|
+
validateCurrentStep,
|
|
212
272
|
}
|
|
213
273
|
},
|
|
214
274
|
})
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { computed, type ComputedRef } from "vue"
|
|
2
|
+
import type { CurdGroupFormSchema } from "../../../CurdGroupForm/types"
|
|
3
|
+
|
|
4
|
+
export interface StepItem {
|
|
5
|
+
name: string
|
|
6
|
+
stepIndex?: number
|
|
7
|
+
schema: {
|
|
8
|
+
items: CurdGroupFormSchema["items"]
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function useStepList(groupSchema: ComputedRef<CurdGroupFormSchema | null>) {
|
|
13
|
+
const stepList = computed<StepItem[]>(() => {
|
|
14
|
+
if (!groupSchema.value?.items) return []
|
|
15
|
+
|
|
16
|
+
const groups = new Map<string, StepItem>()
|
|
17
|
+
|
|
18
|
+
groupSchema.value.items.forEach((item) => {
|
|
19
|
+
const stepName = item.step || "其他"
|
|
20
|
+
|
|
21
|
+
if (!groups.has(stepName)) {
|
|
22
|
+
groups.set(stepName, {
|
|
23
|
+
name: stepName,
|
|
24
|
+
stepIndex: item.stepIndex,
|
|
25
|
+
schema: { items: [] }
|
|
26
|
+
})
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
groups.get(stepName)!.schema.items.push(item)
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
// 按 stepIndex 排序（undefined 排最后）
|
|
33
|
+
return Array.from(groups.values()).sort((a, b) => {
|
|
34
|
+
const indexA = a.stepIndex ?? Infinity
|
|
35
|
+
const indexB = b.stepIndex ?? Infinity
|
|
36
|
+
return indexA - indexB
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
const stepCount = computed(() => stepList.value.length)
|
|
41
|
+
|
|
42
|
+
const hasMultipleSteps = computed(() => stepList.value.length > 1)
|
|
43
|
+
|
|
44
|
+
return {
|
|
45
|
+
stepList,
|
|
46
|
+
stepCount,
|
|
47
|
+
hasMultipleSteps
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { computed, ref, type Ref } from "vue"
|
|
2
|
+
import type { CurdGroupForm } from "../../../CurdGroupForm"
|
|
3
|
+
|
|
4
|
+
interface ValidateFunction {
|
|
5
|
+
validate: (callback: (valid: boolean) => void) => void
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export function useStepNavigation(stepCount: Ref<number>, onStepChange?: (step: number) => void) {
|
|
9
|
+
const activeStep = ref(0)
|
|
10
|
+
const groupFormRef = ref<Record<number, InstanceType<typeof CurdGroupForm>>>({})
|
|
11
|
+
|
|
12
|
+
const canPrev = computed(() => activeStep.value > 0)
|
|
13
|
+
const canNext = computed(() => activeStep.value < stepCount.value - 1)
|
|
14
|
+
const isLastStep = computed(() => activeStep.value >= stepCount.value - 1)
|
|
15
|
+
|
|
16
|
+
const setStep = (newStep: number) => {
|
|
17
|
+
if (newStep >= 0 && newStep < stepCount.value) {
|
|
18
|
+
activeStep.value = newStep
|
|
19
|
+
onStepChange?.(newStep)
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const prev = () => {
|
|
24
|
+
if (canPrev.value) {
|
|
25
|
+
setStep(activeStep.value - 1)
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const next = (onValidateFail?: () => void) => {
|
|
30
|
+
if (!canNext.value) return false
|
|
31
|
+
|
|
32
|
+
const currentForm = groupFormRef.value[activeStep.value] as unknown as ValidateFunction | undefined
|
|
33
|
+
if (currentForm?.validate) {
|
|
34
|
+
currentForm.validate((valid: boolean) => {
|
|
35
|
+
if (valid) {
|
|
36
|
+
setStep(activeStep.value + 1)
|
|
37
|
+
} else if (onValidateFail) {
|
|
38
|
+
onValidateFail()
|
|
39
|
+
}
|
|
40
|
+
})
|
|
41
|
+
} else {
|
|
42
|
+
setStep(activeStep.value + 1)
|
|
43
|
+
}
|
|
44
|
+
return true
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const validateCurrentStep = (callback: (valid: boolean) => void) => {
|
|
48
|
+
const currentForm = groupFormRef.value[activeStep.value] as unknown as ValidateFunction | undefined
|
|
49
|
+
if (currentForm?.validate) {
|
|
50
|
+
currentForm.validate(callback)
|
|
51
|
+
} else {
|
|
52
|
+
callback(true)
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const validateCurrentStepAsync = (): Promise<boolean> => {
|
|
57
|
+
return new Promise((resolve) => {
|
|
58
|
+
validateCurrentStep((valid) => resolve(valid))
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return {
|
|
63
|
+
activeStep,
|
|
64
|
+
groupFormRef,
|
|
65
|
+
canPrev,
|
|
66
|
+
canNext,
|
|
67
|
+
isLastStep,
|
|
68
|
+
setStep,
|
|
69
|
+
prev,
|
|
70
|
+
next,
|
|
71
|
+
validateCurrentStep,
|
|
72
|
+
validateCurrentStepAsync,
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
+
import type { CurdGroupFormSchema } from "../../CurdGroupForm/types"
|
|
1
2
|
import type { DialogProps, StepProps } from "element-plus"
|
|
2
3
|
import type { Fields, FormContext, FormSchema } from "../../CurdForm"
|
|
4
|
+
import type { StepItem } from "./hooks/useStepList"
|
|
3
5
|
|
|
4
6
|
export interface FormDialogOptions extends Partial<DialogProps> {
|
|
5
7
|
title?: string
|
|
6
8
|
width?: string | number
|
|
7
9
|
fields?: Fields
|
|
8
|
-
stepSchema?: { name: string; description?: string; formSchema: FormSchema }[]
|
|
9
10
|
formSchema?: FormSchema
|
|
11
|
+
groupSchema?: CurdGroupFormSchema
|
|
10
12
|
handleOk?: (modelRef: Fields) => Promise<void>
|
|
11
13
|
handleClose?: (e: "close" | "cancel") => void
|
|
12
14
|
setForm?: (form: Fields) => void
|
|
@@ -14,4 +16,30 @@ export interface FormDialogOptions extends Partial<DialogProps> {
|
|
|
14
16
|
extendContext?: Partial<FormContext>
|
|
15
17
|
confirmBtnText?: string
|
|
16
18
|
cancelBtnText?: string
|
|
19
|
+
stepComponent?: object
|
|
20
|
+
footerComponent?: object
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface FormDialogContext {
|
|
24
|
+
form: Fields
|
|
25
|
+
state: {
|
|
26
|
+
visible: boolean
|
|
27
|
+
confirmLoading: boolean
|
|
28
|
+
}
|
|
29
|
+
stepList: StepItem[]
|
|
30
|
+
activeStep: { value: number }
|
|
31
|
+
loadOptions: (prop: string, config?: unknown) => void
|
|
32
|
+
prev: () => void
|
|
33
|
+
next: () => void
|
|
34
|
+
goTo: (step: number) => void
|
|
35
|
+
close: () => void
|
|
36
|
+
handleOk: () => void
|
|
37
|
+
validateCurrentStep: (callback: (valid: boolean) => void) => void
|
|
38
|
+
canPrev: { value: boolean }
|
|
39
|
+
canNext: { value: boolean }
|
|
40
|
+
isLastStep: { value: boolean }
|
|
41
|
+
isGroupMode: { value: boolean }
|
|
42
|
+
isFormMode: { value: boolean }
|
|
43
|
+
confirmBtnTextLabel: { value: string }
|
|
44
|
+
cancelBtnTextLabel: { value: string }
|
|
17
45
|
}
|
package/index.ts
CHANGED
|
@@ -2,21 +2,24 @@ import type { Plugin } from "vue"
|
|
|
2
2
|
import ConstantStatus from "./components/ConstantStatus"
|
|
3
3
|
import CurdForm from "./components/CurdForm"
|
|
4
4
|
import CurdFormItem from "./components/CurdForm/src/CurdFormItem.vue"
|
|
5
|
+
import { CurdGroupForm } from "./components/CurdGroupForm"
|
|
5
6
|
import CurdTable from "./components/CurdTable"
|
|
6
7
|
import DetailInfo from "./components/DetailInfo"
|
|
7
8
|
import FormDialog from "./components/FormDialog"
|
|
8
9
|
import TableFilter from "./components/TableFilter"
|
|
9
10
|
import { makeInstaller } from "./utils/vue/make-installer"
|
|
10
11
|
|
|
11
|
-
const Components = [ConstantStatus, CurdForm, TableFilter, DetailInfo, CurdFormItem, CurdTable, FormDialog] as Plugin[]
|
|
12
|
+
const Components = [ConstantStatus, CurdForm, TableFilter, DetailInfo, CurdFormItem, CurdTable, FormDialog, CurdGroupForm] as Plugin[]
|
|
12
13
|
export * from "./components/ConstantStatus/src/types"
|
|
13
14
|
export * from "./components/CurdForm"
|
|
15
|
+
export * from "./components/CurdGroupForm/types"
|
|
14
16
|
export * from "./components/CurdTable/src/types"
|
|
15
17
|
export * from "./components/DetailInfo/src/types"
|
|
16
18
|
export * from "./components/FormDialog/src/types"
|
|
17
19
|
export * from "./components/TableFilter/types"
|
|
18
20
|
export * from "./utils/hooks/useGlobalConfig"
|
|
19
21
|
export * from "./utils/hooks/useLocal"
|
|
20
|
-
|
|
22
|
+
|
|
23
|
+
export { ConstantStatus, CurdForm, CurdFormItem, CurdGroupForm, CurdTable, DetailInfo, FormDialog, TableFilter }
|
|
21
24
|
|
|
22
25
|
export default makeInstaller([...Components])
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(
|
|
1
|
+
.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.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 .schema-tree-select{width:100%}.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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.curdform-group{background-color:var(--el-bg-color);width:100%;margin:10px auto;border-radius:var(--el-border-radius-base)}.curdform-group .curdform-group-head{padding:15px 28px 5px;margin-bottom:10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.curdform-group .curdform-group-head+.curdform-group-desc{margin-top:-10px}.curdform-group .curdform-group-head+.curdform-group-body{padding-top:0}.curdform-group .curdform-group-head .left{display:flex;align-items:center;gap:10px}.curdform-group .curdform-group-head .left .icon{background:#f3f4f6;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:#9ca3af}.curdform-group .curdform-group-head .left .icon i{font-size:22px}.curdform-group .curdform-group-head .left .title{font-size:calc(var(--el-font-size-base) + 2px);font-weight:700}.curdform-group .curdform-group-desc{font-size:var(--el-font-size-base);color:var(--el-text-color-secondary);margin:0 28px}.curdform-group .curdform-group-body{padding:18px 28px 10px}
|
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;min-width:0;align-items:flex-start;margin-left:calc(0 - var(--curd-form-gutter)/ 2);margin-right:calc(0 - var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.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 .schema-tree-select{width:100%}.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:inline-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;vertical-align:top;vertical-align:middle}.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 .el-form-item{margin:0}.table-filter .filter-item .el-form-item__label{display:none}.table-filter .filter-item .el-input{--el-input-border:none;--el-input-border-color:transparent;--el-input-focus-border-color:transparent;--el-input-hover-border-color:transparent}.table-filter .filter-item .el-select{--el-select-border-color-hover:transparent;--el-select-input-focus-border-color:transparent}.table-filter .filter-item .el-select__wrapper{box-shadow:none}.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 .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-tag-popper .base-select .remote-input{width:100%}.table-filter-tag-popper .base-select .remote-input :deep(.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-tag-popper .base-select :deep(.el-empty__imagesvg){height:50px}.table-filter-tag-popper .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-tag-popper .base-select .select-spinner ul{margin:0;padding:0}.table-filter-tag-popper .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);box-sizing:border-box}.table-filter-tag-popper .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-tag-popper .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.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:not(.table){margin-left:-calc(var(--gutter)/2);margin-right:-calc(var(--gutter)/2)}.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.item-col-top{flex-direction:column}.detail-info .detail-info-body .item-col.item-col-top .det{padding:0}.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;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.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 .schema-tree-select{width:100%}.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:inline-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;vertical-align:top;vertical-align:middle}.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 .el-form-item{margin:0}.table-filter .filter-item .el-form-item__label{display:none}.table-filter .filter-item .el-input{--el-input-border:none;--el-input-border-color:transparent;--el-input-focus-border-color:transparent;--el-input-hover-border-color:transparent}.table-filter .filter-item .el-select{--el-select-border-color-hover:transparent;--el-select-input-focus-border-color:transparent}.table-filter .filter-item .el-select__wrapper{box-shadow:none}.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 .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-tag-popper .base-select .remote-input{width:100%}.table-filter-tag-popper .base-select .remote-input :deep(.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-tag-popper .base-select :deep(.el-empty__imagesvg){height:50px}.table-filter-tag-popper .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-tag-popper .base-select .select-spinner ul{margin:0;padding:0}.table-filter-tag-popper .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);box-sizing:border-box}.table-filter-tag-popper .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-tag-popper .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.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:not(.table){margin-left:-calc(var(--gutter)/2);margin-right:-calc(var(--gutter)/2)}.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.item-col-top{flex-direction:column}.detail-info .detail-info-body .item-col.item-col-top .det{padding:0}.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)}.curdform-group{background-color:var(--el-bg-color);width:100%;margin:10px auto;border-radius:var(--el-border-radius-base)}.curdform-group .curdform-group-head{padding:15px 28px 5px;margin-bottom:10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.curdform-group .curdform-group-head+.curdform-group-desc{margin-top:-10px}.curdform-group .curdform-group-head+.curdform-group-body{padding-top:0}.curdform-group .curdform-group-head .left{display:flex;align-items:center;gap:10px}.curdform-group .curdform-group-head .left .icon{background:#f3f4f6;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:#9ca3af}.curdform-group .curdform-group-head .left .icon i{font-size:22px}.curdform-group .curdform-group-head .left .title{font-size:calc(var(--el-font-size-base) + 2px);font-weight:700}.curdform-group .curdform-group-desc{font-size:var(--el-font-size-base);color:var(--el-text-color-secondary);margin:0 28px}.curdform-group .curdform-group-body{padding:18px 28px 10px}
|