From 2647a5a829f3554e985b1aac99c6a87892f42479 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期日, 22 十月 2023 18:21:56 +0800
Subject: [PATCH] #
---
uni_modules/uni-forms/components/uni-forms/uni-forms.vue | 472 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 472 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-forms/components/uni-forms/uni-forms.vue b/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
new file mode 100644
index 0000000..d8b4e66
--- /dev/null
+++ b/uni_modules/uni-forms/components/uni-forms/uni-forms.vue
@@ -0,0 +1,472 @@
+<template>
+ <view class="uni-forms" :class="{ 'uni-forms--top': !border }">
+ <form @submit.stop="submitForm" @reset="resetForm">
+ <slot></slot>
+ </form>
+ </view>
+</template>
+
+<script>
+ // #ifndef VUE3
+ import Vue from 'vue';
+ Vue.prototype.binddata = function(name, value, formName) {
+ if (formName) {
+ this.$refs[formName].setValue(name, value);
+ } else {
+ let formVm;
+ for (let i in this.$refs) {
+ const vm = this.$refs[i];
+ if (vm && vm.$options && vm.$options.name === 'uniForms') {
+ formVm = vm;
+ break;
+ }
+ }
+ if (!formVm) return console.error('褰撳墠 uni-froms 缁勪欢缂哄皯 ref 灞炴��');
+ formVm.setValue(name, value);
+ }
+ };
+ // #endif
+
+
+
+ import Validator from './validate.js';
+ /**
+ * Forms 琛ㄥ崟
+ * @description 鐢辫緭鍏ユ銆侀�夋嫨鍣ㄣ�佸崟閫夋銆佸閫夋绛夋帶浠剁粍鎴愶紝鐢ㄤ互鏀堕泦銆佹牎楠屻�佹彁浜ゆ暟鎹�
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+ * @property {Object} rules 琛ㄥ崟鏍￠獙瑙勫垯
+ * @property {String} validateTrigger = [bind|submit] 鏍￠獙瑙﹀彂鍣ㄦ柟寮� 榛樿 submit
+ * @value bind 鍙戠敓鍙樺寲鏃惰Е鍙�
+ * @value submit 鎻愪氦鏃惰Е鍙�
+ * @property {String} labelPosition = [top|left] label 浣嶇疆 榛樿 left
+ * @value top 椤堕儴鏄剧ず label
+ * @value left 宸︿晶鏄剧ず label
+ * @property {String} labelWidth label 瀹藉害锛岄粯璁� 65px
+ * @property {String} labelAlign = [left|center|right] label 灞呬腑鏂瑰紡 榛樿 left
+ * @value left label 宸︿晶鏄剧ず
+ * @value center label 灞呬腑
+ * @value right label 鍙充晶瀵归綈
+ * @property {String} errShowType = [undertext|toast|modal] 鏍￠獙閿欒淇℃伅鎻愮ず鏂瑰紡
+ * @value undertext 閿欒淇℃伅鍦ㄥ簳閮ㄦ樉绀�
+ * @value toast 閿欒淇℃伅toast鏄剧ず
+ * @value modal 閿欒淇℃伅modal鏄剧ず
+ * @event {Function} submit 鎻愪氦鏃惰Е鍙�
+ */
+
+ export default {
+ name: 'uniForms',
+ components: {},
+ emits:['input','reset','validate','submit'],
+ props: {
+ // 鍗冲皢寮冪敤
+ value: {
+ type: Object,
+ default () {
+ return {};
+ }
+ },
+ // 鏇挎崲 value 灞炴��
+ modelValue: {
+ type: Object,
+ default () {
+ return {};
+ }
+ },
+ // 琛ㄥ崟鏍￠獙瑙勫垯
+ rules: {
+ type: Object,
+ default () {
+ return {};
+ }
+ },
+ // 鏍￠獙瑙﹀彂鍣ㄦ柟寮忥紝榛樿 鍏抽棴
+ validateTrigger: {
+ type: String,
+ default: ''
+ },
+ // label 浣嶇疆锛屽彲閫夊�� top/left
+ labelPosition: {
+ type: String,
+ default: 'left'
+ },
+ // label 瀹藉害锛屽崟浣� px
+ labelWidth: {
+ type: [String, Number],
+ default: ''
+ },
+ // label 灞呬腑鏂瑰紡锛屽彲閫夊�� left/center/right
+ labelAlign: {
+ type: String,
+ default: 'left'
+ },
+ errShowType: {
+ type: String,
+ default: 'undertext'
+ },
+ border: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ formData: {}
+ };
+ },
+ computed: {
+ dataValue() {
+ if (JSON.stringify(this.modelValue) === '{}') {
+ return this.value
+ } else {
+ return this.modelValue
+ }
+ }
+ },
+ watch: {
+ rules(newVal) {
+ // 濡傛灉瑙勫垯鍙戠敓鍙樺寲锛岃鍒濆鍖栫粍浠�
+ this.init(newVal);
+ },
+ labelPosition() {
+ this.childrens.forEach(vm => {
+ vm.init()
+ })
+ }
+ },
+ created() {
+ // #ifdef VUE3
+ let getbinddata = getApp().$vm.$.appContext.config.globalProperties.binddata
+ if (!getbinddata) {
+ getApp().$vm.$.appContext.config.globalProperties.binddata = function(name, value, formName) {
+ if (formName) {
+ this.$refs[formName].setValue(name, value);
+ } else {
+ let formVm;
+ for (let i in this.$refs) {
+ const vm = this.$refs[i];
+ if (vm && vm.$options && vm.$options.name === 'uniForms') {
+ formVm = vm;
+ break;
+ }
+ }
+ if (!formVm) return console.error('褰撳墠 uni-froms 缁勪欢缂哄皯 ref 灞炴��');
+ formVm.setValue(name, value);
+ }
+ }
+ }
+ // #endif
+
+ // 瀛樻斁watch 鐩戝惉鏁扮粍
+ this.unwatchs = [];
+ // 瀛樻斁瀛愮粍浠舵暟缁�
+ this.childrens = [];
+ // 瀛樻斁 easyInput 缁勪欢
+ this.inputChildrens = [];
+ // 瀛樻斁 dataCheckbox 缁勪欢
+ this.checkboxChildrens = [];
+ // 瀛樻斁瑙勫垯
+ this.formRules = [];
+ this.init(this.rules);
+ },
+ // mounted() {
+ // this.init(this.rules)
+ // },
+ methods: {
+ init(formRules) {
+ // 鍒ゆ柇鏄惁鏈夎鍒�
+ if (Object.keys(formRules).length === 0) {
+ this.formData = this.dataValue
+ return
+ };
+ this.formRules = formRules;
+ this.validator = new Validator(formRules);
+ this.registerWatch();
+ },
+ // 鐩戝惉 watch
+ registerWatch() {
+ // 鍙栨秷鐩戝惉,閬垮厤澶氭璋冪敤 init 閲嶅鎵ц $watch
+ this.unwatchs.forEach(v => v());
+ this.childrens.forEach((v) => {
+ v.init()
+ })
+ // watch 姣忎釜灞炴�� 锛岄渶瑕佺煡閬撳叿浣撻偅涓睘鎬у彂鍙樺寲
+ Object.keys(this.dataValue).forEach(key => {
+ let watch = this.$watch(
+ 'dataValue.' + key,
+ value => {
+ if (!value) return
+ // 濡傛灉鏄璞� 锛屽垯骞抽摵鍐呭
+ if (value.toString() === '[object Object]') {
+ for (let i in value) {
+ let name = `${key}[${i}]`;
+ this.formData[name] = this._getValue(name, value[i]);
+ }
+ } else {
+ this.formData[key] = this._getValue(key, value);
+ }
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+ );
+ this.unwatchs.push(watch);
+ });
+ },
+ /**
+ * 鍏紑缁欑敤鎴蜂娇鐢�
+ * 璁剧疆鏍￠獙瑙勫垯
+ * @param {Object} formRules
+ */
+ setRules(formRules) {
+ this.init(formRules);
+ },
+ /**
+ * 鍏紑缁欑敤鎴蜂娇鐢�
+ * 璁剧疆鑷畾涔夎〃鍗曠粍浠� value 鍊�
+ * @param {String} name 瀛楁鍚嶇О
+ * @param {String} value 瀛楁鍊�
+ */
+ setValue(name, value, callback) {
+ let example = this.childrens.find(child => child.name === name);
+ if (!example) return null;
+ value = this._getValue(example.name, value);
+ this.formData[name] = value;
+ example.val = value;
+ return example.triggerCheck(value, callback);
+ },
+
+ /**
+ * 琛ㄥ崟閲嶇疆
+ * @param {Object} event
+ */
+ resetForm(event) {
+ this.childrens.forEach(item => {
+ item.errMsg = '';
+ const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+ if (inputComp) {
+ inputComp.errMsg = '';
+ // fix by mehaotian 涓嶈Е鍙戝叾浠栫粍浠剁殑 setValue
+ inputComp.is_reset = true
+ inputComp.$emit('input', inputComp.multiple ? [] : '');
+ inputComp.$emit('update:modelValue', inputComp.multiple ? [] : '');
+ }
+ });
+
+ this.childrens.forEach(item => {
+ if (item.name) {
+ this.formData[item.name] = this._getValue(item.name, '');
+ }
+ });
+
+ this.$emit('reset', event);
+ },
+
+ /**
+ * 瑙﹀彂琛ㄥ崟鏍￠獙锛岄�氳繃 @validate 鑾峰彇
+ * @param {Object} validate
+ */
+ validateCheck(validate) {
+ if (validate === null) validate = null;
+ this.$emit('validate', validate);
+ },
+ /**
+ * 鏍￠獙鎵�鏈夋垨鑰呴儴鍒嗚〃鍗�
+ */
+ async validateAll(invalidFields, type, keepitem, callback) {
+ let childrens = []
+ for (let i in invalidFields) {
+ const item = this.childrens.find(v => v.name === i)
+ if (item) {
+ childrens.push(item)
+ }
+ }
+
+ if (!callback && typeof keepitem === 'function') {
+ callback = keepitem;
+ }
+
+ let promise;
+ if (!callback && typeof callback !== 'function' && Promise) {
+ promise = new Promise((resolve, reject) => {
+ callback = function(valid, invalidFields) {
+ !valid ? resolve(invalidFields) : reject(valid);
+ };
+ });
+ }
+
+ let results = [];
+ let newFormData = {};
+ if (this.validator) {
+ for (let key in childrens) {
+ const child = childrens[key];
+ let name = child.isArray ? child.arrayField : child.name;
+ if (child.isArray) {
+ if (child.name.indexOf('[') !== -1 && child.name.indexOf(']') !== -1) {
+ const fieldData = child.name.split('[');
+ const fieldName = fieldData[0];
+ const fieldValue = fieldData[1].replace(']', '');
+ if (!newFormData[fieldName]) {
+ newFormData[fieldName] = {};
+ }
+ newFormData[fieldName][fieldValue] = this._getValue(name, invalidFields[name]);
+ }
+ } else {
+ newFormData[name] = this._getValue(name, invalidFields[name]);
+ }
+ const result = await child.triggerCheck(invalidFields[name], true);
+ if (result) {
+ results.push(result);
+ if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
+ }
+ }
+ } else {
+ newFormData = invalidFields
+ }
+ if (Array.isArray(results)) {
+ if (results.length === 0) results = null;
+ }
+
+ if (Array.isArray(keepitem)) {
+ keepitem.forEach(v => {
+ newFormData[v] = this.dataValue[v];
+ });
+ }
+
+ if (type === 'submit') {
+ this.$emit('submit', {
+ detail: {
+ value: newFormData,
+ errors: results
+ }
+ });
+ } else {
+ this.$emit('validate', results);
+ }
+
+ callback && typeof callback === 'function' && callback(results, newFormData);
+
+ if (promise && callback) {
+ return promise;
+ } else {
+ return null;
+ }
+ },
+ submitForm() {},
+ /**
+ * 澶栭儴璋冪敤鏂规硶
+ * 鎵嬪姩鎻愪氦鏍￠獙琛ㄥ崟
+ * 瀵规暣涓〃鍗曡繘琛屾牎楠岀殑鏂规硶锛屽弬鏁颁负涓�涓洖璋冨嚱鏁般��
+ */
+ submit(keepitem, callback, type) {
+ for (let i in this.dataValue) {
+ const itemData = this.childrens.find(v => v.name === i);
+ if (itemData) {
+ if (this.formData[i] === undefined) {
+ this.formData[i] = this._getValue(i, this.dataValue[i]);
+ }
+ }
+ }
+ if (!type) {
+ console.warn('submit 鏂规硶鍗冲皢搴熷純锛岃浣跨敤validate鏂规硶浠ｆ浛锛�');
+ }
+ return this.validateAll(this.formData, 'submit', keepitem, callback);
+ },
+
+ /**
+ * 澶栭儴璋冪敤鏂规硶
+ * 鏍￠獙琛ㄥ崟
+ * 瀵规暣涓〃鍗曡繘琛屾牎楠岀殑鏂规硶锛屽弬鏁颁负涓�涓洖璋冨嚱鏁般��
+ */
+ validate(keepitem, callback) {
+ return this.submit(keepitem, callback, true);
+ },
+
+ /**
+ * 閮ㄥ垎琛ㄥ崟鏍￠獙
+ * @param {Object} props
+ * @param {Object} cb
+ */
+ validateField(props, callback) {
+ props = [].concat(props);
+ let invalidFields = {};
+ this.childrens.forEach(item => {
+ if (props.indexOf(item.name) !== -1) {
+ invalidFields = Object.assign({}, invalidFields, {
+ [item.name]: this.formData[item.name]
+ });
+ }
+ });
+ return this.validateAll(invalidFields, 'submit', [], callback);
+ },
+
+ /**
+ * 瀵规暣涓〃鍗曡繘琛岄噸缃紝灏嗘墍鏈夊瓧娈靛�奸噸缃负鍒濆鍊煎苟绉婚櫎鏍￠獙缁撴灉
+ */
+ resetFields() {
+ this.resetForm();
+ },
+
+ /**
+ * 绉婚櫎琛ㄥ崟椤圭殑鏍￠獙缁撴灉銆備紶鍏ュ緟绉婚櫎鐨勮〃鍗曢」鐨� prop 灞炴�ф垨鑰� prop 缁勬垚鐨勬暟缁勶紝濡備笉浼犲垯绉婚櫎鏁翠釜琛ㄥ崟鐨勬牎楠岀粨鏋�
+ */
+ clearValidate(props) {
+ props = [].concat(props);
+ this.childrens.forEach(item => {
+ const inputComp = this.inputChildrens.find(child => child.rename === item.name);
+ if (props.length === 0) {
+ item.errMsg = '';
+ if (inputComp) {
+ inputComp.errMsg = '';
+ }
+ } else {
+ if (props.indexOf(item.name) !== -1) {
+ item.errMsg = '';
+ if (inputComp) {
+ inputComp.errMsg = '';
+ }
+ }
+ }
+ });
+ },
+ /**
+ * 鎶� value 杞崲鎴愭寚瀹氱殑绫诲瀷
+ * @param {Object} key
+ * @param {Object} value
+ */
+ _getValue(key, value) {
+ const rules = (this.formRules[key] && this.formRules[key].rules) || [];
+ const isRuleNum = rules.find(val => val.format && this.type_filter(val.format));
+ const isRuleBool = rules.find(val => (val.format && val.format === 'boolean') || val.format === 'bool');
+ // 杈撳叆鍊间负 number
+ if (isRuleNum) {
+ value = isNaN(value) ? value : value === '' || value === null ? null : Number(value);
+ }
+ // 绠�鍗曞垽鏂湡鍋囧��
+ if (isRuleBool) {
+ value = !value ? false : true;
+ }
+ return value;
+ },
+ /**
+ * 杩囨护鏁板瓧绫诲瀷
+ * @param {Object} format
+ */
+ type_filter(format) {
+ return format === 'int' || format === 'double' || format === 'number' || format === 'timestamp';
+ }
+ }
+ };
+</script>
+
+<style lang="scss" >
+ .uni-forms {
+ // overflow: hidden;
+ // padding: 10px 15px;
+ }
+
+ .uni-forms--top {
+ // padding: 10px 15px;
+ // padding-top: 22px;
+ }
+</style>
--
Gitblit v1.9.1