uniapp动态表单

使用了uniapp自带扩展组件和uv-ui组件库自行安装下载

<template><view class="assetEdit_container"><view class="type-box"><uv-formlabelPosition="left"labelWidth="140rpx":model="formData"ref="formRef":rules="rulesAll"><view class="content-box"><!-- 白框 --><view class="formbox"><!-- 扩展字段================================================================= --><template v-for="item in ExtrasAll" :key="item.id"><!-- 单行文本 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '0'":required="item.isRequire == '0'"><uv-inputv-model="formData[item.prop]"border="none":placeholder="`${item.placeholder || ''}`"></uv-input></uv-form-item><!-- 多行文本 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '1'":required="item.isRequire == '0'"><uv-textareav-model="formData[item.prop]"count:customStyle="{'min-height': '240rpx',}"autoHeight:maxlength="item.length":placeholder="`${item.placeholder || ''}`"></uv-textarea></uv-form-item><!-- 数字输入框 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '2'":required="item.isRequire == '0'"><uv-number-boxv-model="formData[item.prop]"inputWidth="100":min="0"@change="changeNum(item.prop)"></uv-number-box></uv-form-item><!-- 单选框组 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '3'":required="item.isRequire == '0'"><uv-radio-group v-model="formData[item.prop]"><uv-radio:customStyle="{ margin: '8px' }"v-for="i in item.options.split(',')":key="i":label="i":name="i"></uv-radio></uv-radio-group></uv-form-item><!-- 下拉单选 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '4'"@click="showSelect(item)":required="item.isRequire == '0'"><uv-inputv-model="formData[item.prop]"disableddisabledColor="#ffffff":placeholder="`${item.placeholder || ''}`"border="none"></uv-input><template v-slot:right><uv-icon name="arrow-right"></uv-icon></template></uv-form-item><!-- 日期选择 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '5'"@click="opendatetime(item)":required="item.isRequire == '0'"><uv-inputv-model="formData[item.prop]"border="none"disableddisabledColor="#ffffff"suffixIcon="calendar"suffixIconStyle="color: #909399"></uv-input></uv-form-item><!-- 文件 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '6'":required="item.isRequire == '0'"><uni-section title="选择任意文件" type="line"><view class="example-body"><uni-file-pickerlimit="5"file-mediatype="all"@select="(e) => uploadFile(e, item)":value="formatFile(formData[item.prop])"@delete="({ index }) => deleteFile(index, item)"></uni-file-picker></view></uni-section></uv-form-item><!-- 图片 --><uv-form-item:label="item.label":prop="item.prop"borderBottomv-if="item.formType == '7'":required="item.isRequire == '0'"><uni-section title="只选择图片" type="line"><view class="example-body"><uni-file-pickerlimit="9"title=""@select="(e) => uploadFilePic(e, item)":value="formatPic(formData[item.prop])"@delete="({ index }) => deleteFilePic(index, item)"></uni-file-picker></view></uni-section></uv-form-item></template></view></view></uv-form></view><view class="btns"><view class="btn"><uv-button type="primary" text="提交" shape="circle"></uv-button></view></view><!-- 动态选择框 --><uv-pickerref="selectRef":keyName="selectLabel":columns="columns"@confirm="confirmSelect"@change="changeSelect"></uv-picker><!-- 动态日期选择 --><uv-datetime-pickerref="datetimeRef"v-model="datetimevalue"mode="date":formatter="formatter"@confirm="confirmDatetime"></uv-datetime-picker></view>
</template><script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted, computed, getCurrentInstance } from "vue";
import { getExtras, getFieldExtras } from "../../api/common";
import { getToken } from "@/utils/auth.js";
import dayjs from "dayjs";
import config from "@/config/index.js";
const { proxy } = getCurrentInstance();
// 主要是获取不同的动态字段,并且根据动态字段创建校验信息
onMounted(async () => {// 获取全局动态字段Extras.value = (await getExtras()).data;// 获取动态校验内容getRule();
});
onLoad(async ({ id }) => {// 根据分类id获取动态字段 FieldExtrasFieldExtras.value = (await getFieldExtras(formData.value.typeId)).data;// 获取动态校验内容getRule();
});// 静态字段校验规则
let rules = ref({typeName: {type: "string",required: true,message: "提示信息",trigger: ["change"],},
});
// 动态校验数据
let FieldRules = ref({});
// 所有的校验:静态+动态
let rulesAll = computed(() => {return { ...rules.value, ...FieldRules.value };
});
// 通用的动态字段
let Extras = ref([]);
// 指定的动态字段
let FieldExtras = ref([]);
// 所有动态字段:通用的动态字段+指定的动态字段
let ExtrasAll = computed(() => {return Extras.value.concat(FieldExtras.value); //动态字段拼接
});
// 动态校验
// 根据扩展字段的属性配置获取校验规则
let getRule = () => {FieldRules.value = {};ExtrasAll.value.forEach((item) => {if (item.formType == "2" || item.formType == "3" || item.formType == "4") {FieldRules.value[item.prop] = {type: item.formType == "2" ? "number" : "string",required: item.isRequire == "0",message: `${item.label}${proxy.$t("AssetList.Cannotbeempty")}`,trigger: ["change"],};} else {FieldRules.value[item.prop] = {type: "string",required: item.isRequire == "0",message: `${item.label}${proxy.$t("AssetList.Cannotbeempty")}`,trigger: ["blur"],};}});
};
// ======================================================================
// 3、动态字段下拉框自定义配置
let columns = ref([]);
// 选择弹窗
let selectRef = ref(null);
// 定义一个和选择弹窗绑定的中间件
let selectProp = ref("");
// 点击状态选择输入框弹出选项
let showSelect = (item) => {selectRef.value.open(); //打开弹窗columns.value = [item.options.split(",")]; //下拉框数据selectProp.value = item.prop; //绑定键名
};
let confirmSelect = (e) => {console.log(e.value[0], 244);// 确认选择之后的赋值操作formData.value[selectProp.value] = e.value[0];formRef.value?.validateField(selectProp.value);
};
// 数字改变
let changeNum = (prop) => {formRef.value?.validateField(prop);
};
// 4、动态日期下拉框自定义配置
let datetimeRef = ref(null);
let datetimeProp = ref("");
let datetimevalue = ref(Number(new Date())); //当前打开选择器的时间
let opendatetime = (item) => {datetimeRef.value.open(); //打开弹窗datetimeProp.value = item.prop; //绑定键名console.log(item, 267);if (formData.value[item.prop]) {// 如果时间存在则回显时间,如果没值则选择器定位到当前时间datetimevalue.value = new Date(formData.value[item.prop]);}
};
let confirmDatetime = (e) => {formData.value[datetimeProp.value] = dayjs(e.value).format("YYYY-MM-DD");formRef.value?.validateField(datetimeProp.value);
};
let formatter = (type, value) => {if (type === "year") {return `${value}${proxy.$t("AssetList.year")}`;}if (type === "month") {return `${value}${proxy.$t("AssetList.month")}`;}if (type === "day") {return `${value}${proxy.$t("AssetList.day")}`;}return value;
};
// 5、动态文件上传
let formatFile = (UrlString) => {if (UrlString) {return UrlString.split(",").map((item) => {return {url:config.baseUrl +item.split("/").slice(0, item.split("/").length - 1).join("/"),extname: item.split(".").pop(),name: item.split("/").pop(),};});} else {return [];}
};
let uploadFile = (e, item) => {const file = e;if (file.tempFilePaths.length === 0) {uni.showToast({title: proxy.$t("AssetList.Nofileselected"),icon: "none",});return;}const uploadTask = uni.uploadFile({url: config.baseUrl + "/admin/sys-file/upload",filePath: file.tempFilePaths[0],name: "file", // 这里根据后端API的字段来定义header: {Authorization: "Bearer " + getToken(),"TENANT-ID": uni.getStorageSync("tenantId"),},success: (uploadRes) => {// 一个上传返回的字段,逗号拼接所有文件地址if (formData.value[item.prop]) {formData.value[item.prop] += "," + JSON.parse(uploadRes.data).data.url;} else {formData.value[item.prop] = JSON.parse(uploadRes.data).data.url;}formRef.value?.validateField(item.prop);uni.showToast({title: proxy.$t("AssetList.UploadSuccessfully"),icon: "success",});},fail: (err) => {uni.showToast({title: proxy.$t("AssetList.Uploadfailed"),icon: "none",});},});// 如果需要监听上传进度可以使用 uploadTask.onProgressUpdate// uploadTask.onProgressUpdate((res) => {//   console.log('上传进度', res.progress);//   console.log('已经上传的数据长度', res.totalBytesSent);//   console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);// });
};
let deleteFile = (index, item) => {// 删除第index项if (formData.value[item.prop].split(",").length > 1) {formData.value[item.prop] = formData.value[item.prop].split(",");formData.value[item.prop].splice(index, 1);formData.value[item.prop] = formData.value[item.prop].join(",");} else {formData.value[item.prop] = "";}
};
// 动态上传图片
let formatPic = (UrlString) => {if (UrlString) {return UrlString.split(",").map((item) => {return {url:config.baseUrl +item.split("/").slice(0, item.split("/").length - 1).join("/"),extname: item.split(".").pop(),name: item.split("/").pop(),};});} else {return [];}
};
let uploadFilePic = (e, item) => {const file = e;if (file.tempFilePaths.length === 0) {uni.showToast({title: proxy.$t("AssetList.Nofileselected"),icon: "none",});return;}z;const uploadTask = uni.uploadFile({url: config.baseUrl + "/admin/sys-file/upload",filePath: file.tempFilePaths[0],name: "file", // 这里根据后端API的字段来定义header: {Authorization: "Bearer " + getToken(),"TENANT-ID": uni.getStorageSync("tenantId"),},success: (uploadRes) => {console.log(formData.value[item.prop], 521);// 一个上传返回的字段,逗号拼接所有文件地址if (formData.value[item.prop]) {formData.value[item.prop] += "," + JSON.parse(uploadRes.data).data.url;} else {formData.value[item.prop] = JSON.parse(uploadRes.data).data.url;}formRef.value?.validateField(item.prop);uni.showToast({title: proxy.$t("AssetList.UploadSuccessfully"),icon: "success",});},fail: (err) => {uni.showToast({title: proxy.$t("AssetList.Uploadfailed"),icon: "none",});},});// 如果需要监听上传进度可以使用 uploadTask.onProgressUpdate// uploadTask.onProgressUpdate((res) => {//   console.log('上传进度', res.progress);//   console.log('已经上传的数据长度', res.totalBytesSent);//   console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);// });
};
let deleteFilePic = (index, item) => {// 删除第index项console.log(formData.value[item.prop], 542);if (formData.value[item.prop].split(",").length > 1) {formData.value[item.prop] = formData.value[item.prop].split(",");formData.value[item.prop].splice(index, 1);formData.value[item.prop] = formData.value[item.prop].join(",");} else {formData.value[item.prop] = "";}
};
</script><style lang="scss" scoped>
.assetEdit_container {height: 100vh;width: 100vw;background-color: #f2f2fa;display: flex;flex-direction: column;.type-box {flex: 1;width: 100vw;overflow: auto;padding: 24rpx;.title {font-weight: bold;font-size: 28rpx;color: #0a1629;line-height: 42rpx;}.content-box {background: #ffffff;padding: 10rpx 24rpx;box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);border-radius: 20rpx;margin: 38rpx 0;}}.btns {height: 146rpx;width: 100%;display: flex;background-color: #ffffff;justify-content: space-around;align-items: center;.btn {width: 300rpx;height: 70rpx;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx:ssl

目录 部署ssl前提 nginx部署ssl证书 部署ssl部署建议 部署ssl前提 网站有域名根据域名申请到ssl证书&#xff0c;并下载证书部署到nginx中 部署了ssl证书后&#xff0c;访问的流量是加密的。 nginx部署ssl证书 #80端口跳转到443 server {listen 80;return 302 https://1…

USB 声卡全解析:提升音频体验的得力助手

在当今数字化的时代&#xff0c;音频领域的追求愈发多元。无论是热衷聆听高品质音乐的爱好者&#xff0c;还是在专业音频工作中精雕细琢的人士&#xff0c;亦或是在游戏世界里渴望极致音效沉浸的玩家&#xff0c;都始终在寻觅能让音频体验更上一层楼的妙法。而 USB 声卡&#x…

[TPAMI 2024]Vision-Language Models for Vision Tasks: A Survey

论文网址&#xff1a;Vision-Language Models for Vision Tasks: A Survey | IEEE Journals & Magazine | IEEE Xplore 论文Github页面&#xff1a;GitHub - jingyi0000/VLM_survey: Collection of AWESOME vision-language models for vision tasks 英文是纯手打的&…

深度学习模型:门控循环单元(GRU)详解

本文深入探讨了门控循环单元&#xff08;GRU&#xff09;&#xff0c;它是一种简化版的长短期记忆网络&#xff08;LSTM&#xff09;&#xff0c;在处理序列数据方面表现出色。文章详细介绍了 GRU 的基本原理、与 LSTM 的对比、在不同领域的应用以及相关的代码实现&#xff0c;…

HCIA笔记6--路由基础与静态路由:浮动路由、缺省路由、迭代查找

文章目录 0. 概念1.路由器工作原理2. 跨网访问流程3. 静态路由配置4. 静态路由的应用场景4.1 路由备份4.2 浮动路由4.3 缺省路由 5. 迭代路由6 问题6.1 为什么路由表中有的下一跳的地址有接口&#xff1f;6.2 个人电脑的网关本质是什么&#xff1f; 0. 概念 自治系统&#xff…

Spark常问面试题---项目总结

一、数据清洗&#xff0c;你都清洗什么&#xff1f;或者说 ETL 你是怎么做的&#xff1f; 我在这个项目主要清洗的式日志数据&#xff0c;日志数据传过来的json格式 去除掉无用的字段&#xff0c;过滤掉json格式不正确的脏数据 过滤清洗掉日志中缺少关键字段的数据&#xff…

【北京迅为】iTOP-4412全能版使用手册-第三十二章 网络通信-TCP套字节

iTOP-4412全能版采用四核Cortex-A9&#xff0c;主频为1.4GHz-1.6GHz&#xff0c;配备S5M8767 电源管理&#xff0c;集成USB HUB,选用高品质板对板连接器稳定可靠&#xff0c;大厂生产&#xff0c;做工精良。接口一应俱全&#xff0c;开发更简单,搭载全网通4G、支持WIFI、蓝牙、…

【乐企文件生成工程】搭建docker环境,使用docker部署工程

1、自行下载docker 2、自行下载docker-compose 3、编写Dockerfile文件 # 使用官方的 OpenJDK 8 镜像 FROM openjdk:8-jdk-alpine# 设置工作目录 WORKDIR ./app# 复制 JAR 文件到容器 COPY ../lq-invoice/target/lq-invoice.jar app.jar # 暴露应用程序监听的端口 EXPOSE 1001…

介绍下你们电商搜索的整体Java技术架构?

大家好&#xff0c;我是锋哥。今天分享关于【介绍下你们电商搜索的整体Java技术架构&#xff1f;】面试题。希望对大家有帮助&#xff1b; 介绍下你们电商搜索的整体Java技术架构&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在电商平台的搜索系统中…

【趣味】斗破苍穹修炼文字游戏HTML,CSS,JS

目录 图片展示 游戏功能 扩展功能 完整代码 实现一个简单的斗破苍穹修炼文字游戏&#xff0c;你可以使用HTML、CSS和JavaScript结合来构建游戏的界面和逻辑。以下是一个简化版的游戏框架示例&#xff0c;其中包含玩家修炼的过程、增加修炼进度和显示经验值的基本功能。 图片…

oracle to postgresql使用Oracle Golden Gate同步数据

参考 https://www.ktexperts.com/replication-to-gcp-postgresql-using-oracle-goldengate/ https://www.ktexperts.com/how-to-change-remote-trail-file-location-in-oracle-goldengate/

永磁同步电机负载估计算法--滑模扰动观测器

一、原理介绍 为了进一步提高永磁同步电机的抗干扰性能&#xff0c;采用SMDO在线估计负载扰动&#xff0c;然后将估计的负载扰动作为前馈信号补偿速度控制器的输出 根据永磁同步电机的运动方程&#xff0c;可以建立滑模观测器的模型如下&#xff1a; 式中l2为观测器的反馈增益…

BiGRU:双向门控循环单元在序列处理中的深度探索

一、引言 在当今的人工智能领域&#xff0c;序列数据的处理是一个极为重要的任务&#xff0c;涵盖了自然语言处理、语音识别、时间序列分析等多个关键领域。循环神经网络&#xff08;RNN&#xff09;及其衍生结构在处理序列数据方面发挥了重要作用。然而&#xff0c;传统的 RN…

redis签到命令练习

使用redis的bitmap做签到功能&#xff0c;下面是使用到的一些命令&#xff0c;签到设置偏移量为1&#xff0c;偏移量从0开始 新增一个bitmap类型的key&#xff0c;插入数据 //往bitmap中新增数据&#xff0c;偏移量从0开始 SETBIT bitmap:test 0 1 SETBIT bitmap:test 3 1 SE…

JS基础知识05-对象、Ajax、JSON

目录 一、对象 1.1.对象&#xff08;Object&#xff09; 1.创建对象 对象的常用方法 1.2.Math对象 1.数学常数 2.数学函数 3.随机数生成 4.对数方法 1.3.Date对象 创建Date对象 获取日期和时间的方法 设置日期和时间的方法 日期的格式化方法 二、Ajax 1.创建XM…

云服务器重装系统后 一些报错与解决[ vscode / ssh / 子用户]

碰见的三个问题&#xff1a; 1.vscode连接失败 2.登录信息配置 3.新建子用户的一些设置 思考&#xff1a;遇见问题&#xff0c;第一反应 应该如何解决 目录 1. 错误 解决方法 原因 步骤 1&#xff1a;找到known_hosts文件并编辑 步骤 2&#xff1a;通过VSCode终端输入…

QT实战-qt各种菜单样式实现

本文主要介绍了qt普通菜单样式、带选中样式、带子菜单样式、超过一屏幕菜单样式、自定义带有滚动条的菜单样式&#xff0c; 先上图如下&#xff1a; 1.普通菜单样式 代码&#xff1a; m_pmenu new QMenu(this);m_pmenu->setObjectName("quoteListMenu"); qss文…

基于BM1684的AI边缘服务器-模型转换,大模型一体机

介绍 我们属于SoC模式&#xff0c;即我们在x86主机上基于tpu-nntc和libsophon完成模型的编译量化与程序的交叉编译&#xff0c;部署时将编译好的程序拷贝至SoC平台&#xff08;1684开发板/SE微服务器/SM模组&#xff09;中执行。 注&#xff1a;以下都是在Ubuntu20.04系统上操…

Redis+Caffeine 多级缓存数据一致性解决方案

RedisCaffeine 多级缓存数据一致性解决方案 背景 之前写过一篇文章RedisCaffeine 实现两级缓存实战&#xff0c;文章提到了两级缓存RedisCaffeine可以解决缓存雪等问题也可以提高接口的性能&#xff0c;但是可能会出现缓存一致性问题。如果数据频繁的变更&#xff0c;可能会导…

计算机网络——不同版本的 HTTP 协议

介绍 HTTP&#xff0c;即超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09;&#xff0c;是应用层的一个简单的请求-响应协议&#xff0c;它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。本文将介绍 HTTP 协议各个版本。 HTTP/1.0 HTTP/1…