JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端升级到2.4.3版本

Browse Source
This commit is contained in:
zer0Black
2022-02-24 17:24:09 +08:00
parent 371c3069da
commit 5d221272e4
59 changed files with 3347 additions and 1565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/demo/JVXETableDemo.vue
+5
View File
@@ -10,6 +10,10 @@
<j-vxe-demo2/>
</a-tab-pane>
<a-tab-pane tab="联动示例" key="3" forceRender>
<j-vxe-demo3/>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
@@ -17,6 +21,7 @@
<script>
import JVxeDemo1 from '@views/demo/JVxeDemo/JVxeDemo1'
import JVxeDemo2 from '@views/demo/JVxeDemo/JVxeDemo2'
import JVxeDemo3 from '@views/demo/JVxeDemo/JVxeDemo3'
export default {
name: 'JVXETableDemo',
jero-web/src/views/demo/JVxeDemo/JVxeDemo3.vue
+182
View File
@@ -0,0 +1,182 @@
<template>
<j-vxe-table
ref="vTable"
toolbar
row-number
row-selection
keep-source
:height="484"
:dataSource="dataSource"
:columns="columns"
:linkage-config="linkageConfig"
/>
</template>
<script>
import { JVXETypes } from '@/components/jero/JVxeTable'
export default {
name: 'JVxeDemo3',
data() {
return {
// 联动配置
linkageConfig: [
{requestData: this.requestData, key: 's1'},
// 可配置多个联动
{requestData: this.loadData, key: 'level1',},
],
columns: [
{
title: '性别',
key: 'sex',
type: JVXETypes.select,
dictCode: 'sex',
width: '180px',
placeholder: '请选择${title}',
},
{
title: '省/直辖市/自治区',
key: 's1',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}',
// 联动字段（即下一级的字段）
linkageKey: 's2',
},
{
title: '市',
key: 's2',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}',
// 联动字段（即下一级的字段）
linkageKey: 's3',
},
{
title: '县/区',
key: 's3',
type: JVXETypes.select,
width: '180px',
options: [],
placeholder: '请选择${title}',
},
{
title: '一级',
key: 'level1',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}',
// 联动字段（即下一级的字段）
linkageKey: 'level2',
},
{
title: '二级',
key: 'level2',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}',
// 联动字段（即下一级的字段）
linkageKey: 'level3',
},
{
title: '三级',
key: 'level3',
type: JVXETypes.select,
width: '180px',
placeholder: '请选择${title}',
}
],
dataSource: [
{sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7'},
{sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14'},
],
// 模拟数据
mockData: [
{text: '北京市', value: '110000', parent: ''},
{text: '天津市', value: '120000', parent: ''},
{text: '河北省', value: '130000', parent: ''},
{text: '上海市', value: '310000', parent: ''},
{text: '北京市', value: '110100', parent: '110000'},
{text: '天津市市', value: '120100', parent: '120000'},
{text: '石家庄市', value: '130100', parent: '130000'},
{text: '唐山市', value: '130200', parent: '130000'},
{text: '秦皇岛市', value: '130300', parent: '130000'},
{text: '上海市', value: '310100', parent: '310000'},
{text: '东城区', value: '110101', parent: '110100'},
{text: '西城区', value: '110102', parent: '110100'},
{text: '朝阳区', value: '110105', parent: '110100'},
{text: '和平区', value: '120101', parent: '120100'},
{text: '河东区', value: '120102', parent: '120100'},
{text: '河西区', value: '120103', parent: '120100'},
{text: '黄浦区', value: '310101', parent: '310100'},
{text: '徐汇区', value: '310104', parent: '310100'},
{text: '长宁区', value: '310105', parent: '310100'},
{text: '长安区', value: '130102', parent: '130100'},
{text: '桥西区', value: '130104', parent: '130100'},
{text: '新华区', value: '130105', parent: '130100'},
{text: '路南区', value: '130202', parent: '130200'},
{text: '路北区', value: '130203', parent: '130200'},
{text: '古冶区', value: '130204', parent: '130200'},
{text: '海港区', value: '130302', parent: '130300'},
{text: '山海关区', value: '130303', parent: '130300'},
{text: '北戴河区', value: '130304', parent: '130300'},
],
mockData1: [
{id: '1', name: '图书馆', parentId: '0'},
{id: '2', name: '电影院', parentId: '0'},
{id: '3', name: '一楼', parentId: '1'},
{id: '4', name: '二楼', parentId: '1'},
{id: '5', name: '中影星美', parentId: '2'},
{id: '6', name: '万达国际', parentId: '2'},
{id: '7', name: '技术图书', parentId: '3'},
{id: '8', name: '财务图书', parentId: '3'},
{id: '9', name: '儿童图书', parentId: '4'},
{id: '10', name: '励志图书', parentId: '4'},
{id: '11', name: '1号厅', parentId: '5'},
{id: '12', name: '2号厅', parentId: '5'},
{id: '13', name: 'I-MAX厅', parentId: '6'},
{id: '14', name: '3D厅', parentId: '6'},
],
}
},
methods: {
/**
* 模拟从后台查询数据
*/
requestData(parent) {
return new Promise((resolve, reject) => {
let data = this.mockData.filter(i => i.parent === parent)
setTimeout(() => {
resolve(data)
}, 500)
})
},
// 模拟加载数据，模拟数据格式不同的情况下如何组装数据
async loadData(parent) {
return new Promise((resolve, reject) => {
let parentId = parent === '' ? '0' : parent
let data = this.mockData1.filter(i => i.parentId === parentId)
data = data.map(item => {
return {
// 必须包含以下两个字段
value: item.id,
text: item.name,
}
})
setTimeout(() => {
resolve(data)
}, 500)
})
},
}
}
</script>
<style scoped>
</style>
jero-web/src/views/demo/JeroOrderModalForJVexTable.vue
+312
View File
@@ -0,0 +1,312 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
:destroyOnClose="true"
:maskClosable="false"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" >
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
<a-input placeholder="请输入订单号" v-model="model.orderCode"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单类型">
<a-select placeholder="请选择订单类型" v-model="model.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单日期">
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-model-item label="订单金额">
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单备注">
<a-input placeholder="请输入订单备注" v-model="model.content"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!-- 子表单区域 -->
<a-tabs v-model="activeKey" @change="handleChangeTabs">
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
<j-vxe-table
ref="editableTable1"
toolbar
row-number
row-selection
keep-source
:height="300"
:loading="table1.loading"
:dataSource="table1.dataSource"
:columns="table1.columns"
style="margin-top: 8px;"/>
</a-tab-pane>
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
<j-vxe-table
ref="editableTable2"
toolbar
row-number
row-selection
keep-source
:height="300"
:loading="table2.loading"
:dataSource="table2.dataSource"
:columns="table2.columns"
style="margin-top: 8px;"/>
</a-tab-pane>
</a-tabs>
</a-spin>
</a-modal>
</template>
<script>
import JEditableTable from '@/components/jero/JEditableTable'
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
import { httpAction, getAction } from '@/api/manage'
import { JVXETypes } from '@/components/jero/JVxeTable'
import JDate from '@/components/jero/JDate'
export default {
name: 'jeroOrderModalForJvexTable',
components: {
JDate, JEditableTable
},
data() {
return {
title: '操作',
visible: false,
confirmLoading: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 - 6 }
},
activeKey: '1',
// 客户信息
table1: {
loading: false,
dataSource: [],
columns: [
{
title: '客户名',
key: 'name',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '性别',
key: 'sex',
width: '18%',
type: JVXETypes.select,
options: [ // 下拉选项
{ title: '男', value: '1' },
{ title: '女', value: '2' }
],
defaultValue: '',
placeholder: '请选择${title}'
},
{
title: '身份证号',
key: 'idcard',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
message: '${title}格式不正确'
}]
},
{
title: '手机号',
key: 'telphone',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^1(3|4|5|7|8)\\d{9}$',
message: '${title}格式不正确'
}]
}
]
},
// 机票信息
table2: {
loading: false,
dataSource: [],
columns: [
{
title: '航班号',
key: 'ticketCode',
width: '40%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '航班时间',
key: 'tickectDate',
width: '30%',
type: JVXETypes.date,
placeholder: '请选择${title}',
defaultValue: ''
}
]
},
url: {
add: '/test/jeroOrderMain/add',
edit: '/test/jeroOrderMain/edit',
orderCustomerList: '/test/jeroOrderMain/queryOrderCustomerListByMainId',
orderTicketList: '/test/jeroOrderMain/queryOrderTicketListByMainId'
}
}
},
created() {
},
methods: {
// 获取所有的editableTable实例
getAllTable() {
return Promise.all([
getRefPromise(this, 'editableTable1'),
getRefPromise(this, 'editableTable2')
])
},
add() {
// 默认新增一条数据
this.getAllTable().then(editableTables => {
//editableTables[0].add()
//editableTables[1].add()
})
this.edit({})
},
edit(record) {
this.visible = true
this.activeKey = '1'
this.model = Object.assign({}, record)
// 加载子表数据
if (this.model.id) {
let params = { id: this.model.id }
this.requestTableData(this.url.orderCustomerList, params, this.table1)
this.requestTableData(this.url.orderTicketList, params, this.table2)
}
},
close() {
this.visible = false
this.getAllTable().then(editableTables => {
this.table1.dataSource=[];
this.table2.dataSource=[];
})
this.$emit('close')
},
/** 查询某个tab的数据 */
requestTableData(url, params, tab) {
tab.loading = true
getAction(url, params).then(res => {
tab.dataSource = res.result || []
}).finally(() => {
tab.loading = false
})
},
handleOk() {
this.validateFields()
},
handleCancel() {
this.close()
},
/** ATab 选项卡切换事件 */
handleChangeTabs(key) {
getRefPromise(this, `editableTable${key}`).then(editableTable => {
editableTable.resetScrollTop()
})
},
/** 触发表单验证 */
validateFields() {
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormModelAndTables(this.$refs.form,this.model, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
// 发起请求
return this.requestAddOrEdit(formData)
}).catch(e => {
if (e.error === VALIDATE_FAILED) {
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
} else {
console.error(e)
}
})
},
/** 整理成formData */
classifyIntoFormData(allValues) {
let orderMain = Object.assign(this.model, allValues.formValue)
return {
...orderMain, // 展开
jeroOrderCustomerList: allValues.tablesValue[0].tableData,
jeroOrderTicketList: allValues.tablesValue[1].tableData
}
},
/** 发起新增或修改的请求 */
requestAddOrEdit(formData) {
let url = this.url.add, method = 'post'
if (this.model.id) {
url = this.url.edit
method = 'put'
}
this.confirmLoading = true
httpAction(url, formData, method).then((res) => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
}
}
</script>
<style scoped>
</style>
jero-web/src/views/demo/modules/JEditableTable/JeroOrderModalForJVexTable.vue
+312
View File
@@ -0,0 +1,312 @@
<template>
<a-modal
:title="title"
:width="1200"
:visible="visible"
:destroyOnClose="true"
:maskClosable="false"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" >
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
<a-input placeholder="请输入订单号" v-model="model.orderCode"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单类型">
<a-select placeholder="请选择订单类型" v-model="model.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单日期">
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-model-item label="订单金额">
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-model-item label="订单备注">
<a-input placeholder="请输入订单备注" v-model="model.content"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<!-- 子表单区域 -->
<a-tabs v-model="activeKey" @change="handleChangeTabs">
<a-tab-pane tab="客户信息" key="1" :forceRender="true">
<j-vxe-table
ref="editableTable1"
toolbar
row-number
row-selection
keep-source
:height="300"
:loading="table1.loading"
:dataSource="table1.dataSource"
:columns="table1.columns"
style="margin-top: 8px;"/>
</a-tab-pane>
<a-tab-pane tab="机票信息" key="2" :forceRender="true">
<j-vxe-table
ref="editableTable2"
toolbar
row-number
row-selection
keep-source
:height="300"
:loading="table2.loading"
:dataSource="table2.dataSource"
:columns="table2.columns"
style="margin-top: 8px;"/>
</a-tab-pane>
</a-tabs>
</a-spin>
</a-modal>
</template>
<script>
import JEditableTable from '@/components/jero/JEditableTable'
import { VALIDATE_FAILED, getRefPromise, validateFormModelAndTables } from '@/components/jero/JVxeTable/utils/vxeUtils'
import { httpAction, getAction } from '@/api/manage'
import { JVXETypes } from '@/components/jero/JVxeTable'
import JDate from '@/components/jero/JDate'
export default {
name: 'JeroOrderModalForJvexTable',
components: {
JDate, JEditableTable
},
data() {
return {
title: '操作',
visible: false,
confirmLoading: false,
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 - 6 }
},
activeKey: '1',
// 客户信息
table1: {
loading: false,
dataSource: [],
columns: [
{
title: '客户名',
key: 'name',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '性别',
key: 'sex',
width: '18%',
type: JVXETypes.select,
options: [ // 下拉选项
{ title: '男', value: '1' },
{ title: '女', value: '2' }
],
defaultValue: '',
placeholder: '请选择${title}'
},
{
title: '身份证号',
key: 'idcard',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
message: '${title}格式不正确'
}]
},
{
title: '手机号',
key: 'telphone',
width: '24%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{
pattern: '^1(3|4|5|7|8)\\d{9}$',
message: '${title}格式不正确'
}]
}
]
},
// 机票信息
table2: {
loading: false,
dataSource: [],
columns: [
{
title: '航班号',
key: 'ticketCode',
width: '40%',
type: JVXETypes.input,
defaultValue: '',
placeholder: '请输入${title}',
validateRules: [{ required: true, message: '${title}不能为空' }]
},
{
title: '航班时间',
key: 'tickectDate',
width: '30%',
type: JVXETypes.date,
placeholder: '请选择${title}',
defaultValue: ''
}
]
},
url: {
add: '/test/jeecgOrderMain/add',
edit: '/test/jeecgOrderMain/edit',
orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
orderTicketList: '/test/jeecgOrderMain/queryOrderTicketListByMainId'
}
}
},
created() {
},
methods: {
// 获取所有的editableTable实例
getAllTable() {
return Promise.all([
getRefPromise(this, 'editableTable1'),
getRefPromise(this, 'editableTable2')
])
},
add() {
// 默认新增一条数据
this.getAllTable().then(editableTables => {
//editableTables[0].add()
//editableTables[1].add()
})
this.edit({})
},
edit(record) {
this.visible = true
this.activeKey = '1'
this.model = Object.assign({}, record)
// 加载子表数据
if (this.model.id) {
let params = { id: this.model.id }
this.requestTableData(this.url.orderCustomerList, params, this.table1)
this.requestTableData(this.url.orderTicketList, params, this.table2)
}
},
close() {
this.visible = false
this.getAllTable().then(editableTables => {
this.table1.dataSource=[];
this.table2.dataSource=[];
})
this.$emit('close')
},
/** 查询某个tab的数据 */
requestTableData(url, params, tab) {
tab.loading = true
getAction(url, params).then(res => {
tab.dataSource = res.result || []
}).finally(() => {
tab.loading = false
})
},
handleOk() {
this.validateFields()
},
handleCancel() {
this.close()
},
/** ATab 选项卡切换事件 */
handleChangeTabs(key) {
getRefPromise(this, `editableTable${key}`).then(editableTable => {
editableTable.resetScrollTop()
})
},
/** 触发表单验证 */
validateFields() {
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormModelAndTables(this.$refs.form,this.model, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
// 发起请求
return this.requestAddOrEdit(formData)
}).catch(e => {
if (e.error === VALIDATE_FAILED) {
// 如果有未通过表单验证的子表，就自动跳转到它所在的tab
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
} else {
console.error(e)
}
})
},
/** 整理成formData */
classifyIntoFormData(allValues) {
let orderMain = Object.assign(this.model, allValues.formValue)
return {
...orderMain, // 展开
jeecgOrderCustomerList: allValues.tablesValue[0].tableData,
jeecgOrderTicketList: allValues.tablesValue[1].tableData
}
},
/** 发起新增或修改的请求 */
requestAddOrEdit(formData) {
let url = this.url.add, method = 'post'
if (this.model.id) {
url = this.url.edit
method = 'put'
}
this.confirmLoading = true
httpAction(url, formData, method).then((res) => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
}
}
</script>
<style scoped>
</style>
jero-web/src/views/demo/modules/JeroDemoModal.vue
+48 -84
View File
@@ -9,78 +9,46 @@
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
<a-form-model-item label="姓名" required prop="name" hasFeedback>
<a-input v-model="model.name" placeholder="请输入姓名"/>
</a-form-model-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="姓名"
hasFeedback >
<a-input placeholder="请输入姓名" v-decorator="['name', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="关键词"
hasFeedback >
<a-input placeholder="请输入关键词" v-decorator="['keyWord', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="打卡时间"
hasFeedback >
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="性别">
<!-- <a-select v-decorator="['sex', {}]" placeholder="请选择性别">
<a-select-option value="">请选择</a-select-option>
<a-select-option value="1">男</a-select-option>
<a-select-option value="2">女</a-select-option>
</a-select>-->
<j-dict-select-tag type="radio" v-decorator="['sex', {}]" :trigger-change="true" dictCode="sex"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="年龄"
hasFeedback >
<a-input placeholder="请输入年龄" v-decorator="['age', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="生日"
hasFeedback >
<a-date-picker v-decorator="[ 'birthday', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="邮箱"
hasFeedback >
<a-input placeholder="请输入邮箱" v-decorator="['email', {}]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="个人简介"
hasFeedback >
<a-input placeholder="请输入个人简介" v-decorator="['content', {}]" />
</a-form-item>
<a-form-model-item label="关键词" prop="keyWord" hasFeedback>
<a-input v-model="model.keyWord" placeholder="请输入关键词"/>
</a-form-model-item>
</a-form>
<a-form-model-item label="打卡时间" prop="punchTime" hasFeedback>
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="model.punchTime" />
</a-form-model-item>
<a-form-model-item label="性别" prop="sex" hasFeedback>
<j-dict-select-tag type="radio" v-model="model.sex" :trigger-change="true" dictCode="sex"/>
</a-form-model-item>
<a-form-model-item label="年龄" prop="age" hasFeedback>
<a-input placeholder="请输入年龄" v-model="model.age"/>
</a-form-model-item>
<a-form-model-item label="生日" prop="age" hasFeedback>
<a-date-picker valueFormat="YYYY-MM-DD" v-model="model.birthday"/>
</a-form-model-item>
<a-form-model-item label="邮箱" prop="email" hasFeedback >
<a-input placeholder="请输入邮箱" v-model="model.email"/>
</a-form-model-item>
<a-form-model-item label="个人简介" prop="content" hasFeedback>
<a-input type="textarea" placeholder="请输入个人简介" v-model="model.content"/>
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeroDemoModal",
@@ -89,18 +57,28 @@
title:"操作",
visible: false,
model: {},
layout: {
labelCol: { span: 3 },
wrapperCol: { span: 14 },
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 3 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
name: [
{ required: true, message: '请输入姓名!' },
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
],
email: [
{ required: false, type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
]
},
url: {
add: "/test/jeroDemo/add",
@@ -115,26 +93,19 @@
this.edit({});
},
edit (record) {
this.form.resetFields();
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'name','keyWord','sex','age','email','content'))
//时间格式化
this.form.setFieldsValue({punchTime:this.model.punchTime?moment(this.model.punchTime,'YYYY-MM-DD HH:mm:ss'):null})
this.form.setFieldsValue({birthday:this.model.birthday?moment(this.model.birthday):null})
});
},
close () {
this.$refs.form.resetFields();
this.$emit('close');
this.visible = false;
},
handleOk () {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
@@ -145,13 +116,8 @@
httpurl+=this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
//时间格式化
formData.punchTime = formData.punchTime?formData.punchTime.format('YYYY-MM-DD HH:mm:ss'):null;
formData.birthday = formData.birthday?formData.birthday.format():null;
console.log(formData)
httpAction(httpurl,formData,method).then((res)=>{
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
@@ -171,8 +137,6 @@
handleCancel () {
this.close()
},
}
}
</script>
jero-web/src/views/demo/modules/JeroDemoTabsModal.vue
+1 -1
View File
@@ -63,7 +63,7 @@
<a-table :columns="columns" :dataSource="data" :pagination="false" size="middle">
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
<a-tooltip title="必填项" :defaultVisible="false" overlayStyle="{ color: 'red' }">
<a-tooltip title="必填项" :defaultVisible="false" :overlayStyle="{ color: 'red' }">
<a-input :key="col" v-if="record.editable" style="margin: -5px 0" :value="text" :placeholder="columns[i].title" @change="e => handlerRowChange(e.target.value, record.key, col)"/>
<template v-else>{{ text }}</template>
</a-tooltip>
jero-web/src/views/demo/modules/JeroOrderMainModal.vue
+79 -105
View File
@@ -8,53 +8,38 @@
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="orderMainModel" :rules="validatorRules">
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号">
<a-input placeholder="请输入订单号" v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]" />
</a-form-item>
<a-form-model-item label="订单号" required prop="orderCode">
<a-input v-model="orderMainModel.orderCode" placeholder="请输入订单号"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
<a-form-model-item label="订单类型" prop="ctype">
<a-select placeholder="请选择订单类型" v-model="orderMainModel.ctype" >
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
<a-form-model-item label="订单日期" prop="orderDate">
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" v-model="orderMainModel.orderDate"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="16">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]" />
</a-form-item>
<a-form-model-item label="订单金额" prop="orderMoney">
<a-input-number style="width: 200px" v-model="orderMainModel.orderMoney"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]" />
</a-form-item>
<a-form-model-item label="订单备注" prop="content">
<a-input placeholder="请输入订单备注" v-model="orderMainModel.content" />
</a-form-model-item>
</a-col>
</a-row>
@@ -65,47 +50,49 @@
<a-row type="flex" style="margin-bottom:10px" :gutter="16">
<a-col :span="5">客户名</a-col>
<a-col :span="5">性别</a-col>
<a-col :span="5">身份证号码</a-col>
<a-col :span="5">手机号</a-col>
<a-col :span="4">操作</a-col>
<a-col :span="6">身份证号码</a-col>
<a-col :span="6">手机号</a-col>
<a-col :span="2">操作</a-col>
</a-row>
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeroOrderCustomerList" :key="index">
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderCustomerList" :key="index">
<a-col :span="6" style="display: none">
<a-form-item>
<a-input placeholder="id" v-decorator="['jeroOrderCustomerList['+index+'].id', {'initialValue':item.id}]" />
</a-form-item>
<a-form-model-item>
<a-input placeholder="id" v-model="item.id" />
</a-form-model-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-input placeholder="客户名" v-decorator="['jeroOrderCustomerList['+index+'].name', {'initialValue':item.name,rules: [{ required: true, message: '请输入用户名!' }]}]" />
</a-form-item>
<a-form-model-item>
<a-input placeholder="客户名" v-model="item.name" />
</a-form-model-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-select placeholder="性别" v-decorator="['jeroOrderCustomerList['+index+'].sex', {'initialValue':item.sex}]">
<a-form-model-item>
<a-select placeholder="性别" v-model="item.sex" >
<a-select-option value="1">男</a-select-option>
<a-select-option value="2">女</a-select-option>
</a-select>
</a-form-item>
</a-form-model-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-input placeholder="身份证号" v-decorator="['jeroOrderCustomerList['+index+'].idcard', {'initialValue':item.idcard,rules: [{ pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$', message: '身份证号格式不对!' }]}]"/>
</a-form-item>
<a-col :span="6">
<a-form-model-item :prop="'jeecgOrderCustomerList.' + index + '.idcard'" :rules="[{required: true,message: '请输入身份证号',trigger: 'blur'},{ pattern: rules.IDCard, message: '身份证号格式不对!' }]">
<a-input placeholder="身份证号" v-model="item.idcard" />
</a-form-model-item>
</a-col>
<a-col :span="5">
<a-form-item>
<a-input placeholder="手机号" v-decorator="['jeroOrderCustomerList['+index+'].telphone', {'initialValue':item.telphone,rules: [{ pattern: '^1(3|4|5|7|8)\\d{9}$', message: '手机号格式不对!' }]}]"/>
</a-form-item>
<a-col :span="6">
<a-form-model-item :prop="'jeecgOrderCustomerList.' + index + '.telphone'" :rules="rules.mobile">
<a-input placeholder="手机号" v-model="item.telphone"/>
</a-form-model-item>
</a-col>
<a-col :span="4">
<a-form-item>
<a-button @click="addRowCustom" icon="plus"></a-button>&nbsp;
<a-button @click="delRowCustom(index)" icon="minus"></a-button>
</a-form-item>
<a-col :span="2">
<a-form-model-item>
<a-icon type="minus-circle" @click="delRowCustom(index)" style="fontSize :20px"/>
</a-form-model-item>
</a-col>
</a-row>
<a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowCustom">
<a-icon type="plus" /> 添加客户信息
</a-button>
</div>
</a-tab-pane>
@@ -116,34 +103,36 @@
<a-col :span="6">航班时间</a-col>
<a-col :span="6">操作</a-col>
</a-row>
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeroOrderTicketList" :key="index">
<a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.jeecgOrderTicketList" :key="index">
<a-col :span="6" style="display: none">
<a-form-item>
<a-input placeholder="id" v-decorator="['jeroOrderTicketList['+index+'].id', {'initialValue':item.id}]" />
</a-form-item>
<a-form-model-item>
<a-input placeholder="id" v-model="item.id" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-item>
<a-input placeholder="航班号" v-decorator="['jeroOrderTicketList['+index+'].ticketCode', {'initialValue':item.ticketCode,rules: [{ required: true, message: '请输入航班号!' }]}]" />
</a-form-item>
<a-form-model-item :prop="'jeecgOrderTicketList.' + index + '.ticketCode'" :rules="{required: true,message: '请输入航班号',trigger: 'blur'}">
<a-input placeholder="航班号" v-model="item.ticketCode"/>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-item>
<j-date placeholder="航班时间" :trigger-change="true" v-decorator="['jeroOrderTicketList['+index+'].tickectDate', {'initialValue':item.tickectDate}]"></j-date>
</a-form-item>
<a-form-model-item>
<a-date-picker placeholder="航班时间" valueFormat="YYYY-MM-DD" v-model="item.tickectDate" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-item>
<a-button @click="addRowTicket" icon="plus"></a-button>&nbsp;
<a-button @click="delRowTicket(index)" icon="minus"></a-button>
</a-form-item>
<a-form-model-item>
<a-icon type="minus-circle" @click="delRowTicket(index)" style="fontSize :20px"/>
</a-form-model-item>
</a-col>
</a-row>
<a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowTicket">
<a-icon type="plus" /> 添加机票信息
</a-button>
</div>
</a-tab-pane>
</a-tabs>
</a-form>
</a-form-model>
</a-spin>
</a-modal>
</template>
@@ -151,8 +140,6 @@
<script>
import { httpAction,getAction } from '@/api/manage'
import JDate from '@/components/jero/JDate'
import pick from 'lodash.pick'
import moment from "moment"
export default {
name: "JeroOrderMainModal",
@@ -163,8 +150,10 @@
return {
title:"操作",
visible: false,
orderMainModel: {jeroOrderCustomerList: [{}],
jeroOrderTicketList: [{}]},
orderMainModel: {
jeroOrderCustomerList: [{}],
jeroOrderTicketList: [{}]
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
@@ -173,10 +162,12 @@
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules:{
orderCode: [
{ required: true, message: '订单号不能为空', trigger: 'blur' }
]
},
url: {
add: "/test/jeroOrderMain/add",
@@ -193,10 +184,10 @@
this.edit({});
},
edit (record) {
this.form.resetFields();
this.orderMainModel = Object.assign({}, record);
this.orderMainModel.jeroOrderCustomerList = [{}];
this.orderMainModel.jeroOrderTicketList = [{}];
this.orderMainModel = Object.assign({
jeroOrderCustomerList: [{}],
jeroOrderTicketList: [{}]
}, record);
//--------------------------------------------------------
//初始化明细表数据
console.log(this.orderMainModel.id)
@@ -217,12 +208,7 @@
}
})
}
//--------------------------------------------------------
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.orderMainModel,'orderCode','ctype','orderMoney','content'))
this.form.setFieldsValue({orderDate:this.orderMainModel.orderDate?moment(this.orderMainModel.orderDate):null}) //时间格式化
});
},
close () {
this.$emit('close');
@@ -231,8 +217,8 @@
handleOk () {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
@@ -241,18 +227,10 @@
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
method = 'put';
}
let orderMainData = Object.assign(this.orderMainModel, values);
//时间格式化
orderMainData.orderDate = orderMainData.orderDate?orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss'):null;
let formData = {
...orderMainData,
jeroOrderCustomerList: orderMainData.jeroOrderCustomerList,
jeroOrderTicketList: orderMainData.jeroOrderTicketList
}
console.log(formData)
httpAction(httpurl,formData,method).then((res)=>{
httpAction(httpurl,this.orderMainModel,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
@@ -276,9 +254,8 @@
},
delRowCustom (index) {
console.log(index)
let all = this.form.getFieldsValue()
let all = this.orderMainModel
all['jeroOrderCustomerList'].splice(index,1);
this.form.setFieldsValue(all)
this.orderMainModel.jeroOrderCustomerList.splice(index,1);
this.$forceUpdate();
},
@@ -289,14 +266,11 @@
},
delRowTicket (index) {
console.log(index)
let all = this.form.getFieldsValue()
let all = this.orderMainModel
all['jeroOrderTicketList'].splice(index,1);
this.form.setFieldsValue(all)
this.orderMainModel.jeroOrderTicketList.splice(index,1);
this.$forceUpdate();
},
}
}
</script>
jero-web/src/views/demo/modules/JeroOrderModalForJEditableTable.vue
+20 -49
View File
@@ -9,58 +9,41 @@
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" >
<!-- 主表单区域 -->
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号">
<a-input
placeholder="请输入订单号"
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"/>
</a-form-item>
<a-form-model-item label="订单号" prop="orderCode" :rules="[{ required: true, message: '请输入订单号!' }]">
<a-input placeholder="请输入订单号" v-model="model.orderCode"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请选择订单类型" v-decorator="['ctype',{}]">
<a-form-model-item label="订单类型">
<a-select placeholder="请选择订单类型" v-model="model.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
<a-form-model-item label="订单日期">
<a-date-picker showTime valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%" v-model="model.orderDate"/>
</a-form-model-item>
</a-col>
</a-row>
<a-row class="form-row" :gutter="0">
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-decorator="[ 'orderMoney', {}]"/>
</a-form-item>
<a-form-model-item label="订单金额">
<a-input-number placeholder="请输入订单金额" style="width: 100%" v-model="model.orderMoney"/>
</a-form-model-item>
</a-col>
<a-col :lg="8">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
</a-form-item>
<a-form-model-item label="订单备注">
<a-input placeholder="请输入订单备注" v-model="model.content"/>
</a-form-model-item>
</a-col>
</a-row>
</a-form>
</a-form-model>
<!-- 子表单区域 -->
<a-tabs v-model="activeKey" @change="handleChangeTabs">
@@ -100,11 +83,9 @@
<script>
import JEditableTable from '@/components/jero/JEditableTable'
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormAndTables } from '@/utils/JEditableTableUtil'
import { FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
import { httpAction, getAction } from '@/api/manage'
import JDate from '@/components/jero/JDate'
import pick from 'lodash.pick'
import moment from 'moment'
export default {
name: 'JeroOrderModalForJEditableTable',
@@ -115,7 +96,6 @@
return {
title: '操作',
visible: false,
form: this.$form.createForm(this),
confirmLoading: false,
model: {},
labelCol: {
@@ -235,15 +215,7 @@
edit(record) {
this.visible = true
this.activeKey = '1'
this.form.resetFields()
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'orderCode', 'ctype', 'orderMoney', 'content'))
//时间格式化
this.form.setFieldsValue({ orderDate: this.model.orderDate ? moment(this.model.orderDate) : null })
})
// 加载子表数据
if (this.model.id) {
let params = { id: this.model.id }
@@ -259,6 +231,7 @@
editableTables[1].initialize()
})
this.$emit('close')
this.$refs.form.resetFields();
},
/** 查询某个tab的数据 */
requestTableData(url, params, tab) {
@@ -286,7 +259,7 @@
validateFields() {
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormAndTables(this.form, tables)
return validateFormModelAndTables(this.$refs.form,this.model, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
// 发起请求
@@ -303,8 +276,6 @@
/** 整理成formData */
classifyIntoFormData(allValues) {
let orderMain = Object.assign(this.model, allValues.formValue)
//时间格式化
orderMain.orderDate = orderMain.orderDate ? orderMain.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
return {
...orderMain, // 展开
jeroOrderCustomerList: allValues.tablesValue[0].values,
jero-web/src/views/demo/tablist/form/JeroOrderCustomerModal.vue
+32 -90
View File
@@ -11,64 +11,64 @@
<!-- 编辑 -->
<a-spin :spinning="confirmLoading" v-if="editStatus">
<a-form :form="form">
<a-form-item
<a-form-model ref="form" :model="model" :rules="validatorRules">
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="客户姓名"
prop="name"
required
hasFeedback>
<a-input placeholder="请输入客户姓名" v-decorator="['name', {rules: [{ required: true, message: '请输入客户姓名!' }]}]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
<a-input placeholder="请输入客户姓名" v-model="model.name" :readOnly="disableSubmit"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="性别"
hasFeedback>
<a-select v-decorator="['sex', {}]" placeholder="请选择性别">
<a-select v-model="model.sex" placeholder="请选择性别">
<a-select-option value="1">男性</a-select-option>
<a-select-option value="2">女性</a-select-option>
</a-select>
</a-form-item>
<a-form-item
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="身份证号码"
prop="idcard"
hasFeedback>
<a-input placeholder="请输入身份证号码" v-decorator="['idcard', validatorRules.idcard]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
<a-input placeholder="请输入身份证号码" v-model="model.idcard" :readOnly="disableSubmit"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="身份证扫描件"
hasFeedback>
<j-image-upload text="上传" v-model="fileList" :isMultiple="true"></j-image-upload>
</a-form-item>
<a-form-item
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="联系方式"
prop="telphone"
hasFeedback>
<a-input v-decorator="[ 'telphone', validatorRules.telphone]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
<a-input v-model="model.telphone" :readOnly="disableSubmit"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号码"
v-model="this.orderId"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
</a-form-item>
</a-form>
<a-input v-model="model.orderId" disabled="disabled"/>
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import JImageUpload from '../../../../components/jero/JImageUpload'
@@ -89,59 +89,6 @@
xs: {span: 24},
sm: {span: 16},
},
// 表头
columns: [
{
title: '客户名',
align: "center",
dataIndex: 'name',
},
{
title: '性别',
align: "center",
dataIndex: 'sex',
},
{
title: '身份证号码',
align: "center",
dataIndex: 'idcard',
},
{
title: '身份证扫描件',
align: "center",
dataIndex: 'idcardPic',
},
{
title: '电话',
dataIndex: 'telphone',
align: "center",
},
{
title: '订单号码',
dataIndex: 'orderId',
align: "center",
},
{
title: '创建人',
dataIndex: 'createBy',
align: "center",
},
{
title: '创建时间',
dataIndex: 'createTime',
align: "center",
},
{
title: '更新时间',
dataIndex: 'updateBy',
align: "center",
},
{
title: '更新人',
dataIndex: 'updateTime',
align: "center",
},
],
fileList: [],
disableSubmit: false,
selectedRowKeys: [],
@@ -155,7 +102,6 @@
addStatus: false,
editStatus: false,
confirmLoading: false,
form: this.$form.createForm(this),
url: {
add: "/test/order/addCustomer",
edit: "/test/order/editCustomer",
@@ -163,8 +109,9 @@
getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
},
validatorRules: {
telphone: {rules: [{validator: this.validateMobile}]},
idcard: {rules: [{validator: this.validateIdCard}]}
name :[{required: true, message: '请输入客户姓名!'}],
telphone: [{validator: this.validateMobile}],
idcard: [{validator: this.validateIdCard}]
},
}
},
@@ -181,7 +128,6 @@
add(orderId) {
this.hiding = true;
if (orderId) {
this.orderId = orderId;
this.edit({orderId}, '');
} else {
this.$message.warning("请选择一个客户信息");
@@ -202,16 +148,11 @@
this.disableSubmit = false;
}
this.form.resetFields();
this.orderId = record.orderId;
this.model = Object.assign({}, record);
if (record.id) {
this.hiding = false;
this.addStatus = false;
this.editStatus = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'id', 'name', 'sex', 'idcard','telphone', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
});
setTimeout(() => {
this.fileList = record.idcardPic
}, 5)
@@ -226,12 +167,13 @@
this.visible = false;
this.picUrl = "";
this.fileList=[];
this.$refs.form.resetFields();
},
handleOk() {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
@@ -242,9 +184,7 @@
httpurl += this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
console.log(formData);
formData.orderId = this.orderId;
let formData = Object.assign({}, this.model);
if(this.fileList != '') {
formData.idcardPic = this.fileList;
}else{
@@ -261,6 +201,8 @@
that.confirmLoading = false;
that.close();
})
}else{
return false;
}
})
},
jero-web/src/views/demo/tablist/form/JeroOrderDMainModal.vue
+36 -39
View File
@@ -8,46 +8,45 @@
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-model ref="form" :model="orderMainModel" :rules="validatorRules">
<!-- 主表单区域 -->
<a-form-item
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="orderCode"
label="订单号"
required
hasFeedback>
<a-input
placeholder="请输入订单号"
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"
/>
</a-form-item>
<a-form-item
<a-input placeholder="请输入订单号" v-model="orderMainModel.orderCode" />
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单类型">
<a-select placeholder="请输入订单类型" v-decorator="['ctype',{}]">
<a-select placeholder="请输入订单类型" v-model="orderMainModel.ctype">
<a-select-option value="1">国内订单</a-select-option>
<a-select-option value="2">国际订单</a-select-option>
</a-select>
</a-form-item>
<a-form-item
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单日期">
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'orderDate',{}]"/>
</a-form-item>
<a-form-item
<a-date-picker showTime valueFormat='YYYY-MM-DD HH:mm:ss' v-model="orderMainModel.orderDate"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单金额">
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]"/>
</a-form-item>
<a-form-item
<a-input-number style="width: 200px" v-model="orderMainModel.orderMoney" />
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单备注">
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
</a-form-item>
</a-form>
<a-input placeholder="请输入订单备注" v-model="orderMainModel.content"/>
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
@@ -81,7 +80,11 @@
},
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
validatorRules: {
orderCode: [
{ required: true, message: '请输入订单号!' }
]
},
url: {
add: "/test/order/add",
edit: "/test/order/edit",
@@ -95,16 +98,15 @@
this.edit({});
},
edit(record) {
this.form.resetFields();
this.orderMainModel = Object.assign({}, record);
//初始化明细表数据
console.log(this.orderMainModel.id)
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //时间格式化
});
console.log(this.orderMainModel)
//初始化明细表数据
this.visible = true;
},
close() {
this.$emit('close');
this.visible = false;
this.$refs.form.resetFields();
},
close() {
this.$emit('close');
@@ -113,8 +115,8 @@
handleOk() {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
@@ -125,15 +127,8 @@
httpurl += this.url.edit;
method = 'put';
}
let orderMainData = Object.assign(this.orderMainModel, values);
//时间格式化
orderMainData.orderDate = orderMainData.orderDate ? orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null;
let formData = {
...orderMainData
}
console.log(formData)
httpAction(httpurl, formData, method).then((res) => {
httpAction(httpurl, this.orderMainModel, method).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok');
@@ -144,6 +139,8 @@
that.confirmLoading = false;
that.close();
})
}else{
return false;
}
})
},
jero-web/src/views/demo/tablist/form/JeroOrderTicketModal.vue
+30 -32
View File
@@ -10,58 +10,56 @@
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-model ref="form" :model="model" :rules="validatorRules">
<a-form-item
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="航班号"
prop="ticketCode"
hasFeedback>
<a-input
placeholder="请输入航班号"
:readOnly="disableSubmit"
v-decorator="['ticketCode', {rules:[{ required: true,message: '请输入航班号!'}]}]"/>
</a-form-item>
<a-form-item
<a-input placeholder="请输入航班号" :readOnly="disableSubmit" v-model="model.ticketCode"></a-input>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="航班时间"
prop="tickectDate"
hasFeedback>
<j-date :trigger-change="true" v-decorator="['tickectDate',{rules:[{ required: true,message: '请输入航班号!'}]}]"></j-date>
</a-form-item>
<a-form-item
<j-date v-model="model.tickectDate"></j-date>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="订单号码"
v-model="this.orderId"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'orderId', {}]" disabled="disabled"/>
</a-form-item>
<a-form-item
<a-input v-model="model.orderId" disabled="disabled"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建人"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'createBy', {}]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
<a-input v-model="model.createBy" :readOnly="disableSubmit"/>
</a-form-model-item>
<a-form-model-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="创建时间"
:hidden="hiding"
hasFeedback>
<a-input v-decorator="[ 'createTime', {}]" :readOnly="disableSubmit"/>
</a-form-item>
</a-form>
<a-input v-model="model.createTime" :readOnly="disableSubmit"/>
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JDate from '@/components/jero/JDate'
@@ -90,7 +88,10 @@
hiding: false,
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {},
validatorRules: {
ticketCode:[{required : true, message: '请输入航班号!'}],
tickectDate:[{required : true, message: '请输入航班时间!'}]
},
url: {
add: '/test/order/addTicket',
edit: '/test/order/editTicket'
@@ -121,23 +122,19 @@
this.hiding = true;
this.disableSubmit = false;
}
this.form.resetFields();
this.orderId = record.orderId;
this.model = Object.assign({}, record);
this.visible = true;
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'ticketCode', 'tickectDate', 'orderId', 'createBy', 'createTime', 'updateBy', 'updateTime'))
})
},
close() {
this.$emit('close');
this.visible = false;
this.$refs.form.resetFields();
},
handleOk() {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
@@ -148,9 +145,8 @@
httpurl += this.url.edit;
method = 'put';
}
let formData = Object.assign(this.model, values);
formData.mainId = this.orderId;
httpAction(httpurl, formData, method).then((res) => {
this.model.mainId = this.model.orderId;
httpAction(httpurl, this.model, method).then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok')
@@ -161,6 +157,8 @@
that.confirmLoading = false;
that.close();
})
}else{
return false;
}
})
},