style: lint格式化文件
This commit is contained in:
@ -1,31 +1,14 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
:title="title"
|
||||
@cancel="handleCancel"
|
||||
width="800px"
|
||||
:footer="null"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<a-empty style="padding:20px;" v-if="comments.length<=0"/>
|
||||
<a-list style="padding:20px;height:400px"
|
||||
v-if="comments.length"
|
||||
:data-source="comments"
|
||||
:header="`共有${comments.length}个${title}`"
|
||||
item-layout="horizontal"
|
||||
>
|
||||
<a-modal v-model:visible="visible" :title="title" @cancel="handleCancel" width="800px" :footer="null" :destroyOnClose="true">
|
||||
<a-empty style="padding: 20px" v-if="comments.length <= 0" />
|
||||
<a-list style="padding: 20px; height: 400px" v-if="comments.length" :data-source="comments" :header="`共有${comments.length}个${title}`" item-layout="horizontal">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-comment
|
||||
:author="item.createUserName"
|
||||
:avatar="item.createUserAvatar||headerImg"
|
||||
:content="item.content"
|
||||
:datetime="item.createDate"
|
||||
/>
|
||||
<a-comment :author="item.createUserName" :avatar="item.createUserAvatar || headerImg" :content="item.content" :datetime="item.createDate" />
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-comment style="margin:50px 20px 0 20px;height:240px" v-if="canAdd">
|
||||
<a-comment style="margin: 50px 20px 0 20px; height: 240px" v-if="canAdd">
|
||||
<template #avatar>
|
||||
<a-avatar :src="userImage" :alt="userInfo.name" :title="userInfo.name" />
|
||||
</template>
|
||||
@ -34,9 +17,7 @@
|
||||
<a-textarea v-model:value="value" :placeholder="placeholder" :rows="4" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
|
||||
添加{{title}}
|
||||
</a-button>
|
||||
<a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit"> 添加{{ title }} </a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-comment>
|
||||
@ -44,115 +25,110 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { XjrCommentModel } from '/@/api/system/comment/model/CommentModel';
|
||||
import { string } from 'vue-types';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import headerImg from '/@/assets/images/header.jpg';
|
||||
import { getXjrCommentPage, addXjrComment } from '/@/api/system/comment';
|
||||
|
||||
import {defineComponent, ref} from "vue";
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import {XjrCommentModel} from "/@/api/system/comment/model/CommentModel";
|
||||
import {string} from "vue-types";
|
||||
import {useUserStore} from "/@/store/modules/user";
|
||||
import headerImg from '/@/assets/images/header.jpg';
|
||||
import {getXjrCommentPage,addXjrComment} from "/@/api/system/comment";
|
||||
|
||||
const props = {
|
||||
title: {
|
||||
type: string,
|
||||
default: '评论'
|
||||
},
|
||||
placeholder:{
|
||||
type: string,
|
||||
default(props){
|
||||
return "请输入"+props.title+"内容";
|
||||
}
|
||||
},
|
||||
businessType:{
|
||||
type: string
|
||||
}
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Comment',
|
||||
props,
|
||||
emits: ['onStarted', 'onFinished'],
|
||||
setup(props, { emit }) {
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const visible = ref(false);
|
||||
const comments = ref<XjrCommentModel[]>([]);
|
||||
const submitting = ref<boolean>(false);
|
||||
const value = ref<string>('');
|
||||
const userStore = useUserStore();
|
||||
const userInfo = userStore.getUserInfo;
|
||||
const userImage=userInfo.avatar||headerImg;
|
||||
const businessId=ref<string>('');
|
||||
const canAdd=ref<boolean>(false);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!value.value) {
|
||||
return;
|
||||
const props = {
|
||||
title: {
|
||||
type: string,
|
||||
default: '评论'
|
||||
},
|
||||
placeholder: {
|
||||
type: string,
|
||||
default(props) {
|
||||
return '请输入' + props.title + '内容';
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
const submitResultId=addXjrComment({
|
||||
businessCode:props.businessType,
|
||||
businessId:businessId.value,
|
||||
content:value.value
|
||||
});
|
||||
|
||||
submitting.value = false;
|
||||
comments.value = [
|
||||
{
|
||||
createUserName: userInfo.name,
|
||||
createUserAvatar: userImage,
|
||||
content: value.value,
|
||||
createDate: dayjs().fromNow(),
|
||||
id:submitResultId
|
||||
},
|
||||
...comments.value,
|
||||
];
|
||||
value.value = '';
|
||||
};
|
||||
|
||||
const showComment=(commentBusinessId:string,canAddVal:boolean)=>{
|
||||
businessId.value=commentBusinessId;
|
||||
canAdd.value=canAddVal;
|
||||
const commentPage=getXjrCommentPage({
|
||||
businessCode:props.businessType,
|
||||
businessId:businessId.value,
|
||||
size: 99
|
||||
}).then((commentPage)=>{
|
||||
comments.value=commentPage.total>0?[
|
||||
...commentPage.list
|
||||
]:[];
|
||||
showCommentModal();
|
||||
});
|
||||
},
|
||||
businessType: {
|
||||
type: string
|
||||
}
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Comment',
|
||||
props,
|
||||
emits: ['onStarted', 'onFinished'],
|
||||
setup(props, { emit }) {
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
const showCommentModal = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const visible = ref(false);
|
||||
const comments = ref<XjrCommentModel[]>([]);
|
||||
const submitting = ref<boolean>(false);
|
||||
const value = ref<string>('');
|
||||
const userStore = useUserStore();
|
||||
const userInfo = userStore.getUserInfo;
|
||||
const userImage = userInfo.avatar || headerImg;
|
||||
const businessId = ref<string>('');
|
||||
const canAdd = ref<boolean>(false);
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
if (!value.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
visible,
|
||||
comments,
|
||||
handleSubmit,
|
||||
submitting,
|
||||
canAdd,
|
||||
showCommentModal,
|
||||
showComment,
|
||||
handleCancel,
|
||||
value,
|
||||
userInfo,
|
||||
userImage,
|
||||
headerImg
|
||||
};
|
||||
},
|
||||
});
|
||||
submitting.value = true;
|
||||
|
||||
const submitResultId = addXjrComment({
|
||||
businessCode: props.businessType,
|
||||
businessId: businessId.value,
|
||||
content: value.value
|
||||
});
|
||||
|
||||
submitting.value = false;
|
||||
comments.value = [
|
||||
{
|
||||
createUserName: userInfo.name,
|
||||
createUserAvatar: userImage,
|
||||
content: value.value,
|
||||
createDate: dayjs().fromNow(),
|
||||
id: submitResultId
|
||||
},
|
||||
...comments.value
|
||||
];
|
||||
value.value = '';
|
||||
};
|
||||
|
||||
const showComment = (commentBusinessId: string, canAddVal: boolean) => {
|
||||
businessId.value = commentBusinessId;
|
||||
canAdd.value = canAddVal;
|
||||
const commentPage = getXjrCommentPage({
|
||||
businessCode: props.businessType,
|
||||
businessId: businessId.value,
|
||||
size: 99
|
||||
}).then((commentPage) => {
|
||||
comments.value = commentPage.total > 0 ? [...commentPage.list] : [];
|
||||
showCommentModal();
|
||||
});
|
||||
};
|
||||
|
||||
const showCommentModal = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
visible,
|
||||
comments,
|
||||
handleSubmit,
|
||||
submitting,
|
||||
canAdd,
|
||||
showCommentModal,
|
||||
showComment,
|
||||
handleCancel,
|
||||
value,
|
||||
userInfo,
|
||||
userImage,
|
||||
headerImg
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user