邮件+舱位

master
sunzehua 11 months ago
parent b19116a5af
commit a8dd82e65e

@ -77,7 +77,36 @@ router.beforeEach((to, from, next) => {
})
}, 1000)
} else {
antDesignmenus = Vue.ls.get(ALL_APPS_MENU)[0].menu
if (Vue.ls.get(ALL_APPS_MENU)[0].menu) {
antDesignmenus = Vue.ls.get(ALL_APPS_MENU)[0].menu
} else {
const applocation = []
res.apps.forEach(item => {
const apps = { code: '', name: '', active: '', menu: '' }
if (item.active) {
apps.code = item.code
apps.name = item.name
apps.active = item.active
apps.menu = res.menus
antDesignmenus = res.menus
} else {
apps.code = item.code
apps.name = item.name
apps.active = item.active
apps.menu = ''
}
applocation.push(apps)
})
console.log('applocation == ', applocation)
Vue.ls.set(ALL_APPS_MENU, applocation, 7 * 24 * 60 * 60 * 1000)
// 延迟 1 秒显示欢迎信息
setTimeout(() => {
notification.success({
message: '欢迎',
description: `${timeFix()},欢迎回来`
})
}, 1000)
}
}
console.log('后端返回的路由', antDesignmenus)
// console.log(JSON.stringify(antDesignmenus));
@ -105,7 +134,7 @@ router.beforeEach((to, from, next) => {
next({ path: '/user/login' })
})
})
store.dispatch('getNoticReceiveList').then(res => {})
store.dispatch('getNoticReceiveList').then(res => { })
} else {
// console.log('=== 测试跳转页面 3 ===')
next()

@ -27,6 +27,7 @@ const constantRouterComponents = {
Console: () => import('@/views/system/index/welcome'),
BookingDetail: () => import('@/views/main/BookingLedger/detail'),
ExpressModuleDetails: () => import('@/views/main/ExpressModule/details'),
CabinManagementDetails: () => import('@/views/main/CabinManagement/details'),
CustomerInformationManagementAdd: () => import('@/views/main/Customer/addForm'),
CustomerInformationManagementEdit: () => import('@/views/main/Customer/editForm'),
SendCarAdd: () => import('@/views/main/SendCar/addForm'),
@ -362,6 +363,20 @@ const ExpressModule = [
component: 'ExpressModuleDetails'
}
]
// 舱位
const CabinManagementModule = [
{
name: 'CabinManagementDetails',
path: '/CabinManagementDetails',
pid: 0,
id: 10041,
meta: {
title: '舱位管理',
show: false
},
component: 'CabinManagementDetails'
}
]
// 根级菜单
const rootRouter = {
key: '',
@ -396,6 +411,7 @@ export const generatorDynamicRouter = data => {
listToTree(booking, childrenNav, 0)
listToTree(bookingNew, childrenNav, 0)
listToTree(ExpressModule, childrenNav, 0)
listToTree(CabinManagementModule, childrenNav, 0)
rootRouter.children = childrenNav
menuNav.push(rootRouter)
const routers = generator(menuNav)

@ -0,0 +1,334 @@
<template>
<div class="main">
<div class="title">舱位新增</div>
<div style="margin-bottom: 20px;">
<a-button type="primary">保存</a-button>
<a-button style="margin: 0 10px;" type="primary">提交</a-button>
<a-button type="danger">作废</a-button>
</div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row>
<a-col :span="6">
<a-form-model-item label="订舱编号">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="船名">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="航次">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="订舱方式">
<a-select>
<a-select-option value="合约订舱">
合约订舱
</a-select-option>
<a-select-option value="SPOT订舱">
SPOT订舱
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-model-item label="ETA">
<a-date-picker style="width: 100%;" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="ETD">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
<span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="合约号">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="装货港名称">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-model-item label="卸货港名称">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="船公司">
<a-select show-search :filter-option="filterOption">
<a-select-option v-for="(item, index) in carrierList" :key="index" :value="item.code">{{ item.cnName
}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="中转港1">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="中转港2">
<a-input v-model="form.name" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-model-item label="承运模式">
<a-select>
<a-select-option value="直达">
直达
</a-select-option>
<a-select-option value="中转">
中转
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="航线">
<a-select show-search :filter-option="filterOption">
<a-select-option v-for="(item, index) in lineList" :key="index" :value="item.name">{{ item.name
}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="签单方式">
<a-select show-search :filter-option="filterOption">
<a-select-option v-for="(item, index) in issuetypeList" :key="index" :value="item.enName">{{ item.cnName
}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="6">
<a-form-model-item label="箱使天数">
<a-input style="width: 70%;" v-model="form.name" />
<span style="margin: 0 10px;"></span>
<a-icon style="cursor: pointer;color: rgb(32, 184, 204);" type="form" />
</a-form-model-item>
</a-col>
</a-row>
<div class="title">截止时间</div>
<a-row>
<a-col :span="8">
<a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="样单截止时间">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="截港时间">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="舱单-入港清单截止时间">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="MDGF截止时间">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
<a-col :span="8">
<a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="VGM截止时间">
<a-date-picker v-model="form.etd" format="YYYY-MM-DD HH:mm:ss" />
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
<div class="title">
<span>箱型箱量</span>
<span
style="color: rgb(30, 221, 221);font-size: 12px;margin-left: 20px;cursor: pointer;"
@click="boxFlag = true">添加</span>
</div>
<div class="list">
<div class="item" v-for="item in boxSelectList" :key="item.gid">
<span class="item-left">{{ item.name }}</span>
<a-input-number :min="1" :max="10"> </a-input-number>
</div>
</div>
<a-modal :footer="null" title="请选择箱型" width="600px" @cancel="boxFlag = false" :visible="boxFlag">
<div class="boxList">
<div
class="boxItem"
:class="{ 'active': item.flag }"
@click="handleClick(item)"
v-for="item in boxList"
:key="item.gid">{{ item.name }}</div>
</div>
</a-modal>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
form: {},
labelCol: { span: 6 },
wrapperCol: { span: 18 },
etdWeek: '',
boxFlag: false,
boxList: [],
boxSelectList: []
}
},
computed: {
...mapGetters([
'carrierList',
'issuetypeList',
'lineList',
'ctnallList'
])
},
watch: {
form: {
handler(nval, oval) {
if (nval.etd) {
this.etdWeek = this.getWeek(nval.etd)
} else {
this.etdWeek = ''
}
},
deep: true
},
ctnallList: {
handler(nval, oval) {
this.boxList = JSON.parse(JSON.stringify(nval))
this.boxList.forEach(item => {
item.flag = false
})
this.$forceUpdate()
},
deep: true
}
},
mounted() {
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
handleClick(item) {
item.flag = !item.flag
const arr = []
this.boxList.forEach(item => {
if (item.flag) {
arr.push(item)
}
})
this.boxSelectList = arr
this.$forceUpdate()
},
getWeek(dateTime) {
// eslint-disable-next-line camelcase
const temp_ms = new Date(dateTime).getTime()
const temptTime = new Date(temp_ms)
const weekday = temptTime.getDay() & 7
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
let firstDay = new Date(temptTime.getFullYear(), 0, 1)
const dayOfWeek = firstDay.getDay()
let spendDay = 1
if (dayOfWeek !== 0) {
spendDay = 7 - dayOfWeek + 1
}
const yearOfW = temptTime.getFullYear()
firstDay = new Date(yearOfW, 0, 1 + spendDay)
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
const res = Math.ceil(d / 7) + 1
const weekOfNow = res.toString()
return weekOfNow
}
}
}
</script>
<style lang="less" scoped>
.main {
margin-left: 20px;
padding: 10px;
background: white;
}
.title {
border-bottom: 1px solid #d9d9d9;
padding-bottom: 5px;
font-weight: bold;
color: #333;
margin-bottom: 25px;
font-size: 15px;
}
.week {
display: inline-block;
padding: 0 0px;
background: #f6c806;
color: #fff;
height: 30px;
line-height: 30px;
border: 4px;
font-size: 16px;
margin-left: 8px;
border-radius: 2px;
width: 52px;
text-align: center;
}
.boxList {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
background: rgb(215, 215, 215);
padding: 5px 0px 0px 5px;
.boxItem {
width: 24%;
// background: #caf982;
margin-right: 5px;
text-align: center;
height: 30px;
line-height: 30px;
margin-bottom: 5px;
cursor: pointer;
background: white;
}
.active {
background: #caf982;
}
}
.list {
display: flex;
.item {
.item-left {
background: #f59a23;
color: white;
text-align: center;
height: 30px;
line-height: 30px;
display: inline-block;
padding: 0 5px;
}
}
}
</style>

@ -0,0 +1,643 @@
<template>
<div>
<a-card :bordered="false" :bodyStyle="tstyle">
<div class="table-page-search-wrapper" :class="advanced ? 'Open' : 'Close'">
<a-form :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" >
<a-row >
<a-col :span="4">
<a-form-item label="订单编号">
<a-input v-model="form.name" allow-clear placeholder="请输入订单编号" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="船名">
<a-input allow-clear placeholder="请输入船名" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="航次">
<a-input allow-clear placeholder="请输入航次" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="ETD">
<a-range-picker />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="装货港">
<a-input allow-clear placeholder="请输入装货港" />
</a-form-item>
</a-col>
<a-col :span="3">
<a-form-item label="创建人">
<a-input allow-clear placeholder="请输入创建人" />
</a-form-item>
</a-col>
<a-col :span="1">
<a @click="toggleAdvanced" style="margin-left: 8px;margin-top: 9px;display: inline-block;">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'" />
</a>
</a-col>
</a-row>
<a-row >
<a-col :span="4">
<a-form-item label="装货港">
<a-input v-model="form.name" allow-clear placeholder="请输入装货港" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="目的港">
<a-input allow-clear placeholder="请输入目的港" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="船公司">
<a-input allow-clear placeholder="请输入船公司" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="ETA">
<a-range-picker />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="卸货港">
<a-input allow-clear placeholder="请输入卸货港" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="更新人">
<a-input allow-clear placeholder="请输入更新人" />
</a-form-item>
</a-col>
</a-row>
<a-row >
<a-col :span="4">
<a-form-item label="承运模式">
<a-select>
<a-select-option value="直达">
直达
</a-select-option>
<a-select-option value="中转">
中转
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="订舱方式">
<a-select>
<a-select-option value="合约订舱">
合约订舱
</a-select-option>
<a-select-option value="SPOT订舱">
SPOT订舱
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="箱型箱量">
<a-input allow-clear placeholder="请输入箱型箱量" />
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="SI回执">
<a-select>
<a-select-option value="有">
</a-select-option>
<a-select-option value="无">
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-form-item label="VGM回执">
<a-select>
<a-select-option value="有">
</a-select-option>
<a-select-option value="无">
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<!-- <a-col :span="4" >
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="FnGetData"></a-button>
<a-button style="margin-left: 8px" @click="init"></a-button>
<a @click="toggleAdvanced" style="margin-left: 8px">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'" />
</a>
</span>
</a-col> -->
</a-row>
</a-form>
</div>
</a-card>
<a-card :bordered="false">
<div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
<div>
<a-button type="primary" @click="handleAdd"></a-button>
<a-button type="primary">BC引入</a-button>
<a-button type="danger">作废</a-button>
</div>
<div>
<a-button type="primary" @click="FnGetData"></a-button>
<a-button style="margin-left: 8px" @click="init"></a-button>
</div>
</div>
<vxe-table
:data="loadData"
stripe
resizable
round
:loading="loading"
empty-text="没有更多数据了!">
<vxe-column type="seq" width="40" fixed="left"></vxe-column>
<vxe-column
v-for="item in columns"
:key="`${item.dataIndex}3`"
:field="item.dataIndex"
:min-width="item.width"
:title="item.title"
:fixed="item.fixed"
:align="item.align"
>
<template #default="{ row }" v-if="item.title == '类型'">
<span>{{ FnTurnD(row.typeCode) }}</span>
</template>
</vxe-column>
<vxe-column title="操作" fixed="right" width="120" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">
<a-icon type="form" :style="{ color: '#13c2c2' }" />
</vxe-button>
<a-popconfirm
title="请确认删除?"
ok-text="是"
cancel-text="否"
@confirm="
e => {
confirm(e, row)
}
"
>
<vxe-button type="text">
<a-icon type="delete" :style="{ color: '#13c2c2' }" />
</vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
:loading="loading"
:current-page="queryParam.currentPage"
:page-size="queryParam.pageSize"
:total="queryParam.totalResult"
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
@page-change="handlePageChange"
>
</vxe-pager>
</a-card>
</div>
</template>
<script>
import {
DjyWebsiteAccountConfigPageTenant,
DjyWebsiteAccountConfigDeleteTenant
} from '@/api/modular/main/CompanySiteaccount'
import columnSetting from '@/components/tableColumnSetting'
export default {
components: {
columnSetting
},
data() {
return {
TypeData: [],
// /
advanced: false,
loading: false,
setVisible: false,
setVisible1: false,
queryParam: {
currentPage: 1,
pageSize: 10,
totalResult: 1
},
form: {},
ColumnsQuery: [],
columns: [
{
title: '订舱编号',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '船名/航次',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '船公司',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '合约号',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '承运模式',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '订舱方式',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: 'ETD',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: 'ETA',
align: 'center',
width: '100',
dataIndex: 'typeCode',
fixed: 'left'
},
{
title: '箱型箱量',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: 'WEEK',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '装货港名称',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '卸货港名称',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '样单截止时间',
align: 'center',
width: '130',
dataIndex: 'typeCode'
},
{
title: 'VGM截止时间',
align: 'center',
width: '130',
dataIndex: 'typeCode'
},
{
title: '截港时间',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '入港清单截止',
align: 'center',
width: '130',
dataIndex: 'typeCode'
},
{
title: 'MDGF截止',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '航线',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '重量(KGS)',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '创建日期',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '创建人',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '更新日期',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '更新人',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: 'VGM回执',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: 'SI回执',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '提箱',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '还箱',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '预甩',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '舱位变更',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '舱位取消',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '卸船未提货',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '提箱未还空箱',
align: 'center',
width: '150',
dataIndex: 'typeCode'
},
{
title: '费用信息',
align: 'center',
width: '100',
dataIndex: 'typeCode'
}
],
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
// Promise
loadData: []
}
},
created() {},
mounted() {
this.init()
this.TypeData = this.$options.filters['dictData']('website_account_type')
},
methods: {
FnTurnD(data) {
let Rdata = ''
this.TypeData.forEach(item => {
if (item.code == data) {
Rdata = item.name
}
})
return Rdata
},
toggleAdvanced() {
this.advanced = !this.advanced
},
init() {
Object.assign(this.$data, this.$options.data())
this.ColumnsQuery = this.columns
this.FnGetData()
},
handlePageChange({ currentPage, pageSize }) {
this.queryParam.pageNo = currentPage
this.queryParam.pageSize = pageSize
this.FnGetData()
},
FnGetData() {
this.loading = true
DjyWebsiteAccountConfigPageTenant(this.queryParam).then(res => {
this.loadData = res.data.rows
this.loading = false
this.queryParam.currentPage = res.data.pageNo
this.queryParam.pageSize = res.data.pageSize
this.queryParam.totalResult = res.data.totalRows
})
},
switchingDate() {
const obj = JSON.parse(JSON.stringify(this.queryParam))
return obj
},
confirm(e, data) {
this.DjyWebsiteAccountConfigDeleteTenant(data)
},
DjyWebsiteAccountConfigDeleteTenant(record) {
DjyWebsiteAccountConfigDeleteTenant(record).then(res => {
if (res.success) {
this.$message.success('删除成功')
this.FnGetData()
} else {
this.$message.error(`删除失败,${res.message}`)
}
})
},
handleOk() {
this.FnGetData()
},
handleAdd() {
this.$router.push({
name: 'CabinManagementDetails',
query: {
type: 'Add',
Ids: 123
}
})
}
}
}
</script>
<style lang="less" scoped>
.table-operator {
margin-bottom: 18px;
}
button {
margin-right: 8px;
}
.Open {
}
.Close {
height: 45px;
overflow: hidden;
}
.vxe-table--render-default .vxe-body--row.row--stripe {
background: #f5f9fe;
}
.ant-card-body {
padding-top: 10px;
}
.nav-box {
padding: 0 10px;
.nav {
display: inline-block;
margin-right: 8px;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0);
padding: 0 10px;
height: 28px;
line-height: 26px;
.iconfont {
margin-right: 6px;
}
&:hover {
border: 1px solid rgba(255, 255, 255, 0);
border-radius: 4px;
}
&:nth-of-type(1) {
.iconfont {
color: #1d8aff;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(2) {
.iconfont {
color: #865ef8;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(3) {
.iconfont {
color: #ff9702;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(4) {
.iconfont {
color: #1d8aff;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(5) {
.iconfont {
color: #ff1062;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(6) {
.iconfont {
color: #1ebeca;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(7) {
.iconfont {
color: #82c93d;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
&:nth-of-type(8) {
.iconfont {
color: #1d8aff;
}
&:hover {
background: #fff;
box-shadow: 0 0 10px #eee;
}
}
}
}
</style>

@ -0,0 +1,479 @@
<template>
<div>
<a-card :bordered="false" :bodyStyle="tstyle">
<div class="table-page-search-wrapper" :class="advanced ? 'Open' : 'Close'">
<a-form :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
<a-row>
<a-col :span="6">
<a-form-item label="邮箱名称">
<a-input v-model="form.name" allow-clear placeholder="请输入邮箱名称" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="创建时间">
<a-range-picker />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="创建人">
<a-input allow-clear placeholder="请输入创建人" />
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item label="更新人">
<a-input allow-clear placeholder="请输入更新人" />
</a-form-item>
</a-col>
<a-col :span="1">
<a @click="toggleAdvanced" style="margin-left: 8px;margin-top: 9px;display: inline-block;">
{{ advanced ? '收起' : '展开' }}
<a-icon :type="advanced ? 'up' : 'down'" />
</a>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="账户名">
<a-input v-model="form.name" allow-clear placeholder="请输入账户名" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="更新时间">
<a-range-picker />
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="是否IMAO">
<a-select>
<a-select-option value="是">
</a-select-option>
<a-select-option value="否">
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item label="发件服务器">
<a-input allow-clear placeholder="请输入发件服务器" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item label="收件服务器">
<a-input allow-clear placeholder="请输入收件服务器" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</a-card>
<a-card :bordered="false">
<div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
<div>
<a-button type="primary" @click="handleAdd"></a-button>
<a-button type="danger">作废</a-button>
</div>
<div>
<a-button type="primary" @click="FnGetData"></a-button>
<a-button style="margin-left: 8px" @click="init"></a-button>
</div>
</div>
<vxe-table
:data="loadData"
stripe
resizable
round
:loading="loading"
empty-text="没有更多数据了!">
<vxe-column type="seq" width="40" fixed="left"></vxe-column>
<vxe-column
v-for="item in columns"
:key="`${item.dataIndex}3`"
:field="item.dataIndex"
:min-width="item.width"
:title="item.title"
:fixed="item.fixed"
:align="item.align">
<!-- <template #default="{ row }" v-if="item.title == '类型'">
<span>{{ FnTurnD(row.typeCode) }}</span>
</template> -->
</vxe-column>
<vxe-column title="操作" fixed="right" width="120" align="center">
<template #default="{ row }">
<vxe-button type="text" @click="$refs.editForm.edit(row)">
<a-icon type="form" :style="{ color: '#13c2c2' }" />
</vxe-button>
<a-popconfirm
title="请确认删除?"
ok-text="是"
cancel-text="否"
@confirm="e => {
confirm(e, row)
}
">
<vxe-button type="text">
<a-icon type="delete" :style="{ color: '#13c2c2' }" />
</vxe-button>
</a-popconfirm>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
:loading="loading"
:current-page="queryParam.currentPage"
:page-size="queryParam.pageSize"
:total="queryParam.totalResult"
:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
@page-change="handlePageChange">
</vxe-pager>
</a-card>
<a-modal title="邮箱配置" width="800px" @cancel="visible = false" :visible="visible">
<a-form-model :model="addForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
<a-form-model-item label="邮箱名称">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="密码">
<a-input v-model="form.name" />
</a-form-model-item>
<a-form-model-item label="接收服务器类型">
<a-select>
<a-select-option value="IMAP">
IMAP
</a-select-option>
<a-select-option value="POP3">
POP3
</a-select-option>
</a-select>
</a-form-model-item>
<div class="inline">
<a-form-model-item label="收件服务器">
<a-input v-model="form.name" />
</a-form-model-item>
<div class="inline-right">
<a-checkbox>SSL</a-checkbox>
端口:
<a-input style="width: 100px;" v-model="form.name" />
</div>
</div>
<div class="inline">
<a-form-model-item label="发件服务器">
<a-input v-model="form.name" />
</a-form-model-item>
<div class="inline-right">
<a-checkbox>SSL</a-checkbox>
端口:
<a-input style="width: 100px;" v-model="form.name" />
</div>
</div>
<a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="解析配置">
<a-icon @click="handleOpenAddSet" style="color: rgb(46, 223, 46);font-size: 16px;" type="plus" />
<a-table style="width: 100%;" :pagination="false" :columns="formColumns" :data-source="formData" bordered>
<template slot="cz" slot-scope="text">
<a-icon style="color: red;" type="delete" />
</template>
<template slot="dm" slot-scope="text">
<div style="color: rgb(30,152,215);">{{ text }}</div>
</template>
</a-table>
</a-form-model-item>
</a-form-model>
<template slot="footer">
<a-button type="primary">保存</a-button>
<a-button style="margin: 0 10px;" type="danger">作废</a-button>
<a-button @click="visible = false">关闭</a-button>
</template>
</a-modal>
<a-modal title="邮箱解析配置" width="800px" @cancel="addSettingFlag = false" :visible="addSettingFlag">
<a-table
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
type: 'radio',
}"
style="width: 100%;"
:pagination="false"
:columns="addColumns"
:data-source="addData"
bordered>
<template slot="dm" slot-scope="text">
<div style="color: rgb(30,152,215);">{{ text }}</div>
</template>
</a-table>
</a-modal>
</div>
</template>
<script>
import {
DjyWebsiteAccountConfigPageTenant,
DjyWebsiteAccountConfigDeleteTenant
} from '@/api/modular/main/CompanySiteaccount'
import columnSetting from '@/components/tableColumnSetting'
export default {
components: {
columnSetting
},
data() {
return {
TypeData: [],
// /
advanced: false,
visible: false,
loading: false,
selectedRowKeys: [],
setVisible: false,
setVisible1: false,
addSettingFlag: false,
addForm: {},
addData: [
{
key: 1,
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park'
},
{
key: 2,
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park'
},
{
key: 3,
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park'
}
],
addColumns: [
{
title: '注入名称',
dataIndex: 'name',
align: 'center',
scopedSlots: { customRender: 'dm' }
},
{
title: '注入代码',
dataIndex: 'money',
align: 'center'
},
{
title: '注入代码完整路径',
dataIndex: 'address',
align: 'center'
}
],
queryParam: {
currentPage: 1,
pageSize: 10,
totalResult: 1
},
formColumns: [
{
title: '解析代码',
dataIndex: 'name',
align: 'center',
scopedSlots: { customRender: 'dm' }
},
{
title: '解析名称',
dataIndex: 'money',
align: 'center'
},
{
title: '操作',
dataIndex: 'address',
scopedSlots: { customRender: 'cz' },
width: 70,
align: 'center'
}
],
formData: [
{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park'
}
],
form: {},
ColumnsQuery: [],
columns: [
{
title: '邮箱名称',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '账户名',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '是否IMAP',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '收件服务器',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '收件SLL',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '收件端口',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '发件服务器',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '发件SLL',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '发件端口',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '创建日期',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '创建人',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '更新日期',
align: 'center',
width: '100',
dataIndex: 'typeCode'
},
{
title: '更新人',
align: 'center',
width: '130',
dataIndex: 'typeCode'
}
],
tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
loadData: []
}
},
created() { },
mounted() {
this.init()
},
methods: {
toggleAdvanced() {
this.advanced = !this.advanced
},
onSelectChange(selectedRowKeys) {
console.log(selectedRowKeys)
this.selectedRowKeys = selectedRowKeys;
},
handleOpenAddSet() {
this.addSettingFlag = true
},
init() {
this.FnGetData()
},
handlePageChange({ currentPage, pageSize }) {
this.queryParam.pageNo = currentPage
this.queryParam.pageSize = pageSize
this.FnGetData()
},
FnGetData() {
this.loading = true
DjyWebsiteAccountConfigPageTenant(this.queryParam).then(res => {
this.loadData = res.data.rows
this.loading = false
this.queryParam.currentPage = res.data.pageNo
this.queryParam.pageSize = res.data.pageSize
this.queryParam.totalResult = res.data.totalRows
})
},
confirm(e, data) {
this.DjyWebsiteAccountConfigDeleteTenant(data)
},
DjyWebsiteAccountConfigDeleteTenant(record) {
DjyWebsiteAccountConfigDeleteTenant(record).then(res => {
if (res.success) {
this.$message.success('删除成功')
this.FnGetData()
} else {
this.$message.error(`删除失败,${res.message}`)
}
})
},
handleAdd() {
this.visible = true
}
}
}
</script>
<style lang="less" scoped>
.table-operator {
margin-bottom: 18px;
}
.Close {
height: 45px;
overflow: hidden;
}
.vxe-table--render-default .vxe-body--row.row--stripe {
background: #f5f9fe;
}
.ant-card-body {
padding-top: 10px;
}
.inline {
position: relative;
}
.inline-right {
position: absolute;
top: 6px;
right: 25px;
}
</style>
Loading…
Cancel
Save