|
|
@@ -0,0 +1,243 @@
|
|
|
+<template>
|
|
|
+ <!-- 染损表报 -->
|
|
|
+ <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-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="订单类型">
|
|
|
+ <a-select placeholder="请选择订单类型" v-model="queryParam.orderType">
|
|
|
+ <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-option :value="2">订单类型3</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="供应商">
|
|
|
+ <a-input placeholder="请输入供应商" v-model="queryParam.supplier"></a-input>
|
|
|
+ </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.planNum"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :md="6" :sm="8">
|
|
|
+ <a-form-item label="销售订单号">
|
|
|
+ <a-input placeholder="请输入销售订单号" v-model="queryParam.salesOrderNum"></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>
|
|
|
+
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
+ <div class="table-operator">
|
|
|
+ <a-button type="primary" @click="handleExportXls('染损报表')" icon="download">导出</a-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- table区域 rowKey="id" :scroll="{ x: 1500 }"-->
|
|
|
+ <div>
|
|
|
+ <a-table
|
|
|
+ ref="tableInfo"
|
|
|
+ bordered
|
|
|
+ :row-key="record => record.id"
|
|
|
+ :columns="dyeLossColumns"
|
|
|
+ :data-source="dyeLossData"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="ipagination"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :footer="totalShow"
|
|
|
+ :scroll="{ x: 1500 }"
|
|
|
+ >
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'DyeLossTable', // 染损报表
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ components: { JEllipsis, moment },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
|
|
|
+
|
|
|
+ return {
|
|
|
+ description: '染损报表',
|
|
|
+ // 表头
|
|
|
+ dyeLossColumns: [
|
|
|
+ {
|
|
|
+ title: '物料编号',
|
|
|
+ width: 160,
|
|
|
+ dataIndex: 'materialNum',
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '物料名称',
|
|
|
+ width: 160,
|
|
|
+ dataIndex: 'materialName',
|
|
|
+ className: 'replacecolor'
|
|
|
+ },
|
|
|
+ { title: '颜色', width: 160, dataIndex: 'color', className: 'replacecolor' },
|
|
|
+ { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
|
|
|
+ {
|
|
|
+ title: '订单号',
|
|
|
+ width: 160,
|
|
|
+ dataIndex: 'orderNum',
|
|
|
+ className: 'replacecolor'
|
|
|
+ // customRender: function(text) {
|
|
|
+ // if (text == '1') {
|
|
|
+ // return '销售类型1'
|
|
|
+ // }
|
|
|
+ // if (text == '2') {
|
|
|
+ // return '销售类型2'
|
|
|
+ // }
|
|
|
+ // if (text == '3') {
|
|
|
+ // return '销售类型3'
|
|
|
+ // }
|
|
|
+ // if (text == '4') {
|
|
|
+ // return '销售类型4'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ { title: '订单数量', width: 100, dataIndex: 'orderQuantity', className: 'replacecolor' },
|
|
|
+ { title: '采购入库数', width: 100, dataIndex: 'purchaseInQuantity', className: 'replacecolor' },
|
|
|
+ { title: '材料出库数', width: 100, dataIndex: 'materialsOutQuantity', className: 'replacecolor' },
|
|
|
+ { title: '核销数量', width: 100, dataIndex: 'verificationNum', className: 'replacecolor' },
|
|
|
+ { title: '染损', width: 120, dataIndex: 'dyeLoss', className: 'replacecolor' }
|
|
|
+ ],
|
|
|
+ dyeLossData: [
|
|
|
+ { orderQuantity: '10', purchaseInQuantity: '10', materialsOutQuantity: '10', verificationNum: '10' },
|
|
|
+ { orderQuantity: '20', purchaseInQuantity: '20', materialsOutQuantity: '20', verificationNum: '20' },
|
|
|
+ { orderQuantity: '30', purchaseInQuantity: '30', materialsOutQuantity: '30', verificationNum: '30' },
|
|
|
+ { orderQuantity: '40', purchaseInQuantity: '40', materialsOutQuantity: '40', verificationNum: '40' }
|
|
|
+ ],
|
|
|
+ loading: false, // 表格加载
|
|
|
+ // 查询条件
|
|
|
+ queryParam: {
|
|
|
+ orderNum: '',
|
|
|
+ orderType: '',
|
|
|
+ supplier: '',
|
|
|
+ planNum: '',
|
|
|
+ salesOrderNum: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 渲染订单销售列表
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 同步
|
|
|
+ synchronization() {},
|
|
|
+
|
|
|
+ // 查询按钮
|
|
|
+ searchQuery() {
|
|
|
+ // 渲染订单销售列表
|
|
|
+ },
|
|
|
+ searchReset() {
|
|
|
+ // console.log('>>>>重置')
|
|
|
+ this.queryParam = {}
|
|
|
+ // 重新渲染订单销售列表
|
|
|
+ },
|
|
|
+ totalShow(data) {
|
|
|
+ console.log('染损报表 ----合计')
|
|
|
+ console.log('data', data)
|
|
|
+ return (
|
|
|
+ <a-table
|
|
|
+ rowKey={Math.random}
|
|
|
+ bordered={false}
|
|
|
+ pagination={false}
|
|
|
+ columns={this.dyeLossColumns}
|
|
|
+ dataSource={this.footerData || []}
|
|
|
+ showHeader={false}
|
|
|
+ ></a-table>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分页、排序、筛选变化时触发
|
|
|
+ // handleTableChange(pagination, filters, sorter) {
|
|
|
+ // // console.log('当前页信息>>>>',pagination)
|
|
|
+ // this.queryParam.pageNo = pagination.current
|
|
|
+ // // this.getOrderList()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ watched: {
|
|
|
+ dyeLossData(val) {
|
|
|
+ // 同步表与 footer
|
|
|
+ let dom = this.$refs.tableInfo.$el.querySelectAll('.ant-table-body')[0]
|
|
|
+ dom.addEventListener(
|
|
|
+ 'scroll',
|
|
|
+ () => {
|
|
|
+ this.$refs.tableInfo.$el.querySelectAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
|
|
|
+ },
|
|
|
+ true
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // dyeLossDataSource() {
|
|
|
+ // // 所有物料 对应单元格数量 合计
|
|
|
+ // const total = Object.assign({}, this.dyeLossData[0])
|
|
|
+ // for (const attr in total) {
|
|
|
+ // total[attr] = '合计'
|
|
|
+ // break
|
|
|
+ // }
|
|
|
+ // return [total]
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+// }
|
|
|
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+</style>
|
liangyan0105