表单

src/components/byForm/index.vue

@@ -1,373 +1,371 @@
 <template>
-  <div class="by-form">
+	<div class="by-form">
-    <el-form
+		<el-form
-      :model="formData"
+			:model="formData"
-      :label-width="formOption.labelWidth"
+			:label-width="formOption.labelWidth"
-      :inline="formOption.inline || false"
+			:inline="formOption.inline || false"
-      :rules="rules"
+			:rules="rules"
-      :labelPosition="formOption.labelPosition || 'top'"
+			:labelPosition="formOption.labelPosition || 'top'"
-      ref="byForm"
+			ref="byForm"
-    >
+		>
-      <el-form-item
+			<el-form-item
-        :label="i.label"
+				:label="i.label"
-        v-for="i in formConfig"
+				v-for="i in formConfig"
-        :key="i.model"
+				:key="i.model"
-        :prop="i.prop"
+				:prop="i.prop"
-        :style="
+				v-show="i.isShow || i.isShow == undefined"
-          i.type == 'title'
+				:style="
-            ? 'width:100%'
+					i.type == 'title' ? 'width:100%' :
-            : i.itemWidth
+						i.itemWidth
-            ? 'width:' + i.itemWidth + '%'
+						? 'width:' + i.itemWidth + '%'
-            : formOption.itemWidth
+						: formOption.itemWidth
-            ? 'width:' + formOption.itemWidth + '%'
+						? 'width:' + formOption.itemWidth + '%'
-            : '100%'
+						: '100%'
-        "
+				"
-        :class="i.isHide ? 'dn' : ''"
+				:class="i.isHide ? 'dn' : ''"
-      >
+			>
-        <el-input
+				<el-input
-          v-if="i.type == 'input'"
+					v-if="i.type == 'input'"
-          v-model="formData[i.prop]"
+					v-model="formData[i.prop]"
-          :placeholder="i.placeholder || '请输入'"
+					:placeholder="i.placeholder || '请输入'"
-          @input="(e) => commonsEmit(e, i)"
+					@input="((e)=>commonsEmit(e,i))"
-          :type="i.itemType ? i.itemType : 'text'"
+					:type="i.itemType ? i.itemType : 'text'"
-          :disabled="i.disabled ? i.disabled : false"
+					:disabled="i.disabled ? i.disabled : false"
-          :max="i.max"
+					:max="i.max"
-          :min="i.min"
+					:min="i.min"
-          :maxlength="i.maxlength"
+					:maxlength="i.maxlength"
-        />
+				/>
-        <el-select
+				<el-select
-          v-model="formData[i.prop]"
+					v-model="formData[i.prop]"
-          :multiple="i.multiple || false"
+					:multiple="i.multiple || false"
-          v-else-if="i.type == 'select'"
+					v-else-if="i.type == 'select'"
-          :placeholder="i.placeholder || '请选择'"
+					:placeholder="i.placeholder || '请选择'"
-          @change="(e) => commonsEmit(e, i)"
+					@change="((e)=>commonsEmit(e,i))"
-          :disabled="i.disabled ? i.disabled : false"
+					:disabled="i.disabled ? i.disabled : false"
-          :style="i.style"
+					:style="i.style"
-        >
+				>
-          <el-option
+					<el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id">
-            :label="j.title || j.name || j.label"
+					</el-option>
-            :value="j.id || j.value"
+				</el-select>
-            v-for="j in i.data"
+				<el-tree-select
-            :key="j.id"
+					v-model="formData[i.prop]"
-          >
+					v-else-if="i.type == 'treeSelect'"
-          </el-option>
+					:data="i.data"
-        </el-select>
+					:props="{ value: i.propsTreeValue || 'id', label: i.propsTreeLabel || 'label', children: i.propsTreeChildren || 'children' }"
-        <el-tree-select
+					value-key="id"
-          v-model="formData[i.prop]"
+					:placeholder="i.placeholder || '请选择'"
-          v-else-if="i.type == 'treeSelect'"
+					check-strictly
-          :data="i.data"
+				/>
-          :props="{ value: 'id', label: 'label', children: 'children' }"
+				<el-date-picker
-          value-key="id"
+					v-model="formData[i.prop]"
-          :placeholder="i.placeholder || '请选择'"
+					v-else-if="i.type == 'date'"
-          check-strictly
+					:type="i.itemType"
-        />
+					:placeholder="i.placeholder || '请选择时间'"
-        <el-date-picker
+					@change="commonsEmit"
-          v-model="formData[i.prop]"
+					:disabled="i.disabled ? i.disabled : false"
-          v-else-if="i.type == 'date'"
+					:format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :type="i.itemType"
+      				:value-format="i.format ? i.format : dateFormatInit(i.itemType)"
-          :placeholder="i.placeholder || '请选择时间'"
+				/>
-          @change="commonsEmit"
+				<el-switch
-          :disabled="i.disabled ? i.disabled : false"
+					:disabled="i.disabled ? i.disabled : false"
-          :format="i.format ? i.format : dateFormatInit(i.itemType)"
+					v-else-if="i.type == 'switch'"
-          :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
+					v-model="formData[i.prop]"
-        />
+				/>
-        <el-switch
+				<el-checkbox-group
-          :disabled="i.disabled ? i.disabled : false"
+					v-else-if="i.type == 'checkbox'"
-          v-else-if="i.type == 'switch'"
+					v-model="formData[i.prop]"
-          v-model="formData[i.prop]"
+					:disabled="i.disabled ? i.disabled : false"
-        />
+				>
-        <el-checkbox-group
+					<el-checkbox  v-for="j in i.data" :key="j.id || j.value" ::label="j.id  || j.value" name="type">
-          v-else-if="i.type == 'checkbox'"
+						{{ j.name || j.label }}
-          v-model="formData[i.prop]"
+					</el-checkbox>
-          :disabled="i.disabled ? i.disabled : false"
+					
-        >
+				</el-checkbox-group>
-          <el-checkbox
+				<el-radio-group
-            v-for="j in i.data"
+					v-else-if="i.type == 'radio'"
-            :key="j.id || j.value"
+					v-model="formData[i.prop]"
-            ::label="j.id  || j.value"
+					:disabled="i.disabled ? i.disabled : false"
-            name="type"
+					
-          >
+				>
-            {{ j.name || j.label }}
+					<el-radio 
-          </el-checkbox>
+						:border="i.border ? i.border : false"
-        </el-checkbox-group>
+						v-for="j in i.data" :key="j.id || j.value" :label="j.id  || j.value" name="type"
-        <el-radio-group
+					>
-          v-else-if="i.type == 'radio'"
+						{{ j.name || j.label }}
-          v-model="formData[i.prop]"
+					</el-radio>
-          :disabled="i.disabled ? i.disabled : false"
+				</el-radio-group>
-        >
+				<el-input-number
-          <el-radio
+					v-else-if="i.type == 'number'"
-            :border="i.border ? i.border : false"
+					v-model="formData[i.prop]"
-            v-for="j in i.data"
+					:placeholder="i.placeholder || '请输入'"
-            :key="j.id || j.value"
+					@input="commonsEmit"
-            :label="j.id || j.value"
+					:disabled="i.disabled ? i.disabled : false"
-            name="type"
+					:min="i.min ? i.min : 0"
-          >
+					:max="i.max ? i.max : 100"
-            {{ j.name || j.label }}
+					:step="i.step ? i.step : 1">
-          </el-radio>
+				</el-input-number>
-        </el-radio-group>
+				<el-tree
-        <el-input-number
+					v-else-if="i.type == 'tree'"
-          v-else-if="i.type == 'number'"
+					:data="i.data"
-          v-model="formData[i.prop]"
+					:props="i.props"
-          :placeholder="i.placeholder || '请输入'"
+					:show-checkbox="i.showCheckbox || true"
-          @input="commonsEmit"
+				>
-          :disabled="i.disabled ? i.disabled : false"
+				</el-tree>
-          :min="i.min ? i.min : 0"
+				<el-cascader
-          :max="i.max ? i.max : 100"
+					v-else-if="i.type == 'cascader'"
-          :step="i.step ? i.step : 1"
+					:options="i.data"
-        >
+					:props="i.props"
-        </el-input-number>
+					:placeholder="i.placeholder || '请选择'"
-        <el-tree
+					@change="commonsEmit"
-          v-else-if="i.type == 'tree'"
+					:disabled="i.disabled ? i.disabled : false"
-          :data="i.data"
+					:style="i.style">
-          :props="i.props"
+				</el-cascader>
-          :show-checkbox="i.showCheckbox || true"
+				<div class="form-title" v-else-if="i.type == 'title'">
-        >
+					{{ i.title }}
-        </el-tree>
+				</div>
-        <el-cascader
+				<slot 
-          v-else-if="i.type == 'cascader'"
+                    :name="i.slotName" 
-          :options="i.data"
+                    v-else-if="i.type == 'slot'">
-          :props="i.props"
+                    {{i.slotName}}插槽占位符
-          :placeholder="i.placeholder || '请选择'"
+                </slot>
-          @change="commonsEmit"
+				<div v-else-if="i.type == 'json'">
-          :disabled="i.disabled ? i.disabled : false"
+					<byForm
-          :style="i.style"
+						:formConfig="i.json"
-        >
+						:formOption="formOption"
-        </el-cascader>
+						v-model="formData[i.prop]"
-        <div class="form-title" v-else-if="i.type == 'title'">
+						ref="byform"
-          {{ i.title }}
+					>
-        </div>
+					</byForm>
-        <slot :name="i.slotName" v-else-if="i.type == 'slot'">
+				</div>
-          {{ i.slotName }}插槽占位符
+			</el-form-item>
-        </slot>
+		</el-form>
-        <div v-else-if="i.type == 'json'">
+	</div>
-          <byForm
-            :formConfig="i.json"
-            :formOption="formOption"
-            v-model="formData[i.prop]"
-            ref="byform"
-          >
-          </byForm>
-        </div>
-      </el-form-item>
-    </el-form>
-  </div>
 </template>
 <script>
-export default {
+	export default {
-  name: "byForm",
+	  name: "byForm", 
-};
+	}
 </script>
 <script  setup>
-import { set } from "@vueuse/shared";
+import { set } from '@vueuse/shared'
-import { reactive } from "vue";
+import { reactive } from 'vue'
 defineProps({
-  modelValue: {
+	modelValue: {
-    type: Object,
+		type: Object,
-    default: false,
+		default: false,
-  },
+	},
-  formConfig: {
+	formConfig: {
-    type: Array,
+		type: Array,
-    default: false,
+		default: false,
-  },
+	},
-  disabled: {
+	disabled: {
-    type: Boolean,
+		type: Boolean,
-    default: false,
+		default: false,
-  },
+	},
-  formOption: {
+	formOption: {
-    type: Object,
+		type: Object,
-    default: false,
+		default: false,
-  },
+	},
-  rules: {
+	rules: {
-    type: Object,
+		type: Object,
-    default: false,
+		default: false,
-  },
+	},
-});
+})
 
-const isInit = ref(false);
+const isInit = ref(false)
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue'])
 const formData = computed(() => {
-  return proxy.modelValue;
+	return proxy.modelValue	
-});
+})
-const formDataReset = ref({ ...proxy.modelValue });
+const formDataReset = ref({...proxy.modelValue})
-const commonsEmit = (prop, item) => {
+const commonsEmit = (prop,item) => {
-  console.log(formData);
+	console.log(formData)
-  if (item.fn) {
+	if(item.fn) {
-    item.fn(prop);
+		item.fn(prop)
-  }
+	}
-  emit("update:modelValue", formData.value);
+	emit('update:modelValue', formData.value)
-};
+}
 const loadInit = () => {
-  const v = this;
+	const v = this
-  for (let i = 0; i < proxy.formConfig.length; i++) {
+	for (let i = 0; i < proxy.formConfig.length; i++) {
-    const element = proxy.formConfig[i];
+		const element = proxy.formConfig[i]
-    if (element.isLoad) {
+		if (element.isLoad) {
-      commonGetdata(element.isLoad, i);
+			commonGetdata(element.isLoad, i)
-    }
+		}
-  }
+	}
-};
+}
-const dateFormatInit = (itemType) => {
+const dateFormatInit = ((itemType) => {
-  const formatObj = {
+	const formatObj = {
-    year: "YYYY",
+		year:"YYYY",
-    month: "YYYY-MM",
+		month:"YYYY-MM",
-    date: "YYYY-MM-DD hh:mm:ss",
+		date:"YYYY-MM-DD hh:mm:ss",
-    dates: "YYYY-MM-DD",
+		dates:'YYYY-MM-DD',
-    datetime: "YYYY-MM-DD hh:mm:ss",
+		datetime:"YYYY-MM-DD hh:mm:ss",
-    monthrange: "YYYY-MM-DD hh:mm:ss",
+		monthrange:"YYYY-MM-DD hh:mm:ss",
-    datetimerange: "YYYY-MM-DD hh:mm:ss",
+		datetimerange:"YYYY-MM-DD hh:mm:ss",
-    daterange: "YYYY-MM-DD hh:mm:ss",
+		daterange:"YYYY-MM-DD hh:mm:ss",
-  };
+	}
-  console.log(formatObj);
+	console.log(formatObj)
-  return formatObj[itemType];
+	return formatObj[itemType]
-};
+})
 
 //公用递归，保证key，val统一
 const commonRecursive = (arr, labelKey, labelVal, childrenName) => {
-  for (let i = 0; i < arr.length; i++) {
+	for (let i = 0; i < arr.length; i++) {
-    console.log(arr[i]);
+		console.log(arr[i])
-    if (labelKey == "stringArray") {
+		if(labelKey == 'stringArray'){
-      arr[i] = {
+			arr[i] = {
-        label: arr[i],
+				label:arr[i],
-        value: arr[i],
+				value:arr[i],
-        id: arr[i],
+				id:arr[i],
-        title: arr[i],
+				title:arr[i],
-      };
+			}
-    } else {
+		}else{
-      arr[i].title = arr[i].label = arr[i][labelKey];
+			arr[i].title = arr[i].label = arr[i][labelKey]
-      arr[i].id = arr[i].value = arr[i][labelVal];
+			arr[i].id = arr[i].value = arr[i][labelVal]
-    }
+		}
-
+		
-    if (childrenName) {
+		if (childrenName) {
-      arr[i].children = arr[i][childrenName];
+			arr[i].children = arr[i][childrenName]
-    }
+		}
-    arr[i].checked = false;
+		arr[i].checked = false
-    typeof arr[i][labelVal] == String
+		typeof arr[i][labelVal] == String
-      ? (arr[i].key = arr[i][labelVal])
+			? (arr[i].key = arr[i][labelVal])
-      : (arr[i].key = JSON.stringify(arr[i][labelVal]));
+			: (arr[i].key = JSON.stringify(arr[i][labelVal]))
-    if (childrenName) {
+		if (childrenName) {
-      this.commonRecursive(
+			this.commonRecursive(
-        arr[i][childrenName],
+				arr[i][childrenName],
-        labelKey,
+				labelKey,
-        labelVal,
+				labelVal,
-        childrenName
+				childrenName
-      );
+			)
-    }
+		}
-  }
+	}
-};
+}
 
 //请求form表单所需数据字典
-const commonGetdata = (isLoad, i) => {
+const commonGetdata = (isLoad,i) => {
-  proxy[isLoad.method](isLoad.url, isLoad.req).then((message) => {
+	proxy[isLoad.method](isLoad.url,isLoad.req).then(message=>{
-    console.log(message);
+		console.log(message)
-    if (getFormat(isLoad.resUrl, message) == undefined) {
+		if (getFormat(isLoad.resUrl, message) == undefined) {
-      console.log("请查看isLoad配置是否正确url:" + isLoad.url);
+			console.log('请查看isLoad配置是否正确url:' + isLoad.url)
-      return;
+			return
-    }
+		}
-    proxy.formConfig[i].data = getFormat(isLoad.resUrl, message);
+		proxy.formConfig[i].data = getFormat(isLoad.resUrl, message)
-    if (isLoad.labelKey) {
+		if (isLoad.labelKey) {
-      commonRecursive(
+			commonRecursive(
-        proxy.formConfig[i].data,
+				proxy.formConfig[i].data,
-        isLoad.labelKey,
+				isLoad.labelKey,
-        isLoad.labelVal,
+				isLoad.labelVal,
-        isLoad.childrenName
+				isLoad.childrenName
-      );
+			)
-    }
+		}
-    console.log(proxy.formConfig[i].data);
+		console.log(proxy.formConfig[i].data)
-  });
+	})
-};
+}
+
 
 //根据resurl获取数据
 const getFormat = (formatStr, props) => {
-  if (!formatStr) return props;
+	if(!formatStr)  return props
-  return formatStr
+	return formatStr
-    .split(".")
+		.split('.')
-    .reduce((total, cur) => (!total ? "" : total[cur]), props);
+		.reduce((total, cur) => (!total ? '' : total[cur]), props)
-};
+}
 
 //初始化所有表单
 
 const formDataInit = () => {
-  var map = {
+	
-    input: "",
+	
-    radio: null,
+	var map = {
-    select: null,
+		input: '',
-    checkbox: [],
+		radio: null,
-    date: "",
+		select: null,
-    datetime: "",
+		checkbox: [],
-    daterange: [],
+		date: '',
-    datetimerange: [],
+		datetime: '',
-    year: null,
+		daterange: [],
-    month: null,
+		datetimerange: [],
-    switch: false,
+		year: null,
-    inputNumber: 0,
+		month: null,
-    cascader: [],
+		switch: false,
-    Solt: null,
+		inputNumber: 0,
-    Transfer: [],
+		cascader: [],
-    Upload: { path: null, id: null, name: null },
+		Solt: null,
-    password: "",
+		Transfer: [],
-    treeSelect: "",
+		Upload: { path: null, id: null, name: null },
-    json: {},
+		password:'',
-  };
+		treeSelect:'',
-  const formDataCopy = { ...formData.value };
+		json:{},
-  for (let i = 0; i < proxy.formConfig.length; i++) {
+	}
-    const element = proxy.formConfig[i];
+	const formDataCopy = { ...formData.value }
-
+	for (let i = 0; i < proxy.formConfig.length; i++) {
-    if (formDataCopy[element.prop] || element.type === "slot") {
+		const element = proxy.formConfig[i]
-      continue;
+		
-    }
+		if(formDataCopy[element.prop] || element.type === 'slot') {
-
+			continue
-    if (map[element.itemType] != undefined) {
+		}
-      formData.value[element.prop] = map[element.itemType];
+			
-    } else {
+		if(map[element.itemType] != undefined){
-      formData.value[element.prop] = element.multiple ? [] : map[element.type];
+			formData.value[element.prop] = map[element.itemType]
-    }
+		}else{
-  }
+			formData.value[element.prop] = element.multiple ? [] :  map[element.type]
-
+		}
-  emit("update:modelValue", formData.value);
+		
-};
+	}
+	
+	emit('update:modelValue', formData.value)
+}
 
 const handleSubmit = (onSubmit) => {
-  proxy.$refs["byForm"].validate((valid) => {
+	proxy.$refs['byForm'].validate((valid) => {
-    if (valid) {
+		if (valid) {
-      const form = { ...formData.value };
+			const form = { ...formData.value }
-      proxy.formConfig.map((item) => {
+			proxy.formConfig.map(item => {
-        if (item.type == "json") {
+				if(item.type == 'json') {
-          form[item.prop] = JSON.stringify(form[item.prop]);
+					form[item.prop] = JSON.stringify(form[item.prop])
-        }
+				}
-      });
+			})
-      emit("update:modelValue", form);
+			emit('update:modelValue', form)
-      onSubmit();
+			onSubmit()
-    } else {
+		// } else {
-      ElMessage({
+		// 	ElMessage({
-        message: "请检查表单",
+		// 		message: '请检查表单',
-        type: "warning",
+		// 		type: 'warning',
-      });
+		// 	})
-    }
+		}
-  });
+	})
-};
+}
-const byform = ref(null); // 延迟使用，因为还没有返回跟挂载
+const byform = ref(null) // 延迟使用，因为还没有返回跟挂载
-onMounted(() => {});
+onMounted(()=>{
+	
+})
 defineExpose({
-  handleSubmit,
+	handleSubmit,
-});
+})
-formDataInit();
+formDataInit()
-loadInit();
+loadInit()
 </script>
 
 <style>
+
 .form-title {
-  font-size: 14px;
+	font-size: 14px;
-  font-weight: bold;
+	font-weight: bold;
-  margin-top: 22px;
+	margin-top: 22px;
-  color: #333333;
+	color: #333333;
 }
 .by-form .el-form--inline .el-form-item {
-  margin-right: 0px;
+	margin-right: 0px;
-  padding-right: 32px;
+	padding-right: 32px;
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
-.dn {
+.dn{
-  display: none !important;
+	display: none!important;
 }
+
+
 </style>