|
@@ -35,7 +35,7 @@
|
|
: 'primary'
|
|
: 'primary'
|
|
"
|
|
"
|
|
size="large"
|
|
size="large"
|
|
- >
|
|
|
|
|
|
+ >
|
|
<div class="timeline-item-icon">
|
|
<div class="timeline-item-icon">
|
|
<hc-icon
|
|
<hc-icon
|
|
v-if="item.status === '2'"
|
|
v-if="item.status === '2'"
|
|
@@ -92,7 +92,7 @@
|
|
name="exchange-2"
|
|
name="exchange-2"
|
|
class="ml-2"
|
|
class="ml-2"
|
|
/>
|
|
/>
|
|
- <br />
|
|
|
|
|
|
+ <br>
|
|
<el-tooltip
|
|
<el-tooltip
|
|
placement="right"
|
|
placement="right"
|
|
effect="light"
|
|
effect="light"
|
|
@@ -112,8 +112,8 @@
|
|
>
|
|
>
|
|
<el-timeline-item
|
|
<el-timeline-item
|
|
:class="
|
|
:class="
|
|
- item1.status ===
|
|
|
|
- '2'
|
|
|
|
|
|
+ item1.status
|
|
|
|
+ === '2'
|
|
? 'success'
|
|
? 'success'
|
|
: 'primary'
|
|
: 'primary'
|
|
"
|
|
"
|
|
@@ -124,8 +124,8 @@
|
|
>
|
|
>
|
|
<hc-icon
|
|
<hc-icon
|
|
v-if="
|
|
v-if="
|
|
- item1.status ===
|
|
|
|
- '2'
|
|
|
|
|
|
+ item1.status
|
|
|
|
+ === '2'
|
|
"
|
|
"
|
|
class="check-icon"
|
|
class="check-icon"
|
|
name="check"
|
|
name="check"
|
|
@@ -162,8 +162,9 @@
|
|
@mouseleave="
|
|
@mouseleave="
|
|
item.taskDetailvisible = false
|
|
item.taskDetailvisible = false
|
|
"
|
|
"
|
|
- >点击查看详情</el-link
|
|
|
|
>
|
|
>
|
|
|
|
+ 点击查看详情
|
|
|
|
+ </el-link>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -221,9 +222,7 @@
|
|
v-else-if="row.status === 2"
|
|
v-else-if="row.status === 2"
|
|
class="is-danger i-iconoir-xmark-circle-solid"
|
|
class="is-danger i-iconoir-xmark-circle-solid"
|
|
/>
|
|
/>
|
|
- <span v-else-if="row.status === 3"
|
|
|
|
- >审批结束</span
|
|
|
|
- >
|
|
|
|
|
|
+ <span v-else-if="row.status === 3">审批结束</span>
|
|
<i
|
|
<i
|
|
v-else
|
|
v-else
|
|
class="i-iconoir-help-circle-solid"
|
|
class="i-iconoir-help-circle-solid"
|
|
@@ -237,8 +236,8 @@
|
|
>
|
|
>
|
|
<template
|
|
<template
|
|
v-if="
|
|
v-if="
|
|
- rowInfo.meterType === 1 ||
|
|
|
|
- rowInfo.meterType === 3
|
|
|
|
|
|
+ rowInfo.meterType === 1
|
|
|
|
+ || rowInfo.meterType === 3
|
|
"
|
|
"
|
|
>
|
|
>
|
|
<div class="title-box">
|
|
<div class="title-box">
|
|
@@ -309,8 +308,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.chiefSupervisor &&
|
|
|
|
- !meterApproveOpinion1.chiefSupervisorDefault
|
|
|
|
|
|
+ meterApproveOpinion1.chiefSupervisor
|
|
|
|
+
|
|
"
|
|
"
|
|
class="hc-bt-0 text-box"
|
|
class="hc-bt-0 text-box"
|
|
>
|
|
>
|
|
@@ -358,8 +357,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.supervisorAudit &&
|
|
|
|
- !meterApproveOpinion1.supervisorAuditDefault
|
|
|
|
|
|
+ meterApproveOpinion1.supervisorAudit
|
|
|
|
+ && !meterApproveOpinion1.supervisorAuditDefault
|
|
"
|
|
"
|
|
class="text-box hc-bt-0"
|
|
class="text-box hc-bt-0"
|
|
>
|
|
>
|
|
@@ -407,8 +406,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.projectBuild &&
|
|
|
|
- !meterApproveOpinion1.projectBuildDefault
|
|
|
|
|
|
+ meterApproveOpinion1.projectBuild
|
|
|
|
+ && !meterApproveOpinion1.projectBuildDefault
|
|
"
|
|
"
|
|
class="text-box hc-bt-0"
|
|
class="text-box hc-bt-0"
|
|
>
|
|
>
|
|
@@ -457,8 +456,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.projectBuildLeader &&
|
|
|
|
- !meterApproveOpinion1.projectBuildLeaderDefault
|
|
|
|
|
|
+ meterApproveOpinion1.projectBuildLeader
|
|
|
|
+ && !meterApproveOpinion1.projectBuildLeaderDefault
|
|
"
|
|
"
|
|
class="text-box no-b hc-bt-0"
|
|
class="text-box no-b hc-bt-0"
|
|
>
|
|
>
|
|
@@ -512,8 +511,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.safetyManager &&
|
|
|
|
- !meterApproveOpinion1.safetyManagerDefault
|
|
|
|
|
|
+ meterApproveOpinion1.safetyManager
|
|
|
|
+ && !meterApproveOpinion1.safetyManagerDefault
|
|
"
|
|
"
|
|
class="text-box hc-bt-0"
|
|
class="text-box hc-bt-0"
|
|
>
|
|
>
|
|
@@ -562,8 +561,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.safetyManagerLeader &&
|
|
|
|
- !meterApproveOpinion1.safetyManagerLeaderDefault
|
|
|
|
|
|
+ meterApproveOpinion1.safetyManagerLeader
|
|
|
|
+ && !meterApproveOpinion1.safetyManagerLeaderDefault
|
|
"
|
|
"
|
|
class="text-box no-b hc-bt-0"
|
|
class="text-box no-b hc-bt-0"
|
|
>
|
|
>
|
|
@@ -614,8 +613,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.contractDept &&
|
|
|
|
- !meterApproveOpinion1.contractDeptDefault
|
|
|
|
|
|
+ meterApproveOpinion1.contractDept
|
|
|
|
+ && !meterApproveOpinion1.contractDeptDefault
|
|
"
|
|
"
|
|
class="text-box hc-bt-0"
|
|
class="text-box hc-bt-0"
|
|
>
|
|
>
|
|
@@ -664,8 +663,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.contractDeptLeader &&
|
|
|
|
- !meterApproveOpinion1.contractDeptLeaderDefault
|
|
|
|
|
|
+ meterApproveOpinion1.contractDeptLeader
|
|
|
|
+ && !meterApproveOpinion1.contractDeptLeaderDefault
|
|
"
|
|
"
|
|
class="text-box no-b hc-bt-0"
|
|
class="text-box no-b hc-bt-0"
|
|
>
|
|
>
|
|
@@ -715,8 +714,8 @@
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.generalManager &&
|
|
|
|
- !meterApproveOpinion1.generalManagerDefault
|
|
|
|
|
|
+ meterApproveOpinion1.generalManager
|
|
|
|
+ && !meterApproveOpinion1.generalManagerDefault
|
|
"
|
|
"
|
|
class="text-box no-b hc-bt-0"
|
|
class="text-box no-b hc-bt-0"
|
|
>
|
|
>
|
|
@@ -757,12 +756,12 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="name no-b hc-bt-0">
|
|
<div class="name no-b hc-bt-0">
|
|
- 董事长意见:
|
|
|
|
|
|
+ 董事长意见:
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-if="
|
|
v-if="
|
|
- meterApproveOpinion1.chiefExecutive &&
|
|
|
|
- !meterApproveOpinion1.chiefExecutiveDefault
|
|
|
|
|
|
+ meterApproveOpinion1.chiefExecutive
|
|
|
|
+ && !meterApproveOpinion1.chiefExecutiveDefault
|
|
"
|
|
"
|
|
class="text-box no-b hc-bt-0"
|
|
class="text-box no-b hc-bt-0"
|
|
>
|
|
>
|
|
@@ -812,12 +811,8 @@
|
|
v-if="!isNullES(detailInfo.opinionType)"
|
|
v-if="!isNullES(detailInfo.opinionType)"
|
|
class="hc-task-body-tip hc-flex h-30px"
|
|
class="hc-task-body-tip hc-flex h-30px"
|
|
>
|
|
>
|
|
- <span class="mr-14px"
|
|
|
|
- >实际支付总金额:{{ reportAllMoney }}元</span
|
|
|
|
- >
|
|
|
|
- <span v-if="detailInfo.opinionType != 4"
|
|
|
|
- >本期审计审核进度款:{{ progressMoney }}元</span
|
|
|
|
- >
|
|
|
|
|
|
+ <span class="mr-14px">实际支付总金额:{{ reportAllMoney }}元</span>
|
|
|
|
+ <span v-if="detailInfo.opinionType != 4">本期审计审核进度款:{{ progressMoney }}元</span>
|
|
</div>
|
|
</div>
|
|
</hc-body>
|
|
</hc-body>
|
|
</div>
|
|
</div>
|
|
@@ -842,23 +837,25 @@
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<template #footer>
|
|
<div class="hc-task-dialog-footer">
|
|
<div class="hc-task-dialog-footer">
|
|
- <el-button :disabled="tabsKey !== 1" @click="rejectionClick"
|
|
|
|
- >驳回审批</el-button
|
|
|
|
- >
|
|
|
|
|
|
+ <el-button :disabled="tabsKey !== 1" @click="rejectionClick">
|
|
|
|
+ 驳回审批
|
|
|
|
+ </el-button>
|
|
<el-button
|
|
<el-button
|
|
v-if="rowInfo.meterType > 0 && rowInfo.meterType <= 3"
|
|
v-if="rowInfo.meterType > 0 && rowInfo.meterType <= 3"
|
|
type="warning"
|
|
type="warning"
|
|
:loading="rowViewLoading"
|
|
:loading="rowViewLoading"
|
|
@click="rowViewPdf"
|
|
@click="rowViewPdf"
|
|
- >查看报表</el-button
|
|
|
|
>
|
|
>
|
|
|
|
+ 查看报表
|
|
|
|
+ </el-button>
|
|
<el-button
|
|
<el-button
|
|
type="primary"
|
|
type="primary"
|
|
:loading="confirmLoading"
|
|
:loading="confirmLoading"
|
|
:disabled="tabsKey !== 1"
|
|
:disabled="tabsKey !== 1"
|
|
@click="confirmClick"
|
|
@click="confirmClick"
|
|
- >同意审批</el-button
|
|
|
|
>
|
|
>
|
|
|
|
+ 同意审批
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</hc-new-dialog>
|
|
</hc-new-dialog>
|
|
@@ -886,12 +883,12 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { nextTick, ref, watch } from "vue";
|
|
|
|
-import { useAppStore } from "~src/store";
|
|
|
|
-import { toPdfPage } from "~uti/btn-auth";
|
|
|
|
-import HcTaskForm from "./task-form.vue";
|
|
|
|
-import HcTaskNotes from "./task-notes.vue";
|
|
|
|
-import HcRepealForm from "./repeal-form.vue";
|
|
|
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
|
+import { toPdfPage } from '~uti/btn-auth'
|
|
|
|
+import HcTaskForm from './task-form.vue'
|
|
|
|
+import HcTaskNotes from './task-notes.vue'
|
|
|
|
+import HcRepealForm from './repeal-form.vue'
|
|
import {
|
|
import {
|
|
arrUnion,
|
|
arrUnion,
|
|
deepClone,
|
|
deepClone,
|
|
@@ -899,422 +896,422 @@ import {
|
|
getObjValue,
|
|
getObjValue,
|
|
getRandom,
|
|
getRandom,
|
|
isNullES,
|
|
isNullES,
|
|
-} from "js-fast-way";
|
|
|
|
-import mainApi from "~api/tasks/hc-data";
|
|
|
|
-import dayjs from "dayjs";
|
|
|
|
|
|
+} from 'js-fast-way'
|
|
|
|
+import mainApi from '~api/tasks/hc-data'
|
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
tabs: {
|
|
tabs: {
|
|
type: [String, Number],
|
|
type: [String, Number],
|
|
- default: "",
|
|
|
|
|
|
+ default: '',
|
|
},
|
|
},
|
|
row: {
|
|
row: {
|
|
type: Object,
|
|
type: Object,
|
|
default: () => ({}),
|
|
default: () => ({}),
|
|
},
|
|
},
|
|
-});
|
|
|
|
|
|
+})
|
|
|
|
|
|
//事件
|
|
//事件
|
|
-const emit = defineEmits(["finish", "close"]);
|
|
|
|
-const uuid = getRandom(4);
|
|
|
|
|
|
+const emit = defineEmits(['finish', 'close'])
|
|
|
|
+const uuid = getRandom(4)
|
|
|
|
|
|
-const useAppState = useAppStore();
|
|
|
|
-const projectId = ref(useAppState.getProjectId || "");
|
|
|
|
-const contractId = ref(useAppState.getContractId || "");
|
|
|
|
|
|
+const useAppState = useAppStore()
|
|
|
|
+const projectId = ref(useAppState.getProjectId || '')
|
|
|
|
+const contractId = ref(useAppState.getContractId || '')
|
|
|
|
|
|
//双向绑定
|
|
//双向绑定
|
|
// eslint-disable-next-line no-undef
|
|
// eslint-disable-next-line no-undef
|
|
-const isShow = defineModel("modelValue", {
|
|
|
|
|
|
+const isShow = defineModel('modelValue', {
|
|
default: false,
|
|
default: false,
|
|
-});
|
|
|
|
|
|
+})
|
|
|
|
|
|
//监听
|
|
//监听
|
|
-const tableRef = ref(null);
|
|
|
|
-const tabsKey = ref(Number(props.tabs));
|
|
|
|
-const rowInfo = ref(props.row);
|
|
|
|
|
|
+const tableRef = ref(null)
|
|
|
|
+const tabsKey = ref(Number(props.tabs))
|
|
|
|
+const rowInfo = ref(props.row)
|
|
|
|
|
|
watch(
|
|
watch(
|
|
() => [props.tabs, props.row],
|
|
() => [props.tabs, props.row],
|
|
([key, row]) => {
|
|
([key, row]) => {
|
|
- tabsKey.value = Number(key);
|
|
|
|
- rowInfo.value = row;
|
|
|
|
|
|
+ tabsKey.value = Number(key)
|
|
|
|
+ rowInfo.value = row
|
|
},
|
|
},
|
|
{
|
|
{
|
|
immediate: true,
|
|
immediate: true,
|
|
deep: true,
|
|
deep: true,
|
|
- }
|
|
|
|
-);
|
|
|
|
|
|
+ },
|
|
|
|
+)
|
|
|
|
|
|
//监听显示
|
|
//监听显示
|
|
watch(isShow, (val) => {
|
|
watch(isShow, (val) => {
|
|
if (val) {
|
|
if (val) {
|
|
- checkSmsCode();
|
|
|
|
- setTaskInfo();
|
|
|
|
- setSplitRef();
|
|
|
|
|
|
+ checkSmsCode()
|
|
|
|
+ setTaskInfo()
|
|
|
|
+ setSplitRef()
|
|
}
|
|
}
|
|
-});
|
|
|
|
|
|
+})
|
|
|
|
|
|
//初始化设置拖动分割线
|
|
//初始化设置拖动分割线
|
|
const setSplitRef = () => {
|
|
const setSplitRef = () => {
|
|
//配置参考: https://split.js.org/#/?direction=vertical&snapOffset=0
|
|
//配置参考: https://split.js.org/#/?direction=vertical&snapOffset=0
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
- window.$split(["#hc_task_table_" + uuid, "#hc_task_form_" + uuid], {
|
|
|
|
|
|
+ window.$split(['#hc_task_table_' + uuid, '#hc_task_form_' + uuid], {
|
|
sizes: [50, 50],
|
|
sizes: [50, 50],
|
|
snapOffset: 0,
|
|
snapOffset: 0,
|
|
minSize: [50, 500],
|
|
minSize: [50, 500],
|
|
- });
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
|
|
//设置任务信息
|
|
//设置任务信息
|
|
const setTaskInfo = () => {
|
|
const setTaskInfo = () => {
|
|
//meterType:1中间,2材料,3开工,4变更令
|
|
//meterType:1中间,2材料,3开工,4变更令
|
|
- const { meterType } = rowInfo.value;
|
|
|
|
|
|
+ const { meterType } = rowInfo.value
|
|
if (meterType === 1) {
|
|
if (meterType === 1) {
|
|
- tableColumn.value = middlepayTableColumn.value;
|
|
|
|
|
|
+ tableColumn.value = middlepayTableColumn.value
|
|
} else if (meterType === 2) {
|
|
} else if (meterType === 2) {
|
|
- tableColumn.value = materialTableColumn.value;
|
|
|
|
|
|
+ tableColumn.value = materialTableColumn.value
|
|
} else if (meterType === 3) {
|
|
} else if (meterType === 3) {
|
|
- tableColumn.value = startWorkTableColumn.value;
|
|
|
|
|
|
+ tableColumn.value = startWorkTableColumn.value
|
|
} else if (meterType === 4) {
|
|
} else if (meterType === 4) {
|
|
- tableColumn.value = alterTableColumn.value;
|
|
|
|
|
|
+ tableColumn.value = alterTableColumn.value
|
|
} else {
|
|
} else {
|
|
- tableColumn.value = [];
|
|
|
|
|
|
+ tableColumn.value = []
|
|
}
|
|
}
|
|
- getTableDetail();
|
|
|
|
-};
|
|
|
|
|
|
+ getTableDetail()
|
|
|
|
+}
|
|
|
|
|
|
//获取数据详情
|
|
//获取数据详情
|
|
-const detailInfo = ref({});
|
|
|
|
-const reportAllMoney = ref("0");
|
|
|
|
-const progressMoney = ref("0");
|
|
|
|
-const meterApproveOpinion1 = ref({});
|
|
|
|
-const meterApproveOpinion2 = ref({});
|
|
|
|
-const isLoading = ref(false);
|
|
|
|
|
|
+const detailInfo = ref({})
|
|
|
|
+const reportAllMoney = ref('0')
|
|
|
|
+const progressMoney = ref('0')
|
|
|
|
+const meterApproveOpinion1 = ref({})
|
|
|
|
+const meterApproveOpinion2 = ref({})
|
|
|
|
+const isLoading = ref(false)
|
|
const getTableDetail = async () => {
|
|
const getTableDetail = async () => {
|
|
- isLoading.value = true;
|
|
|
|
- confirmLoading.value = true;
|
|
|
|
|
|
+ isLoading.value = true
|
|
|
|
+ confirmLoading.value = true
|
|
//获取数据
|
|
//获取数据
|
|
- const { data } = await mainApi.getDetail(rowInfo.value.id);
|
|
|
|
- const infoData = getObjValue(data);
|
|
|
|
- const { taskProcessInfo, taskCenterDataInfo } = infoData;
|
|
|
|
- tableData.value = getArrValue(taskCenterDataInfo);
|
|
|
|
- flowList.value = getArrValue(taskProcessInfo);
|
|
|
|
- reportAllMoney.value = infoData.reportAllMoney;
|
|
|
|
- progressMoney.value = infoData.progressMoney;
|
|
|
|
- detailInfo.value = infoData;
|
|
|
|
|
|
+ const { data } = await mainApi.getDetail(rowInfo.value.id)
|
|
|
|
+ const infoData = getObjValue(data)
|
|
|
|
+ const { taskProcessInfo, taskCenterDataInfo } = infoData
|
|
|
|
+ tableData.value = getArrValue(taskCenterDataInfo)
|
|
|
|
+ flowList.value = getArrValue(taskProcessInfo)
|
|
|
|
+ reportAllMoney.value = infoData.reportAllMoney
|
|
|
|
+ progressMoney.value = infoData.progressMoney
|
|
|
|
+ detailInfo.value = infoData
|
|
if (rowInfo.value?.fixedFlowId) {
|
|
if (rowInfo.value?.fixedFlowId) {
|
|
- const list = [...flowList.value];
|
|
|
|
- let firstarr = list.slice(0, 1);
|
|
|
|
- let taskList = list.slice(1, list.length);
|
|
|
|
|
|
+ const list = [...flowList.value]
|
|
|
|
+ let firstarr = list.slice(0, 1)
|
|
|
|
+ let taskList = list.slice(1, list.length)
|
|
taskList.forEach((ele) => {
|
|
taskList.forEach((ele) => {
|
|
- ele.name = ele.taskBranchName;
|
|
|
|
- ele.status = ele.taskBranchStatus;
|
|
|
|
- ele.type = ele.taskBranchType;
|
|
|
|
- ele.isTask = true;
|
|
|
|
- });
|
|
|
|
- flowListTask.value = arrUnion(firstarr, taskList);
|
|
|
|
|
|
+ ele.name = ele.taskBranchName
|
|
|
|
+ ele.status = ele.taskBranchStatus
|
|
|
|
+ ele.type = ele.taskBranchType
|
|
|
|
+ ele.isTask = true
|
|
|
|
+ })
|
|
|
|
+ flowListTask.value = arrUnion(firstarr, taskList)
|
|
}
|
|
}
|
|
//意见信息
|
|
//意见信息
|
|
- const meterRes = getObjValue(data.meterApproveOpinion);
|
|
|
|
- meterApproveOpinion2.value = deepClone(meterRes);
|
|
|
|
- meterApproveOpinion1.value = meterRes;
|
|
|
|
|
|
+ const meterRes = getObjValue(data.meterApproveOpinion)
|
|
|
|
+ meterApproveOpinion2.value = deepClone(meterRes)
|
|
|
|
+ meterApproveOpinion1.value = meterRes
|
|
//设置默认值
|
|
//设置默认值
|
|
- setDefaultOpinion();
|
|
|
|
|
|
+ setDefaultOpinion()
|
|
|
|
|
|
//默认选中第一行
|
|
//默认选中第一行
|
|
- let info = {};
|
|
|
|
|
|
+ let info = {}
|
|
if (tableData.value.length > 0) {
|
|
if (tableData.value.length > 0) {
|
|
- info = tableData.value[0];
|
|
|
|
|
|
+ info = tableData.value[0]
|
|
}
|
|
}
|
|
await nextTick(() => {
|
|
await nextTick(() => {
|
|
- tableInfo.value = info;
|
|
|
|
- tableRef.value?.tableRef?.setCurrentRow(info);
|
|
|
|
- });
|
|
|
|
|
|
+ tableInfo.value = info
|
|
|
|
+ tableRef.value?.tableRef?.setCurrentRow(info)
|
|
|
|
+ })
|
|
//关闭加载状态
|
|
//关闭加载状态
|
|
- isLoading.value = false;
|
|
|
|
- confirmLoading.value = false;
|
|
|
|
-};
|
|
|
|
|
|
+ isLoading.value = false
|
|
|
|
+ confirmLoading.value = false
|
|
|
|
+}
|
|
const setDefaultValue = (field, defaultOpinion) => {
|
|
const setDefaultValue = (field, defaultOpinion) => {
|
|
if (isNullES(meterApproveOpinion1.value[field])) {
|
|
if (isNullES(meterApproveOpinion1.value[field])) {
|
|
- meterApproveOpinion2.value[field] = defaultOpinion;
|
|
|
|
- meterApproveOpinion1.value[`${field}Default`] = true;
|
|
|
|
|
|
+ meterApproveOpinion2.value[field] = defaultOpinion
|
|
|
|
+ meterApproveOpinion1.value[`${field}Default`] = true
|
|
} else if (meterApproveOpinion1.value[field] === defaultOpinion) {
|
|
} else if (meterApproveOpinion1.value[field] === defaultOpinion) {
|
|
- meterApproveOpinion1.value[`${field}Default`] = true;
|
|
|
|
|
|
+ meterApproveOpinion1.value[`${field}Default`] = true
|
|
} else {
|
|
} else {
|
|
- meterApproveOpinion1.value[`${field}Default`] = false;
|
|
|
|
|
|
+ meterApproveOpinion1.value[`${field}Default`] = false
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
|
|
|
|
const setDefaultOpinion = () => {
|
|
const setDefaultOpinion = () => {
|
|
- const defaultOpinion = "拟同意(不填写默认为拟同意)";
|
|
|
|
- setDefaultValue("chiefSupervisor", defaultOpinion);
|
|
|
|
- setDefaultValue("supervisorAudit", defaultOpinion);
|
|
|
|
- setDefaultValue("projectBuild", defaultOpinion);
|
|
|
|
- setDefaultValue("projectBuildLeader", defaultOpinion);
|
|
|
|
- setDefaultValue("safetyManager", defaultOpinion);
|
|
|
|
- setDefaultValue("safetyManagerLeader", defaultOpinion);
|
|
|
|
- setDefaultValue("contractDept", defaultOpinion);
|
|
|
|
- setDefaultValue("contractDeptLeader", defaultOpinion);
|
|
|
|
- setDefaultValue("generalManager", defaultOpinion);
|
|
|
|
|
|
+ const defaultOpinion = '拟同意(不填写默认为拟同意)'
|
|
|
|
+ //setDefaultValue('chiefSupervisor', defaultOpinion)
|
|
|
|
+ setDefaultValue('supervisorAudit', defaultOpinion)
|
|
|
|
+ setDefaultValue('projectBuild', defaultOpinion)
|
|
|
|
+ setDefaultValue('projectBuildLeader', defaultOpinion)
|
|
|
|
+ setDefaultValue('safetyManager', defaultOpinion)
|
|
|
|
+ setDefaultValue('safetyManagerLeader', defaultOpinion)
|
|
|
|
+ setDefaultValue('contractDept', defaultOpinion)
|
|
|
|
+ setDefaultValue('contractDeptLeader', defaultOpinion)
|
|
|
|
+ setDefaultValue('generalManager', defaultOpinion)
|
|
|
|
|
|
// 注意:这里修改为了与其他默认意见一致
|
|
// 注意:这里修改为了与其他默认意见一致
|
|
- setDefaultValue("chiefExecutive", "同意(不填写默认为同意)");
|
|
|
|
-};
|
|
|
|
|
|
+ setDefaultValue('chiefExecutive', '同意(不填写默认为同意)')
|
|
|
|
+}
|
|
|
|
|
|
//流程信息,1待审批,2已审批
|
|
//流程信息,1待审批,2已审批
|
|
-const flowList = ref([]);
|
|
|
|
|
|
+const flowList = ref([])
|
|
//type为1流程审批,type为2是平行审批
|
|
//type为1流程审批,type为2是平行审批
|
|
const flowListTask = ref([
|
|
const flowListTask = ref([
|
|
{
|
|
{
|
|
- name: "PCT",
|
|
|
|
- date: "2024-03-01 09:27:17",
|
|
|
|
- status: "2",
|
|
|
|
- flowValue: "上报",
|
|
|
|
|
|
+ name: 'PCT',
|
|
|
|
+ date: '2024-03-01 09:27:17',
|
|
|
|
+ status: '2',
|
|
|
|
+ flowValue: '上报',
|
|
isTask: false,
|
|
isTask: false,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '"222"',
|
|
name: '"222"',
|
|
- date: "",
|
|
|
|
- status: "2",
|
|
|
|
- flowValue: "",
|
|
|
|
|
|
+ date: '',
|
|
|
|
+ status: '2',
|
|
|
|
+ flowValue: '',
|
|
type: 1,
|
|
type: 1,
|
|
isTask: true,
|
|
isTask: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '"111"',
|
|
name: '"111"',
|
|
- date: "",
|
|
|
|
- status: "1",
|
|
|
|
- flowValue: "",
|
|
|
|
|
|
+ date: '',
|
|
|
|
+ status: '1',
|
|
|
|
+ flowValue: '',
|
|
type: 2,
|
|
type: 2,
|
|
isTask: true,
|
|
isTask: true,
|
|
},
|
|
},
|
|
-]);
|
|
|
|
-const taskDetailList = ref([]);
|
|
|
|
|
|
+])
|
|
|
|
+const taskDetailList = ref([])
|
|
|
|
|
|
//中间计量单的表格数据
|
|
//中间计量单的表格数据
|
|
const middlepayTableColumn = ref([
|
|
const middlepayTableColumn = ref([
|
|
- { key: "action", name: "批注", width: 45, align: "center" },
|
|
|
|
- { key: "meterNumber", name: "计量单编号" },
|
|
|
|
- { key: "meterMoney", name: "计量金额", width: 100 },
|
|
|
|
- { key: "engineerDivide", name: "工程划分" },
|
|
|
|
|
|
+ { key: 'action', name: '批注', width: 45, align: 'center' },
|
|
|
|
+ { key: 'meterNumber', name: '计量单编号' },
|
|
|
|
+ { key: 'meterMoney', name: '计量金额', width: 100 },
|
|
|
|
+ { key: 'engineerDivide', name: '工程划分' },
|
|
{
|
|
{
|
|
- key: "state",
|
|
|
|
- name: "审批状态",
|
|
|
|
- fixed: "right",
|
|
|
|
|
|
+ key: 'state',
|
|
|
|
+ name: '审批状态',
|
|
|
|
+ fixed: 'right',
|
|
width: 70,
|
|
width: 70,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
-]);
|
|
|
|
|
|
+])
|
|
//开工预付款计量单的表格数据
|
|
//开工预付款计量单的表格数据
|
|
const startWorkTableColumn = ref([
|
|
const startWorkTableColumn = ref([
|
|
- { key: "action", name: "批注", width: 45, align: "center" },
|
|
|
|
- { key: "periodName", name: "计量期", minWidth: 100, align: "center" },
|
|
|
|
- { key: "businessDate", name: "业务日期", width: 160, align: "center" },
|
|
|
|
- { key: "meterMoney", name: "计量金额", width: 100, align: "center" },
|
|
|
|
|
|
+ { key: 'action', name: '批注', width: 45, align: 'center' },
|
|
|
|
+ { key: 'periodName', name: '计量期', minWidth: 100, align: 'center' },
|
|
|
|
+ { key: 'businessDate', name: '业务日期', width: 160, align: 'center' },
|
|
|
|
+ { key: 'meterMoney', name: '计量金额', width: 100, align: 'center' },
|
|
{
|
|
{
|
|
- key: "state",
|
|
|
|
- name: "审批状态",
|
|
|
|
- fixed: "right",
|
|
|
|
|
|
+ key: 'state',
|
|
|
|
+ name: '审批状态',
|
|
|
|
+ fixed: 'right',
|
|
width: 70,
|
|
width: 70,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
-]);
|
|
|
|
|
|
+])
|
|
//变更令的表格数据
|
|
//变更令的表格数据
|
|
const alterTableColumn = ref([
|
|
const alterTableColumn = ref([
|
|
- { key: "action", name: "批注", width: 45, align: "center" },
|
|
|
|
- { key: "changeNumber", name: "变更编号", minWidth: 120, align: "center" },
|
|
|
|
- { key: "changeName", name: "变更名称", minWidth: 120, align: "center" },
|
|
|
|
- { key: "changeMoney", name: "变更金额", width: 100, align: "center" },
|
|
|
|
|
|
+ { key: 'action', name: '批注', width: 45, align: 'center' },
|
|
|
|
+ { key: 'changeNumber', name: '变更编号', minWidth: 120, align: 'center' },
|
|
|
|
+ { key: 'changeName', name: '变更名称', minWidth: 120, align: 'center' },
|
|
|
|
+ { key: 'changeMoney', name: '变更金额', width: 100, align: 'center' },
|
|
{
|
|
{
|
|
- key: "changeApprovalDate",
|
|
|
|
- name: "变更批复日期",
|
|
|
|
|
|
+ key: 'changeApprovalDate',
|
|
|
|
+ name: '变更批复日期',
|
|
width: 160,
|
|
width: 160,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- key: "state",
|
|
|
|
- name: "审批状态",
|
|
|
|
- fixed: "right",
|
|
|
|
|
|
+ key: 'state',
|
|
|
|
+ name: '审批状态',
|
|
|
|
+ fixed: 'right',
|
|
width: 70,
|
|
width: 70,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
-]);
|
|
|
|
|
|
+])
|
|
//材料计量单的表格数据
|
|
//材料计量单的表格数据
|
|
const materialTableColumn = ref([
|
|
const materialTableColumn = ref([
|
|
- { key: "action", name: "批注", width: 45, align: "center" },
|
|
|
|
- { key: "periodName", name: "计量期", minWidth: 100, align: "center" },
|
|
|
|
|
|
+ { key: 'action', name: '批注', width: 45, align: 'center' },
|
|
|
|
+ { key: 'periodName', name: '计量期', minWidth: 100, align: 'center' },
|
|
{
|
|
{
|
|
- key: "contractMaterialName",
|
|
|
|
- name: "合同材料",
|
|
|
|
|
|
+ key: 'contractMaterialName',
|
|
|
|
+ name: '合同材料',
|
|
minWidth: 120,
|
|
minWidth: 120,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- key: "materialArriveNumber",
|
|
|
|
- name: "材料到场编号",
|
|
|
|
|
|
+ key: 'materialArriveNumber',
|
|
|
|
+ name: '材料到场编号',
|
|
width: 120,
|
|
width: 120,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
- { key: "meterMoney", name: "计量金额", width: 100, align: "center" },
|
|
|
|
|
|
+ { key: 'meterMoney', name: '计量金额', width: 100, align: 'center' },
|
|
{
|
|
{
|
|
- key: "state",
|
|
|
|
- name: "审批状态",
|
|
|
|
- fixed: "right",
|
|
|
|
|
|
+ key: 'state',
|
|
|
|
+ name: '审批状态',
|
|
|
|
+ fixed: 'right',
|
|
width: 70,
|
|
width: 70,
|
|
- align: "center",
|
|
|
|
|
|
+ align: 'center',
|
|
},
|
|
},
|
|
-]);
|
|
|
|
|
|
+])
|
|
|
|
|
|
//表格数据
|
|
//表格数据
|
|
-const tableColumn = ref([]);
|
|
|
|
-const tableData = ref([]);
|
|
|
|
|
|
+const tableColumn = ref([])
|
|
|
|
+const tableData = ref([])
|
|
|
|
|
|
//表格行被点击
|
|
//表格行被点击
|
|
-const tableInfo = ref({});
|
|
|
|
|
|
+const tableInfo = ref({})
|
|
const tableRowClick = ({ row }) => {
|
|
const tableRowClick = ({ row }) => {
|
|
- tableInfo.value = row;
|
|
|
|
-};
|
|
|
|
|
|
+ tableInfo.value = row
|
|
|
|
+}
|
|
|
|
|
|
//批注, isComment 是否已批注,1=是,0=否
|
|
//批注, isComment 是否已批注,1=是,0=否
|
|
-const isNotesShow = ref(false);
|
|
|
|
-const tableNoteInfo = ref({});
|
|
|
|
|
|
+const isNotesShow = ref(false)
|
|
|
|
+const tableNoteInfo = ref({})
|
|
const rowRemarkClick = (row) => {
|
|
const rowRemarkClick = (row) => {
|
|
- tableNoteInfo.value = row;
|
|
|
|
|
|
+ tableNoteInfo.value = row
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
- isNotesShow.value = true;
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+ isNotesShow.value = true
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
|
|
//批注完成
|
|
//批注完成
|
|
const taskNotesFinish = () => {
|
|
const taskNotesFinish = () => {
|
|
- getTableDetail();
|
|
|
|
-};
|
|
|
|
|
|
+ getTableDetail()
|
|
|
|
+}
|
|
|
|
|
|
//单条审批
|
|
//单条审批
|
|
const taskFormFinish = () => {
|
|
const taskFormFinish = () => {
|
|
- getTableDetail();
|
|
|
|
-};
|
|
|
|
|
|
+ getTableDetail()
|
|
|
|
+}
|
|
|
|
|
|
//确认审批
|
|
//确认审批
|
|
-const confirmLoading = ref(false);
|
|
|
|
|
|
+const confirmLoading = ref(false)
|
|
const confirmClick = () => {
|
|
const confirmClick = () => {
|
|
- const ShowAuth = isCheckSmsCodeTime();
|
|
|
|
- SMSAuthShow.value = ShowAuth;
|
|
|
|
|
|
+ const ShowAuth = isCheckSmsCodeTime()
|
|
|
|
+ SMSAuthShow.value = ShowAuth
|
|
//免短信验证
|
|
//免短信验证
|
|
- if (!ShowAuth) SMSAuthConfirm();
|
|
|
|
-};
|
|
|
|
|
|
+ if (!ShowAuth) SMSAuthConfirm()
|
|
|
|
+}
|
|
|
|
|
|
//驳回审批
|
|
//驳回审批
|
|
-const isRepealShow = ref(false);
|
|
|
|
|
|
+const isRepealShow = ref(false)
|
|
const rejectionClick = async () => {
|
|
const rejectionClick = async () => {
|
|
- isRepealShow.value = true;
|
|
|
|
-};
|
|
|
|
|
|
+ isRepealShow.value = true
|
|
|
|
+}
|
|
|
|
|
|
//驳回完成
|
|
//驳回完成
|
|
const taskRepealFinish = () => {
|
|
const taskRepealFinish = () => {
|
|
- emit("finish");
|
|
|
|
- cancelClick();
|
|
|
|
-};
|
|
|
|
|
|
+ emit('finish')
|
|
|
|
+ cancelClick()
|
|
|
|
+}
|
|
|
|
|
|
//取消审批
|
|
//取消审批
|
|
const cancelClick = () => {
|
|
const cancelClick = () => {
|
|
- isShow.value = false;
|
|
|
|
- isLoading.value = false;
|
|
|
|
- confirmLoading.value = false;
|
|
|
|
- tableColumn.value = [];
|
|
|
|
- tableData.value = [];
|
|
|
|
- tableInfo.value = {};
|
|
|
|
- emit("close");
|
|
|
|
-};
|
|
|
|
|
|
+ isShow.value = false
|
|
|
|
+ isLoading.value = false
|
|
|
|
+ confirmLoading.value = false
|
|
|
|
+ tableColumn.value = []
|
|
|
|
+ tableData.value = []
|
|
|
|
+ tableInfo.value = {}
|
|
|
|
+ emit('close')
|
|
|
|
+}
|
|
|
|
|
|
//短信验证有效期
|
|
//短信验证有效期
|
|
-const smsCodeTime = ref("");
|
|
|
|
|
|
+const smsCodeTime = ref('')
|
|
const checkSmsCode = async () => {
|
|
const checkSmsCode = async () => {
|
|
- const { data } = await mainApi.checkSmsCode();
|
|
|
|
- smsCodeTime.value = data ? data : "";
|
|
|
|
-};
|
|
|
|
|
|
+ const { data } = await mainApi.checkSmsCode()
|
|
|
|
+ smsCodeTime.value = data ? data : ''
|
|
|
|
+}
|
|
|
|
|
|
//验证短信有效期
|
|
//验证短信有效期
|
|
const isCheckSmsCodeTime = () => {
|
|
const isCheckSmsCodeTime = () => {
|
|
- const smsTime = smsCodeTime.value;
|
|
|
|
|
|
+ const smsTime = smsCodeTime.value
|
|
if (isNullES(smsTime)) {
|
|
if (isNullES(smsTime)) {
|
|
- return true;
|
|
|
|
|
|
+ return true
|
|
} else {
|
|
} else {
|
|
- const toDayTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
|
|
- return dayjs(smsTime).isBefore(toDayTime);
|
|
|
|
|
|
+ const toDayTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
+ return dayjs(smsTime).isBefore(toDayTime)
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
|
|
|
|
//短信验证
|
|
//短信验证
|
|
-const SMSAuthLoading = ref(false);
|
|
|
|
-const SMSAuthShow = ref(false);
|
|
|
|
-const htmlFormRef = ref(null);
|
|
|
|
|
|
+const SMSAuthLoading = ref(false)
|
|
|
|
+const SMSAuthShow = ref(false)
|
|
|
|
+const htmlFormRef = ref(null)
|
|
const SMSAuthConfirm = async () => {
|
|
const SMSAuthConfirm = async () => {
|
|
- confirmLoading.value = true;
|
|
|
|
- const tableData = htmlFormRef.value?.getTableForm();
|
|
|
|
|
|
+ confirmLoading.value = true
|
|
|
|
+ const tableData = htmlFormRef.value?.getTableForm()
|
|
const { error, code, msg } = await mainApi.taskApprove({
|
|
const { error, code, msg } = await mainApi.taskApprove({
|
|
tableData: tableData,
|
|
tableData: tableData,
|
|
taskId: rowInfo.value.id,
|
|
taskId: rowInfo.value.id,
|
|
projectId: projectId.value,
|
|
projectId: projectId.value,
|
|
contractId: contractId.value,
|
|
contractId: contractId.value,
|
|
meterApproveOpinion: meterApproveOpinion2.value,
|
|
meterApproveOpinion: meterApproveOpinion2.value,
|
|
- });
|
|
|
|
|
|
+ })
|
|
if (!error && code === 200) {
|
|
if (!error && code === 200) {
|
|
- window.$message.success("审批成功");
|
|
|
|
- await checkSmsCode();
|
|
|
|
- confirmLoading.value = false;
|
|
|
|
- emit("finish");
|
|
|
|
- SMSAuthCancel();
|
|
|
|
- cancelClick();
|
|
|
|
|
|
+ window.$message.success('审批成功')
|
|
|
|
+ await checkSmsCode()
|
|
|
|
+ confirmLoading.value = false
|
|
|
|
+ emit('finish')
|
|
|
|
+ SMSAuthCancel()
|
|
|
|
+ cancelClick()
|
|
} else {
|
|
} else {
|
|
- confirmLoading.value = false;
|
|
|
|
- window.$message.error(msg ?? "审批失败");
|
|
|
|
|
|
+ confirmLoading.value = false
|
|
|
|
+ window.$message.error(msg ?? '审批失败')
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
const SMSAuthCancel = () => {
|
|
const SMSAuthCancel = () => {
|
|
- SMSAuthShow.value = false;
|
|
|
|
-};
|
|
|
|
|
|
+ SMSAuthShow.value = false
|
|
|
|
+}
|
|
|
|
|
|
//选项卡被切换
|
|
//选项卡被切换
|
|
-const taskTabsKey = ref("key1");
|
|
|
|
|
|
+const taskTabsKey = ref('key1')
|
|
const taskTabsClick = (key) => {
|
|
const taskTabsClick = (key) => {
|
|
- taskTabsKey.value = key;
|
|
|
|
-};
|
|
|
|
|
|
+ taskTabsKey.value = key
|
|
|
|
+}
|
|
|
|
|
|
//查看报表
|
|
//查看报表
|
|
-const rowViewLoading = ref(false);
|
|
|
|
|
|
+const rowViewLoading = ref(false)
|
|
const rowViewPdf = async () => {
|
|
const rowViewPdf = async () => {
|
|
- const { type, reportId } = detailInfo.value;
|
|
|
|
|
|
+ const { type, reportId } = detailInfo.value
|
|
if (isNullES(reportId)) {
|
|
if (isNullES(reportId)) {
|
|
- window.$message.warning("参数异常");
|
|
|
|
- return;
|
|
|
|
|
|
+ window.$message.warning('参数异常')
|
|
|
|
+ return
|
|
}
|
|
}
|
|
- rowViewLoading.value = true;
|
|
|
|
|
|
+ rowViewLoading.value = true
|
|
const { code, msg, data } = await mainApi.taskMeterPdfInfo({
|
|
const { code, msg, data } = await mainApi.taskMeterPdfInfo({
|
|
reportId: reportId,
|
|
reportId: reportId,
|
|
type: type,
|
|
type: type,
|
|
taskType: 10,
|
|
taskType: 10,
|
|
taskId: rowInfo.value.id,
|
|
taskId: rowInfo.value.id,
|
|
- });
|
|
|
|
- rowViewLoading.value = false;
|
|
|
|
|
|
+ })
|
|
|
|
+ rowViewLoading.value = false
|
|
if (code === 200 && !isNullES(data)) {
|
|
if (code === 200 && !isNullES(data)) {
|
|
- window.$message.success("操作成功");
|
|
|
|
- toPdfPage(data);
|
|
|
|
|
|
+ window.$message.success('操作成功')
|
|
|
|
+ toPdfPage(data)
|
|
} else {
|
|
} else {
|
|
- window.$message.error(msg ?? "操作失败");
|
|
|
|
|
|
+ window.$message.error(msg ?? '操作失败')
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
|
|
|
|
//选项卡
|
|
//选项卡
|
|
-const tabKey = ref("1");
|
|
|
|
|
|
+const tabKey = ref('1')
|
|
const tabsData = [
|
|
const tabsData = [
|
|
- { key: "2", name: "意见信息" },
|
|
|
|
- { key: "1", name: "计量单信息" },
|
|
|
|
-];
|
|
|
|
|
|
+ { key: '2', name: '意见信息' },
|
|
|
|
+ { key: '1', name: '计量单信息' },
|
|
|
|
+]
|
|
const tabsChange = ({ key }) => {
|
|
const tabsChange = ({ key }) => {
|
|
- tabKey.value = key;
|
|
|
|
-};
|
|
|
|
|
|
+ tabKey.value = key
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|