表单

src/components/byForm/index.vue

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