|
@@ -3,9 +3,9 @@
|
|
<template #left>
|
|
<template #left>
|
|
<hc-card title="系统中期支付列表">
|
|
<hc-card title="系统中期支付列表">
|
|
<template #extra>
|
|
<template #extra>
|
|
- <el-button hc-btn type="primary" @click="addClick"
|
|
|
|
- >添加中期支付项</el-button
|
|
|
|
- >
|
|
|
|
|
|
+ <el-button hc-btn type="primary" @click="addClick">
|
|
|
|
+ 添加中期支付项
|
|
|
|
+ </el-button>
|
|
</template>
|
|
</template>
|
|
<hc-table
|
|
<hc-table
|
|
:column="tableColumn"
|
|
:column="tableColumn"
|
|
@@ -27,18 +27,18 @@
|
|
<span>{{
|
|
<span>{{
|
|
getDictionaryName(
|
|
getDictionaryName(
|
|
palTypeData,
|
|
palTypeData,
|
|
- row.payApplicableType
|
|
|
|
|
|
+ row.payApplicableType,
|
|
)
|
|
)
|
|
- }}</span></template
|
|
|
|
- >
|
|
|
|
|
|
+ }}</span>
|
|
|
|
+ </template>
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
- <el-link type="warning" @click="editRowClick(row)"
|
|
|
|
- >修改</el-link
|
|
|
|
- >
|
|
|
|
|
|
+ <el-link type="warning" @click="editRowClick(row)">
|
|
|
|
+ 修改
|
|
|
|
+ </el-link>
|
|
|
|
|
|
- <el-link type="danger" @click="delRowClick(row)"
|
|
|
|
- >删除</el-link
|
|
|
|
- >
|
|
|
|
|
|
+ <el-link type="danger" @click="delRowClick(row)">
|
|
|
|
+ 删除
|
|
|
|
+ </el-link>
|
|
</template>
|
|
</template>
|
|
</hc-table>
|
|
</hc-table>
|
|
<template #action>
|
|
<template #action>
|
|
@@ -52,9 +52,9 @@
|
|
|
|
|
|
<hc-card-item itle="汇总项">
|
|
<hc-card-item itle="汇总项">
|
|
<template #extra>
|
|
<template #extra>
|
|
- <el-link type="primary" @click="addColloect"
|
|
|
|
- >添加汇总项</el-link
|
|
|
|
- >
|
|
|
|
|
|
+ <el-link type="primary" @click="addColloect">
|
|
|
|
+ 添加汇总项
|
|
|
|
+ </el-link>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<hc-table
|
|
<hc-table
|
|
@@ -67,9 +67,9 @@
|
|
<span>{{ row?.isDeduct === 1 ? "是" : "否" }}</span>
|
|
<span>{{ row?.isDeduct === 1 ? "是" : "否" }}</span>
|
|
</template>
|
|
</template>
|
|
<template #action="{ row }">
|
|
<template #action="{ row }">
|
|
- <el-link type="danger" @click="delCollectRow(row)"
|
|
|
|
- >删除</el-link
|
|
|
|
- >
|
|
|
|
|
|
+ <el-link type="danger" @click="delCollectRow(row)">
|
|
|
|
+ 删除
|
|
|
|
+ </el-link>
|
|
</template>
|
|
</template>
|
|
</hc-table>
|
|
</hc-table>
|
|
</hc-card-item>
|
|
</hc-card-item>
|
|
@@ -227,8 +227,9 @@
|
|
type="primary"
|
|
type="primary"
|
|
:loading="submitLoading"
|
|
:loading="submitLoading"
|
|
@click="dialogSubmit"
|
|
@click="dialogSubmit"
|
|
- >提交</el-button
|
|
|
|
>
|
|
>
|
|
|
|
+ 提交
|
|
|
|
+ </el-button>
|
|
</template>
|
|
</template>
|
|
</hc-dialog>
|
|
</hc-dialog>
|
|
|
|
|
|
@@ -277,234 +278,234 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { nextTick, onActivated, onDeactivated, onUnmounted, ref } from "vue";
|
|
|
|
-import { deepClone, formValidate, getArrValue, getObjValue } from "js-fast-way";
|
|
|
|
-import infoTable from "./info-table.vue";
|
|
|
|
-import { HcDelMsg } from "hc-vue3-ui";
|
|
|
|
-import mainApi from "~api/desk/interim-pay";
|
|
|
|
-import { getDictionaryData, getDictionaryName } from "~uti/tools";
|
|
|
|
-import { arrToId } from "js-fast-way";
|
|
|
|
|
|
+import { nextTick, onActivated, onDeactivated, onUnmounted, ref } from 'vue'
|
|
|
|
+import { deepClone, formValidate, getArrValue, getObjValue } from 'js-fast-way'
|
|
|
|
+import infoTable from './info-table.vue'
|
|
|
|
+import { HcDelMsg } from 'hc-vue3-ui'
|
|
|
|
+import mainApi from '~api/desk/interim-pay'
|
|
|
|
+import { getDictionaryData, getDictionaryName } from '~uti/tools'
|
|
|
|
+import { arrToId } from 'js-fast-way'
|
|
//页面分割
|
|
//页面分割
|
|
-const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
|
|
|
|
|
|
+const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] }
|
|
|
|
|
|
//激活
|
|
//激活
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
- searchForm.value.current = 1;
|
|
|
|
- getTableData();
|
|
|
|
- getMpTypeData();
|
|
|
|
- getPalTypeData();
|
|
|
|
-});
|
|
|
|
|
|
+ searchForm.value.current = 1
|
|
|
|
+ getTableData()
|
|
|
|
+ getMpTypeData()
|
|
|
|
+ getPalTypeData()
|
|
|
|
+})
|
|
|
|
|
|
//搜索表单
|
|
//搜索表单
|
|
-const searchForm = ref({ current: 1, size: 30, total: 0 });
|
|
|
|
|
|
+const searchForm = ref({ current: 1, size: 30, total: 0 })
|
|
|
|
|
|
//分页
|
|
//分页
|
|
const pageChange = ({ current, size }) => {
|
|
const pageChange = ({ current, size }) => {
|
|
- searchForm.value.current = current;
|
|
|
|
- searchForm.value.size = size;
|
|
|
|
- getTableData();
|
|
|
|
-};
|
|
|
|
|
|
+ searchForm.value.current = current
|
|
|
|
+ searchForm.value.size = size
|
|
|
|
+ getTableData()
|
|
|
|
+}
|
|
|
|
|
|
//表格数据
|
|
//表格数据
|
|
const tableColumn = ref([
|
|
const tableColumn = ref([
|
|
- { key: "payNumber", name: "支付项编号" },
|
|
|
|
- { key: "payName", name: "支付项名称" },
|
|
|
|
- { key: "payType", name: "支付项类型" },
|
|
|
|
- { key: "isDeduct", name: "是否为扣款项" },
|
|
|
|
- { key: "payApplicableType", name: "支付适用类型" },
|
|
|
|
- { key: "action", name: "操作", width: 100, align: "center" },
|
|
|
|
-]);
|
|
|
|
|
|
+ { key: 'payNumber', name: '支付项编号' },
|
|
|
|
+ { key: 'payName', name: '支付项名称' },
|
|
|
|
+ { key: 'payType', name: '支付项类型' },
|
|
|
|
+ { key: 'isDeduct', name: '是否为扣款项' },
|
|
|
|
+ { key: 'payApplicableType', name: '支付适用类型' },
|
|
|
|
+ { key: 'action', name: '操作', width: 100, align: 'center' },
|
|
|
|
+])
|
|
|
|
|
|
//获取表格数据
|
|
//获取表格数据
|
|
-const tableLoading = ref(true);
|
|
|
|
-const tableData = ref([{}]);
|
|
|
|
|
|
+const tableLoading = ref(true)
|
|
|
|
+const tableData = ref([{}])
|
|
const getTableData = async () => {
|
|
const getTableData = async () => {
|
|
- tableData.value = [];
|
|
|
|
- tableLoading.value = true;
|
|
|
|
|
|
+ tableData.value = []
|
|
|
|
+ tableLoading.value = true
|
|
const { data } = await mainApi.page({
|
|
const { data } = await mainApi.page({
|
|
...searchForm.value,
|
|
...searchForm.value,
|
|
total: null,
|
|
total: null,
|
|
- });
|
|
|
|
- tableLoading.value = false;
|
|
|
|
- tableData.value = getArrValue(data?.records);
|
|
|
|
- searchForm.value.total = data?.total || 0;
|
|
|
|
|
|
+ })
|
|
|
|
+ tableLoading.value = false
|
|
|
|
+ tableData.value = getArrValue(data?.records)
|
|
|
|
+ searchForm.value.total = data?.total || 0
|
|
if (tableData.value.length > 0) {
|
|
if (tableData.value.length > 0) {
|
|
- getDetail(tableData.value[0].id);
|
|
|
|
- rowViewId.value = tableData.value[0].id;
|
|
|
|
- getDetail(rowViewId.value);
|
|
|
|
|
|
+ getDetail(tableData.value[0].id)
|
|
|
|
+ rowViewId.value = tableData.value[0].id
|
|
|
|
+ getDetail(rowViewId.value)
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
//支付项类型
|
|
//支付项类型
|
|
-const mpTypeData = ref([]);
|
|
|
|
|
|
+const mpTypeData = ref([])
|
|
const getMpTypeData = async () => {
|
|
const getMpTypeData = async () => {
|
|
- mpTypeData.value = await getDictionaryData("meter_pay_type", false);
|
|
|
|
-};
|
|
|
|
|
|
+ mpTypeData.value = await getDictionaryData('meter_pay_type', false)
|
|
|
|
+}
|
|
//支付适用类型
|
|
//支付适用类型
|
|
|
|
|
|
-const palTypeData = ref([]);
|
|
|
|
|
|
+const palTypeData = ref([])
|
|
const getPalTypeData = async () => {
|
|
const getPalTypeData = async () => {
|
|
palTypeData.value = await getDictionaryData(
|
|
palTypeData.value = await getDictionaryData(
|
|
- "meter_pay_applicable_type",
|
|
|
|
- false
|
|
|
|
- );
|
|
|
|
-};
|
|
|
|
-const rowViewId = ref("");
|
|
|
|
|
|
+ 'meter_pay_applicable_type',
|
|
|
|
+ false,
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+const rowViewId = ref('')
|
|
const viewRowClick = ({ row }) => {
|
|
const viewRowClick = ({ row }) => {
|
|
- rowViewId.value = row.id;
|
|
|
|
- getDetail(row.id);
|
|
|
|
-};
|
|
|
|
-const tableData1 = ref([]);
|
|
|
|
|
|
+ rowViewId.value = row.id
|
|
|
|
+ getDetail(row.id)
|
|
|
|
+}
|
|
|
|
+const tableData1 = ref([])
|
|
//汇总项
|
|
//汇总项
|
|
const tableColumn1 = ref([
|
|
const tableColumn1 = ref([
|
|
- { key: "payNumber", name: "支付项编号" },
|
|
|
|
- { key: "payName", name: "支付项名称" },
|
|
|
|
- { key: "payTypeName", name: "支付项类型" },
|
|
|
|
- { key: "contractFormulaIds", name: "合同计算公式" },
|
|
|
|
- { key: "updateFormulaIds", name: "变更计算公式" },
|
|
|
|
- { key: "currentFormulaIds", name: "本期计算公式" },
|
|
|
|
- { key: "isDeduct", name: "是否为扣款项" },
|
|
|
|
- { key: "action", name: "操作", width: 50 },
|
|
|
|
-]);
|
|
|
|
|
|
+ { key: 'payNumber', name: '支付项编号' },
|
|
|
|
+ { key: 'payName', name: '支付项名称' },
|
|
|
|
+ { key: 'payTypeName', name: '支付项类型' },
|
|
|
|
+ { key: 'contractFormulaIds', name: '合同计算公式' },
|
|
|
|
+ { key: 'updateFormulaIds', name: '变更计算公式' },
|
|
|
|
+ { key: 'currentFormulaIds', name: '本期计算公式' },
|
|
|
|
+ { key: 'isDeduct', name: '是否为扣款项' },
|
|
|
|
+ { key: 'action', name: '操作', width: 50 },
|
|
|
|
+])
|
|
//获取节点详情
|
|
//获取节点详情
|
|
const getDetail = async (id) => {
|
|
const getDetail = async (id) => {
|
|
const { error, code, data } = await mainApi.getProDetail({
|
|
const { error, code, data } = await mainApi.getProDetail({
|
|
id,
|
|
id,
|
|
- });
|
|
|
|
|
|
+ })
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- tableData1.value = getObjValue(data)["summaryItemList"];
|
|
|
|
|
|
+ tableData1.value = getObjValue(data)['summaryItemList'] || []
|
|
} else {
|
|
} else {
|
|
- tableData1.value = [];
|
|
|
|
|
|
+ tableData1.value = []
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
//新增/修改 弹窗
|
|
//新增/修改 弹窗
|
|
-const isDialogShow = ref(false);
|
|
|
|
-const formRef = ref(null);
|
|
|
|
-const formModel = ref({});
|
|
|
|
|
|
+const isDialogShow = ref(false)
|
|
|
|
+const formRef = ref(null)
|
|
|
|
+const formModel = ref({})
|
|
const formRules = {
|
|
const formRules = {
|
|
- payName: { required: true, trigger: "blur", message: "请输入支付项名称" },
|
|
|
|
- payType: { required: true, trigger: "blur", message: "请选择支付项编号" },
|
|
|
|
-};
|
|
|
|
|
|
+ payName: { required: true, trigger: 'blur', message: '请输入支付项名称' },
|
|
|
|
+ payType: { required: true, trigger: 'blur', message: '请选择支付项编号' },
|
|
|
|
+}
|
|
|
|
|
|
//新增
|
|
//新增
|
|
const addClick = async () => {
|
|
const addClick = async () => {
|
|
- formModel.value = {};
|
|
|
|
- await nextTick();
|
|
|
|
- isDialogShow.value = true;
|
|
|
|
-};
|
|
|
|
|
|
+ formModel.value = {}
|
|
|
|
+ await nextTick()
|
|
|
|
+ isDialogShow.value = true
|
|
|
|
+}
|
|
|
|
|
|
//修改
|
|
//修改
|
|
const editRowClick = async (row) => {
|
|
const editRowClick = async (row) => {
|
|
- formModel.value = deepClone(row);
|
|
|
|
- await nextTick();
|
|
|
|
- isDialogShow.value = true;
|
|
|
|
-};
|
|
|
|
|
|
+ formModel.value = deepClone(row)
|
|
|
|
+ await nextTick()
|
|
|
|
+ isDialogShow.value = true
|
|
|
|
+}
|
|
|
|
|
|
//提交表单
|
|
//提交表单
|
|
-const submitLoading = ref(false);
|
|
|
|
|
|
+const submitLoading = ref(false)
|
|
const dialogSubmit = async () => {
|
|
const dialogSubmit = async () => {
|
|
- const isForm = await formValidate(formRef.value);
|
|
|
|
- if (!isForm) return false;
|
|
|
|
- submitLoading.value = true;
|
|
|
|
- const { error, code } = await mainApi.submit(formModel.value);
|
|
|
|
- submitLoading.value = false;
|
|
|
|
|
|
+ const isForm = await formValidate(formRef.value)
|
|
|
|
+ if (!isForm) return false
|
|
|
|
+ submitLoading.value = true
|
|
|
|
+ const { error, code } = await mainApi.submit(formModel.value)
|
|
|
|
+ submitLoading.value = false
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- window?.$message?.success("操作成功");
|
|
|
|
- dialogClose();
|
|
|
|
- getTableData().then();
|
|
|
|
|
|
+ window?.$message?.success('操作成功')
|
|
|
|
+ dialogClose()
|
|
|
|
+ getTableData().then()
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
|
|
|
|
//删除
|
|
//删除
|
|
const delRowClick = (row) => {
|
|
const delRowClick = (row) => {
|
|
HcDelMsg(async (resolve) => {
|
|
HcDelMsg(async (resolve) => {
|
|
- const { code } = await mainApi.del(row.id);
|
|
|
|
- resolve(); //关闭弹窗的回调
|
|
|
|
- if (code !== 200) return;
|
|
|
|
- window.$message.success("删除成功");
|
|
|
|
- getTableData().then();
|
|
|
|
- rowViewId.value = "";
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+ const { code } = await mainApi.del(row.id)
|
|
|
|
+ resolve() //关闭弹窗的回调
|
|
|
|
+ if (code !== 200) return
|
|
|
|
+ window.$message.success('删除成功')
|
|
|
|
+ getTableData().then()
|
|
|
|
+ rowViewId.value = ''
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
|
|
//关闭弹窗
|
|
//关闭弹窗
|
|
const dialogClose = () => {
|
|
const dialogClose = () => {
|
|
- isDialogShow.value = false;
|
|
|
|
- formModel.value = {};
|
|
|
|
-};
|
|
|
|
|
|
+ isDialogShow.value = false
|
|
|
|
+ formModel.value = {}
|
|
|
|
+}
|
|
|
|
|
|
//添加汇总项
|
|
//添加汇总项
|
|
-const isCollectShow = ref(false);
|
|
|
|
-const collectSaveLoading = ref(false);
|
|
|
|
|
|
+const isCollectShow = ref(false)
|
|
|
|
+const collectSaveLoading = ref(false)
|
|
const collectModalSave = async () => {
|
|
const collectModalSave = async () => {
|
|
- collectSaveLoading.value = true;
|
|
|
|
|
|
+ collectSaveLoading.value = true
|
|
const { error, code, msg } = await mainApi.addCollect({
|
|
const { error, code, msg } = await mainApi.addCollect({
|
|
bindIds: selectTableCollectIds.value,
|
|
bindIds: selectTableCollectIds.value,
|
|
id: rowViewId.value,
|
|
id: rowViewId.value,
|
|
- });
|
|
|
|
|
|
+ })
|
|
//判断状态
|
|
//判断状态
|
|
- collectSaveLoading.value = false;
|
|
|
|
|
|
+ collectSaveLoading.value = false
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- window?.$message?.success(msg);
|
|
|
|
|
|
+ window?.$message?.success(msg)
|
|
} else {
|
|
} else {
|
|
- window.$message.error(msg);
|
|
|
|
|
|
+ window.$message.error(msg)
|
|
}
|
|
}
|
|
- getDetail(rowViewId.value);
|
|
|
|
- isCollectShow.value = false;
|
|
|
|
-};
|
|
|
|
|
|
+ getDetail(rowViewId.value)
|
|
|
|
+ isCollectShow.value = false
|
|
|
|
+}
|
|
const addColloect = () => {
|
|
const addColloect = () => {
|
|
- isCollectShow.value = true;
|
|
|
|
- getTableCollectData();
|
|
|
|
- selectArr.value = [];
|
|
|
|
-};
|
|
|
|
|
|
+ isCollectShow.value = true
|
|
|
|
+ getTableCollectData()
|
|
|
|
+ selectArr.value = []
|
|
|
|
+}
|
|
//删除汇总项
|
|
//删除汇总项
|
|
const delCollectRow = async (row) => {
|
|
const delCollectRow = async (row) => {
|
|
HcDelMsg(async (resolve) => {
|
|
HcDelMsg(async (resolve) => {
|
|
- await removeCollectPay(row.id);
|
|
|
|
- resolve(); //关闭弹窗的回调
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+ await removeCollectPay(row.id)
|
|
|
|
+ resolve() //关闭弹窗的回调
|
|
|
|
+ })
|
|
|
|
+}
|
|
const removeCollectPay = async (id) => {
|
|
const removeCollectPay = async (id) => {
|
|
const { error, code, msg } = await mainApi.removeCollect({
|
|
const { error, code, msg } = await mainApi.removeCollect({
|
|
id: rowViewId.value,
|
|
id: rowViewId.value,
|
|
bindId: id,
|
|
bindId: id,
|
|
- });
|
|
|
|
|
|
+ })
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- window?.$message?.success("删除成功");
|
|
|
|
- getDetail(rowViewId.value);
|
|
|
|
|
|
+ window?.$message?.success('删除成功')
|
|
|
|
+ getDetail(rowViewId.value)
|
|
} else {
|
|
} else {
|
|
- window.$message.error(msg);
|
|
|
|
|
|
+ window.$message.error(msg)
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
//添加汇总项
|
|
//添加汇总项
|
|
const tableCollectColumn = ref([
|
|
const tableCollectColumn = ref([
|
|
- { key: "payNumber", name: "支付项编号" },
|
|
|
|
- { key: "payName", name: "支付项名称" },
|
|
|
|
- { key: "payTypeName", name: "支付项类型" },
|
|
|
|
- { key: "isDeduct", name: "是否为扣款项" },
|
|
|
|
- { key: "isTotalTerms", name: "是否合计项" },
|
|
|
|
- { key: "payApplicableTypeName", name: "支付项适用类型" },
|
|
|
|
-]);
|
|
|
|
-const tableCollectData = ref([]);
|
|
|
|
-const tableCollectLoading = ref(false);
|
|
|
|
|
|
+ { key: 'payNumber', name: '支付项编号' },
|
|
|
|
+ { key: 'payName', name: '支付项名称' },
|
|
|
|
+ { key: 'payTypeName', name: '支付项类型' },
|
|
|
|
+ { key: 'isDeduct', name: '是否为扣款项' },
|
|
|
|
+ { key: 'isTotalTerms', name: '是否合计项' },
|
|
|
|
+ { key: 'payApplicableTypeName', name: '支付项适用类型' },
|
|
|
|
+])
|
|
|
|
+const tableCollectData = ref([])
|
|
|
|
+const tableCollectLoading = ref(false)
|
|
const getTableCollectData = async () => {
|
|
const getTableCollectData = async () => {
|
|
- tableCollectLoading.value = true;
|
|
|
|
|
|
+ tableCollectLoading.value = true
|
|
const { error, code, data } = await mainApi.getProListPage({
|
|
const { error, code, data } = await mainApi.getProListPage({
|
|
projectId: 1,
|
|
projectId: 1,
|
|
recordId: rowViewId.value,
|
|
recordId: rowViewId.value,
|
|
- });
|
|
|
|
- tableCollectLoading.value = false;
|
|
|
|
|
|
+ })
|
|
|
|
+ tableCollectLoading.value = false
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- tableCollectData.value = getArrValue(data);
|
|
|
|
|
|
+ tableCollectData.value = getArrValue(data)
|
|
} else {
|
|
} else {
|
|
- tableCollectData.value = [];
|
|
|
|
|
|
+ tableCollectData.value = []
|
|
}
|
|
}
|
|
-};
|
|
|
|
-const selectTableCollectIds = ref("");
|
|
|
|
-const selectArr = ref([]);
|
|
|
|
|
|
+}
|
|
|
|
+const selectTableCollectIds = ref('')
|
|
|
|
+const selectArr = ref([])
|
|
const tableCollectCheckChange = (list) => {
|
|
const tableCollectCheckChange = (list) => {
|
|
- selectArr.value = list;
|
|
|
|
- selectTableCollectIds.value = arrToId(list);
|
|
|
|
-};
|
|
|
|
|
|
+ selectArr.value = list
|
|
|
|
+ selectTableCollectIds.value = arrToId(list)
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
|
<style scoped lang="scss"></style>
|