tire-platform-ui/src/views/exportTrade/salesContract/index.vue

<template>
    <div>
        <basic-container v-show="show" class="page-crad">
            <avue-crud
                ref="crud"
                :option="option"
                :data="dataList"
                v-model="form"
                :page.sync="page"
                :search.sync="search"
                @search-change="searchChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad"
                @saveColumn="saveColumn"
                @resetColumn="resetColumn"
                :cell-style="cellStyle"
                :summary-method="summaryMethod"
                @expand-change="expandChange"
                @selection-change="selectionChange"
                @search-criteria-switch="searchCriteriaSwitch"
            >
                <template slot-scope="{ row }" slot="expand">
                    <avue-crud
                        :data="row.itemData"
                        :option="itemOption"
                        :table-loading="row.itemLoading"
                        :cell-style="cellStyle"
                        class="itemTable"
                    ></avue-crud>
                </template>
                <template slot-scope="{ row }" slot="orderStatus">
                    <span v-for="item in orderStatusList" :style="{color: item.colour}"
                          v-if="item.dictValue == row.orderStatus">{{ row.orderStatus }}</span>
                </template>
                <template slot-scope="{ row }" slot="grossProfitRate">
                    {{ row.grossProfitRate }}%
                </template>
                <template slot-scope="{ row }" slot="createUser">
                    <span>{{ row.createUserName }}</span>
                </template>
                <template slot-scope="{ row }" slot="orderQuantity">
                    <span>{{ row.orderQuantity | IntegerFormat }}</span>
                </template>
                <template slot-scope="{ row }" slot="amount">
                    <span>{{ row.amount | decimalFormat }}</span>
                </template>
                <template slot-scope="{ row }" slot="purchaseAmount">
                    <span>{{ row.purchaseAmount | decimalFormat }}</span>
                </template>
                <template slot="menuLeft">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="small"
                        @click.stop="newAdd('new')"
                    >创建单据
                    </el-button>
                    <el-button
                        type="success"
                        size="small"
                        @click.stop="copyDoc()"
                        :disabled="selectionList.length != 1">
                        复制单据
                    </el-button>
                    <el-button type="info" size="small">报表打印</el-button>
                </template>
                <template slot="corpIdSearch">
                    <crop-select v-model="search.corpId" corpType="KH"></crop-select>
                </template>
                <template slot="portOfLoadSearch">
                    <port-info v-model="search.portOfLoad"/>
                </template>
                <template slot="portOfDestinationSearch">
                    <port-info v-model="search.portOfDestination"/>
                </template>
                <template slot="businesDateSearch">
                    <el-date-picker
                        v-model="search.businesDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </template>
                <template slot="plannedDeliveryDateSearch">
                    <el-date-picker
                        v-model="search.plannedDeliveryDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </template>
                <template slot="createTimeSearch">
                    <el-date-picker
                        v-model="search.createTime"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </template>
                <template slot-scope="scope" slot="corpId">
                  <span
                      style="color: #409EFF;cursor: pointer"
                      @click.stop="editOpen(scope.row, 1)">
                      {{ scope.row.corpsName }}
                  </span>
                </template>
                <template slot-scope="scope" slot="orderNo">
                  <span
                      style="color: #409EFF;cursor: pointer"
                      @click.stop="editOpen(scope.row, 1)">
                      {{ scope.row.orderNo }}
                  </span>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button
                        type="text"
                        icon="el-icon-search"
                        size="small"
                        @click.stop="procurementProgress(scope.row, scope.index)"
                    >采购进度
                    </el-button>
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        size="small"
                        @click.stop="rowDel(scope.row, scope.index)"
                    >删除
                    </el-button>
                </template>
            </avue-crud>
        </basic-container>
        <detail-page
            @goBack="goBack"
            @copyOrder="copyOrder"
            :detailData="detailData"
            v-if="!show"
        ></detail-page>
        <el-dialog
            title="采购进度"
            :visible.sync="dialogVisible"
            v-if="dialogVisible"
            :append-to-body="true"
            width="30%">
            <span>
                <el-table
                    :data="purchaseStatusList"
                    size="mini"
                    :header-cell-style="{color: '#000000d9'}"
                    style="width: 100%">
                  <el-table-column
                      prop="orderNo"
                      align="center"
                      :show-overflow-tooltip="true"
                      label="采购单号">
                  </el-table-column>
                  <el-table-column
                      prop="orderStatus"
                      align="center"
                      :show-overflow-tooltip="true"
                      label="采购状态">
                  </el-table-column>
                </el-table>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import option from "./config/mainList.json";
import {
    getList,
    remove,
    getPorts,
    gainUser,
    getGoodsInfo, listPurchaseStatus
} from "@/api/basicData/salesContract";
import detailPage from "./detailsPage.vue";
import {defaultDate} from "@/util/date";
import {micrometerFormat, IntegerFormat, decimalFormat} from "@/util/validate";
import _ from "lodash";

export default {
    name: "customerInformation",
    data() {
        return {
            dialogVisible: false,
            purchaseStatusList: [],
            search: {
                businesDate: defaultDate()
            },
            form: {},
            option: {},
            parentId: 0,
            dataList: [],
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            show: true,
            detailData: {},
            loading: false,
            itemOption: {
                align: "center",
                header: false,
                border: true,
                menu: false,
                column: [
                    {
                        label: "产品类别",
                        prop: "priceCategory",
                        width: 140,
                        overHidden: true
                    },
                    {
                        label: "产品名称",
                        prop: "cname",
                        width: 240,
                        overHidden: true
                    },
                    {
                        label: "产品描述",
                        prop: "itemDescription",
                        width: 240,
                        overHidden: true
                    },
                    {
                        label: "配件描述",
                        prop: "partsDescribe",
                        width: 240,
                        overHidden: true
                    },
                    {
                        label: "配件价格描述",
                        prop: "partsPriceDescribe",
                        width: 240,
                        overHidden: true
                    },
                    {
                        label: "数量",
                        prop: "orderQuantity",
                        width: 100,
                        overHidden: true
                    }, {
                        label: "单价",
                        prop: "price",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "金额",
                        prop: "amount",
                        width: 100,
                        overHidden: true
                    }
                ]
            },
            selectionList: [],
            orderStatusList: []
        };
    },
    components: {detailPage},
    async created() {
        this.option = await this.getColumnData(this.getColumnName(4), option);
        getPorts().then(res => {
            this.findObject(this.option.column, "portOfLoad").dicData = res.data;
            this.findObject(this.option.column, "portOfDestination").dicData =
                res.data;
        });
        this.getWorkDicts("order_status").then(res => {
            this.findObject(this.option.column, "orderStatus").dicData =
                res.data.data;
            this.orderStatusList = res.data.data
        });
        gainUser().then(res => {
            this.findObject(this.option.column, "createUser").dicData = res.data.data;
        });
    },
    filters: {
        IntegerFormat(num) {
            return IntegerFormat(num);
        },
        decimalFormat(num) {
            return decimalFormat(num);
        }
    },
    activated() {
        if (!this.$store.getters.xsStatus && !this.show) {
            this.show = true;
        }
        if (this.$route.query.id) {
            setTimeout(() => {
                this.editOpen({id: this.$route.query.id}, 1);
            }, 100);
        }
        if (this.$route.query.check) {
            this.detailData = {
                id: this.$route.query.check.billId,
                check: this.$route.query.check,
            };
            this.show = false;
            this.$store.commit("IN_XS_STATUS");
        }
        if (this.$route.query.params) {
            this.detailData = {
                id: this.$route.query.params
            };
            this.show = false;
            this.$store.commit("IN_XS_STATUS");
        }
    },
    methods: {
        searchCriteriaSwitch(type) {
            if (type) {
                this.option.height = this.option.height - 191;
            } else {
                this.option.height = this.option.height + 191;
            }
            this.$refs.crud.getTableHeight();
        },
        cellStyle() {
            return "padding:0;height:40px;";
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        expandChange(row) {
            if (!row.itemData) {
                getGoodsInfo({id: row.id, tradeType: "CK"})
                    .then(res => {
                        this.dataList[row.$index].itemData = res.data.data;
                    })
                    .finally(() => {
                        this.dataList[row.$index].itemLoading = false;
                    });
            }
        },
        procurementProgress(row, index) {
            listPurchaseStatus(row.id).then(res => {
                this.purchaseStatusList = res.data.data
                this.dialogVisible = true
            })
        },
        //删除列表后面的删除按钮触发触发(row, index, done)
        rowDel(row, index, done) {
            this.$confirm("确定删除数据?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                remove(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                        this.onLoad(this.page, this.search);
                    }
                });
            });
        },
        //查看跳转页面
        editOpen(row, status) {
            if (this.$route.query.id) {
                this.$router.$avueRouter.closeTag(this.$route.fullPath);
                this.$router.push({
                    path: "/exportTrade/salesContract/index"
                });
            }
            this.detailData = {
                id: row.id,
                status: status
            };
            this.show = false;
            this.$store.commit("IN_XS_STATUS");
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            if (params.businesDate) {
                params.orderStartDate = params.businesDate[0];
                params.orderEndDate = params.businesDate[1];
            }
            if (params.plannedDeliveryDate) {
                params.plannedDeliveryStart = params.plannedDeliveryDate[0];
                params.plannedDeliveryEnd = params.plannedDeliveryDate[1];
            }
            if (params.createTime) {
                params.createTimeStart = params.createTime[0];
                params.createTimeEnd = params.createTime[1];
            }
            delete params.businesDate;
            delete params.plannedDeliveryDate;
            delete params.createTime;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        currentChange(val) {
            this.page.currentPage = val;
        },
        sizeChange(val) {
            this.page.currentPage = 1;
            this.page.pageSize = val;
        },
        onLoad(page, params) {
            if (this.search.businesDate && this.search.businesDate.length > 0) {
                params = {
                    ...params,
                    orderStartDate: this.search.businesDate[0],
                    orderEndDate: this.search.businesDate[1]
                };
                delete params.businesDate;
            }
            this.dataList.forEach(item => {
                this.$refs.crud.toggleRowExpansion(item, false);
            });
            getList(page.currentPage, page.pageSize, params).then(res => {
                if (res.data.data.records) {
                    res.data.data.records.forEach(e => {
                        e.itemLoading = true;
                    });
                }
                this.dataList = res.data.data.records ? res.data.data.records : [];
                this.page.total = res.data.data.total;
                if (this.page.total) {
                    this.option.height = window.innerHeight - 210;
                }
            });
        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        newAdd(type) {
            this.detailData = {
                pageType: type
            };
            this.show = false;
            this.$store.commit("IN_XS_STATUS");
        },
        copyDoc() {
            this.selectionList.forEach(e => {
                this.detailData = {
                    id: e.id,
                    status: "copy"
                };
                this.show = false;
                this.$store.commit("IN_XS_STATUS");
            });
        },
        copyOrder(id) {
            this.show = true;
            this.detailData = {
                id: id,
                status: "copy"
            };
            this.$nextTick(() => {
                this.show = false;
                this.$store.commit("IN_XS_STATUS");
            });
        },
        goBack() {
            this.detailData = this.$options.data().detailData;
            this.show = true;
            this.onLoad(this.page, this.search);
            this.$store.commit("OUT_XS_STATUS");
        },
        summaryMethod({columns, data}) {
            const sums = [];
            if (columns.length > 0) {
                columns.forEach((item, index) => {
                    sums[0] = "合计";
                    if (
                        item.property == "minOrder" ||
                        item.property == "predictOceanFreight" ||
                        item.property == "referenceOceanFreight" ||
                        item.property == "oceanFreight" ||
                        item.property == "orderQuantity" ||
                        item.property == "actualQuantity" ||
                        item.property == "grossProfit" ||
                        item.property == "amount" ||
                        item.property == "purchaseAmount"
                    ) {
                        let qtySum = 0;
                        let instoreSum = 0;
                        let totalSum = 0;
                        let oceanFreightSum = 0;
                        let orderQuantitySum = 0;
                        let actualQuantitySum = 0;
                        let amountSum = 0;
                        let purchaseAmountSum = 0;
                        data.forEach(e => {
                            qtySum = _.add(qtySum, Number(e.minOrder));
                            instoreSum = _.add(instoreSum, Number(e.predictOceanFreight));
                            totalSum = _.add(totalSum, Number(e.referenceOceanFreight));
                            oceanFreightSum = _.add(oceanFreightSum, Number(e.oceanFreight));
                            orderQuantitySum = _.add(
                                orderQuantitySum,
                                Number(e.orderQuantity)
                            );
                            actualQuantitySum = _.add(
                                actualQuantitySum,
                                Number(e.actualQuantity)
                            );
                            amountSum = _.add(amountSum, Number(e.amount));
                            purchaseAmountSum = _.add(
                                purchaseAmountSum,
                                Number(e.purchaseAmount)
                            );
                        });
                        //数量总计
                        if (item.property == "minOrder") {
                            sums[index] = qtySum ? qtySum.toFixed(2) : "0.00";
                        }
                        //入库金额总计
                        if (item.property == "predictOceanFreight") {
                            sums[index] = micrometerFormat(instoreSum);
                        }
                        //金额总计
                        if (item.property == "referenceOceanFreight") {
                            sums[index] = micrometerFormat(totalSum);
                        }
                        //实际海运费
                        if (item.property == "oceanFreight") {
                            sums[index] = micrometerFormat(oceanFreightSum);
                        }
                        if (item.property == "orderQuantity") {
                            sums[index] = orderQuantitySum
                                ? orderQuantitySum.toFixed(2)
                                : "0.00";
                        }
                        if (item.property == "actualQuantity") {
                            sums[index] = actualQuantitySum
                                ? actualQuantitySum.toFixed(2)
                                : "0.00";
                        }
                        if (item.property == "amount") {
                            sums[index] = micrometerFormat(amountSum);
                        }
                        if (item.property == "purchaseAmount") {
                            sums[index] = micrometerFormat(purchaseAmountSum);
                        }
                    }
                });
            }
            return sums;
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(4),
                this.option
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.option = option;
            const inSave = await this.delColumnData(this.getColumnName(4), option);
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        }
    },
    watch: {
        option: function () {
            this.search.businesDate = defaultDate();
        }
    }
};
</script>

<style scoped>
::v-deep .select-component {
    display: flex;
}

.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}

.itemTable ::v-deep .el-table {
    margin-left: 50px;
    width: 100%;
}
</style>