选科报名，电子签名

package.json

@@ -65,6 +65,7 @@
     "vue-aliplayer": "^1.0.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-esign": "^1.1.0",
     "vue-router": "3.4.9",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",

src/components/VueEsign/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <!-- 电子签名 -->
+    <el-card class="qianming-container" body-style="padding:0px">
+      <vue-esign ref="esign"  :isCrop="isCrop" :width="600" :height="300" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vue-esign>
+      <div class="contro-container">
+        <el-button type="danger"  @click="handleReset">清空画板</el-button>
+        <el-button type="primary" @click="handleGenerate">生成图片</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// import client  from 'common/js/ossClient.js'
+export default {
+  name:'Qianming',
+  data(){
+    return {
+      lineWidth: 6,
+      lineColor: '#000000',
+      bgColor: '',
+      resultImg: '',
+      isCrop: false
+    }
+  },
+  methods:{
+    //清空画板..
+    handleReset () {
+      this.$refs.esign.reset();
+      this.resultImg =''
+    },
+    //生成签名图片..
+    handleGenerate () {
+      this.$refs.esign.generate().then(res => {
+        let randnum = Math.random() * 10000000000000
+        randnum = Math.floor(randnum)
+        let fileName = "dianziqianming/" + randnum + '.png'
+        let file = this.dataURLtoFile(res,fileName)
+        client.put(fileName, file).then(res=>{
+          if(res.url){
+            this.resultImg = res.url
+          }else{
+            this.$message.error('文件上传失败')
+          }
+        }).catch(err=>{})
+      }).catch(err => {
+        this.$message.error('请签名之后提交！')
+      })
+    },
+    //将base64转换为文件..
+    dataURLtoFile(dataurl, filename) {
+      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+      while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, {type:mime});
+    }
+  }
+}
+</script>
+
+<style scoped>
+button{
+  height:40px;
+}
+.show-img{
+  width:400px;
+  height:200px;
+  border:1px solid #123456;
+}
+.show-info{
+  width:400px;
+  height:200px;
+  font-size:24px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.contro-container{
+  width:600px;
+  height:50px;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-around;
+  background-color:#D3D3D3;
+  position:absolute;
+  bottom:0px;
+}
+.qianming-container{
+  width:600px;
+  height:350px;
+  margin:20px auto;
+  position:relative;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+.box-card {
+  width: 95%;
+  margin-left:2.5%;
+  margin-top:20px;
+}
+</style>
+

src/main.js

@@ -69,7 +69,9 @@ Vue.use(ext)
 // filters
 import filters from "@/filters/index"
 Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))
-
+// 电子签名
+import vueEsign from 'vue-esign'
+Vue.use(vueEsign)
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)

src/views/system/user/profile/components/report-table.vue

@@ -40,20 +40,34 @@
     <!-- 拖拽 -->
     <test-drage ref="drage" :sortList="selectedList"></test-drage>
     <el-button @click="commit" type="primary">提交</el-button>
+    <el-dialog
+      title="电子签名"
+      :visible.sync="dialogVisible"
+      width="70%"
+    >
+      <vue-esign></vue-esign>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </el-card>
 </template>
 <script>
 import { formatSubject } from '@/utils/index'
 import TestDrage  from './test-drage'
+import VueEsign from  '@/components/VueEsign/index'
 export default {
   components: {
-    TestDrage
+    TestDrage,
+    VueEsign
   },
   data() {
     return {
       list: [],
       preferenceCount: 3,
       optionalMajors: [],
+      dialogVisible: false,
       propDefines: {
         index: {
           type: 'index',
@@ -132,7 +146,12 @@ export default {
   methods: {
     commit() {
       console.log(this.selectedList)
-      this.selectedList.map(item=> {console.log(item.groupName)})
+      const real = this.selectedList.filter(item=> {return item.selected  == true})
+      if(real.length < this.preferenceCount) {
+        this.$message.warning(`您要选择${this.preferenceCount}个志愿`)
+        return
+      }
+      this.dialogVisible = true
     },
     toSelect(row) {
       const count = this.list.reduce((prev,cur) => {