You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
314 lines
6.9 KiB
314 lines
6.9 KiB
<template>
|
|
<el-dialog
|
|
title="数据源选择"
|
|
:visible="visible"
|
|
:close-on-click-modal="false"
|
|
width="800px"
|
|
top="5vh"
|
|
custom-class="data-source-dialog"
|
|
@close="handleClose"
|
|
>
|
|
<div class="data-source-content">
|
|
<el-form label-position="top">
|
|
<el-form-item label="可用数据字段">
|
|
<el-checkbox-group v-model="selectedKeys" class="checkbox-grid">
|
|
<el-checkbox
|
|
v-for="key in dataKeys"
|
|
:key="key.fieldName"
|
|
:label="key.fieldName"
|
|
class="checkbox-item"
|
|
>
|
|
{{ key.fieldName+(key.fieldDescription?('('+key.fieldDescription +')'):'')}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
</div>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DataSourceDialog',
|
|
props: {
|
|
visible: Boolean,
|
|
dataKeys: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 当前文本内容，用于分析应该勾选哪些数据字段
|
|
currentText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
sourceType: {
|
|
type: String,
|
|
default: 'text' // 默认是文本类型
|
|
}
|
|
},
|
|
emits: ['update:visible', 'confirm'],
|
|
data() {
|
|
return {
|
|
selectedKeys: []
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
visible(newVal) {
|
|
if (newVal) {
|
|
this.initializeSelection()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 根据当前文本内容初始化选择状态
|
|
initializeSelection() {
|
|
if (!this.currentText || !this.dataKeys.length) {
|
|
this.selectedKeys = []
|
|
return
|
|
}
|
|
|
|
// 分析文本内容，找出其中包含的数据字段
|
|
const foundKeys = []
|
|
this.dataKeys.forEach(key => {
|
|
// 检查文本中是否包含 #{key} 格式的数据字段
|
|
const pattern = new RegExp(`#\\{${key.fieldName}\\}`, 'g')
|
|
|
|
if (pattern.test(this.currentText)) {
|
|
foundKeys.push(key.fieldName)
|
|
}
|
|
})
|
|
this.selectedKeys = foundKeys
|
|
},
|
|
|
|
handleClose() {
|
|
this.$emit('update:visible', false)
|
|
},
|
|
|
|
handleConfirm() {
|
|
this.$emit('confirm', this.selectedKeys, this.sourceType)
|
|
this.handleClose()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.data-source-dialog {
|
|
max-width: 98vw !important;
|
|
max-height: 92vh !important;
|
|
border-radius: 12px !important;
|
|
box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__header {
|
|
padding: 16px 20px 8px !important;
|
|
border-bottom: 1px solid #e4e7ed !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__title {
|
|
font-size: 20px !important;
|
|
font-weight: 700 !important;
|
|
color: #222 !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__body {
|
|
padding: 10px 20px 0 20px !important;
|
|
max-height: 70vh !important;
|
|
min-height: 80px;
|
|
overflow-y: auto !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
.data-source-content {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* 表单项样式优化 */
|
|
.el-form-item {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.el-form-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
|
|
.el-form-item__label {
|
|
font-size: 14px !important;
|
|
font-weight: 600 !important;
|
|
color: #303133 !important;
|
|
padding-bottom: 8px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
/* 复选框网格布局 */
|
|
.checkbox-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); /* 固定一行4个 */
|
|
gap: 8px 10px;
|
|
margin-top: 6px;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
/* 让复选框区域高度自适应内容 */
|
|
max-height: none;
|
|
overflow-y: visible;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* 复选框项样式 */
|
|
.checkbox-item {
|
|
margin: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
height: 28px;
|
|
padding: 2px 6px;
|
|
background: #fff;
|
|
border: 1px solid #e4e7ed;
|
|
border-radius: 4px;
|
|
transition: all 0.15s cubic-bezier(.4,0,.2,1);
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.checkbox-item:hover {
|
|
border-color: #17b3a3;
|
|
background: #f0fdfa;
|
|
transform: translateY(-1px) scale(1.01);
|
|
}
|
|
|
|
.checkbox-item.is-checked {
|
|
border-color: #17b3a3;
|
|
background: #e6f7f4;
|
|
}
|
|
|
|
/* 复选框内部元素样式 */
|
|
.checkbox-item .el-checkbox__input {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.checkbox-item .el-checkbox__inner {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
border: 2px solid #dcdfe6 !important;
|
|
border-radius: 4px !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.checkbox-item .el-checkbox__inner:hover {
|
|
border-color: #409eff !important;
|
|
}
|
|
|
|
.checkbox-item .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background-color: #409eff !important;
|
|
border-color: #409eff !important;
|
|
}
|
|
|
|
.checkbox-item .el-checkbox__inner::after {
|
|
height: 7px !important;
|
|
left: 4px !important;
|
|
top: 1px !important;
|
|
width: 3px !important;
|
|
border: 2px solid #fff !important;
|
|
border-left: 0 !important;
|
|
border-top: 0 !important;
|
|
}
|
|
|
|
.checkbox-item .el-checkbox__label {
|
|
font-size: 13px !important;
|
|
font-weight: 500 !important;
|
|
color: #333 !important;
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.checkbox-item.is-checked .el-checkbox__label {
|
|
color: #17b3a3 !important;
|
|
}
|
|
|
|
|
|
|
|
/* 对话框底部按钮 */
|
|
.dialog-footer {
|
|
text-align: center;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #e4e7ed;
|
|
margin-top: 350px;
|
|
background: #fff;
|
|
}
|
|
|
|
.dialog-footer .el-button {
|
|
min-width: 80px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dialog-footer .el-button + .el-button {
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.dialog-footer .el-button--primary {
|
|
background: linear-gradient(135deg, #17b3a3 0%, #1dc5ef 100%);
|
|
border: none;
|
|
box-shadow: 0 2px 8px rgba(23,179,163,0.12);
|
|
}
|
|
|
|
.dialog-footer .el-button--primary:hover {
|
|
background: linear-gradient(135deg, #1dc5ef 0%, #17b3a3 100%);
|
|
transform: translateY(-1px) scale(1.03);
|
|
box-shadow: 0 4px 12px rgba(23,179,163,0.18);
|
|
}
|
|
|
|
.dialog-footer .el-button--primary:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
|
|
}
|
|
|
|
/* 对话框整体样式优化 */
|
|
.data-source-dialog {
|
|
border-radius: 12px !important;
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
|
|
max-height: 85vh !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__header {
|
|
padding: 20px 24px 16px !important;
|
|
border-bottom: 1px solid #e4e7ed !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__title {
|
|
font-size: 18px !important;
|
|
font-weight: 600 !important;
|
|
color: #303133 !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__body {
|
|
padding: 20px 24px 0 24px !important;
|
|
max-height: 65vh !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.data-source-dialog .el-dialog__footer {
|
|
padding: 16px 24px 20px !important;
|
|
border-top: 1px solid #e4e7ed !important;
|
|
background: #fff !important;
|
|
position: sticky !important;
|
|
bottom: 0 !important;
|
|
}
|
|
</style>
|