页面调整

src/views/modules/common/e-desc.vue

@@ -1,119 +1,133 @@
 <template>
-  <div class="desc" :style="{margin}">
+  <div class="desc" :style="{ margin }">
     <!-- 标题 -->
     <h1 v-if="title" class="desc-title" v-html="title"></h1>
     <el-row class="desc-row" ref='elRow'>
-      <slot/>
+      <slot />
     </el-row>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'EDesc',
-    // 通过provide提供给子组件
-    provide () {
-      return {
-        labelWidth: this.labelWidth,
-        column: this.column,
-        size: this.size
-      }
-    },
-    props: {
-      // 标题
-      title: {
-        type: String,
-        default: ''
-      },
-      // 边距
-      margin: {
-        type: String,
-        default: '0'
-      },
-      // label宽度
-      labelWidth: {
-        type: String,
-        default: '120px'
-      },
-      column: {
-        // 每行显示的项目个数
-        type: [Number, String],
-        default: 3
-      },
-      size: {
-        // 大小
-        type: String,
-        default: ''
-      }
+export default {
+  name: 'EDesc',
+  // 通过provide提供给子组件
+  provide() {
+    return {
+      labelWidth: this.labelWidth,
+      column: this.column,
+      size: this.size
+    }
+  },
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
     },
-    data () {
-      return {
-        // 监听插槽变化
-        observe: new MutationObserver(this.computedSpan)
-      }
+    // 边距
+    margin: {
+      type: String,
+      default: '0'
     },
-    mounted () {
-      this.$nextTick(() => {
-        this.computedSpan()
-        this.observe.observe(this.$refs.elRow.$el, { childList: true })
-      })
+    // label宽度
+    labelWidth: {
+      type: String,
+      default: '120px'
     },
-    methods: {
-      computedSpan () {
-        // 筛选出子组件e-desc-item
-        const dataSource = this.$slots.default
-        const dataList = []
-        dataSource.forEach(item => {
-          if (item.componentOptions && item.componentOptions.tag === 'e-desc-item') {
-            dataList.push(item.componentInstance)
-          }
-        })
-        // 剩余span
-        let leftSpan = this.column
-        const len = dataList.length
-        dataList.forEach((item, index) => {
-          // 处理column与span之间的关系
-          // 剩余的列数小于设置的span数
-          const hasLeft = leftSpan <= (item.span || 1)
-          // 当前列的下一列大于了剩余span
-          const nextColumnSpan = (index < (len - 1)) && (dataList[index + 1].span >= leftSpan)
-          // 是最后一行的最后一列
-          const isLast = index === (len - 1)
-          if (hasLeft || nextColumnSpan || isLast) {
-            // 满足以上条件，需要自动补全span，避免最后一列出现残缺的情况
-            item.selfSpan = leftSpan
-            leftSpan = this.column
-          } else {
-            leftSpan -= item.span || 1
-          }
-        })
-      }
+    column: {
+      // 每行显示的项目个数
+      type: [Number, String],
+      default: 3
     },
-    beforeDestroy () {
-      if (this.observe) {
-        this.observe.disconnect()
+    size: {
+      // 大小
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // 监听插槽变化
+      observe: new MutationObserver(this.computedSpan)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.computedSpan()
+      this.observe.observe(this.$refs.elRow.$el, { childList: true })
+    })
+  },
+  methods: {
+    computedSpan() {
+      // 筛选出子组件e-desc-item（防御：slots 可能为 undefined）
+      const slotNodes = (this.$slots && this.$slots.default) ? this.$slots.default : []
+      if (!Array.isArray(slotNodes) || slotNodes.length === 0) {
+        return
       }
+
+      const dataList = []
+      slotNodes.forEach(node => {
+        if (
+          node &&
+          node.componentOptions &&
+          node.componentOptions.tag === 'e-desc-item' &&
+          node.componentInstance
+        ) {
+          dataList.push(node.componentInstance)
+        }
+      })
+
+      // 若没有 e-desc-item，直接返回
+      if (dataList.length === 0) return
+
+      // 剩余span（确保为数字）
+      let leftSpan = Number(this.column) || 1
+      const len = dataList.length
+      dataList.forEach((item, index) => {
+        // 处理column与span之间的关系
+        // 剩余的列数小于设置的span数
+        const hasLeft = leftSpan <= (item.span || 1)
+        // 当前列的下一列大于了剩余span
+        const nextColumnSpan = (index < (len - 1)) && (dataList[index + 1].span >= leftSpan)
+        // 是最后一行的最后一列
+        const isLast = index === (len - 1)
+        if (hasLeft || nextColumnSpan || isLast) {
+          // 满足以上条件，需要自动补全span，避免最后一列出现残缺的情况
+          item.selfSpan = leftSpan
+          leftSpan = Number(this.column) || 1
+        } else {
+          leftSpan -= item.span || 1
+        }
+      })
+    }
+  },
+  beforeDestroy() {
+    if (this.observe) {
+      this.observe.disconnect()
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .desc{
-    .desc-title {
-      margin-bottom: 10px;
-      color: #333;
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 1.5715;
-    }
-    .desc-row{
-      display: flex;
-      flex-wrap: wrap;
-      border-radius: 2px;
-      border: 1px solid #EBEEF5;
-      border-bottom: 0;
-      border-right: 0;
-      width: 100%;
-    }
+.desc {
+  .desc-title {
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1.5715;
+  }
+
+  .desc-row {
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 2px;
+    border: 1px solid #EBEEF5;
+    border-bottom: 0;
+    border-right: 0;
+    width: 100%;
   }
+}
 </style>

src/views/modules/common/mixins/image-viewer-mixin.js

@@ -0,0 +1,34 @@
+import { downloadUrl } from '@/api/file'
+import { getFileExt } from '@/api/util'
+
+export default {
+  methods: {
+    // 判断是否为图片附件
+    isImage(attach) {
+      if (!attach || !attach.fileName) return false
+      const ext = getFileExt(attach.fileName)
+      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
+    },
+    // 获取缩略图地址（或原图地址）
+    getThumbUrl(firstAttach) {
+      if (!firstAttach) return ''
+      const url = firstAttach.url || ''
+      const isAbs = /^(https?:)?\/\//i.test(url)
+      return isAbs ? url : (downloadUrl + url)
+    },
+    // 打开预览（多图左右切换）
+    openImagePreview(attachList = [], startIndex = 0) {
+      if (!attachList || !attachList.length) return
+      const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
+      const imgs = attachList
+        .filter(a => a && a.fileName && imageExts.includes(getFileExt(a.fileName)))
+        .map(a => a.url)
+        .filter(Boolean)
+      if (!imgs.length) {
+        this.$message && this.$message.warning('没有可预览的图片文件')
+        return
+      }
+      this.$refs.imagePreview && this.$refs.imagePreview.open(imgs, startIndex)
+    }
+  }
+}

src/views/modules/production/plan-submit.vue

@@ -39,6 +39,12 @@
         <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="版本号">
         </el-table-column>
+        <el-table-column header-align="center" align="center" label="图纸">
+          <template slot-scope="scope">
+            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
+              @click="drawDetails(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
         <el-table-column header-align="center" align="center" min-width="100" :show-tooltip-when-overflow="true"
           label="简图">
           <template slot-scope="scope">
@@ -125,16 +131,18 @@
     <attach-detail-dialog ref="attachDetail" />
     <!-- 图片预览组件（使用 v-viewer 打开大图） -->
     <preview-component v-if="previewVisible" ref="preview" />
+    <project-draw-preview ref="drawPreview" />
   </div>
 </template>
 
 <script>
 import AttachDetailDialog from '../common/attach-detail-dialog'
 import PreviewComponent from '../common/preview-component'
+import ProjectDrawPreview from '../tech/product-draw-detail-dialog.vue'
 import { downloadUrl } from '@/api/file'
 export default {
   name: 'plan-submit',
-  components: { AttachDetailDialog, PreviewComponent },
+  components: { AttachDetailDialog, PreviewComponent, ProjectDrawPreview },
   computed: {},
   data() {
     return {
@@ -182,7 +190,7 @@ export default {
             }
           })
 
-          console.log(this.dataForm)
+          // console.log(this.dataForm)
         } else {
           this.$message.error(data.msg)
         }
@@ -196,6 +204,9 @@ export default {
         this.$refs.attachDetail.init(attachList)
       })
     },
+    drawDetails(row) {
+      this.$refs.drawPreview && this.$refs.drawPreview.init(row.proDrawings || [])
+    },
     // 过滤图片附件
     getImageList(attachList) {
       if (!attachList || !Array.isArray(attachList)) return []
@@ -228,7 +239,7 @@ export default {
             return
           }
 
-          console.log('data', data)
+          // console.log('data', data)
 
           this.$http({
             url: this.$http.adornUrl(`/biz-service/projProduction/submitPlan`),
@@ -253,7 +264,7 @@ export default {
       })
     },
     handleExpandChange(row, expanded) {
-      console.log(row, expanded)
+      // console.log(row, expanded)
       if (expanded) {
         this.expandedRowKeys.push(row.productId)
       } else {
@@ -264,7 +275,7 @@ export default {
       }
     },
     loadingData(row, treeNode, resolve) {
-      console.log('loadingData')
+      // console.log('loadingData')
       if (!this.treeMap.has(row.productId)) {
         this.treeMap.set(row.productId, { row, treeNode, resolve })
       }

src/views/modules/tech/draw-management.vue

@@ -48,6 +48,12 @@
                   style="width:48px;height:48px;object-fit:cover;border-radius:4px;cursor:pointer;border:1px solid #e5e6eb;"
                   @click="openImagePreview(scope.row.attachList)" />
               </template>
+              <template v-else>
+                <div title="非图片文件，点击查看图片预览" @click.stop="openImagePreview(scope.row.attachList)"
+                  style="width:48px;height:48px;border-radius:4px;border:1px solid #e5e6eb;display:flex;align-items:center;justify-content:center;background:#f5f7fa;color:#909399;cursor:pointer;">
+                  <i class="el-icon-picture-outline" style="font-size:20px;"></i>
+                </div>
+              </template>
             </div>
             <span v-else style="color:#c0c4cc;">无</span>
           </template>
@@ -102,10 +108,10 @@ import { getDrawList } from '@/api/product'
 import ProductComponent from '@/views/modules/common/product-component'
 import PreviewComponent from '@/views/modules/common/preview-component.vue'
 import ImagePreview from '@/views/modules/common/image-preview.vue'
-import { downloadUrl } from '@/api/file'
-import { getFileExt } from '@/api/util'
+import ImageViewerMixin from '@/views/modules/common/mixins/image-viewer-mixin'
 export default {
   name: 'draw-management',
+  mixins: [ImageViewerMixin],
   components: {
     ProductComponent,
     AddOrUpdate,
@@ -224,33 +230,7 @@ export default {
         this.$refs.preview.init(fileName, url)
       })
     },
-    // 缩略图地址（使用第一张）
-    getThumbUrl(firstAttach) {
-      if (!firstAttach) return ''
-      const url = firstAttach.url || ''
-      const isAbs = /^(https?:)?\/\//i.test(url)
-      return isAbs ? url : (downloadUrl + url)
-    },
-    // 新的图片预览：可左右切换
-    openImagePreview(attachList = []) {
-      if (!attachList || !attachList.length) return
-      const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
-      const imgs = attachList
-        .filter(a => a && a.fileName && imageExts.includes(getFileExt(a.fileName)))
-        .map(a => a.url)
-        .filter(Boolean)
-      if (!imgs.length) {
-        this.$message && this.$message.warning('没有可预览的图片文件')
-        return
-      }
-      this.$refs.imagePreview && this.$refs.imagePreview.open(imgs, 0)
-    },
-    // 判断是否为图片
-    isImage(attach) {
-      if (!attach || !attach.fileName) return false
-      const ext = getFileExt(attach.fileName)
-      return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
-    },
+
     // 详情
     detailHandle(id) {
       this.detailVisible = true

src/views/modules/tech/product-detail.vue

@@ -43,7 +43,13 @@
         <e-desc-item label="备注" span="3">{{ dataForm.notes }}</e-desc-item>
       </e-desc>
       <e-desc title="简图">
-        <upload-component :display="true" :display-title="false" :accept="'*'" :value="dataForm.attachList2" />
+        <template slot-scope="scope">
+          <div v-for="(item, index) in dataForm.attachList2" style="display: inline">
+            <span v-if="index > 0">,</span>
+            <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{
+              item.fileName }}</a>
+          </div>
+        </template>
       </e-desc>
       <e-desc title="技术资料附件">
         <upload-component :display="true" :display-title="false" :accept="'*'" :value="dataForm.attachList" />
@@ -54,8 +60,8 @@
           </el-table-column>
           <el-table-column prop="drawingName" header-align="center" align="center" label="图纸名称">
             <template slot-scope="scope">
-              <a style="cursor:pointer"
-                @click="previewFile(scope.row.drawingName, scope.row.attachList[0].url)">{{ scope.row.drawingName }}</a>
+              <a style="cursor:pointer" @click="previewFile(scope.row.drawingName, scope.row.attachList[0].url)">{{
+                scope.row.drawingName }}</a>
             </template>
           </el-table-column>
           <el-table-column prop="drawingNo" header-align="center" align="center" label="图号">

src/views/modules/tech/product-draw-detail-dialog.vue

@@ -1,19 +1,15 @@
 <template>
   <div>
-    <el-dialog
-      title="图纸详情"
-      width="70%"
-      :close-on-click-modal="false"
-      :visible.sync="visible"
-    >
-<!--      <div class="my-title">图纸详情</div>-->
+    <el-dialog title="图纸详情" width="70%" :close-on-click-modal="false" :visible.sync="visible">
+      <!--      <div class="my-title">图纸详情</div>-->
       <div>
         <template v-for="(item, index) in dataList">
           <e-desc :title="item.drawingName" column="3" style="margin-bottom: 20px">
             <e-desc-item label="附件" span="2">
               <div v-for="(item, index) in item.attachList" style="display: inline">
                 <span v-if="index > 0">,</span>
-                <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
+                <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{
+                  item.fileName }}</a>
               </div>
             </e-desc-item>
           </e-desc>
@@ -25,51 +21,49 @@
       </span>
     </el-dialog>
     <!-- 文件预览 -->
-    <preview-component v-if="previewVisible" ref="preview"/>
+    <preview-component v-if="previewVisible" ref="preview" />
   </div>
 </template>
 
 <script>
-  import EDesc from '../common/e-desc'
-  import EDescItem from '../common/e-desc-item'
-  import { downloadUrl } from '@/api/file'
-  import UploadComponent from '../common/upload-component'
-  import PreviewComponent from '../common/preview-component'
-  export default {
-    name: 'product-draw-detail-dialog',
-    components: {
-      PreviewComponent,
-      UploadComponent,
-      EDesc,
-      EDescItem
+import EDesc from '../common/e-desc'
+import EDescItem from '../common/e-desc-item'
+import { downloadUrl } from '@/api/file'
+import UploadComponent from '../common/upload-component'
+import PreviewComponent from '../common/preview-component'
+export default {
+  name: 'product-draw-detail-dialog',
+  components: {
+    PreviewComponent,
+    UploadComponent,
+    EDesc,
+    EDescItem
+  },
+  data() {
+    return {
+      visible: false,
+      previewVisible: false,
+      dataList: [],
+      downloadUrl: downloadUrl
+    }
+  },
+  methods: {
+    onChose() {
+      this.visible = false
     },
-    data () {
-      return {
-        visible: false,
-        previewVisible: false,
-        dataList: [],
-        downloadUrl: downloadUrl
-      }
+    async init(drawList) {
+      this.visible = true
+      this.dataList = drawList
     },
-    methods: {
-      onChose () {
-        this.visible = false
-      },
-      async init (drawList) {
-        this.visible = true
-        this.dataList = drawList
-      },
-      // 预览
-      previewFile (fileName, url) {
-        this.previewVisible = true
-        this.$nextTick(() => {
-          this.$refs.preview.init(fileName, url)
-        })
-      }
+    // 预览
+    previewFile(fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview.init(fileName, url)
+      })
     }
   }
+}
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/modules/tech/product-management.vue

@@ -49,6 +49,12 @@
         <el-table-column prop="mapNumber" header-align="center" align="center" width="120"
           :show-tooltip-when-overflow="true" label="图号">
         </el-table-column>
+        <el-table-column header-align="center" align="center" label="对应图纸">
+          <template slot-scope="scope">
+            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
+              @click="drawDetails(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
         <el-table-column prop="simplePic" header-align="center" align="center" min-width="120" label="简图">
           <template slot-scope="scope">
             <el-popover placement="right" title="" trigger="hover">
@@ -118,12 +124,6 @@
               @click="attachDetails2(scope.row)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column header-align="center" align="center" label="对应图纸">
-          <template slot-scope="scope">
-            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
-              @click="drawDetails(scope.row)">查看</el-button>
-          </template>
-        </el-table-column>
         <el-table-column header-align="center" align="center" label="对应工艺">
           <template slot-scope="scope">
             <el-button :disabled="!scope.row.techId" type="text" size="small"

src/views/modules/tech/project-product-detail.vue

@@ -52,6 +52,12 @@
         <el-table-column prop="versionNumber" header-align="center" align="center" min-width="140"
           :show-tooltip-when-overflow="true" label="版本号">
         </el-table-column>
+        <el-table-column header-align="center" align="center" label="图纸">
+          <template slot-scope="scope">
+            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
+              @click="drawDetails(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
         <el-table-column prop="attachList2" header-align="center" align="center" min-width="100"
           :show-tooltip-when-overflow="true" label="简图">
           <template slot-scope="scope">
@@ -108,6 +114,7 @@
 
     <attach-detail-dialog ref="attachDetail" />
     <preview-component v-if="previewVisible" ref="preview" />
+    <project-draw-preview ref="drawPreview" />
   </div>
 </template>
 
@@ -115,10 +122,11 @@
 import UserComponent from '../common/user-component'
 import AttachDetailDialog from '../common/attach-detail-dialog'
 import PreviewComponent from '../common/preview-component'
+import ProjectDrawPreview from './product-draw-detail-dialog.vue'
 import { downloadUrl } from '@/api/file'
 export default {
   name: 'project-product-detail',
-  components: { UserComponent, AttachDetailDialog, PreviewComponent },
+  components: { UserComponent, AttachDetailDialog, PreviewComponent, ProjectDrawPreview },
   computed: {},
   data() {
     return {
@@ -218,7 +226,9 @@ export default {
     selectChange(val) {
       this.dataForm.responsibilityPerson = val
     },
-
+    drawDetails(row) {
+      this.$refs.drawPreview && this.$refs.drawPreview.init(row.proDrawings || [])
+    }
   }
 }
 </script>