|
@@ -7,7 +7,8 @@
|
|
|
:rules="rules"
|
|
|
:labelPosition="formOption.labelPosition || 'top'"
|
|
|
ref="byForm"
|
|
|
- :disabled="formOption.disabled || false">
|
|
|
+ :disabled="formOption.disabled || false"
|
|
|
+ >
|
|
|
<template v-for="i in formConfig" :key="i.model">
|
|
|
<div v-if="i.type == 'title'" class="form-title">
|
|
|
{{ i.title }}
|
|
@@ -15,7 +16,7 @@
|
|
|
<el-form-item
|
|
|
:label="i.label"
|
|
|
:prop="i.prop"
|
|
|
- v-if="i.isShow || i.isShow == undefined && i.type"
|
|
|
+ v-if="i.isShow || (i.isShow == undefined && i.type)"
|
|
|
:style="
|
|
|
i.type == 'title'
|
|
|
? 'width:100%'
|
|
@@ -25,12 +26,25 @@
|
|
|
? 'width:' + formOption.itemWidth + '%'
|
|
|
: '100%'
|
|
|
"
|
|
|
- :class="i.type == 'json' ? (i.isHide ? 'by-form-json dn' : 'by-form-json') : i.isHide ? 'dn' : ''">
|
|
|
+ :class="
|
|
|
+ i.type == 'json'
|
|
|
+ ? i.isHide
|
|
|
+ ? 'by-form-json dn'
|
|
|
+ : 'by-form-json'
|
|
|
+ : i.isHide
|
|
|
+ ? 'dn'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
<template #label>
|
|
|
- <el-popover placement="top" trigger="hover" :width="i.tipWidth" v-if="i.isTip">
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ trigger="hover"
|
|
|
+ :width="i.tipWidth"
|
|
|
+ v-if="i.isTip"
|
|
|
+ >
|
|
|
<template #reference>
|
|
|
- <span
|
|
|
- style="color:red">
|
|
|
+ <span style="color: red">
|
|
|
{{ i.label }}
|
|
|
</span>
|
|
|
</template>
|
|
@@ -50,7 +64,8 @@
|
|
|
:min="i.min"
|
|
|
:maxlength="i.maxlength"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- :style="i.style" />
|
|
|
+ :style="i.style"
|
|
|
+ />
|
|
|
<el-input
|
|
|
v-if="i.type == 'selectInput'"
|
|
|
v-model="formData[i.prop]"
|
|
@@ -63,7 +78,8 @@
|
|
|
:min="i.min"
|
|
|
:maxlength="i.maxlength"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- :clearable="i.clearable ? i.clearable : false">
|
|
|
+ :clearable="i.clearable ? i.clearable : false"
|
|
|
+ >
|
|
|
<template #prepend>
|
|
|
<el-select
|
|
|
v-model="formData[i.selectProp]"
|
|
@@ -71,8 +87,15 @@
|
|
|
@change="(e) => commonsEmit(e, i)"
|
|
|
:disabled="i.disabled ? i.disabled : false"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- style="width: 80px">
|
|
|
- <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>
|
|
|
+ style="width: 80px"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
</template>
|
|
|
</el-input>
|
|
@@ -86,8 +109,15 @@
|
|
|
:clearable="i.clearable ? i.clearable : false"
|
|
|
:filterable="i.filterable ? true : false"
|
|
|
:style="i.style"
|
|
|
- :readonly="i.readonly ? i.readonly : false">
|
|
|
- <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>
|
|
|
+ :readonly="i.readonly ? i.readonly : false"
|
|
|
+ >
|
|
|
+ <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]"
|
|
@@ -103,7 +133,8 @@
|
|
|
:placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
:disabled="i.disabled ? i.disabled : false"
|
|
|
check-strictly
|
|
|
- :style="i.style" />
|
|
|
+ :style="i.style"
|
|
|
+ />
|
|
|
<el-date-picker
|
|
|
v-model="formData[i.prop]"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
@@ -113,18 +144,27 @@
|
|
|
@change="(e) => commonsEmit(e, i)"
|
|
|
:disabled="i.disabled ? i.disabled : false"
|
|
|
:format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
- :value-format="i.format ? i.format : dateFormatInit(i.itemType)" :style="i.style" />
|
|
|
+ :value-format="i.format ? i.format : dateFormatInit(i.itemType)"
|
|
|
+ :style="i.style"
|
|
|
+ />
|
|
|
<el-switch
|
|
|
:disabled="i.disabled ? i.disabled : false"
|
|
|
v-else-if="i.type == 'switch'"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- v-model="formData[i.prop]" />
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ />
|
|
|
<el-checkbox-group
|
|
|
v-else-if="i.type == 'checkbox'"
|
|
|
v-model="formData[i.prop]"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- :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">
|
|
|
+ :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>
|
|
@@ -133,8 +173,15 @@
|
|
|
v-model="formData[i.prop]"
|
|
|
@change="(e) => commonsEmit(e, i)"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- :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">
|
|
|
+ :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>
|
|
@@ -151,14 +198,16 @@
|
|
|
:precision="i.precision !== '' ? i.precision : 2"
|
|
|
:controls="i.controls === false ? false : true"
|
|
|
:style="i.style"
|
|
|
- onmousewheel="return false;">
|
|
|
+ onmousewheel="return false;"
|
|
|
+ >
|
|
|
</el-input-number>
|
|
|
<el-tree
|
|
|
v-else-if="i.type == 'tree'"
|
|
|
:data="i.data"
|
|
|
:props="i.props"
|
|
|
:readonly="i.readonly ? i.readonly : false"
|
|
|
- :show-checkbox="i.showCheckbox || true">
|
|
|
+ :show-checkbox="i.showCheckbox || true"
|
|
|
+ >
|
|
|
</el-tree>
|
|
|
<el-cascader
|
|
|
v-else-if="i.type == 'cascader'"
|
|
@@ -168,12 +217,15 @@
|
|
|
:placeholder="i.placeholder || $t('common.pleaseSelect')"
|
|
|
@change="(e) => commonsEmit(e, i)"
|
|
|
:disabled="i.disabled ? i.disabled : false"
|
|
|
- :style="i.style">
|
|
|
+ :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>
|
|
|
+ <slot :name="i.slotName" v-else-if="i.type == 'slot'">
|
|
|
+ {{ i.slotName }}插槽占位符
|
|
|
+ </slot>
|
|
|
<div class="upload" v-else-if="i.type == 'upload'">
|
|
|
<el-upload
|
|
|
v-model="formData[i.prop]"
|
|
@@ -182,22 +234,39 @@
|
|
|
list-type="picture-card"
|
|
|
:on-remove="handleRemove"
|
|
|
:on-success="handleSuccess"
|
|
|
- :before-upload="handleBeforeUpload">
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ >
|
|
|
<!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon> -->
|
|
|
<el-icon><Plus /></el-icon>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
- <div v-else-if="i.type == 'table'" class="by-form-table" style="width: 100%">
|
|
|
+ <div
|
|
|
+ v-else-if="i.type == 'table'"
|
|
|
+ class="by-form-table"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<el-table :data="formData[i.prop]" style="width: 100%">
|
|
|
- <el-table-column :prop="j.prop" :label="j.label" :width="i.width" v-for="(j, jindex) in i.column">
|
|
|
+ <el-table-column
|
|
|
+ :prop="j.prop"
|
|
|
+ :label="j.label"
|
|
|
+ :width="i.width"
|
|
|
+ v-for="(j, jindex) in i.column"
|
|
|
+ >
|
|
|
<template #default="scope" v-if="j.type">
|
|
|
<component
|
|
|
@change="(e) => formTableChange(e, scope, j)"
|
|
|
v-model="scope.row[j.prop]"
|
|
|
:is="formTableObj[j.type]"
|
|
|
:placeholder="j.placeholder || $t('common.pleaseEnter')"
|
|
|
- :type="j.type == 'number' ? 'number' : 'text'">
|
|
|
- <el-option :label="n.title || n.name || n.label" :value="n.id || n.value" v-for="n in j.data" :key="n.id" v-if="j.type == 'select'">
|
|
|
+ :type="j.type == 'number' ? 'number' : 'text'"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="n.title || n.name || n.label"
|
|
|
+ :value="n.id || n.value"
|
|
|
+ v-for="n in j.data"
|
|
|
+ :key="n.id"
|
|
|
+ v-if="j.type == 'select'"
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</component>
|
|
|
</template>
|
|
@@ -205,7 +274,14 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div v-else-if="i.type == 'json'">
|
|
|
- <byForm :formConfig="i.json" :formOption="formOption" v-model="formData[i.prop]" ref="byform" :rules="rules"> </byForm>
|
|
|
+ <byForm
|
|
|
+ :formConfig="i.json"
|
|
|
+ :formOption="formOption"
|
|
|
+ v-model="formData[i.prop]"
|
|
|
+ ref="byform"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ </byForm>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</template>
|
|
@@ -243,8 +319,6 @@ defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-
|
|
|
const formTableChange = (e, scope, column) => {
|
|
|
if (column.fn) {
|
|
|
column.fn(e, scope);
|
|
@@ -267,12 +341,14 @@ const handleSuccess = (res, file, files) => {
|
|
|
};
|
|
|
|
|
|
const handleRemove = (file) => {
|
|
|
- const index = fileListCopy.value.findIndex((x) => x.uid === file.uid || x.id === file.id);
|
|
|
+ const index = fileListCopy.value.findIndex(
|
|
|
+ (x) => x.uid === file.uid || x.id === file.id
|
|
|
+ );
|
|
|
fileListCopy.value.splice(index, 1);
|
|
|
};
|
|
|
|
|
|
const getLegacyData = (i) => {
|
|
|
- console.log(i)
|
|
|
+ console.log(i);
|
|
|
};
|
|
|
|
|
|
const handleBeforeUpload = async (file) => {
|
|
@@ -294,7 +370,6 @@ const formData = computed(() => {
|
|
|
return proxy.modelValue;
|
|
|
});
|
|
|
|
|
|
-
|
|
|
const formDataReset = ref({ ...proxy.modelValue });
|
|
|
const commonsEmit = (prop, item) => {
|
|
|
if (item.type == "input" && item.itemType == "number") {
|
|
@@ -311,7 +386,7 @@ const commonsEmitChange = (prop, item) => {
|
|
|
formData.value[item.prop] = prop.trim();
|
|
|
}
|
|
|
if (item.fn) {
|
|
|
- console.log(proxy.formConfig)
|
|
|
+ console.log(proxy.formConfig);
|
|
|
item.fn(prop);
|
|
|
}
|
|
|
emit("update:modelValue", formData.value);
|
|
@@ -329,7 +404,7 @@ const dateFormatInit = (itemType) => {
|
|
|
const formatObj = {
|
|
|
year: "YYYY",
|
|
|
month: "YYYY-MM",
|
|
|
- date: "YYYY-MM-DD HH:mm:ss",
|
|
|
+ date: "YYYY-MM-DD",
|
|
|
dates: "YYYY-MM-DD",
|
|
|
datetime: "YYYY-MM-DD HH:mm:ss",
|
|
|
monthrange: "YYYY-MM-DD HH:mm:ss",
|
|
@@ -358,9 +433,16 @@ const commonRecursive = (arr, labelKey, labelVal, 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]));
|
|
|
+ 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);
|
|
|
+ this.commonRecursive(
|
|
|
+ arr[i][childrenName],
|
|
|
+ labelKey,
|
|
|
+ labelVal,
|
|
|
+ childrenName
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -375,7 +457,12 @@ const commonGetdata = (isLoad, i) => {
|
|
|
}
|
|
|
proxy.formConfig[i].data = getFormat(isLoad.resUrl, message);
|
|
|
if (isLoad.labelKey) {
|
|
|
- commonRecursive(proxy.formConfig[i].data, isLoad.labelKey, isLoad.labelVal, isLoad.childrenName);
|
|
|
+ commonRecursive(
|
|
|
+ proxy.formConfig[i].data,
|
|
|
+ isLoad.labelKey,
|
|
|
+ isLoad.labelVal,
|
|
|
+ isLoad.childrenName
|
|
|
+ );
|
|
|
}
|
|
|
console.log(proxy.formConfig[i].data);
|
|
|
});
|
|
@@ -384,7 +471,9 @@ const commonGetdata = (isLoad, i) => {
|
|
|
//根据resurl获取数据
|
|
|
const getFormat = (formatStr, props) => {
|
|
|
if (!formatStr) return props;
|
|
|
- return formatStr.split(".").reduce((total, cur) => (!total ? "" : total[cur]), props);
|
|
|
+ return formatStr
|
|
|
+ .split(".")
|
|
|
+ .reduce((total, cur) => (!total ? "" : total[cur]), props);
|
|
|
};
|
|
|
|
|
|
//初始化所有表单
|
|
@@ -461,7 +550,7 @@ loadInit();
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-.box-item{
|
|
|
+.box-item {
|
|
|
background-color: red;
|
|
|
}
|
|
|
.form-title {
|