518 lines
22 KiB
Vue
518 lines
22 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 已结 -->
|
|
<!-- <el-table v-if="TicketType === 'tp'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
|
|
<!-- <el-table-column label="序号" align="center">-->
|
|
<!-- <template scope="scope">-->
|
|
<!-- <span>{{ scope.$index + 1 }}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column label="服务顾问" align="center" prop="adviserName" width="180" />-->
|
|
<!-- <el-table-column label="单号" align="center" prop="ticketNo" width="200" />-->
|
|
<!-- <el-table-column label="车牌号" align="center" prop="carNo" width="180" />-->
|
|
<!-- <el-table-column label="姓名" align="center" prop="userName" width="180" />-->
|
|
<!-- <el-table-column label="车系" align="center" prop="carBrandName" width="180" />-->
|
|
<!-- <el-table-column label="手机号" align="center" prop="userMobile" width="180" />-->
|
|
<!-- <el-table-column label="消费项目" align="center" prop="repairType" width="180">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="scope.row.repairType" />-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column label="规格" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="类型" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="数量" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="金额" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="合计" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="成本" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="毛利" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="支付金额" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="优惠" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="本次里程" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="服务顾问" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="施工人员" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="备注" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="结算时间" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="创建时间" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="业务来源" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="门店" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="结算人" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="操作" fixed="right" align="center" width="180">-->
|
|
<!-- <template v-slot="scope">-->
|
|
<!-- <el-button size="mini" type="text" icon="el-icon-delete"-->
|
|
<!-- >查看-->
|
|
<!-- </el-button>-->
|
|
<!-- <el-button size="mini" type="text" icon="el-icon-delete"-->
|
|
<!-- >返结-->
|
|
<!-- </el-button>-->
|
|
<!-- <el-button size="mini" type="text" icon="el-icon-delete"-->
|
|
<!-- >作废-->
|
|
<!-- </el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- </el-table>-->
|
|
<!-- TODO 未结(先共用) -->
|
|
<!-- <el-table v-if="TicketType === 'tu'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
|
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
|
<el-table-column label="序号" align="center">
|
|
<template scope="scope">
|
|
<span>{{ scope.$index + 1 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="订单编号" align="center" prop="ticketNo" width="200"/>
|
|
<el-table-column label="维修类别" align="center" prop="repairType" width="100">
|
|
<template slot-scope="scope">
|
|
<dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="scope.row.repairType"/>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="状态" align="center" prop="ticketsWorkStatus" width="80">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="scope.row.ticketsWorkStatus"/>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="客户信息" align="center">
|
|
<el-table-column label="客户名称" align="center" prop="userName" width="100"/>
|
|
<el-table-column label="车牌号" align="center" prop="carNo" width="100"/>
|
|
<el-table-column label="车系" align="center" prop="carBrandName" width="100"/>
|
|
<el-table-column label="手机号" align="center" prop="userMobile" width="110"/>
|
|
</el-table-column>
|
|
<el-table-column label="经办人姓名" align="center" prop="handleName" width="180"/>
|
|
<el-table-column label="经办人电话" align="center" prop="handleMobile" width="180"/>
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
|
<template slot-scope="scope">
|
|
{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="预计完工" align="center" prop="outTime" width="180">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- {{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="合计金额" align="center" prop="totalPrice" width="80"/>
|
|
<el-table-column label="参考成本" align="center" prop="cost" width="80"/>
|
|
<el-table-column label="参考毛利" align="center" prop="profit" width="80"/>
|
|
<!-- <el-table-column label="领料状态" align="center" prop="partStatus" width="80">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="scope.row.partStatus"/>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="服务顾问" align="center" prop="adviserName" width="100"/>
|
|
<el-table-column label="备注" align="center" prop="remark" width="180"/>
|
|
<el-table-column label="所属门店" align="center" prop="corpId" width="180"/>
|
|
<!-- <el-table-column label="工单状态" align="center" prop="ticketsStatus" width="180">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="scope.row.ticketsStatus"/>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="操作" fixed="right" align="center" width="230">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
|
|
>查看
|
|
</el-button>
|
|
<el-button v-hasPermi="['repair:tk:paid']" size="mini" type="text" icon="el-icon-finished"
|
|
@click="handlePaid(scope.row)" v-if="TicketType === 'tu'"
|
|
>收款
|
|
</el-button>
|
|
<el-button v-hasPermi="['repair:tk:settlement']" size="mini" type="text" icon="el-icon-finished"
|
|
@click="handleSettlement(scope.row,'js')" v-if="TicketType === 'ts' && !scope.row.settlement"
|
|
>结算
|
|
</el-button>
|
|
<el-button v-hasPermi="['repair:tk:settlement']" size="mini" type="text" icon="el-icon-finished"
|
|
@click="handleSettlement(scope.row,'jssh')" v-if="TicketType === 'ts' && scope.row.settlement"
|
|
>结算审核
|
|
</el-button>
|
|
<!-- <el-button v-if="TicketType === 'tp'" size="mini" type="text" icon="el-icon-refresh-right"-->
|
|
<!-- >返结-->
|
|
<!-- </el-button>-->
|
|
<el-button v-if="TicketType !== 'tv'" size="mini" type="text" icon="el-icon-delete"
|
|
@click="handleVoid(scope.row)" v-hasPermi="['repair:tk:void']"
|
|
>作废
|
|
</el-button>
|
|
<el-button size="mini" type="text" icon="el-icon-printer"
|
|
@click="handlePrint(scope.row)"
|
|
>下载打印
|
|
</el-button>
|
|
<!-- <el-button size="mini" v-hasPermi="['repair:tk:edit']" type="text" icon="el-icon-setting" @click="handleEditTicket(scope.row)">-->
|
|
<!-- 编辑工单-->
|
|
<!-- </el-button>-->
|
|
<el-button size="mini" v-hasPermi="['repair:tk:remove']" type="text" icon="el-icon-remove"
|
|
@click="handleRemove(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 作废 -->
|
|
<!-- <el-table v-if="TicketType === 'tv'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
|
|
<!-- <el-table-column label="序号" align="center">-->
|
|
<!-- <template scope="scope">-->
|
|
<!-- <span>{{ scope.$index + 1 }}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column label="单号" align="center" prop="ticketNo" width="200" />-->
|
|
<!-- <el-table-column label="车牌" align="center" prop="carNo" width="180" />-->
|
|
<!-- <el-table-column label="客户" align="center" prop="userName" width="180" />-->
|
|
<!-- <el-table-column label="数量" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="应收" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="现金" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="刷银行卡" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="挂账金额" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="优惠" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="折扣" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="实收" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="作废时间" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="作废人" align="center" prop="soNo" width="180" />-->
|
|
<!-- <el-table-column label="作废备注" align="center" prop="remark" width="180" />-->
|
|
<!-- </el-table>-->
|
|
<TicketsShow ref="ticketsShow"/>
|
|
<EditTickets ref="editTicket" @success="returnSuccess"/>
|
|
|
|
<el-dialog title="收款信息" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
|
|
<el-form :model="settlementFormData" ref="formRefSettlement" :inline="true" label-width="10rem"
|
|
:rules="settlementFormRules">
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="金额" prop="payType">
|
|
<el-input disabled v-model="settlementFormData.money"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="优惠类型" prop="payType">
|
|
<el-radio-group disabled v-model="settlementFormData.discountType" @change="jisuan">
|
|
<el-radio :label="item.value" :key="item.value" v-for="item in discountTypeList">{{ item.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="优惠" prop="payType">
|
|
<el-input-number disabled v-model="settlementFormData.discount" @change="jisuan"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="实付金额" prop="payType">
|
|
<el-input disabled v-model="settlementFormData.actualMoney"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-form>
|
|
<el-form :model="formData" ref="formRef" :inline="true" label-width="10rem" :rules="formRules">
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="收款方法" prop="payType">
|
|
<el-select v-model="formData.payType">
|
|
<el-option v-for="item in this.getDictDataByCode(DICT_TYPE.REPAIR_PAY_TYPE)" :key="item.value"
|
|
:label="item.label" :value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="收款备注" prop="remark">
|
|
<el-input style="width:30rem" type="textarea" v-model="formData.remark"
|
|
:autosize="{ minRows: 4, maxRows: 8}"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="doPaid">确 定</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog :title="settlementType === 'jssh' ? '结算审核': '结算信息'" :visible.sync="dialogVisibleSettlement"
|
|
width="40%" v-dialogDrag append-to-body>
|
|
<el-form :model="settlementFormData" ref="formRefSettlement" :inline="true" label-width="10rem"
|
|
:rules="settlementFormRules">
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="金额" prop="payType">
|
|
<el-input disabled v-model="settlementFormData.money"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="优惠类型" prop="payType">
|
|
<el-radio-group v-model="settlementFormData.discountType" @change="jisuan">
|
|
<el-radio :label="item.value" :key="item.value" v-for="item in discountTypeList">{{ item.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="优惠" prop="payType">
|
|
<el-input-number v-model="settlementFormData.discount" @change="jisuan"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="1">
|
|
<el-col :span="24">
|
|
<el-form-item label="实付金额" prop="payType">
|
|
<el-input v-model="settlementFormData.actualMoney"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row :gutter="1">-->
|
|
<!-- <el-col :span="24">-->
|
|
<!-- <el-form-item label="结算备注" prop="remark">-->
|
|
<!-- <el-input style="width:30rem" type="textarea" v-model="formData.remark"-->
|
|
<!-- :autosize="{ minRows: 4, maxRows: 8}"/>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="doSettlement">确 定</el-button>
|
|
<el-button @click="dialogVisibleSettlement = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
setTicketsVoid,
|
|
setTicketsPaid,
|
|
setTicketsPrint,
|
|
removeTicketById,
|
|
setTicketsSettlement, settlementReview, getSettlement
|
|
} from '@/api/repair/tickets/Tickets'
|
|
import TicketsShow from "@/views/repair/tickets/Components/TicketsShow.vue";
|
|
import {getByNameAndMobile} from "@/api/base/customer";
|
|
import EditTickets from "@/views/repair/tickets/form/EditTickets.vue";
|
|
|
|
export default {
|
|
name: "TicketTable",
|
|
components: {EditTickets, TicketsShow},
|
|
props: {
|
|
TicketType: {
|
|
type: String,
|
|
defaultValue: 'tp',
|
|
required: true
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
isWXCW: {
|
|
type: Boolean
|
|
},
|
|
defaultDiscountType: {
|
|
type: [Number, String],
|
|
default: '1'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
formData: {
|
|
id: null,
|
|
ticketsStatus: null,
|
|
billingRemark: null,
|
|
payType: null
|
|
},
|
|
settlementFormData: {
|
|
actualMoney: 0,
|
|
discountType: this.defaultDiscountType,
|
|
discount: 0
|
|
},
|
|
formRules: {
|
|
payType: [{required: true, message: '支付方式不能为空', trigger: 'blur'}]
|
|
},
|
|
settlementFormRules: {
|
|
discountType: [{required: true, message: '优惠类型不能为空', trigger: 'blur'}],
|
|
discount: [{required: true, message: '优惠不能为空', trigger: 'blur'}]
|
|
},
|
|
dialogVisible: false,
|
|
dialogVisibleSettlement: false,
|
|
isHangAccount: false,
|
|
settlementType: null,
|
|
discountTypeList: [
|
|
{
|
|
label: '金额',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '折扣',
|
|
value: '2'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
handleShow(row) {
|
|
this.$refs.ticketsShow.open(row)
|
|
},
|
|
async handleVoid(row) {
|
|
this.$prompt('作废备注', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
}).then(({value}) => {
|
|
this.formData.id = row.id
|
|
this.formData['remark'] = value
|
|
this.formData.ticketsStatus = "03"
|
|
this.doVoid()
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
async doVoid() {
|
|
try {
|
|
await setTicketsVoid(this.formData)
|
|
this.$modal.msgSuccess("作废成功")
|
|
this.$emit("setVoid")
|
|
} catch {
|
|
}
|
|
},
|
|
/**
|
|
* 打印
|
|
*/
|
|
async handlePrint(row) {
|
|
window.open(process.env.VUE_APP_BASE_API + '/admin-api/repair/tickets/print/' + row.id)
|
|
},
|
|
|
|
async doPrint(data) {
|
|
try {
|
|
await setTicketsPrint(data)
|
|
this.$modal.msgSuccess("导出打印成功")
|
|
this.$emit("setPrint")
|
|
} catch {
|
|
}
|
|
},
|
|
jisuan() {
|
|
// 根据优惠类型计算
|
|
if (this.settlementFormData.discountType === '1') {
|
|
this.settlementFormData.actualMoney = this.settlementFormData.money - this.settlementFormData.discount
|
|
} else if (this.settlementFormData.discountType === '2') {
|
|
// 保留小数点后两位
|
|
this.settlementFormData.actualMoney = this.settlementFormData.money * (1 - this.settlementFormData.discount / 100)
|
|
this.settlementFormData.actualMoney = parseFloat(this.settlementFormData.actualMoney).toFixed(2)
|
|
}
|
|
console.log(this.settlementFormData)
|
|
},
|
|
|
|
//收款
|
|
handlePaid(row) {
|
|
this.formData = {
|
|
id: null,
|
|
ticketsStatus: null,
|
|
billingRemark: null,
|
|
payType: null
|
|
}
|
|
this.formData['id'] = row.id
|
|
this.formData['ticketsStatus'] = '02'
|
|
this.dialogVisible = true
|
|
this.checkIsHangAccount(row)
|
|
this.getSettlement(row)
|
|
},
|
|
|
|
//结算
|
|
handleSettlement(row, type) {
|
|
this.settlementType = type
|
|
if (type == 'js') {
|
|
this.settlementFormData = {
|
|
ticketId: row.id,
|
|
money: row.totalPrice,
|
|
actualMoney: row.totalPrice,
|
|
discountType: this.defaultDiscountType, // 加上这一行
|
|
discount: 0 // 加上这一行
|
|
}
|
|
} else if (type === 'jssh') {
|
|
this.settlementFormData = row.settlement
|
|
this.settlementFormData['ticketId'] = row.id
|
|
}
|
|
this.dialogVisibleSettlement = true
|
|
|
|
},
|
|
async checkIsHangAccount(row) {
|
|
const data = {
|
|
cusName: row.userName, phoneNumber: row.userMobile
|
|
}
|
|
const res = await getByNameAndMobile(data)
|
|
this.isHangAccount = res.data.isHangAccount === '1'
|
|
},
|
|
async getSettlement(row) {
|
|
const data = {
|
|
id: row.id
|
|
}
|
|
const res = await getSettlement(data)
|
|
if (res.data) {
|
|
this.settlementFormData = res.data
|
|
}else {
|
|
this.settlementFormData = {
|
|
ticketId: null,
|
|
money: null,
|
|
actualMoney: null,
|
|
discountType: null,
|
|
discount: null
|
|
}
|
|
}
|
|
},
|
|
async doPaid() {
|
|
try {
|
|
await this.$refs['formRef'].validate()
|
|
await setTicketsPaid(this.formData)
|
|
this.$modal.msgSuccess(this.formData.payType === '01' ? "等待客户支付" : "结算成功")
|
|
this.dialogVisible = false
|
|
this.$emit("setVoid")
|
|
} catch {
|
|
}
|
|
},
|
|
async doSettlement() {
|
|
try {
|
|
await this.$refs['formRefSettlement'].validate()
|
|
if (this.settlementType === 'jssh') {
|
|
await settlementReview(this.settlementFormData)
|
|
} else {
|
|
await setTicketsSettlement(this.settlementFormData)
|
|
}
|
|
this.$modal.msgSuccess("提交成功")
|
|
this.dialogVisibleSettlement = false
|
|
this.$emit("setVoid")
|
|
} catch {
|
|
}
|
|
},
|
|
getDictDataByCode(code) {
|
|
const data = this.getDictDatas(code);
|
|
if (this.isHangAccount) {
|
|
return data
|
|
} else {
|
|
return data.filter(item => !item.label.includes("挂账"))
|
|
}
|
|
},
|
|
handleEditTicket(row) {
|
|
this.$refs.editTicket.open(row)
|
|
},
|
|
returnSuccess() {
|
|
this.$emit("success")
|
|
},
|
|
async handleRemove(row) {
|
|
try {
|
|
const id = row.id
|
|
if (id) {
|
|
await this.$modal.confirm("确认删除工单" + row.ticketNo + "吗？")
|
|
await removeTicketById(id)
|
|
await this.listTickets()
|
|
this.$modal.msgSuccess("删除成功")
|
|
}
|
|
} catch {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|