Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 76fc3401 编写于 作者: W wuyb@phxg.cn
浏览文件
操作

表单配置

上级 9728bfbc
隐藏空白更改
内联 并排
Showing with 925 addition and 174 deletion
vite-demo/package.json
浏览文件 @ 76fc3401
......@@ -13,6 +13,7 @@
"element-plus": "^2.1.9",
"js-cookie": "^3.0.1",
"less": "^4.1.2",
"pako": "^2.0.4",
"sass": "^1.50.0",
"scss": "^0.2.4",
"vue": "^3.2.25",
......
vite-demo/src/components/configForm/form.md 0 → 100644
浏览文件 @ 76fc3401
1. 基本使用
```vue
<template>
<configForm :config="configListForm"></configForm>
</template>
<script >
import configForm from '@c/configForm/form.vue'
export default {
components:{
configForm
},
setup(){
let configListForm = reactive({
data: [
{
inputType: "text",
fieldName: "vehicleNo",
defaultVal: 1,
required: true,
disabled: true,
label: "测试1",
placeholder: "请输入"
}
],
})
return {
configListForm
}
}
}
</script>
```
2. 参数配置
3. 校验
4. 参数禁用
5. 插槽
vite-demo/src/components/configForm/form.vue
浏览文件 @ 76fc3401
<template>
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<template v-for="(item,index) in config.data" :key="index">
<a-form-item :label="item.label">
<!-- 文本 -->
<a-input v-if="item.inputType === 'text'"
v-model:value="ruleForm[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
/>
<!-- 数字 -->
<a-input-number v-if="item.inputType === 'number'"
v-model:value="ruleForm[`${item.fieldName}`]"
<a-form :model="formState" ref="formRef" :rules="rulesForm" :label-col="labelCol" :wrapper-col="wrapperCol">
<fieldset>
<template v-for="(item,index) in config.data" :key="index">
<a-form-item :label="item.label" :name="item.fieldName">
<!-- 文本 -->
<a-input v-if="item.inputType === 'text'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
/>
<!-- 数字 -->
<a-input-number v-if="item.inputType === 'number'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
:min="item.min?item.min:Infinity"
:max="item.max?item.max:Infinity"/>
<!--多行文本-->
<a-textarea v-if="item.inputType === 'textarea'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
:min="item.min?item.min:Infinity"
:max="item.max?item.max:Infinity"/>
<!--多行文本-->
<a-textarea v-if="item.inputType === 'textarea'"
v-model:value="ruleForm[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
:auto-size="{ minRows: 2, maxRows: 5 }"
/>
<!--单选-->
<a-radio-group v-if="item.inputType === 'radio'" v-model:value="ruleForm[`${item.fieldName}`]">
<a-radio v-for="radio in item.options" :key="radio.value" :value="radio.value">{{radio.name}}
</a-radio>
</a-radio-group>
<!-- 多选-->
<a-checkbox-group v-if="item.inputType === 'checkbox'" v-model:value="ruleForm[`${item.fieldName}`]">
<a-checkbox v-for="checkbox in item.options"
:key="checkbox.value" :value="checkbox.value"
:name="'checkbox'+ ruleForm[`${item.fieldName}`]">{{checkbox.name}}
</a-checkbox>
</a-checkbox-group>
<!-- select-->
<a-select
v-if="item.inputType == 'select'"
allowClear
v-model="ruleForm[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请选择'"
:show-search="item.showSearch"
:options="item.options"
:filter-option="filterOption"
@change="(val) => onSelectChange(item.fieldName, val)"
>
<a-select-option
v-for="option in item.options"
:key="option.value"
:label="option.label"
:value="option.id"
>{{option.value}}
</a-select-option>
</a-select>
<!--日期选择-->
<a-date-picker v-if="item.inputType === 'date'" v-model:value="ruleForm[`${item.fieldName}`]"
:format="dateFormat"
@change="(date,dateStrings) => onInputChange(item.fieldName, date,dateStrings)"/>
<!--时间段选择-->
<a-range-picker v-if="item.inputType === 'range'" v-model:value="ruleForm[`${item.fieldName}`]"
@change="(date,dateStrings) => onInputChange(item.fieldName,date,dateStrings,'range')"/>
:auto-size="{ minRows: 2, maxRows: 5 }"
/>
<!--单选-->
<a-radio-group v-if="item.inputType === 'radio'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]">
<a-radio v-for="radio in item.options" :key="radio.value" :value="radio.value">{{radio.name}}
</a-radio>
</a-radio-group>
<!-- 多选-->
<a-checkbox-group v-if="item.inputType === 'checkbox'" :disabled="hasDisabled"
v-model:value="formState[`${item.fieldName}`]">
<a-checkbox v-for="checkbox in item.options"
:key="checkbox.value" :value="checkbox.value"
:name="'checkbox'+ formState[`${item.fieldName}`]">{{checkbox.name}}
</a-checkbox>
</a-checkbox-group>
<!-- select-->
<a-select
v-if="item.inputType == 'select'"
allowClear
v-model="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请选择'"
:show-search="item.showSearch"
:options="item.options"
:filter-option="filterOption"
@change="(val) => onSelectChange(item.fieldName, val)"
>
<a-select-option
v-for="option in item.options"
:key="option.value"
:label="option.label"
:value="option.id"
>{{option.value}}
</a-select-option>
</a-select>
<!--日期选择-->
<a-date-picker v-if="item.inputType === 'date'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"
:format="dateFormat"
@change="(date,dateStrings) => onInputChange(item.fieldName, date,dateStrings)"/>
<!--时间段选择-->
<a-range-picker v-if="item.inputType === 'range'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"
@change="(date,dateStrings) => onInputChange(item.fieldName,date,dateStrings,'range')"/>
<slot v-if="item.inputType === 'formItem'" name="formItem"></slot>
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">确认</a-button>
<a-button style="margin-left: 10px" @click="resetForm">关闭</a-button>
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">确认</a-button>
<a-button style="margin-left: 10px" @click="resetForm">关闭</a-button>
</a-form-item>
</fieldset>
</a-form>
</template>
<script>
import {defineComponent, reactive, toRaw, onMounted} from 'vue';
import {defineComponent, ref, reactive, toRaw, onMounted, computed} from 'vue';
import moment from 'moment';
import { Form } from 'ant-design-vue';
import {Form} from 'ant-design-vue';
import {parseDate, formatObjDate} from '@/utils/util'
const useForm = Form.useForm;
export default {
name: "form",
......@@ -83,99 +93,147 @@
},
setup(props) {
// 表单数据
const ruleForm = reactive({})
const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(ruleForm);
console.log(props);
const formRef = ref(null);
const dateFormat = 'YYYY-MM-DD';
const formState = reactive({})
let rulesForm = reactive({})
const initForm = () => {
props.config.data.forEach(item => {
if (item.inputType !== "range") {
ruleForm[`${item.fieldName}`] = "";
let defaultVal = item.defaultVal ? item.defaultVal : ''
formState[`${item.fieldName}`] = defaultVal;
} else {
if (item.fieldName) {
let arr = item.fieldName.split(',');
let key1 = arr[0];
let key2 = arr[1];
ruleForm[key1] = '';
ruleForm[key2] = '';
formState[key1] = undefined;
formState[key2] = undefined;
} else {
ruleForm.startTime = '';
ruleForm.endTime = '';
formState.startTime = undefined;
formState.endTime = undefined;
}
}
// 设置验证规则 - 如果禁用表单则不校验
if (item.required && !props.config.disabled) {
if (item.fieldName && !item.disabled) {
let validator = typeof item.validator === 'function' ? item.validator : null
if (!validator) {
rulesForm[item.fieldName] = [{
whitespace: true,
required: item.required,
message: `${item.label}内容不能为空`,
trigger: 'blur',
}]
} else {
// 自定义效验内容
rulesForm[item.fieldName] = [{
whitespace: true,
required: item.required,
validator: validator,
trigger: 'blur',
}]
}
}
}
});
console.log('ruleForm', ruleForm);
console.log('rules', rulesForm);
console.log('formState', formState);
}
onMounted(() => {
initForm()
})
const onSubmit = () => {
let data = getQuery();
console.log(data);
};
// 时间选择
function onInputChange(fieldName, date, dateStrings, type) {
// console.log(fieldName, date, dateStrings, type);
if (type) {
if (fieldName && type === 'range') {
let arr = fieldName.split(',');
let key1 = arr[0];
let key2 = arr[1];
ruleForm[key1] = dateStrings[0];
ruleForm[key2] = dateStrings[1];
formState[key1] = dateStrings[0];
formState[key2] = dateStrings[1];
} else {
ruleForm.startTime = dateStrings[0];
ruleForm.endTime = dateStrings[1];
formState.startTime = dateStrings[0];
formState.endTime = dateStrings[1];
}
} else {
ruleForm[fieldName] = dateStrings;
formState[fieldName] = date ? moment(date, dateFormat) : null
}
}
const resetForm = ()=> {
resetFields();
for (let key in ruleForm) {
ruleForm[key] = '';
// 重置表单
const resetForm = () => {
formRef.value.resetFields();
for (let key in formState) {
formState[key] = '';
}
}
// 数据提交
const onSubmit = () => {
console.log('formRef', formRef);
formRef.value.validate()
.then(() => {
console.log('values', toRaw(formState));
let data = getQuery();
console.log(data);
})
.catch((error) => {
console.log('error', error);
});
};
// 返回有值得数据
const getQuery = () => {
let data = {};
for (let key in ruleForm) {
if (ruleForm[key] != undefined && ruleForm[key] != null && ruleForm[key] != "") {
data[key] = ruleForm[key];
for (let key in formState) {
if (formState[key] != undefined && formState[key] != null && formState[key] != "") {
data[key] = formState[key];
}
}
return data;
console.log(parseDate(data));
return formatObjDate(data, dateFormat);
}
// select选择
const onSelectChange = (name, val) => {
console.log(name, val);
ruleForm[name] = val
formState[name] = val
}
const hasDisabled = computed(() => {
return props.config.disabled || false
})
// select搜索
const filterOption = (input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
return {
//
moment,
dateFormat,
resetForm,
//
labelCol: {
span: 4,
},
wrapperCol: {
span: 14,
},
ruleForm,
//
dateFormat,
formRef,
formState,
rulesForm,
hasDisabled,
//
resetForm,
onSubmit,
onSelectChange,
filterOption,
......
vite-demo/src/utils/util.js 0 → 100644
浏览文件 @ 76fc3401
import moment from 'moment'
// Gzip解压 压缩工具
import pako from 'pako'
export function timeFix () {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
};
/**
* 处理横向的日期列
* @param noNeedCol Array
* @param dataType str
* @param head Array
*/
export const handlerTableHead = (noNeedCol, dataType, head) => {
const timeField = dataType === 'hour' ? '时' : dataType === 'day' ? '日' : '月'
head.forEach(item => {
if (!noNeedCol.includes(item.title)) {
// 不包含需要单位的表头
item.title = item.title + timeField
}
})
}
/**
* 处理竖向的日期列
* @param dataIndex
* @param dataSource
*/
export const handlerVerticalTableHead = (dataIndex, dataSource, dataType) => {
const timeField = dataType === 'hour' ? '时' : dataType === 'day' ? '日' : '月'
dataSource.forEach(item => {
item[dataIndex] = item[dataIndex] + timeField
})
}
export function welcome () {
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
const index = Math.floor(Math.random() * arr.length)
return arr[index]
};
/**
* 触发 window.resize
*/
export function triggerWindowResizeEvent () {
const event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
event.eventType = 'message'
window.dispatchEvent(event)
};
export function handleScrollHeader (callback) {
let timer = 0
let beforeScrollTop = window.pageYOffset
callback = callback || function () { }
window.addEventListener(
'scroll',
event => {
clearTimeout(timer)
timer = setTimeout(() => {
let direction = 'up'
const afterScrollTop = window.pageYOffset
const delta = afterScrollTop - beforeScrollTop
if (delta === 0) {
return false
}
direction = delta > 0 ? 'down' : 'up'
callback(direction)
beforeScrollTop = afterScrollTop
}, 50)
},
false
)
};
/**
* Remove loading animate
* @param id parent element id or class
* @param timeout
*/
export function removeLoadingAnimate (id = '', timeout = 1500) {
if (id === '') {
return
}
setTimeout(() => {
document.body.removeChild(document.getElementById(id))
}, timeout)
};
export const localSave = (key, value) => {
localStorage.setItem(key, value);
};
export const localRead = (key, defaultValue) => {
let val;
try {
val = JSON.parse(localStorage.getItem(key));
} catch (e) {
val = localStorage.getItem(key)
}
if (val) return val;
if (defaultValue !== undefined) return defaultValue;
return '';
};
export const localClear = () => {
localStorage.clear();
};
export const localRemove = (key) => {
localStorage.removeItem(key);
};
export const sessionSave = (key, value) => {
window.sessionStorage.setItem(key, value);
};
export const sessionRead = (key, defaultValue) => {
if (sessionStorage.getItem(key)) return sessionStorage.getItem(key);
if (defaultValue !== undefined) return defaultValue;
return '';
};
export const sessionClear = () => {
window.sessionStorage.clear();
};
export const sessionRemove = (key) => {
window.sessionStorage.removeItem(key);
};
/**
* 获取对象类型
* @param obj
* @returns {*}
*/
export const getObjType = obj => {
var toString = Object.prototype.toString
var map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
}
return map[toString.call(obj)]
}
/**
* 对象深拷贝
* @param data
* @returns {*}
*/
export const deepClone = data => {
const type = getObjType(data);
let obj;
if (type === 'array') {
obj = []
} else if (type === 'object') {
obj = {}
} else {
// 不再具有下一层次
return data
}
if (type === 'array') {
for (let i = 0, len = data.length; i < len; i++) {
obj.push(deepClone(data[i]))
}
} else if (type === 'object') {
for (const key in data) {
obj[key] = deepClone(data[key])
}
}
return obj
}
/**
* 根据固定的keys过滤obj对象
* @param obj 被过滤对象
* @param keys 过滤依据的key
*/
export const filterObjByKey = (obj, keys) => {
const newObj = {};
const tmpObj = deepClone(obj);
for (let i = 0; i < keys.length; i++) {
if (tmpObj[keys[i]] !== undefined) {
newObj[keys[i]] = tmpObj[keys[i]];
}
}
return newObj;
};
/**
* 格式化日期
* @param obj
* @param fmt
* @returns {*}
*/
export function formatObjDate (obj, fmt = 'YYYY-MM-DD HH:mm:ss') {
if (moment.isMoment(obj)) {
return obj.format(fmt);
}
if (typeof obj === 'object') {
for (const k in obj) {
if (moment.isMoment(obj[k])) {
obj[k] = obj[k].format(fmt);
}
}
}
return obj;
}
// 函数名：CheckDateTime
// 功能介绍：检查是否为日期时间
function getDateFmt (str) {
if (!str || typeof str !== 'string') {
return false;
}
let reg = /^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) ([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
let r = str.match(reg);
if (r) {
return 'YYYY-MM-DD HH:mm:ss';
}
reg = /^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) ([0-1][0-9]|2[0-3]):([0-5][0-9])$/;
r = str.match(reg);
if (r) {
return 'YYYY-MM-DD HH:mm';
}
reg = /^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) ([0-1][0-9]|2[0-3])$/;
r = str.match(reg);
if (r) {
return 'YYYY-MM-DD HH';
}
reg = /^([1-9]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
r = str.match(reg);
if (r) {
return 'YYYY-MM-DD';
}
reg = /^([1-9]\d{3})-(0[1-9]|1[0-2])$/;
r = str.match(reg);
if (r) {
return 'YYYY-MM';
}
return false
}
// 字符串转日期
export function getMoment (dateStr) {
const format = getDateFmt(dateStr);
return format ? moment(dateStr, format) : dateStr;
}
/**
* 解析日期属性
* @param data
* @returns {*}
*/
export function parseDate (data) {
if (!data || typeof data !== 'object') {
return data;
}
for (const k in data) {
const format = getDateFmt(data[k]);
if (format) {
data[k] = moment(data[k], format)
}
}
return data;
}
/**
* 获取树的key集合
* @param treeObj tree数据对象
* @returns {Array} tree所有的key的集合
*/
export const getTreeKeys = (treeObj, keys = []) => {
const childrenData = [];
for (let i = 0; i < treeObj.length; i++) {
keys.push(treeObj[i].key);
if (treeObj[i].children && treeObj[i].children.length) {
childrenData.push(...treeObj[i].children);
}
}
if (childrenData.length) {
return getTreeKeys(childrenData, keys);
} else {
return keys;
}
};
/**
* @param {Number} num 数值
* @returns {String} 处理后的字符串
* @description 如果传入的数值小于10，即位数只有1位，则在前面补充0
*/
const getHandledValue = num => {
return num < 10 ? '0' + num : num
};
/**
* @param {Number} timeStamp 传入的时间戳
* @param {Number} startType 要返回的时间字符串的格式类型，传入'year'则返回年开头的完整时间
*/
export const getDate = (timeStamp, startType) => {
const d = new Date(timeStamp);
const year = d.getFullYear();
const month = getHandledValue(d.getMonth() + 1);
const date = getHandledValue(d.getDate());
const hours = getHandledValue(d.getHours());
const minutes = getHandledValue(d.getMinutes());
const second = getHandledValue(d.getSeconds());
let resStr = '';
if (startType === 'year') {
resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second;
} if (startType === 'hours') {
resStr = year + '-' + month + '-' + date + '-' + hours;
} else {
resStr = month + '-' + date + ' ' + hours + ':' + minutes;
}
return resStr;
};
// 判断是否是BASE64 如果是则Gzip 解压
export const isUnzip = (b64Data) => {
if (b64Data.startsWith('##BASE64##')) {
return unzip(b64Data.substring(10));
} else {
return b64Data
}
};
// Gzip 解压
export const unzip = (b64Data) => {
let strData = atob(b64Data);
const charData = strData.split('').map((x) => x.charCodeAt(0));
const binData = new Uint8Array(charData);
const data = pako.inflate(binData);
strData = Utf8ArrayToStr(data);
return strData;
};
/**
* utf-8 Array 转化字符串
* @param array Utf8Array
* @returns {string}
* @constructor
*/
export const Utf8ArrayToStr = function (array) {
const len = array.length;
let out = '';
let i = 0;
let char1, char2, char3, char4;
while (i < len) {
char1 = array[i++];
// 当单个字节时, 最大值 '01111111', 最小值 '00000000' 右移四位 07, 00
// 当两个字节时, 最大值 '11011111', 最小值 '11000000' 右移四位 13, 12
// 当三个字节时, 最大值 '11101111', 最小值 '11100000' 右移四位 14, 14
if (char1 >> 4 <= 7) {
out += String.fromCharCode(char1);
} else if (char1 >> 4 === 12 || char1 >> 4 === 13) {
char2 = array[i++];
out += String.fromCharCode(((char1 & 0x1F) << 6) | (char2 & 0x3F));
} else if (char1 >> 4 === 14) {
char2 = array[i++];
char3 = array[i++];
char4 = ((char1 & 0x0F) << 12) | ((char2 & 0x3F) << 6);
out += String.fromCharCode(char4 | ((char3 & 0x3F) << 0));
}
}
return out;
};
/**
* json串压缩
* @param str
* @returns {string}
*/
export const zip = (str) => {
const binaryString = pako.gzip(str, { to: 'string' });
return btoa(binaryString);
};
/**
* @returns {String} 当前浏览器名称
*/
export const getExplorer = () => {
const ua = window.navigator.userAgent
const isExplorer = (exp) => {
return ua.indexOf(exp) > -1
}
if (isExplorer('MSIE')) return 'IE'
else if (isExplorer('Firefox')) return 'Firefox'
else if (isExplorer('Chrome')) return 'Chrome'
else if (isExplorer('Opera')) return 'Opera'
else if (isExplorer('Safari')) return 'Safari'
}
/**
* @description 绑定事件 on(element, event, handler)
*/
export const on = (function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
/**
* @description 解绑事件 off(element, event, handler)
*/
export const off = (function () {
if (document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
})()
/**
* 判断一个对象是否存在key，如果传入第二个参数key，则是判断这个obj对象是否存在key这个属性
* 如果没有传入key这个参数，则判断obj对象是否有键值对
*/
export const hasKey = (obj, key) => {
if (key) return key in obj
else {
const keysArr = Object.keys(obj);
return keysArr.length
}
}
/**
* @param {*} obj1 对象
* @param {*} obj2 对象
* @description 判断两个对象是否相等，这两个对象的值只能是数字或字符串
*/
export const objEqual = (obj1, obj2) => {
const keysArr1 = Object.keys(obj1)
const keysArr2 = Object.keys(obj2)
if (keysArr1.length !== keysArr2.length) return false
else if (keysArr1.length === 0 && keysArr2.length === 0) return true
/* eslint-disable-next-line */
else return !keysArr1.some(key => obj1[key] != obj2[key])
};
/**
* 获取URL参数
*/
export const getQueryVariable = () => {
if (window.location.hash.indexOf('?') !== -1) {
const query = window.location.hash.split('?')[1];
const vars = query.split('&');
const tempMap = {};
for (let i = 0, len = vars.length; i < len; i++) {
const pair = vars[i].split(':');
if (pair[0]) {
tempMap[pair[0]] = decodeURI(pair[1]);
}
}
return tempMap;
}
return {};
};
/**
* 校验token格式是否正确
* @param token
* @returns {boolean}
*/
export const isToken = (token) => {
return token.substring(0, token.indexOf(' ')) === 'Bearer';
};
/**
* 获取UUID
*/
export const generateUUID = () => {
let d = new Date().getTime();
const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
/**
* 坐标转换，百度地图坐标转换成腾讯地图坐标
* lng 腾讯经度（pointy）
* lat 腾讯纬度（pointx）
* 经度>纬度
*/
export const bMapToQQMap = (lng, lat) => {
if (lng === null || lng === '' || lat === null || lat === '') { return [lng, lat]; }
const xPi = 3.14159265358979324;
const x = parseFloat(lng) - 0.0065;
const y = parseFloat(lat) - 0.006;
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);
const lng1 = (z * Math.cos(theta)).toFixed(7);
const lat1 = (z * Math.sin(theta)).toFixed(7);
return [lng1, lat1];
}
/**
* 处理echarts - tooltip多列展示，仅用于默认字段
* 使用方式 return handleEchartsTooltip(params)
* @param params
*/
export const handleEchartsTooltip = (params) => {
// 给定规则 定义每一列条数最大为15条 之后依据规则给定最为合适的条数以及列数
const max = 15;
let colCount = 15;
const length = params.length;
let col = Math.floor(length / colCount); // 取计算列数 向下取整
const colRate = length % colCount; // 取剩下余数
if (colRate !== 0) {
if (col === 0) {
col = 1;
} else {
const arr = [];
for (let i = 5; i <= max; i++) {
const c = length - col * i;
if (c > i) continue
for (let j = 0; j < col; j++) {
arr.push(i)
}
arr.push(c)
}
col = arr.length
colCount = arr[0];
}
}
let listHtml = params[0].name + '<br>' // 最顶层时间换行
const listHtmlArr = []; // 存储每一列
// console.log('col 列数', col)
// console.log('colCount 每一列条数', colCount)
for (let i = 0; i <= col; i++) { // 外层循环为列数
const currStartCount = i * colCount; // 起始下标
const currEndCount = (i + 1) * colCount; // 结束下标
// console.log('currStartCount, currEndCount', currStartCount, currEndCount)
// 0-10 10-20 20-30
listHtmlArr[i] = '';
params.forEach((item, index) => {
if (index >= currStartCount && index < currEndCount) {
// console.log(index, 'index, 执行tooltip')
listHtmlArr[i] = listHtmlArr[i] + `${item.marker} ${item.seriesName}: ${item.value}&nbsp;&nbsp;&nbsp;<br>`
}
})
}
let dom = '<div style="display: flex;">'
listHtmlArr.forEach(list => {
// console.log('list', list)
dom = dom + `<div>${list}</div>`
})
listHtml = listHtml + dom + '</div>'
// console.log('listHtml', listHtml)
return listHtml
}
// 处理y轴最大最小值
export const handleLineYAxis = (chartMaxMinAvg) => {
const maxAndMin = [];
chartMaxMinAvg.forEach(item => {
maxAndMin.push(item.maxValue, item.minValue)
});
const min = Math.min(...maxAndMin);
const max = Math.max(...maxAndMin);
return {
min: Math.floor(min * 0.998), // 最小值向下取整
max: Math.ceil(max * 1.003) // 最大值向上取整
}
}
// 下载文件
export const downloadFile = (url) => {
const eLink = document.createElement('a');
eLink.style.display = 'none';
eLink.href = url; // URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
window.URL.revokeObjectURL(eLink.href); // 释放URL 对象
document.body.removeChild(eLink);
}
vite-demo/src/views/form/antd/form.vue
浏览文件 @ 76fc3401
<template>
<div>antd - form</div>
<configForm :config="configListForm"></configForm>
<configForm :config="configListForm">
<template #formItem>
<a-switch/>
</template>
</configForm>
</template>
<script>
import configForm from '@c/configForm/form.vue'
import {reactive} from 'vue'
export default {
name: "form",
......@@ -12,80 +17,117 @@
configForm
},
setup() {
return {
configListForm: {
data: [
{
inputType: "text",
fieldName: "vehicleNo",
label: "测试1",
placeholder: "请输入"
},
{
inputType: "text",
fieldName: "vehicleNo2",
label: "测试2",
placeholder: "请输入"
},
{
inputType: "number",
fieldName: "vehicleNo3",
label: "数字输入框",
placeholder: "请输入...",
min: 1,
max: 10,
},
{
inputType: "textarea",
fieldName: "vehicleNo4",
label: "多行输入",
placeholder: "请输入...",
},
{
inputType: "radio",
fieldName: "vehicleNo5",
default: '',
label: "单选",
placeholder: "请选择",
options: [
{value: "0", name: "1"},
{value: "1", name: "2"}
]
},
{
inputType: "checkbox",
fieldName: "vehicleNo6",
default: '',
label: "多选",
placeholder: "请选择",
options: [
{value: "0", name: "1"},
{value: "1", name: "2"}
]
},
{
inputType: "select",
fieldName: "vehicleNo7",
default: '',
label: "select",
placeholder: "请选择",
showSearch: true,
options: [
{value: "测试0", id: "1"},
{value: "测试1", id: "2"}
]
},
{
inputType: "date",
fieldName: "vehicleNo8",
label: "日期选择",
},
{
inputType: "range",
label: "日期选择2",
},
]
let checkAge = async (rule, value) => {
if (!value) {
return Promise.reject('Please input the age');
}
if (!Number.isInteger(value)) {
return Promise.reject('Please input digits');
} else {
if (value < 18) {
return Promise.reject('Age must be greater than 18');
} else {
return Promise.resolve();
}
}
};
let configListForm = reactive({
data: [
{
inputType: "text",
fieldName: "vehicleNo",
defaultVal: 1,
required: true,
disabled: true,
label: "测试1",
placeholder: "请输入"
}, {
label: "插槽",
inputType: "formItem",
fieldName: "vehicleNo1",
required: true,
},
{
inputType: "text",
fieldName: "vehicleNo2",
required: true,
validator: checkAge,
label: "测试2",
placeholder: "请输入"
},
// {
// inputType: "number",
// fieldName: "vehicleNo3",
// label: "数字输入框",
// placeholder: "请输入...",
// min: 1,
// max: 10,
// },
// {
// inputType: "textarea",
// fieldName: "vehicleNo4",
// label: "多行输入",
// placeholder: "请输入...",
// },
{
inputType: "radio",
fieldName: "vehicleNo5",
default: '',
label: "单选",
placeholder: "请选择",
options: [
{value: "0", name: "1"},
{value: "1", name: "2"}
]
},
// {
// inputType: "checkbox",
// fieldName: "vehicleNo6",
// default: '',
// label: "多选",
// placeholder: "请选择",
// options: [
// {value: "0", name: "1"},
// {value: "1", name: "2"}
// ]
// },
// {
// inputType: "select",
// fieldName: "vehicleNo7",
// default: '',
// label: "select",
// placeholder: "请选择",
// showSearch: true,
// options: [
// {value: "测试0", id: "1"},
// {value: "测试1", id: "2"}
// ]
// },
// {
// inputType: "date",
// fieldName: "vehicleNo8",
// label: "日期选择",
// },
// {
// inputType: "range",
// label: "日期选择2",
// },
],
disabled: false,
})
// 设置默认值
let options = [
{value: "1", name: "待完成"},
{value: "2", name: "已完成"}
]
configListForm.data[0].defaultVal = 2
setTimeout(() => {
configListForm.data[3].options = options
}, 3000)
//
return {
configListForm
}
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或