tire-platform-ui/src/views/SpecialTrade/dispatchingCars/index.vue

<template>
    <div>
        <basic-container v-show="show">
            <div class="home-container">
                <div style="display: flex;justify-content: center;">
                    <div class="content">
                        <div class="content-item" @click="handleClick('')">
                            <div class="card">
                                <div class="card-title card-title1">
                <span>
                  全
                </span>
                                </div>
                                <div class="card-content">
                                    <span class="card-content-num" :class="!activeName?'selected':''">{{ totalData.all }}</span>
                                    <span class="card-content-text" :class="!activeName?'selected':''">全部</span>
                                </div>
                            </div>
                        </div>
                        <div class="divider"/>
                        <div class="content-item" @click="handleClick('0')">
                            <div class="card">
                                <div class="card-title card-title2">
                <span>
                  未
                </span>
                                </div>
                                <div class="card-content">
                                    <span class="card-content-num" :class="activeName === '0'?'selected':''">{{ totalData.zero }}</span>
                                    <span class="card-content-text" :class="activeName === '0'?'selected':''">未调度</span>
                                </div>
                            </div>
                        </div>
                        <div class="divider"/>
                        <div class="content-item" @click="handleClick('1')">
                            <div class="card">
                                <div class="card-title card-title3">
                <span>
                  派
                </span>
                                </div>
                                <div class="card-content">
                                    <span class="card-content-num" :class="activeName === '1'?'selected':''">{{ totalData.one }}</span>
                                    <span class="card-content-text" :class="activeName === '1'?'selected':''">未派车</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </basic-container>
        <basic-container v-show="show">
            <avue-crud
                :key="key"
                :table-loading="loading"
                :data="dataList"
                :page.sync="page"
                ref="crud"
                :search.sync="query"
                :option="option"
                @on-load="onLoad"
                @row-del="rowDel"
                @search-reset="query={};activeName = ''"
                @resetColumn="resetColumn"
                @saveColumn="saveColumn"
                @search-criteria-switch="searchCriteriaSwitch"
                @search-change="searchChange">
                <!--        <template slot="menuLeft" slot-scope="{size}">-->
                <!--          <el-button type="primary" :size="size" @click="rowSave">新增</el-button>-->
                <!--        </template>-->
                <template slot="corpNameSearch" slot-scope="{ row,index}">
                    <crop-select
                        v-model="row.corpId"
                    ></crop-select>
                </template>
                <template slot="corpShortNameSearch" slot-scope="{ row,index}">
                    <crop-select
                        v-model="row.corpId"
                        :corpType="'KH'"
                        :label="'shortName'"
                    ></crop-select>
                </template>
                <template slot="addressDetail" slot-scope="{ row,index}">
                    <el-tooltip class="item" effect="dark" placement="top">
                        <div v-html="ToBreak(row.addressDetail)" slot="content"></div>
                        <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.addressDetail }}</div>
                    </el-tooltip>
                </template>
                <template slot="billNo" slot-scope="{row,index}">
                    <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{ row.billNo }}</span>
                </template>
                <template slot-scope="{row,index}" slot="menu">
                    <el-button type="text"
                               icon="el-icon-edit"
                               size="small"
                               @click.stop="rowCell(row,index)">编辑
                    </el-button>
                    <!--          <el-button type="text"-->
                    <!--                     icon="el-icon-delete"-->
                    <!--                     size="small"-->
                    <!--                     @click.stop="$refs.crud.rowDel(row,index)">删除</el-button>-->
                </template>
                <template slot="corpName" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{
                  row.corpName
              }}</span>
                </template>
                <template slot="orderNo" slot-scope="{row,index}">
          <span class="el-button--text" style="cursor: pointer" @click.stop="rowCell(row,index)">{{
                  row.orderNo
              }}</span>
                </template>
            </avue-crud>s
        </basic-container>
        <detail-page v-if="!show" @backToList="backToList" :id="id" :home="home"></detail-page>
    </div>
</template>

<script>
import detailPage from './detailPage'
import {removeDelegationList, selectInvoiceList, totalList} from "@/api/landTransportation";
import {businessStatisticsFrequency} from "@/api/wel";
import {defaultDate} from "@/util/date";
export default {
    name: "index",
    components: {
        detailPage
    },
    data() {
        return {
            id: '',
            show: true,
            loading: false,
            query: {
                arrivalTime: [defaultDate(4)[0] + ' 00:00:00',defaultDate(4)[1] + ' 23:59:59']
            },
            key: 0,
            dataList: [],
            totalData: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 50, 100, 200, 300, 500, 1000]
            },
            option: {},
            activeName: '0',
            optionList: {
                stripe: true,
                align: 'center',
                menuWidth: 100,
                menu: false,
                index: true,
                addBtn: false,
                editBtn: false,
                delBtn: false,
                height: "auto",
                searchSpan: 8,
                searchIcon: true,
                column: [
                    {
                        label: '货运日期',
                        prop: 'arrivalTime',
                        overHidden: true,
                        type: "date",
                        searchRange: true,
                        defaultTime: ['00:00:00', '23:59:59'],
                        format: "yyyy-MM-dd HH:mm",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        index: 1,
                        width: 134,
                        search: true,
                    }, {
                        label: '业务员',
                        index: 2,
                        width: 74,
                        prop: 'salesman',
                        search: true,
                        overHidden: true,
                        type: "select",
                        dicUrl: "/api/blade-user/userList",
                        props: {
                            label: "realName",
                            value: "id"
                        }
                    }, {
                      label: '揽货员',
                      prop: 'pickUpGoodsUserName',
                      overHidden: true,
                      search: true,
                      index: 2,
                      width: 74,
                    }, {
                        label: '运输调度',
                        prop: 'dispatcherName',
                        overHidden: true,
                        index: 2,
                        width: 76,
                    }, {
                        label: '货运地点',
                        prop: 'addressDetail',
                        index: 3,
                        width: 122,
                        search: true,
                    }, {
                        label: '业务号',
                        prop: 'billNo',
                        index: 4,
                        overHidden: true,
                        width: 140,
                        search: true,
                    }, {
                        label: '场站',
                        prop: 'station',
                        overHidden: true,
                        index: 5,
                        width: 70,
                        search: true,
                    }, {
                        label: '车型车数',
                        prop: 'ctnDetail',
                        overHidden: true,
                        index: 6,
                        width: 84
                    }, {
                        label: '风险等级',
                        prop: 'riskLevel',
                        overHidden: true,
                        index: 7,
                        width: 84
                    }, {
                        label: '难度等级',
                        prop: 'difficultyLevel',
                        overHidden: true,
                        index: 8,
                        width: 94
                    }, {
                        label: '车队',
                        index: 9,
                        width: 92,
                        overHidden: true,
                        prop: 'fleetNameDetail'
                    }, {
                        label: '运费',
                        index: 10,
                        width: 98,
                        prop: 'freight'
                    }, {
                        label: '状态',
                        prop: 'itemStatusDetail',
                        index: 11,
                        overHidden: true,
                        width: 140
                    }, {
                        label: '公司名称',
                        prop: 'corpShortName',
                        overHidden: true,
                        index: 12,
                        width: 112,
                        search: true,
                    }, {
                        label: '订单号',
                        prop: 'orderNo',
                        index: 13,
                        overHidden: true,
                        width: 100,
                        search: true,
                    }
                    // , {
                    //   label: '所属公司',
                    //   prop: 'belongCompany',
                    //   overHidden: true,
                    //   index: 4,
                    //   width: 140,
                    //   search: true,
                    // }
                    // , {
                    //   label: '货物名称',
                    //   prop: 'goods',
                    //   overHidden: true,
                    //   index: 13,
                    //   width: 140,
                    //   search: true,
                    // }
                    // , {
                    //   label: '船名航次',
                    //   prop: 'factory',
                    //   overHidden: true,
                    //   index: 14,
                    //   width: 140,
                    //   search: true,
                    // }
                    ,
                    {
                        label: '制单日期',
                        overHidden: true,
                        prop: 'createTime',
                        type: "date",
                        searchRange: true,
                        defaultTime: ['00:00:00', '23:59:59'],
                        format: "yyyy-MM-dd HH:mm",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        index: 15,
                        width: 128,
                        search: true,
                    }]
            },
            home: false,
            dispatchTimer: null,
            roleName: localStorage.getItem("roleName").split(','),
            screen:{}
        }
    },
    activated() {
        if (this.$route.query.orderId) {
            this.rowCell({id: this.$route.query.orderId}, 0)
            this.$router.$avueRouter.closeTag(window.location.hash.slice(1))
            this.home = true
        }
        // if (this.$route.query.params){
        //   this.rowCell({id:this.$route.query.params},0)
        // }
    },
    async created() {
        // this.option = await this.getColumnData(this.getColumnName(86), this.optionList);
        this.option = this.optionList
        this.key++
        let i = 0;
        this.option.column.forEach(item => {
            if (item.search) i++
        })
        if (i % 3 !== 0) {
            const num = 3 - Number(i % 3)
            this.option.searchMenuSpan = num * 8;
            this.option.searchMenuPosition = "right";
        }
        if (this.roleName.indexOf('调度中心业务员') !== -1 || this.roleName.indexOf('调度中心经理') !== -1) {
            this.findObject(this.option.column, "freight").hide = true
            this.findObject(this.option.column, "freight").showColumn = false
        }
    },
    mounted() {
        businessStatisticsFrequency().then(res=>{
            let this_ = this;
            this_.dispatchTimer = setInterval(function () {
                if (JSON.parse(localStorage.getItem("saber-token")).content) {
                    totalList({
                        kind:2,
                        shippingMode:'大件',
                        ...this_.screen
                    }).then(res => {
                        this_.totalData = res.data.data
                    })
                }
            },  Number(res.data.data[0].dictKey)*1000)
        })
    },
    beforeDestroy() {
        clearInterval(this.dispatchTimer); //关闭
    },
    methods: {
        //自定义列保存
        async saveColumn() {
            /**
             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
             */
            // const inSave = await this.saveColumnData(this.getColumnName(86), this.option);
            const inSave = this.option
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumn() {
            this.option = this.optionList;
            // const inSave = await this.delColumnData(this.getColumnName(86), this.optionList);
            const inSave = this.optionList
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
                if (this.roleName.indexOf('调度中心业务员') !== -1 || this.roleName.indexOf('调度中心经理') !== -1) {
                    this.findObject(this.option.column, "freight").hide = true
                    this.findObject(this.option.column, "freight").showColumn = false
                }
            }
        },
        // 获得高度
        searchCriteriaSwitch(type) {
            if (type) {
                this.option.height = this.option.height - 138
            } else {
                this.option.height = this.option.height + 138
            }
            this.$refs.crud.getTableHeight()
        },
        onLoad(page, params = {}) {
            let queryParams = {
                size: page.pageSize,
                current: page.currentPage,
                itemStatus: this.activeName,
                status: this.activeName,
                kind: '2',
                shippingMode:'大件',
                ...params,
                ...Object.assign(params, this.query)
            }
            if (queryParams.arrivalTime) {
                queryParams.beginArrivalTime = queryParams.arrivalTime[0]
                queryParams.endArrivalTime = queryParams.arrivalTime[1]
            }
            delete queryParams.arrivalTime
            this.screen = queryParams
            totalList({
                kind:2,
                ...this.screen
            }).then(res => {
                this.totalData = res.data.data
            })
            this.loading = true;
            selectInvoiceList(queryParams).then(res => {
                console.log(res.data.data.records)
                this.dataList = res.data.data.records
                this.page.total = res.data.data.total
                this.option.height = window.innerHeight - 350;
            }).finally(() => {
                this.loading = false;
            })
        },
        //搜索
        searchChange(params, done) {
            let data = params
            if (params.arrivalTime) {
                data.beginArrivalTime = params.arrivalTime[0]
                data.endArrivalTime = params.arrivalTime[1]
            }
            if (params.createTime) {
                data.beginCrateTime = params.createTime[0]
                data.endCrateTime = params.createTime[1]
            }
            delete data.arrivalTime
            delete data.createTime
            this.query = data;
            this.onLoad(this.page, data)
            done();
        },
        //列表删除
        rowDel(row) {
            this.$confirm('此操作将永久删除该单据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeDelegationList({ids: row.id}).then(res => {
                    this.$message.success('删除成功');
                    this.onLoad(this.page)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //行编辑
        rowCell(row, index) {
            this.id = row.id
            this.show = false
        },
        rowSave() {
            this.show = false
        },
        backToList(type) {
            if (type) {
                this.$router.push({
                    path: '/SpecialTrade/dispatchingCars/index'
                });
            }
            this.show = true
            this.onLoad(this.page)
        },
        //切换订单状态
        handleClick(tab) {
            this.activeName = tab
            this.onLoad(this.page)
        },
        ToBreak(val) {
            if (val) return val.replace(/\n/g, '<br/>')
        }
    }
}
</script>

<style lang="scss" scoped>
.home-container {
    padding: 0px 5px 5px 5px;
    box-sizing: border-box;
    height: 100%;

    ::v-deep .el-card__body {
        padding: 10px 15px;
        font-size: 14px;
    }

    &__card {
        width: 100%;
        height: 100%;
    }

    .title {
        display: flex;
        justify-content: space-between;

        .right {
            display: flex;
            align-items: center;

            &_but {
                margin-right: 10px;
                border: 1px solid #409eff;
                width: 80px;
                border-radius: 3px;
                display: flex;

                &_left {
                    width: 40px;
                    text-align: center;
                    color: #409eff;
                    cursor: pointer;
                }

                &_right {
                    width: 40px;
                    text-align: center;
                    color: #409eff;
                    cursor: pointer;
                }

                &_active {
                    color: #fff;
                    background-color: #409eff;
                }
            }
        }
    }
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6vh !important;
    width: 80vw;

    .divider {
        display: block;
        height: 0px;
        width: 100%;
        border-top: 1px dashed #dcdfe6;
    }

    &-item {
        margin-left: 1vw;

        .card {
            width: 130px;
            display: flex;
            align-items: center;

            &-title {
                width: 40px;
                height: 40px;
                text-align: center;
                border-radius: 50%;
                font-size: 20px;
                font-weight: 600;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    line-height: 20px;
                }
            }

            &-title1 {
                color: #037fe1;
                background-color: rgba(3, 127, 225, 0.15);
            }

            &-title2 {
                color: #ffa21e;
                background-color: rgba(255, 162, 30, 0.15);
            }

            &-title3 {
                color: #fb5b60;
                background-color: rgba(251, 91, 96, 0.15);
            }

            &-title4 {
                color: #42bc6f;
                background-color: rgba(66, 188, 111, 0.15);
            }

            &-title5 {
                color: #14cde1;
                background-color: rgba(52, 149, 161, 0.15);
            }

            &-title6 {
                color: rgba(4, 66, 31, 0.63);
                background-color: rgba(66, 188, 111, 0.15);
            }

            &-content {
                padding-left: 1vw;
                display: flex;
                flex-direction: column;

                &-num {
                    font-size: 20px;
                    font-weight: 600;
                }

                &-text {
                    color: #909399;
                }
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.selected{
    color: #1e9fff !important;
}
.home-container {
    padding: 0px 5px 5px 5px;
    box-sizing: border-box;
    height: 100%;

    ::v-deep .el-card__body {
        padding: 10px 15px;
        font-size: 14px;
    }

    &__card {
        width: 100%;
        height: 100%;
    }

    .title {
        display: flex;
        justify-content: space-between;

        .right {
            display: flex;
            align-items: center;

            &_but {
                margin-right: 10px;
                border: 1px solid #409eff;
                width: 80px;
                border-radius: 3px;
                display: flex;

                &_left {
                    width: 40px;
                    text-align: center;
                    color: #409eff;
                    cursor: pointer;
                }

                &_right {
                    width: 40px;
                    text-align: center;
                    color: #409eff;
                    cursor: pointer;
                }

                &_active {
                    color: #fff;
                    background-color: #409eff;
                }
            }
        }
    }
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vh;
    width: 80vw;

    .divider {
        display: block;
        height: 0px;
        width: 100%;
        border-top: 1px dashed #dcdfe6;
    }

    &-item {
        margin-left: 1vw;

        .card {
            width: 130px;
            display: flex;
            align-items: center;

            &-title {
                width: 40px;
                height: 40px;
                text-align: center;
                border-radius: 50%;
                font-size: 20px;
                font-weight: 600;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    line-height: 20px;
                }
            }

            &-title1 {
                color: #037fe1;
                background-color: rgba(3, 127, 225, 0.15);
            }

            &-title2 {
                color: #ffa21e;
                background-color: rgba(255, 162, 30, 0.15);
            }

            &-title3 {
                color: #fb5b60;
                background-color: rgba(251, 91, 96, 0.15);
            }

            &-title4 {
                color: #42bc6f;
                background-color: rgba(66, 188, 111, 0.15);
            }

            &-title5 {
                color: #14cde1;
                background-color: rgba(52, 149, 161, 0.15);
            }

            &-title6 {
                color: rgba(4, 66, 31, 0.63);
                background-color: rgba(66, 188, 111, 0.15);
            }

            &-content {
                padding-left: 1vw;
                display: flex;
                flex-direction: column;

                &-num {
                    font-size: 20px;
                    font-weight: 600;
                }

                &-text {
                    color: #909399;
                }
            }
        }
    }
}
</style>