添加图片打印功能

src/components/previewImg/index.js

@@ -4,13 +4,14 @@ import previewImg from './index.vue'
 
 const previewImgConstructor = Vue.extend(previewImg)
 
-const Content = ({list,baseUrl,baseImgField,baseTitleField})=>{
+const Content = ({list,baseUrl,baseImgField,baseTitleField,showPrint})=>{
     const instance = new previewImgConstructor({
         data:{
             list:list||[],
             baseUrl:baseUrl||'',
             baseImgField:baseImgField||'',
-            baseTitleField:baseTitleField||''
+            baseTitleField:baseTitleField||'',
+            showPrint:showPrint||''
         }
     })
     instance.vm = instance.$mount()

src/components/previewImg/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="['preview-content', !out ? 'prevent-out' : '']">
     <div class="header">
+      <span v-if="showPrint" @click="handlePrint" class="print_btn">打印</span>
       <span>{{ list[currentIndex][baseTitleField] || '' }}</span>
       <span @click="close()" class="close">关闭</span>
     </div>
@@ -13,6 +14,7 @@
       />
       <div class="show-img" ref="imgel">
         <img
+          ref="imgContent"
           v-if="maxWidth && maxHeight"
           :style="
             'max-width:' + maxWidth + 'px;' + 'max-height:' + maxHeight + 'px'
@@ -60,6 +62,9 @@ export default {
     })
   },
   methods: {
+    handlePrint(){
+     this.$print(this.$refs.imgContent);
+    },
     close() {
       this.out = false
       setTimeout(() => {
@@ -176,4 +181,10 @@ export default {
     opacity: 0.1;
   }
 }
+.print_btn{
+  cursor: pointer;
+}
+ .print_btn:hover{
+    color: rgb(150, 150, 222);
+  }
 </style>

src/views/BidSystem/DeepeningOrder/newDetail.vue

@@ -2,6 +2,22 @@
     <div>
         <Toptitle :title="types==0?'详情':'编辑'">
             <Button @click="$router.go(-1)">返回</Button>
+              <Upload
+        :disabled='selectData.length==0'
+          style="display: inline"
+          name="your_file"
+          :show-upload-list="false"
+          accept='image'
+          :headers="headers"
+          :data='{order_no:$route.query.order_no,url_number:selectUrl}'
+          :on-error="uploadError"
+          :on-success="uploadSuccess"
+          :action="$store.state.ip + '/api/deep_img_imports'"
+        >
+          <Button type="primary" style="margin-left: 10px" @click="()=>(selectData.length==0&&$Message.warning('请选择数据！'))"
+            >导入图纸</Button
+          >
+        </Upload>
         </Toptitle>
         <Form :label-width='120' class="form_content">
             <FormItem label='下单编号：' class="form_item">
@@ -65,6 +81,9 @@
                 <template slot="set" slot-scope="{row}">
                     <a @click="handleDel(row)">删除</a>
                 </template>
+                <template slot="img_url" slot-scope="{row}">
+                    <img @click="looks(row.img_url)" :src="$store.state.ip + row.img_url" alt="" class="img_content"/>
+                </template>
             </Table>
             <div class="footerPage">
         <Page
@@ -86,6 +105,8 @@
 export default {
     data(){
         return{
+            selectUrl:[],
+            headers: { Authorization: localStorage.getItem("token") },
             selectData:[],
             change_type:false,
             types:'',
@@ -121,7 +142,7 @@ export default {
             // {title:'规格',align:'center',key:'measure',minWidth:120},
             {title:'饰面',align:'center',key:'process_property',minWidth:120},
             {title:'数量',align:'center',key:'num',minWidth:120},
-            {title:'图纸',align:'center',key:'img_url',minWidth:120},
+            {title:'图纸',align:'center',key:'img_url',minWidth:120,slot:'img_url'},
           ],
           tableColumns:[],
           totalTableColumns:[],
@@ -138,7 +159,7 @@ export default {
                 return h('span',{},row.fashion==1?'左':row.fashion==2?'右':'')
             }},
             {title:'图号',align:'center',key:'url_number',minWidth:120},
-            {title:'图纸',align:'center',key:'img_url',minWidth:120},
+            {title:'图纸',align:'center',key:'img_url',minWidth:120,slot:'img_url'},
             {title:'饰面',align:'center',key:'process_property',minWidth:120},
             {title:'规格',align:'center',key:'measure',minWidth:120},
             {title:'数量',align:'center',key:'num',minWidth:120},
@@ -155,9 +176,34 @@ export default {
         this.initData();
     },
     methods:{
+        looks(img) {
+      const array = [{ img_url: img }];
+      this.$previewImg({
+        list: array,
+        baseUrl: this.$store.state.ip,
+        baseImgField: "img_url",
+        baseTitleField: "",
+        showPrint:true
+      });
+    },
+          uploadError(err) {
+      this.$Message.error(err.msg || "上传失败");
+    },
+    //导入成功
+    uploadSuccess(res) {
+      if (res.code == 200) {
+        this.$Message.success(res.msg || "上传成功");
+      } else {
+        this.$Message.warning(res.msg || "上传失败");
+      }
+    },
         handleSelect(e){
             console.log(e);
             this.selectData = e;
+            this.selectUrl = [];
+            e.forEach(v=>{
+                this.selectUrl.push(v.url_number)
+            })
         },
         handleTabsDel(){
           if(this.selectData.length==0){
@@ -229,10 +275,11 @@ export default {
                 //     const {row} = params;
                 //     return h('span',{},row.split_state==0?'未下拆单':'已下拆单')
                 //   }}] 
-                this.tableColumns = [...this.reTableColumns];
+                    this.tableColumns = [{type:'selection',align:'center',minWidth:80},...this.reTableColumns];
               }else{
-                this.tableColumns = this.reTableColumns;
+                    this.tableColumns = this.reTableColumns;
               }
+              
               this.total = res.data.total;
                 this.houseList=res.data.house;
             this.unitList=res.data.unit;
@@ -308,4 +355,8 @@ export default {
     margin-top: 10px;
     text-align: center;
 }
+.img_content{
+    width:18px;
+    height: 18px;
+}
 </style>

src/views/leadMatch/Ironware/edit.vue

@@ -13,10 +13,10 @@
           :action="$store.state.ip + '/api/cut_order_alloy_import'"
         >
           <Button type="primary" style="margin-right:10px;"
-            >导入</Button
-          >
+            >导入</Button>
+          </Upload>
           <Button type="primary" v-if="$route.query.type==3" @click="handleProduct(null,0)">下生产</Button>
-        </Upload>
+        
             <Button style="margin-right:10px;" @click="back">返回</Button>
             <Button @click="postData" v-show="$route.query.type!=3">保存</Button>
         </Toptitle>