item-management-web/src/views/assets/myOrderList.vue

<template>
    <div class="app-container">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="selectMyOrderPage">
            <template slot="left">
                <PermissionButton menu-code="_views_assets_add_order" class-name="filter-item" type="danger"
                    icon="el-icon-circle-plus-outline" :page-jump="true" round style="float: left"
                    :page-query="{ 'couldEdit': true, 'saveOrderBtn': '保存订单', 'showBtn': true, 'couldBack': true }" />
                <el-input style="margin-left: 20px;width: 300px;float: left;" class="filter-item"
                    v-model="listQuery.keyWord" placeholder="项目编号/报告号/项目名称/业务来源" clearable>
                </el-input>
                <el-select v-model="listQuery.principalId" filterable placeholder="项目负责人（可搜索）"
                    style=" width: 200px;margin-left: 10px;float: left;">
                    <el-option v-for="(u, id) in allUsers" :label="u.name" :value="u.id"></el-option>
                </el-select>
                <el-select v-model="listQuery.delivery" filterable placeholder="送达状态"
                    style=" width: 200px;margin-left: 10px;float: left;">
                    <el-option v-for="(s, value) in deliverys" :label="s.label" :value="s.value"></el-option>
                </el-select>
                <el-select v-model="listQuery.departmentId" filterable placeholder="接单部门"
                    style=" width: 200px;margin-left: 10px;float: left;">
                    <el-option v-for="(d, id) in allotDepartment" :label="d.name" :value="d.id"></el-option>
                </el-select>
                <el-date-picker style="margin-left: 20px;float: left;" v-model="selectDate" type="daterange"
                    :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
                <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList"
                    round>搜索
                </el-button>
                <el-button class="filter-item" style="float: left;" round type="success" @click="resetParams()">重置
                </el-button>
                <el-button class="filter-item" style="float: left;" round type="success" @click="exportMyOrder()" :disabled="!listQuery.startTime && !listQuery.endTime">导出
                </el-button>
            </template>
            <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
                <el-table-column label="项目编号" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.orderId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="分单类型" align="center" width="100">
                    <template slot-scope="{row}">
                        <span>{{ row.allotType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="意见书号" align="center" width="250">
                    <template slot-scope="{row}">
                        <span>{{ row.statementNo == null ? '-' : row.statementNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="报告号" align="center" width="250">
                    <template slot-scope="{row}">
                        <span>{{ row.reportNo == null ? '-' : row.reportNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" align="center" width="250" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务类型" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.assetsBusinessGener }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.customerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务来源" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.customerSubName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托人" align="center" width="150" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.bailor == null ? '-' : row.bailor }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托人联系电话" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.bailorContactTel == null ? '-' : row.bailorContactTel }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="当前节点" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.currentNodeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="当前节点负责人" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.handlerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目负责人" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.principalName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户经理" align="center" width="120">
                    <template slot-scope="{row}">
                        <span>{{ row.clientManagerName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="评估结论对应的评估值(万)" align="center" width="200">
                    <template slot-scope="{row}">
                        <span>{{ row.estimatedValue == null ? '-' : row.estimatedValue }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="订单应收款(元)" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.shouldAmount == null ? '-' : row.shouldAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单实收款(元)" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.realAmount == null ? '-' : row.realAmount }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="产品应收款(元)" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.productionShouldAmount == null ? '-' : row.productionShouldAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品实收款(元)" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.productionRealAmount == null ? '-' : row.productionRealAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="标准收费(元)" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.standardAmount == null ? '-' : row.standardAmount }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="折扣比例" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.discount == null ? '-' : row.discount }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="实际开票金额" align="center" width="150">
                    <template slot-scope="{row}">
                        <span>{{ row.invoiceRealAmount == null ? '-' : row.invoiceRealAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="送达状态" align="center" width="150">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.reportDelivery" type='success'>已送达</el-tag>
                        <el-tag v-else type='danger'>未送达</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" align="center" width="150" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <span>{{ row.created }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150" fixed="right">
                    <template slot-scope="{row}">
                        <div class="optionDiv" style="white-space: nowrap; display: inline-block">
                            <div>
                                <el-button type="text" size="mini"
                                    :disabled="!((!row.reportDelivery || row.reportDelivery == null) && row.reportRepertoryState)"
                                    @click="markDelivery(row)">
                                    标记送达
                                </el-button>
                                <el-button type="text" size="mini" @click="orderDetail(row)">
                                    查看
                                </el-button>
                                <el-button type="text" size="mini" @click="editOrder(row)">
                                    编辑
                                </el-button>
                            </div>
                            <!-- <div>
                                <el-button type="text" size="mini" @click="openShouldAmountDialog(row)">
                                    订单应收款
                                </el-button>
                            </div> -->
                            <div>
                                <el-button :disabled="!(row.reportNo !== null)" type="text" size="mini"
                                    @click="openProShouldAmountDialog(row)">
                                    产品应收款
                                </el-button>
                                <el-button :disabled="!(row.currentNodeCode === 'REPORT_OUT_APPLY')" type="text" size="mini"
                                    @click="openRepertoryOutWarehouse(row)">
                                    提前出库
                                </el-button>
                            </div>
                            <div>
                                <el-button :disabled="!(row.realAmount > 0)" type="text" size="mini"
                                    @click="openAllotProductionDialog(row)">
                                    实收款分配
                                </el-button>
                                <el-button type="text" size="mini" @click="openFinanceInvoiceDialog(row.orderFundId, row.productionFundId, row.realAmount, row.customerName, row.customerSubName)">
                                    申请开票
                                </el-button>
                            </div>
                            <!-- <el-button v-if="row.currentNodeCode === 'REPORT_OUT_APPLY'" type="text"
                            @click="canceladdRepertoryOutWarehouse(row)">
                            撤销出库申请 
                            </el-button> -->
                        </div>
                    </template>
                </el-table-column>
            </parentTable>
        </y-page-list-layout>
        <el-dialog :visible.sync="shouldAmountDialog" width="35%" center top="35vh" custom-class="doWarehouseClass"
            @closed="cleanData">
            <el-form ref="fund" :model="fund" style="margin-left:40px">
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="12">
                        <el-form-item label="应收款金额(元)：" prop="shouldAmount" label-width="160px"
                            class="postInfo-container-item"
                            :rules="{ required: true, message: '应收款金额不能为空', trigger: 'blur' }">
                            <el-input-number :precision="2" :min="null" :value-on-clear="0"
                                v-model.number="fund.shouldAmount" type="number" style="width:300px" class="filter-item" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="12">
                        <el-form-item label="备注：" prop="remark" label-width="160px" class="postInfo-container-item">
                            <el-input style="width:300px" type="textarea" v-model="fund.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="shouldAmountDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveShouldAmount()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="proShouldAmountDialog" width="35%" center top="35vh" custom-class="doWarehouseClass"
            @closed="cleanData">
            <el-form ref="productionFundFrom" :model="productionFundFrom" style="margin-left:40px">
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="12">
                        <el-form-item label="产品应收款金额(元)：" prop="productionShouldAmount" label-width="180px"
                            class="postInfo-container-item"
                            :rules="{ required: true, message: '应收款金额不能为空', trigger: 'blur' }">
                            <el-input-number :precision="2" :min="null" :value-on-clear="0"
                                v-model.number="productionFundFrom.productionShouldAmount" type="number" style="width:300px"
                                class="filter-item" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="12">
                        <el-form-item label="备注：" prop="remark" label-width="180px" class="postInfo-container-item">
                            <el-input style="width:300px" type="textarea" v-model="productionFundFrom.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="proShouldAmountDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveProShouldAmount()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="repertoryOutWarehouseVisible">
            <el-form ref="outWarehouse" :model="outWarehouse" style="margin-left:40px; margin-right: 200px;">
                <el-row>
                    <el-col>
                        <el-form-item label="报告号：" prop="remark" label-width="160px" class="postInfo-container-item">
                            <el-input type="input" placeholder="请输入申请提前出库原因" v-model="outWarehouse.reportNo"
                                disabled></el-input>
                        </el-form-item>
                        <el-form-item label="出库原因：" prop="remark" label-width="160px" class="postInfo-container-item">
                            <el-input type="textarea" placeholder="请输入申请提前出库原因" v-model="outWarehouse.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="repertoryOutWarehouseVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRepertoryOutWarehouse()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分配资产订单实收款到产品 -->
        <el-dialog :visible.sync="allotAmountDialog" width="65%" center custom-class="doWarehouseClass">
            <el-form v-model="orderProduction" ref="orderProduction">
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="6">
                        <el-button style="float:right" type="success"
                            @click="allotOrderRealAmountToProduction()">确认分配</el-button>
                    </el-col>
                </el-row>
                <el-card style="margin-top:20px" shadow="hover">
                    <div slot="header" class="clearfix">
                        <el-row>
                            <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                <el-form-item label="订单名称：" prop="orderName" label-width="140px"
                                    class="postInfo-container-item">
                                    <el-input :value="orderProduction.orderName" type="text" class="filter-item" disabled
                                        readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                <el-form-item label="订单号：" prop="orderId" label-width="140px"
                                    class="postInfo-container-item">
                                    <el-input :value="orderProduction.orderId" type="text" class="filter-item" disabled
                                        readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                <el-form-item label="订单已认领金额：" prop="realAmount" label-width="160px"
                                    :class="['postInfo-container-item', 'real-amount']">
                                    <el-input :value="orderProduction.realAmount" type="text" class="filter-item" disabled
                                        readonly>
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :lg="12" :span="6">
                                <el-form-item label="未分配金额：" prop="notAllotAmount" label-width="160px"
                                    :class="['postInfo-container-item', 'real-amount']">
                                    <el-input :value="notAllotAmount" type="text" class="filter-item" disabled readonly>
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row>
                        <el-col :xs="24" :sm="12" :lg="12" :span="6">
                            <el-form-item label="产品列表：" prop="orderName" label-width="140px"
                                class="postInfo-container-item" />
                        </el-col>
                    </el-row>
                    <div v-if="orderProduction.reports != null && orderProduction.reports.length > 0">
                        <el-row v-for="(r, index) in orderProduction.reports">
                            <div>
                                <el-col :xs="24" :sm="12" :lg="5" :span="6">
                                    <el-form-item :label="productionLabel + (index + 1) + ':'" prop="productionType"
                                        label-width="90px" class="postInfo-container-item">
                                        <el-input :value="r.productionType" type="text" class="filter-item" disabled
                                            readonly />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="7" :span="6">
                                    <el-form-item label="报告号：" prop="businessSubId" label-width="90px"
                                        class="postInfo-container-item">
                                        <el-input :value="r.businessSubId" type="text" class="filter-item" disabled
                                            readonly />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                    <el-form-item label="已分配金额：" prop="claimedAmount" label-width="120px"
                                        class="postInfo-container-item">
                                        <el-input-number :precision="2" :min="0" :value-on-clear="0"
                                            v-model.number="r.claimedAmount" type="number" style="width:100%"
                                            class="filter-item" readonly disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :xs="24" :sm="12" :lg="6" :span="6">
                                    <el-form-item label="本次分配：" prop="thisTimeAmount" label-width="100px"
                                        class="postInfo-container-item">
                                        <el-input-number :precision="2" :min="0" :value-on-clear="0"
                                            v-model.number="r.thisTimeAmount" type="number" style="width:100%"
                                            class="filter-item" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </div>
                    <span v-else style="margin-left:140px;color:RGB(153,153,153)">暂无产品</span>
                </el-card>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="makeInvoiceListDialog" width="90%" center custom-class="doWarehouseClass">
            <el-button type="danger" round @click="openNewInvoiceDialog()">新增开票</el-button>
            <div style="margin-top:30px;">
                <el-table :data="invoiceData" stripe :header-row-style="{ color: '#333333', 'font-size': '14px' }" border
                    style="width: 100%; margin-top:20px;font-size: 14px;">
                    <el-table-column align="center" prop="title" label="发票抬头" width="180">
                    </el-table-column>
                    <el-table-column align="center" prop="taxNo" label="税号" width="180">
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="发票类型">
                    </el-table-column>
                    <el-table-column align="center" prop="state" label="开票状态">
                        <template slot-scope="{row}">
                            <span :style="stateStyle(row.state)">{{ row.state }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="planAmount" label="计划开票金额">
                    </el-table-column>
                    <el-table-column align="center" prop="planMakeDate" label="计划开票日期">
                    </el-table-column>
                    <el-table-column align="center" prop="realAmount" label="实际开票金额">
                    </el-table-column>
                    <el-table-column align="center" prop="realMakeDate" label="实际开票日期">
                    </el-table-column>
                    <el-table-column align="center" prop="reason" label="驳回/作废原因">
                    </el-table-column>
                    <el-table-column align="center" prop="remark" label="备注">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200" align="center">
                        <template slot-scope="{row}">
                            <el-button :disabled="row.state != '审核中'" @click="invoiceDetail(row.id)" type="text"
                                size="small">修改</el-button>
                            <el-button :disabled="row.state != '已开票'" @click="cancellation(row.id)" type="text"
                                size="small">申请作废</el-button>
                            <el-button @click="copyInvoice(row)" type="text" size="small">复制</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="newInvoiceDialog" width="55%" top="10vh" center custom-class="doWarehouseClass"
            @closed="cleanFinanceInvoiceForm">
            <el-form ref="invoice" :model="invoice">
                <el-divider content-position="left">开票信息</el-divider>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="发票抬头：" :rules="{ required: true, message: '发票抬头不能为空', trigger: 'blur' }"
                            prop="title" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.title" class="filter-item" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="发票类型：" :rules="{ required: true, message: '发票类型不能为空', trigger: 'blur' }"
                            prop="type" label-width="140px" class="postInfo-container-item">
                            <el-select v-model="invoice.type" style="width:100%">
                                <el-option label="普票" value="普票"></el-option>
                                <el-option label="专票" value="专票"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="税号：" :rules="{ required: true, message: '税号不能为空', trigger: 'blur' }"
                            prop="taxNo" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.taxNo" class="filter-item" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="计划开票日期：" prop="planMakeDate"
                            :rules="{ required: true, message: '计划开票日期不能为空', trigger: 'blur' }" label-width="140px"
                            class="postInfo-container-item">
                            <el-date-picker v-model="invoice.planMakeDate" type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd" style="width:100%">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="待开金额(元):" prop="planAmount"
                            :rules="{ required: true, message: '使用权面积不能为空', trigger: 'blur' }" label-width="140px"
                            class="postInfo-container-item">
                            <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.planAmount"
                                type="number" style="width:100%" class="filter-item" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="是否收款:" label-width="140px" class="postInfo-container-item">
                            <el-radio-group :value="invoice.realPayAmount ? '已收款' : '未收款'">
                                <el-radio label="已收款"></el-radio>
                                <el-radio label="未收款"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="开票项目：" prop="makeItem" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.makeItem" class="filter-item" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="项目数量:" prop="itemQuantity" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.itemQuantity" class="filter-item" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="12" :span="6">
                        <el-form-item label="计量单位：" prop="itemUnit" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.itemUnit" class="filter-item" placeholder="个/套/箱/次/斤/公斤/..." />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :lg="24" :span="6">
                        <el-form-item label="备注：" prop="remark" label-width="140px" class="postInfo-container-item">
                            <el-input v-model.trim="invoice.remark" type="textarea" :autosize="{ minRows: 5, maxRows: 8 }"
                                class="filter-item" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-divider content-position="left">银行信息</el-divider>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="开户行：" prop="bankName" label-width="140px" class="postInfo-container-item">
              <el-input v-model.trim="invoice.bankName" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" :span="6">
            <el-form-item label="银行账号：" prop="bankAccount" label-width="140px" class="postInfo-container-item">
              <el-input v-model.trim="invoice.bankAccount" class="filter-item" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="地址：" prop="bankAddress" label-width="140px" class="postInfo-container-item">
              <el-input v-model.trim="invoice.bankAddress" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" :span="6">
            <el-form-item label="电话：" prop="bankTel" label-width="140px" class="postInfo-container-item">
              <el-input v-model.trim="invoice.bankTel" class="filter-item" />
            </el-form-item>
          </el-col>
        </el-row> -->
                <!-- <el-divider content-position="left">发票信息</el-divider>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="发票号码：" prop="ticketNo" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.ticketNo" class="filter-item"  readonly disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="实开金额(元)：" prop="realAmount" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.realAmount" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
         
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="申请日期：" prop="created" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.created" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="实开日期：" prop="realMakeDate" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.realMakeDate" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="订单类型：" prop="businessType" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.businessType" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="开票人：" prop="applyName" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.applyName" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="订单编号：" prop="orderId" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.orderId" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="12" :span="6">
            <el-form-item label="产品号：" prop="productionNo" label-width="140px" class="postInfo-container-item">
              <el-input :value="invoice.productionNo" class="filter-item" readonly disabled/>
            </el-form-item>
          </el-col>
        </el-row> -->

                <!-- <el-row>
          <el-col :xs="24" :sm="12" :lg="6" :span="6">
            <el-form-item label="税点：" prop="taxRate" label-width="140px" class="postInfo-container-item">
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.taxRate" type="number"
                style="width:206px" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" :span="6">
            <el-form-item label="税额:" prop="taxAmount" label-width="140px" class="postInfo-container-item">
              <el-input-number :precision="2" :min="0" :value-on-clear="0" v-model.number="invoice.taxAmount"
                type="number" style="width:206px" class="filter-item" />
            </el-form-item>
          </el-col>
        </el-row> -->

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newInvoiceDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveInvoice()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import PermissionButton from '@/components/PermissionButton/PermissionButton'
import { getOperatorWidth } from '@/utils/tableUtil.js'

export default {
    name: 'AssetsMyOrderList',
    components: {
        Breadcrumb,
        YPageListLayout,
        PermissionButton
    },
    data() {
        return {
            // dynamicWidth: 0,
            pageData: { records: [] },
            listLoading: false,
            listQuery: {
                page: 1,
                size: 10,
                current: 1,
                // 节点code
                nodeCode: null,
                // 客户经理id
                clientManagerId: this.$store.getters.userInfo.id,
                // 项目负责人id
                principalId: null,
                // 业务类型
                assetsBusinessGener: null,
                // 关键字
                keyWord: null,
                // 送达状态
                delivery: null,
                departmentId: null,
                // 开始时间
                startTime: null,
                // 结束时间
                endTime: null
            },
            // 接单部门
            allotDepartment: [],
            // 用户下拉列表
            allUsers: [],
            // 送达状态下拉列表
            deliverys: [
                {
                    value: '1',
                    label: '已送达'
                }, {
                    value: '0',
                    label: '未送达'
                },
            ],
            shouldAmountDialog: false,
            proShouldAmountDialog: false,
            fund: {
                id: null,
                businessType: null,
                orderName: null,
                orderId: null,
                shouldAmount: null,
                remark: null,
                businessType: null,
                businessId: null,
                businessSubId: null,
                productionFundId: null,
                evaluateAmount: null
            },
            repertoryOutWarehouseVisible: false,
            outWarehouse: {
                id: null,
                productionFundId: null,
                reportNo: null,
                statementNo: null,
                remark: null,
                realAmount: null
            },
            businessId: null,
            businessSubId: null,
            businessMinId: null,
            recordId: null,
            currentNodeId: null,
            // 产品收款信息
            productionFundFrom: {
                id: null,
                businessType: null,
                businessId: null,
                productionNo: null,
                productionType: null,
                orderFundId: null,
                productionShouldAmount: null,
                remark: null
            },
            allotAmountDialog: false,
            notAllotAmount: null,
            productionLabel: "产品",
            orderProduction: {
                reports: [],
                orderName: null,
                orderId: null,
                realAmount: null,
                id: null
            },
            invoiceData: [],
            invoice: {
                id: null,
                orderFundId: null,
                productionFundId: null,
                title: null,
                type: null,
                taxNo: null,
                planAmount: null,
                planMakeDate: null,
                bankName: null,
                bankAccount: null,
                bankAddress: null,
                bankTel: null,
                makeItem: null,
                itemQuantity: null,
                itemUnit: null,
                taxRate: null,
                taxAmount: null,
                remark: null,
                realPayAmount: null,
                realAmount: null,
                realMakeDate: null
            },
            makeInvoiceListDialog: false,
            newInvoiceDialog: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            selectDate: ''
        }
    },
    created() {
        // 获取用户下拉列表
        this.getAllUser();
        // 获取分单部门
        this.getAllotDepartment();
        // 获取我的资产业务订单
        this.selectMyOrderPage();
        if (this.$route.query.repertoryOutWarehouseVisible === 'true') {
            this.openRepertoryOutWarehouse(JSON.parse(this.$route.query.row));
        }
    },
    // updated() {
    //     this.dynamicWidth = getOperatorWidth();
    // },
    methods: {
        // 无条件分页查询
        selectMyOrderPage() {
            this.listLoading = true;
            if (this.selectDate) {
                this.listQuery.startTime = this.selectDate[0] + ' 00:00:00';
                this.listQuery.endTime = this.selectDate[1] + ' 23:59:59';
            }
            this.$api.assets.selectMyOrderPage(this.listQuery).then(res => {
                if (res.code === 200) {
                    this.pageData = res.data;
                }
                this.listLoading = false;
            })
        },
        // 条件查询
        searchList() {
            // 重置分页
            this.listQuery.page = 1
            this.listQuery.size = 10
            this.listQuery.current = 1
            this.selectMyOrderPage()
        },
        // 重置搜索条件
        resetParams() {
            this.$router.push({ query: {} });
            this.selectDate = '';
            this.listQuery = {
                page: 1,
                size: 10,
                current: 1,
                // 节点code
                nodeCode: null,
                // 客户经理id
                clientManagerId: this.$store.getters.userInfo.id,
                // 项目负责人id
                principalId: null,
                // 业务类型
                assetsBusinessGener: null,
                // 关键字
                keyWord: null,
                // 送达状态
                delivery: null
            }
            this.selectMyOrderPage();
        },
        // 获取所有用户下拉列表
        getAllUser() {
            this.$api.user.simpleAll().then(res => {
                if (res.code === 200) {
                    this.allUsers = res.data;
                }
            })
        },
        orderDetail(row) {
            const newRow = {
                assetsId: row.assetsId,
                statementNo: row.statementNo,
                reportNo: row.reportNo,
            }
            this.$router.push({
                path: "/assets/orderDetail",
                query: {
                    row: JSON.stringify(newRow),
                    back: '/assets/myOrderList',
                    couldEdit: false,
                    couldBack: false,
                    disabledStatus: true
                }
            })
        },
        openShouldAmountDialog(row) {
            this.shouldAmountDialog = true;
            this.fund.id = row.orderFundId;
            this.fund.businessType = 'ASSET_BUSINESS';
            this.fund.businessId = row.assetsId;
            this.fund.orderFundId = row.orderFundId;
            this.fund.shouldAmount = row.shouldAmount;
            this.fund.remark = row.remark;
            this.fund.orderId = row.orderId;
            this.fund.orderName = row.name;
        },
        stateStyle(state) {
            if (state === '已开票') {
                return 'color:green'
            } else {
                return 'color:red'
            }
        },
        openProShouldAmountDialog(row) {
            if (row.orderFundId !== null) {
                this.proShouldAmountDialog = true;
                this.productionFundFrom.id = row.productionFundId;
                this.productionFundFrom.businessType = 'ASSET_BUSINESS';
                this.productionFundFrom.businessId = row.assetsId;
                this.productionFundFrom.orderFundId = row.orderFundId;
                this.productionFundFrom.productionNo = row.reportNo;
                this.productionFundFrom.productionShouldAmount = row.productionShouldAmount;
                if (row.reportNo.includes('川友评报字')) {
                    this.productionFundFrom.productionType = 'REPORT'
                } else if (row.reportNo.includes('川友咨报字')) {
                    this.productionFundFrom.productionType = 'CONSULT'
                } else if (row.reportNo.includes('川友字')) {
                    this.productionFundFrom.productionType = 'LETTER'
                } else {
                    this.productionFundFrom.productionType = 'STATEMENT'
                }
                this.productionFundFrom.productionShouldAmount = row.productionShouldAmount;
                this.productionFundFrom.remark = row.remark;
            } else {
                this.$notify({
                    title: '警告',
                    message: '需要先填写订单应收款',
                    type: 'error',
                    duration: 3000
                });
            }

        },
        saveShouldAmount() {
            this.$refs.fund.validate(valid => {
                if (valid) {
                    if (this.fund.orderFundId) {
                        this.$api.orderFund.edit(this.fund).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '订单应收款保存成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.selectMyOrderPage();
                                this.shouldAmountDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '订单应收款保存错误',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        })
                    } else {
                        this.$api.orderFund.add(this.fund).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '订单应收款保存成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.selectMyOrderPage();
                                this.shouldAmountDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '订单应收款保存错误',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        })
                    }
                }
            })
        },
        cleanData() {
            this.fund.shouldAmount = null;
            this.fund.id = null;
            this.fund.businessType = null;
            this.fund.remark = null;
            this.fund.businessType = null;
            this.fund.businessId = null;
            this.fund.businessSubId = null;
            this.fund.productionFundId = null;
            this.fund.remark = null;
            this.fund.evaluateAmount = null
        },
        openRepertoryOutWarehouse(row) {
            this.repertoryOutWarehouseVisible = true;
            this.outWarehouse.reportNo = row.reportNo;
            this.outWarehouse.businessType = 'ASSET_BUSINESS';
            this.businessId = row.assetsId;
            this.businessSubId = row.statementNo;
            this.businessMinId = row.reportNo;
            this.recordId = row.recordId;
            this.currentNodeId = row.currentNodeId;
        },
        // 新增出库申请
        addRepertoryOutWarehouse() {
            if (this.outWarehouse.remark !== null && this.outWarehouse.remark !== '') {
                let taskRecordDTO = new Object();
                taskRecordDTO.recordId = this.recordId;;
                taskRecordDTO.taskData = this.outWarehouse;
                this.$api.productionOutWarehouse.add(taskRecordDTO).then(res => {
                    if (res.code === 200 && res.data) {
                        this.$notify({
                            title: '成功',
                            message: '出库申请已提交',
                            type: 'success',
                            duration: 2000
                        });
                        this.commitNode('PASS', this.outWarehouse.remark);
                        this.repertoryOutWarehouseVisible = false;
                        this.selectMyOrderPage();
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '出库申请提交失败',
                            type: 'error',
                            duration: 2000
                        });
                    }
                })
            } else {
                this.$notify({
                    title: '警告',
                    message: '出库原因是必填项',
                    type: 'error',
                    duration: 2000
                });
            }
        },
        // 撤销出库申请
        canceladdRepertoryOutWarehouse(row) {
            this.$confirm('请确认是否撤销此出库申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$api.productionOutWarehouse.detail(row.warehouseId).then(res => {
                    if (res.departmentCheckState !== '审核中') {
                        this.$notify({
                            title: '警告',
                            message: '出库申请' + res.departmentCheckState + '，无法撤销。',
                            type: 'error',
                            duration: 2000
                        });
                        return;
                    }
                })

                if (row.id) {
                    this.$api.productionOutWarehouse.cancel(row.id).then(res => {
                        if (res.code === 200 && res.data) {
                            this.$notify({
                                title: '成功',
                                message: '出库申请已撤销',
                                type: 'success',
                                duration: 2000
                            });
                            // 撤销成功退回节点
                            this.commitNode('REVERSE');
                        }
                    })
                }
            })
        },
        // 提交节点
        commitNode(state, remark) {
            let commit = new Object;
            commit.instanceNodeId = this.currentNodeId;
            commit.state = state;
            commit.comments = remark;
            commit.businessMinId = this.businessMinId;
            commit.businessSubId = this.businessSubId;
            this.$api.workflow.commit(commit).then(res => {
                if (res.code === 200 && res.data) {
                    this.$notify({
                        title: '成功',
                        message: '工作流节点提交成功。',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '失败',
                        message: '工作流节点提交失败，请联系管理员。',
                        type: 'error',
                        duration: 2000
                    });
                }
            })
        },
        // 保存产品应收款
        saveProShouldAmount() {
            this.$refs.productionFundFrom.validate(valid => {
                if (valid) {
                    if (this.productionFundFrom.id) {
                        this.$api.productionFund.edit(this.productionFundFrom).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '产品应收款保存成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.selectMyOrderPage();
                                this.proShouldAmountDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '产品应收款保存错误',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        })
                    } else {
                        this.$api.productionFund.add(this.productionFundFrom).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '产品应收款保存成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.selectMyOrderPage();
                                this.proShouldAmountDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '产品应收款保存错误',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        })
                    }
                }
            })
        },
        // 标记产品送达
        markDelivery(row) {
            if(row.productionShouldAmount){
                this.$api.assets.markDelivery(row.reportNo).then(res => {
                    if (res.code === 200 && res.data) {
                        this.$notify({
                            title: '成功',
                            message: '标记送达成功！',
                            type: 'success',
                            duration: 1000
                        });
                        this.selectMyOrderPage();
                    }
                })
            }else {
                this.$notify({
                    title: '错误',
                    message: '标记送达前需填写产品应收款！',
                    type: 'error',
                    duration: 1000
                });
            }
            
        },
        // 打开分配弹窗
        openAllotProductionDialog(row) {
            if (!row.realAmount) {
                this.$notify({
                    title: '提示',
                    message: '该订单还没有认领实收款，请先认领实收款后再分配给产品。',
                    type: 'info',
                    duration: 3000
                });
                return;
            }
            this.getProductionFundByOrderFundId(row.orderFundId);
            this.orderProduction.orderId = row.orderId;
            this.orderProduction.orderName = row.name;
            this.orderProduction.realAmount = row.realAmount;
            this.orderProduction.orderFundId = row.orderFundId;
            this.allotAmountDialog = true;
        },
        getProductionFundByOrderFundId(orderFundId) {
            if (orderFundId) {
                this.$api.assetsProduction.getProductionFundByOrderFundId(orderFundId).then(res => {
                    if (res.code === 200) {
                        this.orderProduction.reports = res.data;
                        let allotAmount = res.data.map(item => item.claimedAmount).reduce(function (prev, cur) {
                            return prev + cur;
                        }, 0);
                        this.notAllotAmount = this.orderProduction.realAmount - allotAmount;
                        this.allotAmountDialog = true;
                    }
                })
            }
        },
        allotOrderRealAmountToProduction() {
            this.$api.assetsProduction.allotOrderRealAmountToProduction(this.orderProduction).then(res => {
                if (res.code === 200 && res.data) {
                    this.$notify({
                        title: '成功',
                        message: '实收款分配成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.allotAmountDialog = false;
                    this.selectMyOrderPage();
                } else {
                    this.$notify({
                        title: '失败',
                        message: '实收款分配失败',
                        type: 'error',
                        duration: 2000
                    });
                }
            })
        },
        editOrder(row) {
            this.$router.push({
                path: "/assets/editOrder",
                query: {
                    row: JSON.stringify(row),
                    back: '/assets/myOrderList',
                    couldEdit: true,
                    couldBack: true,
                    disabledStatus: false
                }
            })
        },
        openFinanceInvoiceDialog(orderFundId, productionFundId, realAmount, clientName, clientSubName) {
            if (!orderFundId) {
                this.$notify({
                    title: '提示',
                    message: '请先完善应收款，再操作。',
                    type: 'info',
                    duration: 2000
                });
                return;
            }
            this.makeInvoiceListDialog = true;
            if (orderFundId) {
                this.invoice.orderFundId = orderFundId;
                this.invoice.productionFundId = productionFundId;
                this.invoice.realPayAmount = realAmount;
                this.invoice.title = clientName + clientSubName;
                this.getFinanceInvoiceList();
            }
        },
        getFinanceInvoiceList() {
            this.$api.financeInvoice.getList(this.invoice.orderFundId, this.invoice.productionFundId).then(res => {
                if (res.code === 200) {
                    this.invoiceData = res.data
                }
            })
        },
        openNewInvoiceDialog() {
            this.invoice.id = null;
            if (!this.invoice.orderFundId) {
                this.$notify({
                    title: '提示',
                    message: '申请开票前，请先完善应收款金额。',
                    type: 'info',
                    duration: 2000
                });
                return;
            } else {
                this.newInvoiceDialog = true;

            }
        },
        saveInvoice() {
            this.$refs.invoice.validate(valid => {
                if (valid) {
                    if (this.invoice.id) {
                        this.$api.financeInvoice.edit(this.invoice).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '开票申请修改成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.getFinanceInvoiceList();
                                this.newInvoiceDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '开票申请修改失败',
                                    type: 'error',
                                    duration: 2000
                                });
                            }
                        })
                    } else {
                        this.$api.financeInvoice.add(this.invoice).then(res => {
                            if (res.code === 200 && res.data) {
                                this.$notify({
                                    title: '成功',
                                    message: '开票申请提交成功',
                                    type: 'success',
                                    duration: 2000
                                });
                                this.getFinanceInvoiceList();
                                this.newInvoiceDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '开票申请提交失败',
                                    type: 'error',
                                    duration: 2000
                                });
                            }
                        })
                    }
                }
            })
        },
        invoiceDetail(id) {
            this.$api.financeInvoice.detail(id).then(res => {
                if (res.code === 200) {
                    this.invoice = res.data;
                }
            })
            this.newInvoiceDialog = true;
        },
        cancellation(id) {
            this.$prompt('作废原因:', '已开发票作废', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(({ value }) => {
                this.invoice.reason = value;
                this.invoice.id = id;
                this.$api.financeInvoice.cancellation(this.invoice).then(res => {
                    if (res.code === 200 && res.data) {
                        this.$notify({
                            title: '成功',
                            message: '作废申请已提交',
                            type: 'success',
                            duration: 2000
                        });
                        this.getFinanceInvoiceList();
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '作废提交失败',
                            type: 'error',
                            duration: 2000
                        });
                    }
                })
            })
        },
        cleanFinanceInvoiceForm() {
            this.$refs.invoice.resetFields();
            this.invoice = {
                id: null,
                orderFundId: this.invoice.orderFundId,
                productionFundId: this.invoice.productionFundId,
                title: null,
                type: null,
                taxNo: null,
                planAmount: null,
                planMakeDate: null,
                bankName: null,
                bankAccount: null,
                bankAddress: null,
                bankTel: null,
                makeItem: null,
                itemQuantity: null,
                itemUnit: null,
                taxRate: null,
                taxAmount: null,
                remark: null
            }
        },
        // 获取部门下拉列表
        getAllotDepartment() {
            this.$api.department.allot('ASSET_BUSINESS').then(res => {
                if (res.code === 200) {
                    this.allotDepartment = res.data;
                }
            })
        },
        copyInvoice(row) {
            this.invoice = row;
            this.invoice.id = null;
            this.invoice.state = null;
            this.invoice.reason = null;
            this.invoice.created = null;
            this.invoice.modified = null;
            this.newInvoiceDialog = true;
        },
        // 资产我的订单导出
        exportMyOrder() {
            this.$utils.exportUtil(
                "/assets/exportMyOrder", this.listQuery,
                "导出"
            );
        }
    }
}
</script>

<style lang="scss" scoped></style>