feat: 新增闭环二期-上报添加视频、详情查看视频；报警问题管理-预审、页码

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

@@ -33,8 +33,12 @@
       </el-table-column>
       <el-table-column label="操作" width="160" fixed="right">
         <template #default="{ row }">
-          <el-tooltip effect="dark" :content="takeEffect ? '点此设置为无效问题' : '点此设置为生效问题'" placement="top">
-            <el-switch v-model="row.isHide" />
+          <!-- <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)"> -->
+          <el-tooltip effect="dark" :content="row.isHide ? '点此设置为生效问题' : '点此设置为无效问题'" placement="top">
+            <el-switch :model-value="!row.isHide" @change="handleShow(row)" />
           </el-tooltip>
           <el-tooltip effect="dark" content="点击标记为加急问题" placement="top">
             <img src="/src/assets/images/alert/urgent.png" alt="" v-if="!isShowTab && !row.priority"
@@ -50,10 +54,6 @@
           <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)"> -->
         </template>
       </el-table-column>
     </el-table>
@@ -88,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; // 删除按钮事件
 };
 
@@ -99,8 +99,6 @@ const handleSelectionChange = (selection: any[]) => {
   emits("update:selection", selection);
 };
 
-const takeEffect = ref(false);
-
 const handleDetailClick = (row) => {
   props.onDetail(row);
 };
@@ -110,9 +108,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);
 };

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

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-dialog v-model="visible" title="问题详情" width="80%" align-center :close-on-click-modal="false">
+    <el-dialog v-model="visible" title="问题详情" width="80%" align-center :close-on-click-modal="false"
+      @close="handleClose">
       <div class="description-box">
         <div class="title">问题描述</div>
         <p>{{ description }}</p>
@@ -8,6 +9,10 @@
       <div>
         <div class="title">问题图片/视频</div>
         <div class="media-box">
+          <div class="video-box" v-if="videoPaths">
+            <img src="@/assets/images/alert/video-play.png" @click="videoDialogVisible = true"
+              style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC; cursor: pointer;" />
+          </div>
           <div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
             <img :src="imagePath" alt="" style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC"
               @mouseenter="handleOpenPre(imagePath, index)">
@@ -23,44 +28,33 @@
     <el-dialog v-model="dialogVisible">
       <img w-full :src="dialogImageUrl" alt="" />
     </el-dialog>
+
+    <el-dialog v-model="videoDialogVisible" class="video-dialog">
+      <video type="video/mp4" muted="true" preload="auto" :controls="true" autoplay
+        style="height: 464px;object-fit: contain;">
+        <source :src="videoPaths![0]" />
+      </video>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue';
+import { ref } from 'vue';
 import { ZoomIn } from '@element-plus/icons-vue';
 
 const props = defineProps({
-  showDrawer: Boolean,
   description: String,
   imagePaths: Array<string>,
+  videoPaths: Array<string>,
 });
-const { showDrawer } = toRefs(props);
 
-const emits = defineEmits(['toggleStatus']);
-const visible = ref(false);
-
-const toggle = (newVal: boolean) => {
-  visible.value = newVal;
-};
-
-watch(
-  () => showDrawer.value,
-  (newVal) => {
-    toggle(newVal)
-  }
-);
-
-watch(
-  () => visible.value,
-  (newVal) => {
-    emits('toggleStatus', newVal)
-  }
-);
+const emits = defineEmits(['close']);
+const visible = ref(true);
 
 const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
 const dialogVisible = ref(false);
 const dialogImageUrl = ref('');
+const videoDialogVisible = ref(false);
 
 const handleOpenPre = (val, index) => {
   dialogImageUrl.value = val;
@@ -79,7 +73,9 @@ const handlePreview = () => {
   dialogVisible.value = true;
 };
 
-
+const handleClose = () => {
+  emits('close');
+}
 </script>
 
 <style scoped>
@@ -138,6 +134,12 @@ const handlePreview = () => {
 .media-box {
   display: flex;
 
+  .video-box {
+    width: 200px;
+    height: 200px;
+    margin-right: 10px;
+  }
+
   .img-box {
     position: relative;
     width: 200px;
@@ -155,6 +157,13 @@ const handlePreview = () => {
     height: 200px;
     background-color: rgba(0, 0, 0, 0.5);
   }
+}
 
+:deep(.video-dialog) {
+  .el-dialog__body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>

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

@@ -31,23 +31,25 @@
             <img w-full :src="dialogImageUrl" alt="Preview Image" />
           </el-dialog>
         </el-form-item>
-        <el-form-item label="问题视频：" prop="videos">
+        <el-form-item class="pic-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-upload v-if="formData.videos === undefined || formData.videos.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">
+            <img src="@/assets/images/alert/video-play.png" @click="videoDialogVisible = true"
+              style="cursor: pointer;" />
+            <el-icon class="clear-video" @click="handleDeleteVideo" :size="15" color="#fff">
               <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]" />
+            <el-dialog v-model="videoDialogVisible">
+              <video type="video/mp4" muted="true" preload="auto" :controls="true" autoplay
+                style="height: 500px;object-fit: fill;">
+                <source :src="formData.videos![0]" />
               </video>
             </el-dialog>
           </div>
@@ -100,6 +102,7 @@ interface FormModel {
   issueType?: number,      // 类型
   description?: string,    // 描述
   pictures?: string[],     // 图片
+  videos?: string[],
   workshopId?: number,     // 车间id
   workshopName?: string,
   workspaceId?: number,    // 工位id
@@ -122,6 +125,7 @@ const formData = reactive<FormModel>({
   issueType: undefined,
   description: '',
   pictures: [],
+  videos: [],
   workshopId: undefined,
   workspaceId: undefined,
   createdAt: '',
@@ -164,9 +168,11 @@ const handleCopyData = () => {
   formData.issueType = props.initialData?.issueType;
   formData.description = props.initialData?.description;
   formData.pictures = props.initialData?.pictures;
+  formData.videos = props.initialData?.videos;
   formData.workshopId = props.initialData?.workshopId;
   formData.workspaceId = props.initialData?.workspaceId;
   formData.createdAt = props.initialData?.createdAt;
+
   switch (props.initialData?.issueState) {
     case IssueState.toAuth0:
       formData.issueState = 2;
@@ -229,12 +235,14 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
 };
 
 // 视频上传
-const videoUrl = ref<string[]>([]);
 const videoDialogVisible = ref(false);
 const handleUploadVideo = (res) => {
-  videoUrl.value.push(res.data.url);
-  console.log(videoUrl.value);
+  if (!formData.videos) formData.videos = [];
+  formData.videos.push(res.data.url);
 };
+const handleDeleteVideo = () => {
+  formData.videos = [];
+}
 const beforeUploadVideo: UploadProps['beforeUpload'] = (rawFile) => {
   if (rawFile.type !== 'video/mp4') {
     ElMessage.error('上传视频仅支持mp4格式');
@@ -244,7 +252,7 @@ const beforeUploadVideo: UploadProps['beforeUpload'] = (rawFile) => {
     return false
   }
   return true
-}
+};
 
 onMounted(() => {
   handleCopyData();
@@ -319,10 +327,29 @@ p {
   position: relative;
 
   .clear-video {
+    width: 25px;
+    height: 25px;
     position: absolute;
     top: 0;
-    right: 0;
+    left: 129px;
     cursor: pointer;
+    background-color: #000;
+    border-radius: 0 0 0 25px;
+    opacity: 0.7;
+  }
+
+  :deep(.el-dialog) {
+    width: 960px;
+    height: 540px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #000;
+  }
+
+  :deep(.el-dialog__header) {
+    display: none;
   }
 }
 </style>

src/views/datamanager/alertformdata/components/default/Default.vue

@@ -8,9 +8,9 @@
       <div v-if="showActionBar" class="action-bar">
         <span class="num-text">已选{{ chooseNum }}项</span>
         <el-button v-if="!cancelHideFlag" :class="isActiveHide ? 'btn-active' : 'btn-normal'"
-          @click="handleHideAll">全部隐藏</el-button>
+          @click="handleHideAll">全部失效</el-button>
         <el-button v-if="cancelHideFlag" :class="isActiveCancelHide ? 'btn-active' : 'btn-normal'"
-          @click="handleCancelHideAll">取消隐藏</el-button>
+          @click="handleCancelHideAll">全部生效</el-button>
         <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll">删除</el-button>
         <el-button v-if="!cancelUrgentFlag" :class="isActiveUrgent ? 'btn-active' : 'btn-normal'"
           @click="handleUrgentAll">标记加急</el-button>
@@ -28,8 +28,8 @@
       <Pagination v-model:page="query.pageNumber" v-model:size="query.pageSize" :total="total"
         @update:page="handlePageChange" @update:size="handleSizeChange" />
     </div>
-    <DetailDialog :show-drawer="isDetailDialogShow" :description="detailDescription" :image-paths="detailPictures"
-      @toggle-status="switchDetailDialog" />
+    <DetailDialog v-if="isDetailDialogShow" :description="detailDescription" :image-paths="detailPictures"
+      :video-paths="detailVideos" @close="closeDetailDialog" />
   </div>
 </template>
 
@@ -74,6 +74,7 @@ const isActiveCopy = ref(false);
 const isDetailDialogShow = ref(false);
 const detailDescription = ref('');
 const detailPictures = ref<string[]>([]);
+const detailVideos = ref<string[]>([]);
 // 分页
 const total = ref(0);
 
@@ -100,7 +101,7 @@ const handlePop = (selection) => {
   selection.forEach((item) => {
     if (chooseId.value.indexOf(item.id) === -1)
       chooseId.value.push(item.id);
-    // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏，不用变成“取消隐藏”
+    // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏/失效，不用变成“取消隐藏”/全部生效
     if (item.isHide === false) cancelHideFlag.value = false;
     // 只要有一个item.priority === 0 说明不是全都加急状态，不用变成“取消加急”
     if (item.priority === 0) cancelUrgentFlag.value = false;
@@ -127,7 +128,7 @@ const handleHideAll = () => {
     handleSelectNone();
     getTableData();
     ElMessage({
-      message: '隐藏成功',
+      message: '操作成功',
       type: 'success',
     });
     setTimeout(function () {
@@ -147,7 +148,7 @@ const handleCancelHideAll = () => {
     handleSelectNone();
     getTableData();
     ElMessage({
-      message: '取消隐藏成功',
+      message: '操作成功',
       type: 'success',
     });
     setTimeout(function () {
@@ -246,13 +247,14 @@ const handleCopyToShow = () => {
 };
 
 // 详情
-const switchDetailDialog = (show: boolean) => {
-  isDetailDialogShow.value = show;
+const closeDetailDialog = () => {
+  isDetailDialogShow.value = false;
 };
 const handleDetail = (row) => {
   isDetailDialogShow.value = true;
   detailDescription.value = row.description;
   detailPictures.value = row.pictures;
+  detailVideos.value = row.videos;
 };
 
 // 单个加急priority=1/取消加急priority=0

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

@@ -11,22 +11,22 @@
       <div v-if="showActionBar" class="action-bar">
         <span class="num-text">已选{{ chooseNum }}项</span>
         <el-button v-if="!cancelHideFlag" :class="isActiveHide ? 'btn-active' : 'btn-normal'"
-          @click="handleHideAll">全部隐藏</el-button>
+          @click="handleHideAll">全部失效</el-button>
         <el-button v-if="cancelHideFlag" :class="isActiveCancelHide ? 'btn-active' : 'btn-normal'"
-          @click="handleCancelHideAll">取消隐藏</el-button>
+          @click="handleCancelHideAll">全部生效</el-button>
         <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleDeleteAll">删除</el-button>
         <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-delete="handleDelete" @update:selection="handlePop" />
+        :on-detail="handleDetail" :on-edit="handleEdit" :on-show="handleShow" :on-delete="handleDelete"
+        @update:selection="handlePop" />
     </div>
     <div class="pagination-box">
       <Pagination v-model:page="query.pageNumber" v-model:size="query.pageSize" :total="total"
         @update:page="handlePageChange" @update:size="handleSizeChange" />
     </div>
-    <DetailDialog :show-drawer="isDetailDialogShow" :description="detailDescription" :image-paths="detailPictures"
-      @toggle-status="switchDetailDialog" />
-
+    <DetailDialog v-if="isDetailDialogShow" :description="detailDescription" :image-paths="detailPictures"
+      :video-paths="detailVideos" @close="closeDetailDialog" />
     <AddDrawer v-if="isAddDrawer" @close="handleAddDrawerClose" />
     <EditDrawer v-if="isEditDrawer" :initial-data="rowData" @close="handleEditDrawerClose" />
   </div>
@@ -66,6 +66,7 @@ const isActiveDelete = ref(false);
 const isDetailDialogShow = ref(false);
 const detailDescription = ref('');
 const detailPictures = ref<string[]>([]);
+const detailVideos = ref<string[]>([]);
 // 添加
 const isAddDrawer = ref(false);
 const isEditDrawer = ref(false);
@@ -95,7 +96,7 @@ const handlePop = (selection) => {
   selection.forEach((item) => {
     if (chooseId.value.indexOf(item.id) === -1)
       chooseId.value.push(item.id);
-    // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏，不用变成“取消隐藏”
+    // 只要有一个item.isHide === false 说明多选的这些选项不是全都隐藏/失效，不用变成“取消隐藏”/全部生效
     if (item.isHide === false) cancelHideFlag.value = false;
   });
   chooseNum.value = selection.length;
@@ -120,7 +121,7 @@ const handleHideAll = () => {
     handleSelectNone();
     getTableData();
     ElMessage({
-      message: '隐藏成功',
+      message: '操作成功',
       type: 'success',
     });
     setTimeout(function () {
@@ -140,7 +141,7 @@ const handleCancelHideAll = () => {
     handleSelectNone();
     getTableData();
     ElMessage({
-      message: '隐藏成功',
+      message: '操作成功',
       type: 'success',
     });
     setTimeout(function () {
@@ -184,13 +185,15 @@ const handleDeleteAll = () => {
 };
 
 // 详情
-const switchDetailDialog = (show: boolean) => {
-  isDetailDialogShow.value = show;
+const closeDetailDialog = () => {
+  isDetailDialogShow.value = false;
 };
 const handleDetail = (row) => {
   isDetailDialogShow.value = true;
   detailDescription.value = row.description;
   detailPictures.value = row.pictures;
+  detailVideos.value = row.videos;
+  console.log(detailVideos.value);
 };
 
 // 添加
@@ -214,16 +217,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) => {