修改生产履历。

src/views/pro/traceability/components/mediaCom.vue

@@ -9,21 +9,30 @@
       :option="option"
       v-model:page="page"
     >
-      <template #menu="{row,index,type}">
-        <el-button @click="openDialog(row)"
-                   icon="el-icon-link"
-                   text
-                   type="primary"
-        >查看</el-button>
+      <template #menu="{ row, index, type }">
+        <el-button
+          @click="openDialog(row)"
+          icon="el-icon-link"
+          text
+          type="primary"
+          >查看</el-button
+        >
       </template>
     </avue-crud>
     <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="60%"
-        @close="dialog.visible = false"
-    ><el-image :src="url" fit="none" />
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="60%"
+      @close="dialog.visible = false"
+      ><el-image :src="url" fit="none" />
     </el-dialog>
+    <el-image-viewer
+      v-if="showPreview"
+      :url-list="preSrcList"
+      show-progress
+      :initial-index="0"
+      @close="showPreview = false"
+    />
   </div>
 </template>
 <script setup>
@@ -39,8 +48,14 @@ const dialog = reactive({
   title: "图片预览",
   visible: false,
 });
-const url = ref(null)
+
+const url = ref(null);
 // 传入一个url，后面不带/
+
+// 图片查看器相关
+const showPreview = ref(false);
+const preSrcList = ref([]);
+
 const {
   form,
   data,
@@ -60,12 +75,17 @@ const { selectionChange, multipleDelete } = Methords; //选中和批量删除事
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-const openDialog = (row) =>{
-  dialog.visible = true
-  url.value =  import.meta.env.VITE_APP_UPLOAD_URL + row.filePath
-}
+const openDialog = (row) => {
+  // dialog.visible = true;
+  // url.value = import.meta.env.VITE_APP_UPLOAD_URL + row.filePath;
+  preSrcList.value = [import.meta.env.VITE_APP_UPLOAD_URL + row.filePath];
+  showPreview.value = true;
+};
 const refreshTra = (row) => {
-  commonConfig.value.params = { seqNo: row.seqNo,workOrderCode: row.workOrderCode };
+  commonConfig.value.params = {
+    seqNo: row.seqNo,
+    workOrderCode: row.workOrderCode,
+  };
   dataList();
 };
 defineExpose({ refreshTra });
@@ -83,7 +103,7 @@ option.value = Object.assign(option.value, {
   menu: true,
   editBtn: false,
   delBtn: false,
-  viewBtn:false,
+  viewBtn: false,
   header: false,
   column: [
     {

src/views/pro/traceability/index.vue

@@ -1,32 +1,36 @@
 <template>
-  <div class="mainContentBox common-layout">
-    <el-container>
-      <el-aside
-        width="600px"
-        style="min-height: 800px; max-height: calc(100vh - 200px)"
-      >
-        <avue-crud
-          ref="crudRef"
-          v-model:search="search"
-          v-model="form"
-          :data="data"
-          :option="option"
-          v-model:page="page"
-          @cell-click="handleCellClick"
-          @search-change="searchChange"
-          @size-change="dataList"
-          @search-reset="resetChange"
-          @current-change="dataList"
-          @selection-change="selectionChange"
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @search-change="searchChange"
+      @size-change="dataList"
+      @search-reset="resetChange"
+      @current-change="dataList"
+      @selection-change="selectionChange"
+    >
+      <template #seqNo="{ row }">
+        <el-tag :type="chooseTagType(row.level, 'css')">{{
+          chooseTagType(row.level, "text")
+        }}</el-tag>
+        {{ row.seqNo }}
+      </template>
+      <template #menu="{ row }">
+        <el-button
+          type="text"
+          @click="handleCellClick(row)"
+          v-if="row.level === 'seq'"
         >
-          <template #seqNo="{ row }">
-            <el-tag :type="chooseTagType(row.level, 'css')">{{
-              chooseTagType(row.level, "text")
-            }}</el-tag>
-            {{ row.seqNo }}
-          </template>
-        </avue-crud>
-      </el-aside>
+          查看详情
+        </el-button>
+      </template>
+    </avue-crud>
+
+    <el-drawer v-model="drawerVisible" title="" :with-header="false" size="80%">
       <el-container>
         <el-header style="height: 20%">
           <el-descriptions title="产品信息一览" border>
@@ -196,12 +200,12 @@
                   />
                 </span>
               </template>
-             <BrazeCom ref="brazeComRef"/>
-           </el-tab-pane>
+              <BrazeCom ref="brazeComRef" />
+            </el-tab-pane>
           </el-tabs>
         </el-main>
       </el-container>
-    </el-container>
+    </el-drawer>
   </div>
 </template>
 <script setup>
@@ -232,6 +236,8 @@ const { checkBtnPerm } = Utils; //按钮权限等工具
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
+const drawerVisible = ref(false); //抽屉是否显示
+
 const traceabilityComRef = ref(null);
 const materialsComRef = ref(null);
 const recordComRef = ref(null);
@@ -254,7 +260,7 @@ const tabNameComRef = new Map([
   ["mediaComRef", mediaComRef],
   ["excelComRef", excelComRef],
   ["collectionComRef", collectionComRef],
-  ["brazeComRef", brazeComRef]
+  ["brazeComRef", brazeComRef],
 ]);
 let temRow = ref({});
 const tabsEvent = (pane, ev) => {
@@ -298,10 +304,12 @@ let tabCount = reactive({
   fault: "",
   medias: "",
   excel: "",
-  brazeCount: ""
+  brazeCount: "",
 });
 
-const handleCellClick = (row, column, event) => {
+const handleCellClick = async (row, column, event) => {
+  drawerVisible.value = true;
+  await nextTick();
   productReviewInfo.orderCode = row.orderCode;
   if (row.level === "order") {
     productReviewInfo.bug = "-";
@@ -329,7 +337,7 @@ const handleCellClick = (row, column, event) => {
     if (productReviewInfo.seqNo != row.seqNo) {
       //物料履历
       //traceabilityComRef.value.refreshTra(row);
-      tabNameComRef.get(defaultTabName.value)?.value.refreshTra(temRow.value);
+      tabNameComRef.get(defaultTabName.value)?.value?.refreshTra(temRow.value);
     }
     //每次点击都要获取tab页面的数量
     traceabilityTabCount({
@@ -388,6 +396,12 @@ option.value = Object.assign(option.value, {
       search: false,
       width: "100",
     },
+    {
+      label: "操作",
+      prop: "menu",
+      search: false,
+      width: "100",
+    },
   ],
 });