通用的评论组件

流程图中可查看当前流程审批人
首页使用配置项中的后端地址
列表字段默认左对齐

src/components/Comment/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import comment from './src/Comment.vue';
+
+export const Comment = withInstall(comment);

src/components/Comment/src/Comment.vue

@@ -0,0 +1,158 @@
+<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"
+        >
+            <template #renderItem="{ item }">
+                <a-list-item>
+                    <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">
+            <template #avatar>
+                <a-avatar :src="userImage" :alt="userInfo.name" :title="userInfo.name" />
+            </template>
+            <template #content>
+                <a-form-item>
+                    <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-form-item>
+            </template>
+        </a-comment>
+    </a-modal>
+</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";
+
+  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;
+            }
+
+            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>