KH/kh-device-admin
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/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,