mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-21 00:36:51 +08:00
style(knowledge): 优化元数据组件样式和功能
- 修改元数据对话框样式,使用自定义 r-dialog 组件 -增加元数据名称验证规则,只能包含小写字母、数字和下划线 - 根据元数据类型动态显示不同输入组件 - 优化时间选择器和数字输入框的展示逻辑 - 调整元数据类型选择样式,使用 span 替代 div - 增加按钮和输入框的样式定制
This commit is contained in:
@@ -109,6 +109,25 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
color: $--color-primary;
|
||||||
|
border-color: $--color-primary;
|
||||||
|
}
|
||||||
|
&.is-plain {
|
||||||
|
&:active {
|
||||||
|
color: $--color-primary;
|
||||||
|
border-color: $--color-primary;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
color: $--color-primary;
|
||||||
|
border-color: $--color-primary;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
border-color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--text {
|
.el-button--text {
|
||||||
|
|||||||
@@ -283,3 +283,66 @@
|
|||||||
color: $--color-primary;
|
color: $--color-primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-time-panel__btn {
|
||||||
|
&.confirm {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-picker__header-label {
|
||||||
|
&.active {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table {
|
||||||
|
& td {
|
||||||
|
&.current {
|
||||||
|
&:not(.disabled) {
|
||||||
|
& span {
|
||||||
|
background-color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-year-table,
|
||||||
|
.el-year-table {
|
||||||
|
& td {
|
||||||
|
&.current {
|
||||||
|
&:not(.disabled) {
|
||||||
|
& .cell {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .cell {
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.today {
|
||||||
|
& .cell {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-month-table {
|
||||||
|
& td {
|
||||||
|
& .cell {
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-picker-panel__icon-btn {
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
<!-- </li>-->
|
<!-- </li>-->
|
||||||
<!-- </ul>-->
|
<!-- </ul>-->
|
||||||
<!-- 新增元数据对话框 -->
|
<!-- 新增元数据对话框 -->
|
||||||
<el-dialog
|
<r-dialog
|
||||||
:title="isEdit ? '编辑元数据' : '新增元数据'"
|
:title="isEdit ? '编辑元数据' : '新增元数据'"
|
||||||
append-to-body
|
append-to-body
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
<el-form :model="metaDataForm" label-width="80px" label-position="top" ref='form' :rules='rules'>
|
<el-form :model="metaDataForm" label-width="80px" label-position="top" ref='form' :rules='rules'>
|
||||||
<el-form-item label="类型" v-if="!isEdit" prop="dataType">
|
<el-form-item label="类型" v-if="!isEdit" prop="dataType">
|
||||||
<div class="type-selection">
|
<div class="type-selection">
|
||||||
<div
|
<span
|
||||||
v-for="type in typeOptions"
|
v-for="type in typeOptions"
|
||||||
:key="type"
|
:key="type"
|
||||||
class="type-option"
|
class="type-option"
|
||||||
@@ -84,13 +84,14 @@
|
|||||||
@click="chooseMetaData(type)"
|
@click="chooseMetaData(type)"
|
||||||
>
|
>
|
||||||
{{ type }}
|
{{ type }}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="名称" prop='metadataKey'>
|
<el-form-item label="名称" prop='metadataKey'>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="metaDataForm.metadataKey"
|
v-model="metaDataForm.metadataKey"
|
||||||
placeholder="请输入元数据名称"
|
placeholder="请输入元数据名称"
|
||||||
|
size='medium'
|
||||||
></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -100,7 +101,7 @@
|
|||||||
>保存</el-button
|
>保存</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</r-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -119,7 +120,10 @@ export default {
|
|||||||
rules:{
|
rules:{
|
||||||
metadataKey: [
|
metadataKey: [
|
||||||
{ required: true, message: '请输入元数据名称', trigger: 'blur' },
|
{ required: true, message: '请输入元数据名称', trigger: 'blur' },
|
||||||
] , dataType: [
|
// 元数据名称只能包含小写字母、数字和下划线,并且必须以小写字母开头
|
||||||
|
{ pattern: /^[a-z][a-z0-9_]*$/, message: '元数据名称只能包含小写字母、数字和下划线,并且必须以小写字母开头', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
dataType: [
|
||||||
{ required: true, message: '请选择元数据类型', trigger: 'blur' },
|
{ required: true, message: '请选择元数据类型', trigger: 'blur' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -156,6 +160,9 @@ export default {
|
|||||||
this.getMetadata()
|
this.getMetadata()
|
||||||
},
|
},
|
||||||
chooseMetaData(type) {
|
chooseMetaData(type) {
|
||||||
|
|
||||||
|
switch (type){}
|
||||||
|
|
||||||
this.metaDataForm.dataType = type
|
this.metaDataForm.dataType = type
|
||||||
this.metaDataForm = JSON.parse(JSON.stringify(this.metaDataForm))
|
this.metaDataForm = JSON.parse(JSON.stringify(this.metaDataForm))
|
||||||
},
|
},
|
||||||
@@ -300,7 +307,8 @@ export default {
|
|||||||
.type-selection {
|
.type-selection {
|
||||||
display: flex;
|
display: flex;
|
||||||
.type-option {
|
.type-option {
|
||||||
padding: 0 16px;
|
line-height: 15px!important;
|
||||||
|
padding: 6px;
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|||||||
@@ -80,14 +80,35 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-item">
|
<div class="form-item" v-if="dataType">
|
||||||
<label class="form-label">元数据值</label>
|
<label class="form-label">元数据值</label>
|
||||||
|
|
||||||
<el-input
|
<el-input
|
||||||
|
v-if="dataType === 'String'"
|
||||||
v-model="dialog.metadataValue"
|
v-model="dialog.metadataValue"
|
||||||
placeholder="请输入元数据值"
|
placeholder="请输入元数据值"
|
||||||
class="full-width"
|
class="full-width"
|
||||||
size="medium"
|
size="medium"
|
||||||
></el-input>
|
></el-input>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
v-if="dataType === 'Number'"
|
||||||
|
v-model="dialog.metadataValue"
|
||||||
|
placeholder="请输入元数据值"
|
||||||
|
class="full-width"
|
||||||
|
size="medium"
|
||||||
|
type="number"
|
||||||
|
></el-input>
|
||||||
|
|
||||||
|
<el-date-picker
|
||||||
|
v-if="dataType === 'Time'"
|
||||||
|
v-model="dialog.metadataValue"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请输入元数据值"
|
||||||
|
class="full-width"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
size="medium"
|
||||||
|
></el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
@@ -132,14 +153,34 @@
|
|||||||
></el-input>
|
></el-input>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-item">
|
<div class="form-item" v-if="dataType">
|
||||||
<label class="form-label">元数据值</label>
|
<label class="form-label">元数据值</label>
|
||||||
<el-input
|
<el-input
|
||||||
|
v-if="dataType === 'String'"
|
||||||
v-model="editDialog.metadataValue"
|
v-model="editDialog.metadataValue"
|
||||||
placeholder="请输入元数据值"
|
placeholder="请输入元数据值"
|
||||||
class="full-width"
|
class="full-width"
|
||||||
size="medium"
|
size="medium"
|
||||||
></el-input>
|
></el-input>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
v-if="dataType === 'Number'"
|
||||||
|
v-model="editDialog.metadataValue"
|
||||||
|
placeholder="请输入元数据值"
|
||||||
|
class="full-width"
|
||||||
|
size="medium"
|
||||||
|
type="number"
|
||||||
|
></el-input>
|
||||||
|
|
||||||
|
<el-date-picker
|
||||||
|
v-if="dataType === 'Time'"
|
||||||
|
v-model="editDialog.metadataValue"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="请输入元数据值"
|
||||||
|
class="full-width"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
size="medium"
|
||||||
|
></el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
@@ -169,6 +210,7 @@ import {
|
|||||||
updateMetaDataDoc
|
updateMetaDataDoc
|
||||||
} from '@/api/generatedApi'
|
} from '@/api/generatedApi'
|
||||||
import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue'
|
import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue'
|
||||||
|
import { data } from 'autoprefixer'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MetadataOperator',
|
name: 'MetadataOperator',
|
||||||
@@ -176,6 +218,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShowOperator: false,
|
isShowOperator: false,
|
||||||
|
dataType: '',
|
||||||
docList: [],
|
docList: [],
|
||||||
dialog: {
|
dialog: {
|
||||||
visible: false,
|
visible: false,
|
||||||
@@ -196,6 +239,7 @@ export default {
|
|||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
data,
|
||||||
init(id) {
|
init(id) {
|
||||||
this.documentId = id
|
this.documentId = id
|
||||||
this.getDocList()
|
this.getDocList()
|
||||||
@@ -251,6 +295,7 @@ export default {
|
|||||||
this.editDialog.metadataKey = item.metadataKey
|
this.editDialog.metadataKey = item.metadataKey
|
||||||
this.editDialog.metadataValue = item.metadataValue
|
this.editDialog.metadataValue = item.metadataValue
|
||||||
this.editDialog.metadataId = item.metadataId
|
this.editDialog.metadataId = item.metadataId
|
||||||
|
this.dataType = item.dataType
|
||||||
},
|
},
|
||||||
infoConfirm() {
|
infoConfirm() {
|
||||||
// 处理确认逻辑
|
// 处理确认逻辑
|
||||||
@@ -277,7 +322,11 @@ export default {
|
|||||||
this.$emit('close')
|
this.$emit('close')
|
||||||
this.$emit('openMetaDrawer')
|
this.$emit('openMetaDrawer')
|
||||||
},
|
},
|
||||||
handleSelectChange(value) {},
|
handleSelectChange(value) {
|
||||||
|
this.dataType = this.list.find(item => {
|
||||||
|
return item.id === value
|
||||||
|
}).dataType
|
||||||
|
},
|
||||||
//
|
//
|
||||||
showMeta() {
|
showMeta() {
|
||||||
this.$refs.metaData.addMetaData()
|
this.$refs.metaData.addMetaData()
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<r-dialog
|
||||||
:title="title"
|
:title="title"
|
||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
width="800px"
|
width="800px"
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
<div slot="footer" class="dialog-footer" v-else>
|
<div slot="footer" class="dialog-footer" v-else>
|
||||||
<el-button size="small" @click="handleClose">关 闭</el-button>
|
<el-button size="small" @click="handleClose">关 闭</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</r-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -164,7 +164,13 @@ export default {
|
|||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
menuCode: [
|
menuCode: [
|
||||||
{ required: true, message: '请输入菜单编码', trigger: 'blur' }
|
{ required: true, message: '请输入菜单编码', trigger: 'blur' },
|
||||||
|
// 纯数字
|
||||||
|
{
|
||||||
|
pattern: /^[0-9]*$/,
|
||||||
|
message: '菜单编码只能输入数字',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
menuName: [
|
menuName: [
|
||||||
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
|
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
|
||||||
|
|||||||
Reference in New Issue
Block a user