个人中心反馈处理优化到最新版本

.env.development

@@ -22,6 +22,7 @@ VITE_DROP_CONSOLE = true
 #VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68:70/skyeye-admin-api"],["/eye_api_bak","http://192.168.13.68:70/eye_api"],["/push_stream_host","http://192.168.13.68:70/push_stream_host"],["/skyeye-login","http://192.168.13.68:70/skyeye-login"],["/ws_api_bak","ws://192.168.13.68:70/ws_api_bak"]]
 VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.163:8800/api"],[],["/eye_api_bak","http://192.168.22.163:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"]]
+#VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.121:8800/api"],["/eye_api_bak","http://192.168.22.121:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
 
 
 # API 接口地址

src/api/feedback/feedback.ts

@@ -8,20 +8,22 @@ export enum STATUS {
 
 export interface Records {
   id: number;
-  nickname: string;
-  username: string;
+  submitterNickname: string;
+  submitterUsername: string;
   tenantId: number;
   mobile: string;
   problemDescription: string;
   // problemImage: Array<File>;
   problemImageUrl: string;
   problemStatus: STATUS;
-  processor: string | null;
-  processorTenant: string | null;
+  processorUserId:number|null;
+  processorName: string | null;
+  // processorTenant: string | null;
   dealMethod: string | null;
   createdAt: string;
   updatedAt: string;
   isDeleted: number;
+  problemType:number;
 }
 
 export interface ReturnType {
@@ -52,7 +54,7 @@ export const getFeedbackList = (data: QueryFeedback) => {
 export interface UpdateFeedbackType {
   id: number;
   problemStatus: STATUS;
-  processor: string;
+  processorName: string;
   dealMethod: string;
 }
 

src/views/feedback/component/singleProblem.vue

@@ -7,7 +7,7 @@
       <img src="@/assets/icons/phone.png" alt="" />
       <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
       <div style="color: #00000073"
-        >人员：{{ props.problemData.username }}-{{ props.problemData.nickname }}
+        >人员：{{ props.problemData.submitterUsername }}-{{ props.problemData.submitterNickname }}
       </div>
       <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
     </div>
@@ -15,17 +15,35 @@
       >处理</el-button
     >
     <el-divider />
+    <div class="problem-type">
+      <div>问题类型：</div>
+      <div class="type-content">{{ problemType[props.problemData.problemType] }}</div>
+    </div>
     <div class="problem-describe">
       <div>问题描述：</div>
       <div class="problem-content">{{ props.problemData.problemDescription }}</div>
     </div>
+    <div class="problem-picture">
+      <div class="picture-content" v-for="(item, index) in problemImageUrls" :key="index">
+        <el-image
+          style="width: 80px; height: 80px"
+          :src="item"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="problemImageUrls"
+          :initial-index="index"
+          fit="cover"
+        />
+      </div>
+    </div>
 
     <el-collapse v-if="props.problemData.problemStatus === STATUS.handled" v-model="activeNames">
       <el-collapse-item name="1">
         <template #title>
           <div class="problem-describe">
             <div>处理人：</div>
-            <div class="problem-content">{{ props.problemData.processor }}</div>
+            <div class="problem-content">{{ props.problemData.processorName }}</div>
           </div>
         </template>
         <div class="problem-describe">
@@ -38,77 +56,91 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { Records, STATUS } from '@/api/feedback/feedback';
-  import useHandleStore from '../useHandleStore';
-  import { storeToRefs } from 'pinia';
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { Records, STATUS } from '@/api/feedback/feedback';
+import useHandleStore from '../useHandleStore';
+import { storeToRefs } from 'pinia';
+import { problemType } from '../constant';
 
-  const useSingle = useHandleStore();
-  const { singleFeedback } = storeToRefs(useSingle);
+const useSingle = useHandleStore();
+const { singleFeedback } = storeToRefs(useSingle);
 
-  const router = useRouter();
-  const props = defineProps<{
-    problemData: Records;
-    isHandle: boolean;
-  }>();
+const router = useRouter();
+const props = defineProps<{
+  problemData: Records;
+  isHandle: boolean;
+}>();
 
-  const activeNames = ref<string>('');
+const activeNames = ref<string>('');
+const problemImageUrls = computed(() => {
+  const imageUrlString = props.problemData.problemImageUrl;
+  return imageUrlString ? imageUrlString.split(',') : [];
+});
 
-  const handleProblem = () => {
-    singleFeedback.value = props.problemData;
-    router.push('/feedback/handle');
-  };
+const handleProblem = () => {
+  singleFeedback.value = props.problemData;
+  router.push('/feedback/handle');
+};
 </script>
 
 <style scoped>
-  .single-item {
-    background: #ffffff;
-    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
-    border-radius: 6px;
-    padding: 16px 12px 0px 12px;
-    position: relative;
-  }
+.single-item {
+  background: #ffffff;
+  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
+  border-radius: 6px;
+  padding: 16px 12px 0px 12px;
+  position: relative;
+}
 
-  .single-contact {
-    margin-left: 10px;
-    margin-right: 40px;
-  }
-  .single-handle {
-    position: absolute;
-    top: 11px;
-    right: 12px;
-  }
+.single-contact {
+  margin-left: 10px;
+  margin-right: 40px;
+}
+.single-handle {
+  position: absolute;
+  top: 11px;
+  right: 12px;
+}
 
-  .el-divider--horizontal {
-    margin: 16px 0;
-  }
+.el-divider--horizontal {
+  margin: 16px 0;
+}
 
-  .problem-describe {
-    font-size: 14px;
-    white-space: nowrap;
-    word-break: break-word;
-    display: flex;
-    margin-bottom: 8px;
-  }
+.problem-type,
+.problem-describe {
+  font-size: 14px;
+  white-space: nowrap;
+  word-break: break-word;
+  display: flex;
+  margin-bottom: 8px;
+}
 
-  .problem-content {
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
+.type-content,
+.problem-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.type-content {
+  font-weight: 600;
+}
+.problem-picture{
+  display: flex;
+  gap: 20px;
+}
 
-  :deep(.el-collapse-item__header) {
-    border-bottom: none;
-  }
+:deep(.el-collapse-item__header) {
+  border-bottom: none;
+}
 
-  :deep(.el-collapse-item__wrap) {
-    border-bottom: none;
-  }
+:deep(.el-collapse-item__wrap) {
+  border-bottom: none;
+}
 
-  :deep(.el-collapse-item__content) {
-    padding-bottom: 0px;
-  }
-  :deep(.el-collapse) {
-    border-top: none;
-  }
+:deep(.el-collapse-item__content) {
+  padding-bottom: 0px;
+}
+:deep(.el-collapse) {
+  border-top: none;
+}
 </style>

src/views/feedback/constant.ts

@@ -4,3 +4,9 @@ export const tabContent = [
   { name: '未处理', value: STATUS.unhandled },
   { name: '已处理', value: STATUS.handled },
 ];
+
+export enum problemType {
+  系统操作问题 = 1,
+  产品内容问题 = 2,
+  其他 = 3
+}

src/views/feedback/feedback.vue

@@ -24,7 +24,8 @@
     >
     <div class="problem-list"
       ><singleProblem
-        v-for="item in feedbackList"
+        v-for="(item,index) in feedbackList"
+        :key="index"
         :problem-data="item"
         :is-handle="item.problemStatus === STATUS.unhandled"
         style="margin-top: 22px; margin-bottom: 2px"

src/views/feedback/handleFeedback.vue

@@ -30,7 +30,7 @@
         />
       </el-form-item>
     </el-form>
-    <el-button type="primary" @click="subHandle" class="sub-btn"> 提交 </el-button>
+    <el-button type="primary" @click="subHandle" class="sub-btn" :disabled="!isFormValid"> 提交 </el-button>
 
     <el-dialog
       v-model="dialogVisible"
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, watch } from 'vue';
+  import { ref, reactive, watch,computed } from 'vue';
   import { Back } from '@element-plus/icons-vue';
   import { useRouter } from 'vue-router';
   import singleProblem from './component/singleProblem.vue';
@@ -78,6 +78,9 @@
   const rules = reactive<FormRules>({
     name: [{ required: true, message: '处理人不能为空', trigger: 'blur' }],
   });
+  const isFormValid = computed(()=>{
+    return Object.keys(rules).every(item => ruleForm[item].length>0)
+  })
 
   const backList = () => {
     router.push('/feedback/list');
@@ -95,7 +98,7 @@
       const subData = {
         id: singleFeedback.value.id,
         problemStatus: STATUS.handled,
-        processor: ruleForm.name,
+        processorName: ruleForm.name,
         dealMethod: ruleForm.solution,
       };
       updateFeedback(subData).then(() => {