DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/nworkflow/myflow/sign.vue

<template>
  <view>
	  <view>
	  	<view class="cu-bar bg-white cu-title solid-bottom">
	  		<view class="action" style="vertical-align: middle;">
	  			<text class="margin-right-xs text-blue cuIcon-title">
	  				<span></span>
	  			</text>
	  			<text class="text-xl">
	  				<span>经费开支申报单</span>
	  			</text>
	  		</view>
	  	</view>
	  </view>
    <l-label title="流程名称：">{{ taskParam.taskName }}</l-label>
    <l-label title="当前操作：">{{ typeText }}{{ type === 'sign' ? '' : ` [${taskParam.name}]` }}</l-label>
    <l-organize-picker
      v-if="type === 'sign'"
      v-model="staff"
      title="加签人员"
      placeholder="请选择加签人员"
      type="user"
      required
      arrow
    />

    <!-- 手写签名 canvas 区 -->
    <template v-if="Number(taskParam.isSign) === 1">
      <view class="cu-form-group"><view class="title">手写签名：</view></view>
      <view class="sign-area bg-white">
        <canvas
			 v-if="canvas"
			 @touchmove="signMove"
			 @touchstart="signStart($event)"
			 @touchend="signEnd"
			 @touchcancel="signEnd"
			 disable-scroll="true"
          canvas-id="sign-canvas"
          id="sign-canvas"
          class="sign-canvas"
        ></canvas>
      </view>
	  <view class="sign-action padding-bottom text-right">
	    <l-button @click="clearSign" color="red" style="margin-right: 15px;">清空签名板</l-button>
	  </view>
	   <view class="cu-form-group"><view class="title">签章：</view></view>
	  <view v-if="" class="Signwrap">
	  	<image style="width: 50px;height: 50px;margin: 15px;" :src="Signimg"></image>
	  </view>
      <view class="sign-action padding-bottom text-right">
		<!-- <l-button @click="Signature" color="" style="color: #FFFFFF; background: #0081ff; margin-right: 15px;">签章</l-button> -->
		<picker class="cu-btn df" style="background-color: #0081ff;color: #ffffff;margin-right: 15px;border-radius: 5px;"  @change="Signature" :range="Signaitem" range-key="F_StampName">个人签章</picker>
		<picker v-if="ComStatus" class="cu-btn df" style="background-color: #fe955c;color: #ffffff;margin-right: 15px;border-radius: 5px;"  @change="Commonture" :range="Commonseal" range-key="F_StampName">学校签章</picker>
        <l-button @click="clearcom" color="red" style="margin-right: 15px;">清空签章</l-button>
      </view>
    </template>
    <l-textarea v-model="remark" :placeholder="`输入${typeText}意见`" title="审核意见：" required />
	
	<!-- 弹层 -->
	<l-modal v-model="modal" @close="reviewer = ''" title="指派审核人">
		<l-checkbox-picker @input="(e)=>{reviewer = e}" :value="reviewer" :readonly="false" :range="reviewerList"
			required title="审核人" />
		<l-button @click="userAssign" :disabled="userAssignDisable" color="blue" class="block" block>确定指派</l-button>
		<l-button @click="()=>{modal = false;reviewer = ''}" line="blue" class="block margin-top-sm" block>取消</l-button>
	</l-modal>

    <view class="padding margin-top bg-white">
      <l-button @click="submit" :disabled="submitDisable" class="block" size="lg" color="green" block>提交流程{{ typeText }}</l-button>
    </view>
	
	<view class="pswd-uni-mask" v-if="passshow">
		<view class="pswd-uni-modal">
			<view class="pswd-uni-modal__hd">
				<view class="pswd-strong">输入密码</view>
			</view>
			<view class="pswd-uni-modal__hd" style="margin-bottom: 1em;">
				<input class="pswdinp" type="password" v-model="password" placeholder="密码">
			</view>
			
			<view class="pswd-uni-modal__ft">
				<view class="pswd-uni-modal__btn" style="color:rgb(57, 181, 74)" @click="cancelpswd">
					取消
				</view>
				<view class="pswd-uni-modal__btn pswd__btn_primary" style="color: rgb(245, 88, 80);" @click="confirmpswd">
					确认
				</view>
			</view>
		</view>
	</view>
	
	
	
  </view>
</template>

<script>
import get from 'lodash/get'

let context = null
let touchs = []

export default {
  data() {
    return {
      type: 'sign',
      typeText: '',

      staff: '',
      remark: '',
      taskParam: {},
      canvas: true,
	  
	  modal: false,
	  reviewer: [],
	  reviewerList: [],
	  reviewerListId:'',
	  submitPostData:null,
	  
	  // 列表与分页信息
	  page: 1,
	  total: 2,
	  
	  // 选择个人签章
	  Signaitem:[],
	  // 公章
	  Commonseal:[],
	  // 是否显示公章
	  ComStatus:false,
	  
	  pitchon:'',
	  Signimg: '',
	  // 填写密码
	  passshow:false,
	  password:'',
	  PitchonSign:'',
	  canvasW:'',
	  canvasH:'',
	  signshow:false,
	  ConfirmSign:'',
	  
	  submitDisable:false,
	  userAssignDisable:false,
    }
  },

  async onLoad() {
    await this.init()
	// this.Signimg = this.API + `/learun/adms/user/img?data=${'System'}`
	// this.Signimg = this.API + `/learun/adms/StampPersonal/img?data=${'47201f98-7611-4052-b271-bb99bd7b1d3c'}`
  },

  methods: {
    // 页面初始化
    async init() {
      this.taskParam = this.GET_PARAM()
      this.type = this.taskParam.type
      this.typeText = this.taskParam.type === 'sign' ? '加签' : '审核'
	  await this.getComstatus()
	  await this.getSigna()	
      await this.getCommonseal()
	  if (Number(this.taskParam.isSign) === 1) {
        this.canvasInit()
		
      }
    },
	
	// 获取个人签章
	getSigna(){
		return this.HTTP_GET("learun/adms/StampPersonal/list",{},"加载数据时出错").then(async res=>{
			if(res){
				this.Signaitem = res
			}
		})
	},
	
	// 获取是否展示公章
	getComstatus(){
		return this.HTTP_GET("learun/adms/StampPersonal/ishaveright",{},"加载数据时出错").then(async res=>{
			if(res){
				this.ComStatus = res.result
			}
		})
	},
	
	// 获取学校签章
	getCommonseal(){
		return this.HTTP_GET("learun/adms/StampPersonal/schoollist",{},"加载数据时出错").then(async res=>{
			if(res){
				this.Commonseal = res
			}
		})
	},
    // 初始化签名区 canvas
    canvasInit() {
      this.canvas = true
	  context = uni.createCanvasContext('sign-canvas')
      context.setStrokeStyle('#000')
      context.setLineWidth(5)
      context.setLineCap('round')
      context.setLineJoin('round')
      touchs = []
    },
	
	// 点击个人签章
	Signature(e){
		let signindex = e.detail.value;
		this.pitchon = this.Signaitem[signindex]
		this.PitchonSign = this.Signaitem[signindex].F_StampId
		this.passshow = true
	},
	// 选择学校签章
	Commonture(e){
		let signindex = e.detail.value;
		this.pitchon = this.Commonseal[signindex]
		this.PitchonSign = this.Commonseal[signindex].F_StampId
		this.passshow = true
	},
	//  取消
	cancelpswd(){
		this.passshow = false
		this.password = ''
	},
	// 确认
	confirmpswd(){
		let _this = this
		this.HTTP_POST('learun/adms/StampPersonal/equalPassword', {
			F_StampId:this.pitchon.F_StampId,
			F_Password: this.MD5(this.password)
		}).then(async res=>{
			if(res.result){
				_this.ConfirmSign = _this.PitchonSign
				let imgurl = _this.API + `/learun/adms/StampPersonal/img?data=${_this.pitchon.F_StampId}`
				_this.Signimg = imgurl
				_this.signshow = true
				_this.passshow = false
				_this.password = ''
				_this.pitchon = ''
			}else{
				this.TOAST(`${res.msg}`, 'error')
			}
		})
		
		
	},
	// 绘制签章图片到canvas
	SignaApply(goodsImg){
		let _this = this
		uni.getImageInfo({
			src:goodsImg,
			success:function(image){
				_this.canvasW = image.width / 5;//因为需要所以缩放了8倍
				_this.canvasH = image.height / 5;
			}
		})
		
		setTimeout(()=>{
		  context.drawImage(goodsImg,250,150,100,100)
		  context.draw(true,(res)=>{
				  
		  })
		})
	},
	// 指派审核人
	async userAssign() {
		if(!this.reviewer.length){
			this.modal = false
			this.TOAST('请选择审核人')
			return
		}
		// let formdata = new FormData()
		// formdata.append("data",this.taskParam.formreq)
		this.userAssignDisable = true
		uni.showLoading({
		    title: '提交中...'
		});
		const res = await this.HTTP_POST('learun/adms/newwf/instance', this.taskParam.formreq, `指派审核人时发生错误`)
		if(!res){
			this.userAssignDisable = false
			uni.hideLoading();
			return
		}
		
		this.submitPostData.auditors = JSON.stringify({[this.reviewerListId]:this.reviewer.toString()})
		delete this.submitPostData.formreq
		// this.submitPostData.auditors[this.reviewerListId] = this.reviewer
		const success = await this.HTTP_POST(
		  this.type === 'sign' ? 'learun/adms/newwf/sign' : 'learun/adms/newwf/auditors',
		  this.submitPostData,
		  `提交[${this.typeText}]时发生错误`
		)
		
		if (!success) {
			this.userAssignDisable = false
			uni.hideLoading();
		  return
		}
		uni.hideLoading();
		this.EMIT('task-list-change')
		this.NAV_BACK(2)
		this.TOAST(`已成功提交${this.typeText}`, 'success')
		
	},
	newguid() {
		return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			var r = Math.random() * 16 | 0,
				v = c == 'x' ? r : (r & 0x3 | 0x8);
			return v.toString(16);
		});
	},

    // 点击「提交」按钮
    async submit() {
      if (this.type === 'sign' && !this.staff) {
        this.CONFIRM('请补全必填项', '必须指定一个加签用户')
        return
      }
		
		if(!this.remark){
			this.TOAST(`请签署审批意见`)
			return false;	 
		}
		
		this.submitDisable = true
		uni.showLoading({
		    title: '提交中...'
		});
		
      const postData = {
        operationCode: this.taskParam.code,
        operationName: this.taskParam.name,
        processId: this.taskParam.processId,
        taskId: this.taskParam.taskId,
        des: this.remark,
        formreq: this.taskParam.formreq,
		stamp: this.ConfirmSign
      }
	  
	
      if (this.type === 'sign') {
        postData.userId = this.staff
      } else {
        postData.auditors = this.taskParam.auditors
      }

      // 需要手写签名时，将 canvas 导出为 base64 格式
      // 各个平台写法均不相同，需要注意
      if (Number(this.taskParam.isSign) === 1) {
        // H5 平台，canvasToTempFilePath 的结果直接为画布的 base64
        // #ifdef H5
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        postData.signUrl = tempFilePath
        // #endif

        // App 平台，canvasToTempFilePath 输出文件，上传后台转为 base64 格式
        // #ifdef APP-VUE
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        const signBase64 = await this.HTTP_UPLOAD2('/learun/adms/annexes/wxbase64',tempFilePath,{folderId:this.newguid()})
        postData.signUrl = 'data:image/png;base64,' + signBase64
        // #endif

        // 微信小程序，canvasToTempFilePath 输出文件，使用文件管理器以 base64 格式读取文件即可
        // #ifdef MP-WEIXIN
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        postData.signUrl = 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(tempFilePath, 'base64')
        // #endif

        // #ifdef MP-ALIPAY
        // 钉钉小程序，context.toTempFilePath 输出文件，上传后台转为 base64 格式
        // #ifdef MP-DINGTALK
        const filePath = await new Promise((res, rej) => {
          context.toTempFilePath({
            success: ({ filePath }) => {
              res(filePath)
            },
            fail: () => {
              rej()
            }
          })
        })

        const signBase64 = await this.HTTP_UPLOAD('/annexes/wxtobase64', filePath)
        postData.signUrl = 'data:image/png;base64,' + signBase64
        // #endif

        // 支付宝小程序，context.toDataURL 直接输出 base64 字符串
        // #ifndef MP-DINGTALK
        postData.signUrl = await context.toDataURL('image/png', 1)
        // #endif
        // #endif
      }
	  
	  // 是否需要指派审核人
	  let isNext = this.taskParam.currentNode.isNext
	  if (this.taskParam.next == '2') {
	  	isNext = '1';
	  }
	  if (isNext == '1') {
	  	let params = {
	  		code: this.taskParam.schemeCode,
	  		processId: this.taskParam.processId,
	  		taskId: this.taskParam.taskId,
	  		nodeId: this.taskParam.currentNode.id,
	  		operationCode: this.taskParam.code,
	  	}
	  	const userList = await this.HTTP_GET('learun/adms/newwf/auditer', params, `获取审核人时发生错误`)
	  	// if (!userList) {
	  	// 	return
	  	// }
		
		if(Object.keys(userList).length==0){
			const success = await this.HTTP_POST(
			  this.type === 'sign' ? 'learun/adms/newwf/sign' : 'learun/adms/newwf/audit',
			  postData,
			  `提交[${this.typeText}]时发生错误`
			)
			
			if (!success) {
				this.submitDisable = false
			  uni.hideLoading();
			  return
			}
			
			this.EMIT('task-list-change')
			this.NAV_BACK(2)
			this.TOAST(`已成功提交${this.typeText}`, 'success')
		}
		let arr = Object.entries(userList)
		this.reviewerListId = arr[0][0]
		this.reviewerList =  arr[0][1].map(item => {
			return {
				text: item.Name,
				value: item.Id
			}
		})
		this.submitPostData = postData
		if(this.reviewerList.length>1){
			this.submitDisable = false
			uni.hideLoading();
			this.modal = true
			return
		}
					
	  }
		
	
	
      const success = await this.HTTP_POST(
        this.type === 'sign' ? 'learun/adms/newwf/sign' : 'learun/adms/newwf/audit',
        postData,
        `提交[${this.typeText}]时发生错误`
      )
	 
      if (!success) {
		  this.submitDisable = false
	    uni.hideLoading();
        return
      }

      this.EMIT('task-list-change')
      this.NAV_BACK(2)
      uni.hideLoading();
      this.TOAST(`已成功提交${this.typeText}`, 'success')
    },

    // 手写板事件（开始拖动）
    signStart(e) {
      touchs.push({
        x: e.changedTouches[0].x,
        y: e.changedTouches[0].y
      })
    },

    // 手写板事件（拖动签名）
    signMove(e) {
      touchs.push({
        x: e.touches[0].x,
        y: e.touches[0].y
      })
      this.drawLine()
    },

    // 手写板事件（签名结束）
    signEnd(e) {
      touchs = []
    },
	
    // 手写板事件（绘出线型）
    drawLine() {
      if (touchs.length < 2) {
        return
      }

      const [p1, p2] = touchs
      touchs.shift()
      context.moveTo(p1.x, p1.y)
      context.lineTo(p2.x, p2.y)
      context.stroke()
      context.draw(true)
    },

    // 清除手写板
    // 阿里小程序无法使用 clearRect 来清空，因此直接重新渲染 canvas
    clearSign() {
      // #ifndef MP-ALIPAY
      context.clearRect(0, 0, 9999, 9999)
      context.draw()
      context.setStrokeStyle('#000')
      context.setLineWidth(5)
      context.setLineCap('round')
      context.setLineJoin('round')
      // #endif

      // #ifdef MP-ALIPAY
      // 阿里系小程序无法 clearRect 清空画布，必须重新渲染 canvas
      this.canvas = false
      this.$nextTick(() => {
        this.canvasInit()
      })
      // #endif
    },
	clearcom(){
		this.Signimg = ''
		this.ConfirmSign = ''
	}
  }
}
</script>

<style lang="less" scoped>
.sign-area {
  min-height: 500rpx;
  margin: 23rpx;
  border: 2rpx dashed #444444;

  .sign-canvas {
    width: 700rpx;
    height: 500rpx;
  }

  .sign-action {
    text-align: right;
  }
}

.pswd-uni-mask{
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.5);
}

.pswd-uni-modal{
	position: fixed;
	z-index: 999;
	width: 80%;
	max-width: 300px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background-color: #fff;
	text-align: center;
	border-radius: 3px;
	overflow: hidden;
}
.pswd-uni-modal__hd{
	padding: 1em 1.6em 0.3em;
}
.pswd-strong{
	font-weight: 400;
	font-size: 18px;
}
.pswd-uni-modal__ft{
	position: relative;
	line-height: 48px;
	font-size: 18px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

.pswd-uni-modal__ft::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d5d5d6;
    color: #d5d5d6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

.pswd-uni-modal__btn{
	display: block;
	-webkit-box-flex: 1;
	/* -webkit-flex: 1; */
	flex: 1;
	color: #3cc51f;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	position: relative;
	cursor: pointer;
}

.pswd__btn_primary::after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #d5d5d6;
    color: #d5d5d6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
}
.pswdinp{
	background: #f5f5f5;
	
}

.Signwrap{
	margin: 11px;
	border: 1px dashed #444444;
	background: #ffffff;
}

</style>