<template>
<el-dialog
:title="title"
:visible.sync="open"
width="80%"
append-to-body
:close-on-click-modal="false"
@close="cancel">
<div class="form-dialog-box" v-loading="loading" :element-loading-text="loadingText"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
<div class="form-make" :style="{ '--crad-zm': bgm1 ? `url(${bgm1})`:none,'--crad-fm': bgm2 ? `url(${bgm2})`:none }">
<div class="form-make_zm">
<div class="form-make_zm-title">正面</div>
<div class="form-make_zm-info">
<!-- 样式 -->
<div class="form-make_zm-style" ref="myElement">
</div>
</div>
</div>
<div class="form-make_fm">
<div class="form-make_fm-title">反面</div>
<div class="form-make_fm-info">
<!-- 样式 -->
<div class="form-make_fm-style" style="position: relative;">
<div class="form-make_fm-style-bgm" ref="myElement1">
</div>
<div class="form-make_fm-style-text" ref="myElement2">
<div
v-if="isQrCode"
id="barcode">
<barcode :value="cardNo" format="CODE128" :width="width" height="48"></barcode>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer" v-if="formStatus == 1">
<el-button @click="cancel" :loading="loading">关闭</el-button>
<el-button
type="primary"
@click="submitForm"
:loading="loading">
{{ loading ? '提交中...' : '提交' }}
</el-button>
</span>
<!-- 添加或修改对话框 End -->
</el-dialog>
</template>
<script>
import {
getTableDeatilsByIdApi,
addTableApi
} from '@/api/CURD'
import VueBarcode from 'vue-barcode';
//映入注册
// import JsBarcode from 'jsbarcode'
import html2canvas from 'html2canvas';
export default {
name: "addAndEdit",
components: {
'barcode': VueBarcode
},
data() {
return {
title: "",
model: "", // EDIT: 编辑模式 ADD : 新增模式 EDITInit : 编辑模式（需要请求详情）
open: false,
loading: false,
loadingText: "拼命加载数据中...",
formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2 : 获取详情失败
configUrl: {
print:'/zebra/card/print/io/upload'
},
isQrCode: false,
bgm1: require('./1_0.png') ,//require('./zm.jpg'),
bgm2: require('./1_1.png'), // require('./fm.jpg')
cardNo: '',
width: 3
};
},
methods: {
async initData(title, model, row) {
this.title = title
this.isQrCode = false
this.open = true
this.loadingText = "拼命加载数据中..."
this.loading = true
this.actionUrlLoading = false
this.model = model
this.form = JSON.parse(JSON.stringify(row))
this.formStatus = 0
this.cardNo = row.cardNo //row.cardNo
if(this.cardNo.length > 16 ) {
console.log("sdfadff",this.cardNo.length)
this.width = 1
}else if(this.cardNo.length >= 10 && this.cardNo.length <= 16) {
console.log("sdfadff",this.cardNo.length)
this.width = 2
}else {
console.log("sdfadff",this.cardNo.length)
this.width = 3
}
// if(model=='EDITInit') { // 新增
// await this.getTableDeatilsFun(row)
// }
// if(row.cardNo != ""){
// this.$nextTick(()=>{
// //实例化
// JsBarcode("#barcode", row.cardNo, {
// format: "CODE39", //条形码的格式
// // lineColor: "#0aa", //线条颜色
// width:1, //线宽
// height:40, //条码高度
// // displayValue: false //是否显示文字信息
// });
// })
// }
this.formStatus = 1
this.isQrCode = true
this.loading = false
},
/** 获取详情 */
async getTableDeatilsFun(row) {
const id = row.id
this.loading = true
try {
let res = await getTableDeatilsByIdApi(this.configUrl.details, { id })
if (res.code == 200) {
let obj = {
...res.data,
}
this.$set(this, 'form', JSON.parse(JSON.stringify(obj)))
this.formStatus = 1
} else {
this.$message.error('获取详情失败!!!');
this.formStatus = 2
this.loading = false
}
this.loading = false
} catch (error) {
console.error('获取详情失败!!!!', error)
this.formStatus = 2
this.loading = false
}
},
/**
* 保存
* @date 2023-11-22
* @returns {any}
*/
async submitForm(type) {
console.log("dsfsfds=======", type, this.form)
try {
this.loadingText = "提交数据中..."
this.loading = true
let cardImgFrontFile = await this.captureCanvas('myElement')
let cardImgBackFile = await this.captureCanvas('myElement1')
let cardFontBackFilee = await this.captureCanvas('myElement2')
const formData = new FormData();
formData.append("ip", '172.16.90.128');
formData.append("cardImgFrontFile", cardImgFrontFile);
formData.append("cardFontFrontFile", null);
formData.append("cardImgBackFile", cardImgBackFile);
formData.append("cardFontBackFilee", cardFontBackFilee);
let res1 = await fetch('https://zebra.dev.gztjy.top/zebra/card/print/io/upload', {
method: 'POST', // 或者 'GET'
// headers: {
// 'Content-Type': 'multipart/form-data' //携带参数为json
// },
body: formData // post请求携带的参数
// params:{id:0} // get请求携带的参数
})
let res = await res1.json()
console.log("res====",res,res.data)
// let res = await addTableApi(this.configUrl.print, {
// ...params,
// })
if(res.code == 200) {
this.$modal.msgSuccess(`打印成功`);
this.loading = false
this.open = false;
this.$emit('refresh')
}
} catch (error) {
console.error(error)
this.$message.error(`打印失败!!!`);
this.loading = false
}
},
/**
* 重置
* @date 2023-11-22
* @returns {any}
*/
reset() {
if (this.$refs["form"]) {
//this.$refs["form"].resetFields();
this.$set(this, 'form', {activationRule:[]})
this.$nextTick(() => {
this.$refs["form"].clearValidate();
})
}
},
/**
* 关闭弹框
* @date 2023-11-22
* @returns {any}
*/
cancel() {
this.reset();
this.open = false;
},
/** 上传图片 单张 */
handleAvatarSuccess(response, file, fileList,key) {
console.log("res, file",response, file, fileList)
this.actionUrlLoading = false
if(response.code == 200) {
this.form[key] = response.data.url
}
},
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 <= 5;
let testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
let typeList = ['png','jepg','jpg']
const isJPG = typeList.includes(testmsg);
if (!isJPG) {
this.$message.error(`上传图片图片只能是 ${typeList} 格式!`);
}
if (!isLt2M) {
this.$message.error('上传图片图片大小不能超过 5MB!');
}
return isJPG && isLt2M;
},
handleAvatarProgress(){
this.actionUrlLoading = true
},
handleAvatarError() {
this.actionUrlLoading = false
},
handleRemove(index) {
this.form.goodsImage.splice(index,1)
},
addText(type){
},
addImage(type){
},
addQR(type){
},
async captureCanvas(el) {
// 选择你想要转换成图片的 DOM 元素
const element = this.$refs[el];
console.log("dsfsdfadsfasd")
let canvas = await html2canvas(element)
// canvas.toDataURL() 可以获取图片的 base64 编码
const dataUrl = canvas.toDataURL();
// 你可以将 dataUrl 设置为一个 img 标签的 src 属性，或者下载图片等
console.log(dataUrl);
let file = this.dataURLtoBlob(dataUrl,'ceshi')
console.log(file);
return file
},
base64ToFile(base64,fileName){
let arr = base64.split(',')
let mime = arr[0].match(/:(.\*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while(n--) {
u8arr[n] = batr.charCodeAt(n)
}
return new File([u8arr],fileName,{ type: mime })
},
// 将base64转blob
dataURLtoBlob(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);
}
let blob = new Blob([u8arr], { type: mime });
let file = new File([blob],fileName)
return file;
},
},
};
</script>
<style lang="scss" scoped>
.form-dialog-box {
padding: 0 30px;
padding: 0 30px;
min-height: 50vh;
max-height: 65vh;
overflow-y: auto;
>div {
width: 100%;
min-height: 50vh;
}
.form-title {
padding: 0 0 10px 0;
span {
display: flex;
color: rgba(65, 80, 88, 1);
font-size: 16px;
font-family: SourceHanSansSC;
font-weight: 700;
line-height: 23px;
border-left: 4px solid rgb(22, 132, 252);
padding-left: 10px;
}
}
::v-deep .ql-editor {
height: 400px;
}
.upload-btn {
width: 100px;
height: 100px;
background-color: #fbfdff;
border: dashed 1px #c0ccda;
border-radius: 5px;
i {
font-size: 30px;
margin-top: 20px;
}
&-text {
margin-top: -10px;
}
}
.avatar {
cursor: pointer;
}
}
.el-table {
.upload-btn {
width: 100px;
height: 100px;
background-color: #fbfdff;
border: dashed 1px #c0ccda;
border-radius: 5px;
i {
font-size: 30px;
margin-top: 20px;
}
&-text {
margin-top: -10px;
}
}
.avatar {
cursor: pointer;
}
}
.area-container {
min-height: 400px;
}
::v-deep .area-wrap-city.el-cascader {
line-height: normal;
.el-input {
cursor: pointer;
width: 100% !important;
height: 28px !important;
.el-input__inner {
display: none !important;
}
span.el-input__suffix {
position: inherit !important;
i.el-input__icon {
line-height: inherit;
margin-left: 5px;
}
}
.el-input__wrapper {
box-shadow: none;
input {
display: none;
}
}
}
.el-cascader__tags {
display: none;
}
}
.area-city-popper {
.el-cascader-panel {
.el-scrollbar.el-cascader-menu {
.el-cascader-menu__wrap.el-scrollbar__wrap {
height: 315px;
}
}
}
}
.form-make {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
--crad-zm: none;
--crad-fm: none;
--crad-w: 862px;
--crad-h: 542px;
.form-make_zm {
display: flex;
height: var(--crad-h);
.form-make_zm-title {
width: 20px;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-size: 24px;
font-family: 600;
padding: 0 20px;
box-sizing: border-box;
}
.form-make_zm-info {
width: var(--crad-w);
height: 100%;
.form-make_zm-style {
width: 100%;
height: var(--crad-h);
border: 1px dashed #000;
border-radius: 20px;
background-image: var(--crad-zm);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
}
.form-make_fm {
display: flex;
height: var(--crad-h);
margin-top: 10px;
.form-make_fm-title {
width: 20px;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-size: 24px;
font-family: 600;
padding: 20px 20px;
box-sizing: border-box;
}
.form-make_fm-info {
width: var(--crad-w);
height: 100%;
.form-make_fm-style {
width: 100%;
height: var(--crad-h);
border: 1px dashed #000;
box-sizing: border-box;
position: relative;
border-radius: 20px;
overflow: hidden;
.form-make_fm-style-bgm {
width: 100%;
height: 100%;
background-image: var(--crad-fm);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
z-index: 88;
border-radius: 20px;
overflow: hidden;
}
.form-make_fm-style-text {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
border-radius: 20px;
overflow: hidden;
}
}
}
}
#barcode {
width: 323px;
height: 91px;
position: absolute;
z-index: 99;
bottom: 46px;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
box-sizing: border-box;
right: 58px;
// width: 267px;
// height: 93px;
// position: absolute;
// z-index: 99;
// bottom: 46px;
// background-color: #fff;
// display: flex;
// justify-content: center;
// box-sizing: border-box;
// right: 48px;
}
}
</style>
<style>
.custom-class-box {
z-index: 999999 !important;
}
</style>
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
