152 lines
3.3 KiB
Vue
152 lines
3.3 KiB
Vue
<template>
|
|
<div class="h-46px flex items-center justify-between px-20px">
|
|
<div class="flex items-center flex-1 h-full">
|
|
<SvgIcon class="text-white text-40px mr-13px" name="dh"></SvgIcon>
|
|
<div
|
|
class="flex items-center flex-1 h-full border border-[#414548] rounded-2px bg-[#414548] bg-opacity-40 px-17px"
|
|
>
|
|
<div
|
|
@click="handleSelect"
|
|
class="cursor-pointer text-white opacity-40 line-clamp-1 flex-1 text-22px"
|
|
v-if="!isEdit"
|
|
>
|
|
{{ data.title }}
|
|
</div>
|
|
<div class="flex-1" v-else @click.prevent.stop="() => {}">
|
|
<van-field
|
|
v-model="nameValue"
|
|
@blur="checkAddress($event)"
|
|
ref="nameRef"
|
|
class="!bg-transparent border-none text-white !h-full cu-field-edit"
|
|
></van-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center ml-10px">
|
|
<SvgIcon
|
|
v-if="!isEdit"
|
|
@click.stop="handleEdit"
|
|
class="text-28px mx-8px text-white"
|
|
name="编辑"
|
|
>
|
|
</SvgIcon>
|
|
<SvgIcon
|
|
v-else
|
|
class="text-28px mx-8px text-white"
|
|
name="对勾"
|
|
@click.stop="handleChangeName"
|
|
></SvgIcon>
|
|
<SvgIcon
|
|
@click.prevent.stop="handleDelete"
|
|
@click.stop="handleEdit"
|
|
class="text-28px ml-8px text-white"
|
|
name="qx"
|
|
>
|
|
</SvgIcon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { toRaw, ref, createVNode } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useChat } from '@/stores'
|
|
import http from '@/io/request'
|
|
import { showToast, showConfirmDialog } from 'vant'
|
|
|
|
const chatStore = useChat()
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
})
|
|
|
|
const nameRef = ref(null)
|
|
|
|
const isEdit = ref(false)
|
|
|
|
const nameValue = ref(props.data.title)
|
|
|
|
const emit = defineEmits(['onEdit', 'onDelete'])
|
|
|
|
const checkAddress = (e) => {
|
|
setTimeout(() => {
|
|
isEdit.value = false
|
|
}, 200)
|
|
}
|
|
|
|
const handleEdit = () => {
|
|
isEdit.value = true
|
|
nameValue.value = props.data.title
|
|
setTimeout(() => {
|
|
nameRef.value.focus()
|
|
}, 200)
|
|
}
|
|
|
|
const handleChangeName = () => {
|
|
if (!nameValue.value) {
|
|
showToast('请输入名称')
|
|
return
|
|
}
|
|
http
|
|
.put(
|
|
`/api/v1/conversations/${props.data.id}`,
|
|
{
|
|
title: nameValue.value,
|
|
},
|
|
{
|
|
requestBaseUrl: 'chat',
|
|
}
|
|
)
|
|
.then((res) => {
|
|
props.data.title = nameValue.value
|
|
isEdit.value = false
|
|
})
|
|
.catch((err) => {})
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
showConfirmDialog({
|
|
title: '删除对话？',
|
|
message: `这将删除${props.data.title}`,
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
})
|
|
.then(() => {
|
|
http
|
|
.delete(`/api/v1/conversations/${props.data.id}`, {
|
|
requestBaseUrl: 'chat',
|
|
})
|
|
.then((res) => {
|
|
chatStore.deleteConversation(props.data.id)
|
|
})
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
})
|
|
}
|
|
|
|
const handleSelect = async () => {
|
|
const uuid = props.data.id
|
|
if (isActive(uuid)) return
|
|
await chatStore.setActive(uuid)
|
|
}
|
|
|
|
function isActive(uuid) {
|
|
return chatStore.active === uuid
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.cu-field-edit {
|
|
&.van-field {
|
|
padding: 0 !important;
|
|
}
|
|
.van-field__control {
|
|
color: white;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
</style>
|