test
This commit is contained in:
Yuanjianghong
parent
d759c41678
commit
096e0a225f
|
|
@ -1,134 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- hidden PageHeaderWrapper title demo -->
|
|
||||||
<page-header-wrapper :title="false" content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。">
|
|
||||||
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
||||||
<a-form @submit="handleSubmit" :form="form">
|
|
||||||
<a-form-item
|
|
||||||
label="标题"
|
|
||||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
||||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
||||||
<a-input
|
|
||||||
v-decorator="[
|
|
||||||
'name',
|
|
||||||
{rules: [{ required: true, message: '请输入标题' }]}
|
|
||||||
]"
|
|
||||||
name="name"
|
|
||||||
placeholder="给目标起个名字" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="起止日期"
|
|
||||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
||||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
||||||
<a-range-picker
|
|
||||||
name="buildTime"
|
|
||||||
style="width: 100%"
|
|
||||||
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
|
|
||||||
rows="4"
|
|
||||||
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
|
|
||||||
rows="4"
|
|
||||||
placeholder="请输入衡量标准"
|
|
||||||
v-decorator="[
|
|
||||||
'type',
|
|
||||||
{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-input
|
|
||||||
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
|
|
||||||
v-decorator="[
|
|
||||||
'customer',
|
|
||||||
{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} }"
|
|
||||||
:required="false"
|
|
||||||
>
|
|
||||||
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="权重"
|
|
||||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
||||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
|
||||||
:required="false"
|
|
||||||
>
|
|
||||||
<a-input-number :min="0" :max="100" />
|
|
||||||
<span> %</span>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="目标公开"
|
|
||||||
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
||||||
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
|
||||||
:required="false"
|
|
||||||
help="客户、邀评人默认被分享"
|
|
||||||
>
|
|
||||||
<a-radio-group v-decorator="['target', { initialValue: 1 }]">
|
|
||||||
<a-radio :value="1">公开</a-radio>
|
|
||||||
<a-radio :value="2">部分公开</a-radio>
|
|
||||||
<a-radio :value="3">不公开</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
<a-form-item v-show="form.getFieldValue('target') === 2">
|
|
||||||
<a-select mode="multiple">
|
|
||||||
<a-select-option value="4">同事一</a-select-option>
|
|
||||||
<a-select-option value="5">同事二</a-select-option>
|
|
||||||
<a-select-option value="6">同事三</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
:wrapperCol="{ span: 24 }"
|
|
||||||
style="text-align: center"
|
|
||||||
>
|
|
||||||
<a-button htmlType="submit" type="primary">提交</a-button>
|
|
||||||
<a-button style="margin-left: 8px">保存</a-button>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-card>
|
|
||||||
</page-header-wrapper>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseForm',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
form: this.$form.createForm(this)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// handler
|
|
||||||
handleSubmit (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
this.form.validateFields((err, values) => {
|
|
||||||
if (!err) {
|
|
||||||
console.log('Received values of form: ', values)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,249 +0,0 @@
|
||||||
<template>
|
|
||||||
<page-header-wrapper>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
<a-descriptions title="退款申请">
|
|
||||||
<a-descriptions-item label="取货单号">1000000000</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="状态">已取货</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="销售单号">1234123421</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="子订单">3214321432</a-descriptions-item>
|
|
||||||
</a-descriptions>
|
|
||||||
<a-divider style="margin-bottom: 32px"/>
|
|
||||||
<a-descriptions title="用户信息">
|
|
||||||
<a-descriptions-item label="用户姓名">测试用户</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="联系电话">18100000000</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="常用快递">菜鸟仓储</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="取货地址">浙江省杭州市西湖区万塘路18号</a-descriptions-item>
|
|
||||||
<a-descriptions-item label="备注"> 无</a-descriptions-item>
|
|
||||||
</a-descriptions>
|
|
||||||
<a-divider style="margin-bottom: 32px"/>
|
|
||||||
|
|
||||||
<div class="title">退货商品</div>
|
|
||||||
<s-table
|
|
||||||
style="margin-bottom: 24px"
|
|
||||||
row-key="id"
|
|
||||||
:columns="goodsColumns"
|
|
||||||
:data="loadGoodsData">
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
|
|
||||||
<div class="title">退货进度</div>
|
|
||||||
<s-table
|
|
||||||
style="margin-bottom: 24px"
|
|
||||||
row-key="key"
|
|
||||||
:columns="scheduleColumns"
|
|
||||||
:data="loadScheduleData">
|
|
||||||
|
|
||||||
<template
|
|
||||||
slot="status"
|
|
||||||
slot-scope="status">
|
|
||||||
<a-badge :status="status" :text="status | statusFilter"/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</s-table>
|
|
||||||
</a-card>
|
|
||||||
</page-header-wrapper>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { STable } from '@/components'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
STable
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
goodsColumns: [
|
|
||||||
{
|
|
||||||
title: '商品编号',
|
|
||||||
dataIndex: 'id',
|
|
||||||
key: 'id'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '商品名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '商品条码',
|
|
||||||
dataIndex: 'barcode',
|
|
||||||
key: 'barcode'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '单价',
|
|
||||||
dataIndex: 'price',
|
|
||||||
key: 'price',
|
|
||||||
align: 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数量（件）',
|
|
||||||
dataIndex: 'num',
|
|
||||||
key: 'num',
|
|
||||||
align: 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '金额',
|
|
||||||
dataIndex: 'amount',
|
|
||||||
key: 'amount',
|
|
||||||
align: 'right'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
// 加载数据方法 必须为 Promise 对象
|
|
||||||
loadGoodsData: () => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
resolve({
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
id: '1234561',
|
|
||||||
name: '矿泉水 550ml',
|
|
||||||
barcode: '12421432143214321',
|
|
||||||
price: '2.00',
|
|
||||||
num: '1',
|
|
||||||
amount: '2.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1234562',
|
|
||||||
name: '凉茶 300ml',
|
|
||||||
barcode: '12421432143214322',
|
|
||||||
price: '3.00',
|
|
||||||
num: '2',
|
|
||||||
amount: '6.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1234563',
|
|
||||||
name: '好吃的薯片',
|
|
||||||
barcode: '12421432143214323',
|
|
||||||
price: '7.00',
|
|
||||||
num: '4',
|
|
||||||
amount: '28.00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '1234564',
|
|
||||||
name: '特别好吃的蛋卷',
|
|
||||||
barcode: '12421432143214324',
|
|
||||||
price: '8.50',
|
|
||||||
num: '3',
|
|
||||||
amount: '25.50'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
totalPage: 1,
|
|
||||||
totalCount: 10
|
|
||||||
})
|
|
||||||
}).then(res => {
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
scheduleColumns: [
|
|
||||||
{
|
|
||||||
title: '时间',
|
|
||||||
dataIndex: 'time',
|
|
||||||
key: 'time'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '当前进度',
|
|
||||||
dataIndex: 'rate',
|
|
||||||
key: 'rate'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
scopedSlots: { customRender: 'status' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作员ID',
|
|
||||||
dataIndex: 'operator',
|
|
||||||
key: 'operator'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '耗时',
|
|
||||||
dataIndex: 'cost',
|
|
||||||
key: 'cost'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loadScheduleData: () => {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
resolve({
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
time: '2017-10-01 14:10',
|
|
||||||
rate: '联系客户',
|
|
||||||
status: 'processing',
|
|
||||||
operator: '取货员 ID1234',
|
|
||||||
cost: '5mins'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
time: '2017-10-01 14:05',
|
|
||||||
rate: '取货员出发',
|
|
||||||
status: 'success',
|
|
||||||
operator: '取货员 ID1234',
|
|
||||||
cost: '1h'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
time: '2017-10-01 13:05',
|
|
||||||
rate: '取货员接单',
|
|
||||||
status: 'success',
|
|
||||||
operator: '取货员 ID1234',
|
|
||||||
cost: '5mins'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
time: '2017-10-01 13:00',
|
|
||||||
rate: '申请审批通过',
|
|
||||||
status: 'success',
|
|
||||||
operator: '系统',
|
|
||||||
cost: '1h'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
time: '2017-10-01 12:00',
|
|
||||||
rate: '发起退货申请',
|
|
||||||
status: 'success',
|
|
||||||
operator: '用户',
|
|
||||||
cost: '5mins'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
totalPage: 1,
|
|
||||||
totalCount: 10
|
|
||||||
})
|
|
||||||
}).then(res => {
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
statusFilter (status) {
|
|
||||||
const statusMap = {
|
|
||||||
'processing': '进行中',
|
|
||||||
'success': '完成',
|
|
||||||
'failed': '失败'
|
|
||||||
}
|
|
||||||
return statusMap[status]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
title () {
|
|
||||||
return this.$route.meta.title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.title {
|
|
||||||
color: rgba(0,0,0,.85);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue