Skip to content

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

feat: update form to 1.1.10

parent 86e93e7e
Showing with 115 additions and 100 deletions
package.json
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
}, },
"dependencies": { "dependencies": {
"@antv/data-set": "^0.10.1", "@antv/data-set": "^0.10.1",
"ant-design-vue": "^1.1.10-beta", "ant-design-vue": "^1.1.10",
"axios": "^0.18.0", "axios": "^0.18.0",
"dayjs": "^1.7.5", "dayjs": "^1.7.5",
"enquire.js": "^2.1.6", "enquire.js": "^2.1.6",
......
src/views/form/BasicForm.vue
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
:labelCol="{lg: {span: 7}, sm: {span: 7}}" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input <a-input
v-decorator="{ v-decorator="[
id: 'name', 'name',
options: {rules: [{ required: true, message: '请输入标题' }]} {rules: [{ required: true, message: '请输入标题' }]}
}" ]"
name="name" name="name"
placeholder="给目标起个名字" /> placeholder="给目标起个名字" />
</a-form-item> </a-form-item>
...@@ -20,34 +20,34 @@ ...@@ -20,34 +20,34 @@
<a-range-picker <a-range-picker
name="buildTime" name="buildTime"
style="width: 100%" style="width: 100%"
v-decorator="{ v-decorator="[
id: 'buildTime', 'buildTime',
options: {rules: [{ required: true, message: '请选择起止日期' }]} {rules: [{ required: true, message: '请选择起止日期' }]}
}" /> ]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="目标描述" label="目标描述"
:labelCol="{lg: {span: 7}, sm: {span: 7}}" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea <a-textarea
v-decorator="{
id: 'description',
options: {rules: [{ required: true, message: '请输入目标描述' }]}
}"
rows="4" rows="4"
placeholder="请输入你阶段性工作目标" /> placeholder="请输入你阶段性工作目标"
v-decorator="[
'description',
{rules: [{ required: true, message: '请输入目标描述' }]}
]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="衡量标准" label="衡量标准"
:labelCol="{lg: {span: 7}, sm: {span: 7}}" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-textarea <a-textarea
v-decorator="{
id: 'type',
options: {rules: [{ required: true, message: '请输入衡量标准' }]}
}"
rows="4" rows="4"
placeholder="请输入衡量标准" /> placeholder="请输入衡量标准"
v-decorator="[
'type',
{rules: [{ required: true, message: '请输入衡量标准' }]}
]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="客户" label="客户"
...@@ -55,10 +55,10 @@ ...@@ -55,10 +55,10 @@
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input <a-input
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
v-decorator="{ v-decorator="[
id: 'customer', 'customer',
options: {rules: [{ required: true, message: '请描述你服务的客户' }]} {rules: [{ required: true, message: '请描述你服务的客户' }]}
}" /> ]" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="邀评人" label="邀评人"
......
src/views/form/advancedForm/AdvancedForm.vue
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<span v-else> <span v-else>
<a @click="saveRow(record.key)">保存</a> <a @click="saveRow(record.key)">保存</a>
<a-divider type="vertical" /> <a-divider type="vertical" />
<a @click="cancle(record.key)">取消</a> <a @click="cancel(record.key)">取消</a>
</span> </span>
</template> </template>
<span v-else> <span v-else>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</span> </span>
</template> </template>
</a-table> </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> </form>
</a-card> </a-card>
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
handleSubmit (e) { handleSubmit (e) {
e.preventDefault() e.preventDefault()
}, },
newMeber () { newMember () {
this.data.push({ this.data.push({
key: '-1', key: '-1',
name: '', name: '',
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
const data = this.data const data = this.data
return (newData || data).filter(item => item.key === key)[0] return (newData || data).filter(item => item.key === key)[0]
}, },
cancle (key) { cancel (key) {
let target = this.data.filter(item => item.key === key)[0] let target = this.data.filter(item => item.key === key)[0]
target.editable = false target.editable = false
}, },
......
src/views/form/advancedForm/RepositoryForm.vue
<template> <template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form"> <a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item label="仓库名">
label="仓库名" <a-input
fieldDecoratorId="repository.name" placeholder="请输入仓库名称"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}" v-decorator="[
> 'repository.name',
<a-input placeholder="请输入仓库名称" /> {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="仓库域名" label="仓库域名">
fieldDecoratorId="repository.domain" <a-input
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}" addonBefore="http://"
> addonAfter=".com"
<a-input addonBefore="http://" addonAfter=".com" placeholder="请输入"/> placeholder="请输入"
v-decorator="[
'repository.domain',
{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="仓库管理员" label="仓库管理员">
fieldDecoratorId="repository.manager" <a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
: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-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option> <a-select-option value="黄同学">黄同学</a-select-option>
...@@ -36,11 +38,8 @@ ...@@ -36,11 +38,8 @@
<a-row class="form-row" :gutter="16"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="审批人" label="审批人">
fieldDecoratorId="repository.auditor" <a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
: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-option value="李军">李军</a-select-option>
</a-select> </a-select>
...@@ -48,20 +47,24 @@ ...@@ -48,20 +47,24 @@
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="生效日期" label="生效日期">
fieldDecoratorId="repository.effectiveDate" <a-range-picker
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}" style="width: 100%"
> v-decorator="[
<a-range-picker style="width: 100%" /> 'repository.effectiveDate',
{rules: [{ required: true, message: '请选择生效日期'}]}
]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="仓库类型" label="仓库类型">
fieldDecoratorId="repository.type" <a-select
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}" placeholder="请选择仓库类型"
> v-decorator="[
<a-select placeholder="请选择仓库类型"> 'repository.type',
{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-option value="私密">私密</a-select-option>
</a-select> </a-select>
...@@ -83,6 +86,11 @@ ...@@ -83,6 +86,11 @@
default: false default: false
} }
}, },
data () {
return {
form: this.$form.createForm(this)
}
},
methods: { methods: {
handleSubmit (e) { handleSubmit (e) {
e.preventDefault() e.preventDefault()
......
src/views/form/advancedForm/TaskForm.vue
<template> <template>
<a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form"> <a-form @submit="handleSubmit" :form="form" class="form">
<a-row class="form-row" :gutter="16"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="任务名" label="任务名">
fieldDecoratorId="task.name" <a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
>
<a-input placeholder="请输入任务名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="任务描述" label="任务描述">
fieldDecoratorId="task.description" <a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
>
<a-input placeholder="请输入任务描述"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="执行人" label="执行人">
fieldDecoratorId="task.executor" <a-select
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}" placeholder="请选择执行人"
> v-decorator="[
<a-select placeholder="请选择执行人"> 'task.executor',
{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-option value="李大刀">李大刀</a-select-option>
</a-select> </a-select>
...@@ -35,11 +31,13 @@ ...@@ -35,11 +31,13 @@
<a-row class="form-row" :gutter="16"> <a-row class="form-row" :gutter="16">
<a-col :lg="6" :md="12" :sm="24"> <a-col :lg="6" :md="12" :sm="24">
<a-form-item <a-form-item
label="责任人" label="责任人">
fieldDecoratorId="task.manager" <a-select
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}" placeholder="请选择责任人"
> v-decorator="[
<a-select placeholder="请选择责任人"> 'task.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-option value="李红军">李红军</a-select-option>
</a-select> </a-select>
...@@ -47,20 +45,21 @@ ...@@ -47,20 +45,21 @@
</a-col> </a-col>
<a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24"> <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item <a-form-item
label="提醒时间" label="提醒时间">
fieldDecoratorId="task.time" <a-time-picker
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}" style="width: 100%"
> v-decorator="[
<a-time-picker style="width: 100%" /> 'task.time',
{rules: [{ required: true, message: '请选择提醒时间'}]}
]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24"> <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item <a-form-item
label="任务类型" label="任务类型">
fieldDecoratorId="task.type" <a-select
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}" placeholder="请选择任务类型"
> v-decorator="[ 'task.type', {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-option value="周期执行">周期执行</a-select-option>
</a-select> </a-select>
...@@ -82,6 +81,11 @@ ...@@ -82,6 +81,11 @@
default: false default: false
} }
}, },
data () {
return {
form: this.$form.createForm(this)
}
},
methods: { methods: {
handleSubmit (e) { handleSubmit (e) {
e.preventDefault() e.preventDefault()
......
src/views/form/stepForm/Step3.vue
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
<div slot="action"> <div slot="action">
<a-button type="primary" @click="finish">再转一笔</a-button> <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> </div>
</result> </result>
</a-form> </a-form>
...@@ -45,6 +45,9 @@ ...@@ -45,6 +45,9 @@
methods: { methods: {
finish () { finish () {
this.$emit('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: ...@@ -1366,10 +1366,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
dependencies: dependencies:
color-convert "^1.9.0" color-convert "^1.9.0"
ant-design-vue@^1.1.10-beta: ant-design-vue@^1.1.10:
version "1.1.10-beta" version "1.1.10"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.10-beta.tgz#6f0aeb3db2d512de8ab447a74ab7e51d39fcd434" resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.1.10.tgz#b9ebcbab6dc72e0576920f8dc3fe7498e9d4bf61"
integrity sha512-Vj5y9RCCpKkGCsRVqUaXighvEfAAMkQlir+uBCO08FgfBWM73Q8NYJ8RSehpt55ucdb3RE1fHmowzio3p6glnQ== integrity sha512-NJefmFr1WZO6HQVtENDyIquTYMx+3NLKgQdb0PY/U1+VYfnCw21TBl3eOLJTFDC7YKamnCH3pz0Ok0OKr7IVfw==
dependencies: dependencies:
add-dom-event-listener "^1.0.2" add-dom-event-listener "^1.0.2"
array-tree-filter "^2.1.0" array-tree-filter "^2.1.0"
...@@ -1392,7 +1392,7 @@ ant-design-vue@^1.1.10-beta: ...@@ -1392,7 +1392,7 @@ ant-design-vue@^1.1.10-beta:
resize-observer-polyfill "^1.5.0" resize-observer-polyfill "^1.5.0"
shallow-equal "^1.0.0" shallow-equal "^1.0.0"
shallowequal "^1.0.2" shallowequal "^1.0.2"
vue-ref "^1.0.2" vue-ref "^1.0.3"
warning "^3.0.0" warning "^3.0.0"
anymatch@^2.0.0: anymatch@^2.0.0:
...@@ -9056,10 +9056,10 @@ vue-ls@^3.2.0: ...@@ -9056,10 +9056,10 @@ vue-ls@^3.2.0:
resolved "https://registry.yarnpkg.com/vue-ls/-/vue-ls-3.2.0.tgz#33356ad3ec9c30dac203757cf4036abe4ff767b3" resolved "https://registry.yarnpkg.com/vue-ls/-/vue-ls-3.2.0.tgz#33356ad3ec9c30dac203757cf4036abe4ff767b3"
integrity sha512-39FGQMrT9NbG5WGDJfxWj19ZD1tsVoBBN1n8qvq6/+uRB9BansQ9NSyclQ9TzZatRkkM/VEQo5oTsijdM5hGFw== integrity sha512-39FGQMrT9NbG5WGDJfxWj19ZD1tsVoBBN1n8qvq6/+uRB9BansQ9NSyclQ9TzZatRkkM/VEQo5oTsijdM5hGFw==
vue-ref@^1.0.2: vue-ref@^1.0.3:
version "1.0.2" version "1.0.3"
resolved "https://registry.yarnpkg.com/vue-ref/-/vue-ref-1.0.2.tgz#8822640ece91665f01e958bd1fde4038c75e0f34" resolved "https://registry.yarnpkg.com/vue-ref/-/vue-ref-1.0.3.tgz#5b7bbfc6f5833e13f5a9155ac686fafdb03dbcad"
integrity sha512-VQ9/uWlELEaFO7Qws94BAvr83tx4H310nvE32PUaMgHwLqIFtE9tmvxA6G0dUdegUeOrWXSgkg2HGUpqSMjYPw== integrity sha512-6t9bwx6qJGKF+Mo6wEQWMzBAwx+h/oiEKuTC4+eiKzLdIRDPbbvTpsemWFsOKBOUwRGi6WKKqMzVQkkE8QcEfg==
vue-router@^3.0.1: vue-router@^3.0.1:
version "3.0.2" 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