refactor(formalities): 优化手续办理清单模板页面布局

- 调整了多个组件的样式和布局，包括表格、表单、按钮等
- 优化了部分代码结构，提高了代码可读性和维护性
- 添加了文件数量徽章，增强了用户界面的交互性

src/views/formalities/formalitiesAreConsolidated/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+      :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
@@ -11,25 +12,15 @@
               <el-input v-model="queryParams.formalitiesId" placeholder="请输入手续办理清单模板id" clearable @keyup.enter="handleQuery" />
             </el-form-item> -->
             <el-form-item label="计划开始时间" prop="planTheStartTime">
-              <el-date-picker
-                clearable
-                v-model="queryParams.planTheStartTime"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择计划开始时间"
-              />
+              <el-date-picker clearable v-model="queryParams.planTheStartTime" type="date" value-format="YYYY-MM-DD"
+                placeholder="请选择计划开始时间" />
             </el-form-item>
             <el-form-item label="负责人" prop="head">
               <el-input v-model="queryParams.head" placeholder="请输入负责人" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="实际完成时间" prop="actualCompletionTime">
-              <el-date-picker
-                clearable
-                v-model="queryParams.actualCompletionTime"
-                type="date"
-                value-format="YYYY-MM-DD"
-                placeholder="请选择实际完成时间"
-              />
+              <el-date-picker clearable v-model="queryParams.actualCompletionTime" type="date" value-format="YYYY-MM-DD"
+                placeholder="请选择实际完成时间" />
             </el-form-item>
             <!-- <el-form-item label="手续材料" prop="formalitiesUrl">
               <el-input v-model="queryParams.formalitiesUrl" placeholder="请输入手续材料" clearable @keyup.enter="handleQuery" />
@@ -47,19 +38,21 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['formalities:formalitiesAreConsolidated:getTree']"
-              >新增</el-button
-            >
-            <span style="margin-left: 10px"
-              ><el-tooltip class="box-item" effect="dark" content="从原有模板列表选择新增" placement="top">
-                <el-icon color="#409efc"><WarningFilled /></el-icon> </el-tooltip
-            ></span>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()"
+              v-hasPermi="['formalities:formalitiesAreConsolidated:getTree']">新增</el-button>
+            <span style="margin-left: 10px"><el-tooltip class="box-item" effect="dark" content="从原有模板列表选择新增"
+                placement="top">
+                <el-icon color="#409efc">
+                  <WarningFilled />
+                </el-icon> </el-tooltip></span>
           </el-col>
           <el-col :span="1.5" v-hasPermi="['formalities:listOfFormalities:list']">
             <el-button type="primary" plain icon="Plus" @click="addTemplate()">新增数据</el-button>
             <span style="margin-left: 10px">
               <el-tooltip class="box-item" effect="dark" content="创建新模板并添加数据" placement="top">
-                <el-icon color="#409efc"><WarningFilled /></el-icon>
+                <el-icon color="#409efc">
+                  <WarningFilled />
+                </el-icon>
               </el-tooltip>
             </span>
           </el-col>
@@ -78,7 +71,8 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" :data="formalitiesAreConsolidatedList" @selection-change="handleSelectionChange" row-key="id" default-expand-all>
+      <el-table v-loading="loading" :data="formalitiesAreConsolidatedList" @selection-change="handleSelectionChange"
+        row-key="id" default-expand-all>
         <el-table-column type="selection" width="55" align="center" />
         <!-- <el-table-column label="手续办理清单模板父级" align="center" prop="formalitiesPname" /> -->
         <el-table-column label="手续办理清单" align="left" prop="formalitiesName" />
@@ -101,51 +95,52 @@
         <el-table-column label="办理状态" align="center" prop="processingStatus" />
         <el-table-column label="手续材料" align="center" prop="formalitiesUrl" width="180">
           <template #default="scope">
-            <el-link type="primary" :underline="false" @click="handlePreview(scope.row)" target="_blank" v-if="scope.row.formalitiesPid"
-              >查看</el-link
-            >
+            <div style="display: flex; justify-content: center; align-items: center;">
+
+
+              <div>
+                <el-link type="primary" :underline="false" @click="handlePreview(scope.row)" target="_blank"
+                  v-if="scope.row.formalitiesPid">查看</el-link>
+              </div>
+              <div>
+                <el-badge v-if="scope.row.fileCount" :value="scope.row.fileCount" class="item" type="danger">
+                </el-badge>
+              </div>
+            </div>
+
+
           </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <div v-if="scope.row.formalitiesPid">
-              <el-button
-                link
-                type="primary"
-                icon="Edit"
-                v-if="scope.row.processingStatus != '已完成'"
+              <el-button link type="primary" icon="Edit" v-if="scope.row.processingStatus != '已完成'"
                 @click="handleUpdate(scope.row)"
-                v-hasPermi="['formalities:formalitiesAreConsolidated:edit']"
-                >修改</el-button
-              >
-              <el-button link type="primary" icon="Upload" v-if="scope.row.processingStatus != '已完成'" @click="handleUpload(scope.row)"
-                >上传</el-button
-              >
-              <el-button
-                link
-                type="primary"
-                icon="EditPen"
-                @click="handleUpdateStatus(scope.row)"
-                v-hasPermi="['formalities:formalitiesAreConsolidated:edit']"
-                >修改状态</el-button
-              >
+                v-hasPermi="['formalities:formalitiesAreConsolidated:edit']">修改</el-button>
+              <el-button link type="primary" icon="Upload" v-if="scope.row.processingStatus != '已完成'"
+                @click="handleUpload(scope.row)">上传</el-button>
+              <el-button link type="primary" icon="EditPen" @click="handleUpdateStatus(scope.row)"
+                v-hasPermi="['formalities:formalitiesAreConsolidated:edit']">修改状态</el-button>
             </div>
           </template>
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改合规性手续合账对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="formalitiesAreConsolidatedFormRef" :model="form" :rules="rules" label-width="160px">
         <el-form-item label="计划开始时间" prop="planTheStartTime">
-          <el-date-picker clearable v-model="form.planTheStartTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划开始时间">
+          <el-date-picker clearable v-model="form.planTheStartTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择计划开始时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="计划完成时间" prop="planTheStartTime">
-          <el-date-picker clearable v-model="form.planTheEndTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择计划完成时间">
+          <el-date-picker clearable v-model="form.planTheEndTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择计划完成时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="负责人" prop="head">
@@ -167,7 +162,8 @@
       <el-table :data="fileList" style="width: 100%" border v-loading="fileLoading">
         <el-table-column prop="fileName" label="文件" align="center">
           <template #default="scope">
-            <el-link :key="scope.row.annexUrl" :href="scope.row.annexUrl" target="_blank" type="primary" :underline="false">
+            <el-link :key="scope.row.annexUrl" :href="scope.row.annexUrl" target="_blank" type="primary"
+              :underline="false">
               {{ scope.row.fileName || '查看文件' }}
             </el-link>
           </template>
@@ -178,13 +174,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination
-        v-show="fileTotal > 0"
-        :total="fileTotal"
-        v-model:page="fileParams.pageNum"
-        v-model:limit="fileParams.pageSize"
-        @pagination="getFileList"
-      />
+      <pagination v-show="fileTotal > 0" :total="fileTotal" v-model:page="fileParams.pageNum"
+        v-model:limit="fileParams.pageSize" @pagination="getFileList" />
       <template #footer>
         <span>
           <el-button type="primary" @click="viewVisible = false">关闭</el-button>
@@ -194,18 +185,9 @@
     <!-- 上传文件对话框 -->
     <el-dialog draggable title="上传文件" v-model="fileVisible" width="450">
       <el-form-item label="上传文件" prop="processingStatus">
-        <file-upload
-          v-model="file"
-          ref="uploadRef"
-          uploadUrl="/formalities/formalitiesAnnex"
-          v-hasPermi="['formalities:formalitiesAnnex:add']"
-          :data="{ formalitiesId: form.id }"
-          :fileType="['pdf']"
-          :auto-upload="false"
-          showFileList
-          method="put"
-          :onUploadSuccess="handleUploadSuccess"
-        />
+        <file-upload v-model="file" ref="uploadRef" uploadUrl="/formalities/formalitiesAnnex"
+          v-hasPermi="['formalities:formalitiesAnnex:add']" :data="{ formalitiesId: form.id }" :fileType="['pdf']"
+          :auto-upload="false" showFileList method="put" :onUploadSuccess="handleUploadSuccess" />
       </el-form-item>
       <template #footer>
         <span>
@@ -233,21 +215,19 @@
     </el-dialog>
     <el-dialog title="新增合规性手续合账" v-model="templateVisbile" width="450">
       <el-form-item label="合规性手续模板">
-        <el-cascader
-          v-model="tempValue"
-          :options="tempTreeList"
-          :props="{
-            multiple: true,
-            value: 'id',
-            label: 'name',
-            disabled: (node: any) => {
-              return (node.pid == 0 && !node.children.length) || node.status == 1; // 有 parent 的是二级，没有 parent 的是一级，禁用一级
-            }
-          }"
-        />
+        <el-cascader v-model="tempValue" :options="tempTreeList" :props="{
+          multiple: true,
+          value: 'id',
+          label: 'name',
+          disabled: (node: any) => {
+            return (node.pid == 0 && !node.children.length) || node.status == 1; // 有 parent 的是二级，没有 parent 的是一级，禁用一级
+          }
+        }" />
         <div style="margin-left: 10px; display: flex; justify-content: center; align-items: center">
           <el-tooltip class="box-item" effect="dark" content="列表上已选择得模版不可再选" placement="top">
-            <el-icon><WarningFilled /></el-icon>
+            <el-icon>
+              <WarningFilled />
+            </el-icon>
           </el-tooltip>
         </div>
       </el-form-item>
@@ -268,7 +248,8 @@
             <el-option v-for="item in listOfFormalitiesList" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="名称" prop="formalitiesName" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
+        <el-form-item label="名称" prop="formalitiesName"
+          :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
           <el-input v-model="formTemplate.formalitiesName" placeholder="请输入名称" />
         </el-form-item>
       </el-form>