初版确定

package.json

 {
-  "name": "vue-exectron-express-lowdb",
+  "name": "Jomall_Graphics_Lab",
   "productName": "Jomall Graphics Lab",
   "description": "",
   "version": "0.1.0",
@@ -11,18 +11,23 @@
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "nodemon --watch src/backend --exec vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstall": "electron-builder install-app-deps",
+    "electron:generate-icons": "electron-icon-builder --input=./src/assets/logo.jpg --output=build --flatten"
   },
   "main": "background.js",
   "dependencies": {
     "@gausszhou/vue-drag-resize-rotate": "^2.0.15",
+    "@minogin/vue-drag-resize-rotate": "^1.0.5",
+    "@pinkcao/vue-drag-resize-rotate": "^1.2.5",
     "@vue/composition-api": "^0.3.4",
     "axios": "^0.19.2",
     "compressing": "^1.10.1",
     "core-js": "^3.6.4",
+    "electron-icon-builder": "^2.0.1",
     "electron-store": "^4.0.0",
     "element-ui": "^2.13.0",
     "express": "^4.17.1",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",

src/background.js

@@ -20,7 +20,7 @@ function createWindow() {
     win = new BrowserWindow({
         width: 1500,
         height: 1000,
-        icon: "./src/assets/logo.png",
+        icon: "./src/assets/logo.jpg",
         webPreferences: {
             webSecurity: false,
             nodeIntegration: true,

src/router/index.js

@@ -19,6 +19,14 @@ const routes = [
             title: '设计页面'
         },
         component: (resolve) => require(['../views/design/index.vue'], resolve)
+    },
+    {
+        path: '/design-copy',
+        name: 'design',
+        meta: {
+            title: '设计页面'
+        },
+        component: (resolve) => require(['../views/design/copy.vue'], resolve)
     }, {
         path: '/design-detail',
         name: 'design',

src/utils/axios.js

@@ -66,7 +66,7 @@ service.interceptors.response.use(
                 }
                 if (res.code === 403) {
                     router.replace('/')
-                    Vue.prototype.$message.error(res.msg || res.message || 'Error')
+                    Vue.prototype.$message.error({showClose: true, message: res.msg || res.message || 'Error'})
                     Vue.prototype.$dataStore.delete('user')
                     return Promise.reject(new Error(res.msg || res.message || 'Error'))
                 }
@@ -75,7 +75,7 @@ service.interceptors.response.use(
                 if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
                     // TODO: to re-login
                 }
-                Vue.prototype.$message.error(res.msg || res.message || 'Error')
+                Vue.prototype.$message.error({showClose: true, message: res.msg || res.message || 'Error'})
                 // reject
                 return Promise.reject(new Error(res.msg || res.message || 'Error'))
             } else {

src/views/design/copy.vue

+<script>
+import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
+
+export default {
+  components: {VueDragResizeRotate},
+  data() {
+    return {
+      selectIndex:0,
+      imgList:[
+        {
+          x:0,
+          url:'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg',
+          y:0,
+          zIndex:1,
+          h:100,
+          w:100,
+          r:0
+        },
+        {
+          x:0,
+          url:'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
+          y:0,
+          zIndex:2,
+          h:100,
+          w:100,
+          r:0
+        }
+      ]
+    }
+  },
+  methods:{
+    resizing(x, y, w, h) {
+      this.$set(this.imgList[this.selectIndex], 'w', w)
+      this.$set(this.imgList[this.selectIndex], 'h', h)
+      this.$set(this.imgList[this.selectIndex], 'x', x)
+      this.$set(this.imgList[this.selectIndex], 'y', y)
+    },
+    onDragDebounce(data,item){
+      console.log(data,item)
+      this.imgList[this.selectIndex].x = left
+      this.imgList[this.selectIndex].y = top
+    },
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<template>
+  <div class="page">
+    <vue-drag-resize-rotate
+        :w="item.w"
+        class-name="my-drag-resize-rotate"
+        :prevent-deactivation="true"
+        :h="item.h"
+        :parent="true"
+        :x="item.x"
+        :z="item.zIndex"
+        :isActive="index===selectIndex"
+        :aspectRatio="true"
+        :active="index===selectIndex"
+        :y="item.y"
+        v-for="(item,index) in imgList"
+        :key="index"
+        :draggable="true"
+        :resizable="true"
+        :rotatable="true"
+        @dragstop="(a)=>onDragDebounce(a,item)"
+        @resizing="resizing"
+        :angle="item.r"
+    >
+      <div ref="sucaitu-img" @click="selectItem(index)"
+           :class="{'active': index === selectIndex}"
+           class="sucaitu-img img element">
+        <img :src="item.url" alt="" class="sucaitu-img">
+        <i  v-if="index===selectIndex" class=" close el-icon-close"></i>
+        <div v-if="index===selectIndex" class="control-point control-rotator"></div>
+      </div>
+    </vue-drag-resize-rotate>
+  </div>
+</template>
+
+<style scoped>
+.sucaitu-img{
+  width: 100%;
+  height: 100%;
+}
+.sucaitu-img img{
+  width: 100%;
+  height: 100%;
+}
+.page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file

src/views/design/head/index.vue

@@ -105,7 +105,18 @@ export default {
 
   },
   created() {
-    this.setting = JSON.parse(JSON.stringify(this.$store.getters.systemSetting))
+    if(this.$dataStore.get('setting')){
+      this.setting = this.$dataStore.get('setting')
+    }
+
+  },
+  watch: {
+    setting: {
+      handler() {
+        this.$dataStore.set('setting', this.setting)
+      },
+      deep: true
+    }
   },
   methods: {
     dropdownCommand(v) {
@@ -173,31 +184,44 @@ export default {
         await this.setData(this.detail)
       }
       if (this.productionNo === '') return this.$message.warning('请录入生产单号')
-      const findByPodProductionNo = await this.$api.post('/findByPodProductionNo', {
-        podProductionNo: this.productionNo,
-        status: 'IN_PRODUCTION'
-      })
-      this.detail = findByPodProductionNo.data
-      ipcRenderer.send('win-subScreen', findByPodProductionNo.data)
-
-      let res = await this.$api.post('/getPodProductionInfo', {productionNo: this.productionNo})
-      if (res.data.length === 0) return this.$message.warning('未找到素材图！')
-      for (let i = 0; i < res.data.length; i++) {
-        this.$api.post('/getPngImg', {fileName: res.data[i].fileName}, {
-          headers: {
-            'responseType': 'blob'
-          }
-        }).then(r => {
-
-          res.data[i].file = new File([r], res.data[i].fileName, {type: 'image/png'})
-          if (i === res.data.length - 1) {
-            this.imgList = res.data
-            bus.$emit('busEmit', {type: 'sendFile', value: res.data})
-          }
+      try {
+        const findByPodProductionNo = await this.$api.post('/findByPodProductionNo', {
+          podProductionNo: this.productionNo,
+          status: 'IN_PRODUCTION'
         })
+        this.detail = findByPodProductionNo.data
+        ipcRenderer.send('win-subScreen', findByPodProductionNo.data)
+
+      } catch (err) {
+        this.productionNo = ''
+        this.$refs.searchRef.focus()
       }
-      this.productionNo = ''
-      this.$refs.searchRef.focus()
+      try {
+        let res = await this.$api.post('/getPodProductionInfo', {productionNo: this.productionNo})
+        if (res.data.length === 0) return this.$message.warning('未找到素材图！')
+        for (let i = 0; i < res.data.length; i++) {
+          this.$api.post('/getPngImg', {fileName: res.data[i].fileName}, {
+            headers: {
+              'responseType': 'blob'
+            }
+          }).then(r => {
+
+            res.data[i].file = new File([r], res.data[i].fileName, {type: 'image/png'})
+            if (i === res.data.length - 1) {
+              this.imgList = res.data
+              bus.$emit('busEmit', {type: 'sendFile', value: res.data})
+            }
+          })
+        }
+        this.productionNo = ''
+        this.$refs.searchRef.focus()
+      } catch (err) {
+        bus.$emit('busEmit', {type: 'sendFile', value: []})
+        this.productionNo = ''
+        this.$refs.searchRef.focus()
+      }
+
+
     },
     changeActionIndex(t) {
       let index = this.actionIndex
@@ -225,7 +249,6 @@ export default {
       bus.$emit('busEmit', {type: 'bg', value: this.selectBgColor})
     },
     async uploadImage(f) {
-      console.log(f, 6666)
       let formData = new FormData()
       formData.append('file', f)
       let {data} = await this.$api.post('/uploadImage', formData, {
@@ -282,7 +305,7 @@ export default {
         <!--          </el-button>-->
         <!--        </el-tooltip>-->
         <el-tooltip content="图片">
-          <el-upload accept=".png" action="" :show-file-list="false" :before-upload="uploadImage">
+          <el-upload accept=".png" action="" :show-file-list="false" multiple :before-upload="uploadImage">
             <el-button style="height: 100%;margin:0 8px" size="small">
               <i class="el-icon-picture" style="font-size: 15px;"></i>
             </el-button>

src/views/design/head/printDialog.vue

@@ -2,6 +2,7 @@
 import fieldDescription from "./fieldDescription";
 import {ipcRenderer} from "electron"
 import axios from 'axios'
+import html2canvas from 'html2canvas'
 
 export default {
   data() {
@@ -71,6 +72,10 @@ export default {
     byPlatenSize: {
       default: 0,
       type: Number
+    },
+    imgList: {
+      default: [],
+      type: Array
     }
   },
   mounted() {
@@ -103,9 +108,6 @@ export default {
       } else {
         return '1.5'
       }
-    },
-    imgList() {
-      return this.$store.state.imgList
     }
   },
   watch: {
@@ -197,11 +199,83 @@ export default {
       console.log(str)
       return str
     },
+
+    dataURLtoBlob(dataurl) {
+      var arr = dataurl.split(',')
+      //注意base64的最后面中括号和引号是不转译的
+      var _arr = arr[1].substring(0, arr[1].length - 2)
+      var mime = arr[0].match(/:(.*?);/)[1],
+          bstr = atob(_arr),
+          n = bstr.length,
+          u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new Blob([u8arr], {
+        type: mime
+      })
+    },
+
+    moreImageCmd(arr) {
+
+      var canvas1 = document.createElement("canvas");
+      let _canvas = document.getElementsByClassName('sucaitu')[0];//目标块
+      var bodyW = parseInt(window.getComputedStyle(_canvas).width)
+      var bodyH = parseInt(window.getComputedStyle(_canvas).height)
+      canvas1.width = bodyW;
+      canvas1.height = bodyH;
+      canvas1.style.width = bodyW + "px";
+      canvas1.style.height = bodyH + "px";
+      canvas1.style.background = 'transparent';
+      document.documentElement.scrollTop = 0;
+      document.body.scrollTop = 0;
+      var context = canvas1.getContext("2d");
+      // context.scale(2, 2);
+      let that = this
+      html2canvas(_canvas, {
+        canvas: canvas1,
+        backgroundColor: null,
+        useCORS: true,
+        allowTaint: true
+      }).then(async function (canvas) {
+
+        let dataURL = canvas.toDataURL('image/png')
+        let pageBlob = that.dataURLtoBlob(dataURL)
+        let params = new FormData()
+        let fileOfBlob = new File([pageBlob], new Date().getTime() + '.jpg')
+        params.append('file', fileOfBlob)
+
+        let {data} = await that.$api.post('/uploadImage', params, {
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+          }
+        })
+        let w_mm = Number((canvas1.width * 0.84183).toFixed(1))
+        let h_mm = Number((canvas1.height * 0.84183).toFixed(1))
+        let size = `${that.singleStr(Number(w_mm).toFixed(1))}${that.singleStr(Number(h_mm).toFixed(1))}`
+        await that.sendCmd(data.fileName, size, '00000000', 0)
+        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
+        // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
+      });
+    },
     async getPrintCmd() {
       if (this.imgList.length === 0) return this.$message.warning('素材不能为空')
       console.log(this.imgList[0])
-      let {x, y, r, w, h} = this.imgList[0]
+      if (this.imgList.length > 1) {
+        let dom = document.getElementsByClassName('drr')
+        for (let i = 0; i < dom.length; i++) {
+          dom[i].classList.remove("active")
+          dom[i].classList.add("inactive")
+        }
+        setTimeout(() => {
+          this.moreImageCmd(this.imgList)
+        }, 500)
 
+        return
+      }
+      let {x, y, r, w, h} = this.imgList[0]
+      y = (Number(y) - Number(h) / 2)
+      x = (Number(x) - Number(w) / 2)
       let x_mm = Number((x * 0.84183).toFixed(1))
       let w_mm = Number((w * 0.84183).toFixed(1))
       let h_mm = Number((h * 0.84183).toFixed(1))
@@ -223,6 +297,9 @@ export default {
 
       const bigNum = '0031131' // 图像放大倍数 -R
 
+      await this.sendCmd(imgFileName, size, position, r)
+    },
+    async sendCmd(imgFileName, size, position, r) {
       const whitePrint = [1, 2].includes(this.printSetting.byInk) ? 1 : 0 // 白色打印
       let cmd = `GTXproCMD.exe print -X "${`Profile\\${imgFileName.replace('.png', '')}.xml`}" -I "${'Input\\' + imgFileName}" -A "Output\\${imgFileName.replace('.png', '')}.arxp" -S ${size} -L ${position} -D ${r} -W ${whitePrint}`
       let print_cmd = `GTXproCMD.exe send -A "Output\\${imgFileName.replace('.png', '')}.arxp" -P "${this.printer}`

src/views/design/index.vue

@@ -20,6 +20,7 @@ export default {
 
 <template>
   <div class="page">
+
     <p-head :company="company" :user="user" />
     <p-main/>
   </div>

src/views/design/main/imgSetting.vue

@@ -7,6 +7,7 @@ export default {
         x: 0,
         rate: 0,
         sx: 0,
+        zIndex: 0,
         sh: 0,
         sw: 0,
         sy: 0,
@@ -40,7 +41,9 @@ export default {
     item: {
       handler() {
         if (this.item) {
-          console.log(this.item.x,this.item.y,this.item.h)
+          this.item.y = (this.item.y - this.item.h / 2)
+          this.item.x = (this.item.x - this.item.w / 2)
+          console.log(this.item.x, this.item.y, this.item.h)
           let x_mm = Number((this.item.x * 0.84183).toFixed(2))
           let w_mm = Number((this.item.w * 0.84183).toFixed(2))
           let h_mm = Number((this.item.h * 0.84183).toFixed(2))
@@ -51,6 +54,7 @@ export default {
           this.form.y = y_mm
           this.form.w = w_mm
           this.form.h = h_mm
+          this.form.zIndex = this.item.zIndex
           // this.form.sx = x_mm
           // this.form.sy = y_mm
           // this.form.sh = h_mm
@@ -64,6 +68,7 @@ export default {
   },
   methods: {
     formChange(t) {
+
       if (t && t === 'w') {
         this.form.h = this.form.w * this.form.rate
       }
@@ -71,10 +76,13 @@ export default {
         this.form.w = this.form.h * this.form.rate
       }
       let f = JSON.parse(JSON.stringify(this.form))
+      f.y = (Number(f.y) + Number(f.h) / 2)
+      f.x = (Number(f.x) + Number(f.w) / 2)
       f.x = Number((f.x / 0.84183).toFixed(2))
       f.y = Number((f.y / 0.84183).toFixed(2))
       f.w = Number((f.w / 0.84183).toFixed(2))
       f.h = Number((f.h / 0.84183).toFixed(2))
+      f.zIndex = Number((f.zIndex))
 
       this.$emit('change', f)
     },
@@ -159,11 +167,11 @@ export default {
               </div>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <el-col :span="12">
             <el-form-item label="r：">
               <div class="form-content">
-                <el-input @blur="formChange" v-model="form.r">
-                  <template slot="append">reg</template>
+                <el-input maxlength="3" @blur="formChange" v-model="form.r">
+
                 </el-input>
                 <div class="set-value">
                   <i @click="addValue('r')" class="el-icon-arrow-up"></i>
@@ -172,6 +180,19 @@ export default {
               </div>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="z：">
+              <div class="form-content">
+                <el-input @blur="formChange" v-model="form.zIndex">
+
+                </el-input>
+                <div class="set-value">
+                  <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
+                  <i @click="reduceValue('zIndex')" class="el-icon-arrow-down"></i>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
           <el-col :span="24">
             <el-tooltip content="居中">
               <el-button @click="$emit('ev','center')" size="mini">

src/views/login/index.vue

@@ -9,19 +9,23 @@ export default {
         password: [{message: '请输入密码', required: true, trigger: 'blur'}],
       },
       companyList: [],
+      userList: [],
       company: null,
       authorityVisible: false,
+      remember: true,
       authorityForm: {},
       form: {
         loginName: '',
+        user: '',
         company: '',
         password: ''
       }
     }
   },
   created() {
-
+    console.log(this.$dataStore, 'this.$dataStore')
     this.company = this.$dataStore.get('company')
+    this.userList = this.$dataStore.get('userList') || []
     if (this.company) {
       this.form.company = this.company.domain
     }
@@ -75,13 +79,16 @@ export default {
       }
     },
     async login() {
-
       this.$refs.formRef.validate(async valid => {
         if (valid) {
           let f = JSON.parse(JSON.stringify(this.form))
-          f.company = f.company.includes('.jomalls.com') ? f.company : f.company + '.jomalls.com'
+          if (f.company.split('.').length === 1) {
+            f.company = f.company + '.jomalls.com'
+          }
+          if (!f.deviceId) {
+            f.deviceId = this.$dataStore.get('deviceId' + this.form.loginName)
+          }
 
-          f.deviceId = this.$dataStore.get('deviceId' + this.form.loginName)
           if (!f.deviceId) delete f.deviceId
           let {data, code, message} = await this.$api.post('/login', f)
           if (code === 411) {
@@ -101,7 +108,16 @@ export default {
           console.log(item, 111222)
           this.$dataStore.set('user', data)
           this.$dataStore.set('company', item)
-          this.$message.success('登录成功')
+
+          if (this.remember) {
+            let userList = this.$dataStore.get('userList')
+            if (userList && !userList.find(el => el.loginName === f.loginName && el.company === f.company)) {
+              userList.push(f)
+            } else {
+              userList = [f]
+            }
+            this.$dataStore.set('userList', userList)
+          }
 
           await this.$router.push('/design')
         }
@@ -109,6 +125,17 @@ export default {
 
 
     },
+    userChange(v) {
+      if (v === '') {
+        this.form.deviceId = ''
+        return
+      }
+      console.log(this.userList, v)
+      this.form.company = this.userList[v].company.split('.')[0]
+      this.form.loginName = this.userList[v].loginName
+      this.form.password = this.userList[v].password
+      this.form.deviceId = this.userList[v].deviceId
+    },
     async getCompanyList() {
       let {data} = await this.$api.get('/getCompanyList')
       this.companyList = data.records
@@ -120,7 +147,17 @@ export default {
 <template>
   <div class="login">
     <div class="form-content">
-      <el-form ref="formRef" :rules="rules" size="small" :model="form">
+      <el-form v-if="" ref="formRef" :rules="rules" size="small" :model="form">
+        <el-form-item v-if="userList.length>0">
+          <el-select @change="userChange" filterable style="width: 100%;" placeholder="登录记录" v-model="form.user"
+                     clearable>
+            <template slot="prefix">
+              <i class="el-icon-monitor"></i>
+            </template>
+            <el-option v-for="(it,i) in userList" :key="i" :label="`${it.loginName}(${it.company.split('.')[0]})`"
+                       :value="i"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item v-if="!company" prop="company">
           <el-input placeholder="客户（例如demo）" prefix-icon="el-icon-monitor" v-model="form.company"
                     clearable></el-input>
@@ -132,6 +169,7 @@ export default {
           <!--            <el-option v-for="(it,i) in companyList" :key="i" :label="it.companyName" :value="it.domain"></el-option>-->
           <!--          </el-select>-->
         </el-form-item>
+
         <el-form-item prop="loginName">
           <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="form.loginName" clearable></el-input>
         </el-form-item>
@@ -139,6 +177,9 @@ export default {
           <el-input placeholder="密码" show-password prefix-icon="el-icon-lock" type="password" v-model="form.password"
                     clearable></el-input>
         </el-form-item>
+        <div class="check">
+          <el-checkbox v-model="remember">记住账号</el-checkbox>
+        </div>
         <el-form-item>
           <div style="display: flex;justify-content: center">
             <el-button @keyup.enter.native="login" @click="login" type="primary" style="width: 60%;">登录</el-button>
@@ -183,6 +224,12 @@ export default {
 </template>
 
 <style scoped>
+.check {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 15px;
+}
+
 .login {
   width: 100%;
   height: 100%;