mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
fix: 修改部分样式
This commit is contained in:
wangdan-fit2cloud
parent
0c817a8447
commit
f818aa8fe7
|
|
@ -9,7 +9,7 @@
|
|||
>
|
||||
<template #defFooters>
|
||||
<el-button text type="info" @click="openDialog">
|
||||
<AppIcon iconName="app-magnify" style="font-size: 16px"></AppIcon>
|
||||
<AppIcon class="color-secondary" iconName="app-magnify" style="font-size: 16px"></AppIcon>
|
||||
</el-button>
|
||||
</template>
|
||||
</MdEditor>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
.md-editor {
|
||||
font-weight: 400;
|
||||
}
|
||||
.md-editor-preview {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
|
||||
<el-button text @click="showNode = !showNode" class="mr-4">
|
||||
<el-icon class="arrow-icon" :class="showNode ? 'rotate-180' : ''"
|
||||
<el-icon class="arrow-icon color-secondary" :class="showNode ? 'rotate-180' : ''"
|
||||
><ArrowDownBold />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
|
|
|
|||
|
|
@ -1,122 +1,121 @@
|
|||
<template>
|
||||
<NodeContainer :nodeModel="nodeModel">
|
||||
<el-form
|
||||
@submit.prevent
|
||||
:model="form_data"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
label-width="auto"
|
||||
ref="formNodeFormRef"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item
|
||||
label="表单输出内容"
|
||||
prop="form_content_format"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请表单输出内容',
|
||||
trigger: 'blur'
|
||||
}"
|
||||
<h5 class="title-decoration-1 mb-8">节点设置</h5>
|
||||
<el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
|
||||
<el-form
|
||||
@submit.prevent
|
||||
:model="form_data"
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
label-width="auto"
|
||||
ref="formNodeFormRef"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<template #label>
|
||||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span>表单输出内容<span class="danger">*</span></span>
|
||||
</div>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>
|
||||
设置执行该节点输出的内容，{{ '{ form }' }}为表单的占位符。
|
||||
</template>
|
||||
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<MdEditorMagnify
|
||||
title="表单输出内容"
|
||||
v-model="form_data.form_content_format"
|
||||
style="height: 150px"
|
||||
@submitDialog="submitDialog"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表单配置" @click.prevent>
|
||||
<template #label>
|
||||
<div class="flex-between mb-16">
|
||||
<h5 class="lighter">{{ '表单配置' }}</h5>
|
||||
<el-button link type="primary" @click="openAddFormCollect()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div></template
|
||||
<el-form-item
|
||||
label="表单输出内容"
|
||||
prop="form_content_format"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请表单输出内容',
|
||||
trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
|
||||
<el-table
|
||||
v-if="form_data.form_field_list.length > 0"
|
||||
:data="form_data.form_field_list"
|
||||
class="mb-16"
|
||||
>
|
||||
<el-table-column prop="field" label="参数">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="显示名称">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.label && row.label.input_type === 'TooltipLabel'">
|
||||
<span :title="row.label.label" class="ellipsis-1">
|
||||
{{ row.label.label }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span :title="row.label" class="ellipsis-1">
|
||||
{{ row.label }}
|
||||
</span></span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="组件类型" width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag">{{
|
||||
input_type_list.find((item) => item.value === row.input_type)?.label
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="default_value" label="默认值">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.default_value" class="ellipsis-1">{{ row.default_value }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.required" />
|
||||
<template #label>
|
||||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span>表单输出内容<span class="danger">*</span></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" width="80">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" content="修改" placement="top">
|
||||
<el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>
|
||||
设置执行该节点输出的内容，{{ '{ form }' }}为表单的占位符。
|
||||
</template>
|
||||
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<MdEditorMagnify
|
||||
title="表单输出内容"
|
||||
v-model="form_data.form_content_format"
|
||||
style="height: 150px"
|
||||
@submitDialog="submitDialog"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表单配置" @click.prevent>
|
||||
<template #label>
|
||||
<div class="flex-between">
|
||||
<h5 class="lighter">{{ '表单配置' }}</h5>
|
||||
<el-button link type="primary" @click="openAddFormCollect()">
|
||||
<el-icon class="mr-4">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</div></template
|
||||
>
|
||||
|
||||
<el-table class="border" v-if="form_data.form_field_list.length > 0" :data="form_data.form_field_list">
|
||||
<el-table-column prop="field" label="参数">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" label="显示名称">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.label && row.label.input_type === 'TooltipLabel'">
|
||||
<span :title="row.label.label" class="ellipsis-1">
|
||||
{{ row.label.label }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span :title="row.label" class="ellipsis-1">
|
||||
{{ row.label }}
|
||||
</span></span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="组件类型" width="110px">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="info" class="info-tag">{{
|
||||
input_type_list.find((item) => item.value === row.input_type)?.label
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="default_value" label="默认值">
|
||||
<template #default="{ row }">
|
||||
<span :title="row.default_value" class="ellipsis-1">{{ row.default_value }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填">
|
||||
<template #default="{ row }">
|
||||
<div @click.stop>
|
||||
<el-switch disabled size="small" v-model="row.required" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" width="80">
|
||||
<template #default="{ row, $index }">
|
||||
<span class="mr-4">
|
||||
<el-tooltip effect="dark" content="修改" placement="top">
|
||||
<el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<el-button type="primary" text @click="deleteField(row)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tooltip effect="dark" content="删除" placement="top">
|
||||
<el-button type="primary" text @click="deleteField(row)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<AddFormCollect ref="addFormCollectRef" :addFormField="addFormField"></AddFormCollect>
|
||||
<EditFormCollect ref="editFormCollectRef" :editFormField="editFormField"></EditFormCollect>
|
||||
</NodeContainer>
|
||||
|
|
|
|||
Loading…
Reference in New Issue