当前位置：首页 > news >正文

低代码可视化-uniapp蓝牙标签打印-代码生成器

news 2025/5/1 2:33:57

蓝牙标签打印

蓝牙标签打印技术结合了蓝牙通信与标签打印的功能，为用户提供了一种便捷、高效的打印解决方案。以下是对蓝牙标签打印的详细解析：

蓝牙标签打印机的特点

无线连接：蓝牙标签打印机最大的亮点在于其无线连接方式。用户可以通过蓝牙轻松地将手机、平板电脑或电脑与打印机连接，无需复杂的网络设置或线缆连接，极大地提高了使用的便捷性。
兼容性强：蓝牙标签打印机通常支持多种操作系统和设备，包括安卓、iOS以及Windows等，满足不同用户的需求。
便携小巧：许多蓝牙标签打印机设计得小巧轻便，便于携带，用户可以随时随地进行打印操作。
功能多样：除了基本的文本打印外，蓝牙标签打印机还支持打印条形码、二维码、图片等，广泛应用于物流、仓储、零售、医疗等行业。

蓝牙标签打印机的应用场景

物流管理：在快递、物流行业中，蓝牙标签打印机可以快速打印出运单、标签等，提高包裹的分拣和配送效率。
仓储管理：在仓库中，蓝牙标签打印机可以打印出货物标签、货架标签等，帮助工作人员快速识别和定位货物。
零售管理：在超市、便利店等零售场所，蓝牙标签打印机可以打印出价格标签、促销标签等，方便商品管理和顾客选购。
医疗管理：在医疗行业中，蓝牙标签打印机可以打印出药品标签、患者信息标签等，确保医疗过程的安全和准确。

蓝牙标签打印的优势

提高效率：无线连接和便携设计使得蓝牙标签打印机可以在任何需要的地方进行打印操作，大大提高了工作效率。
降低成本：相比于传统的有线打印方式，蓝牙标签打印机减少了线缆和设备的投入成本，同时降低了维护成本。
增强灵活性：蓝牙标签打印机支持多种打印格式和内容，可以根据实际需求进行灵活调整和优化。

打印核心代码

打印核心代码基于网上资源自己进行了二次开发，兼容了uniapp。

print.js核心代码

import tsc from './tsc.js';
import esc from './esc.js';// 打印程序begin---------------------------------
/*** android 6.0以上需授权地理位置权限*/
var checkPemission = function(that) {var systemInfo = uni.getSystemInfoSync();var platform = systemInfo.platform;if (platform == "ios") {getBluetoothDevices(that)} else if (platform == "android") {let system = systemInfo.system;let system_no = system.replace('android', '');system_no = system.replace('Android', '');if (Number(system_no) > 5) {uni.getSetting({success: function(res) {if (!res.authSetting['scope.userLocation']) {uni.authorize({scope: 'scope.userLocation',complete: function(res) {getBluetoothDevices(that)}})} else {getBluetoothDevices(that)}}})}}
}/*** 获取蓝牙设备信息*/
var getBluetoothDevices = function(that) {console.log("start search")uni.showLoading({title: '搜索中',})that.setData({isScanning: true})uni.startBluetoothDevicesDiscovery({success: function(res) {setTimeout(function() {uni.getBluetoothDevices({success: function(res) {var devices = []var num = 0for (var i = 0; i < res.devices.length; ++i) {if (res.devices[i].name != "未知设备") {devices[num] = res.devices[i]num++}}that.setData({devicesList: devices,isScanning: false})uni.hideLoading()uni.stopPullDownRefresh()},})}, 3000)},})
}/*** 开始连接蓝牙设置*/
var connectBluetoothSettings = function(app, that) {let deviceId = that.deviceId;uni.stopBluetoothDevicesDiscovery({success: function(res) {//console.log(res)},})that.setData({serviceId: 0,writeCharacter: false,readCharacter: false,notifyCharacter: false})uni.showLoading({title: '正在连接',})uni.createBLEConnection({deviceId: deviceId,success: function(res) {app.globalData.bluetoothDeviceId = deviceIdgetBLEDeviceServices(app, that);uni.showLoading({title: '连接好可以打印',})},fail: function(e) {uni.showModal({title: '提示',content: '连接失败',})uni.hideLoading()},complete: function(e) {//console.log(e)}})
}/*** 获取蓝牙设备所有服务*/
var getBLEDeviceServices = function(app, that) {console.log(app.globalData.bluetoothDeviceId)uni.getBLEDeviceServices({deviceId: app.globalData.bluetoothDeviceId,success: function(res) {that.setData({services: res.services})getBLEDeviceCharacteristics(app, that)},fail: function(e) {console.log(e)},complete: function(e) {//console.log(e)}})
}/*** 获取蓝牙设备某个服务中所有特征值*/
var getBLEDeviceCharacteristics = function(app, that) {var list = that.servicesvar num = that.serviceIdvar write = that.writeCharactervar read = that.readCharactervar notify = that.notifyCharacteruni.getBLEDeviceCharacteristics({deviceId: app.globalData.bluetoothDeviceId,serviceId: list[num].uuid,success: function(res) {for (var i = 0; i < res.characteristics.length; ++i) {var properties = res.characteristics[i].propertiesvar item = res.characteristics[i].uuidif (!notify) {if (properties.notify) {app.globalData.notifyCharaterId = itemapp.globalData.notifyServiceId = list[num].uuidnotify = true}}if (!write) {if (properties.write) {app.globalData.writeCharaterId = itemapp.globalData.writeServiceId = list[num].uuidwrite = true}}if (!read) {if (properties.read) {app.globalData.readCharaterId = itemapp.globalData.readServiceId = list[num].uuidread = true}}}if (!write || !notify || !read) {num++that.setData({writeCharacter: write,readCharacter: read,notifyCharacter: notify,serviceId: num})if (num == list.length) {uni.showModal({title: '提示',content: '找不到该读写的特征值',})} else {getBLEDeviceCharacteristics(app, that)}} else {notifyBLECharacteristicValueChange(app)}},fail: function(e) {console.log(e)},complete: function(e) {//console.log("write:" + app.globalData.writeCharaterId)//console.log("read:" + app.globalData.readCharaterId)//console.log("notify:" + app.globalData.notifyCharaterId)}})
}/*** 启用低功耗蓝牙设备特征值变化时的 notify 功能*/
var notifyBLECharacteristicValueChange = function(app) {//console.log("deviceId:" + app.globalData.bluetoothDeviceId)//console.log("serviceId:" + app.globalData.notifyServiceId)//console.log("notifyCharaterId:" + app.globalData.notifyCharaterId)uni.hideLoading();uni.notifyBLECharacteristicValueChange({deviceId: app.globalData.bluetoothDeviceId,serviceId: app.globalData.notifyServiceId,characteristicId: app.globalData.notifyCharaterId,state: true,success: function(res) {uni.onBLECharacteristicValueChange(function(r) {//console.log('onBLECharacteristicValueChange=', r);})},fail: function(e) {console.log('fail', e)},complete: function(e) {//console.log('complete', e)}})
}/*** 标签模式*/
var labelTest = function(app, that) {var command = tsc.jpPrinter.createNew()command.setSize(70, 50) //纸宽度70，高度50command.setGap(0)command.setCls() //需要设置这个，不然内容和上一次重复// 10起始位置,10行距,TSS24.BF2字体,1字与字之间的间距,1字体大小,最后一个打印内容command.setText(10, 10, "TSS24.BF2", 2, 2, 'DIY可视化蓝牙打印')command.setText(10, 70, "TSS24.BF2", 1, 1, '联系人：邓志锋')command.setText(10, 110, "TSS24.BF2", 1, 1, '网址：diygw.com')command.setText(10, 150, "TSS24.BF2", 1, 1, '电话：15655555555')//command.setText(10, 40, "TSS24.BF2", 1, 2, "蓝牙热敏标签打印测试2")command.setPagePrint()prepareSend(app, that, command.getData())
}// 打印标签
var printLabel = function(app, that) {var command = tsc.jpPrinter.createNew()command.setSpeed(0)command.setSize(that.form.width, that.form.height) //纸宽度，高度command.setGap(0)command.setCls() //需要设置这个，不然内容和上一次重复// 10起始位置,TSS24.BF2字体,1字与字之间的间距,1字体大小,一行行增加40高度打印// 打印位置let y = 0;let content = that.form.contentfor (let i = 0; i < content.length; i++) {command.setText(10, y, "TSS24.BF2", content[i].scale, content[i].scale, content[i].text)y = y + 40}command.setPagePrint()prepareSend(app, that, command.getData())
}/*** 准备发送数据*/
var prepareSend = function(app, that, buff) {//console.log('buff', buff)var time = that.oneTimeDatavar looptime = parseInt(buff.length / time);var lastData = parseInt(buff.length % time);that.setData({looptime: looptime + 1,lastData: lastData,currentTime: 1,})Send(app, that, buff)
}/*** 查询打印机状态*/
var queryPrinterStatus = function() {var command = esc.jpPrinter.Query();command.getRealtimeStatusTransmission(1);this.setData({returnResult: "查询成功"})
}/*** 分包发送*/
var Send = function(app, that, buff) {var currentTime = that.currentTime;var loopTime = that.looptime;var lastData = that.lastData;var onTimeData = that.oneTimeData;var printNum = that.printNum; //打印多少份var currentPrint = that.currentPrint;var bufvar dataViewif (currentTime < loopTime) {buf = new ArrayBuffer(onTimeData)dataView = new DataView(buf)for (var i = 0; i < onTimeData; ++i) {dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])}} else {buf = new ArrayBuffer(lastData)dataView = new DataView(buf)for (var i = 0; i < lastData; ++i) {dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])}}console.log("第" + currentTime + "次发送数据大小为：" + buf.byteLength);console.log("deviceId:" + app.globalData.bluetoothDeviceId)console.log("serviceId:" + app.globalData.writeServiceId)console.log("characteristicId:" + app.globalData.writeCharaterId)uni.writeBLECharacteristicValue({deviceId: app.globalData.bluetoothDeviceId,serviceId: app.globalData.writeServiceId,characteristicId: app.globalData.writeCharaterId,value: buf,success: function(res) {console.log('写入成功', res)},fail: function(e) {console.error('写入失败', e)},complete: function() {currentTime++if (currentTime <= loopTime) {that.setData({currentTime: currentTime})Send(app, that, buff)} else {if (currentPrint == printNum) {that.setData({looptime: 0,lastData: 0,currentTime: 1,isReceiptSend: false,isLabelSend: false,currentPrint: 1})} else {currentPrint++that.setData({currentPrint: currentPrint,currentTime: 1,})console.log("开始打印")Send(app, that, buff)}}//console.log('打印完成')}})
}/*** 蓝牙搜索*/
var searchBluetooth = function(that) {//判断蓝牙是否打开if(uni.openBluetoothAdapter){uni.openBluetoothAdapter({success: function(res) {uni.getBluetoothAdapterState({success: function(res) {if (res.available) {if (res.discovering) {uni.stopBluetoothDevicesDiscovery({success: function(res) {//console.log(res)}})}checkPemission(that)} else {uni.showModal({title: '提示',content: '请开启手机蓝牙后再试',})}},})},fail: function() {uni.showModal({title: '提示',content: '蓝牙初始化失败，请打开蓝牙',})}})}else{that.showToast('只支持APP或小程序')}}
// -end---------------------------------var print = {searchBluetooth: searchBluetooth,connectBluetoothSettings: connectBluetoothSettings,labelTest: labelTest,printLabel: printLabel
}
export default print;

tsc.js核心代码


import encode from './encoding.js';
var jpPrinter = {createNew: function () {var jpPrinter = {};var data = "";var command = []jpPrinter.name = "标签模式";jpPrinter.init = function () { };jpPrinter.addCommand = function (content) {  //将指令转成数组装起var code = new encode.TextEncoder('gb18030', {NONSTANDARD_allowLegacyEncoding: true}).encode(content)for (var i = 0; i < code.length; ++i) {command.push(code[i])}}jpPrinter.setSize = function (pageWidght, pageHeight) { //设置页面大小data = "SIZE " + pageWidght.toString() + " mm" + "," + pageHeight.toString() + " mm" + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setSpeed = function (printSpeed) { //设置打印机速度data = "SPEED " + printSpeed.toString() + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setDensity = function (printDensity) { //设置打印机浓度data = "DENSITY " + printDensity.toString() + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setGap = function (printGap) { //传感器data = "GAP " + printGap.toString() + " mm\r\n";jpPrinter.addCommand(data)};jpPrinter.setCountry = function (country) { //选择国际字符集/*001:USA002:French003:Latin America034:Spanish039:Italian044:United Kingdom046:Swedish047:Norwegian049:German*/data = "COUNTRY " + country + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setCodepage = function (codepage) { //选择国际代码页/*8-bit codepage 字符集代表437:United States850:Multilingual852:Slavic860:Portuguese863:Canadian/French865:NordicWindows code page1250:Central Europe1252:Latin I1253:Greek1254:Turkish以下代码页仅限于 12×24 dot 英数字体WestEurope:WestEuropeGreek:GreekHebrew:HebrewEastEurope:EastEuropeIran:IranIranII:IranIILatvian:LatvianArabic:ArabicVietnam:VietnamUygur:UygurThai:Thai1252:Latin I1257:WPC12571251:WPC1251866:Cyrillic858:PC858747:PC747864:PC8641001:PC100*/data = "CODEPAGE " + codepage + "\r\n";jpPrinter.addCommand(data)}jpPrinter.setCls = function () { //清除打印机缓存data = "CLS" + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setFeed = function (feed) { //将纸向前推出ndata = "FEED " + feed + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setBackFeed = function (backup) { //将纸向后回拉ndata = "BACKFEED " + backup + "\r\n";jpPrinter.addCommand(data)}jpPrinter.setDirection = function (direction) { //设置打印方向，参考编程手册  data = "DIRECTION " + direction + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setReference = function (x, y) { //设置坐标原点，与打印方向有关data = "REFERENCE " + x + "," + y + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setFromfeed = function () { //根据Size进一张标签纸data = "FORMFEED \r\n";jpPrinter.addCommand(data)};jpPrinter.setHome = function () { //根据Size找到下一张标签纸的位置data = "HOME \r\n";jpPrinter.addCommand(data)};jpPrinter.setSound = function (level, interval) { //控制蜂鸣器data = "SOUND " + level + "," + interval + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setLimitfeed = function (limit) { // 检测垂直间距data = "LIMITFEED " + limit + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setBar = function (x, y, width, height) { //绘制线条data = "BAR " + x + "," + y + "," + width + "," + height + "\r\n"jpPrinter.addCommand(data)};jpPrinter.setBox = function (x_start, y_start, x_end, y_end, thickness) { //绘制方框data = "BOX " + x_start + "," + y_start + "," + x_end + "," + y_end + "," + thickness + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setErase = function (x_start, y_start, x_width, y_height) { //清除指定区域的数据data = "ERASE " + x_start + "," + y_start + "," + x_width + "," + y_height + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setReverse = function (x_start, y_start, x_width, y_height) { //将指定的区域反相打印data = "REVERSE " + x_start + "," + y_start + "," + x_width + "," + y_height + "\r\n";jpPrinter.addCommand(data)};jpPrinter.setText = function (x, y, font, x_, y_, str) { //打印文字data = "TEXT " + x + "," + y + ",\"" + font + "\"," + 0 + "," + x_ + "," + y_ + "," + "\"" + str + "\"\r\n"jpPrinter.addCommand(data)};jpPrinter.setQR = function (x, y, level, width, mode, content) { //打印二维码data = "QRCODE " + x + "," + y + "," + level + "," + width + "," + mode + "," + 0 + ",\"" + content + "\"\r\n"jpPrinter.addCommand(data)};jpPrinter.setBar = function (x, y, codetype, height, readable, narrow, wide, content) { //打印条形码data = "BARCODE " + x + "," + y + ",\"" + codetype + "\"," + height + "," + readable + "," + 0 + "," + narrow + "," + wide + ",\"" + content + "\"\r\n"jpPrinter.addCommand(data)};jpPrinter.setBitmap = function (x, y, mode, res) {  //添加图片，res为画布参数console.log(res)var width = parseInt((res.width + 7) / 8 * 8 / 8)var height = res.height;var time = 1;var temp = res.data.length - width * 32;var pointList = []console.log(width + "--" + height)data = "BITMAP " + x + "," + y + "," + width + "," + height + "," + mode + ","jpPrinter.addCommand(data)for (var i = 0; i < height; ++i) {console.log(temp)for (var j = 0; j < width; ++j) {for (var k = 0; k < 32; k += 4) {if (res.data[temp] == 0 && res.data[temp + 1] == 0 && res.data[temp + 2] == 0 && res.data[temp + 3] == 0) {pointList.push(1)} else {pointList.push(0)}temp += 4}}time++temp = res.data.length - width * 32 * time}for (var i = 0; i < pointList.length; i += 8) {var p = pointList[i] * 128 + pointList[i + 1] * 64 + pointList[i + 2] * 32 + pointList[i + 3] * 16 + pointList[i + 4] * 8 + pointList[i + 5] * 4 + pointList[i + 6] * 2 + pointList[i + 7]command.push(p)}}jpPrinter.setPagePrint = function () { //打印页面data = "PRINT 1,1\r\n"jpPrinter.addCommand(data)};//获取打印数据jpPrinter.getData = function () {return command;};return jpPrinter;}
};var tsc={jpPrinter
}
export default tsc;

页面调用

<template><view class="container container329843"><button @tap="navigateTo" data-type="searchBluetoothFunction" class="diygw-col-24 btn-clz diygw-btn-default">搜索打印机</button><text class="diygw-col-24 text-clz"> 如果是微信小程序，请前往微信官方公众平台设置隐私协议 </text><u-form-item labelWidth="auto" class="diygw-col-24" v-if="devicesList.length > 0" label="选择打印机" labelPosition="top" prop="deviceId"><diy-checkbox class="diygw-col-24" col="12" mode="radio" valueField="deviceId" labelField="name" v-model="deviceId" :list="devicesList" @change="changeDeviceId"> </diy-checkbox></u-form-item><u-form-item labelAlign="justify" class="diygw-col-24" label="打印份数" prop="printNum"><u-input :focus="printNumFocus" placeholder="请输入打印份数" v-model="printNum" type="number"></u-input></u-form-item><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24"><view class="flex flex-wrap diygw-col-24"><u-form-item labelAlign="justify" class="diygw-col-12" label="标签宽度" prop="width"><u-input :focus="formData.widthFocus" placeholder="请输入宽度" v-model="form.width" type="number"></u-input></u-form-item><u-form-item labelAlign="justify" class="diygw-col-12" label="标签高度" prop="height"><u-input :focus="formData.heightFocus" placeholder="请输入宽度" v-model="form.height" type="number"></u-input></u-form-item></view><view class="flex flex-wrap diygw-col-24"><view class="diygw-col-24" v-for="(contentItem, contentIndex) in form.content" :key="contentIndex"><u-form class="diygw-col-24" :model="form.content[contentIndex]" :errorType="['message', 'toast']" ref="contentRef" :rules="contentItemRules"><view class="flex flex-wrap diygw-col-24 flex1-clz"><u-form-item labelAlign="justify" class="diygw-col-24" label="放大倍数" prop="scale"><u-input :focus="formData.contentItemDatas[contentIndex].scaleFocus" placeholder="请输入宽度" v-model="contentItem.scale" type="number"></u-input></u-form-item><u-form-item labelAlign="justify" class="diygw-col-24" label="打印内容" prop="text"><u-input :focus="formData.contentItemDatas[contentIndex].textFocus" placeholder="请输入宽度" v-model="contentItem.text"></u-input></u-form-item></view></u-form><view class="formcontenttools flex justify-end"><button @tap="upContentItem" :data-index="contentIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-fold"></text></button><button @tap="downContentItem" :data-index="contentIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-unfold"></text></button><button @tap="addContentItem" :data-index="contentIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-add"></text></button><button @tap="delContentItem" :data-index="contentIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-close"></text></button></view></view></view></u-form><button @tap="navigateTo" data-type="printFunction" class="diygw-col-24 prt-clz diygw-btn-default">开始打印</button><view class="clearfix"></view></view>
</template><script>import print from '@/common/print/print.js';export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},devicesList: [],services: [],serviceId: 0,writeCharacter: false,readCharacter: false,notifyCharacter: false,isScanning: false,looptime: 0,currentTime: 1,lastData: 0,oneTimeData: 20,returnResult: 'returnResult',currentPrint: 1,isReceiptSend: false,isLabelSend: true,deviceId: '',printNumFocus: false,printNum: 1,form: {width: 40,height: 70,content: []},formRules: {},contentItem: {scale: 1,text: 'DIYGW可视化蓝牙打印'},contentItemData: {scaleFocus: false,textFocus: false},formData: {widthFocus: false,heightFocus: false,contentItemDatas: []},contentItemRules: {}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);this.initContentData();},methods: {async init() {await this.initResetform();},// 搜索打印机 自定义方法async searchBluetoothFunction(param) {let thiz = this;print.searchBluetooth(this);},// 打印 自定义方法async printFunction(param) {let thiz = this;if (!this.deviceId) {this.navigateTo({type: 'tip',tip: '请选择打印机'});return;}print.printLabel(getApp(), this);},// 连接打印 自定义方法async connectFunction(param) {let thiz = this;print.connectBluetoothSettings(getApp(), this);},changeDeviceId(evt) {this.navigateTo({ type: 'connectFunction' });},//初始化显示子表单数据条数initContentData() {for (let i = 0; i < 1; i++) {this.form.content.push(JSON.parse(JSON.stringify(this.contentItem)));this.formData.contentItemDatas.push(JSON.parse(JSON.stringify(this.contentItemData)));}this.initContentValid();},//子表单验证initContentValid() {this.$nextTick(() => {this.$refs['contentRef']?.forEach((subform) => {subform.setRules(this.contentItemRules);});});},//上移子表单upContentItem(evt) {let { index } = evt.currentTarget.dataset;if (index == 0) {this.navigateTo({type: 'tip',tip: '已经是第一个'});return false;}this.form.content[index] = this.form.content.splice(index - 1, 1, this.form.content[index])[0];this.formData.contentItemDatas[index] = this.formData.contentItemDatas.splice(index - 1, 1, this.formData.contentItemDatas[index])[0];this.initContentValid();},//下移子表单downContentItem(evt) {let { index } = evt.currentTarget.dataset;if (index == this.form.content.length - 1) {this.navigateTo({type: 'tip',tip: '已经是最后一个'});return false;}this.form.content[index] = this.form.content.splice(index + 1, 1, this.form.content[index])[0];this.formData.contentItemDatas[index] = this.formData.contentItemDatas.splice(index + 1, 1, this.formData.contentItemDatas[index])[0];this.initContentValid();},//删除子表单delContentItem(evt) {if (this.form.content.length == 1) {this.showToast('不能小于1个');return;}let { index } = evt.currentTarget.dataset;this.form.content.splice(index, 1);this.formData.contentItemDatas.splice(index, 1);this.initContentValid();},//增加子表单addContentItem() {this.form.content.push(JSON.parse(JSON.stringify(this.contentItem)));this.formData.contentItemDatas.push(JSON.parse(JSON.stringify(this.contentItemData)));this.initContentValid();},//验证所有的子表单checkContentValid() {let flag = true;this.$refs['contentRef']?.forEach((subform) => {subform.validate((valid) => {if (!valid) {flag = false;return false;}});});return flag;},initResetform() {this.initform = JSON.stringify(this.form);//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form//this.form = this.$tools.changeRowToForm(row,this.form)},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.initContentValid();this.$nextTick(async () => {let contentvalid = await this.checkContentValid();let valid = await this.$refs.formRef.validate();if (valid && contentvalid) {//保存数据let param = this.form;let header = {'Content-Type': 'application/json'};let url = '';if (!url) {this.showToast('请先配置表单提交地址', 'none');return false;}let res = await this.$http.post(url, param, header, 'json');if (res.code == 200) {this.showToast(res.msg, 'success');} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});}}};
</script><style lang="scss" scoped>.btn-clz {padding-top: 20rpx;border-bottom-left-radius: 120rpx;color: #fff;padding-left: 20rpx;padding-bottom: 20rpx;border-top-right-radius: 120rpx;margin-right: 30rpx;background-color: #07c160;margin-left: 30rpx;overflow: hidden;width: calc(100% - 30rpx - 30rpx) !important;border-top-left-radius: 120rpx;margin-top: 20rpx;border-bottom-right-radius: 120rpx;margin-bottom: 20rpx;text-align: center;padding-right: 20rpx;}.text-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;text-align: center;}.formcontenttools {position: absolute;z-index: 1;right: 0rpx;top: 0rpx;}.formcontenttools .diygw-btn {padding: 5px;height: auto;flex: inherit;border-radius: 20px;}.flex1-clz {border: 2rpx solid #eee;padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 20rpx;margin-left: 20rpx;overflow: hidden;width: calc(100% - 20rpx - 20rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;padding-right: 10rpx;}.prt-clz {padding-top: 20rpx;border-bottom-left-radius: 120rpx;color: #fff;padding-left: 20rpx;padding-bottom: 20rpx;border-top-right-radius: 120rpx;margin-right: 30rpx;background-color: #07c160;margin-left: 30rpx;overflow: hidden;width: calc(100% - 30rpx - 30rpx) !important;border-top-left-radius: 120rpx;margin-top: 20rpx;border-bottom-right-radius: 120rpx;margin-bottom: 20rpx;text-align: center;padding-right: 20rpx;}.container329843 {}
</style>

查看全文

http://www.mrgr.cn/news/39401.html