|
@@ -0,0 +1,457 @@
|
|
|
+<!-- 每日转仓看板 -->
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="tab-nav">
|
|
|
+ <div class="date-filter-wrap">
|
|
|
+ <span style="font-size: 14px;font-weight: bold;color: black">每日退仓看板</span>
|
|
|
+ </div>
|
|
|
+ <div class="date-filter-wrap">
|
|
|
+ <date-select v-model="params" @change="selectTime"></date-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="tab-nav">
|
|
|
+ <Row>
|
|
|
+ <i-col span="8" style="display: flex">
|
|
|
+ <div style="min-width: 40px; line-height: 32px; text-align: center">直喷:</div>
|
|
|
+ <div class="row">
|
|
|
+ <Button
|
|
|
+ :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
|
|
|
+ @click="userClick(item)"
|
|
|
+ v-for="(item, index) in typeList['A007']"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span>{{ item.realName }}</span>
|
|
|
+
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </i-col>
|
|
|
+ <i-col span="8" style="display: flex">
|
|
|
+ <div style="min-width: 40px; line-height: 32px; text-align: center">打纸:</div>
|
|
|
+ <div class="row">
|
|
|
+ <Button
|
|
|
+ :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
|
|
|
+ @click="userClick(item)"
|
|
|
+ v-for="(item, index) in typeList['A012']"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span>{{ item.realName }}</span>
|
|
|
+
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </i-col>
|
|
|
+ <i-col span="8" style="display: flex">
|
|
|
+ <div style="min-width: 40px; line-height: 32px; text-align: center">热转:</div>
|
|
|
+ <div class="row">
|
|
|
+ <Button
|
|
|
+ :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
|
|
|
+ @click="userClick(item)"
|
|
|
+ v-for="(item, index) in typeList['A008']"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span>{{ item.realName }}</span>
|
|
|
+
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </i-col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="table-filter">
|
|
|
+ <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 100%">
|
|
|
+ <div class="label" style="border-right: 2px solid #dcdcdc">
|
|
|
+ <span>退仓概况</span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ 金额
|
|
|
+ <span>{{ statisticsDetails.price * 1 }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 卷数
|
|
|
+ <span>{{ statisticsDetails.count }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 米数
|
|
|
+ <span>{{ statisticsDetails.quantity }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 面积
|
|
|
+ <span>{{ statisticsDetails.area }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <my-table ref="table" :data="data" :columns="columns" :table-page="params" @on-change="changePage"></my-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import MyTable from '_c/my-table/my-table'
|
|
|
+ import axios from 'axios'
|
|
|
+ import dateSelect from '@/components/dateSelect/dateSelect'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'daily_report',
|
|
|
+ components: { MyTable, dateSelect },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ technologyType: '',
|
|
|
+ typeList: {},
|
|
|
+ data: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ type: 'index',
|
|
|
+ width: 60,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '提交人员',
|
|
|
+ key: 'submitUser',
|
|
|
+ minWidth: 100,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '接收人员',
|
|
|
+ key: 'receiveUser',
|
|
|
+ minWidth: 100,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转仓时间',
|
|
|
+ key: 'submitTime',
|
|
|
+ minWidth: 300,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '面料名称',
|
|
|
+ key: 'materialName',
|
|
|
+ minWidth: 200,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转仓米数',
|
|
|
+ key: 'quantity',
|
|
|
+ minWidth: 100,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转仓面积',
|
|
|
+ key: 'area',
|
|
|
+ minWidth: 100,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ btnIndex: '',
|
|
|
+ params: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ type: '3',
|
|
|
+ beginTime: null,
|
|
|
+ endTime: null,
|
|
|
+ total: 0,
|
|
|
+ technologyType: '',
|
|
|
+ jobNo: '',
|
|
|
+ userId: ''
|
|
|
+ },
|
|
|
+ statisticsDetails: {
|
|
|
+ scheduleArea: '',
|
|
|
+ pickingMoney: '',
|
|
|
+ pickingNum: '',
|
|
|
+ pickingMeters: '',
|
|
|
+ pickingArea: '',
|
|
|
+ backMoney: '',
|
|
|
+ backNum: '',
|
|
|
+ backMeters: '',
|
|
|
+ backArea: '',
|
|
|
+ useRate: '',
|
|
|
+ actualUse: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getAllList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectTime() {
|
|
|
+ this.getAllList()
|
|
|
+ },
|
|
|
+ getAllList() {
|
|
|
+ axios
|
|
|
+ .post('/cloudApi/stockBack/getBackUser', {
|
|
|
+ beginTime: this.params.beginTime,
|
|
|
+ endTime: this.params.endTime
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.typeList = res.data.data
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ userClick(item) {
|
|
|
+ if (this.btnIndex === item.userId + '_' + item.technologyType) {
|
|
|
+ this.params.userId = ''
|
|
|
+ this.params.jobNo = ''
|
|
|
+ this.params.technologyType = ''
|
|
|
+ this.btnIndex = item.userId + '_' + ''
|
|
|
+ } else {
|
|
|
+ this.params.userId = item.userId
|
|
|
+ this.params.jobNo = item.jobNo
|
|
|
+ this.params.technologyType = item.technologyType
|
|
|
+ this.btnIndex = item.userId + '_' + item.technologyType
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ changePage(pageNum) {
|
|
|
+ this.params.pageNum = pageNum
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ axios
|
|
|
+ .post('/cloudApi/stockTransfer/webStatistics', {
|
|
|
+ beginTime: this.params.beginTime,
|
|
|
+ endTime: this.params.endTime,
|
|
|
+ userId: this.params.userId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.statisticsDetails = res.data.data
|
|
|
+ })
|
|
|
+ axios
|
|
|
+ .post('/cloudApi/stockTransfer/webPage', {
|
|
|
+ pageNum: this.params.pageNum,
|
|
|
+ pageSize: this.params.pageSize,
|
|
|
+ beginTime: this.params.beginTime,
|
|
|
+ endTime: this.params.endTime,
|
|
|
+ userId: this.params.userId
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.data = res.data.data.records
|
|
|
+ this.params.total = res.data.data.total
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="less" scoped>
|
|
|
+ .container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .tab-nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .date-filter-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .date-filter {
|
|
|
+ width: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ &.other {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .date-tab {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 9px;
|
|
|
+ height: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: auto;
|
|
|
+ &.active {
|
|
|
+ background-color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ padding-top: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ &.red {
|
|
|
+ color: red;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date-tab {
|
|
|
+ flex: 1;
|
|
|
+ padding: 9px 4px;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 2px;
|
|
|
+ border-right: none;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ &:first-child {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ border-right: 1px solid #e6e6e6;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: #3f92f9;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.sub-nav {
|
|
|
+ .other-tab {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-right: none;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:first-child {
|
|
|
+ border-radius: 2px 0 0 2px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ border-radius: 0 2px 2px 0;
|
|
|
+ border-right: 1px solid #e6e6e6;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: #ffffff !important;
|
|
|
+ color: blue !important;
|
|
|
+ border: 1px solid blue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .all {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ // white-space: nowrap;
|
|
|
+ button {
|
|
|
+ margin-right: 10px;
|
|
|
+ min-width: 120px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border {
|
|
|
+ margin: 10px 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #d7d7d7;
|
|
|
+ }
|
|
|
+ .table-filter {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .table-filter > div {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #dddcdc;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #3f3f3f;
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #838383;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 6px 0;
|
|
|
+ span {
|
|
|
+ color: #3f3f3f;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fabric {
|
|
|
+ display: flex;
|
|
|
+ .label {
|
|
|
+ width: 14%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: 86%;
|
|
|
+ li {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ span {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fabricOne {
|
|
|
+ display: flex;
|
|
|
+ .label {
|
|
|
+ width: 20%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .labelOne {
|
|
|
+ width: 40%;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: 60%;
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ span {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ink {
|
|
|
+ display: flex;
|
|
|
+ .label {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ width: 75%;
|
|
|
+ li {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .ivu-row {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ .add-color {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|