mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-06 17:36:48 +08:00
418 lines
11 KiB
Vue
418 lines
11 KiB
Vue
<script>
|
|
import { agentEdit, agentAdd } from '@/api/intelligent-agent/list'
|
|
import { VEmojiPicker } from 'v-emoji-picker'
|
|
import cropper from '@/components/RenderCropper/components/cropper.vue'
|
|
import { uploadImage } from '@/api/generatedApi'
|
|
import { agentType } from '@/assets/js/utils/utilOptions'
|
|
import otherSelect from '@/views/knowledge/detail/components/otherSelect/otherIndex.vue'
|
|
export default {
|
|
name: 'info',
|
|
inject: ['dialog', 'fetchAgentList', 'resetList'],
|
|
components: {
|
|
otherSelect,
|
|
VEmojiPicker,
|
|
cropper
|
|
},
|
|
computed() {
|
|
return {
|
|
copyAgent: item => {
|
|
return this.dialog.agent
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
'dialog.agent': {
|
|
handler(val) {
|
|
console.log(val)
|
|
this.image = val.image
|
|
this.imageType = val.imageType
|
|
this.background = val.backgroundColor
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
isImage: '0',
|
|
image: '',
|
|
imageType: '',
|
|
popover: false,
|
|
background: '',
|
|
chooseBack: [
|
|
'#ffffff',
|
|
'#e4fbcc',
|
|
'#eff1f5',
|
|
'#e0eaf0',
|
|
'#fef7c3',
|
|
'#d5f5f6',
|
|
'#d1e9ff',
|
|
'#d1e0ff',
|
|
'#d5d9eb',
|
|
'#ffe4e8'
|
|
],
|
|
// 应用类型
|
|
agentType,
|
|
rules: {
|
|
appName: [
|
|
{ required: true, message: '请输入智能体名称', trigger: 'blur' }
|
|
],
|
|
description: [
|
|
{ required: false, message: '请输入智能体描述', trigger: 'blur' }
|
|
],
|
|
appType: [
|
|
{ required: true, message: '请选择应用类型', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getFiles(file) {
|
|
let form = new FormData()
|
|
form.append('file', file[0])
|
|
uploadImage(form).then(res => {
|
|
if (res) {
|
|
this.dialog.agent.image = res.content.content.imageUrl
|
|
this.dialog.agent.imageType = 'image'
|
|
this.dialog.agent.backgroundColor = '#fff'
|
|
this.popover = false
|
|
}
|
|
})
|
|
},
|
|
resetImage() {
|
|
this.$refs.cropperImage.reset()
|
|
},
|
|
confirmImage() {
|
|
this.$refs.cropperImage.confirm()
|
|
},
|
|
chooseAgentType(item) {
|
|
if (this.dialog.agent.id) {
|
|
return false
|
|
}
|
|
this.$set(this.dialog.agent, 'appType', item.value)
|
|
},
|
|
|
|
chooseGround(colors) {
|
|
this.background = colors
|
|
},
|
|
|
|
saveEmoji() {
|
|
this.dialog.agent.image = this.image
|
|
this.dialog.agent.imageType = this.imageType
|
|
this.$set(this.dialog.agent, 'backgroundColor', this.background)
|
|
|
|
this.popover = false
|
|
},
|
|
|
|
/**
|
|
* 提交表单
|
|
*/
|
|
async handleSubmit() {
|
|
let api = this.dialog.type === 'edit' ? agentEdit : agentAdd
|
|
|
|
// 更新表单之后重新获取列表，然后退出 dialog
|
|
api(this.dialog.agent).then(res => {
|
|
if (res) {
|
|
this.resetList()
|
|
this.fetchAgentList()
|
|
this.dialog.visible = false
|
|
}
|
|
})
|
|
},
|
|
// 调用保存或者编辑
|
|
validateForm() {
|
|
this.$refs.form.validate(valid => {
|
|
if (valid) this.handleSubmit()
|
|
})
|
|
},
|
|
// 选择emoji
|
|
selectEmoji(e) {
|
|
this.image = e.data
|
|
this.imageType = 'emoji'
|
|
// this.dialog.agent.imageType = 'emoji'
|
|
},
|
|
// 选择是否是上传图片
|
|
changeUploadImage(e) {
|
|
// if (e === '0') {
|
|
// this.dialog.agent.imageType = 'emoji'
|
|
// this.dialog.agent.imageType = 'emoji'
|
|
// } else {
|
|
// this.dialog.agent.imageType = 'image'
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-form
|
|
:model="dialog.agent"
|
|
:rules="rules"
|
|
ref="form"
|
|
label-position="top"
|
|
label-width="80px"
|
|
>
|
|
<div class="flex align-items-c ">
|
|
<el-form-item label="名称与图标" prop="imageId" class="mt30">
|
|
<el-popover trigger="click" v-model="popover">
|
|
<div style="width: 28vw">
|
|
<el-radio-group
|
|
v-model="isImage"
|
|
style="width: 100%;"
|
|
class="flex render-group"
|
|
@change="changeUploadImage"
|
|
>
|
|
<el-radio-button label="0" style="flex:1">表情</el-radio-button>
|
|
<el-radio-button label="1" style="flex:1">图片</el-radio-button>
|
|
</el-radio-group>
|
|
|
|
<!-- emoji-->
|
|
<div class="mt10" v-if="isImage === '0'">
|
|
<VEmojiPicker @select="selectEmoji" class="emoji " />
|
|
<div
|
|
v-if="image"
|
|
class="flex mt10 back-content justify-content-b"
|
|
>
|
|
<template
|
|
v-for="item in chooseBack"
|
|
v-if="imageType === 'emoji'"
|
|
>
|
|
<div
|
|
class="emoji-background"
|
|
:style="`background:${item}`"
|
|
@click="chooseGround(item)"
|
|
:class="item === background ? 'activeBack' : ''"
|
|
>
|
|
{{ image }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex align-items-c justify-content-b">
|
|
<!-- <el-button size="medium" style="flex:1">取消</el-button>-->
|
|
<el-button
|
|
@click="saveEmoji"
|
|
size="medium"
|
|
type="primary"
|
|
style="flex:1"
|
|
>确认
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片切割-->
|
|
<div v-else class="cropper-image">
|
|
<cropper
|
|
ref="cropperImage"
|
|
style="height: calc(100% - 40px);"
|
|
@getFiles="getFiles"
|
|
></cropper>
|
|
<div class="mt10 flex align-items-c justify-content-b">
|
|
<el-button
|
|
class="render-button"
|
|
style="flex:1"
|
|
@click="resetImage"
|
|
>取消</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
size="medium"
|
|
style="flex:1"
|
|
@click="confirmImage"
|
|
>确认</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="emoji-content"
|
|
slot="reference"
|
|
:style="`background:${dialog.agent.backgroundColor}`"
|
|
>
|
|
<div v-if="dialog.agent.imageType === 'emoji'">
|
|
{{ dialog.agent.image }}
|
|
</div>
|
|
<div
|
|
v-else
|
|
style="width: 100%;height: 100%;overflow: hidden;border-radius: 8px"
|
|
>
|
|
<img
|
|
:src="dialog.agent.image"
|
|
alt=""
|
|
style="width: 100%;height: 100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="appName" style="flex:1" class="mt60">
|
|
<el-input v-model="dialog.agent.appName" size="medium" />
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-form-item label="选择应用类型" required prop="appType">
|
|
<div class="card-container" style="flex-wrap: wrap;">
|
|
<el-card
|
|
v-for="item in agentType"
|
|
:key="item.value"
|
|
shadow="hover"
|
|
class="card-item"
|
|
@click.native="chooseAgentType(item)"
|
|
:class="
|
|
dialog.agent.appType === item.value
|
|
? 'appTypeActive'
|
|
: dialog.agent.id
|
|
? 'disabled'
|
|
: ''
|
|
"
|
|
>
|
|
<div
|
|
class="flex align-items-c lineHeight30"
|
|
style="line-height: 30px"
|
|
>
|
|
<div class="" style="flex:1;overflow: hidden">
|
|
<div class="ellipsis flex">
|
|
<div
|
|
class="back-theme-color ph5"
|
|
style="border-radius: 8px;color:#fff"
|
|
>
|
|
<svg-icon
|
|
:icon-class="item.icon"
|
|
class="app-type-svg"
|
|
></svg-icon>
|
|
</div>
|
|
<div class="ml10 fw600">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
<div class="ellipsis fs12 desc-text-color">
|
|
{{ item.desc }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="可见权限" prop="visibleRange">
|
|
<otherSelect :model="dialog.agent" propKey="visibleRange"></otherSelect>
|
|
</el-form-item>
|
|
<el-form-item label="描述" prop="description">
|
|
<el-input
|
|
size="medium"
|
|
type="textarea"
|
|
:rows="6"
|
|
v-model="dialog.agent.description"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<!-- <el-row type="flex" justify="end">-->
|
|
<!-- <el-button type="primary" @click="validateForm">保存</el-button>-->
|
|
<!-- <el-button type="default" @click="dialog.visible = false">取消</el-button>-->
|
|
<!-- </el-row>-->
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.emoji {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
& #Categories {
|
|
& .category {
|
|
&.active {
|
|
border-bottom: 3px solid var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
& #InputSearch {
|
|
& .container-search {
|
|
& input {
|
|
outline: none;
|
|
border: 1px solid var(--color-primary);
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/sass/renderSass/theme.scss';
|
|
.emoji-content {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
background: #d1e9ff;
|
|
}
|
|
|
|
.back-content {
|
|
flex-wrap: wrap;
|
|
}
|
|
.emoji-content + .emoji-content {
|
|
//margin-left: 2%;
|
|
}
|
|
.emoji-background {
|
|
cursor: pointer;
|
|
flex: 0 0 calc(10% - 10px);
|
|
border-radius: 8px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
//margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
&.activeBack {
|
|
border: 1px dashed #676f83;
|
|
}
|
|
}
|
|
|
|
.card-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start; // 确保卡片之间有间距
|
|
}
|
|
.grid-emojis {
|
|
grid-template-columns: repeat(10, 10%) !important;
|
|
}
|
|
.appTypeActive {
|
|
border: 1px solid var(--color-primary);
|
|
}
|
|
.disabled {
|
|
pointer-events: none;
|
|
//cursor: no-drop;
|
|
opacity: 0.5;
|
|
}
|
|
.app-type-svg {
|
|
font-size: 20px;
|
|
}
|
|
.card-item {
|
|
cursor: pointer;
|
|
flex: 0 0 calc(33% - 1%); // 每个卡片占据三分之一的宽度，减去间距
|
|
margin-bottom: 10px; // 卡片之间的垂直间距
|
|
margin-left: 1%;
|
|
& .el-card__body {
|
|
padding: 5px 10px;
|
|
}
|
|
& .ellipsis {
|
|
white-space: nowrap; // 确保文本不换行
|
|
overflow: hidden; // 隐藏超出部分
|
|
text-overflow: ellipsis; // 超出部分显示省略号
|
|
max-width: 100%; // 设置最大宽度以限制文本长度
|
|
}
|
|
}
|
|
|
|
.cropper-image {
|
|
width: 100%;
|
|
height: 45vh;
|
|
}
|
|
</style>
|