b2894lxlx/jjx-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1107

Browse Source
This commit is contained in:
weicw
2023-11-07 17:15:33 +08:00
commit fe37e2e1df
418 changed files with 53012 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_template/components/form/form-array-object.vue
+274
View File
@@ -0,0 +1,274 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="子表单"
></vk-data-page-header>
<view class="page-body" style="max-width: 1600px;margin: 0 auto;">
<vk-data-form
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
@cancel="onCancel"
@success="onFormSuccess"
></vk-data-form>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
{ key:"", title:"数组对象", type:"bar-title" },
{
key:"array1", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
switch:true,
text1:""
},
rightBtns:['copy','delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"text1", title:"昵称", type:"text",
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ["change","blur"] }
]
},
{
key:"number1", title:"数字", type:"number",
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"select1", title:"select类型", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
],
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
],
onChange:function(val, row, column, index){
// 此处演示根据选择的值动态改变text1的值,注意,此处text1必须要有默认值,即使是空字符串也行.
row.text1 = "昵称" + val;
}
},
{ key:"switch", title:"switch类型", type:"switch", width:160 },
]
},
{ key:"", title:"递增递减", type:"bar-title" },
{
key:"array2", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
switch:true,
text1:""
},
rightBtns:['copy','delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"number1", title:"递增[>]", type:"number", placeholder:"输入数字",
incMode: 1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"number2", title:"递增[>=]", type:"number", placeholder:"输入数字",
incMode: 2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"number3", title:"递减[<]", type:"number", placeholder:"输入数字",
incMode: -1, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"number4", title:"递减[<=]", type:"number", placeholder:"输入数字",
incMode: -2, // 1必须递增[>] 2 必须递增[>=] -1 必须递减[<] -2 必须递减[<=]
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
]
},
{ key:"", title:"数组嵌套数组", type:"bar-title" },
{
key:"array3", title:"数组<对象>类型", type:"array<object>", itemWidth:260,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
switch:true,
array:[]
},
rightBtns:['copy','delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"text1", title:"昵称", type:"text",
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"number1", title:"数字", type:"number",
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{ key:"switch", title:"switch类型", type:"switch", width:160 },
{
key:"array", title:"数组<对象>类型", type:"array<object>", buttonText: "设置", dialog:true, width:140, dialogWidth:1000,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
},
rightBtns:['delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"text1", title:"昵称", type:"text", minWidth:160,
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"number1", title:"数字", type:"number", minWidth:160,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
}
]
},
]
},
{ key:"", title:"下方为纯字符串或纯数字类型数组", type:"bar-title" },
{ key:"stringArray", title:"数组<字符串>类型", type:"array<string>", placeholder:"请输入字符串", width:400,
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"numberArray", title:"数组<数字>类型", type:"array<number>", placeholder:"请输入数字", width:400,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
],
// 表单验证规则
rules: {
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
// 表单是否在请求中
loading:false
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
onCancel(){
console.log("关闭");
vk.menuTabs.closeCurrent();
},
onFormSuccess(){
console.log("表单提交成功");
}
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-basic.vue
+157
View File
@@ -0,0 +1,157 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="基础表单"
></vk-data-page-header>
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
<vk-data-form
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
@cancel="onCancel"
@success="onFormSuccess"
></vk-data-form>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
radio: 1,
checkbox : [1,2]
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
{
key: "role", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择",
action:"template/db_api/sys/getList",
multiple:true,
columns:[
{ key:"_id", title:"id", type:"text", width:260, idKey:true },
{ key:"name", title:"昵称", type:"text", width:260, nameKey:true },
{ key:"money", title:"金额", type:"money", width:100, sortable:"custom", summaryKey:true, summaryUnit:"元" }, // summaryKey开启该字段为统计字段， summaryUnit：单位
],
queryColumns:[
{ key: "name", title: "昵称", type: "text", width: 150, mode: "%%" },
{ key: "_id", title: "标识", type: "text", width: 150, mode: "%%" }
]
},
{ key: "text", title:"text类型字段", type:"text" },
{ key: "number", title:"number类型字段", type:"number" },
{ key: "radio", title:"radio类型字段", type:"radio" ,
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox",
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "select", title:"select类型字段", type:"select",
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "textarea", title:"textarea类型字段", type:"textarea",
autosize:{ minRows: 4, maxRows: 10 }, showWordLimit:true,
},
{ key: "switch", title:"switch类型字段", type:"switch" },
],
// 表单验证规则
rules: {
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
// 表单是否在请求中
loading:false
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
onCancel(){
console.log("关闭");
vk.menuTabs.closeCurrent();
},
onFormSuccess(){
console.log("表单提交成功");
}
},
// 过滤器
filters:{
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-cert.vue
+88
View File
@@ -0,0 +1,88 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="证书转换"
subTitle="快速将证书内容变成1行字符串"
></vk-data-page-header>
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
<el-input v-model="form1.content" type="textarea" :rows="20" placeholder="请将证书内容粘贴到此处"></el-input>
<view style="margin-top: 20px;">
<el-button type="primary" @click="copy">复制证书内容（一行字符串形式）</el-button>
</view>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1">
<view style="font-size: 14px;">证书内容</view>
<pre>
{{ form1 }}
</pre>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
content: "",
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
copy(){
let str = JSON.stringify(this.form1);
let content = str.substring(12,str.length-2);
uni.setClipboardData({
data: content,
success: function () {
vk.toast("复制成功");
}
});
}
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-dialog-2.vue
+182
View File
@@ -0,0 +1,182 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="复用同一个表单实现添加和修改"
></vk-data-page-header>
<view class="page-body">
<view style="padding: 15px;color:#303133;">
当两个表单内的字段有大部分相似时，同一个表单组件可以复用。<br/>
通过控制 formType 可以切换表单的类型<br/>
同时在 columns 中添加属性 show:["add"] 代表该字段只有 formType 为 "add" 时才显示
</view>
<el-button @click="showForm('add')">弹出添加表单</el-button>
<el-button @click="showForm('update')">弹出修改表单</el-button>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
</view>
<!-- 弹窗开始 -->
<vk-data-dialog
v-model="form1.props.show"
:title="form1.props.title"
width="600px"
mode="form"
>
<vk-data-form
ref="form1"
v-model="form1.data"
:action="form1.props.action"
:columns='form1.props.columns'
:rules="form1.props.rules"
:form-type="form1.props.formType"
:loading.sync="form1.props.loading"
:auto-close="true"
:submit-text='form1.props.submitText'
label-width="140px"
@success="form1.props.show = false;"
@cancel="form1.props.show = false"
></vk-data-form>
</vk-data-dialog>
<!-- 弹窗结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
{ key: "text", title:"text类型字段", type:"text", show:["add"] },
{ key: "number", title:"number类型字段", type:"number", show:["add"]},
{ key: "radio", title:"radio类型字段", type:"radio" , show:["add"],
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox", show:["update"],
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "textarea", title:"textarea类型字段", type:"textarea",
autosize:{ minRows: 4, maxRows: 10 }, maxlength:200, showWordLimit:true,
},
{ key: "switch", title:"switch类型字段", type:"switch" },
],
// 表单验证规则
rules: {
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
// 表单是否在请求中
loading:false,
// 表单标题
title: '',
submitText:''
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
// 重置表单
resetForm() {
if (that.$refs.form1) that.$refs.form1.resetForm();
},
// 显示表单
showForm(type){
let { form1 } = that;
// 先重置下表单
that.resetForm();
if(type === 'add'){
form1.props.title = '添加表单';
form1.props.submitText = '添加';
// 此处添加的action和修改的action可以不一致
form1.props.action = "template/test/sys/test";
}else{
form1.props.title = '修改表单';
form1.props.submitText = '修改';
// 此处添加的action和修改的action可以不一致
form1.props.action = "template/test/sys/test";
// 如果是修改 可以在此赋值
form1.data = {
checkbox: [1],
textarea: '1111',
switch: true
};
}
form1.props.formType = type;
form1.props.show = true;
}
},
// 过滤器
filters:{
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-dialog.vue
+142
View File
@@ -0,0 +1,142 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header title="Form 表单" subTitle="弹窗表单"></vk-data-page-header>
<view class="page-body">
<el-button @click="form1.props.show = true">弹出表单</el-button>
<el-button @click="resetForm">重置表单</el-button>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
</view>
<!-- 弹窗开始 -->
<vk-data-dialog
v-model="form1.props.show"
title="表单标题"
width="950px"
mode="form"
>
<vk-data-form
ref="form1"
v-model="form1.data"
:action="form1.props.action"
:columns="form1.props.columns"
:rules="form1.props.rules"
:form-type="form1.props.formType"
:loading.sync="form1.props.loading"
:auto-close="true"
label-width="140px"
@success="onFormSuccess"
></vk-data-form>
</vk-data-dialog>
<!-- 弹窗结束 -->
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
radio: 1,
checkbox : [1,2]
},
// 表单属性
props: {
// 表单请求地址
action: "template/test/sys/test",
// 表单字段显示规则
columns: [
{ key: "text", title: "text类型字段", type: "text" },
{ key: "number", title: "number类型字段", type: "number" },
{ key: "radio", title: "radio类型字段", type: "radio",
data: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{ key: "checkbox", title: "checkbox类型字段", type: "checkbox",
data: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{ key: "textarea", title: "textarea类型字段", type: "textarea",
autosize: { minRows: 4, maxRows: 10 },
maxlength: 200,
showWordLimit: true
},
{ key: "switch", title: "switch类型字段", type: "switch" },
{ key:"editor", title:"富文本类型", type:"editor", width:"750px" },
],
// 表单验证规则
rules: {
text: [
{ required: true, message: "text不能为空", trigger: "change" },
]
},
// add 代表添加 update 代表修改
formType: "",
// 表单是否在请求中
loading: false,
// 是否显示表单1 的弹窗
show: false
}
},
// 表单相关结束-----------------------------------------------------------
};
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady() {},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {},
// 函数
methods: {
// 页面数据初始化函数
init(options) {},
// 表单提交成功时的回调
onFormSuccess() {
// that.form1.props.show = false;
},
// 重置表单
resetForm() {
let that = this;
if (that.$refs.form1) that.$refs.form1.resetForm();
}
},
// 过滤器
filters: {
},
// 计算属性
computed: {
}
};
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-inline.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="行内表单"
></vk-data-page-header>
<view class="page-body" style="max-width: 1200px;margin: 0 auto;">
<vk-data-form
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
:inline="true"
:columnsNumber="2"
@cancel="onCancel"
@success="onFormSuccess"
></vk-data-form>
</view>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
radio: 1,
checkbox : [1,2]
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
{ key: "text", title:"text类型字段", type:"text" },
{ key: "user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号",
action:"admin/select/kh/user"
},
{ key: "money", title:"money类型字段", type:"money" },
{ key: "select", title:"select类型字段", type:"select",
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "number", title:"number类型字段", type:"number" },
{ key: "switch", title:"switch类型字段", type:"switch" },
{ key: "radio", title:"radio类型字段", type:"radio" ,
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "checkbox", title:"checkbox类型字段", type:"checkbox",
data:[
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" }
]
},
{ key: "textarea", title:"textarea类型字段", type:"textarea",
autosize:{ minRows: 6, maxRows: 10 }, maxlength:200, showWordLimit:true,
width:820
},
],
// 表单验证规则
rules: {
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
// 表单是否在请求中
loading:false
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
onCancel(){
console.log("关闭");
vk.menuTabs.closeCurrent();
},
onFormSuccess(){
console.log("表单提交成功");
}
},
// 过滤器
filters:{
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-pay-cert.vue
+197
View File
@@ -0,0 +1,197 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="证书转换"
subTitle="快速将证书内容变成1行字符串"
></vk-data-page-header>
<view class="page-body" style="width: 100%">
<view style="color: red;font-size: 12px;">全程无网络请求（打开此页面后无网状态也能执行），直接在前端解析证书，没有证书泄露风险</view>
<el-table :data="certList" style="width: 100%">
<el-table-column prop="tips" label="说明" minWidth="300"> </el-table-column>
<el-table-column prop="name" label="选择证书" minWidth="300">
<template slot-scope="scope">
<text style="margin-right: 20px;">{{ scope.row.name }}</text>
<el-button type="success" @click="upload(scope.row)" size="mini" plain> {{ scope.row.content ? '已' : ''}}选择 {{ scope.row.file }} </el-button>
<text style="margin-left: 20px;color: #c2e7b0;" v-if="scope.row.content && scope.row.file === scope.row.name"> √ </text>
<text style="margin-left: 20px;color: red;" v-if="scope.row.content && scope.row.file !== scope.row.name"> × </text>
</template>
</el-table-column>
<el-table-column prop="key4" label="选择后可复制" minWidth="200" >
<template slot-scope="scope">
<!-- <el-button type="success" @click="copy(scope.row.name)" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 复制 </el-button> -->
<el-button type="success" size="mini" plain v-if="scope.row.content && scope.row.file === scope.row.name"> 请复制下方证书内容 </el-button>
</template>
</el-table-column>
</el-table>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1">
<view style="font-size: 14px;">证书内容</view>
<pre>
{{ form1 }}
</pre>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
certList: [
{
name: 'apiclient_cert.p12',
tips: '微信支付v2需要用到的证书（wxpay.pfx）的值',
file: '',
content: '',
key: 'wxpay.pfx'
},
{
name: 'apiclient_cert.pem',
tips: '微信支付v3需要用到的证书（wxpay.appCertContent）的值',
file: '',
content: '',
key: 'wxpay.appCertContent'
},
{
name: 'apiclient_key.pem',
tips: '微信支付v3需要用到的证书（wxpay.appPrivateKeyContent）的值',
file: '',
content: '',
key: 'wxpay.appPrivateKeyContent'
},
{
name: 'alipayCertPublicKey_RSA2.crt',
tips: '支付宝支付 - 支付宝公钥证书（alipay.alipayPublicCertContent）的值',
file: '',
content: '',
key: 'alipay.alipayPublicCertContent'
},
{
name: 'alipayRootCert.crt',
tips: '支付宝支付 - 支付宝根证书（alipay.alipayRootCertContent）的值',
file: '',
content: '',
key: 'alipay.alipayRootCertContent'
},
{
name: 'appCertPublicKey.crt',
tips: '支付宝支付 - 应用公钥证书（alipay.appCertContent）的值',
file: '',
content: '',
key: 'alipay.appCertContent'
}
],
// 表单相关开始-----------------------------------------------------------
form1: {
wxpay: {
pfx: "",
appCertContent: "",
appPrivateKeyContent: "",
},
alipay: {
alipayPublicCertContent: "",
alipayRootCertContent: "",
appCertContent: ""
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
upload(item={}){
let { name, key } = item;
let index = this.certList.findIndex((certItem) => {
return name === certItem.name;
});
let suffix = name.substring(name.lastIndexOf(".") + 1);
uni.chooseFile({
count: 1, //默认100
extension: [suffix],
success: (res) => {
let tempFile = res.tempFiles[0];
if (name === "apiclient_cert.p12") {
vk.pubfn.fileToBase64({
file: tempFile,
success: (base64) => {
let base64Index = base64.indexOf("base64,");
base64 = base64.substring(base64Index+"base64,".length);
this.form1.wxpay.pfx = base64;
this.certList[index].content = base64;
this.certList[index].file = tempFile.name;
}
});
} else {
const reader = new FileReader();
reader.onload = () => {
let result = reader.result;
result = result.replace(/\r\n/g, "\n");
vk.pubfn.setData(this.form1, key, result);
this.certList[index].content = result;
};
reader.readAsText(res.tempFiles[0]);
if (tempFile.name.indexOf("appCertPublicKey_") == 0) {
tempFile.name = "appCertPublicKey.crt";
}
this.certList[index].file = tempFile.name;
}
}
});
},
copy(name){
let contentItem = this.certList.find((item) => {
return name === item.name;
});
let content = contentItem.content;
uni.setClipboardData({
data: content,
success: () => {
vk.toast("复制成功");
}
});
}
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>
pages_template/components/form/form-pro.vue
+543
View File
@@ -0,0 +1,543 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="高级表单"
></vk-data-page-header>
<view class="page-body">
<!-- 页面主体内容开始 -->
<vk-data-form
ref="form1"
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
input-width="400px"
@success="onFormSuccess"
>
<!-- v-slot:editor 中的 editor 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
<!-- <template v-slot:editor="{ form, keyName }">
<vk-data-input-editor v-model="form[keyName]" placeholder="开始输入" width="750px"></vk-data-input-editor>
</template> -->
</vk-data-form>
<!-- 页面主体内容结束 -->
</view>
<view class="page-footer">
<!-- 页面底部内容开始 -->
<el-button :loading="form1.props.loading" type="primary" class="footer-update-btn" @click="submitForm">确定</el-button>
<el-button plain class="footer-back-btn" @click="onCancel" style="margin-left: 30px;">返回</el-button>
<!-- 页面底部内容开始 -->
</view>
<view class="tips" style="position: fixed;right: 0px;top:100px;bottom:15px; overflow: auto;max-width: 400px;">
<view class="json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
radio:1,
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
// 基础字段类型
{ key:"", title:"基础字段", type:"bar-title" },
{ key:"text", title:"单行文本", type:"text" },
{
key:"textarea", title:"多行文本", type:"textarea",
autosize:{ minRows:4, maxRows:10 },
maxlength:200,
showWordLimit:true,
},
{ key:"money", title:"money类型", type:"money", tips:"100 = 1元。页面显示的是1，实际的值是100，请看右上角表单数据的值。" },
{ key:"number", title:"number类型", type:"number", precision:2, tips:"number类型值会转为数字，可以指定小数位数" },
{ key:"number2", title:"计数器类型", type:"number", controls:true, precision:0, min:5, max:100, placeholder:"请输入数字" },
{ key:"percentage", title:"百分比类型", type:"percentage", precision:0, tips:"页面显示的是1，实际的值是0.01，请看右上角表单数据的值。" },
{ key:"discount", title:"折扣类型", type:"discount", tips:"页面显示的是1，实际的值是0.1，请看右上角表单数据的值。" },
{ key:"text2", title:"文本2", type:"text",prepend:"前置文字",append:"后置文字",prefixIcon:"el-icon-user" },
// 选择型字段
{ key:"", title:"选择型字段", type:"bar-title" },
{
key:"radio1", title:"radio类型1", type:"radio",
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"checkbox1", title:"checkbox类型1", type:"checkbox",
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"radio2", title:"radio类型2", type:"radio",
border:true,
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"checkbox2", title:"checkbox类型2", type:"checkbox",
border:true,
itemWidth:80,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"radio3", title:"radio类型3", type:"radio" ,
optionType:'button',
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"checkbox3", title:"checkbox类型3", type:"checkbox" ,
optionType:'button',
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"select1", title:"select类型1", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
key:"select2", title:"select类型2", type:"select",
multiple:true,
multipleLimit:2,
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" },
{ value:3, label:"选项3" },
{ value:4, label:"选项4" }
]
},
{
key:"select3", title:"select类型3", type:"select",
group:true,
data:[
{
label: "分组1",
children:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
]
},
{
label: "分组2",
children:[
{ value:3, label:"选项3" },
{ value:4, label:"选项4" }
]
}
]
},
{ key:"province", title:"province类型", type:"province" },
{ key:"address", title:"address类型", type:"address" },
{ key:"cascader1", title:"本地数据级联", type:"cascader",
data:[
{
value:1,
label:"数学",
children:[
{
value:11,
label:"奥数",
},
{
value:12,
label:"微积分",
}
]
},
{
value:2,
label:"语文",
children:[
{
value:21,
label:"文言文",
},
{
value:22,
label:"古诗",
}
]
},
]
},
{ key:"cascader2", title:"云端数据级联", type:"cascader",
action:"admin/system/permission/sys/getAll",
props:{
list:"rows",
value:"permission_id",
label:"label",
children:"children",
multiple:true
}
},
{
key:"cascader3", title:"云端数据级联懒加载", type:"cascader",
action:"admin/system/menu/sys/getCascader",
props:{
list:"rows",
value:"menu_id",
label:"label",
children:"children",
lazy:true,
}
},
{
key:"tree1", title:"树形选择(单选)", type:"tree-select", placeholder:"请选择学科",
data:[
{
value:1,
label:"数学",
children:[
{ value:11,label:"奥数" },
{ value:12,label:"微积分" }
]
},
{
value:2,
label:"语文",
children:[
{ value:21, label:"文言文" },
{ value:22, label:"古诗" }
]
},
]
},
{
key:"tree2", title:"树形选择(多选)", type:"tree-select", placeholder:"请选择学科",
multiple:true,
data:[
{
value:1,
label:"数学",
children:[
{ value:11,label:"奥数" },
{ value:12,label:"微积分" }
]
},
{
value:2,
label:"语文",
children:[
{ value:21, label:"文言文" },
{ value:22, label:"古诗" }
]
},
]
},
{ key:"switch", title:"switch类型", type:"switch" },
{ key:"rate", title:"评分类型", type:"rate", allowHalf:false },
{ key:"slider", title:"滑块类型", type:"slider" },
{ key:"color1", title:"颜色类型1", type:"color" },
{ key:"color2", title:"颜色类型2", type:"color", showAlpha:true },
{ key:"icon1", title:"图标1", type:"icon" },
{ key:"icon2", title:"图标2", type:"icon", filter:"vk-" },
{ key:"icon3", title:"图标3", type:"icon",
filter:(name)=>{
// 不显示vk图标
return name.indexOf("vk-icon") === 0 ? false : true;
},
},
// 文件上传
{ key:"", title:"文件上传", type:"bar-title" },
{
key:"image1", title:"image类型", type:"image",
limit:6
},
{
key:"image2", title:"拖拽上传", type:"image",
limit:6, drag:true,
fileSize:2,
sizeUnit:"mb",
tips:"图片大小限制：小于2M"
},
{
key:"file", title:"文件类型", type:"file",
limit:6,
accept:".txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf"
},
{ key:"image3", title:"从素材库多选图片", type:"file-select", placeholder:"请选择图片", fileType:"image", multiple:true, multipleLimit:5 },
{ key:"image4", title:"从素材库单选图片", type:"file-select", placeholder:"请选择图片", fileType:"image" },
{ key:"video1", title:"从素材库单选视频", type:"file-select", placeholder:"请选择视频", fileType:"video" },
// 日期型字段
{ key:"", title:"日期型字段", type:"bar-title" },
{ key:"date", title:"date类型", type:"date", dateType:"date", tips:"可选择年月日" },
{ key:"dateTime", title:"dataTime类型", type:"date", dateType:"datetime", tips:"可选择年月日时分秒" },
{ key:"dateArr", title:"date类型范围", type:"date", dateType:"daterange" },
{ key:"dataTimeArr", title:"dataTime类型范围", type:"date", dateType:"datetimerange" },
// 时间型字段
{ key:"", title:"时间型字段", type:"bar-title" },
{ key:"time1", title:"time类型1", type:"time" },
{
key:"time2", title:"time类型2", type:"time",
valueFormat:"HH:mm",
pickerOptions:{
format:"HH:mm"
}
},
{
key:"time3", title:"time类型3", type:"time", custom:true,
pickerOptions:{
start: '08:00',
step: '01:00',
end: '24:00'
}
},
{ key:"timeArr1", title:"time类型范围1", type:"time", isRange:true },
{
key:"timeArr2", title:"time类型范围2", type:"time", isRange:true,
valueFormat:"HH:mm",
pickerOptions:{
selectableRange: '18:30:00 - 20:30:00',
format:"HH:mm"
}
},
// 数据库联动字段
{ key:"", title:"数据库联动字段", type:"bar-title" },
{
key:"user_id", title:"用户选择器", type:"remote-select", placeholder:"请输入用户账号/昵称",
action:"admin/select/kh/user",
},
{
key: "user_id", title: "选择用户", type: "table-select", placeholder:"选择",
action:"admin/system/user/sys/getList",
columns:[
{ key:"nickname", title:"用户昵称", type:"text", nameKey:true },
{ key:"_id", title:"用户标识", type:"text", idKey:true },
{ key:"mobile", title:"手机号", type:"text" },
]
},
{
key: "role1", title: "通过表格选择(单选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
],
},
{
key: "role2", title: "通过表格选择(多选)", type: "table-select", placeholder:"请选择角色",
action:"admin/system/role/sys/getList",
columns:[
{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
{ key:"role_id", title:"角色标识", type:"text", idKey:true }
],
multiple:true
},
// 布局
{ key:"", title:"横向布局", type:"bar-title" },
{ key:"", title:"", type:"group", justify:"start",
columns:[
{ key:"text1", title:"单行文本1", type:"text" },
{ key:"text2", title:"单行文本2", type:"text" },
{ key:"text3", title:"单行文本3", type:"text" },
{ key:"text4", title:"单行文本4", type:"text" },
]
},
{ key:"", title:"", type:"group", justify:"start",
columns:[
{ key:"text5", title:"单行文本5", type:"text" },
{ key:"text6", title:"单行文本6", type:"text" },
{ key:"text7", title:"单行文本7", type:"text" },
{ key:"text8", title:"单行文本8", type:"text" },
]
},
// 对象类型
{ key:"", title:"对象类型", type:"bar-title" },
{ key:"object1", title:"对象类型1", type:"object",
columns:[
{ key:"a", title:"对象内属性a", type:"text" },
{ key:"b", title:"对象内属性b", type:"text" },
]
},
// 可以通过设置showLabel:false, 隐藏左侧的label
{ key:"object2", title:"对象类型2", type:"object", showLabel:false,
columns:[
{ key:"a", title:"对象内属性a", type:"text" },
{ key:"b", title:"对象内属性b", type:"text" },
]
},
// 多层嵌套object
{ key:"object3", title:"对象类型3", type:"object", showLabel:true,
columns:[
{ key:"a", title:"对象内属性a", type:"text" },
{ key:"b", title:"嵌套对象b", type:"object", showLabel:true,
columns:[
{ key:"b1", title:"嵌套对象b内属性b1", type:"text" },
{ key:"b2", title:"嵌套对象b内属性b2", type:"text" },
]
},
]
},
// 特殊类型
{ key:"", title:"特殊类型", type:"bar-title" },
{ key:"editor", title:"富文本类型", type:"editor", width:"1000px" },
{ key:"json", title:"json类型", type:"json" },
{ key:"position", title:"地图位置", type:"map", width:600, height:300, defaultLocation:{ latitude: 30.224781, longitude: 120.12438 } },
{ key:"array1", title:"数组字符串类型", type:"array<string>" },
{ key:"array2", title:"数组数字类型", type:"array<number>" },
{
key:"array", title:"数组对象类型", type:"array<object>", itemWidth:260,
showAdd:true,
showClear:true,
showSort:true,
// 新增一行时,该行的默认值
defaultValue:{
select1:1
},
rightBtns:['copy','delete'],
// 每行每个字段对应的渲染规则
columns:[
{
key:"text1", title:"昵称", type:"text",
isUnique:true,
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ["change","blur"] }
]
},
{
key:"number1", title:"数字", type:"number",
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{
key:"select1", title:"select类型", type:"select",
data:[
{ value:1, label:"选项1" },
{ value:2, label:"选项2" }
],
rules:[
{ required:true, message:"该项不能为空", trigger:["change","blur"] },
]
},
{ key:"switch", title:"switch类型", type:"switch", width:160 },
]
},
{ key:"goods_tags", title:"商品标签", type:"tag" },
],
// 表单验证规则
rules:{
text:[
{ required:true, message:'text不能为空', trigger:'change' }
],
money:[
{ required:true, message:'金额不能为空', trigger:'change' },
{ type:"number", message:'金额必须是数字', trigger:'change' },
],
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show:false,
// 表单是否在请求中
loading:false
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods:{
// 页面数据初始化函数
init(options){
},
// 关闭按钮
onCancel(){
console.log("关闭");
vk.menuTabs.closeCurrent();
},
// 表单提交
submitForm(){
that.$refs.form1.submitForm();
},
// 表单提交成功
onFormSuccess(){
}
},
// 过滤器
filters:{
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
.page{
}
</style>
pages_template/components/form/form-slot.vue
+142
View File
@@ -0,0 +1,142 @@
<template>
<view class="page">
<!-- 页面内容开始 -->
<vk-data-page-header
title="Form 表单"
subTitle="使用插糟自定义表单"
></vk-data-page-header>
<view class="page-body" style="max-width: 800px;margin: 0 auto;">
<vk-data-form
ref="form1"
v-model="form1.data"
:rules="form1.props.rules"
:action="form1.props.action"
:form-type="form1.props.formType"
:columns='form1.props.columns'
:loading.sync="form1.props.loading"
label-width="140px"
@success="onFormSuccess"
>
<!-- v-slot:rate 中的 rate 对应 columns中的 key, form对应 form1.data keyName 对应 columns中的 key -->
<template v-slot:rate="{ form, keyName }">
<view style="height: 36px;display: flex;align-items: center;">
<el-rate v-model="form[keyName]"></el-rate>
</view>
</template>
<template v-slot:footer="{ loading }">
<el-button plain style="margin-right: 20px;width: 80px;" @click="onCancel">返回</el-button>
<el-button :loading="loading" type="primary" style="width: 80px;" @click="submitForm">添加</el-button>
</template>
</vk-data-form>
<view class="tips mt15">
<view class="mt15 json-view" v-if="form1.data">
<view style="font-size: 14px;">表单数据</view>
<pre>
{{ form1.data }}
</pre>
</view>
</view>
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
data() {
// 页面数据变量
return {
// 表单相关开始-----------------------------------------------------------
form1: {
// 表单请求数据，此处可以设置默认值
data: {
},
// 表单属性
props: {
// 表单请求地址
action:"template/test/sys/test",
// 表单字段显示规则
columns:[
{ key: "text", title:"text类型字段", type:"text" },
{ key: "rate", title:"插糟用法", type:"text" },
],
// 表单验证规则
rules: {
},
// add 代表添加 update 代表修改
formType:'',
// 是否显示表单1 的弹窗
show: false,
// 表单是否在请求中
loading:false
}
},
// 表单相关结束-----------------------------------------------------------
}
},
// 监听 - 页面每次【加载时】执行(如：前进)
onLoad(options = {}) {
that = this;
vk = that.vk;
that.options = options;
that.init(options);
},
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
onReady(){
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
},
// 函数
methods: {
// 页面数据初始化函数
init(options){
},
// 页面返回
onCancel(){
vk.menuTabs.closeCurrent();
},
// 表单提交
submitForm(){
that.$refs.form1.submitForm();
},
// 表单提交成功后
onFormSuccess(){
},
},
// 过滤器
filters:{
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss" scoped>
</style>