Skip to content

T
tokcos-socket-web-ts-user
提交 7c587846 作者: Hao
操作

add

父级 3ed4e7f7
正在显示 包含 183 行增加 和 91 行删除
.env.development
NODE_ENV=development
VITE_USER_APP_API_URL=192.168.31.112
\ No newline at end of file
VITE_USER_APP_API_URL=192.168.31.120
auto-imports.d.ts
......@@ -5,5 +5,6 @@
// Generated by unplugin-auto-import
export {}
declare global {
const ElLoading: typeof import('element-plus/es')['ElLoading']
const ElMessage: typeof import('element-plus/es')['ElMessage']
}
index.html
......@@ -31,7 +31,7 @@
console.log(scaleRatio,fontSize, 'scaleRatio')
// 4.开始缩放网页
console.log(scaleRatio,'scaleRatio')
document.body.style = `zoom:${scaleRatio}`;
// document.body.style = `zoom:${scaleRatio}`;
console.log(document.body, ' document.body')
}
</script>
......
src/axios/index.ts
......@@ -6,7 +6,6 @@ const instance = axios.create({
// baseURL:'/api',
timeout: 1000, // 设置请求超时时间
});
console.log(import.meta.env, "import.meta.env");
instance.interceptors.request.use(
(config: any) => {
// 在发送请求之前做些什么，例如添加 token
......
src/components/AutomaticPrompt.vue
......@@ -37,7 +37,7 @@
ref="elAutocomplete"
placeholder="输入信息"
contenteditable="true"
style="outline: none; "
style="outline: none;"
@paste.prevent="handlePaste"
@focus="removeDefaultContent"
@input="handleSelect"
......@@ -71,6 +71,7 @@ const imgShowWidth = ref<number>(50)
const imgShowHeight = ref<number>(50)
const showEmotion = ref<boolean>(false)
const handleEmotion = (i: any) => {
console.log(i, '打印')
elAutocomplete.value.innerHTML += i
inputVal.value = elAutocomplete.value.innerHTML
showEmotion.value = false
......@@ -83,15 +84,7 @@ const upfile = () => {
const fileImgChange = async () => {
var e: any = window.event || event
var oFile = e.target.files[0]
console.log(oFile.type)
if (oFile.type == 'image/png') {
await setfileEvent(e.target)
} else {
upLoadFilesHander(oFile).then((ress) => {
const { success, result }: any = ress;
console.log(result,)
})
}
await setfileEvent(oFile)
const loading: any = ElLoading?.service({
lock: true,
text: '上传中...',
......@@ -99,29 +92,37 @@ const fileImgChange = async () => {
})
loading.close()
}
const setfileEvent = async (clipboardData: any) => {
const img = getPasteImageFile(clipboardData.files)
if (!img) {
return
}
const uploadRes = await fileToBase64(img)
if (!uploadRes) {
return
}
const oImage = await getImageObject(
const setfileEvent = async (file: any) => {
var html = ''
const { result }: any = await upLoadFilesHander(file)
const uploadRes = result
if (!uploadRes) return
if (file.type.includes('image')) {
html = await getImageObject(
uploadRes,
imgShowWidth.value,
imgShowHeight.value,
)
console.log(oImage, 'oImage')
elAutocomplete.value.innerHTML += oImage.outerHTML
inputVal.value = oImage.outerHTML
} else {
html = await getFileObject(uploadRes, file)
}
console.log(html, 'html打印')
elAutocomplete.value.innerHTML += html.outerHTML
inputVal.value += html.outerHTML
elAutocomplete.value.focus()
}
const handleSelect = (value: any) => {
inputVal.value = value.target.innerHTML
}
const getFileObject = (url: any, oFile: any) => {
var aTag = document.createElement('a')
aTag.href = url
aTag.download = oFile.name
aTag.target = 'view_window'
aTag.textContent = oFile.name
return aTag
}
const emit = defineEmits(['updateState'])
watch(inputVal, async (newValue) => {
if (!newValue) elAutocomplete.value.innerHTML = ''
......@@ -172,13 +173,11 @@ const handlePasteImageFile = async (clipboardData: any) => {
)
cursorInsert(oImage)
inputVal.value = elAutocomplete.value.innerHTML
// elAutocomplete.value.innerHTML = inputVal.value;
}
// 获取一个 image object
const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => {
const oImage = new Image(showWidth, showHeight)
const datasetFields = ['width', 'height']
const datasetSizes: any = {
width: '200',
......@@ -273,8 +272,9 @@ defineExpose({
.el-autocomplete {
width: 100%;
max-width: 100%;
height: calc(100vh - 732px);
height: calc(100vh - 60vh - 130px);
overflow: auto;
font-size: 14px;
}
.el-autocomplete img {
max-width: 100%; /* 设置图片最大宽度为容器宽度 */
......
src/minxins/UploadMixin.ts
......@@ -117,7 +117,6 @@ export const upLoadHander = async (obj: any) => {
if (resResult) {
const query = {};
// const res: any = await getUploadConfigInfo(query);
const result: any = uploadMixin.upLoadMixinResult;
if (uploadMixin.uploadMixinType === "txcos") {
//走对象存储
......@@ -172,18 +171,21 @@ export const upLoadHander = async (obj: any) => {
async: false,
}
);
if (uploadRes.success && uploadRes.message) {
let data = uploadRes.data;
console.log(data,'uploadRes')
if (data.success && data.message) {
//保存绝对路径，不然小程序会有问题
let url = uploadRes.message;
url = uploadRes.message.replaceAll("//", "/");
const pre = url.startsWith("/") ? "" : "/";
url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url;
console.log(url, "图片上传失败");
let url = data.message;
// console.log(url,'url')
// url = data.message.replaceAll("//", "/");
// const pre = url.startsWith("/") ? "" : "/";
// url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url;
// console.log(url, "图片上传成功");
obj.onSuccess({ success: true, message: url });
} else {
obj.onError({
success: false,
message: uploadRes.message || "图片上传失败",
message: data.message || "图片上传失败",
});
}
}
......
src/router/index.ts
......@@ -3,7 +3,7 @@ const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "home",
component: () => import(/* @vite-ignore */ `@/views/HomeView.vue`),
component: () => import(/* @vite-ignore */ `@/views/homeView.vue`),
},
{
path: "/loging",
......
src/store/modules/user.ts
......@@ -24,6 +24,7 @@ export const useUserStore = defineStore("user", {
this.customerInfo = res;
},
setUserInfo(res: any) {
console.log(res,'res')
this.userInfo = res;
},
setUserListMessages(res: any) {
......
src/test.ts 0 → 100644
interface aaa{
name:string
}
interface aaa{
age:number;
}
\ No newline at end of file
src/views/HomeView.vue
......@@ -20,7 +20,6 @@
<div class="we-connecting">
We are connecting you to online customer service
</div>
<!-- 推荐商品 -->
<div
class="message-container message-container-right"
......@@ -183,7 +182,7 @@
</div>
<div class="design-requirements">
<div>{{ message.content.flieName }}</div>
<div class="img">
<div class="img" @click="downLoad(message)" >
<img :src="require('../assets/icon_download.png')" />
</div>
</div>
......@@ -192,15 +191,6 @@
</div>
</el-main>
<el-footer class="el-footer" :style="{ border: '1px solid #E9ECF1' }">
<!-- <div class="static-box">
<div
v-for="(item, index) in staticList"
:key="index"
class="staticList"
>
<div>{{ item }}</div>
</div>
</div> -->
<AutomaticPrompt
@keydown.enter="handleButtonClick"
@updateState="getState"
......@@ -232,11 +222,11 @@
class="shirnk-aside"
v-shrink="{ isShrink, width: '0px' }"
:style="{
height: 'calc(100vh - 60px)',
height: 'calc( 100vh - 60px )',
}"
>
<div class="shrink-text" @click="changeiShrink">
<el-icon size="30">
<el-icon size="15">
<DArrowLeft v-if="isShrink" />
<DArrowRight v-if="!isShrink" />
</el-icon>
......@@ -331,22 +321,43 @@
/>
</el-form-item>
<el-form-item>
<div class="requirements-box" v-if="!isUpload">
<!-- <input
class="requirements-box"
v-if="!isUpload"
type="file"
@change="fileImgChange"
/> -->
<input
type="file"
ref="requireFile"
style="display: none;"
accept="image/bmp,image/jpeg,image/jpg,image/png"
@change="fileImgChange"
/>
<div
class="requirements-box"
v-if="!ruleForm.flieUrl"
@click="requireFileOk"
>
<el-button icon="UploadFilled" class="uploadInfo" />
<div class="upload">
<div class="upload-name">Click to upload</div>
<div>or drag and drap</div>
<div class="click-to-upload">
Click to upload
</div>
<div class="or-drag-and-drap">or drag and drap</div>
</div>
<div class="requirements-box1" v-if="isUpload">
</div>
<div class="requirements-box1" v-if="ruleForm.flieUrl">
<div class="box">
<div class="upload-name">{{ ruleForm.flieName }}</div>
<div class="upload-info">
<el-icon color="green"><CircleCheck /></el-icon>
<span>200KB</span>
<span>{{ ruleForm.flieSize }}KB</span>
</div>
</div>
<el-icon :size="20"><Delete /></el-icon>
<el-icon :size="20" @click="deleteFlieName(ruleForm)">
<Delete />
</el-icon>
</div>
</el-form-item>
<el-form-item prop="EmailAddress" label="Email Address">
......@@ -382,16 +393,20 @@ import '@luohc92/vue3-image-viewer/dist/style.css'
import { checkMesssages } from '../axios/model/user'
import { require } from '@/utils/index'
import { useRoute } from 'vue-router'
import { upLoadFilesHander } from '../minxins/UploadMixin'
const route = useRoute()
const routeParams = route.query
const pageType = routeParams.type || 1
const requireFile = ref<any>(null)
const ruleForm = ref({
ProductName: 'Product Name',
Email: '1143572217@qq.com',
purchaseQuantity: 'Product Category',
China: '',
price: 5000,
flieName: 'Tech design requirements.pdf',
flieName: '',
flieSize:0,
flieUrl: '',
otherRequirements:
'Other requirements explanation Other requirements explanation Other requirements explanation Other requirements explanation Other requirements explanation',
EmailAddress: 'from china',
......@@ -399,13 +414,11 @@ const ruleForm = ref({
let isShrink = ref('')
const changeiShrink = () => {
console.log(isShrink.value, 'value')
isShrink.value = !isShrink.value
}
//收缩
const vShrink: Directive<HTMLElement, boolean | Props> = {
mounted(el, binding) {
console.log(el, binding, '打印')
let { option } = formatCOlorOption(binding.value)
option.isUpdate && renderStyle(el, option)
},
......@@ -414,17 +427,12 @@ const vShrink: Directive<HTMLElement, boolean | Props> = {
let { option } = formatCOlorOption(binding.value)
if (option.isShrink) {
renderStyle(el, option)
//此时此刻还需要添加一个p对象
// renderAddNodes(el, option)
} else {
let obj = {
...option,
width: '292px',
}
// for (let key in option) obj[key] = ''
renderStyle(el, obj)
//此时此刻需要清空对象p
// renderAddNodes(el, option)
}
},
}
......@@ -432,6 +440,27 @@ const vShrink: Directive<HTMLElement, boolean | Props> = {
function renderStyle(el, option) {
for (let key in option) el.style[key] = option[key]
}
function fileImgChange() {
var e: any = window.event || event
var oFile = e.target.files[0]
upLoadFilesHander(oFile).then((ress) => {
const { success, result }: any = ress
if (success) {
console.log(oFile, 'oFile')
ruleForm.value.flieUrl = result
ruleForm.value.flieName = oFile.name
ruleForm.value.flieSize = oFile.size
console.log(ruleForm,'ruleForm')
}
})
const loading: any = ElLoading?.service({
lock: true,
text: '上传中...',
spinner: 'el-icon-loading',
})
loading.close()
}
//合并指令传递的数据和默认配置的数据
function formatCOlorOption(val: string | Props) {
const option =
......@@ -445,12 +474,21 @@ function formatCOlorOption(val: string | Props) {
option,
}
}
//登录
const deleteFlieName = (val: any) => {
console.log(isUpload.value, '打印', 'val')
ruleForm.value.flieUrl = ''
}
//过渡
const defaultStyle: {
transition?: string
} = {
transition: 'all 0.6s linear',
}
const requireFileOk = () => {
console.log(requireFile.value, 'value')
requireFile.value.click()
}
const rules = reactive({
ProductName: [
{
......@@ -491,7 +529,7 @@ const rules = reactive({
const ruleFormRef = ref<FormInstance>()
const customerInfo = ref({})
const messages = ref([])
const isUpload = true
const isUpload = ref<Boolean>(true)
const productInfo = ref({
productImg: require('../assets/shop.jpg'),
productName: 'The secret to looking glowup nowadays',
......@@ -538,6 +576,8 @@ const connectMsg = () => {
})
let VUE_APP_API_URL = import.meta.env.VITE_USER_APP_API_URL
const toIp = `ws://${VUE_APP_API_URL}:8081?type=yk&code=${useUser.userInfo.username}&kf=${store.customerInfo.username}`
console.log(toIp, 'toIpWS')
console.log(toIp, 'toIpWS001')
useUser.connect()
initWebSocket(toIp)
setTimeout(() => {
......@@ -630,16 +670,14 @@ const submitForm = (e) => {
messages.value?.push(data)
sendWebSocket(data)
}
const openWindow = (event: any) => {
urlDownload(event)
}
const handleMessageClick = (event: any) => {
const target = event.target
console.log(target, 'target')
if (target.tagName === 'A') {
if (target.innerHTML === '解决') {
alert('感谢您的使用')
} else if (target.innerHTML === '未解决') {
alert('很抱歉未能解决你的问题')
} else {
handleLinkClick(target.innerHTML)
}
openWindow(target.href)
} else if (target.tagName === 'IMG') {
// 点击的图片进行放大操作
ImageViewer({
......@@ -654,16 +692,22 @@ const handleMessageClick = (event: any) => {
})
}
}
const downLoad = (message: any) => {
urlDownload(message.content.flieUrl)
}
//查看消息将其改为已读
const getCheckMesssages = async (res: any) => {
try {
const { success, result, message }: any = await checkMesssages({
username: res.username,
})
} catch (error) {
console.log(error)
}
const urlDownload = (url, fileName = '下载文件') => {
// 创建隐藏的可下载链接
let eleLink = document.createElement('a')
eleLink.download = fileName
eleLink.style.display = 'none'
eleLink.href = url
// 触发点击
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
console.log(url, '下载url')
document.body.removeChild(eleLink)
}
const handleLinkClick = (msg: string) => {
......@@ -688,7 +732,6 @@ const toSendLink = (e: any) => {
to: customerInfo.value.username,
form: store.userInfo.username,
}
messages.value?.push(data)
sendWebSocket(data)
}
......@@ -696,15 +739,21 @@ const toSendLink = (e: any) => {
<style lang="scss" scoped>
.shirnk-aside {
position: relative;
overflow: hidden;
overflow: initial;
overflow-y: scroll;
overflow: inherit;
.shrink-text {
position: absolute;
top: 50%;
transform: translate(-50%);
width: 20px;
height: 20px;
left: -20px;
line-height: 15px;
height: 15px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
left: -12px;
font-size: 10px;
}
}
......@@ -1512,9 +1561,36 @@ const toSendLink = (e: any) => {
}
}
}
.click-to-upload {
color: #073a3d;
font-family: 'Inter';
font-size: 14px;
font-style: normal;
font-weight: 600;
margin-bottom: 4px;
}
.or-drag-and-drap {
color: #475467;
font-family: 'Inter';
font-size: 14px;
font-style: normal;
font-weight: 400;
}
.recently-input-box {
padding: 12px;
}
.requirements-box {
position: relative;
z-index: 0;
}
input {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: transparent;
}
.requirements-box,
.requirements-box1 {
.box {
......@@ -1562,6 +1638,12 @@ const toSendLink = (e: any) => {
border: 1px solid #eaecf0;
padding: 12px 58px 12px 14px;
}
.click-to-upload {
line-height: 20px;
}
.or-drag-and-drap {
line-height: 20px;
}
.requirements-box1 {
background: #f6f9fcff;
}
......
vite.config.ts
......@@ -48,5 +48,6 @@ export default defineConfig({
host: "0.0.0.0",
port: 8082,
open: false,
overlay:true,
},
});
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论