commit
This commit is contained in:
Paidax
@@ -0,0 +1,23 @@
|
||||
Vue.mixin({
|
||||
mounted() {
|
||||
if (this.$options.style) {
|
||||
const styleId = `style-${this._uid}`
|
||||
const style = document.createElement("style")
|
||||
style.id = styleId
|
||||
//支持函数和字符串
|
||||
const css = typeof this.$options.style === "function" ? this.$options.style.call(this) : this.$options.style
|
||||
style.textContent = css
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.$options.style) {
|
||||
const styleId = `style-${this._uid}`
|
||||
const style = document.getElementById(styleId)
|
||||
if (style) {
|
||||
document.head.removeChild(style)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,73 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-date-picker
|
||||
v-model="page_form.year"
|
||||
type="year"
|
||||
value-format="yyyy" style="width: 150px"
|
||||
placeholder="选择年" @change="$emit('search')">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-input placeholder="请输入内容" clearable v-model="page_form.searchKeyword"
|
||||
@keyup.enter.native="$emit('search')">
|
||||
<el-select v-model="page_form.searchName" slot="prepend" placeholder="查询类型"
|
||||
style="width: 120px;">
|
||||
<el-option label="姓名" value="username"></el-option>
|
||||
<el-option label="工号" value="loginname"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-date-picker
|
||||
v-model="page_form.year"
|
||||
type="year"
|
||||
value-format="yyyy"
|
||||
style="width: 150px"
|
||||
placeholder="选择年"
|
||||
@change="$emit('search')"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
<div class="btn-group tool-button mt5">
|
||||
<el-input placeholder="请输入内容" clearable v-model="page_form.searchKeyword" @keyup.enter.native="$emit('search')">
|
||||
<el-select v-model="page_form.searchName" slot="prepend" placeholder="查询类型" style="width: 120px">
|
||||
<el-option label="姓名" value="username"></el-option>
|
||||
<el-option label="工号" value="loginname"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<slot name="column"></slot>
|
||||
<slot name="column"></slot>
|
||||
|
||||
<div class="btn-group tool-button">
|
||||
<el-button type="primary" icon="el-icon-search" @click="$emit('search')"></el-button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group tool-button">
|
||||
<el-button type="primary" icon="el-icon-search" @click="$emit('search')"></el-button>
|
||||
</div>
|
||||
<!-- <div class="pull-right offscreen-right mt5" v-if="has_add">
|
||||
<el-button icon="el-icon-edit" @click="$emit('openAdd')">申请活动报销</el-button>
|
||||
</div>-->
|
||||
|
||||
<!-- <div class="pull-right offscreen-right mt5" v-if="has_add">
|
||||
<el-button icon="el-icon-edit" @click="$emit('openAdd')">申请活动报销</el-button>
|
||||
</div>-->
|
||||
|
||||
<div class="pull-right offscreen-right mt5" v-if="has_sh">
|
||||
<el-radio-group v-model="page_form.isAudit" @change="$emit('search')">
|
||||
<el-radio-button :label="1">全部</el-radio-button>
|
||||
<el-radio-button :label="2">已审核</el-radio-button>
|
||||
<el-radio-button :label="3">未审核</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="pull-right offscreen-right mt5" v-if="has_sh">
|
||||
<el-radio-group v-model="page_form.isAudit" @change="$emit('search')">
|
||||
<el-radio-button :label="1">全部</el-radio-button>
|
||||
<el-radio-button :label="2">已审核</el-radio-button>
|
||||
<el-radio-button :label="3">未审核</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
module.exports = {
|
||||
props: {
|
||||
page_form: '',
|
||||
has_add: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
props: {
|
||||
page_form: "",
|
||||
has_add: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
has_sh: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
has_type: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
has_sh: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
has_type: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {},
|
||||
methods: {},
|
||||
async created() {
|
||||
|
||||
}
|
||||
watch: {},
|
||||
methods: {},
|
||||
async created() {}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,230 +1,222 @@
|
||||
/**
|
||||
*Desc:
|
||||
*Create by: jug
|
||||
*Create time:2024/1/24/16:40
|
||||
*/
|
||||
<template>
|
||||
<div>
|
||||
<div ref="editorDom"></div>
|
||||
<input type="file" style="display: none;">
|
||||
</div>
|
||||
<div>
|
||||
<div ref="editorRef"></div>
|
||||
<input type="file" style="display: none" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script src="/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
|
||||
<script>
|
||||
const { $, BtnMenu, Panel, Tooltip } = wangEditor
|
||||
|
||||
const {$, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip} = wangEditor
|
||||
//注册上传word按钮
|
||||
class DocMenu extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = wangEditor.$(
|
||||
`<div class="w-e-menu" data-title="上传文档">
|
||||
<i class="fa fa-file-word-o" aria-hidden="true" /></i>
|
||||
</div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
|
||||
class AlertMenu extends BtnMenu {
|
||||
constructor(editor) {
|
||||
const $elem = wangEditor.$(
|
||||
`<div class="w-e-menu" data-title="上传word">
|
||||
word
|
||||
</div>`
|
||||
)
|
||||
super($elem, editor)
|
||||
}
|
||||
|
||||
clickHandler() {
|
||||
const _this = this
|
||||
const inputFileElement = document.querySelector('#'+this.editor.textElemId).parentElement.parentElement.nextElementSibling
|
||||
inputFileElement.click()
|
||||
inputFileElement.addEventListener('change', function () {
|
||||
const file = this.files[0];
|
||||
const fileName = file.name
|
||||
|
||||
if (!fileName.toLowerCase().endsWith('.doc') && !fileName.toLowerCase().endsWith('.docx')) {
|
||||
alert('请上传doc或者docx的文件')
|
||||
_this.clearInputFile()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', file, file.name)
|
||||
axios.post('/file_server/word2Html', formData, {}).then(response => {
|
||||
console.log(response.data)
|
||||
if (response.data.code === 0) {
|
||||
_this.editor.txt.html(response.data.data)
|
||||
} else {
|
||||
alert(response.data.msg + ',上传word失败，请联系管理员！')
|
||||
_this.clearInputFile()
|
||||
clickHandler() {
|
||||
const fileInputId = this.editor.textElemId + "input-file"
|
||||
const existingInput = document.getElementById(fileInputId)
|
||||
if (existingInput) {
|
||||
existingInput.remove()
|
||||
}
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
_this.clearInputFile()
|
||||
alert('上传word失败，请联系管理员！')
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
clearInputFile() {
|
||||
const obj = document.getElementById('fileInput');
|
||||
obj.outerHTML = obj.outerHTML
|
||||
}
|
||||
|
||||
tryChangeActive() {
|
||||
this.active()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
wangEditor.registerMenu('alertMenuKey', AlertMenu)
|
||||
module.exports = {
|
||||
name: "textEditor",
|
||||
props: {
|
||||
// 定义值属性，用于接收父组件传递的值
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
'head',//标题
|
||||
'bold',//加粗
|
||||
'fontSize',//字号
|
||||
'fontName',//字体
|
||||
'italic',//斜体
|
||||
'underline',//下划线
|
||||
'strikeThrough',//删除线
|
||||
'indent',//缩进
|
||||
'lineHeight',//行高
|
||||
'foreColor',//文字颜色
|
||||
'backColor',//背景颜色
|
||||
//'link',//链接
|
||||
'list',//序列
|
||||
'todo',//待办
|
||||
'justify',//对齐
|
||||
'quote',//引用
|
||||
// 'emoticon',//表情
|
||||
'image',
|
||||
//'video',
|
||||
'table',
|
||||
//'code',
|
||||
'splitLine',//分割线
|
||||
'undo',
|
||||
'redo',
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEditor()
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (newValue) {
|
||||
this.$nextTick(() => {
|
||||
this.editor.txt.html(newValue);
|
||||
// this.editor.config.focus = true
|
||||
})
|
||||
// const _this = this
|
||||
// const waitUntilEditorNotNull = () => {
|
||||
// if (_this.editor != null) {
|
||||
// _this.editor.txt.html(newValue);
|
||||
// } else {
|
||||
// setTimeout(waitUntilEditorNotNull, 100); // 每隔100毫秒检查一次
|
||||
// }
|
||||
// }
|
||||
// waitUntilEditorNotNull();
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEditor() {
|
||||
let _this = this
|
||||
this.editor = new wangEditor(this.$refs.editorDom)
|
||||
|
||||
// this.editor.config.focus = false // 取消光标自动定位
|
||||
|
||||
//内容change回调
|
||||
this.editor.config.onchange = function (newHtml) {
|
||||
let content = _this.editor.txt.html()
|
||||
let text = _this.editor.txt.text()
|
||||
// 对于一键格式化后的内容，空内容可能会出现<p></br></p>标签，此处进行判断
|
||||
// if (_this.isEmptyEditor()) {
|
||||
// content = ''
|
||||
// }
|
||||
const newContent = content.replaceAll('<img', '<image');
|
||||
_this.$emit('input', newContent)
|
||||
_this.$emit('catchData', newContent, text)
|
||||
}
|
||||
|
||||
//配置图片上传
|
||||
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
|
||||
// resultFiles 是 input 中选中的文件列表
|
||||
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
|
||||
|
||||
Promise.all(_this.uploadFiles(resultFiles)).then(res => {
|
||||
res.forEach(v => {
|
||||
if (v.code === 0) {
|
||||
insertImgFn(APP_DOMAIN + CREATE_PREVIEW_URL(v.data.filepath))
|
||||
} else {
|
||||
ELEMENT.message.warning('图片上传失败')
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
||||
input.id = fileInputId
|
||||
input.style.display = "none"
|
||||
input.addEventListener("change", (event) => {
|
||||
const files = event.target.files
|
||||
if (!files || files.length === 0) {
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
//粘贴过滤
|
||||
this.editor.config.pasteFilterStyle = false
|
||||
//高度
|
||||
this.editor.config.height = this.height
|
||||
//菜单
|
||||
this.editor.config.menus = this.menus
|
||||
this.editor.create()
|
||||
},
|
||||
isEmptyEditor() {
|
||||
const children = this.editor.$textElem.children()
|
||||
for (let i = 0; i < children.elems.length; i++) {
|
||||
const node = children.elems[i]
|
||||
if (node && node.nodeType === Node.TEXT_NODE && node.textContent.trim().length !== '') {
|
||||
return false
|
||||
}
|
||||
if (node && node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'p' && node.innerText.trim() !== '') {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
uploadFiles(resultFiles) {
|
||||
return resultFiles.map(async file => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file, file.name)
|
||||
formData.append("folderPath", "/wangEditorImg/")
|
||||
return jQuery.ajax({
|
||||
url: '/file_server/uploadFile',
|
||||
type: 'post',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false
|
||||
let loading = null
|
||||
if (window.ELEMENT) {
|
||||
loading = ELEMENT.Loading.service({
|
||||
lock: true,
|
||||
text: "文件读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
})
|
||||
} else if (window.vant) {
|
||||
loading = vant.Toast.loading({
|
||||
message: "文件读取中",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append("file", files[0])
|
||||
|
||||
axios
|
||||
.post("/file_server/convertHtml", formData, {
|
||||
headers: { "Content-Type": "multipart/form-data", "x-requested-with": "XMLHttpRequest" }
|
||||
})
|
||||
.then((response) => {
|
||||
loading.close()
|
||||
if (response.data.code === 0) {
|
||||
this.editor.txt.html(response.data.data)
|
||||
} else {
|
||||
if (window.ELEMENT) {
|
||||
ELEMENT.Message.error(response.data.msg)
|
||||
} else if (window.vant) {
|
||||
vant.Toast(response.data.msg)
|
||||
} else {
|
||||
alert(response.data.msg)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
alert("上传word失败，请联系管理员！")
|
||||
})
|
||||
.finally(() => {
|
||||
input.remove()
|
||||
})
|
||||
})
|
||||
})
|
||||
input.click()
|
||||
document.body.appendChild(input)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
tryChangeActive() {}
|
||||
}
|
||||
|
||||
wangEditor.registerMenu("docMenu", DocMenu)
|
||||
module.exports = {
|
||||
name: "textEditor",
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 定义值属性，用于接收父组件传递的值
|
||||
value: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
"head", //标题
|
||||
"bold", //加粗
|
||||
"fontSize", //字号
|
||||
"fontName", //字体
|
||||
"italic", //斜体
|
||||
"underline", //下划线
|
||||
"strikeThrough", //删除线
|
||||
"indent", //缩进
|
||||
"lineHeight", //行高
|
||||
"foreColor", //文字颜色
|
||||
"backColor", //背景颜色
|
||||
//'link',//链接
|
||||
"list", //序列
|
||||
"todo", //待办
|
||||
"justify", //对齐
|
||||
"quote", //引用
|
||||
// 'emoticon',//表情
|
||||
"image",
|
||||
//'video',
|
||||
"table",
|
||||
//'code',
|
||||
"splitLine", //分割线
|
||||
"undo",
|
||||
"redo"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
cursorPos: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initEditor()
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (newValue) {
|
||||
this.$nextTick(() => {
|
||||
if (newValue !== this.editor.txt.html()) {
|
||||
this.editor.txt.html(newValue)
|
||||
} else {
|
||||
// this.editor.selection.moveCursor(this.editor.$textElem.elems[0], 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEditor() {
|
||||
let _this = this
|
||||
this.editor = new wangEditor(this.$refs.editorRef)
|
||||
this.editor.config.focus = false
|
||||
//内容change回调
|
||||
this.editor.config.onchange = (newHtml) => {
|
||||
this.cursorPos = this.editor.selection.getCursorPos()
|
||||
const range = this.editor.selection.getRange()
|
||||
range.setStart(range.startContainer, Math.max(this.cursorPos, range.endOffset))
|
||||
this.$emit("input", newHtml)
|
||||
}
|
||||
this.editor.config.linkImgCheck = function (imgSrc, alt, href) {
|
||||
// 1. 返回 true ，说明检查通过
|
||||
return true
|
||||
}
|
||||
|
||||
//配置图片上传
|
||||
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
|
||||
// resultFiles 是 input 中选中的文件列表
|
||||
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
|
||||
Promise.all(_this.uploadFiles(resultFiles)).then((res) => {
|
||||
res.forEach((v) => {
|
||||
if (v.data && v.data.code === 0) {
|
||||
insertImgFn(v.data.data)
|
||||
} else {
|
||||
ELEMENT.message.error("图片上传失败")
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.editor.config.pasteFilterStyle = false
|
||||
this.editor.config.height = this.height
|
||||
this.editor.config.menus = this.menus
|
||||
this.editor.create()
|
||||
},
|
||||
uploadFiles(resultFiles) {
|
||||
return resultFiles.map(async (file) => {
|
||||
const formData = new FormData()
|
||||
formData.append("file", file, file.name)
|
||||
formData.append("folderPath", "/wangEditorImg/")
|
||||
return jQuery.ajax({
|
||||
url: "/file_server/uploadFile",
|
||||
type: "post",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,166 +1,156 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<van-image :src="imageUrl" v-if="!signDrawingBoardShow"
|
||||
style="width: 100%;height: 150px;border: 1px dashed"></van-image>
|
||||
<div style="text-align: right">
|
||||
<van-button plain type="danger" hairline size="small" @click="openSignDrawingBoard">
|
||||
打开签字版
|
||||
</van-button>
|
||||
<div style="width: 100%">
|
||||
<van-image :src="imageUrl" v-if="!signDrawingBoardShow" style="width: 100%; height: 150px; border: 1px dashed"></van-image>
|
||||
<div style="text-align: right">
|
||||
<van-button plain type="danger" hairline size="small" @click="openSignDrawingBoard" native-type="button">打开签字版</van-button>
|
||||
</div>
|
||||
<van-popup v-model="signDrawingBoardShow" position="bottom" :style="{ height: '60vh' }">
|
||||
<div id="canvas" style="position: relative; width: 100%"></div>
|
||||
<div class="button-extra">
|
||||
<van-button plain type="danger" hairline size="small" @click="reset" native-type="button">清空重签</van-button>
|
||||
<van-button plain type="primary" hairline size="small" @click="confirm" native-type="button">确定</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
<van-popup v-model="signDrawingBoardShow" position="bottom" :style="{ height: '60vh' }">
|
||||
<div id="canvas" style="position: relative;width: 100%"></div>
|
||||
<div class="button-extra">
|
||||
<van-button plain type="danger" hairline size="small" @click="reset">清空重签</van-button>
|
||||
<van-button plain type="primary" hairline size="small" @click="confirm">确定</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
module.exports = {
|
||||
props: {
|
||||
my_sign: {
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
},
|
||||
is_value_base64: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signDrawingBoardShow: false,
|
||||
signData: null,
|
||||
imageUrl: "",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value:{
|
||||
handler:function (val){
|
||||
if(val){
|
||||
this.getImageUrl(val)
|
||||
props: {
|
||||
my_sign: {
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
},
|
||||
is_value_base64: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//打开签字画板
|
||||
openSignDrawingBoard() {
|
||||
this.signDrawingBoardShow = true
|
||||
this.$nextTick(() => {
|
||||
$("#canvas").jSignature({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
"decor-color": "transparent",
|
||||
lineWidth: '3'
|
||||
})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
$('#canvas').jSignature('reset')
|
||||
this.$emit("update:my_sign", null)
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const isNull = $('#canvas').jSignature('getData', 'native').length === 0
|
||||
if (isNull) {
|
||||
this.$modal.msgError("请签字后再确定")
|
||||
return
|
||||
}
|
||||
this.signData = $('#canvas').jSignature('getData')
|
||||
this.signDrawingBoardShow = false
|
||||
this.uploadSignData()
|
||||
},
|
||||
|
||||
async uploadSignData() {
|
||||
if (this.is_value_base64) {
|
||||
this.$emit('input', this.signData)
|
||||
this.$emit("update:my_sign", this.signData)
|
||||
this.getImageUrl(this.signData)
|
||||
} else {
|
||||
const {data, code, msg} = await $.post('/signature/uploadSignData', {data: this.signData})
|
||||
if (code === 0) {
|
||||
console.log(data)
|
||||
this.getImageUrl(data)
|
||||
this.$emit('input', data)
|
||||
this.$emit("update:my_sign", data)
|
||||
} else {
|
||||
this.$modal.msgError(msg)
|
||||
data() {
|
||||
return {
|
||||
signDrawingBoardShow: false,
|
||||
signData: null,
|
||||
imageUrl: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.getImageUrl(val)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//打开签字画板
|
||||
openSignDrawingBoard() {
|
||||
this.signDrawingBoardShow = true
|
||||
this.$nextTick(() => {
|
||||
$("#canvas").jSignature({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
"decor-color": "transparent",
|
||||
lineWidth: "3"
|
||||
})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
$("#canvas").jSignature("reset")
|
||||
this.$emit("update:my_sign", null)
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const isNull = $("#canvas").jSignature("getData", "native").length === 0
|
||||
if (isNull) {
|
||||
this.$modal.msgError("请签字后再确定")
|
||||
return
|
||||
}
|
||||
this.signData = $("#canvas").jSignature("getData")
|
||||
this.signDrawingBoardShow = false
|
||||
this.uploadSignData()
|
||||
},
|
||||
|
||||
async uploadSignData() {
|
||||
if (this.is_value_base64) {
|
||||
this.$emit("input", this.signData)
|
||||
this.$emit("update:my_sign", this.signData)
|
||||
this.getImageUrl(this.signData)
|
||||
} else {
|
||||
const { data, code, msg } = await $.post("/signature/uploadSignData", { data: this.signData })
|
||||
if (code === 0) {
|
||||
console.log(data)
|
||||
this.getImageUrl(data)
|
||||
this.$emit("input", data)
|
||||
this.$emit("update:my_sign", data)
|
||||
} else {
|
||||
this.$modal.msgError(msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
getImageUrl(value) {
|
||||
if (this.is_value_base64) {
|
||||
this.imageUrl = value
|
||||
} else {
|
||||
this.imageUrl = "/signature/getSignData?path=" + value
|
||||
}
|
||||
},
|
||||
checkNull() {
|
||||
return $("#canvas").jSignature("getData", "native").length === 0
|
||||
},
|
||||
submitSign() {
|
||||
this.$emit("update:my_sign", $("#canvas").jSignature("getData"))
|
||||
},
|
||||
async updateSign() {
|
||||
const data = await $.post("/mobile/common/signing/update", {
|
||||
sign: $("#canvas").jSignature("getData"),
|
||||
prefix: this.prefix
|
||||
})
|
||||
},
|
||||
async getMySign() {
|
||||
const data = await $.get("/mobile/common/signing/getMySign", { prefix: this.prefix })
|
||||
if (data) {
|
||||
this.getImageUrl(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
getImageUrl(value) {
|
||||
if (this.is_value_base64) {
|
||||
this.imageUrl = value
|
||||
} else {
|
||||
this.imageUrl = '/signature/getSignData?path=' + value
|
||||
}
|
||||
created() {
|
||||
this.getMySign()
|
||||
},
|
||||
checkNull() {
|
||||
return $('#canvas').jSignature('getData', 'native').length === 0
|
||||
},
|
||||
submitSign() {
|
||||
this.$emit("update:my_sign", $('#canvas').jSignature('getData'))
|
||||
},
|
||||
async updateSign() {
|
||||
const data = await $.post("/mobile/common/signing/update", {
|
||||
sign: $('#canvas').jSignature('getData'),
|
||||
prefix: this.prefix
|
||||
})
|
||||
},
|
||||
async getMySign() {
|
||||
const data = await $.get("/mobile/common/signing/getMySign", {prefix: this.prefix})
|
||||
if (data) {
|
||||
this.getImageUrl(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getMySign()
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
}
|
||||
async mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.clearBtn {
|
||||
position: absolute !important;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
color: red;
|
||||
z-index: 99;
|
||||
position: absolute !important;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
color: red;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
height: calc(60vh - 100px);
|
||||
width: 100vw;
|
||||
height: calc(60vh - 100px);
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.button-extra {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.button-extra button {
|
||||
width: 40%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,203 +1,201 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div class="signature-body">
|
||||
<el-collapse-transition>
|
||||
<div v-show="showQrCode" class="qr-code-div">
|
||||
<el-link type="primary" :underline="false">{{ scan_title }}</el-link>
|
||||
<QrCode v-if="postAddress" :options="{ width: 126 }" :value="postAddress"></QrCode>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
|
||||
<div class="signature-body">
|
||||
<el-collapse-transition>
|
||||
<div v-show="showQrCode" class="qr-code-div">
|
||||
<el-link type="primary" :underline="false">{{ scan_title }}</el-link>
|
||||
<QrCode v-if="postAddress" :options="{ width: 126 }" :value="postAddress"></QrCode>
|
||||
<el-image fit="contain" v-show="!showQrCode" v-loading="loading" style="height: 100px; width: 100%" :src="imageUrl">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-link
|
||||
type="danger"
|
||||
style="font-size: 12px; margin-top: 20px"
|
||||
@click="
|
||||
refresh()
|
||||
clear()
|
||||
"
|
||||
icon="el-icon-edit"
|
||||
v-show="!showQrCode"
|
||||
>
|
||||
重签
|
||||
</el-link>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
|
||||
<el-image fit="contain" v-show="!showQrCode" v-loading="loading"
|
||||
style="height: 100px;width: 100%" :src="imageUrl">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-link type="danger" style="font-size: 12px;margin-top: 20px" @click="refresh();clear()"
|
||||
icon="el-icon-edit"
|
||||
v-show="!showQrCode">重签
|
||||
</el-link>
|
||||
</div>
|
||||
|
||||
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
window.signatureInterval = null
|
||||
|
||||
module.exports = {
|
||||
name: "Signature",
|
||||
props: {
|
||||
scan_title: {
|
||||
type: String,
|
||||
default: '扫描下方二维码进行签字'
|
||||
name: "Signature",
|
||||
props: {
|
||||
scan_title: {
|
||||
type: String,
|
||||
default: "扫描下方二维码进行签字"
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "DEFAULT"
|
||||
},
|
||||
qz: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
is_value_base64: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'DEFAULT'
|
||||
model: {
|
||||
prop: "qz",
|
||||
event: "change"
|
||||
},
|
||||
qz: {
|
||||
type: String,
|
||||
default: ''
|
||||
data() {
|
||||
return {
|
||||
showQrCode: false,
|
||||
loading: true,
|
||||
postAddress: "",
|
||||
imageUrl: ""
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
is_value_base64: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'qz',
|
||||
event: 'change'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showQrCode: false,
|
||||
loading: true,
|
||||
postAddress: '',
|
||||
imageUrl: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.qz = ''
|
||||
},
|
||||
getImageUrl(value) {
|
||||
if (this.is_value_base64) {
|
||||
this.imageUrl = value
|
||||
} else {
|
||||
this.imageUrl = '/signature/getSignData?path=' + value
|
||||
}
|
||||
},
|
||||
startRequest() {
|
||||
this.imageUrl = ''
|
||||
clearInterval(signatureInterval)
|
||||
const ts = new Date().getTime() + (Math.floor(Math.random() * (1000 - 1 + 1)) + 1).toString()
|
||||
console.log(ts)
|
||||
this.postAddress = location.protocol + '//' + location.host + '/signature?prefix=' + this.prefix + '&id=' + ts + "&is_value_base64=" + this.is_value_base64
|
||||
// this.postAddress = 'http://zhgh.jiangnan.edu.cn/signature?prefix=' + this.prefix + '&id=' + ts + "&is_value_base64=" + this.is_value_base64
|
||||
|
||||
this.showQrCode = true
|
||||
|
||||
console.log(this.postAddress)
|
||||
window.signatureInterval = setInterval(() => {
|
||||
$.get("/signature/getBase64?prefix=" + this.prefix + "&id=" + ts).then(res => {
|
||||
if (res != null) {
|
||||
this.$emit("change", res)
|
||||
this.$emit("update:qz", res)
|
||||
this.getImageUrl(res)
|
||||
this.qz = res
|
||||
this.loading = false
|
||||
this.save()
|
||||
clearInterval(signatureInterval)
|
||||
}
|
||||
})
|
||||
}, 1000 * 3)
|
||||
},
|
||||
async save() {
|
||||
if (this.is_value_base64) {
|
||||
localStorage.setItem("signature", this.qz)
|
||||
} else {
|
||||
return localStorage.setItem("signatureWelfare", this.qz)
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if (this.is_value_base64) {
|
||||
localStorage.removeItem("signature")
|
||||
} else {
|
||||
localStorage.removeItem("signatureWelfare")
|
||||
}
|
||||
|
||||
},
|
||||
getSignature() {
|
||||
if (this.is_value_base64) {
|
||||
return localStorage.getItem("signature")
|
||||
} else {
|
||||
return localStorage.getItem("signatureWelfare")
|
||||
}
|
||||
},
|
||||
async getMySign() {
|
||||
setTimeout(() => {
|
||||
if (this.qz) {
|
||||
this.getImageUrl(this.qz)
|
||||
} else {
|
||||
$.get("/mobile/common/signing/getMySign", {prefix: this.prefix}).then(data => {
|
||||
if (data) {
|
||||
this.getImageUrl(data)
|
||||
this.$emit("change", data)
|
||||
this.$emit("update:qz", data)
|
||||
this.qz = data
|
||||
methods: {
|
||||
refresh() {
|
||||
this.qz = ""
|
||||
},
|
||||
getImageUrl(value) {
|
||||
if (this.is_value_base64) {
|
||||
this.imageUrl = value
|
||||
} else {
|
||||
this.imageUrl = "/signature/getSignData?path=" + value
|
||||
}
|
||||
})
|
||||
},
|
||||
startRequest() {
|
||||
this.imageUrl = ""
|
||||
clearInterval(signatureInterval)
|
||||
const ts = new Date().getTime() + (Math.floor(Math.random() * (1000 - 1 + 1)) + 1).toString()
|
||||
console.log(ts)
|
||||
// this.postAddress = location.protocol + '//' + location.host + '/signature?prefix=' + this.prefix + '&id=' + ts + "&is_value_base64=" + this.is_value_base64
|
||||
this.postAddress = "http://10.10.10.15/signature?prefix=" + this.prefix + "&id=" + ts + "&is_value_base64=" + this.is_value_base64
|
||||
|
||||
this.showQrCode = true
|
||||
|
||||
console.log(this.postAddress)
|
||||
window.signatureInterval = setInterval(() => {
|
||||
$.get("/signature/getBase64?prefix=" + this.prefix + "&id=" + ts).then((res) => {
|
||||
if (res != null) {
|
||||
this.$emit("change", res)
|
||||
this.$emit("update:qz", res)
|
||||
this.getImageUrl(res)
|
||||
this.qz = res
|
||||
this.loading = false
|
||||
this.save()
|
||||
clearInterval(signatureInterval)
|
||||
}
|
||||
})
|
||||
}, 1000 * 3)
|
||||
},
|
||||
async save() {
|
||||
if (this.is_value_base64) {
|
||||
localStorage.setItem("signature", this.qz)
|
||||
} else {
|
||||
return localStorage.setItem("signatureWelfare", this.qz)
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if (this.is_value_base64) {
|
||||
localStorage.removeItem("signature")
|
||||
} else {
|
||||
localStorage.removeItem("signatureWelfare")
|
||||
}
|
||||
},
|
||||
getSignature() {
|
||||
if (this.is_value_base64) {
|
||||
return localStorage.getItem("signature")
|
||||
} else {
|
||||
return localStorage.getItem("signatureWelfare")
|
||||
}
|
||||
},
|
||||
async getMySign() {
|
||||
setTimeout(() => {
|
||||
if (this.qz) {
|
||||
this.getImageUrl(this.qz)
|
||||
} else {
|
||||
$.get("/mobile/common/signing/getMySign", { prefix: this.prefix }).then((data) => {
|
||||
if (data) {
|
||||
this.getImageUrl(data)
|
||||
this.$emit("change", data)
|
||||
this.$emit("update:qz", data)
|
||||
this.qz = data
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}, 500)
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getMySign()
|
||||
},
|
||||
watch: {
|
||||
'qz': {
|
||||
handler(s) {
|
||||
this.loading = !s
|
||||
if (!s) {
|
||||
const qz = this.getSignature()
|
||||
if (!qz) {
|
||||
this.$emit("change", '')
|
||||
this.$emit("update:qz", '')
|
||||
this.startRequest()
|
||||
} else {
|
||||
this.qz = qz
|
||||
this.$emit("change", qz)
|
||||
this.$emit("update:qz", qz)
|
||||
}
|
||||
} else {
|
||||
this.qz = s
|
||||
this.showQrCode = false
|
||||
},
|
||||
created() {
|
||||
this.getMySign()
|
||||
},
|
||||
watch: {
|
||||
qz: {
|
||||
handler(s) {
|
||||
this.loading = !s
|
||||
if (!s) {
|
||||
const qz = this.getSignature()
|
||||
if (!qz) {
|
||||
this.$emit("change", "")
|
||||
this.$emit("update:qz", "")
|
||||
this.startRequest()
|
||||
} else {
|
||||
this.qz = qz
|
||||
this.$emit("change", qz)
|
||||
this.$emit("update:qz", qz)
|
||||
}
|
||||
} else {
|
||||
this.qz = s
|
||||
this.showQrCode = false
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-card__body {
|
||||
position: relative !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.signature-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qr-code-div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user