feat: 新增上传视频，生效功能初步完成待联调，其他闭环二期、报警二期修改.etc暂存

src/views/datamanager/alertformdata/components/common/AlertTable.vue

@@ -31,18 +31,29 @@
           {{ getNameByState(row.issueState) }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="130" fixed="right">
+      <el-table-column label="操作" width="160" fixed="right">
         <template #default="{ row }">
-          <img src="/src/assets/images/alert/urgent.png" alt="" title="点击标记为加急问题" v-if="!isShowTab && !row.priority"
-            @click="handleUrgent(row)">
-          <img src="/src/assets/images/alert/urgent-active.png" alt="" title="点击取消问题加急"
-            v-if="!isShowTab && row.priority" @click="handleUrgent(row)">
-          <img src="/src/assets/images/alert/edit.png" alt="" v-if="isShowTab" @click="handleEdit(row)">
-          <img src="/src/assets/images/alert/show-on.png" alt="" title="点击隐藏问题展示" v-if="!row.isHide"
+          <el-tooltip effect="dark" :content="takeEffect ? '点此设置为无效问题' : '点此设置为生效问题'" placement="top">
+            <el-switch v-model="row.isHide" />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="点击标记为加急问题" placement="top">
+            <img src="/src/assets/images/alert/urgent.png" alt="" v-if="!isShowTab && !row.priority"
+              @click="handleUrgent(row)">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="点击取消问题加急" placement="top">
+            <img src="/src/assets/images/alert/urgent-active.png" alt="" v-if="!isShowTab && row.priority"
+              @click="handleUrgent(row)">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="点击编辑问题" placement="top">
+            <img src="/src/assets/images/alert/edit.png" alt="" v-if="isShowTab" @click="handleEdit(row)">
+          </el-tooltip>
+          <el-tooltip effect="dark" content="点击删除问题数据" placement="top">
+            <img src="/src/assets/images/alert/delete.png" alt="" @click="handleDelete(row)">
+          </el-tooltip>
+          <!-- <img src="/src/assets/images/alert/show-on.png" alt="" title="点击隐藏问题展示" v-if="!row.isHide"
             @click="handleShow(row)">
           <img src="/src/assets/images/alert/show-off.png" alt="" title="点击恢复问题展示" v-if="row.isHide"
-            @click="handleShow(row)">
-          <img src="/src/assets/images/alert/delete.png" alt="" title="点击删除问题数据" @click="handleDelete(row)">
+            @click="handleShow(row)"> -->
         </template>
       </el-table-column>
     </el-table>
@@ -77,7 +88,7 @@ interface Props {
   onDetail: (row: DataSourceItem) => unknown; // 详情事件
   onUrgent?: (row: DataSourceItem) => unknown; // isShowTab=false时，加急按钮事件
   onEdit?: (row: DataSourceItem) => unknown;   // isShowTab=true时，编辑按钮事件
-  onShow: (row: DataSourceItem) => unknown;   // 显示/隐藏按钮事件
+  // onShow: (row: DataSourceItem) => unknown;   // 显示/隐藏按钮事件
   onDelete: (row: DataSourceItem) => unknown; // 删除按钮事件
 };
 
@@ -88,6 +99,8 @@ const handleSelectionChange = (selection: any[]) => {
   emits("update:selection", selection);
 };
 
+const takeEffect = ref(false);
+
 const handleDetailClick = (row) => {
   props.onDetail(row);
 };
@@ -97,9 +110,9 @@ const handleUrgent = (row) => {
 const handleEdit = (row) => {
   props.onEdit?.(row);
 };
-const handleShow = (row) => {
-  props.onShow(row);
-};
+// const handleShow = (row) => {
+//   props.onShow(row);
+// };
 const handleDelete = (row) => {
   props.onDelete(row);
 };
@@ -153,9 +166,16 @@ onBeforeMount(() => {
 :deep(.el-table-fixed-column--right) {
   .cell {
     display: flex;
+    align-items: center;
+  }
+
+  .el-switch {
+    margin-right: 20px;
   }
 
   img {
+    width: 20px;
+    height: 20px;
     margin-right: 20px;
     cursor: pointer;
   }

src/views/datamanager/alertformdata/components/common/Pagination.vue

@@ -56,7 +56,7 @@ const props = defineProps({
   },
   pageSizes: {
     type: Array,
-    default: () => [10, 20, 30, 50],
+    default: () => [10, 20, 30, 50, 100],
   },
 });
 </script>

src/views/datamanager/alertformdata/components/common/QuestionFormBase.vue

@@ -31,6 +31,27 @@
             <img w-full :src="dialogImageUrl" alt="Preview Image" />
           </el-dialog>
         </el-form-item>
+        <el-form-item label="问题视频：" prop="videos">
+          <p>(仅支持上传1条视频，大小50M以内)</p>
+          <el-upload v-if="videoUrl.length === 0" class="avatar-uploader" action="/skyeye-admin-api/issue/uploadPicture"
+            :show-file-list="false" :on-success="handleUploadVideo" :headers="getHeaders()"
+            :data="{ bizType: 'PROBLEM_REPORT' }" :before-upload="beforeUploadVideo">
+            <el-icon class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+          <div class="upload-success" v-else>
+            <img src="@/assets/images/alert/video-play.png" @click="videoDialogVisible = true" />
+            <el-icon class="clear-video" @click="videoUrl = []" :size="25">
+              <CloseBold />
+            </el-icon>
+            <el-dialog v-model="videoDialogVisible" width="500">
+              <video width="320" height="200" type="video/mp4" muted="true" preload="auto" :controls="true" autoplay>
+                <source :src="videoUrl[0]" />
+              </video>
+            </el-dialog>
+          </div>
+        </el-form-item>
         <el-form-item label="问题地点：" prop="workspaceId" :rules="{ required: true, message: '请完成必填项' }">
           <el-cascader v-model="workLocation" :options="locationOptions" :props="location" placeholder="请选择问题地点"
             clearable @change="handleCascaderChange" />
@@ -57,8 +78,8 @@
 
 <script setup lang="ts">
 import { computed, onBeforeMount, onMounted, reactive, ref } from 'vue';
-import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus';
-import { Plus } from '@element-plus/icons-vue';
+import { ElMessage, type FormInstance, type UploadProps, type UploadUserFile } from 'element-plus';
+import { Plus, CloseBold } from '@element-plus/icons-vue';
 import { IssueState, sourceOptions, issueStateOptionsAdd } from './constant.question';
 import { useIssueType } from '../../hooks/useIssueType';
 import { useWorkLocation } from '../../hooks/useWorkLocation';
@@ -110,6 +131,7 @@ const formData = reactive<FormModel>({
 const location = { expandTrigger: 'hover' as const };
 const workLocation = ref<[number | undefined, number | undefined] | []>([]);
 
+
 const handleSelectChange = () => {
   formData.issueType = undefined;
 };
@@ -145,7 +167,6 @@ const handleCopyData = () => {
   formData.workshopId = props.initialData?.workshopId;
   formData.workspaceId = props.initialData?.workspaceId;
   formData.createdAt = props.initialData?.createdAt;
-  console.log(props.initialData?.issueState);
   switch (props.initialData?.issueState) {
     case IssueState.toAuth0:
       formData.issueState = 2;
@@ -163,7 +184,6 @@ const handleCopyData = () => {
       formData.issueState = props.initialData?.issueState;
       break;
   }
-  console.log(formData.issueState);
 
   workLocation.value = [props.initialData?.workshopId, props.initialData?.workspaceId!];
   fileList.value = props.initialData?.pictures?.map(str => ({ name: str, url: str })) || [];
@@ -208,6 +228,24 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
   dialogVisible.value = true;
 };
 
+// 视频上传
+const videoUrl = ref<string[]>([]);
+const videoDialogVisible = ref(false);
+const handleUploadVideo = (res) => {
+  videoUrl.value.push(res.data.url);
+  console.log(videoUrl.value);
+};
+const beforeUploadVideo: UploadProps['beforeUpload'] = (rawFile) => {
+  if (rawFile.type !== 'video/mp4') {
+    ElMessage.error('上传视频仅支持mp4格式');
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 50) {
+    ElMessage.error('上传视频大小不能超过50MB');
+    return false
+  }
+  return true
+}
+
 onMounted(() => {
   handleCopyData();
 });
@@ -248,10 +286,43 @@ onBeforeMount(() => {
   :deep(.el-form-item__content) {
     display: block;
   }
+}
 
-  p {
-    font-size: 10px;
-    color: #A8ABB2;
+p {
+  font-size: 10px;
+  color: #A8ABB2;
+}
+
+:deep(.avatar-uploader .el-upload) {
+  border: 1px dashed #cdd0d6;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  background-color: #fafafa;
+}
+
+:deep(.avatar-uploader .el-upload:hover) {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #909399;
+  width: 148px;
+  height: 148px;
+  text-align: center;
+}
+
+.upload-success {
+  position: relative;
+
+  .clear-video {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
   }
 }
 </style>

src/views/datamanager/alertformdata/components/show/Show.vue

@@ -18,8 +18,7 @@
         <span class="close-btn" @click="handleSelectNone"></span>
       </div>
       <AlertTable ref="alertTableRef" class="table-bar" :is-show-tab="true" :table-data="tableData"
-        :on-detail="handleDetail" :on-edit="handleEdit" :on-show="handleShow" :on-delete="handleDelete"
-        @update:selection="handlePop" />
+        :on-detail="handleDetail" :on-edit="handleEdit" :on-delete="handleDelete" @update:selection="handlePop" />
     </div>
     <div class="pagination-box">
       <Pagination v-model:page="query.pageNumber" v-model:size="query.pageSize" :total="total"
@@ -215,16 +214,16 @@ const handleEditDrawerClose = () => {
 };
 
 // 单个显示hide=false/隐藏hide=true
-const handleShow = (row) => {
-  const tempHide = row.isHide === false ? true : false;
-  const updateList = {
-    id: [row.id],
-    isHide: tempHide,
-  };
-  updateShowTableData(updateList).then(() => {
-    getTableData();
-  });
-};
+// const handleShow = (row) => {
+//   const tempHide = row.isHide === false ? true : false;
+//   const updateList = {
+//     id: [row.id],
+//     isHide: tempHide,
+//   };
+//   updateShowTableData(updateList).then(() => {
+//     getTableData();
+//   });
+// };
 
 // 删除
 const handleDelete = (row) => {