|
|
|
|
@ -11,161 +11,219 @@
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px">创建日期</span>
|
|
|
|
|
<span>
|
|
|
|
|
<DatePicker
|
|
|
|
|
:value="select.year"
|
|
|
|
|
placeholder="选择开始日期"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
style="width: 114px"
|
|
|
|
|
type="date"
|
|
|
|
|
@on-change="(e) => (select.year = e)"
|
|
|
|
|
></DatePicker>
|
|
|
|
|
<DatePicker
|
|
|
|
|
:value="select.year"
|
|
|
|
|
placeholder="选择结束日期"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
style="width: 114px;margin-left: 6px;"
|
|
|
|
|
type="date"
|
|
|
|
|
@on-change="(e) => (select.year = e)"
|
|
|
|
|
></DatePicker>
|
|
|
|
|
</span>
|
|
|
|
|
<DatePicker
|
|
|
|
|
:value="select.year"
|
|
|
|
|
placeholder="选择开始日期"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
style="width: 114px"
|
|
|
|
|
type="date"
|
|
|
|
|
@on-change="(e) => (select.year = e)"
|
|
|
|
|
></DatePicker>
|
|
|
|
|
<DatePicker
|
|
|
|
|
:value="select.year"
|
|
|
|
|
placeholder="选择结束日期"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
style="width: 114px; margin-left: 6px"
|
|
|
|
|
type="date"
|
|
|
|
|
@on-change="(e) => (select.year = e)"
|
|
|
|
|
></DatePicker>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- <div>-->
|
|
|
|
|
<!-- <span style="padding: 0 6px"> 项目类型 </span>-->
|
|
|
|
|
<!-- <span>-->
|
|
|
|
|
<!-- <Select-->
|
|
|
|
|
<!-- v-model="select.type"-->
|
|
|
|
|
<!-- clearable-->
|
|
|
|
|
<!-- placeholder="选择项目类型"-->
|
|
|
|
|
<!-- style="width: 130px"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <Option v-for="item in types" :key="item.id" :value="item.id">{{-->
|
|
|
|
|
<!-- item.value }}-->
|
|
|
|
|
<!-- </Option>-->
|
|
|
|
|
<!-- </Select>-->
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px"> 项目类型 </span>
|
|
|
|
|
<span style="padding: 0 6px"> 科室 </span>
|
|
|
|
|
<span>
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择项目类型"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
placeholder="科室选择"
|
|
|
|
|
clearable
|
|
|
|
|
v-model="select.department"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
<Option v-for="item in types" :key="item.id" :value="item.id">{{
|
|
|
|
|
item.value }}
|
|
|
|
|
</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
<Option
|
|
|
|
|
v-for="item in departments"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>{{ item.name }}</Option
|
|
|
|
|
>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px"> 科室 </span>
|
|
|
|
|
<div v-if="this.$route.path.split('_')[1] == 2">
|
|
|
|
|
<span style="padding: 0 6px"> 报销类型 </span>
|
|
|
|
|
<span>
|
|
|
|
|
<Select
|
|
|
|
|
placeholder="科室选择"
|
|
|
|
|
clearable
|
|
|
|
|
v-model="select.department"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
<Option v-for="item in departments" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择报销类型"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
<Option
|
|
|
|
|
v-for="item in [
|
|
|
|
|
{
|
|
|
|
|
value: '医药报销支出',
|
|
|
|
|
id: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: '出差报销支出',
|
|
|
|
|
id: 2,
|
|
|
|
|
},
|
|
|
|
|
]"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>{{ item.value }}</Option
|
|
|
|
|
>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px"> 报销类型 </span>
|
|
|
|
|
<div v-if="$route.path.split('_')[1] == 3">
|
|
|
|
|
<span style="padding: 0 6px"> 其他支出类型 </span>
|
|
|
|
|
<span>
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择报销类型"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
<Option v-for="item in types" :key="item.id" :value="item.id">{{
|
|
|
|
|
item.value
|
|
|
|
|
}}</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择其他支出类型"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
<Option
|
|
|
|
|
v-for="item in otherType"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
>{{ item.value }}</Option
|
|
|
|
|
>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px"> 报销金额 </span>
|
|
|
|
|
<span style="padding: 0 6px"> {{ $route.path.split('_')[1] == 2 ? '报销金额' : '其他支出金额' }} </span>
|
|
|
|
|
<span>
|
|
|
|
|
<InputNumber
|
|
|
|
|
style="width: 110px;"
|
|
|
|
|
placeholder="最低价"
|
|
|
|
|
v-model="select.end_money"
|
|
|
|
|
:formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
|
|
|
|
|
:parser="value => value.replace(/\s?|(,*)/g, '')"></InputNumber>
|
|
|
|
|
<InputNumber
|
|
|
|
|
style="width: 110px;margin-left: 6px;"
|
|
|
|
|
placeholder="最高价"
|
|
|
|
|
v-model="select.end_money"
|
|
|
|
|
:formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
|
|
|
|
|
:parser="value => value.replace(/\s?|(,*)/g, '')"></InputNumber>
|
|
|
|
|
</span>
|
|
|
|
|
<InputNumber
|
|
|
|
|
style="width: 110px"
|
|
|
|
|
placeholder="最低价"
|
|
|
|
|
v-model="select.start_plan_price"
|
|
|
|
|
:formatter="
|
|
|
|
|
(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|
|
|
|
"
|
|
|
|
|
:parser="(value) => value.replace(/\s?|(,*)/g, '')"
|
|
|
|
|
></InputNumber>
|
|
|
|
|
<InputNumber
|
|
|
|
|
style="width: 110px; margin-left: 6px"
|
|
|
|
|
placeholder="最高价"
|
|
|
|
|
v-model="select.end_plan_price"
|
|
|
|
|
:formatter="
|
|
|
|
|
(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
|
|
|
|
"
|
|
|
|
|
:parser="(value) => value.replace(/\s?|(,*)/g, '')"
|
|
|
|
|
></InputNumber>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<span style="padding: 0 6px"> 状态 </span>
|
|
|
|
|
<span>
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择状态"
|
|
|
|
|
style="width: 110px"
|
|
|
|
|
>
|
|
|
|
|
<Option v-for="item in types" :key="item.id" :value="item.id">{{
|
|
|
|
|
<Select
|
|
|
|
|
v-model="select.type"
|
|
|
|
|
clearable
|
|
|
|
|
placeholder="选择状态"
|
|
|
|
|
style="width: 110px"
|
|
|
|
|
>
|
|
|
|
|
<Option v-for="item in types" :key="item.id" :value="item.id">{{
|
|
|
|
|
item.value
|
|
|
|
|
}}</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
</Select>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Button style="margin-left: 10px" type="primary" @click="$refs['addExpenseAccount'].type= 'add',$refs['addExpenseAccount'].show()"
|
|
|
|
|
>新增</Button
|
|
|
|
|
>
|
|
|
|
|
<Button style="margin-left: 10px" type="primary" @click="getList"
|
|
|
|
|
>查询</Button
|
|
|
|
|
>
|
|
|
|
|
<Button
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="
|
|
|
|
|
init
|
|
|
|
|
($refs['addExpenseAccount'].type = 'add'),
|
|
|
|
|
$refs['addExpenseAccount'].show()
|
|
|
|
|
"
|
|
|
|
|
>重置
|
|
|
|
|
>新增</Button
|
|
|
|
|
>
|
|
|
|
|
<Button style="margin-left: 10px" type="primary" @click="getList"
|
|
|
|
|
>查询</Button
|
|
|
|
|
>
|
|
|
|
|
<Button style="margin-left: 10px" type="primary" @click="init"
|
|
|
|
|
>重置
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</slot>
|
|
|
|
|
</lx-header>
|
|
|
|
|
|
|
|
|
|
<xy-table row-key="id"
|
|
|
|
|
:list="list"
|
|
|
|
|
:table-item="table"
|
|
|
|
|
@delete="row => destroy(row.id)"
|
|
|
|
|
@editor="row => {
|
|
|
|
|
$refs['addExpenseAccount'].setType('editor');
|
|
|
|
|
$refs['addExpenseAccount'].setId(row.id);
|
|
|
|
|
$refs['addExpenseAccount'].show();
|
|
|
|
|
}"></xy-table>
|
|
|
|
|
<xy-table
|
|
|
|
|
row-key="id"
|
|
|
|
|
:list="list"
|
|
|
|
|
:table-item="table"
|
|
|
|
|
@delete="(row) => destroy(row.id)"
|
|
|
|
|
@editor="
|
|
|
|
|
(row) => {
|
|
|
|
|
$refs['addExpenseAccount'].setType('editor');
|
|
|
|
|
$refs['addExpenseAccount'].setId(row.id);
|
|
|
|
|
$refs['addExpenseAccount'].show();
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
></xy-table>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;justify-content: flex-end;padding: 10px 0;">
|
|
|
|
|
<Page :total="total"
|
|
|
|
|
@on-change="e => {
|
|
|
|
|
select.page = e;
|
|
|
|
|
getList()
|
|
|
|
|
}"
|
|
|
|
|
show-elevator
|
|
|
|
|
show-sizer
|
|
|
|
|
@on-page-size-change="e => {
|
|
|
|
|
select.page_size = e;
|
|
|
|
|
select.page = 1;
|
|
|
|
|
getList();
|
|
|
|
|
}" />
|
|
|
|
|
<div style="display: flex; justify-content: flex-end; padding: 10px 0">
|
|
|
|
|
<Page
|
|
|
|
|
:total="total"
|
|
|
|
|
@on-change="
|
|
|
|
|
(e) => {
|
|
|
|
|
select.page = e;
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
show-elevator
|
|
|
|
|
show-sizer
|
|
|
|
|
@on-page-size-change="
|
|
|
|
|
(e) => {
|
|
|
|
|
select.page_size = e;
|
|
|
|
|
select.page = 1;
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<addExpenseAccount :other_types="otherType" :departments="departments" ref="addExpenseAccount" @refresh="getList"></addExpenseAccount>
|
|
|
|
|
<addExpenseAccount
|
|
|
|
|
:other_types="otherType"
|
|
|
|
|
:departments="departments"
|
|
|
|
|
ref="addExpenseAccount"
|
|
|
|
|
@refresh="getList"
|
|
|
|
|
></addExpenseAccount>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getContract ,delContract } from '@/api/contract/contract'
|
|
|
|
|
import { getparameter } from '@/api/system/dictionary'
|
|
|
|
|
import { listdeptNoAuth } from '@/api/system/department'
|
|
|
|
|
import { getContract, delContract } from "@/api/contract/contract";
|
|
|
|
|
import { getparameter } from "@/api/system/dictionary";
|
|
|
|
|
import { listdeptNoAuth } from "@/api/system/department";
|
|
|
|
|
|
|
|
|
|
import addExpenseAccount from '@/views/inOut/component/addExpenseAccount.vue'
|
|
|
|
|
import addExpenseAccount from "@/views/inOut/component/addExpenseAccount.vue";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
addExpenseAccount
|
|
|
|
|
addExpenseAccount,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -173,7 +231,16 @@ export default {
|
|
|
|
|
total: 0,
|
|
|
|
|
select: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 10
|
|
|
|
|
page_size: 10,
|
|
|
|
|
start_created_at: "",
|
|
|
|
|
end_created_at: "",
|
|
|
|
|
start_plan_price: '',
|
|
|
|
|
end_plan_price: '',
|
|
|
|
|
department_id: "",
|
|
|
|
|
report_type: "",
|
|
|
|
|
other_type: "",
|
|
|
|
|
is_myself: "",
|
|
|
|
|
outcome_type: "",
|
|
|
|
|
},
|
|
|
|
|
types: [],
|
|
|
|
|
departments: [],
|
|
|
|
|
@ -181,71 +248,71 @@ export default {
|
|
|
|
|
list: [],
|
|
|
|
|
table: [
|
|
|
|
|
{
|
|
|
|
|
prop: 'name',
|
|
|
|
|
label: '项目名称',
|
|
|
|
|
prop: "name",
|
|
|
|
|
label: "项目名称",
|
|
|
|
|
width: 190,
|
|
|
|
|
fixed: 'left'
|
|
|
|
|
fixed: "left",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: this.$route.path.split('_')[1] == 2 ? '报销类型' : '支出类型',
|
|
|
|
|
label: this.$route.path.split("_")[1] == 2 ? "报销类型" : "支出类型",
|
|
|
|
|
width: 160,
|
|
|
|
|
customFn:row => {
|
|
|
|
|
customFn: (row) => {
|
|
|
|
|
let map = new Map([
|
|
|
|
|
[1,'医药报销支出'],
|
|
|
|
|
[2,'出差报销支出']
|
|
|
|
|
])
|
|
|
|
|
return this.$route.path.split('_')[1] == 2 ? (
|
|
|
|
|
<span>{ map.get(row.report_type) }</span>
|
|
|
|
|
[1, "医药报销支出"],
|
|
|
|
|
[2, "出差报销支出"],
|
|
|
|
|
]);
|
|
|
|
|
return this.$route.path.split("_")[1] == 2 ? (
|
|
|
|
|
<span>{map.get(row.report_type)}</span>
|
|
|
|
|
) : (
|
|
|
|
|
<span>{ row.other_type?.value }</span>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
<span>{row.other_type?.value}</span>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: '',
|
|
|
|
|
label: '资金来源',
|
|
|
|
|
prop: "from",
|
|
|
|
|
label: "资金来源",
|
|
|
|
|
width: 160,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: '',
|
|
|
|
|
label: '报销金额（元）',
|
|
|
|
|
prop: "money",
|
|
|
|
|
label: "报销金额（元）",
|
|
|
|
|
width: 140,
|
|
|
|
|
align: 'right'
|
|
|
|
|
align: "right",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: '',
|
|
|
|
|
label: '实际报销金额（元）',
|
|
|
|
|
prop: "use_money_total",
|
|
|
|
|
label: "实际报销金额（元）",
|
|
|
|
|
width: 140,
|
|
|
|
|
align: 'right'
|
|
|
|
|
align: "right",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: '',
|
|
|
|
|
label: '已付金额',
|
|
|
|
|
prop: "has_money_total",
|
|
|
|
|
label: "已付金额",
|
|
|
|
|
width: 140,
|
|
|
|
|
align: 'right'
|
|
|
|
|
align: "right",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: 'department.name',
|
|
|
|
|
label: '业务科室',
|
|
|
|
|
width: 140
|
|
|
|
|
prop: "department.name",
|
|
|
|
|
label: "业务科室",
|
|
|
|
|
width: 140,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: '',
|
|
|
|
|
label: '状态',
|
|
|
|
|
width: 140
|
|
|
|
|
prop: "",
|
|
|
|
|
label: "状态",
|
|
|
|
|
width: 140,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: 'admin.name',
|
|
|
|
|
label: '经办人',
|
|
|
|
|
width: 140
|
|
|
|
|
prop: "admin.name",
|
|
|
|
|
label: "经办人",
|
|
|
|
|
width: 140,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop: 'created_at',
|
|
|
|
|
label: '创建日期',
|
|
|
|
|
width: 180
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
prop: "created_at",
|
|
|
|
|
label: "创建日期",
|
|
|
|
|
width: 180,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init() {
|
|
|
|
|
@ -257,56 +324,55 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.select.page = 1
|
|
|
|
|
this.select.page_size = 10
|
|
|
|
|
this.select.page = 1;
|
|
|
|
|
this.select.page_size = 10;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getList () {
|
|
|
|
|
const res = await getContract(this.select)
|
|
|
|
|
this.list = res.list.data
|
|
|
|
|
this.total = res.list.total
|
|
|
|
|
async getList() {
|
|
|
|
|
const res = await getContract(this.select);
|
|
|
|
|
this.list = res.list.data;
|
|
|
|
|
this.total = res.list.total;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getDepartment() {
|
|
|
|
|
this.departments = await listdeptNoAuth()
|
|
|
|
|
this.departments = await listdeptNoAuth();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getOtherType () {
|
|
|
|
|
async getOtherType() {
|
|
|
|
|
const res = await getparameter({
|
|
|
|
|
number: 'other_type'
|
|
|
|
|
})
|
|
|
|
|
this.otherType = res.detail
|
|
|
|
|
number: "other_type",
|
|
|
|
|
});
|
|
|
|
|
this.otherType = res.detail;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
destroy (id) {
|
|
|
|
|
destroy(id) {
|
|
|
|
|
delContract({
|
|
|
|
|
id
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.getList()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
id,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.getList();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
typeText () {
|
|
|
|
|
typeText() {
|
|
|
|
|
return function (type) {
|
|
|
|
|
if (type == 2) {
|
|
|
|
|
return '报销'
|
|
|
|
|
return "报销";
|
|
|
|
|
}
|
|
|
|
|
if (type == 3) {
|
|
|
|
|
return '其他支出'
|
|
|
|
|
return "其他支出";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getDepartment()
|
|
|
|
|
this.getOtherType()
|
|
|
|
|
this.getList()
|
|
|
|
|
this.select.outcome_type = this.$route.path.split("_")[1];
|
|
|
|
|
this.select.is_myself = this.$route.path.split("_")[2];
|
|
|
|
|
this.getDepartment();
|
|
|
|
|
this.getOtherType();
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
beforeRouteEnter (to, from , next) {
|
|
|
|
|
next()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
