Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

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

表单配置

上级 06b5fa94
隐藏空白更改
内联 并排
Showing with 79 addition and 41 deletion
vite-demo/src/components/configForm/form.vue
浏览文件 @ 4c019896
<template>
<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="Activity name">
<a-input v-model:value="formState.name"/>
</a-form-item>
<a-form-item label="Activity zone">
<a-select v-model:value="formState.region" placeholder="please select your zone">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="Activity time">
<a-date-picker
v-model:value="formState.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%"
<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">
<!-- v-model="ruleForm[`${item.fieldName}`]"-->
<a-input v-if="item.inputType === 'text'"
v-modal="item.fieldName"
:placeholder="item.placeholder?item.placeholder:'请输入'"
/>
</a-form-item>
<a-form-item label="Instant delivery">
<a-switch v-model:checked="formState.delivery"/>
</a-form-item>
<a-form-item label="Activity type">
<a-checkbox-group v-model:value="formState.type">
<a-checkbox value="1" name="type">Online</a-checkbox>
<a-checkbox value="2" name="type">Promotion</a-checkbox>
<a-checkbox value="3" name="type">Offline</a-checkbox>
</a-checkbox-group>
</a-form-item>
<a-form-item label="Resources">
<a-radio-group v-model:value="formState.resource">
<a-radio value="1">Sponsor</a-radio>
<a-radio value="2">Venue</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="Activity form">
<a-input v-model:value="formState.desc" type="textarea"/>
</a-form-item>
<!-- <a-form-item label="Activity zone">-->
<!-- <a-select v-model:value="formState.region" placeholder="please select your zone">-->
<!-- <a-select-option value="shanghai">Zone one</a-select-option>-->
<!-- <a-select-option value="beijing">Zone two</a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- <a-form-item label="Activity time">-->
<!-- <a-date-picker-->
<!-- v-model:value="formState.date1"-->
<!-- show-time-->
<!-- type="date"-->
<!-- placeholder="Pick a date"-->
<!-- style="width: 100%"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- <a-form-item label="Instant delivery">-->
<!-- <a-switch v-model:checked="formState.delivery"/>-->
<!-- </a-form-item>-->
<!-- <a-form-item label="Activity type">-->
<!-- <a-checkbox-group v-model:value="formState.type">-->
<!-- <a-checkbox value="1" name="type">Online</a-checkbox>-->
<!-- <a-checkbox value="2" name="type">Promotion</a-checkbox>-->
<!-- <a-checkbox value="3" name="type">Offline</a-checkbox>-->
<!-- </a-checkbox-group>-->
<!-- </a-form-item>-->
<!-- <a-form-item label="Resources">-->
<!-- <a-radio-group v-model:value="formState.resource">-->
<!-- <a-radio value="1">Sponsor</a-radio>-->
<!-- <a-radio value="2">Venue</a-radio>-->
<!-- </a-radio-group>-->
<!-- </a-form-item>-->
<!-- <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">Create</a-button>
<a-button style="margin-left: 10px">Cancel</a-button>
<a-button type="primary" @click="onSubmit">确认</a-button>
<a-button style="margin-left: 10px">关闭</a-button>
</a-form-item>
</a-form>
</template>
</a-form>
</template>
<script>
import {defineComponent, reactive, toRaw} from 'vue';
export default {
name: "form",
setup() {
props: {
config: Object,
},
setup(props) {
const formState = reactive({
name: '',
region: undefined,
......@@ -61,6 +71,8 @@
desc: '',
});
const ruleForm = reactive({})
const onSubmit = () => {
console.log('submit!', toRaw(formState));
};
......@@ -72,6 +84,7 @@
wrapperCol: {
span: 14,
},
ruleForm,
formState,
onSubmit,
};
......
vite-demo/src/views/form/antd/form.vue
浏览文件 @ 4c019896
<template>
<div>antd - form</div>
<configForm></configForm>
<configForm :config="configListForm"></configForm>
</template>
<script>
......@@ -10,6 +10,31 @@
name: "form",
components: {
configForm
},
setup() {
return {
configListForm: {
data: [
{
inputType: "text",
fieldName: "vehicleNo",
label: "车牌号码",
placeholder: "请输入车牌号码"
},
// {
// inputType: "select",
// fieldName: "leaseStatus",
// label: "运营状态",
// placeholder: "请选择运营状态",
// options: [
// {value: "0", name: "闲置"},
// // { value: "4", name: "预备交车" },
// {value: "1", name: "运营中"}
// ]
// },
]
}
}
}
}
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或