update

src/components/Chat/Information.vue

@@ -19,6 +19,7 @@ const {task} = defineProps({
         default: {}
     }
 });
+let tempPage = 0;
 const po = reactive({
     id: task.id,
 });
@@ -38,9 +39,16 @@ const {loading, pagination, initFetchData, fetchData} = useTableQuery({
     callback: (data) => {
         if (data.rows.length === 0) {
         } else {
+            tempPage = pagination.current;
             vo.info = data.info;
             vo.total = data.total;
             vo.rows.push(...data.rows);
+            vo.rows = Array.from(
+                vo.rows.reduce((map, item) => {
+                    map.set(item.id, item);
+                    return map;
+                }, new Map()).values()
+            )
         }
     }
 });
@@ -53,7 +61,7 @@ const send = async () => {
     Message.success(msg);
     form.content = null;
     form.images.length = 0;
-    await fetchData();
+    pagination.current = tempPage;
 }
 
 const handleScroll = ({target}) => {
@@ -96,6 +104,10 @@ const addIntervention = async () => {
                         </x-image>
                     </div>
                 </div>
+                <div
+                    :class="[v.status===0?'text_warn':'',v.status===1?'text_success':'',v.status===-1?'text_error':'', 'text_info']">
+                    {{ v.status_text }}
+                </div>
                 <div class="msg-state text-[14px] text-[#1D2129] mt-[4px]">
                     已读
                 </div>
@@ -220,4 +232,21 @@ const addIntervention = async () => {
 .chat-left {
 
 }
+
+.text_info {
+    font-size: 12px;
+    margin-top: 10px;
+}
+
+.text_success {
+    color: rgba(0, 180, 42, 1);
+}
+
+.text_warn {
+    color: rgba(255, 125, 0, 1);
+}
+
+.text_error {
+    color: rgba(245, 63, 63, 1);
+}
 </style>

src/components/Chat/index.vue

@@ -1,8 +1,12 @@
 <script setup>
+import {ref} from "vue";
 import XSelect from "../XSelect/index.vue";
 import Information from "./Information.vue";
 import dayjs from "dayjs";
+import Api from "../../api/index.js";
+import {Message} from "@arco-design/web-vue";
 
+const InformationRef = ref();
 const {task} = defineProps({
     task: {
         type: Object,
@@ -11,6 +15,28 @@ const {task} = defineProps({
 });
 const visible = defineModel('visible');
 const emits = defineEmits(['success']);
+
+const getStatus = () => Promise.resolve({
+    data: [
+        {
+            id: 0,
+            name: '待回复',
+        },
+        {
+            id: 1,
+            name: '已回复',
+        },
+    ]
+});
+
+const changeStatus = async () => {
+    const {msg} = await Api.merchant.finshReply({
+        id: task.id,
+        status: 1,
+    });
+    Message.success(msg);
+    emits('success');
+}
 </script>
 
 <template>
@@ -26,12 +52,14 @@ const emits = defineEmits(['success']);
         </a-alert>
         <div class="flex">
             <div class="p-[20px] bg-[#F2F3F5] flex-grow min-h-[800px] relative">
-                <Information :task="task" v-if="task?.id" @success="emits('success')"></Information>
+                <Information ref="InformationRef" :task="task" v-if="visible && task?.id"
+                             @success="emits('success')"></Information>
             </div>
             <div class="w-[280px] h-auto flex flex-col bg-[#F2F3F5] gap-[20px]" v-if="task">
                 <div class="bg-white p-[20px]">
                     <div class="mb-[20px] text-[16px]">进度管理</div>
-                    <x-select placeholder="待回复" api=""></x-select>
+                    <x-select v-model:model-value="task.is_reply" placeholder="待回复" :api="getStatus"
+                              @change="changeStatus" :init="true"></x-select>
                     <a-divider></a-divider>
                     <div class="mb-[20px] text-[16px]">进度管理</div>
                     <div class="grid grid-cols-2 gap-y-[12px]">