Skip to content

A
ant-design-pro-vue
Commit 2fa7907b by Sendya
Options

feat: update form to 1.1.10

parent 86e93e7e
Showing with 266 additions and 249 deletions
package.json
......@@ -9,7 +9,7 @@
},
"dependencies": {
"@antv/data-set": "^0.10.1",
"ant-design-vue": "^1.1.10-beta",
"ant-design-vue": "^1.1.10",
"axios": "^0.18.0",
"dayjs": "^1.7.5",
"enquire.js": "^2.1.6",
......
src/views/form/BasicForm.vue
......@@ -6,10 +6,10 @@
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
v-decorator="{
id: 'name',
options: {rules: [{ required: true, message: '请输入标题' }]}
}"
v-decorator="[
'name',
{rules: [{ required: true, message: '请输入标题' }]}
]"
name="name"
placeholder="给目标起个名字" />
</a-form-item>
......@@ -20,34 +20,34 @@
<a-range-picker
name="buildTime"
style="width: 100%"
v-decorator="{
id: 'buildTime',
options: {rules: [{ required: true, message: '请选择起止日期' }]}
}" />
v-decorator="[
'buildTime',
{rules: [{ required: true, message: '请选择起止日期' }]}
]" />
</a-form-item>
<a-form-item
label="目标描述"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
v-decorator="{
id: 'description',
options: {rules: [{ required: true, message: '请输入目标描述' }]}
}"
rows="4"
placeholder="请输入你阶段性工作目标" />
placeholder="请输入你阶段性工作目标"
v-decorator="[
'description',
{rules: [{ required: true, message: '请输入目标描述' }]}
]" />
</a-form-item>
<a-form-item
label="衡量标准"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea
v-decorator="{
id: 'type',
options: {rules: [{ required: true, message: '请输入衡量标准' }]}
}"
rows="4"
placeholder="请输入衡量标准" />
placeholder="请输入衡量标准"
v-decorator="[
'type',
{rules: [{ required: true, message: '请输入衡量标准' }]}
]" />
</a-form-item>
<a-form-item
label="客户"
......@@ -55,10 +55,10 @@
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
v-decorator="{
id: 'customer',
options: {rules: [{ required: true, message: '请描述你服务的客户' }]}
}" />
v-decorator="[
'customer',
{rules: [{ required: true, message: '请描述你服务的客户' }]}
]" />
</a-form-item>
<a-form-item
label="邀评人"
......
src/views/form/advancedForm/AdvancedForm.vue
......@@ -38,7 +38,7 @@
<span v-else>
<a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical" />
<a @click="cancle(record.key)">取消</a>
<a @click="cancel(record.key)">取消</a>
</span>
</template>
<span v-else>
......@@ -50,7 +50,7 @@
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成员</a-button>
</form>
</a-card>
......@@ -136,7 +136,7 @@
handleSubmit (e) {
e.preventDefault()
},
newMeber () {
newMember () {
this.data.push({
key: '-1',
name: '',
......@@ -163,7 +163,7 @@
const data = this.data
return (newData || data).filter(item => item.key === key)[0]
},
cancle (key) {
cancel (key) {
let target = this.data.filter(item => item.key === key)[0]
target.editable = false
},
......
src/views/form/advancedForm/RepositoryForm.vue
<template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="仓库名"
fieldDecoratorId="repository.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
>
<a-input placeholder="请输入仓库名称" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="仓库域名"
fieldDecoratorId="repository.domain"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
>
<a-input addonBefore="http://" addonAfter=".com" placeholder="请输入"/>
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库管理员"
fieldDecoratorId="repository.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
>
<a-select placeholder="请选择管理员">
<a-select-option value="王同学">王同学</a-select-option>
<a-select-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="审批人"
fieldDecoratorId="repository.auditor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
>
<a-select placeholder="请选择审批员">
<a-select-option value="王晓丽">王晓丽</a-select-option>
<a-select-option value="李军">李军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="生效日期"
fieldDecoratorId="repository.effectiveDate"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
>
<a-range-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库类型"
fieldDecoratorId="repository.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
>
<a-select placeholder="请选择仓库类型">
<a-select-option value="公开">公开</a-select-option>
<a-select-option value="私密">私密</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "RepositoryForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
},
validate (rule, value, callback) {
const regex = /^user-(.*)$/
if (!regex.test(value)) {
callback('需要以 user- 开头')
}
callback()
}
}
}
</script>
<style scoped>
<template>
<a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item label="仓库名">
<a-input
placeholder="请输入仓库名称"
v-decorator="[
'repository.name',
{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="仓库域名">
<a-input
addonBefore="http://"
addonAfter=".com"
placeholder="请输入"
v-decorator="[
'repository.domain',
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库管理员">
<a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
<a-select-option value="王同学">王同学</a-select-option>
<a-select-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="审批人">
<a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
<a-select-option value="王晓丽">王晓丽</a-select-option>
<a-select-option value="李军">李军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="生效日期">
<a-range-picker
style="width: 100%"
v-decorator="[
'repository.effectiveDate',
{rules: [{ required: true, message: '请选择生效日期'}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库类型">
<a-select
placeholder="请选择仓库类型"
v-decorator="[
'repository.type',
{rules: [{ required: true, message: '请选择仓库类型'}]}
]" >
<a-select-option value="公开">公开</a-select-option>
<a-select-option value="私密">私密</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "RepositoryForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
data () {
return {
form: this.$form.createForm(this)
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
},
validate (rule, value, callback) {
const regex = /^user-(.*)$/
if (!regex.test(value)) {
callback('需要以 user- 开头')
}
callback()
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/form/advancedForm/TaskForm.vue
<template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="任务名"
fieldDecoratorId="task.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
>
<a-input placeholder="请输入任务名称" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="任务描述"
fieldDecoratorId="task.description"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
>
<a-input placeholder="请输入任务描述"/>
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="执行人"
fieldDecoratorId="task.executor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
>
<a-select placeholder="请选择执行人">
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="责任人"
fieldDecoratorId="task.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
>
<a-select placeholder="请选择责任人">
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="提醒时间"
fieldDecoratorId="task.time"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
>
<a-time-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="任务类型"
fieldDecoratorId="task.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
>
<a-select placeholder="请选择任务类型">
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "TaskForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
}
}
}
</script>
<style scoped>
<template>
<a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="任务名">
<a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="任务描述">
<a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="执行人">
<a-select
placeholder="请选择执行人"
v-decorator="[
'task.executor',
{rules: [{ required: true, message: '请选择执行人'}]}
]" >
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="责任人">
<a-select
placeholder="请选择责任人"
v-decorator="[
'task.manager',
{rules: [{ required: true, message: '请选择责任人'}]}
]" >
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="提醒时间">
<a-time-picker
style="width: 100%"
v-decorator="[
'task.time',
{rules: [{ required: true, message: '请选择提醒时间'}]}
]" />
</a-form-item>
</a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="任务类型">
<a-select
placeholder="请选择任务类型"
v-decorator="[ 'task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="showSubmit">
<a-button htmlType="submit" >Submit</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: "TaskForm",
props: {
showSubmit: {
type: Boolean,
default: false
}
},
data () {
return {
form: this.$form.createForm(this)
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.$notification['error']({
message: 'Received values of form:',
description: values
})
}
})
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/form/stepForm/Step3.vue
......@@ -22,7 +22,7 @@
</div>
<div slot="action">
<a-button type="primary" @click="finish">再转一笔</a-button>
<a-button style="margin-left: 8px">查看账单</a-button>
<a-button style="margin-left: 8px" @click="toOrderList">查看账单</a-button>
</div>
</result>
</a-form>
......@@ -45,6 +45,9 @@
methods: {
finish () {
this.$emit('finish')
},
toOrderList () {
this.$router.push('/list/query-list')
}
}
}
......
yarn.lock
......@@ -1366,10 +1366,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
dependencies:
color-convert "^1.9.0"
ant-design-vue@^1.1.10-beta:
version "1.1.10-beta"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.10-beta.tgz#6f0aeb3db2d512de8ab447a74ab7e51d39fcd434"
integrity sha512-Vj5y9RCCpKkGCsRVqUaXighvEfAAMkQlir+uBCO08FgfBWM73Q8NYJ8RSehpt55ucdb3RE1fHmowzio3p6glnQ==
ant-design-vue@^1.1.10:
version "1.1.10"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.10.tgz#b9ebcbab6dc72e0576920f8dc3fe7498e9d4bf61"
integrity sha512-NJefmFr1WZO6HQVtENDyIquTYMx+3NLKgQdb0PY/U1+VYfnCw21TBl3eOLJTFDC7YKamnCH3pz0Ok0OKr7IVfw==
dependencies:
add-dom-event-listener "^1.0.2"
array-tree-filter "^2.1.0"
......@@ -1392,7 +1392,7 @@ ant-design-vue@^1.1.10-beta:
resize-observer-polyfill "^1.5.0"
shallow-equal "^1.0.0"
shallowequal "^1.0.2"
vue-ref "^1.0.2"
vue-ref "^1.0.3"
warning "^3.0.0"
anymatch@^2.0.0:
......@@ -9056,10 +9056,10 @@ vue-ls@^3.2.0:
resolved "https://registry.yarnpkg.com/vue-ls/-/vue-ls-3.2.0.tgz#33356ad3ec9c30dac203757cf4036abe4ff767b3"
integrity sha512-39FGQMrT9NbG5WGDJfxWj19ZD1tsVoBBN1n8qvq6/+uRB9BansQ9NSyclQ9TzZatRkkM/VEQo5oTsijdM5hGFw==
vue-ref@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/vue-ref/-/vue-ref-1.0.2.tgz#8822640ece91665f01e958bd1fde4038c75e0f34"
integrity sha512-VQ9/uWlELEaFO7Qws94BAvr83tx4H310nvE32PUaMgHwLqIFtE9tmvxA6G0dUdegUeOrWXSgkg2HGUpqSMjYPw==
vue-ref@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/vue-ref/-/vue-ref-1.0.3.tgz#5b7bbfc6f5833e13f5a9155ac686fafdb03dbcad"
integrity sha512-6t9bwx6qJGKF+Mo6wEQWMzBAwx+h/oiEKuTC4+eiKzLdIRDPbbvTpsemWFsOKBOUwRGi6WKKqMzVQkkE8QcEfg==
vue-router@^3.0.1:
version "3.0.2"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment