更换所有的demo到demo文件夹下
This commit is contained in:
zer0Black
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 0px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderCustomer-modal ref="modalForm" @ok="modalFormOk"></jeroOrderCustomer-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderDMainList from './JeroOrderDMainList'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderDMainList,
|
||||
JeroOrderCustomerModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单客户信息',
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '客户名',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex',
|
||||
customRender: function (text) {
|
||||
if (text == 1) {
|
||||
return "男";
|
||||
} else if (text == 2) {
|
||||
return "女";
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '身份证号码',
|
||||
align: "center",
|
||||
dataIndex: 'idcard',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'telphone',
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
},
|
||||
],
|
||||
url: {
|
||||
list: "/test/order/listOrderCustomerByMainId",
|
||||
delete: "/test/order/deleteCustomer",
|
||||
deleteBatch: "/test/order/deleteBatchCustomer",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
var params = this.getQueryParams();
|
||||
getAction(this.url.list, {orderId: params.mainId, pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
|
||||
},
|
||||
getOrderMain(orderId) {
|
||||
this.queryParam.mainId = orderId;
|
||||
this.loadData(1);
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId);
|
||||
this.$refs.modalForm.title = "添加客户信息";
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单号">
|
||||
<a-input placeholder="请输入订单号" v-model="queryParam.orderCode"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-model="queryParam.ctype">
|
||||
<a-select-option value="1">国内订单</a-select-option>
|
||||
<a-select-option value="2">国际订单</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="24">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
filterMultiple="filterMultiple"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:type}"
|
||||
@change="handleTableChange"
|
||||
:customRow="clickThenCheck"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="客户信息" key="1">
|
||||
<Jero-Order-Customer-List ref="JeroOrderCustomerList"></Jero-Order-Customer-List>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="机票信息" key="2" forceRender>
|
||||
<Jero-Order-Ticket-List ref="JeroOrderTicketList"></Jero-Order-Ticket-List>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<jeroOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeroOrderDMain-modal>
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderDMainModal from './form/JeroOrderDMainModal'
|
||||
import JeroOrderCustomerList from './JeroOrderCustomerList'
|
||||
import JeroOrderTicketList from './JeroOrderTicketList'
|
||||
import {deleteAction} from '@/api/manage'
|
||||
import JeroOrderCustomerModal from './form/JeroOrderCustomerModal'
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
JeroOrderCustomerModal,
|
||||
JeroOrderDMainModal,
|
||||
JeroOrderCustomerList,
|
||||
JeroOrderTicketList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '订单管理页面',
|
||||
/* 分页参数 */
|
||||
ipagination:{
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
pageSizeOptions: ['5', '10', '20'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'rowIndex',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
align: "center",
|
||||
dataIndex: 'orderCode'
|
||||
},
|
||||
{
|
||||
title: '订单类型',
|
||||
align: "center",
|
||||
dataIndex: 'ctype',
|
||||
customRender: (text) => {
|
||||
let re = "";
|
||||
if (text === '1') {
|
||||
re = "国内订单";
|
||||
} else if (text === '2') {
|
||||
re = "国际订单";
|
||||
}
|
||||
return re;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '订单日期',
|
||||
align: "center",
|
||||
dataIndex: 'orderDate'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
align: "center",
|
||||
dataIndex: 'orderMoney'
|
||||
},
|
||||
{
|
||||
title: '订单备注',
|
||||
align: "center",
|
||||
dataIndex: 'content'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}],
|
||||
// 分页参数
|
||||
type: "radio",
|
||||
url: {
|
||||
list: "/test/order/orderList",
|
||||
delete: "/test/order/delete",
|
||||
deleteBatch: "/test/order/deleteBatch",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickThenCheck(record) {
|
||||
return {
|
||||
on: {
|
||||
click: () => {
|
||||
this.onSelectChange(record.id.split(","), [record]);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectionRows) {
|
||||
this.selectedRowKeys = selectedRowKeys;
|
||||
this.selectionRows = selectionRows;
|
||||
this.$refs.JeroOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
|
||||
this.$refs.JeroOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
|
||||
},
|
||||
onClearSelected() {
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.selectionRows = [];
|
||||
},
|
||||
|
||||
handleDelete: function (id) {
|
||||
var that = this;
|
||||
deleteAction(that.url.delete, {id: id}).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.loadData();
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
searchQuery:function(){
|
||||
this.selectedRowKeys = [];
|
||||
this.selectionRows = [];
|
||||
this.$refs.JeroOrderCustomerList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderTicketList.queryParam.mainId = null;
|
||||
this.$refs.JeroOrderCustomerList.loadData();
|
||||
this.$refs.JeroOrderTicketList.loadData();
|
||||
this.$refs.JeroOrderCustomerList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderCustomerList.selectionRows = [];
|
||||
this.$refs.JeroOrderTicketList.selectedRowKeys = [];
|
||||
this.$refs.JeroOrderTicketList.selectionRows = [];
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card-body .table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ant-table-tbody .ant-table-row td {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.anty-row-operator button {
|
||||
margin: 0 5px
|
||||
}
|
||||
|
||||
.ant-btn-danger {
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-body {
|
||||
height: calc(100% - 110px) !important;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.ant-modal-cust-warp .ant-modal-content {
|
||||
height: 90% !important;
|
||||
overflow-y: hidden
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="table-operator" :md="24" :sm="24" style="margin: -25px 0px 10px 2px">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="batchDel">
|
||||
<a-icon type="delete"/>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button style="margin-left: 8px"> 批量操作
|
||||
<a-icon type="down"/>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div>
|
||||
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
||||
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<JeroOrderTicket-modal ref="modalForm" @ok="modalFormOk"></JeroOrderTicket-modal>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JeroOrderTicketModal from './form/JeroOrderTicketModal'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {getAction} from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderTicketList",
|
||||
mixins: [JeroListMixin],
|
||||
components: {
|
||||
JeroOrderTicketModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '机票信息',
|
||||
// 表头
|
||||
columns: [{
|
||||
title: '航班号',
|
||||
align: "center",
|
||||
dataIndex: 'ticketCode'
|
||||
}, {
|
||||
title: '航班时间',
|
||||
align: "center",
|
||||
dataIndex: 'tickectDate'
|
||||
}, {
|
||||
title: '订单号码',
|
||||
align: "center",
|
||||
dataIndex: 'orderId',
|
||||
}, {
|
||||
title: '创建人',
|
||||
align: "center",
|
||||
dataIndex: 'createBy'
|
||||
}, {
|
||||
title: '创建时间',
|
||||
align: "center",
|
||||
dataIndex: 'createTime',
|
||||
sorter: true
|
||||
}, {
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: "center",
|
||||
width: 130,
|
||||
scopedSlots: {customRender: 'action'},
|
||||
}],
|
||||
url: {
|
||||
list: "/test/order/listOrderTicketByMainId",
|
||||
delete: "/test/order/deleteTicket",
|
||||
deleteBatch: "/test/order/deleteBatchTicket",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData(arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
var params = this.getQueryParams();
|
||||
//update-begin--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
getAction(this.url.list, {orderId: params.mainId ,pageNo : this.ipagination.current,
|
||||
pageSize :this.ipagination.pageSize}).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.records;
|
||||
this.ipagination.total = res.result.total;
|
||||
} else {
|
||||
this.dataSource = null;
|
||||
}
|
||||
})
|
||||
//update-end--Author:kangxiaolin Date:20190905 for：[442]主子表分开维护，生成的代码子表的分页改为真实的分页--------------------
|
||||
},
|
||||
getOrderMain(orderId) {
|
||||
this.queryParam.mainId = orderId;
|
||||
this.loadData(1);
|
||||
},
|
||||
handleAdd: function () {
|
||||
this.$refs.modalForm.add(this.queryParam.mainId);
|
||||
this.$refs.modalForm.title = "添加机票信息";
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.ant-card {
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<!-- 编辑 -->
|
||||
<a-spin :spinning="confirmLoading" v-if="editStatus">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="客户姓名"
|
||||
hasFeedback>
|
||||
<a-input placeholder="请输入客户姓名" v-decorator="['name', {rules: [{ required: true, message: '请输入客户姓名!' }]}]"
|
||||
:readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="性别"
|
||||
hasFeedback>
|
||||
<a-select v-decorator="['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
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="身份证号码"
|
||||
hasFeedback>
|
||||
<a-input placeholder="请输入身份证号码" v-decorator="['idcard', validatorRules.idcard]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-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
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="联系方式"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'telphone', validatorRules.telphone]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-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-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'
|
||||
|
||||
export default {
|
||||
name: "JeroOrderCustomerModal",
|
||||
components: { JImageUpload },
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
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: [],
|
||||
orderId: "",
|
||||
hiding: false,
|
||||
headers: {},
|
||||
picUrl: "",
|
||||
picArray:[],
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
addStatus: false,
|
||||
editStatus: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
url: {
|
||||
add: "/test/order/addCustomer",
|
||||
edit: "/test/order/editCustomer",
|
||||
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload",
|
||||
getOrderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
},
|
||||
validatorRules: {
|
||||
telphone: {rules: [{validator: this.validateMobile}]},
|
||||
idcard: {rules: [{validator: this.validateIdCard}]}
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uploadAction: function () {
|
||||
return this.url.fileUpload;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const token = Vue.ls.get(ACCESS_TOKEN);
|
||||
this.headers = {"X-Access-Token": token}
|
||||
},
|
||||
methods: {
|
||||
add(orderId) {
|
||||
this.hiding = true;
|
||||
if (orderId) {
|
||||
this.orderId = orderId;
|
||||
this.edit({orderId}, '');
|
||||
} else {
|
||||
this.$message.warning("请选择一个客户信息");
|
||||
}
|
||||
},
|
||||
detail(record) {
|
||||
this.edit(record, 'd');
|
||||
},
|
||||
edit(record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = false;
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = true;
|
||||
} else {
|
||||
this.hiding = true;
|
||||
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)
|
||||
} else {
|
||||
this.addStatus = false;
|
||||
this.editStatus = true;
|
||||
}
|
||||
this.visible = true;
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
this.picUrl = "";
|
||||
this.fileList=[];
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
console.log(formData);
|
||||
formData.orderId = this.orderId;
|
||||
if(this.fileList != '') {
|
||||
formData.idcardPic = this.fileList;
|
||||
}else{
|
||||
formData.idcardPic = '';
|
||||
}
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close();
|
||||
},
|
||||
validateMobile(rule, value, callback) {
|
||||
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您的手机号码格式不正确!");
|
||||
}
|
||||
},
|
||||
validateIdCard(rule, value, callback) {
|
||||
if (!value || new RegExp(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/).test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback("您的身份证号码格式不正确!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* tile uploaded pictures */
|
||||
.upload-list-inline > > > .ant-upload-list-item {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.upload-list-inline > > > .ant-upload-animate-enter {
|
||||
animation-name: uploadAnimateInlineIn;
|
||||
}
|
||||
|
||||
.upload-list-inline > > > .ant-upload-animate-leave {
|
||||
animation-name: uploadAnimateInlineOut;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="1000"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 主表单区域 -->
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单号"
|
||||
hasFeedback>
|
||||
<a-input
|
||||
placeholder="请输入订单号"
|
||||
v-decorator="['orderCode', {rules: [{ required: true, message: '请输入订单号!' }]}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单类型">
|
||||
<a-select placeholder="请输入订单类型" v-decorator="['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
|
||||
: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
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单金额">
|
||||
<a-input-number style="width: 200px" v-decorator="[ 'orderMoney', {}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="订单备注">
|
||||
<a-input placeholder="请输入订单备注" v-decorator="['content', {}]"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {httpAction} from '@/api/manage'
|
||||
import JDate from '@/components/jero/JDate'
|
||||
import pick from 'lodash.pick'
|
||||
import moment from "moment"
|
||||
|
||||
export default {
|
||||
name: "JeroOrderDMainModal",
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "操作",
|
||||
visible: false,
|
||||
orderMainModel: {
|
||||
jeecgOrderCustomerList: [{}],
|
||||
jeecgOrderTicketList: [{}]
|
||||
},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5},
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16},
|
||||
},
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: "/test/order/add",
|
||||
edit: "/test/order/edit",
|
||||
orderCustomerList: "/test/order/listOrderCustomerByMainId",
|
||||
orderTicketList: "/test/order/listOrderTicketByMainId",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
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)
|
||||
},
|
||||
close() {
|
||||
this.$emit('close');
|
||||
this.visible = false;
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.orderMainModel.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
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) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok');
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-btn {
|
||||
padding: 0 10px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.ant-form-item-control {
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
/** 主表单行间距 */
|
||||
.ant-form .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/** Tab页面行间距 */
|
||||
.ant-tabs-content .ant-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:width="800"
|
||||
:visible="visible"
|
||||
:okButtonProps="{ props: {disabled: disableSubmit} }"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
cancelText="关闭">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="航班号"
|
||||
hasFeedback>
|
||||
<a-input
|
||||
placeholder="请输入航班号"
|
||||
:readOnly="disableSubmit"
|
||||
v-decorator="['ticketCode', {rules:[{ required: true,message: '请输入航班号!'}]}]"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="航班时间"
|
||||
hasFeedback>
|
||||
<j-date :trigger-change="true" v-decorator="['tickectDate',{rules:[{ required: true,message: '请输入航班号!'}]}]"></j-date>
|
||||
</a-form-item>
|
||||
<a-form-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
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="创建人"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'createBy', {}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="创建时间"
|
||||
:hidden="hiding"
|
||||
hasFeedback>
|
||||
<a-input v-decorator="[ 'createTime', {}]" :readOnly="disableSubmit"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JDate
|
||||
},
|
||||
name: 'JeroOrderTicketModal',
|
||||
data() {
|
||||
return {
|
||||
title: '操作',
|
||||
visible: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 5}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 16}
|
||||
},
|
||||
moment,
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
disableSubmit: false,
|
||||
orderId: '',
|
||||
hiding: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {},
|
||||
url: {
|
||||
add: '/test/order/addTicket',
|
||||
edit: '/test/order/editTicket'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
add(orderId) {
|
||||
if (orderId) {
|
||||
this.edit({orderId}, '')
|
||||
} else {
|
||||
this.$message.warning('请选择一条航班数据')
|
||||
}
|
||||
},
|
||||
detail(record) {
|
||||
this.edit(record, 'd')
|
||||
},
|
||||
edit(record, v) {
|
||||
if (v == 'e') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = false;
|
||||
} else if (v == 'd') {
|
||||
this.hiding = false;
|
||||
this.disableSubmit = true;
|
||||
} else {
|
||||
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;
|
||||
},
|
||||
handleOk() {
|
||||
const that = this;
|
||||
// 触发表单验证
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
that.confirmLoading = true;
|
||||
let httpurl = '';
|
||||
let method = '';
|
||||
if (!this.model.id) {
|
||||
httpurl += this.url.add;
|
||||
method = 'post';
|
||||
} else {
|
||||
httpurl += this.url.edit;
|
||||
method = 'put';
|
||||
}
|
||||
let formData = Object.assign(this.model, values);
|
||||
formData.mainId = this.orderId;
|
||||
httpAction(httpurl, formData, method).then((res) => {
|
||||
if (res.success) {
|
||||
that.$message.success(res.message);
|
||||
that.$emit('ok')
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false;
|
||||
that.close();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel() {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user