Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

体验新版 GitCode，发现更多精彩内容 >>

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

表单配置

上级 c9857e95
隐藏空白更改
内联 并排
Showing with 175 addition and 32 deletion
vite-demo/src/components/configForm/form.vue
浏览文件 @ c8a01d31
......@@ -3,12 +3,62 @@
<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}`]"
: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}`]" />
<!--时间段选择-->
<a-range-picker v-if="item.inputType === 'range'" v-model:value="ruleForm[`${item.fieldName}`]" />
</a-form-item>
<!-- v-model="ruleForm[`${item.fieldName}`]"-->
<!-- <a-form-item label="Activity zone">-->
<!-- <a-select v-model:value="formState.region" placeholder="please select your zone">-->
......@@ -44,11 +94,12 @@
<!-- <a-form-item label="Activity form">-->
<!-- <a-input v-model:value="formState.desc" type="textarea"/>-->
<!-- </a-form-item>-->
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">确认</a-button>
<a-button style="margin-left: 10px">关闭</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">关闭</a-button>
</a-form-item>
</a-form>
</template>
......@@ -63,20 +114,56 @@
},
setup(props) {
console.log(props);
const formState = reactive({
name: '',
region: undefined,
date1: undefined,
delivery: false,
type: [],
resource: '',
desc: '',
});
// 表单数据
const ruleForm = reactive({})
const initForm = () => {
props.config.data.forEach(item => {
if (item.inputType != "dateRange") {
ruleForm[`${item.fieldName}`] = "";
} else {
if (item.fieldName) {
ruleForm[`${item.fieldName}`] = [];
let arr = item.fieldName.split(',');
let key1 = arr[0];
let key2 = arr[1];
ruleForm[key1] = '';
ruleForm[key2] = '';
} else {
ruleForm[`${item.fieldName}`] = [];
ruleForm.startTime = '';
ruleForm.endTime = '';
}
}
});
console.log('ruleForm', ruleForm);
}
const onSubmit = () => {
console.log('submit!', toRaw(formState));
let data = getQuery();
console.log(data);
};
// 返回有值得数据
const getQuery = () => {
let data = {};
for (let key in ruleForm) {
if (ruleForm[key] != undefined && ruleForm[key] != null && ruleForm[key] != "") {
data[key] = ruleForm[key];
}
}
return data;
}
const onSelectChange = (name, val) => {
console.log(name, val);
ruleForm[name] = val
}
// select搜索
const filterOption = (input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
return {
......@@ -87,13 +174,16 @@
span: 14,
},
ruleForm,
formState,
onSubmit,
onSelectChange,
filterOption
};
},
}
</script>
<style scoped>
.ant-input-number {
width: 100%;
}
</style>
\ No newline at end of file
vite-demo/src/main.js
浏览文件 @ c8a01d31
......@@ -9,7 +9,7 @@ import App from './App.vue'
import './permission'
const app = createApp(App)
app.use(Antd)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')
vite-demo/src/views/form/antd/form.vue
浏览文件 @ c8a01d31
......@@ -18,20 +18,73 @@
{
inputType: "text",
fieldName: "vehicleNo",
label: "车牌号码",
placeholder: "请输入车牌号码"
},
// {
// inputType: "select",
// fieldName: "leaseStatus",
// label: "运营状态",
// placeholder: "请选择运营状态",
// options: [
// {value: "0", name: "闲置"},
// // { value: "4", name: "预备交车" },
// {value: "1", name: "运营中"}
// ]
// },
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",
fieldName: "vehicleNo9",
label: "日期选择2",
},
]
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或