This commit is contained in:
wangdan-fit2cloud 2024-01-24 15:42:12 +08:00
parent 8348b397e6
commit 9daa8beb11
7 changed files with 118 additions and 66 deletions

View File

@ -20,7 +20,6 @@
<CardBox
shadow="none"
:title="item.title || '-'"
:description="item.content"
class="paragraph-source-card cursor mb-8"
:class="item.is_active ? '' : 'disabled'"
:showIcon="false"
@ -29,6 +28,11 @@
<AppAvatar :name="index + 1 + ''" class="mr-12 avatar-light" :size="22" />
</template>
<div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
<template #description>
<el-scrollbar height="90">
{{ item.content }}
</el-scrollbar>
</template>
<template #footer>
<div class="footer-content flex-between">
<el-text>
@ -88,10 +92,6 @@ defineExpose({ open })
.paragraph-source-card {
height: 210px;
width: 100%;
:deep(.description) {
-webkit-line-clamp: 5 !important;
height: 110px !important;
}
.active-button {
position: absolute;
right: 16px;

View File

@ -12,9 +12,11 @@
</div>
</slot>
</div>
<div class="description mt-12" v-if="$slots.description || description">
<div class="description break-all mt-12" v-if="$slots.description || description">
<slot name="description">
{{ description }}
<div class="content">
{{ description }}
</div>
</slot>
</div>
<slot />
@ -63,14 +65,16 @@ function cardLeave() {
min-width: var(--card-min-width);
border-radius: 8px;
.description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: var(--app-card-box-description-height, 40px);
color: var(--app-text-color-secondary);
line-height: 22px;
font-weight: 400;
.content {
display: -webkit-box;
height: var(--app-card-box-description-height, 40px);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.card-footer {
position: absolute;

View File

@ -6,13 +6,28 @@
<el-tag
v-for="(item, index) in tagsList"
:key="index"
@close="removeTag(item)"
@close="removeTag(index)"
closable
class="mr-8"
>{{ item }}
type="info"
>{{ item.username }}
</el-tag>
</div>
<!-- 输入框 -->
<el-autocomplete
:placeholder="tagsList.length == 0 ? placeholder : ''"
:validate-event="false"
v-model="currentval"
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
:popper-class="noData ? 'platform-auto-complete' : ''"
>
<template #default="{ item }">
<!-- 解决匹配不到提示无匹配数据 -->
<div class="default" v-if="noData">{{ item.default }}</div>
<div class="value" v-else>{{ item.username }}</div>
</template>
</el-autocomplete>
<!-- <el-input
:validate-event="false"
v-model="currentval"
@ -23,18 +38,14 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import UserApi from '@/api/user'
defineOptions({ name: 'TagsInput' })
const props = defineProps({
tags: {
/* 多个 */
type: Array<String>,
type: Array<any>,
default: () => []
},
tag: {
/* 单个 */
type: String,
default: ''
},
placeholder: {
type: String,
default: '请输入'
@ -43,33 +54,44 @@ const props = defineProps({
/* 最多生成标签数 */
type: Number,
default: -1
},
reg: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:tags', 'update:tag'])
const emit = defineEmits(['update:tags'])
const currentval = ref('')
const tagsList = ref<String[]>([])
const tagsList = ref<any[]>([])
const noData = ref(false) //
watch([tagsList, currentval], (val) => {
if (val[0]?.length > 0) {
emit('update:tags', val[0])
} else if (val[1]) {
emit('update:tag', val[1])
}
emit('update:tags', val[0])
})
function addTags() {
const val = currentval.value.trim()
if (val) {
tagsList.value.push(val)
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
if (queryString) {
let matchResults
UserApi.getUserList(queryString).then((res) => {
if (res.data.length === 0) {
noData.value = true
matchResults = [{ default: '无匹配数据' }]
} else {
noData.value = false
matchResults = res.data
}
cb(matchResults)
})
} else {
cb([])
}
}
const handleSelect = (item: any) => {
if (!tagsList.value.some((obj: any) => obj.id === item.id)) {
tagsList.value.push(item)
}
currentval.value = ''
}
function removeTag(tag: String) {
tagsList.value.splice(tagsList.value.indexOf(tag), 1)
function removeTag(index: number) {
tagsList.value.splice(index, 1)
}
</script>
<style lang="scss" scoped>
@ -78,6 +100,9 @@ function removeTag(tag: String) {
min-height: 70px;
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
:deep(.el-autocomplete) {
width: 100%;
}
:deep(.el-input__wrapper) {
background: none !important;
box-shadow: none !important;

View File

@ -216,3 +216,20 @@
right: 10px;
left: auto;
}
// 自动补全增加暂无数据
.platform-auto-complete {
.el-autocomplete-suggestion__wrap {
padding: 5px 0;
ul li {
pointer-events: none; // 阻止可点击事件
.default {
text-align: center;
color: #999;
}
&:hover {
background-color: #fff;
}
}
}
}

View File

@ -97,7 +97,7 @@ function deleteParagraph() {
}
function getMark(data: any) {
logApi.getMarkRecord(id as string, data.chat, data.id, loading).then((res: any) => {
logApi.getMarkRecord(id as string, data.chat_id, data.id, loading).then((res: any) => {
if (res.data.length > 0) {
form.value = res.data[0]
}

View File

@ -232,9 +232,9 @@ onMounted(() => {
color: var(--app-border-color-dark);
}
}
:deep(.description) {
:deep(.content) {
-webkit-line-clamp: 5 !important;
height: 110px;
height: 110px !important;
}
.active-button {
position: absolute;

View File

@ -20,7 +20,8 @@
@submit.prevent
>
<el-form-item label="用户名/邮箱" prop="users">
<el-select
<tags-input v-model:tags="memberForm.users" placeholder="请输入成员的用户名或邮箱" />
<!-- <el-select
ref="SelectRemoteRef"
class="custom-select-multiple"
v-model="memberForm.users"
@ -40,13 +41,15 @@
:label="item?.username"
:value="item?.id"
/>
</el-select>
</el-select> -->
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
<el-button type="primary" @click="submitMember(addMemberFormRef)"> 添加 </el-button>
<el-button type="primary" @click="submitMember(addMemberFormRef)" :loading="loading">
添加
</el-button>
</span>
</template>
</el-dialog>
@ -56,7 +59,7 @@ import { ref, watch, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { MsgSuccess } from '@/utils/message'
import TeamApi from '@/api/team'
import UserApi from '@/api/user'
// import UserApi from '@/api/user'
const emit = defineEmits(['refresh'])
@ -66,11 +69,11 @@ const memberForm = ref({
users: []
})
const SelectRemoteRef = ref()
// const SelectRemoteRef = ref()
const addMemberFormRef = ref<FormInstance>()
const loading = ref<boolean>(false)
const userOptions = ref<Array<any>>([])
// const userOptions = ref<Array<any>>([])
const rules = ref<FormRules>({
users: [
@ -88,23 +91,24 @@ watch(dialogVisible, (bool) => {
memberForm.value = {
users: []
}
loading.value = false
}
})
const remoteMethod = (query: string) => {
if (query) {
setTimeout(() => {
getUser(query)
}, 200)
} else {
userOptions.value = []
}
}
// const remoteMethod = (query: string) => {
// if (query) {
// setTimeout(() => {
// getUser(query)
// }, 200)
// } else {
// userOptions.value = []
// }
// }
const changeSelectHandle = () => {
SelectRemoteRef.value.query = ''
SelectRemoteRef.value.blur()
}
// const changeSelectHandle = () => {
// SelectRemoteRef.value.query = ''
// SelectRemoteRef.value.blur()
// }
const open = () => {
dialogVisible.value = true
@ -114,10 +118,12 @@ const submitMember = async (formEl: FormInstance | undefined) => {
await formEl.validate((valid, fields) => {
if (valid) {
loading.value = true
TeamApi.postCreatTeamMember(memberForm.value.users).then((res) => {
let idsArray = memberForm.value.users.map((obj: any) => obj.id)
TeamApi.postCreatTeamMember(idsArray).then((res) => {
MsgSuccess('提交成功')
emit('refresh', memberForm.value.users)
emit('refresh', idsArray)
dialogVisible.value = false
loading.value = false
})
} else {
console.log('error submit!')
@ -125,11 +131,11 @@ const submitMember = async (formEl: FormInstance | undefined) => {
})
}
const getUser = (val: string) => {
UserApi.getUserList(val, loading).then((res) => {
userOptions.value = res.data
})
}
// const getUser = (val: string) => {
// UserApi.getUserList(val, loading).then((res) => {
// userOptions.value.push(res.data)
// })
// }
onMounted(() => {})