zhangdaiscott
5 years ago
parent
4674097078
commit
da5ace3397
@ -1,3 +1,3 @@
|
||||
NODE_ENV=production
|
||||
VUE_APP_PLATFORM_NAME=JeecgBoot 企业级快速开发平台
|
||||
VUE_APP_PLATFORM_NAME=JeecgBoot 企业级低代码平台
|
||||
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