|
|
@@ -0,0 +1,359 @@
|
|
|
+<template>
|
|
|
+ <!-- 托书汇总明细报表 -->
|
|
|
+ <div id="bookTotal-details-table">
|
|
|
+ <!-- 查询 -->
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="预发货日期">
|
|
|
+ <a-date-picker
|
|
|
+ placeholder="请选择预发货日期"
|
|
|
+ :format="dateFormat"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="queryParam.scheduledShipDate"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="实际船期">
|
|
|
+ <a-date-picker
|
|
|
+ placeholder="请选择实际船期"
|
|
|
+ :format="dateFormat"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="queryParam.actualShipDate"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="业务部门">
|
|
|
+ <a-select v-model="queryParam.operatingDepartment">
|
|
|
+ <a-select-option value="">请选择</a-select-option>
|
|
|
+ <a-select-option :value="0">业务部门1</a-select-option>
|
|
|
+ <a-select-option :value="1">业务部门2</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <template v-if="toggleSearchStatus">
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="款号">
|
|
|
+ <a-input placeholder="请输入款号" v-model="queryParam.styleNum"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <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>
|
|
|
+ <a @click="handleToggleSearch" style="margin-left: 8px">
|
|
|
+ {{ toggleSearchStatus ? '收起' : '展开' }}
|
|
|
+ <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <!-- 子表 -->
|
|
|
+ <a-card :bordered="false" style=" marginTop:10px;">
|
|
|
+ <a-table
|
|
|
+ bordered
|
|
|
+ :row-key="record => record.id"
|
|
|
+ :columns="bookTotalDetailsColumns"
|
|
|
+ :data-source="bookTotalDetailsData"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :scroll="{ x: 1500 }"
|
|
|
+ @change="handleTableChange"
|
|
|
+ >
|
|
|
+ <!-- 推送状态 -->
|
|
|
+ <!-- slot-scope="text, record" -->
|
|
|
+ <span slot="pushStateSlot">
|
|
|
+ <!-- v-if="record.isRelease == '0'" -->
|
|
|
+ <a-tag color="#f50">失败</a-tag>
|
|
|
+ <!-- <a-tag color="#87d068" v-else>已发布</a-tag> -->
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 单据状态 -->
|
|
|
+ <span slot="documentStateSlot">
|
|
|
+ <a-tag color="#2db7f5">已保存</a-tag>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 操作 -->
|
|
|
+ <span slot="operationSlot" slot-scope="text, record">
|
|
|
+ <a href="javascript:void(0);" @click="declareElements(record)" style="color:green">申报要素</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 @click="details(record)">详情</a>
|
|
|
+ </a-menu-item>
|
|
|
+
|
|
|
+ <a-menu-item>
|
|
|
+ <a @click="submit(record)">提交</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a @click="edit(record)">编辑</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a @click="push(record)">推送</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
|
|
|
+ <a href="javascript:void(0);" style="color:red;">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'BookTotalDetailsTable', // 托书汇总明细报表
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: { JEllipsis, moment },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
|
|
|
+ return {
|
|
|
+ loading: false, // 表格加载
|
|
|
+ id: '',
|
|
|
+ // 表头
|
|
|
+ bookTotalDetailsColumns: [
|
|
|
+ // {
|
|
|
+ // title: '创建时间',
|
|
|
+ // dataIndex: 'createTime',
|
|
|
+ // align: 'center',
|
|
|
+ // sorter: true,
|
|
|
+ // customRender: text => {
|
|
|
+ // return moment(text).format('YYYY-MM-DD')
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ title: '实际船期',
|
|
|
+ dataIndex: 'actualShipDate',
|
|
|
+ fixed: 'left',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '进仓日/装柜日',
|
|
|
+ dataIndex: 'inLoadingDate',
|
|
|
+ fixed: 'left',
|
|
|
+ width: 130,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ dataIndex: 'customer',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left',
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发票号',
|
|
|
+ dataIndex: 'invoiceNum',
|
|
|
+ width: 160,
|
|
|
+ fixed: 'left',
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '款号',
|
|
|
+ dataIndex: 'styleNum',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'PO号',
|
|
|
+ dataIndex: 'poNum',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '数量(PCS)',
|
|
|
+ dataIndex: 'quantity',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '单价',
|
|
|
+ dataIndex: 'price',
|
|
|
+ width: 90,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '合计金额',
|
|
|
+ dataIndex: 'accountSet',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '总金额(USD)',
|
|
|
+ dataIndex: 'totalMoneyUSD',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工厂',
|
|
|
+ dataIndex: 'factory',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '启运港',
|
|
|
+ dataIndex: 'startPort',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: 'FCL/LCL(集装箱号)',
|
|
|
+ dataIndex: 'containerNo',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '业务员',
|
|
|
+ dataIndex: 'salesman',
|
|
|
+ width: 90,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出运数量(出运明细数量)',
|
|
|
+ dataIndex: 'ShipQuantity',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '体积',
|
|
|
+ dataIndex: 'volume',
|
|
|
+ width: 120,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '中文品名',
|
|
|
+ dataIndex: 'chineseName',
|
|
|
+ width: 120,
|
|
|
+ customRender: t => ellipsis(t),
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '业务部门',
|
|
|
+ dataIndex: 'operatingDepartment',
|
|
|
+ width: 90,
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划单号',
|
|
|
+ dataIndex: 'planNum',
|
|
|
+ width: 140,
|
|
|
+
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '制单人',
|
|
|
+ dataIndex: 'preparedBy',
|
|
|
+ width: 90,
|
|
|
+ fixed: 'right',
|
|
|
+ className: 'replacecolor'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ bookTotalDetailsData: [
|
|
|
+ {
|
|
|
+ actualShipDate: '2022-04-27',
|
|
|
+ inLoadingDate: '2022-04-27',
|
|
|
+ customer: 'PRIMARK',
|
|
|
+ invoiceNum: '22TW-PRU-35U',
|
|
|
+ styleNum: '41081',
|
|
|
+ poNum: 'A10347945',
|
|
|
+ quantity: '690',
|
|
|
+ price: '$1.95',
|
|
|
+ accountSet: '',
|
|
|
+ totalMoneyUSD: '$1,345.50',
|
|
|
+ factory: 'GY SEN',
|
|
|
+ startPort: 'MYANMAR',
|
|
|
+ containerNo: 'LCL',
|
|
|
+ salesman: 'BERYL',
|
|
|
+ ShipQuantity: '',
|
|
|
+ volume: '0.804',
|
|
|
+ chineseName: '合纤制针织女童短裤合纤制针织女童短裤',
|
|
|
+ operatingDepartment: '四部',
|
|
|
+ planNum: 'SYJ033/SYJ035',
|
|
|
+ preparedBy: 'COCO'
|
|
|
+ },
|
|
|
+ {}
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 查询条件
|
|
|
+ queryParam: {
|
|
|
+ scheduledShipDate: '', // 预发货日期
|
|
|
+ actualShipDate: '', // 实际船期
|
|
|
+ operatingDepartment: '', // 业务部门
|
|
|
+ styleNum: ''
|
|
|
+ },
|
|
|
+ dateFormat: 'YYYY-MM-DD'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getShipmentList() // 托书汇总明细报表
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查询按钮
|
|
|
+ searchQuery() {
|
|
|
+ // this.getAnnList() //托书汇总明细报表
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ searchReset() {
|
|
|
+ console.log('>>>>重置')
|
|
|
+ this.queryParam = {}
|
|
|
+ // this.getAnnList()
|
|
|
+ },
|
|
|
+ getBookTotalDetailsTable() {}
|
|
|
+
|
|
|
+ // 分页、排序、筛选变化时触发
|
|
|
+ // handleTableChange(pagination, filters, sorter) {
|
|
|
+ // // console.log('当前页信息>>>>',pagination)
|
|
|
+ // this.queryParam.pageNo = pagination.current
|
|
|
+ // // this.getAnnList()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '~@assets/less/common.less';
|
|
|
+@import '~@assets/less/overwriter.less';
|
|
|
+/deep/ .ant-table-thead > tr > th {
|
|
|
+ text-align: center;
|
|
|
+ // font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .ant-table-tbody {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+// /deep/ th.replacecolor {
|
|
|
+// background-color: #ccc;
|
|
|
+// }
|
|
|
+</style>
|
liangyan0105