From 1fc12b319e2c0375a6f48a6af64419ce277c7f82 Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Tue, 12 Mar 2024 19:46:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=A1=E6=89=B9=E3=80=81?=
 =?UTF-8?q?=E6=97=A0=E6=95=88=E7=B1=BB=E7=BB=84=E4=BB=B6=E7=BC=93=E5=AD=98?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=9B=E4=BF=AE=E5=A4=8D=E4=B8=89=E7=BA=A7?=
 =?UTF-8?q?=E6=9C=BA=E6=9E=84=E7=AB=8B=E5=8D=B3=E5=A4=84=E7=90=86=E7=9A=84?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E7=BC=93=E5=AD=98=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../work/components/ConfirmedCompletion.vue   |   1 +
 src/views/work/components/ReviewComments.vue  |  30 +-
 .../components/templates/MailTypeForm.vue     | 125 +++------
 .../components/templates/ThreeHandling.vue    | 263 +++++-------------
 4 files changed, 125 insertions(+), 294 deletions(-)

diff --git a/src/views/work/components/ConfirmedCompletion.vue b/src/views/work/components/ConfirmedCompletion.vue
index 0634a94..98af01d 100644
--- a/src/views/work/components/ConfirmedCompletion.vue
+++ b/src/views/work/components/ConfirmedCompletion.vue
@@ -211,6 +211,7 @@ function submit() {
             emits("update:data", data);
             emits("submit", "confirmedCompletion");
             visible.value = false;
+            mail.verifyFollowupPolice.name = ''
         }
     });
 }
diff --git a/src/views/work/components/ReviewComments.vue b/src/views/work/components/ReviewComments.vue
index 5cbebc5..3ee963b 100644
--- a/src/views/work/components/ReviewComments.vue
+++ b/src/views/work/components/ReviewComments.vue
@@ -1,28 +1,15 @@
 <template>
     <el-dialog width="50vw" title="提交审批">
-        <el-form
-            label-position="top"
-            :model="form"
-            :rules="rules"
-            ref="formRef"
-            style="height: 50vh"
-        >
+        <el-form label-position="top" :model="form" :rules="rules" ref="formRef" style="height: 50vh">
             <el-form-item label="请选择上级领导" prop="leaderEmpNo" v-if="selectLeaderVisible">
-                <LeaderSelect  v-model="form.leaderEmpNo" :leader-type="leaderType" />
+                <LeaderSelect v-model="form.leaderEmpNo" :leader-type="leaderType" />
             </el-form-item>
             <el-form-item label="审批意见" prop="approvalComment">
-                <el-input
-                    v-model="form.approvalComment"
-                    type="textarea"
-                    :rows="3"
-                    placeholder="请输入审批意见"
-                ></el-input>
+                <el-input v-model="form.approvalComment" type="textarea" :rows="3" placeholder="请输入审批意见"></el-input>
             </el-form-item>
         </el-form>
         <footer class="flex end">
-            <el-button type="primary" size="large" @click="submit"
-                >审批通过</el-button
-            >
+            <el-button type="primary" size="large" @click="submit">审批通过</el-button>
         </footer>
     </el-dialog>
 </template>
@@ -57,9 +44,15 @@ const props = defineProps({
     },
 });
 watch(() => props.mail.id, () => {
+    resetFormData()
     formRef.value?.resetFields();
 })
 
+const resetFormData = () => {
+    form.leaderEmpNo = ''
+    form.approvalComment = ''
+}
+
 const selectLeaderVisible = ref(false)
 const leaderType = ref('all')
 watch(() => props.mail.flowKey, (val) => {
@@ -97,5 +90,4 @@ function submit() {
     });
 }
 </script>
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/work/components/templates/MailTypeForm.vue b/src/views/work/components/templates/MailTypeForm.vue
index 176374e..9511c2a 100644
--- a/src/views/work/components/templates/MailTypeForm.vue
+++ b/src/views/work/components/templates/MailTypeForm.vue
@@ -5,107 +5,49 @@
             <div class="flex gap-20">
                 <div style="width: 50%">
                     <el-form-item label="信件分类" prop="mailCategory">
-                        <mail-category-select
-                            v-model="form.mailCategory"
-                            @current-change="handleCategoryChange"
-                        />
+                        <mail-category-select v-model="form.mailCategory" @current-change="handleCategoryChange" />
                     </el-form-item>
                 </div>
                 <div style="width: 50%">
-                    <el-form-item
-                        label="信件等级"
-                        prop="mailLevel"
-                        v-if="
-                            form.mailCategory !== '感谢信类' &&
-                            form.mailCategory !== '无效类' &&
-                            form.mailCategory !== '终止类'
-                        "
-                    >
-                        <el-select
-                            v-model="form.mailLevel"
-                            placeholder=""
-                            clearable
-                        >
-                            <el-option
-                                v-for="item in dictData.mail_level"
-                                :key="item.value"
-                                :label="item.name"
-                                :value="item.value"
-                            />
+                    <el-form-item label="信件等级" prop="mailLevel" v-if="form.mailCategory !== '感谢信类' &&
+            form.mailCategory !== '无效类' &&
+            form.mailCategory !== '终止类'
+            ">
+                        <el-select v-model="form.mailLevel" placeholder="" clearable>
+                            <el-option v-for="item in dictData.mail_level" :key="item.value" :label="item.name"
+                                :value="item.value" />
                         </el-select>
                     </el-form-item>
                 </div>
             </div>
-            <el-form-item
-                label="处理流程"
-                prop="simpleFlowFlag"
-                v-if="
-                    form.mailFirstCategory === '工作建议类' ||
-                    form.mailFirstCategory === '咨询求助类'
-                "
-            >
+            <el-form-item label="处理流程" prop="simpleFlowFlag" v-if="form.mailFirstCategory === '工作建议类' ||
+            form.mailFirstCategory === '咨询求助类'
+            ">
                 <el-radio-group v-model="form.simpleFlowFlag" class="ml-4">
                     <div>
-                        <el-radio :label="false" size="large"
-                            >正常流程</el-radio
-                        >
+                        <el-radio :label="false" size="large">正常流程</el-radio>
                         <p class="radio-tips">正常流程，包含接访群众步骤</p>
                     </div>
                     <div>
-                        <el-radio :label="true" size="largdie"
-                            >简易流程</el-radio
-                        >
+                        <el-radio :label="true" size="largdie">简易流程</el-radio>
                         <p class="radio-tips">简化流程，不包含接访群众步骤</p>
                     </div>
                 </el-radio-group>
             </el-form-item>
-            <el-form-item
-                label="判定理由"
-                prop="invalidationReason"
-                v-if="
-                    form.mailCategory === '无效类' ||
-                    form.mailCategory === '终止类'
-                "
-            >
-                <el-input
-                    type="textarea"
-                    placeholder="请输入判定理由"
-                    v-model="form.invalidationReason"
-                />
+            <el-form-item label="判定理由" prop="invalidationReason" v-if="form.mailCategory === '无效类' ||
+            form.mailCategory === '终止类'
+            ">
+                <el-input type="textarea" placeholder="请输入判定理由" v-model="form.invalidationReason" />
             </el-form-item>
-            <el-form-item
-                label="下发单位"
-                v-if="form.mailCategory === '感谢信类'"
-            >
+            <el-form-item label="下发单位" v-if="form.mailCategory === '感谢信类'">
                 <div class="flex gap" style="width: 100%">
-                    <el-select
-                        v-model="form.secondDeptId"
-                        placeholder="请选择二级办理单位"
-                        filterable
-                        clearable
-                        style="width: 50%"
-                        @change="handleChangeDept"
-                    >
-                        <el-option
-                            v-for="item in secondDepts"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        />
+                    <el-select v-model="form.secondDeptId" placeholder="请选择二级办理单位" filterable clearable
+                        style="width: 50%" @change="handleChangeDept">
+                        <el-option v-for="item in secondDepts" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
-                    <el-select
-                        v-model="form.threeDeptId"
-                        placeholder="请选择三级办理单位"
-                        filterable
-                        clearable
-                        style="width: 50%"
-                    >
-                        <el-option
-                            v-for="item in threeDepts"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        />
+                    <el-select v-model="form.threeDeptId" placeholder="请选择三级办理单位" filterable clearable
+                        style="width: 50%">
+                        <el-option v-for="item in threeDepts" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </div>
             </el-form-item>
@@ -132,12 +74,24 @@ let form = reactive({});
 watch(
     () => props.mailId,
     (val) => {
-        form.mailFirstCategory = null;
-        form.mailSecondCategory = null;
-        form.mailThreeCategory = null;
+        resetFormData()
     }
 );
 
+const resetFormData = () => {
+    form.mailCategory = ''
+    form.mailLevel = ''
+    form.simpleFlowFlag = ''
+    form.invalidationReason = ''
+    form.secondDeptId = ''
+    form.threeDeptId = ''
+    form.mailFirstCategory = null
+    form.mailSecondCategory = null
+    form.mailThreeCategory = null
+
+    formRef.value?.resetFields();
+};
+
 const formRef = ref();
 
 const rules = {
@@ -232,6 +186,7 @@ defineExpose({
 .el-form {
     color: #333;
 }
+
 .radio-tips {
     font-size: 14px;
     color: #666;
diff --git a/src/views/work/components/templates/ThreeHandling.vue b/src/views/work/components/templates/ThreeHandling.vue
index a70d981..8aaed2b 100644
--- a/src/views/work/components/templates/ThreeHandling.vue
+++ b/src/views/work/components/templates/ThreeHandling.vue
@@ -1,32 +1,18 @@
 <template>
     <div class="flex between mb-20 card">
         <div class="flex gap-20">
-            <div
-                class="flex gap v-center"
-                v-for="item in data.coHandlingPolices"
-                :key="item.empNo"
-            >
+            <div class="flex gap v-center" v-for="item in data.coHandlingPolices" :key="item.empNo">
                 <icon name="local-icon-police" :size="20" />
                 <span>{{ item.name }}</span>
                 <span>{{ item.phone }}</span>
             </div>
         </div>
-        <el-button
-            type="primary"
-            size="small"
-            @click="coHandlingPoliceShow = true"
-            >编辑协办民警</el-button
-        >
+        <el-button type="primary" size="small" @click="coHandlingPoliceShow = true">编辑协办民警</el-button>
     </div>
     <header class="flex mb-20">
         <template v-for="(item, index) in threeSteps" :key="item.index">
-            <div
-                class="step flex center v-center"
-                :active="activeStep === item.index"
-                :completed="item.index < step"
-                :diabled="item.index > step"
-                @click="handleChangeTab(item.index)"
-            >
+            <div class="step flex center v-center" :active="activeStep === item.index" :completed="item.index < step"
+                :diabled="item.index > step" @click="handleChangeTab(item.index)">
                 <span class="mr-8">{{ index + 1 }}</span>
                 <span>{{ item.name }}</span>
             </div>
@@ -50,24 +36,15 @@
                 <el-col :span="12">
                     <el-form-item label="是否取得联系" prop="contactFlag">
                         <el-radio-group v-model="form.contactFlag">
-                            <el-radio :label="true" size="large"
-                                >取得联系</el-radio
-                            >
-                            <el-radio :label="false" size="large"
-                                >未取得联系</el-radio
-                            >
+                            <el-radio :label="true" size="large">取得联系</el-radio>
+                            <el-radio :label="false" size="large">未取得联系</el-radio>
                         </el-radio-group>
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="联系时间" prop="contactTime">
-                        <el-date-picker
-                            type="datetime"
-                            v-model="form.contactTime"
-                            value-format="YYYY-MM-DD HH:mm:ss"
-                            @change="handleTimeChange"
-                            style="width: 100%"
-                        />
+                        <el-date-picker type="datetime" v-model="form.contactTime" value-format="YYYY-MM-DD HH:mm:ss"
+                            @change="handleTimeChange" style="width: 100%" />
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -75,16 +52,11 @@
                 <el-col :span="12">
                     <el-form-item label="联系时长">
                         <span>{{ formatTimeText(form.contactDuration) }}</span>
-                        <span
-                            v-if="form.contactDuration"
-                            :danger="form.contactDuration > limitedTime"
-                            class="ml-4"
-                            >({{
-                                form.contactDuration > limitedTime
-                                    ? "已超时"
-                                    : "未超时"
-                            }})</span
-                        >
+                        <span v-if="form.contactDuration" :danger="form.contactDuration > limitedTime" class="ml-4">({{
+                form.contactDuration > limitedTime
+                    ? "已超时"
+                    : "未超时"
+            }})</span>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -92,16 +64,9 @@
         <template v-if="activeStep === 2">
             <el-row>
                 <el-form-item label="接访形式" prop="interviewType">
-                    <el-select
-                        v-model="form.interviewType"
-                        style="width: 450px"
-                    >
-                        <el-option
-                            v-for="item in dictData.interview_type"
-                            :key="item.value"
-                            :label="item.name"
-                            :value="item.value"
-                        />
+                    <el-select v-model="form.interviewType" style="width: 450px">
+                        <el-option v-for="item in dictData.interview_type" :key="item.value" :label="item.name"
+                            :value="item.value" />
                     </el-select>
                 </el-form-item>
             </el-row>
@@ -116,26 +81,13 @@
                 </el-col>
                 <el-col :span="12" prop="interviewPoliceEmpNo">
                     <el-form-item label="接访领导" prop="interviewPoliceEmpNo">
-                        <LeaderSelect
-                            v-model="form.interviewPoliceEmpNo"
-                            @change="handleSelect"
-                            leader-type="all"
-                        />
+                        <LeaderSelect v-model="form.interviewPoliceEmpNo" @change="handleSelect" leader-type="all" />
                     </el-form-item>
                 </el-col>
             </el-row>
             <el-row>
-                <el-form-item
-                    label="接访情况"
-                    prop="interviewDetails"
-                    style="width: 100%"
-                >
-                    <el-input
-                        type="textarea"
-                        v-model="form.interviewDetails"
-                        :rows="5"
-                        style="width: 100%"
-                    />
+                <el-form-item label="接访情况" prop="interviewDetails" style="width: 100%">
+                    <el-input type="textarea" v-model="form.interviewDetails" :rows="5" style="width: 100%" />
                 </el-form-item>
             </el-row>
             <el-row>
@@ -156,130 +108,73 @@
         </template>
         <template v-if="activeStep === 3">
             <el-row>
-                <el-form-item
-                    label="核办结果"
-                    prop="verifyDetails"
-                    style="width: 100%"
-                >
-                    <el-input
-                        type="textarea"
-                        v-model="form.verifyDetails"
-                        :rows="5"
-                        style="width: 100%"
-                    />
+                <el-form-item label="核办结果" prop="verifyDetails" style="width: 100%">
+                    <el-input type="textarea" v-model="form.verifyDetails" :rows="5" style="width: 100%" />
                 </el-form-item>
             </el-row>
             <el-row>
                 <el-form-item label="是否属实" prop="verifyIsTrue">
                     <el-radio-group v-model="form.verifyIsTrue">
-                        <el-radio
-                            v-for="item in dictData.verify_is_true"
-                            :key="item.name"
-                            :label="item.value"
-                            size="large"
-                            >{{ item.name }}</el-radio
-                        >
+                        <el-radio v-for="item in dictData.verify_is_true" :key="item.name" :label="item.value"
+                            size="large">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </el-row>
             <el-divider />
-            <div
-                v-if="
-                    form.verifyIsTrue === '属实' ||
-                    form.verifyIsTrue === '基本属实'
-                "
-            >
+            <div v-if="form.verifyIsTrue === '属实' ||
+                form.verifyIsTrue === '基本属实'
+                ">
                 <el-row>
                     <el-form-item label="被举报人">
                         <div>
-                            <div
-                                class="flex between gap mb-10"
-                                v-for="(item, index) in reportedPolices"
-                                :key="index"
-                            >
-                                <el-tree-select
-                                    v-model="item.deptId"
-                                    :data="depts"
-                                    clearable
-                                    filterable
-                                    node-key="id"
+                            <div class="flex between gap mb-10" v-for="(item, index) in reportedPolices" :key="index">
+                                <el-tree-select v-model="item.deptId" :data="depts" clearable filterable node-key="id"
                                     :props="{
-                                        value: 'id',
-                                        label: 'name',
-                                    }"
-                                    check-strictly
-                                    placeholder="请选择部门"
-                                    @change="handleChangeDept"
-                                />
-
-                                <el-select
-                                    v-model="item.empNo"
-                                    style="width: 280px"
-                                    @change="
-                                        (val) => handleChangePolice(val, index)
-                                    "
-                                >
-                                    <el-option
-                                        v-for="item in polices"
-                                        :key="item.id"
-                                        :value="item.empNo"
-                                        :label="item.name"
-                                    ></el-option
-                                ></el-select>
+                value: 'id',
+                label: 'name',
+            }" check-strictly placeholder="请选择部门" @change="handleChangeDept" />
+
+                                <el-select v-model="item.empNo" style="width: 280px" @change="(val) => handleChangePolice(val, index)
+                ">
+                                    <el-option v-for="item in polices" :key="item.id" :value="item.empNo"
+                                        :label="item.name"></el-option></el-select>
                                 <div style="font-size: 12px; min-width: 200px">
                                     <span v-if="item.empNo">
                                         <span class="mr-4">警号</span>
                                         <span class="mr-4">{{
-                                            item.empNo
-                                        }}</span>
+                item.empNo
+            }}</span>
                                     </span>
                                     <span v-if="item.gender">
                                         <span class="mr-4">性别</span>
                                         <span class="mr-4">{{
-                                            item.gender
-                                        }}</span>
+                item.gender
+            }}</span>
                                     </span>
                                     <span v-if="item.birthday">
                                         <span class="mr-4">出生年月</span>
                                         <span>{{ item.birthday }}</span>
                                     </span>
                                 </div>
-                                <el-button
-                                    type="danger"
-                                    plain
-                                    @click="reportedPolices.splice(index, 1)"
-                                    >删除</el-button
-                                >
+                                <el-button type="danger" plain @click="reportedPolices.splice(index, 1)">删除</el-button>
                             </div>
                         </div>
                     </el-form-item>
                 </el-row>
                 <div class="text-center">
-                    <el-button
-                        type="primary"
-                        plain
-                        @click="reportedPolices.push({})"
-                        >添加被举报人</el-button
-                    >
+                    <el-button type="primary" plain @click="reportedPolices.push({})">添加被举报人</el-button>
                 </div>
                 <el-divider />
                 <el-row>
                     <el-form-item label="查证属实问题" prop="verifyProblem">
                         <el-checkbox-group v-model="form.verifyProblem">
-                            <el-checkbox
-                                v-for="item in dictData.verify_problem"
-                                :key="item.value"
-                                :label="item.name"
-                                :value="item.value"
-                            />
+                            <el-checkbox v-for="item in dictData.verify_problem" :key="item.value" :label="item.name"
+                                :value="item.value" />
                         </el-checkbox-group>
                     </el-form-item>
                 </el-row>
                 <el-row>
-                    <el-form-item
-                        label="是否需要问责"
-                        prop="verifyNeedAccountability"
-                    >
+                    <el-form-item label="是否需要问责" prop="verifyNeedAccountability">
                         <el-radio-group v-model="form.verifyNeedAccountability">
                             <el-radio :label="true" size="large">是</el-radio>
                             <el-radio :label="false" size="large">否</el-radio>
@@ -289,21 +184,14 @@
                 <el-row v-if="form.verifyNeedAccountability">
                     <el-form-item label="责任追究">
                         <el-checkbox-group v-model="form.verifyPunish">
-                            <el-checkbox
-                                v-for="item in dictData.verify_punish"
-                                :key="item.value"
-                                :label="item.name"
-                                :value="item.value"
-                            />
+                            <el-checkbox v-for="item in dictData.verify_punish" :key="item.value" :label="item.name"
+                                :value="item.value" />
                         </el-checkbox-group>
                     </el-form-item>
                 </el-row>
             </div>
             <el-row>
-                <el-form-item
-                    label="群众反应事项解决情况"
-                    prop="verifyIsResolved"
-                >
+                <el-form-item label="群众反应事项解决情况" prop="verifyIsResolved">
                     <el-radio-group v-model="form.verifyIsResolved">
                         <el-radio :label="true" size="large">已解决</el-radio>
                         <el-radio :label="false" size="large">未解决</el-radio>
@@ -313,25 +201,15 @@
             <el-row>
                 <el-form-item label="办理反馈情况" prop="verifyFeedback">
                     <el-radio-group v-model="form.verifyFeedback">
-                        <el-radio
-                            v-for="item in dictData.satisfaction_status"
-                            :key="item.name"
-                            :label="item.value"
-                            size="large"
-                            >{{ item.name }}</el-radio
-                        >
+                        <el-radio v-for="item in dictData.satisfaction_status" :key="item.name" :label="item.value"
+                            size="large">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
             </el-row>
             <el-row>
                 <el-col :span="12">
-                    <el-form-item
-                        label="回访人姓名"
-                        prop="verifyFollowupPolice"
-                    >
-                        <police-select
-                            v-model:data="form.verifyFollowupPolice"
-                        />
+                    <el-form-item label="回访人姓名" prop="verifyFollowupPolice">
+                        <police-select v-model:data="form.verifyFollowupPolice" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
@@ -357,18 +235,10 @@
                             请上传《核查办理报告》、《处理反馈表》及相关的法律文件（比如：受案回执、立案决定书、不予立案决定书等）和佐证材料（比如：谈话笔录、调解协议等）。
                         </div>
                         <div>
-                            <a
-                                :href="`${VITE_API_URL}/api/file/download/template/《核查办理报告》.doc`"
-                                target="_blank"
-                                class="link"
-                                >《核查办理报告》 下载</a
-                            >
-                            <a
-                                :href="`${VITE_API_URL}/api/file/download/template/《处理反馈表》.doc`"
-                                target="_blank"
-                                class="link"
-                                >《处理反馈表》 下载</a
-                            >
+                            <a :href="`${VITE_API_URL}/api/file/download/template/《核查办理报告》.doc`" target="_blank"
+                                class="link">《核查办理报告》 下载</a>
+                            <a :href="`${VITE_API_URL}/api/file/download/template/《处理反馈表》.doc`" target="_blank"
+                                class="link">《处理反馈表》 下载</a>
                         </div>
                     </el-form-item>
                 </el-col>
@@ -376,10 +246,7 @@
         </template>
     </el-form>
 
-    <CoHandlingPoliceEdit
-        v-model:show="coHandlingPoliceShow"
-        v-model:data="data.coHandlingPolices"
-    />
+    <CoHandlingPoliceEdit v-model:show="coHandlingPoliceShow" v-model:data="data.coHandlingPolices" />
 </template>
 <script setup>
 import CoHandlingPoliceEdit from "./CoHandlingPoliceEdit.vue";
@@ -559,9 +426,21 @@ watch(
     () => {
         formRef.value.resetFields();
         initForm()
+        // 每次改变信件需要重新计算步骤
+        resetStep()
     }
 );
 
+const resetStep = () => {
+    if (props.mail.flowKey === "interview_writer") {
+        step.value = 2;
+    }
+    else if (props.mail.flowKey === "verify") {
+        step.value = 3;
+    } else
+        step.value = 1;
+};
+
 watch(
     () => props.mail.flowKey,
     () => {
@@ -716,18 +595,22 @@ defineExpose({
 
 .step {
     width: 100%;
+
     &[active="true"] {
         --setp-background-color: #edf0ff;
         --setp-border-color: rgba(195, 202, 245, 1);
         --setp-font-color: #162582;
     }
+
     &[completed="true"] {
         --setp-font-color: #666;
+
         &::after {
             --setp-border-color: #8191f1;
             background-color: var(--primary-color);
         }
     }
+
     &[diabled="false"] {
         &:hover {
             cursor: pointer;