zhangdaiscott
5 years ago
parent
4674097078
commit
da5ace3397
@ -1,3 +1,3 @@
|
|||||||
NODE_ENV=production
|
NODE_ENV=production
|
||||||
VUE_APP_PLATFORM_NAME=JeecgBoot 企业级快速开发平台
|
VUE_APP_PLATFORM_NAME=JeecgBoot 企业级低代码平台
|
||||||
VUE_APP_SSO=false
|
VUE_APP_SSO=false
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<j-vxe-table
|
||||||
|
ref="vTable"
|
||||||
|
toolbar
|
||||||
|
row-number
|
||||||
|
row-selection
|
||||||
|
keep-source
|
||||||
|
:height="484"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:columns="columns"
|
||||||
|
@valueChange="handleValueChange"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment'
|
||||||
|
import { randomNumber, randomUUID } from '@/utils/util'
|
||||||
|
import { JVXETypes } from '@/components/jeecg/JVxeTable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JVxeDemo2',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '省/直辖市/自治区',
|
||||||
|
key: 's1',
|
||||||
|
type: JVXETypes.select,
|
||||||
|
width: '240px',
|
||||||
|
options: [],
|
||||||
|
placeholder: '请选择${title}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '市',
|
||||||
|
key: 's2',
|
||||||
|
type: JVXETypes.select,
|
||||||
|
width: '240px',
|
||||||
|
options: [],
|
||||||
|
placeholder: '请选择${title}'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '县/区',
|
||||||
|
key: 's3',
|
||||||
|
type: JVXETypes.select,
|
||||||
|
width: '240px',
|
||||||
|
options: [],
|
||||||
|
placeholder: '请选择${title}'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataSource: [],
|
||||||
|
|
||||||
|
mockData: [
|
||||||
|
{ text: '北京市', value: '110000', parent: null },
|
||||||
|
{ text: '天津市', value: '120000', parent: null },
|
||||||
|
{ text: '河北省', value: '130000', parent: null },
|
||||||
|
{ text: '上海市', value: '310000', parent: null },
|
||||||
|
|
||||||
|
{ 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' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 初始化数据
|
||||||
|
this.columns[0].options = this.request(null)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
request(parentId) {
|
||||||
|
return this.mockData.filter(i => i.parent === parentId)
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 当选项被改变时，联动其他组件 */
|
||||||
|
handleValueChange(event) {
|
||||||
|
const { type, row, column, value, target } = event
|
||||||
|
console.log("event",event)
|
||||||
|
if (type === JVXETypes.select) {
|
||||||
|
|
||||||
|
// 第一列
|
||||||
|
if (column.key === 's1') {
|
||||||
|
// 设置第二列的 options
|
||||||
|
console.log('this.request(value)::',this.request(value))
|
||||||
|
target.$refs.vxe.columns[3].options = this.request(value)
|
||||||
|
// 清空后两列的数据
|
||||||
|
target.setValues([{
|
||||||
|
rowKey: row.id,
|
||||||
|
values: { s2: '', s3: '' }
|
||||||
|
}])
|
||||||
|
target.$refs.vxe.columns[4].options = []
|
||||||
|
} else
|
||||||
|
// 第二列
|
||||||
|
if (column.key === 's2') {
|
||||||
|
target.$refs.vxe.columns[4].options = this.request(value)
|
||||||
|
target.setValues([{
|
||||||
|
rowKey: row.id,
|
||||||
|
values: { s3: '' }
|
||||||
|
}])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,215 @@
|
|||||||
|
<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>
|
||||||
|
<span>已选择</span>
|
||||||
|
<a style="font-weight: 600">
|
||||||
|
{{ selectedRowKeys.length }}
|
||||||
|
</a>
|
||||||
|
<span>项</span>
|
||||||
|
<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-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||||
|
<a>删除</a>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!-- table区域-end -->
|
||||||
|
|
||||||
|
<!-- 表单区域 -->
|
||||||
|
<jeecg-order-modal-for-j-vextable ref="modalForm" @ok="modalFormOk"></jeecg-order-modal-for-j-vextable>
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||||
|
import JeecgOrderModalForJVextable from './modules/JeecgOrderModalForJVexTable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JeecgOrderMainListForJVxeTable',
|
||||||
|
mixins: [JeecgListMixin],
|
||||||
|
components: {
|
||||||
|
JeecgOrderModalForJVextable
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
description: '订单管理页面',
|
||||||
|
// 请求参数
|
||||||
|
url: {
|
||||||
|
list: '/test/jeecgOrderMain/list',
|
||||||
|
delete: '/test/jeecgOrderMain/delete',
|
||||||
|
deleteBatch: '/test/jeecgOrderMain/deleteBatch'
|
||||||
|
},
|
||||||
|
// 表头
|
||||||
|
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' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
initDictConfig() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue