网页端：修改用车审批、设备审批、借款审批和职称记录的样式

oa-ui/src/views/flowable/form/finance/borrowForm.vue

@@ -10,296 +10,352 @@
             <return-comment :taskForm="taskForm" @isReturn="isReturn"></return-comment>
           </el-alert>
         </div>
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-          <el-row :gutter="20">
-            <el-col :md="6" :span="24">
-              <el-form-item label="申请人" prop="user.nickName">
-                {{ form.applierUser ? form.applierUser.nickName : form.user.nickName }}
-              </el-form-item>
-            </el-col>
-            <el-col :md="6" :span="24">
-              <el-form-item label="申请部门" prop="dept.deptName">
-                {{ form.dept.deptName }}
-              </el-form-item>
-            </el-col>
-            <el-col :md="6" :span="24">
-              <el-form-item label="申请时间" prop="date">
-                <el-date-picker style="width:140px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期" disabled>
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="借款类型" prop="borrowUsage" v-if="taskForm.procDefName == '借款审批'">
-            <el-radio-group v-model="form.borrowUsage" @change="hanldeChangeType" :disabled="taskName != '借款申请'">
-              <el-radio label="0">项目借款</el-radio>
-              <el-radio label="1">非项目借款</el-radio>
-              <el-radio label="2">工会借款</el-radio>
-              <el-radio label="3">党委借款</el-radio>
-              <el-radio label="4">团委借款</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="借款事由" prop="applyReason" v-if="taskForm.procDefName == '借款审批' && !isProject">
-            <el-input v-model="form.applyReason" :disabled="taskName != '借款申请'"></el-input>
-          </el-form-item>
-          <el-form-item label="项目编号" prop="projectId" v-if="taskForm.procDefName == '借款审批' && isProject">
-            <el-button type="primary" size="mini" @click="openProject = true" v-if="taskName == '借款申请'">选择项目</el-button>
-            <el-descriptions border v-if="isSelect" style="margin-top: .125rem;" :column="1">
-              <el-descriptions-item label="项目编号" label-class-name="my-label">{{ chooseProject.projectNumber
-              }}</el-descriptions-item>
-              <el-descriptions-item label="项目名称" label-class-name="my-label">{{ chooseProject.projectName
-              }}</el-descriptions-item>
-              <el-descriptions-item label="项目负责人" label-class-name="my-label">{{ chooseProject.projectLeaderUser ?
-                chooseProject.projectLeaderUser.nickName : ''
-              }}</el-descriptions-item>
-              <el-descriptions-item label="承担部门" label-class-name="my-label">
-                <el-tag size="small">{{ chooseProject.undertakingDeptName }}</el-tag>
-              </el-descriptions-item>
-              <el-descriptions-item label="项目类型" label-class-name="my-label">{{ chooseProject.projectType
-              }}</el-descriptions-item>
-            </el-descriptions>
-          </el-form-item>
-          <!-- <el-form-item label="借款明细"> -->
-          <table border="1" class="table">
-            <tr style="height:30px;font-weight:bold;font-family:'puhuiti'">
-              <td :colspan="8">借款明细</td>
-            </tr>
+        <el-form ref="form" :model="form" :rules="rules" class="borrow-table-form">
+          <div class="form-table-wrap">
+          <table class="form-table">
             <tr>
-              <td style="width:50px;">序号</td>
-              <td style="min-width:150px">开支项目</td>
-              <td>单位</td>
-              <td>单价</td>
-              <td>数量</td>
-              <td>申请金额</td>
-              <!-- <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">项目管理部校核金额</td> -->
-              <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">分管领导审核金额</td>
-              <td>操作</td>
-            </tr>
-            <tr v-for="(detail, index) in detailList" :key="index">
-              <td>
-                {{ index + 1 }}
-              </td>
-              <td>
-                <el-select v-model="detail.borrowItem" placeholder="请选择开支项" clearable @change="handleExpenseChange"
-                  style="width: 100%;" :disabled="taskName != '借款申请'" v-if="form.borrowUsage == 0">
-                  <el-option v-for="dict in dict.type.cmc_borrow_expense" clearable :key="dict.value" :label="dict.label"
-                    :value="dict.value" />
-                  <!-- <el-option label="+新增更多开支项..." value="new_expense" /> -->
-                </el-select>
-                <el-autocomplete v-model="detail.borrowItem" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
-                  :disabled="taskName != '借款申请'" v-else></el-autocomplete>
-
+              <td colspan="2" class="label-cell">申请人</td>
+              <td colspan="2">
+                <el-form-item prop="user.nickName" class="table-form-item">
+                  {{ form.applierUser ? form.applierUser.nickName : form.user.nickName }}
+                </el-form-item>
               </td>
-              <td>
-                <el-input v-model="detail.unit" :disabled="taskName != '借款申请'"></el-input>
+              <td colspan="2" class="label-cell">申请部门</td>
+              <td colspan="2">
+                <el-form-item prop="dept.deptName" class="table-form-item">
+                  {{ form.dept.deptName }}
+                </el-form-item>
               </td>
-              <td>
-                <el-input-number :controls="false" style="width:100%" v-model="detail.price"
-                  @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+              <td colspan="2" class="label-cell">申请日期</td>
+              <td colspan="2">
+                <el-form-item prop="date" class="table-form-item">
+                  <el-date-picker style="width: 100%;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
+                    placeholder="选择日期" disabled>
+                  </el-date-picker>
+                </el-form-item>
               </td>
-              <td>
-                <el-input-number :controls="false" style="width:100%" v-model="detail.quantity"
-                  @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+            </tr>
+
+            <template v-if="taskForm.procDefName == '借款审批'">
+              <tr>
+                <td colspan="2" class="label-cell">借款类型</td>
+                <td colspan="10">
+                  <el-form-item prop="borrowUsage" class="table-form-item">
+                    <el-radio-group v-model="form.borrowUsage" @change="hanldeChangeType" :disabled="taskName != '借款申请'">
+                      <el-radio label="0">项目借款</el-radio>
+                      <el-radio label="1">非项目借款</el-radio>
+                      <el-radio label="2">工会借款</el-radio>
+                      <el-radio label="3">党委借款</el-radio>
+                      <el-radio label="4">团委借款</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr v-if="!isProject">
+                <td colspan="2" class="label-cell">借款事由</td>
+                <td colspan="10">
+                  <el-form-item prop="applyReason" class="table-form-item">
+                    <el-input v-model="form.applyReason" :disabled="taskName != '借款申请'"></el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              <template v-if="isProject">
+                <tr>
+                  <td colspan="2" class="label-cell">项目信息</td>
+                  <td colspan="10">
+                    <el-button type="primary" size="mini" @click="openProject = true" v-if="taskName == '借款申请'">选择项目</el-button>
+                    <template v-if="isSelect">
+                      <table class="inner-table">
+                        <tr>
+                          <td class="label-cell">项目编号</td>
+                          <td>{{ chooseProject.projectNumber }}</td>
+                          <td class="label-cell">项目名称</td>
+                          <td>{{ chooseProject.projectName }}</td>
+                        </tr>
+                        <tr>
+                          <td class="label-cell">项目负责人</td>
+                          <td>{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : '' }}</td>
+                          <td class="label-cell">承担部门</td>
+                          <td>{{ chooseProject.undertakingDeptName }}</td>
+                        </tr>
+                        <tr>
+                          <td class="label-cell">项目类型</td>
+                          <td colspan="3">{{ chooseProject.projectType }}</td>
+                        </tr>
+                      </table>
+                    </template>
+                    <el-form-item prop="projectId" class="table-form-item" style="display: none;"></el-form-item>
+                  </td>
+                </tr>
+              </template>
+            </template>
+
+            <tr>
+              <td colspan="2" class="label-cell">借款明细</td>
+              <td colspan="10">
+                <table class="inner-table detail-inner-table">
+                  <tr>
+                    <td class="label-cell" style="width: 50px;">序号</td>
+                    <td class="label-cell" style="min-width: 150px;">开支项目</td>
+                    <td class="label-cell">单位</td>
+                    <td class="label-cell">单价</td>
+                    <td class="label-cell">数量</td>
+                    <td class="label-cell">申请金额</td>
+                    <td class="label-cell" v-if="form.borrowUsage == 0 || form.borrowUsage == 1">分管领导审核金额</td>
+                    <td class="label-cell">操作</td>
+                  </tr>
+                  <tr v-for="(detail, index) in detailList" :key="index">
+                    <td>{{ index + 1 }}</td>
+                    <td>
+                      <el-select v-model="detail.borrowItem" placeholder="请选择开支项" clearable @change="handleExpenseChange"
+                        style="width: 100%;" :disabled="taskName != '借款申请'" v-if="form.borrowUsage == 0">
+                        <el-option v-for="dict in dict.type.cmc_borrow_expense" clearable :key="dict.value" :label="dict.label"
+                          :value="dict.value" />
+                      </el-select>
+                      <el-autocomplete v-model="detail.borrowItem" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
+                        style="width: 100%;" :disabled="taskName != '借款申请'" v-else></el-autocomplete>
+                    </td>
+                    <td>
+                      <el-input v-model="detail.unit" :disabled="taskName != '借款申请'"></el-input>
+                    </td>
+                    <td>
+                      <el-input-number :controls="false" style="width: 100%;" v-model="detail.price"
+                        @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+                    </td>
+                    <td>
+                      <el-input-number :controls="false" style="width: 100%;" v-model="detail.quantity"
+                        @change="calculateAmount(detail)" :disabled="taskName != '借款申请'"></el-input-number>
+                    </td>
+                    <td>
+                      <el-input v-model="detail.applyAmount" :disabled="taskName != '借款申请'"></el-input>
+                    </td>
+                    <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
+                      <el-input v-model="detail.managerAmount" :disabled="taskName != '分管审核' && taskName != '总经理审核'"
+                        @blur="calculateManagerAmount(detail)"></el-input>
+                    </td>
+                    <td>
+                      <el-button type="text" style="color: #F56C6C;" icon="el-icon-delete" size="mini"
+                        :disabled="taskName != '借款申请'" @click="deleDetailItem(index)">删除</el-button>
+                    </td>
+                  </tr>
+                </table>
+                <el-button class="mt10" icon="el-icon-plus" size="mini" @click="addDetailList()" type="primary" plain
+                  :disabled="taskName != '借款申请'">添加明细行</el-button>
               </td>
-              <td>
-                <el-input v-model="detail.applyAmount" :disabled="taskName != '借款申请'"></el-input>
+            </tr>
+
+            <tr v-if="isSelect" class="budget-row">
+              <td colspan="2" class="label-cell">最大借款金额</td>
+              <td colspan="2" class="budget-value-cell">
+                <div class="budget-amount">
+                  <span class="amount-num">{{ siteExpenses.toFixed(2) }}</span>
+                  <span class="amount-cn">大写：{{ formatNumberWithWan(siteExpenses) }}</span>
+                </div>
+                <el-button type="text" size="mini" class="budget-link-btn" @click="openBudget = true"
+                  v-hasPermi="['oa:budget:list']">查看预算</el-button>
               </td>
-              <td v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
-                <el-input v-model="detail.managerAmount" :disabled="taskName != '分管审核' && taskName != '总经理审核'"
-                  @blur="calculateManagerAmount(detail)"></el-input>
+              <td colspan="2" class="label-cell">已申请借款</td>
+              <td colspan="2" class="budget-value-cell">
+                <div class="budget-amount is-danger">
+                  <span class="amount-num">{{ hasBorrow.toFixed(2) }}</span>
+                  <span class="amount-cn">大写：{{ formatNumberWithWan(hasBorrow) }}</span>
+                </div>
+                <el-button type="text" size="mini" class="budget-link-btn" @click="openBorrow = true">查看历史借款</el-button>
               </td>
-              <td>
-                <el-button type="text" style="color:#F56C6C" icon="el-icon-delete" size="mini" circle
-                  :disabled="taskName != '借款申请'" @click="deleDetailItem(index)">删除行</el-button>
+              <td colspan="2" class="label-cell">可用借款</td>
+              <td colspan="2" class="budget-value-cell">
+                <div class="budget-amount is-success">
+                  <span class="amount-num">{{ (siteExpenses - hasBorrow).toFixed(2) }}</span>
+                  <span class="amount-cn">大写：{{ formatNumberWithWan((siteExpenses - hasBorrow)) }}</span>
+                </div>
               </td>
             </tr>
-          </table>
-          <el-button icon="el-icon-plus" size="mini" @click="addDetailList()" type="primary" plain
-            :disabled="taskName != '借款申请'"></el-button>
-
-          <el-form-item label="最大借款金额" v-if="isSelect">
-            <el-tag>
-              <span class="low-money">{{ siteExpenses.toFixed(2) }}</span>
-              <span class="up-money">（大写：{{ formatNumberWithWan(siteExpenses) }}）</span>
-            </el-tag>
-            <el-button type="primary" size="mini" @click="openBudget = true"
-              v-hasPermi="['oa:budget:list']">查看预算</el-button>
-          </el-form-item>
-          <el-form-item label="已申请借款" v-if="isSelect">
-            <el-tag type="danger">
-              <span class="low-money">{{ hasBorrow.toFixed(2) }}</span>
-              <span class="up-money">（大写：{{ formatNumberWithWan(hasBorrow) }}）</span>
-            </el-tag>
-            <el-button type="primary" size="mini" @click="openBorrow = true">查看历史借款</el-button>
-          </el-form-item>
-          <el-form-item label="可用借款" v-if="isSelect">
-            <el-tag type="success">
-              <span class="low-money">{{ (siteExpenses - hasBorrow).toFixed(2) }}</span>
-              <span class="up-money">（大写：{{ formatNumberWithWan((siteExpenses - hasBorrow)) }}）</span>
-            </el-tag>
-          </el-form-item>
 
-          <el-row :gutter="20">
-            <el-col :span="12" :xs="24">
-              <el-form-item label="申请金额" prop="applyAmount">
-                <el-input v-model="form.applyAmount" placeholder="请输入申请金额" :disabled="taskName != '借款申请'" />
-                <span style="color:#E74C3C" v-if="exceed && form.borrowUsage == 0">超过预算金额：{{ getMoreAmount('0')
-                }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" :xs="24">
-              <el-form-item label="核准金额" prop="managerAmount">
-                <el-input v-model="form.managerAmount" placeholder="请输入核准金额"
-                  :disabled="taskName != '分管审核' && taskName != '总经理审核' && taskName != '党工团审核'" />
-                <span style="color:#E74C3C" v-if="exceed && form.managerAmount && form.borrowUsage == 0">超过预算金额：{{
-                  getMoreAmount('1') }}</span>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="申请人说明" prop="remark">
-            <el-input type="textarea" :rows="4" v-model="form.remark" placeholder="请输入申请人说明"
-              :disabled="taskName != '借款申请'" />
-          </el-form-item>
-          <el-form-item label="附件上传" prop="borrowDocument">
-            <FileUpload v-if="form.borrowDocument == null || form.borrowDocument == ''" :disabled="taskName != '借款申请'"
-              :limit="1" :filePathName="'借款/申请附件'" :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']"
-              @input="getBorrowPath"></FileUpload>
-            <div v-if="form.borrowDocument">
-              <!-- <file-item :document="form.borrowDocument"></file-item> -->
-              <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.borrowDocument}`)">
-                {{ getFileName(form.borrowDocument) }}
-              </el-link>
-              <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.borrowDocument}`"
-                :underline="false" target="_blank">
-                <span class="el-icon-download">下载文件</span>
-              </el-link>
-              <FileUpload v-if="taskName == '借款申请'" :limit="1" :filePathName="'借款/申请附件'"
-                :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']" @input="getBorrowPath"></FileUpload>
-            </div>
-          </el-form-item>
-          <el-divider></el-divider>
-          <!-- 非党工团审核 -->
-          <div v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
-            <el-form-item label="部门负责人意见" prop="deptComment" label-width="150px">
-              <el-input type="textarea" v-model="form.deptComment" placeholder="请输入部门负责人意见" :disabled="taskName != '部门审核'"
-                :autosize="{ minRows: 4 }" />
-            </el-form-item>
-            <el-row>
-              <el-col :span="6" :xs="24" :offset="12">
-                <el-form-item label="签名：" label-width="120px" v-if="showFormItem('部门审核')">
-                  <span class="auditor"> {{ form.deptUser ? form.deptUser.nickName : deptUser }} </span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="日期：" label-width="120px" v-if="showFormItem('部门审核')">
-                  <span> {{ form.deptTime ? form.deptTime : deptTime }} </span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-form-item label="分管领导审核意见" prop="managerComment" label-width="150px">
-              <el-input type="textarea" v-model="form.managerComment" placeholder="请输入分管领导审核意见"
-                :disabled="taskName != '分管审核'" :autosize="{ minRows: 4 }" />
-            </el-form-item>
-            <el-row>
-              <el-col :span="6" :xs="24" :offset="12">
-                <el-form-item label="签名：" label-width="120px" v-if="showFormItem('分管审核')">
-                  <span class="auditor"> {{ form.managerUser ? form.managerUser.nickName : managerUser }} </span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="日期：" label-width="120px" v-if="showFormItem('分管审核')">
-                  <span> {{ form.managerTime ? form.managerTime : managerTime }} </span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-form-item label="总经理审批意见" prop="zjlComment" label-width="150px">
-              <el-input type="textarea" v-model="form.zjlComment" placeholder="请输入总经理审批意见" :disabled="taskName != '总经理审核'"
-                :autosize="{ minRows: 4 }" />
-            </el-form-item>
-            <el-row>
-              <el-col :span="6" :xs="24" :offset="12">
-                <el-form-item label="签名：" label-width="120px" v-if="showFormItem('总经理审核')">
-                  <span class="auditor"> {{ form.zjlUser ? form.zjlUser.nickName : zjlUser }} </span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="日期：" label-width="120px" v-if="showFormItem('总经理审核')">
-                  <span> {{ form.zjlTime ? form.zjlTime : zjlTime }} </span>
+            <tr>
+              <td colspan="2" class="label-cell">申请金额</td>
+              <td colspan="4">
+                <el-form-item prop="applyAmount" class="table-form-item">
+                  <el-input v-model="form.applyAmount" placeholder="请输入申请金额" :disabled="taskName != '借款申请'" />
+                  <span class="exceed-tip" v-if="exceed && form.borrowUsage == 0">超过预算金额：{{ getMoreAmount('0') }}</span>
                 </el-form-item>
-              </el-col>
-            </el-row>
-            <el-form-item label="董事长批准意见" prop="dszComment" label-width="150px" v-if="exceed && !form.cwUser">
-              <el-input type="textarea" v-model="form.dszComment" placeholder="请输入董事长批准意见" :disabled="taskName != '董事长批准'"
-                :autosize="{ minRows: 4 }" />
-            </el-form-item>
-            <el-row v-if="exceed && !form.cwUser">
-              <el-col :span="6" :xs="24" :offset="12">
-                <el-form-item label="签名：" label-width="120px" v-if="showFormItem('董事长批准')">
-                  <span class="auditor"> {{ form.dszUser ? form.dszUser.nickName : dszUser }} </span>
+              </td>
+              <td colspan="2" class="label-cell">核准金额</td>
+              <td colspan="4">
+                <el-form-item prop="managerAmount" class="table-form-item">
+                  <el-input v-model="form.managerAmount" placeholder="请输入核准金额"
+                    :disabled="taskName != '分管审核' && taskName != '总经理审核' && taskName != '党工团审核'" />
+                  <span class="exceed-tip" v-if="exceed && form.managerAmount && form.borrowUsage == 0">超过预算金额：{{
+                    getMoreAmount('1') }}</span>
                 </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="日期：" label-width="120px" v-if="showFormItem('董事长批准')">
-                  <span> {{ form.dszTime ? form.dszTime : dszTime }} </span>
+              </td>
+            </tr>
+
+            <tr>
+              <td colspan="2" class="label-cell">申请人说明</td>
+              <td colspan="10">
+                <el-form-item prop="remark" class="table-form-item">
+                  <el-input type="textarea" :rows="4" v-model="form.remark" placeholder="请输入申请人说明"
+                    :disabled="taskName != '借款申请'" />
                 </el-form-item>
-              </el-col>
-            </el-row>
-          </div>
-          <!-- 党工团审核 -->
-          <div v-if="form.borrowUsage != 0 && form.borrowUsage != 1">
-            <el-form-item :label="dgtLabel" prop="unionComment">
-              <el-input type="textarea" v-model="form.unionComment" placeholder="请输入审核意见"
-                :disabled="taskName != '党工团审核'" />
-            </el-form-item>
-            <el-row>
-              <el-col :span="6" :xs="24" :offset="12">
-                <el-form-item label="签名：" label-width="120px" v-if="showFormItem('党工团审核')">
-                  <span class="auditor"> {{ form.unionUser ? form.unionUser.nickName : unionUser }} </span>
+              </td>
+            </tr>
+
+            <tr>
+              <td colspan="2" class="label-cell">附件上传</td>
+              <td colspan="10">
+                <el-form-item prop="borrowDocument" class="table-form-item">
+                  <FileUpload v-if="form.borrowDocument == null || form.borrowDocument == ''" :disabled="taskName != '借款申请'"
+                    :limit="1" :filePathName="'借款/申请附件'" :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']"
+                    @input="getBorrowPath"></FileUpload>
+                  <div v-if="form.borrowDocument">
+                    <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.borrowDocument}`)">
+                      {{ getFileName(form.borrowDocument) }}
+                    </el-link>
+                    <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.borrowDocument}`"
+                      :underline="false" target="_blank">
+                      <span class="el-icon-download">下载文件</span>
+                    </el-link>
+                    <FileUpload v-if="taskName == '借款申请'" :limit="1" :filePathName="'借款/申请附件'"
+                      :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']" @input="getBorrowPath"></FileUpload>
+                  </div>
                 </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="日期：" label-width="120px" v-if="showFormItem('党工团审核')">
-                  <span> {{ form.unionTime ? form.unionTime : unionTime }} </span>
+              </td>
+            </tr>
+
+            <template v-if="form.borrowUsage == 0 || form.borrowUsage == 1">
+              <tr>
+                <td colspan="2" class="label-cell">部门负责人意见</td>
+                <td colspan="10">
+                  <el-form-item prop="deptComment" class="table-form-item">
+                    <el-input type="textarea" v-model="form.deptComment" placeholder="请输入部门负责人意见"
+                      :disabled="taskName != '部门审核'" :autosize="{ minRows: 4 }" />
+                  </el-form-item>
+                  <el-row class="sign-line" v-if="showFormItem('部门审核')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.deptUser ? form.deptUser.nickName : deptUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.deptTime ? form.deptTime : deptTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">分管领导审核</td>
+                <td colspan="10">
+                  <el-form-item prop="managerComment" class="table-form-item">
+                    <el-input type="textarea" v-model="form.managerComment" placeholder="请输入分管领导审核意见"
+                      :disabled="taskName != '分管审核'" :autosize="{ minRows: 4 }" />
+                  </el-form-item>
+                  <el-row class="sign-line" v-if="showFormItem('分管审核')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.managerUser ? form.managerUser.nickName : managerUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.managerTime ? form.managerTime : managerTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">总经理审批</td>
+                <td colspan="10">
+                  <el-form-item prop="zjlComment" class="table-form-item">
+                    <el-input type="textarea" v-model="form.zjlComment" placeholder="请输入总经理审批意见"
+                      :disabled="taskName != '总经理审核'" :autosize="{ minRows: 4 }" />
+                  </el-form-item>
+                  <el-row class="sign-line" v-if="showFormItem('总经理审核')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.zjlUser ? form.zjlUser.nickName : zjlUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.zjlTime ? form.zjlTime : zjlTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr v-if="exceed && !form.cwUser">
+                <td colspan="2" class="label-cell">董事长批准</td>
+                <td colspan="10">
+                  <el-form-item prop="dszComment" class="table-form-item">
+                    <el-input type="textarea" v-model="form.dszComment" placeholder="请输入董事长批准意见"
+                      :disabled="taskName != '董事长批准'" :autosize="{ minRows: 4 }" />
+                  </el-form-item>
+                  <el-row class="sign-line" v-if="showFormItem('董事长批准')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.dszUser ? form.dszUser.nickName : dszUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.dszTime ? form.dszTime : dszTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+            </template>
+
+            <tr v-if="form.borrowUsage != 0 && form.borrowUsage != 1">
+              <td colspan="2" class="label-cell">{{ dgtLabel }}</td>
+              <td colspan="10">
+                <el-form-item prop="unionComment" class="table-form-item">
+                  <el-input type="textarea" v-model="form.unionComment" placeholder="请输入审核意见"
+                    :disabled="taskName != '党工团审核'" />
                 </el-form-item>
-              </el-col>
-            </el-row>
+                <el-row class="sign-line" v-if="showFormItem('党工团审核')">
+                  <el-col :span="6" :offset="11">
+                    签名：<span class="auditor">{{ form.unionUser ? form.unionUser.nickName : unionUser }}</span>
+                  </el-col>
+                  <el-col :span="6">
+                    日期：<span>{{ form.unionTime ? form.unionTime : unionTime }}</span>
+                  </el-col>
+                </el-row>
+              </td>
+            </tr>
+
+            <tr>
+              <td colspan="2" class="label-cell">财务部处理</td>
+              <td colspan="10">
+                <div class="table-form-item">
+                  <div class="sub-label">支付凭证</div>
+                  <el-form-item prop="lendDocument" class="table-form-item">
+                    <FileUpload v-if="taskName == '财务处理'" :disabled="taskName != '财务处理'" :limit="1"
+                      :filePathName="'借款/支付凭证'" :isShowTip="false"
+                      :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']" @input="getLendPath">
+                    </FileUpload>
+                    <div v-if="form.lendDocument && taskName != '财务处理'">
+                      <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.lendDocument}`)">
+                        {{ getFileName(form.lendDocument) }}
+                      </el-link>
+                      <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.lendDocument}`"
+                        :underline="false" target="_blank">
+                        <span class="el-icon-download">下载文件</span>
+                      </el-link>
+                    </div>
+                  </el-form-item>
+                  <div class="sub-label">支付备注</div>
+                  <el-form-item prop="cwComment" class="table-form-item">
+                    <el-input type="textarea" v-model="form.cwComment" placeholder="请输入财务部支付备注"
+                      :disabled="taskName != '财务处理'" :autosize="{ minRows: 2 }" />
+                  </el-form-item>
+                </div>
+                <el-row class="sign-line" v-if="showFormItem('财务处理')">
+                  <el-col :span="6" :offset="11">
+                    经办人：<span class="auditor">{{ form.cwUser ? form.cwUser.nickName : cwUser }}</span>
+                  </el-col>
+                  <el-col :span="6">
+                    支付日期：
+                    <el-form-item prop="lendTime" class="table-form-item inline-item">
+                      <el-date-picker style="width: 160px;" v-model="form.lendTime" value-format="yyyy-MM-dd" type="date"
+                        placeholder="选择日期" :disabled="taskName != '财务处理'">
+                      </el-date-picker>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </td>
+            </tr>
+          </table>
           </div>
-          <el-divider></el-divider>
-          <el-form-item label="支付凭证" prop="lendDocument">
-            <FileUpload v-if="taskName == '财务处理'" :disabled="taskName != '财务处理'" :limit="1" :filePathName="'借款/支付凭证'"
-              :isShowTip="false" :fileType="['doc', 'docx', 'xls', 'xlsx', 'pdf', 'rar', 'zip']" @input="getLendPath">
-            </FileUpload>
-            <div v-if="form.lendDocument && taskName != '财务处理'">
-              <!-- <file-item :document="form.lendDocument"></file-item> -->
-              <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.lendDocument}`)">
-                {{ getFileName(form.lendDocument) }}
-              </el-link>
-              <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.lendDocument}`"
-                :underline="false" target="_blank">
-                <span class="el-icon-download">下载文件</span>
-              </el-link>
-            </div>
-          </el-form-item>
-          <el-form-item label="财务部支付备注" prop="cwComment" label-width="120px">
-            <el-input type="textarea" v-model="form.cwComment" placeholder="请输入财务部支付备注" :disabled="taskName != '财务处理'"
-              :autosize="{ minRows: 2 }" />
-          </el-form-item>
-          <el-row>
-            <el-col :span="6" :xs="24" :offset="12">
-              <el-form-item label="经办人：" label-width="120px" v-if="showFormItem('财务处理')">
-                <span class="auditor"> {{ form.cwUser ? form.cwUser.nickName : cwUser }} </span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="支付日期：" prop="lendTime" v-if="showFormItem('财务处理')">
-                <el-date-picker style="width:140px;" v-model="form.lendTime" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期" :disabled="taskName != '财务处理'">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row>
         </el-form>
-        <div style="text-align: center;" v-if="taskName != ''">
+        <div class="form-footer" v-if="taskName != ''">
           <el-button type="warning" @click="saves()">保 存</el-button>
           <el-button type="danger" v-if="taskName != '借款申请'" @click="returnOpen = true">退 回</el-button>
           <el-button type="primary" @click="submitForm">提 交</el-button>
@@ -312,7 +368,7 @@
             <flow :flowData="flowData" />
           </div>
         </el-card>
-      </el-col>
+      </el-col> 
     </el-row>
     <el-dialog title="选择项目" :visible.sync="openProject" width="70%" append-to-body>
       <project-choose @chooseProject="confirmProject"></project-choose>
@@ -1146,28 +1202,256 @@ export default {
 <style lang="scss" scoped>
 @import "@/assets/styles/element-reset.scss";
 
-table {
-  text-align: center;
+$border-light: #dcdfe6;
+$border-soft: #e4e7ed;
+$label-bg: #f0f2f5;
+$label-color: #606266;
+$text-primary: #303133;
+$text-secondary: #909399;
+$accent: #409eff;
+
+.borrow-table-form {
+  margin-top: 16px;
+
+  .table-form-item {
+    margin-bottom: 0;
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+      line-height: normal;
+    }
+
+    ::v-deep .el-form-item__error {
+      position: relative;
+      padding-top: 2px;
+    }
+  }
+
+  ::v-deep .el-input__inner,
+  ::v-deep .el-textarea__inner {
+    border-color: $border-light;
+    border-radius: 6px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: #c0c4cc;
+    }
+
+    &:focus {
+      border-color: $accent;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+    }
+  }
+
+  ::v-deep .el-input.is-disabled .el-input__inner,
+  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    background-color: #f5f7fa;
+    color: #606266;
+  }
+
+  .inline-item {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .exceed-tip {
+    display: block;
+    margin-top: 4px;
+    color: #f56c6c;
+    font-size: 12px;
+  }
+
+  .sub-label {
+    margin: 8px 0 4px;
+    font-size: 13px;
+    color: $label-color;
+    font-weight: 500;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.form-table-wrap {
+  border: 1px solid $border-soft;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.form-table {
+  width: 100%;
   border-collapse: collapse;
-  border: 1px solid #ccc;
+  table-layout: fixed;
+  font-size: 14px;
+  color: $text-primary;
+
+  tr {
+    transition: background-color 0.15s;
+  }
+
+  tr:hover td:not(.label-cell) {
+    background-color: #fafcff;
+  }
+
+  td {
+    padding: 12px 14px;
+    border-bottom: 1px solid $border-light;
+    vertical-align: middle;
+    word-break: break-word;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .label-cell {
+    width: 110px;
+    text-align: right;
+    font-size: 13px;
+    font-weight: 600;
+    color: $label-color;
+    background-color: $label-bg;
+    border-right: 1px solid $border-light;
+    white-space: nowrap;
+  }
+}
+
+.inner-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 8px;
+  font-size: 13px;
+  border: 1px solid $border-light;
+  border-radius: 8px;
+  overflow: hidden;
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid $border-light;
+    border-right: 1px solid $border-light;
+    vertical-align: middle;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  td:last-child {
+    border-right: none;
+  }
+
+  .label-cell {
+    text-align: center;
+    font-weight: 600;
+    font-size: 12px;
+    color: $label-color;
+    background-color: $label-bg;
+    white-space: nowrap;
+  }
+}
+
+.detail-inner-table {
+  text-align: center;
+
+  tr:first-child td {
+    background: $label-bg;
+    color: $label-color;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 9px 8px;
+  }
+
+  tbody tr:hover td {
+    background-color: #f5f9ff;
+  }
 
   td {
-    padding: .0625rem;
+    padding: 8px 10px;
   }
 }
 
-.low-money {
-  display: inline-block;
-  width: 75px;
-  text-align: right;
+.budget-row {
+  td.budget-value-cell,
+  td:not(.label-cell) {
+    // background-color: #f5f7fa;
+  }
+
+  .budget-value-cell {
+    padding: 10px 12px;
+    overflow: hidden;
+    vertical-align: top;
+  }
+
+  .budget-amount {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    line-height: 1.45;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+  }
+
+  .amount-num {
+    display: block;
+    font-size: 15px;
+    font-weight: 600;
+    color: $text-primary;
+    letter-spacing: 0.02em;
+  }
+
+  .amount-cn {
+    display: block;
+    font-size: 12px;
+    color: $text-secondary;
+    white-space: normal;
+  }
+
+  .budget-amount.is-danger .amount-num {
+    color: #f56c6c;
+  }
+
+  .budget-amount.is-success .amount-num {
+    color: #67c23a;
+  }
+
+  .budget-link-btn {
+    margin-top: 6px;
+    padding: 0;
+    font-size: 12px;
+    color: $accent;
+    white-space: normal;
+    line-height: 1.3;
+    text-align: left;
+
+    &:hover {
+      color: #66b1ff;
+    }
+  }
 }
 
-.up-money {
-  display: inline-block;
-  text-align: right;
+.sign-line {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid $border-light;
+  font-size: 13px;
+  color: $label-color;
+  line-height: 26px;
+
+  .auditor {
+    color: $text-primary;
+    font-weight: 500;
+  }
 }
 
-::v-deep .el-descriptions-item__label.is-bordered-label {
-  width: 110px;
+.form-footer {
+  margin-top: 24px;
+  padding-bottom: 20px;
+  text-align: center;
 }
 </style>

oa-ui/src/views/flowable/form/oa/carForm.vue

@@ -1,263 +1,285 @@
 <!--
  * @Author: ysh
  * @Date: 2024-02-29 11:44:28
- * @LastEditors: wrh
- * @LastEditTime: 2026-03-13 16:09:18
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-05-21 11:17:02
 -->
 
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
     <el-row :gutter="20">
       <el-col :span="flowDisabled ? 18 : 24" :xs="24">
-        <el-card>
-          <h2 style="text-align: center;">用车申请表</h2>
-          <div>
-            <el-form ref="carForm" :model="form" label-width="120px" :rules="rules">
-              <!-- 申请人填写 -->
-              <el-divider></el-divider>
-              <el-row :gutter="20">
-                <el-col :span="7" :xs="24">
-                  <el-form-item label="申请人：" prop="user.nickName">
-                    <!-- <el-input v-model="form.user"></el-input> -->
+        <h2 class="text-center">用车申请表</h2>
+        <el-divider></el-divider>
+        <el-form ref="carForm" :model="form" :rules="rules" class="borrow-table-form">
+          <div class="form-table-wrap">
+            <table class="form-table">
+              <tr>
+                <td colspan="2" class="label-cell">申请人</td>
+                <td colspan="2">
+                  <el-form-item prop="user.nickName" class="table-form-item">
                     {{ form.applierUser ? form.applierUser.nickName : (form.user ? form.user.nickName : '') }}
                   </el-form-item>
-                </el-col>
-                <el-col :span="7" :xs="24">
-                  <el-form-item label="所在部门：" prop="dept.deptName">
-                    <!-- <el-input v-model="form.deptName"></el-input> -->
+                </td>
+                <td colspan="2" class="label-cell">所在部门</td>
+                <td colspan="2">
+                  <el-form-item prop="dept.deptName" class="table-form-item">
                     {{ form.dept ? form.dept.deptName : '' }}
                   </el-form-item>
-                </el-col>
-                <el-col :span="7" :xs="24">
-                  <el-form-item label="申请时间：" prop="date">
-                    <el-date-picker style="width:170px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+                <td colspan="2" class="label-cell">申请时间</td>
+                <td colspan="2">
+                  <el-form-item prop="date" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" :disabled="taskName != '用车申请'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <el-form-item label="申请用途：" prop="carUsage">
-                <el-radio-group v-model="form.carUsage" @change="useChange" size="small" :disabled="taskName != '用车申请'">
-                  <el-radio label="0">项目用车</el-radio>
-                  <el-radio label="1">非项目用车</el-radio>
-                  <el-radio label="2">工会用车</el-radio>
-                  <el-radio label="3">党委用车</el-radio>
-                  <el-radio label="4">团委用车</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item label="项目编号：" prop="projectId" v-if="form.carUsage == '0'">
-                <el-button type="primary" size="mini" @click="openProject = true"
-                  v-if="taskName == '用车申请'">选择项目</el-button>
-                <!-- <el-select v-model="form.projectId" filterable placeholder="请选择" @change="handleSelectProject"
-                  :disabled="taskName != '用车申请'" clearable>
-                  <el-option v-for="item in projectList" :key="item.value" :label="item.projectNumber"
-                    :value="item.projectId">
-                  </el-option>
-                </el-select> -->
-                <el-descriptions border v-if="isSelect" style="margin-top: 10px;" :column="1">
-                  <el-descriptions-item label="项目编号" label-class-name="my-label">{{ chooseProject.projectNumber
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="项目名称" label-class-name="my-label">{{ chooseProject.projectName
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="项目负责人" label-class-name="my-label">{{ chooseProject.projectLeaderUser ?
-                    chooseProject.projectLeaderUser.nickName : ''
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="承担部门" label-class-name="my-label">
-                    <el-tag size="small">{{ chooseProject.undertakingDeptName }}</el-tag>
-                  </el-descriptions-item>
-                  <el-descriptions-item label="项目类型" label-class-name="my-label">{{ chooseProject.projectType
-                  }}</el-descriptions-item>
-                </el-descriptions>
-              </el-form-item>
-              <el-form-item label="用车事由：" prop="applyReason">
-                <el-input type="textarea" :rows="2" placeholder="请输入用车事由" v-model="form.applyReason"
-                  :disabled="taskName != '用车申请'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="7" :xs="24">
-                  <el-form-item label="开始日期：" prop="beginDate">
-                    <el-date-picker style="width:170px;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">申请用途</td>
+                <td colspan="10">
+                  <el-form-item prop="carUsage" class="table-form-item">
+                    <el-radio-group v-model="form.carUsage" @change="useChange" size="small" :disabled="taskName != '用车申请'">
+                      <el-radio label="0">项目用车</el-radio>
+                      <el-radio label="1">非项目用车</el-radio>
+                      <el-radio label="2">工会用车</el-radio>
+                      <el-radio label="3">党委用车</el-radio>
+                      <el-radio label="4">团委用车</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr v-if="form.carUsage == '0'">
+                <td colspan="2" class="label-cell">项目信息</td>
+                <td colspan="10">
+                  <el-button type="primary" size="mini" @click="openProject = true"
+                    v-if="taskName == '用车申请'">选择项目</el-button>
+                  <table class="inner-table" v-if="isSelect">
+                    <tr>
+                      <td class="label-cell">项目编号</td>
+                      <td>{{ chooseProject.projectNumber }}</td>
+                      <td class="label-cell">项目名称</td>
+                      <td>{{ chooseProject.projectName }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label-cell">项目负责人</td>
+                      <td>{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : '' }}</td>
+                      <td class="label-cell">承担部门</td>
+                      <td>{{ chooseProject.undertakingDeptName }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label-cell">项目类型</td>
+                      <td colspan="3">{{ chooseProject.projectType }}</td>
+                    </tr>
+                  </table>
+                  <el-form-item prop="projectId" class="table-form-item" style="display: none;"></el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">用车事由</td>
+                <td colspan="10">
+                  <el-form-item prop="applyReason" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入用车事由" v-model="form.applyReason"
+                      :disabled="taskName != '用车申请'">
+                    </el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">开始日期</td>
+                <td colspan="2">
+                  <el-form-item prop="beginDate" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" @change="calculateDay" :disabled="taskName != '用车申请'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-                <el-col :span="7" :xs="24">
-                  <el-form-item label="结束日期：" prop="endDate">
-                    <el-date-picker style="width:170px;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+                <td colspan="2" class="label-cell">结束日期</td>
+                <td colspan="2">
+                  <el-form-item prop="endDate" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" @change="calculateDay" :disabled="taskName != '用车申请'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-                <el-col :span="5" :xs="24">
-                  <el-form-item label="共计:">
-                    {{ form.days + '天' }}
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-form-item label="乘车人数：" prop="passengers">
-                <el-input-number v-model="form.passengers" :min="1" :disabled="taskName != '用车申请'"></el-input-number>
-              </el-form-item>
-              <el-divider></el-divider>
-              <!-- 部门审核意见 -->
-              <el-form-item label="部门审核意见：" prop="deptComment" label-width="125px" v-if="showFormItem('部门审核')">
-                <el-input type="textarea" :rows="2" placeholder="请输入部门审核意见" v-model="form.deptComment"
-                  :disabled="taskName != '部门审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('部门审核签名')">
-                    <span class="auditor"> {{ form.deptUser ? form.deptUser.nickName : deptUser }} </span>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('部门审核签名')">
-                    <span> {{ form.deptTime ? form.deptTime : deptTime }} </span>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 分管审核意见 -->
-              <el-form-item label="分管审核意见：" prop="managerComment" label-width="125px" v-if="showFormItem('分管审核')">
-                <el-input type="textarea" :rows="2" placeholder="请输入分管审核意见" v-model="form.managerComment"
-                  :disabled="taskName != '分管审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('分管审核签名')">
-                    <span class="auditor"> {{ form.managerUser ? form.managerUser.nickName : managerUser }} </span>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('分管审核签名')">
-                    <span> {{ form.managerTime ? form.managerTime : managerTime }} </span>
+                </td>
+                <td colspan="2" class="label-cell">共计</td>
+                <td colspan="2">{{ form.days }} 天</td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">乘车人数</td>
+                <td colspan="10">
+                  <el-form-item prop="passengers" class="table-form-item">
+                    <el-input-number v-model="form.passengers" :min="1" :disabled="taskName != '用车申请'"></el-input-number>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 党工团审核意见 -->
-              <el-form-item :label="dgtAdvice" prop="unionComment" label-width="120px" v-if="showFormItem('党工团审核')">
-                <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="form.unionComment"
-                  :disabled="taskName != '党工团审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('党工团审核签名')">
-                    <span class="auditor"> {{ form.unionUser ? form.unionUser.nickName : unionUser }} </span>
+                </td>
+              </tr>
+
+              <tr v-if="showFormItem('部门审核')">
+                <td colspan="2" class="label-cell">部门审核意见</td>
+                <td colspan="10">
+                  <el-form-item prop="deptComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入部门审核意见" v-model="form.deptComment"
+                      :disabled="taskName != '部门审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('党工团审核签名')">
-                    <span> {{ form.unionTime ? form.unionTime : unionTime }} </span>
+                  <el-row class="sign-line" v-if="showFormItem('部门审核签名')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.deptUser ? form.deptUser.nickName : deptUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.deptTime ? form.deptTime : deptTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr v-if="showFormItem('分管审核')">
+                <td colspan="2" class="label-cell">分管审核意见</td>
+                <td colspan="10">
+                  <el-form-item prop="managerComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入分管审核意见" v-model="form.managerComment"
+                      :disabled="taskName != '分管审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 总经理审核意见 -->
-              <el-form-item label="总经理审核意见" prop="gmComment" label-width="120px" v-if="showFormItem('总经理审核')">
-                <el-input type="textarea" :rows="2" placeholder="请输入总经理审核意见" v-model="form.gmComment"
-                  :disabled="taskName != '总经理审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('总经理审核签名')">
-                    <span class="auditor"> {{ form.gmUser ? form.gmUser.nickName : gmUser }} </span>
+                  <el-row class="sign-line" v-if="showFormItem('分管审核签名')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.managerUser ? form.managerUser.nickName : managerUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.managerTime ? form.managerTime : managerTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr v-if="showFormItem('党工团审核')">
+                <td colspan="2" class="label-cell">{{ dgtAdvice }}</td>
+                <td colspan="10">
+                  <el-form-item prop="unionComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="form.unionComment"
+                      :disabled="taskName != '党工团审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('总经理审核签名')">
-                    <span> {{ form.gmTime ? form.gmTime : gmTime }} </span>
+                  <el-row class="sign-line" v-if="showFormItem('党工团审核签名')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.unionUser ? form.unionUser.nickName : unionUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.unionTime ? form.unionTime : unionTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr v-if="showFormItem('总经理审核')">
+                <td colspan="2" class="label-cell">总经理审核意见</td>
+                <td colspan="10">
+                  <el-form-item prop="gmComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入总经理审核意见" v-model="form.gmComment"
+                      :disabled="taskName != '总经理审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 董事长审核意见 -->
-              <el-form-item label="董事长审核意见" prop="dszComment" label-width="120px" v-if="showFormItem('董事长审核')">
-                <el-input type="textarea" :rows="2" placeholder="请输入董事长审核意见" v-model="form.dszComment"
-                  :disabled="taskName != '董事长审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('董事长审核签名')">
-                    <span class="auditor"> {{ form.dszUser ? form.dszUser.nickName : dszUser }} </span>
+                  <el-row class="sign-line" v-if="showFormItem('总经理审核签名')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.gmUser ? form.gmUser.nickName : gmUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.gmTime ? form.gmTime : gmTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr v-if="showFormItem('董事长审核')">
+                <td colspan="2" class="label-cell">董事长审核意见</td>
+                <td colspan="10">
+                  <el-form-item prop="dszComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入董事长审核意见" v-model="form.dszComment"
+                      :disabled="taskName != '董事长审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('董事长审核签名')">
-                    <span> {{ form.dszTime ? form.dszTime : dszTime }} </span>
+                  <el-row class="sign-line" v-if="showFormItem('董事长审核签名')">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.dszUser ? form.dszUser.nickName : dszUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.dszTime ? form.dszTime : dszTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+
+              <tr>
+                <td colspan="2" class="label-cell">安排用车意见</td>
+                <td colspan="10">
+                  <el-form-item prop="dispatchComment" class="table-form-item">
+                    <el-input type="textarea" :rows="2" placeholder="请输入安排用车意见" v-model="form.dispatchComment"
+                      :disabled="taskName != '安排用车'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <el-divider></el-divider>
-              <!-- 安排用车意见 -->
-              <el-form-item label="安排用车意见：" prop="dispatchComment" label-width="120px">
-                <el-input type="textarea" :rows="2" placeholder="请输入安排用车意见" v-model="form.dispatchComment"
-                  :disabled="taskName != '安排用车'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="taskName == '安排用车'">
-                    <span class="auditor"> {{ form.dispatchUser ? form.dispatchUser.nickName : dispatchUser }} </span>
+                  <el-row class="sign-line" v-if="taskName == '安排用车' || (taskName == '' && form.dispatchUser)">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.dispatchUser ? form.dispatchUser.nickName : dispatchUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.dispatchTime ? form.dispatchTime : dispatchTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">车牌号</td>
+                <td colspan="10">
+                  <el-form-item prop="cars" class="table-form-item">
+                    <div class="car-checkbox-list">
+                      <el-checkbox-group v-model="form.cars" :disabled="taskName != '安排用车'">
+                        <el-checkbox class="car-checkbox-item" :disabled="item.status == 1 ? false : true"
+                          :label="item.carId" v-for="item in carList" :key="item.carId" :value="item.carId">
+                          <span class="car-plate">{{ item.licensePlate }}</span>
+                          <span class="car-desc" v-if="item.brand || item.series">
+                            {{ (item.brand || '') + (item.series || '') }}
+                          </span>
+                        </el-checkbox>
+                      </el-checkbox-group>
+                    </div>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="taskName == '安排用车'">
-                    <span> {{ form.dispatchTime ? form.dispatchTime : dispatchTime }} </span>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">驾驶员</td>
+                <td colspan="10">
+                  <el-form-item prop="drivers" class="table-form-item">
+                    <el-tag :key="'d' + index" class="mr10" v-for="item, index in chooseDriver">{{ item.nickName }}</el-tag>
+                    <el-button v-if="taskName == '安排用车'" icon="el-icon-plus" @click="openCar = true"></el-button>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 综合事务部管理人员填写 -->
-              <el-form-item label="车牌号：" prop="cars">
-                <el-checkbox-group v-model="form.cars" :disabled="taskName != '安排用车'">
-                  <el-checkbox :disabled="item.status == 1 ? false : true" :label="item.carId" v-for="item in carList"
-                    :key="item.carId" :value="item.carId">
-                    {{ item.licensePlate + (item.brand ? item.brand : '') + (item.series ? item.series : '') }}
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-form-item>
-              <el-form-item label="驾驶员：" prop="drivers">
-                <el-tag :key="'d' + index" class="mr10" v-for="item, index in chooseDriver">{{ item.nickName }}</el-tag>
-                <el-button v-if="taskName == '安排用车'" icon="el-icon-plus" @click="openCar = true"></el-button>
-                <!-- <el-select v-if="taskName != '安排用车'" v-model="form.drivers" filterable multiple clearable
-                  style="width:420px" :disabled="taskName != '安排用车'">
-                  <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"
-                    v-if="item.nickName != 'admin'">
-                  </el-option>
-                </el-select> -->
-              </el-form-item>
-              <el-row>
-                <el-col :span="12" :xs="24">
-                  <el-form-item label="返回日期" prop="returnDate">
-                    <!-- <el-date-picker v-model="form.returnDate" clearable type="datetime" value-format="yyyy-MM-dd-HH-mm"
-                      placeholder="选择日期" :disabled="taskName != '安排用车'">
-                    </el-date-picker> -->
-                    <el-date-picker v-model="form.returnDate" type="datetime" placeholder="选择日期时间"
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">返回日期</td>
+                <td colspan="4">
+                  <el-form-item prop="returnDate" class="table-form-item">
+                    <el-date-picker v-model="form.returnDate" type="datetime" placeholder="选择日期时间" style="width: 100%;"
                       format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" :disabled="taskName != '安排用车'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-                <el-col :span="12" :xs="24">
-                  <el-form-item label="行驶公里：" prop="kilometers" label-width="120px">
+                </td>
+                <td colspan="2" class="label-cell">行驶公里</td>
+                <td colspan="4">
+                  <el-form-item prop="kilometers" class="table-form-item">
                     <el-input placeholder="请输入行驶公里" v-model="form.kilometers" style="width: 200px;"
                       :disabled="taskName != '安排用车'" />
                     <span> 公里</span>
                   </el-form-item>
-                </el-col>
-              </el-row>
-            </el-form>
-            <el-row style="text-align: center;" v-if="taskName == '用车申请'">
-              <el-button type="primary" @click="submit">提交申请</el-button>
-            </el-row>
-            <el-row style="text-align: center;" v-else>
-              <el-button type="warning" @click="saves()" v-if="taskName == '安排用车'">保存</el-button>
-              <el-button type="primary" v-if="taskName" @click="completeApply"
-                :disabled="taskName == '安排用车' && !form.returnDate">完成审批</el-button>
-            </el-row>
+                </td>
+              </tr>
+            </table>
           </div>
-        </el-card>
-
+        </el-form>
+        <div class="form-footer" v-if="taskName == '用车申请'">
+          <el-button type="primary" @click="submit">提交申请</el-button>
+        </div>
+        <div class="form-footer" v-else-if="taskName">
+          <el-button type="warning" @click="saves()" v-if="taskName == '安排用车'">保存</el-button>
+          <el-button type="primary" @click="completeApply"
+            :disabled="taskName == '安排用车' && !form.returnDate">完成审批</el-button>
+        </div>
       </el-col>
       <el-col :span="6" :xs="24" v-if="flowDisabled">
         <el-card>
@@ -828,14 +850,201 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/assets/styles/element-reset.scss";
-</style>
 
-<style>
-.my-label {
-  width: 100px;
-  background: #E1F3D8;
+$border-light: #dcdfe6;
+$border-soft: #e4e7ed;
+$label-bg: #f0f2f5;
+$label-color: #606266;
+$text-primary: #303133;
+$accent: #409eff;
+
+.borrow-table-form {
+  margin-top: 16px;
+
+  .table-form-item {
+    margin-bottom: 0;
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+      line-height: normal;
+    }
+
+    ::v-deep .el-form-item__error {
+      position: relative;
+      padding-top: 2px;
+    }
+  }
+
+  ::v-deep .el-input__inner,
+  ::v-deep .el-textarea__inner {
+    border-color: $border-light;
+    border-radius: 6px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: #c0c4cc;
+    }
+
+    &:focus {
+      border-color: $accent;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+    }
+  }
+
+  ::v-deep .el-input.is-disabled .el-input__inner,
+  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    background-color: #f5f7fa;
+    color: #606266;
+  }
+
+  .car-checkbox-list {
+    width: 100%;
+
+    ::v-deep .el-checkbox-group {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 12px 20px;
+      width: 100%;
+    }
+
+    ::v-deep .car-checkbox-item {
+      margin-right: 0;
+      display: inline-flex;
+      align-items: flex-start;
+      height: auto;
+      white-space: normal;
+
+      .el-checkbox__input {
+        margin-top: 3px;
+      }
+
+      .el-checkbox__label {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 2px;
+        line-height: 1.4;
+        white-space: normal;
+        padding-left: 8px;
+      }
+    }
+
+    .car-plate {
+      font-weight: 600;
+      color: $text-primary;
+    }
+
+    .car-desc {
+      font-size: 12px;
+      color: $label-color;
+    }
+  }
+}
+
+.form-table-wrap {
+  border: 1px solid $border-soft;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.form-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 14px;
+  color: $text-primary;
+
+  tr {
+    transition: background-color 0.15s;
+  }
+
+  tr:hover td:not(.label-cell) {
+    background-color: #fafcff;
+  }
+
+  td {
+    padding: 12px 14px;
+    border-bottom: 1px solid $border-light;
+    vertical-align: middle;
+    word-break: break-word;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .label-cell {
+    width: 110px;
+    text-align: right;
+    font-size: 13px;
+    font-weight: 600;
+    color: $label-color;
+    background-color: $label-bg;
+    border-right: 1px solid $border-light;
+    white-space: nowrap;
+  }
+}
+
+.inner-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 8px;
+  font-size: 13px;
+  border: 1px solid $border-light;
+  border-radius: 8px;
+  overflow: hidden;
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid $border-light;
+    border-right: 1px solid $border-light;
+    vertical-align: middle;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  td:last-child {
+    border-right: none;
+  }
+
+  .label-cell {
+    text-align: center;
+    font-weight: 600;
+    font-size: 12px;
+    color: $label-color;
+    background-color: $label-bg;
+    white-space: nowrap;
+  }
 }
 
+.sign-line {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid $border-light;
+  font-size: 13px;
+  color: $label-color;
+  line-height: 26px;
+
+  .auditor {
+    color: $text-primary;
+    font-weight: 500;
+  }
+}
+
+.form-footer {
+  margin-top: 24px;
+  padding-bottom: 20px;
+  text-align: center;
+}
+</style>
+
+<style>
 ::v-deep .el-textarea.is-disabled .el-textarea__inner {
   color: #121212 !important;
 }

oa-ui/src/views/flowable/form/oa/deviceForm.vue

@@ -1,194 +1,244 @@
 <!--
  * @Author: ysh
  * @Date: 2024-03-07 13:44:39
- * @LastEditors: wrh
- * @LastEditTime: 2026-03-10 15:04:05
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-05-22 09:55:39
 -->
 
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="flowDisabled ? 18 : 24" :xs="24">
-        <el-card>
-          <h2 style="text-align: center;">设备申请表</h2>
-          <div>
-            <el-form ref="deviceForm" :model="form" label-width="120px" :rules="rules" :disabled="formDisabled">
-              <!-- 申请人填写 -->
-              <el-divider></el-divider>
-              <el-row :gutter="20">
-                <el-col :span="6" :xs="24">
-                  <el-form-item label="申请人：" prop="user.nickName">
+        <h2 class="text-center">设备申请表</h2>
+        <el-divider></el-divider>
+        <el-form ref="deviceForm" :model="form" :rules="rules" :disabled="formDisabled" class="borrow-table-form">
+          <div class="form-table-wrap">
+            <table class="form-table">
+              <tr>
+                <td colspan="2" class="label-cell">申请人</td>
+                <td colspan="2">
+                  <el-form-item prop="user.nickName" class="table-form-item">
                     {{ form.applierUser ? form.applierUser.nickName : form.user.nickName }}
                   </el-form-item>
-                </el-col>
-                <el-col :span="6" :xs="24">
-                  <el-form-item label="所在部门：" prop="dept.deptName">
+                </td>
+                <td colspan="2" class="label-cell">所在部门</td>
+                <td colspan="2">
+                  <el-form-item prop="dept.deptName" class="table-form-item">
                     {{ form.dept.deptName }}
                   </el-form-item>
-                </el-col>
-                <el-col :span="6" :xs="24">
-                  <el-form-item label="申请时间：" prop="applyDate">
-                    <el-date-picker style="width:170px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+                <td colspan="2" class="label-cell">申请时间</td>
+                <td colspan="2">
+                  <el-form-item prop="applyDate" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" disabled>
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <el-form-item label="项目编号：" prop="projectId">
-                <el-button type="primary" size="mini" @click="openProject = true"
-                  v-if="taskName == '设备申请'">选择项目</el-button>
-                <el-descriptions border v-if="isSelect && chooseProject" style="margin-top: 10px;" :column="1">
-                  <el-descriptions-item label="项目编号" label-class-name="my-label">{{ chooseProject.projectNumber
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="项目名称" label-class-name="my-label">{{ chooseProject.projectName
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="项目负责人" label-class-name="my-label">{{ chooseProject.projectLeaderUser ?
-                    chooseProject.projectLeaderUser.nickName : ''
-                  }}</el-descriptions-item>
-                  <el-descriptions-item label="承担部门" label-class-name="my-label">
-                    <el-tag size="small">{{ chooseProject.undertakingDeptName }}</el-tag>
-                  </el-descriptions-item>
-                  <el-descriptions-item label="项目类型" label-class-name="my-label">{{ chooseProject.projectType
-                  }}</el-descriptions-item>
-                </el-descriptions>
-              </el-form-item>
-              <el-form-item label="设备选择：" prop="devices">
-                <el-button type="primary" icon="el-icon-plus" size="mini" @click="openDevice = true"
-                  :disabled="taskName != '设备申请'">选择设备</el-button>
-                <el-table :data="deviceList">
-                  <el-table-column label="序号" type="index" />
-                  <el-table-column label="出厂编号" align="center" prop="code" />
-                  <el-table-column label="设备品牌" align="center" prop="brand" />
-                  <el-table-column label="设备名称" align="center" prop="name" />
-                  <el-table-column label="规格型号" align="center" prop="series" />
-                  <el-table-column label="存放地址" align="center" prop="place" />
-                </el-table>
-              </el-form-item>
-              <el-form-item label="申领事由：" prop="applyReason">
-                <el-input type="textarea" :rows="3" placeholder="请输入申领事由" v-model="form.applyReason"
-                  :disabled="taskName != '设备申请'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24">
-                  <el-form-item label="开始日期：" prop="beginDate">
-                    <el-date-picker style="width:170px;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">项目信息</td>
+                <td colspan="10">
+                  <el-button type="primary" size="mini" @click="openProject = true"
+                    v-if="taskName == '设备申请'">选择项目</el-button>
+                  <table class="inner-table" v-if="isSelect && chooseProject">
+                    <tr>
+                      <td class="label-cell">项目编号</td>
+                      <td>{{ chooseProject.projectNumber }}</td>
+                      <td class="label-cell">项目名称</td>
+                      <td>{{ chooseProject.projectName }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label-cell">项目负责人</td>
+                      <td>{{ chooseProject.projectLeaderUser ? chooseProject.projectLeaderUser.nickName : '' }}</td>
+                      <td class="label-cell">承担部门</td>
+                      <td>{{ chooseProject.undertakingDeptName }}</td>
+                    </tr>
+                    <tr>
+                      <td class="label-cell">项目类型</td>
+                      <td colspan="3">{{ chooseProject.projectType }}</td>
+                    </tr>
+                  </table>
+                  <el-form-item prop="projectId" class="table-form-item" style="display: none;"></el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">设备选择</td>
+                <td colspan="10">
+                  <el-form-item prop="devices" class="table-form-item">
+                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="openDevice = true"
+                      :disabled="taskName != '设备申请'">选择设备</el-button>
+                    <el-table class="embed-table" :data="deviceList" size="small" border>
+                      <el-table-column label="序号" type="index" width="55" align="center" />
+                      <el-table-column label="出厂编号" align="center" prop="code" min-width="100" />
+                      <el-table-column label="设备品牌" align="center" prop="brand" min-width="90" />
+                      <el-table-column label="设备名称" align="center" prop="name" min-width="100" />
+                      <el-table-column label="规格型号" align="center" prop="series" min-width="90" />
+                      <el-table-column label="存放地址" align="center" prop="place" min-width="100" />
+                    </el-table>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">申领事由</td>
+                <td colspan="10">
+                  <el-form-item prop="applyReason" class="table-form-item">
+                    <el-input type="textarea" :rows="3" placeholder="请输入申领事由" v-model="form.applyReason"
+                      :disabled="taskName != '设备申请'">
+                    </el-input>
+                  </el-form-item>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">开始日期</td>
+                <td colspan="2">
+                  <el-form-item prop="beginDate" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" @change="calculateDay" :disabled="taskName != '设备申请'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6" :xs="24">
-                  <el-form-item label="结束日期：" prop="endDate">
-                    <el-date-picker style="width:170px;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
+                </td>
+                <td colspan="2" class="label-cell">结束日期</td>
+                <td colspan="2">
+                  <el-form-item prop="endDate" class="table-form-item">
+                    <el-date-picker style="width: 100%;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
                       placeholder="选择日期" @change="calculateDay" :disabled="taskName != '设备申请'">
                     </el-date-picker>
                   </el-form-item>
-                </el-col>
-                <el-col :span="8" :xs="24">
-                  <el-form-item label="共计:">
-                    {{ form.days + '天' }}
+                </td>
+                <td colspan="2" class="label-cell">共计</td>
+                <td colspan="2">{{ form.days }} 天</td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">拟发放设备</td>
+                <td colspan="10">
+                  <el-form-item prop="modifyDevices" class="table-form-item">
+                    <el-table class="embed-table" :data="modifyDeviceList" size="small" border>
+                      <el-table-column label="序号" type="index" width="55" align="center" />
+                      <el-table-column label="出厂编号" align="center" prop="code" min-width="100" />
+                      <el-table-column label="设备品牌" align="center" prop="brand" min-width="90" />
+                      <el-table-column label="设备名称" align="center" prop="name" min-width="100" />
+                      <el-table-column label="规格型号" align="center" prop="series" min-width="90" />
+                      <el-table-column label="存放地址" align="center" prop="place" min-width="100" />
+                      <el-table-column label="操作" align="center" width="140" v-if="taskName == '安排设备'">
+                        <template slot-scope="scope">
+                          <el-button type="text" @click="replaceRowData(scope.row, scope.$index)">重新选择</el-button>
+                          <el-button type="text" style="color: #F56C6C;"
+                            @click="deleteRowData(scope.row, scope.$index)">删除</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                    <el-button class="mt10" type="primary" size="mini" @click="addRowdata()" icon="el-icon-plus"
+                      :disabled="taskName != '安排设备'">新增设备</el-button>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 安排设备意见 -->
-              <el-divider></el-divider>
-              <el-form-item label-width="120px" label="拟发放设备：" prop="modifyDevices">
-                <el-table :data="modifyDeviceList">
-                  <el-table-column label="序号" type="index" />
-                  <el-table-column label="出厂编号" align="center" prop="code" />
-                  <el-table-column label="设备品牌" align="center" prop="brand" />
-                  <el-table-column label="设备名称" align="center" prop="name" />
-                  <el-table-column label="规格型号" align="center" prop="series" />
-                  <el-table-column label="存放地址" align="center" prop="place" />
-                  <el-table-column label="操作" align="center" v-if="taskName == '安排设备'">
-                    <template slot-scope="scope">
-                      <el-button type="text" primary @click="replaceRowData(scope.row, scope.$index)">重新选择</el-button>
-                      <el-button type="text" style="color:#F56C6C"
-                        @click="deleteRowData(scope.row, scope.$index)">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <el-button class="mt10" type="primary" size="mini" @click="addRowdata()" icon="el-icon-plus"
-                  :disabled="taskName != '安排设备'">新增设备</el-button>
-              </el-form-item>
-              <el-form-item label="安排设备意见：" prop="dispatchComment" label-width="125px">
-                <el-input type="textarea" :rows="3" placeholder="请输入安排设备意见" v-model="form.dispatchComment"
-                  :disabled="taskName != '安排设备'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px" v-if="taskName != '设备申请'">
-                    <span class="auditor"> {{ form.dispatchUser ? form.dispatchUser.nickName : dispatchUser }} </span>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">安排设备意见</td>
+                <td colspan="10">
+                  <el-form-item prop="dispatchComment" class="table-form-item">
+                    <el-input type="textarea" :rows="3" placeholder="请输入安排设备意见" v-model="form.dispatchComment"
+                      :disabled="taskName != '安排设备'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px" v-if="taskName != '设备申请'">
-                    <span> {{ form.dispatchTime ? form.dispatchTime : dispatchTime }} </span>
+                  <el-row class="sign-line" v-if="taskName != '设备申请' || (taskName == '' && form.dispatchUser)">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.dispatchUser ? form.dispatchUser.nickName : dispatchUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.dispatchTime ? form.dispatchTime : dispatchTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">分管审核意见</td>
+                <td colspan="10">
+                  <el-form-item prop="managerComment" class="table-form-item">
+                    <el-input type="textarea" :rows="3" placeholder="请输入分管审核意见" v-model="form.managerComment"
+                      :disabled="taskName != '分管审核'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 分管审核意见 -->
-              <el-divider></el-divider>
-              <el-form-item label="分管审核意见：" prop="managerComment" label-width="125px">
-                <el-input type="textarea" :rows="3" placeholder="请输入分管审核意见" v-model="form.managerComment"
-                  :disabled="taskName != '分管审核'">
-                </el-input>
-              </el-form-item>
-              <el-row>
-                <el-col :span="6" :xs="24" :offset="12">
-                  <el-form-item label="签名：" label-width="120px">
-                    <span class="auditor"> {{ form.managerUser ? form.managerUser.nickName : managerUser }} </span>
+                  <el-row class="sign-line">
+                    <el-col :span="6" :offset="11">
+                      签名：<span class="auditor">{{ form.managerUser ? form.managerUser.nickName : managerUser }}</span>
+                    </el-col>
+                    <el-col :span="6">
+                      日期：<span>{{ form.managerTime ? form.managerTime : managerTime }}</span>
+                    </el-col>
+                  </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">已归还设备</td>
+                <td colspan="10">
+                  <el-table ref="returnDevicesRef" class="embed-table" :data="returnDevicesList" size="small" border
+                    row-key="deviceId" @selection-change="handleSelectionReturn">
+                    <el-table-column v-if="taskName == '归还确认'" type="selection" width="55" :selectable="checkReturnSelectable" />
+                    <el-table-column v-else label="归还状态" width="100" align="center">
+                      <template slot-scope="scope">
+                        <span class="return-status is-returned" v-if="isDeviceReturned(scope.row)">
+                          <i class="el-icon-success"></i>已归还
+                        </span>
+                        <span class="return-status is-pending" v-else>
+                          <i class="el-icon-remove-outline"></i>未归还
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="序号" type="index" width="55" align="center" />
+                    <el-table-column label="出厂编号" align="center" prop="code" min-width="100" />
+                    <el-table-column label="设备品牌" align="center" prop="brand" min-width="90" />
+                    <el-table-column label="设备名称" align="center" prop="name" min-width="100" />
+                    <el-table-column label="规格型号" align="center" prop="series" min-width="90" />
+                    <el-table-column label="存放地址" align="center" prop="place" min-width="100" />
+                  </el-table>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">需维修设备</td>
+                <td colspan="10">
+                  <el-form-item prop="repairDevices" class="table-form-item">
+                    <el-select style="width: 100%;" v-model="form.repairDevices" filterable multiple placeholder="请选择"
+                      clearable :disabled="taskName != '归还确认'">
+                      <el-option v-for="item in modifyDeviceList" :key="item.deviceId"
+                        :label="item.name + '【' + (item.brand != null ? item.brand : '') + (item.series != null ? '-' + item.series + '】' : '')
+                          + (item.code != null ? '（设备编号：' + item.code + '）' : '') + '📍' + item.place"
+                        :value="item.deviceId">
+                      </el-option>
+                    </el-select>
                   </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item label="日期：" label-width="120px">
-                    <span> {{ form.managerTime ? form.managerTime : managerTime }} </span>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">备注</td>
+                <td colspan="10">
+                  <el-form-item prop="remark" class="table-form-item">
+                    <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="form.remark"
+                      :disabled="taskName != '归还确认'">
+                    </el-input>
                   </el-form-item>
-                </el-col>
-              </el-row>
-              <!-- 归还确认 -->
-              <el-divider></el-divider>
-              <el-form-item label="已归还设备">
-                <el-table ref="returnDevicesRef" :data="returnDevicesList" @selection-change="handleSelectionReturn">
-                  <el-table-column type="selection" width="55" disabled />
-                  <el-table-column label="序号" type="index" />
-                  <el-table-column label="出厂编号" align="center" prop="code" />
-                  <el-table-column label="设备品牌" align="center" prop="brand" />
-                  <el-table-column label="设备名称" align="center" prop="name" />
-                  <el-table-column label="规格型号" align="center" prop="series" />
-                  <el-table-column label="存放地址" align="center" prop="place" />
-                </el-table>
-              </el-form-item>
-              <el-form-item label="需维修设备：" prop="repairDevices" label-width="120px">
-                <el-select style="width: 100%;" v-model="form.repairDevices" filterable multiple placeholder="请选择"
-                  clearable :disabled="taskName != '归还确认'">
-                  <el-option v-for="item in modifyDeviceList" :key="item.deviceId" :label="item.name + '【' + (item.brand != null ? item.brand : '') + (item.series != null ? '-' + item.series + '】' : '')
-                    + (item.code != null ? '（设备编号：' + item.code + '）' : '') + '📍' + item.place"
-                    :value="item.deviceId">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="备注：" prop="remark" label-width="120px">
-                <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="form.remark"
-                  :disabled="taskName != '归还确认'">
-                </el-input>
-              </el-form-item>
-              <el-form-item label="归还日期：" style="margin-left:20px" prop="returnDate">
-                <el-date-picker style="width:170px;" v-model="form.returnDate" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期" :disabled="taskName != '归还确认'">
-                </el-date-picker>
-              </el-form-item>
-            </el-form>
-            <el-row style="text-align: center;" v-if="taskName == '设备申请'">
-              <el-button type="primary" @click="submit">提交申请</el-button>
-            </el-row>
-            <el-row style="text-align: center;" v-else>
-              <el-button type="warning" @click="saves()" v-if="taskName">保存</el-button>
-              <el-button type="primary" @click="completeApply()" v-if="taskName">完成审批</el-button>
-            </el-row>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2" class="label-cell">归还日期</td>
+                <td colspan="10">
+                  <el-form-item prop="returnDate" class="table-form-item">
+                    <el-date-picker style="width: 240px;" v-model="form.returnDate" value-format="yyyy-MM-dd" type="date"
+                      placeholder="选择日期" :disabled="taskName != '归还确认'">
+                    </el-date-picker>
+                  </el-form-item>
+                </td>
+              </tr>
+            </table>
           </div>
-        </el-card>
+        </el-form>
+        <div class="form-footer" v-if="taskName == '设备申请'">
+          <el-button type="primary" @click="submit">提交申请</el-button>
+        </div>
+        <div class="form-footer" v-else-if="taskName">
+          <el-button type="warning" @click="saves()">保存</el-button>
+          <el-button type="primary" @click="completeApply()">完成审批</el-button>
+        </div>
       </el-col>
       <el-col :span="6" :xs="24" v-if="flowDisabled">
         <el-card>
@@ -249,11 +299,6 @@ export default {
       default: false
     }
   },
-  watch: {
-    'taskForm.formId'() {
-      this.initForm();
-    }
-  },
   created() {
     if (this.taskName == '分管审核') {
       this.managerUser = this.$store.getters.name;
@@ -306,13 +351,117 @@ export default {
       clicDevice: {},
       clickRowIndex: 0,
       multiple: true,
+      isSyncingReturnSelection: false,
+    }
+  },
+  watch: {
+    'taskForm.formId'() {
+      this.initForm();
+    },
+    returnDevicesList() {
+      this.trySyncReturnDeviceSelection();
+    },
+    taskName(val) {
+      if (val == '归还确认') {
+        this.trySyncReturnDeviceSelection();
+      }
     }
   },
   mounted() {
     this.initRules();
     this.initForm();
   },
+  computed: {
+    returnedDeviceIdSet() {
+      const rd = this.form.returnDevices;
+      if (!rd) {
+        return new Set();
+      }
+      if (Array.isArray(rd)) {
+        return new Set(rd.map(id => Number(id)));
+      }
+      if (typeof rd === 'string' && rd !== '') {
+        return new Set(rd.split(',').map(id => Number(id)));
+      }
+      return new Set();
+    }
+  },
   methods: {
+    isDeviceReturned(device) {
+      return device && this.returnedDeviceIdSet.has(Number(device.deviceId));
+    },
+    parseIdList(value) {
+      if (value == null || value === undefined || value === '') {
+        return [];
+      }
+      if (Array.isArray(value)) {
+        return value.map(id => Number(id));
+      }
+      return String(value).split(',').filter(id => id !== '').map(id => Number(id));
+    },
+    async loadDevicesByIds(ids) {
+      if (!ids.length) {
+        return [];
+      }
+      const devices = await Promise.all(
+        ids.map(id => getDevice(id).then(result => result.data).catch(() => null))
+      );
+      return devices.filter(Boolean);
+    },
+    async initDeviceFormData(data) {
+      const deviceIds = this.parseIdList(data.devices);
+      const modifyIds = this.parseIdList(data.modifyDevices);
+
+      if (deviceIds.length) {
+        this.deviceList = await this.loadDevicesByIds(deviceIds);
+        data.devices = deviceIds;
+        this.form.devices = deviceIds;
+      } else {
+        data.devices = [];
+        this.deviceList = [];
+        this.form.devices = [];
+      }
+
+      const grantIds = modifyIds.length ? modifyIds : deviceIds;
+      if (grantIds.length) {
+        this.modifyDeviceList = await this.loadDevicesByIds(grantIds);
+        data.modifyDevices = grantIds;
+        this.form.modifyDevices = grantIds;
+      } else {
+        data.modifyDevices = [];
+        this.modifyDeviceList = [];
+        this.form.modifyDevices = [];
+      }
+
+      this.setupReturnDevicesList(data);
+
+      if (data.repairDevices) {
+        this.form.repairDevices = this.parseIdList(data.repairDevices);
+      }
+      if (data.projectId) {
+        getProject(data.projectId).then(response => {
+          this.chooseProject = response.data;
+          this.isSelect = true;
+        });
+      }
+    },
+    setupReturnDevicesList(data) {
+      this.returnDevicesList = [...this.modifyDeviceList];
+      const returnIds = this.parseIdList(data.returnDevices);
+      this.form.returnDevices = returnIds;
+      this.trySyncReturnDeviceSelection();
+    },
+    checkReturnSelectable() {
+      return this.taskName == '归还确认' && !this.formDisabled;
+    },
+    trySyncReturnDeviceSelection() {
+      if (this.taskName != '归还确认' || !this.returnDevicesList.length) {
+        return;
+      }
+      this.$nextTick(() => {
+        this.syncReturnDeviceSelection();
+      });
+    },
     initRules() {
       if (this.taskName == '设备申请') {
         this.rules = {
@@ -368,71 +517,7 @@ export default {
           this.formTotal = 1;
           let data = res.data;
           this.form = data;
-          // 处理devices
-          if (res.data.devices == null || res.data.devices == undefined || res.data.devices == "") {
-            data.devices = []
-          } else {
-            data.devices = data.devices.split(',');
-            let arr = []
-            this.deviceList = []
-            for (let d of data.devices) {
-              arr.push(parseInt(d));
-              getDevice(d).then(result => {
-                this.deviceList.push(result.data);
-              })
-            }
-            data.devices = arr;
-          }
-          // 处理modifyDevices
-          if (res.data.modifyDevices == null || res.data.modifyDevices == undefined || res.data.modifyDevices == "") {
-            data.modifyDevices = []
-            this.modifyDeviceList = this.deviceList
-            this.form.modifyDevices = data.devices;
-          } else {
-            data.modifyDevices = data.modifyDevices.split(',');
-            let arr = []
-            this.modifyDeviceList = []
-            for (let d of data.modifyDevices) {
-              arr.push(parseInt(d));
-              getDevice(d).then(result => {
-                this.modifyDeviceList.push(result.data);
-              })
-            }
-            data.modifyDevices = arr;
-            this.form.modifyDevices = arr;
-          }
-          // 处理 returnDevices  
-          if (!data.returnDevices || data.returnDevices === "") {
-            data.returnDevices = [];
-            this.returnDevicesList = this.modifyDeviceList; // 如果逻辑允许，这里可以直接赋值 
-          } else {
-            this.returnDevicesList = this.modifyDeviceList;
-            let selectReturnDevicesIds = data.returnDevices.split(',');
-            let selectReturnDevicesPromises = selectReturnDevicesIds.map(d => getDevice(d).then(result => result.data));
-            Promise.all(selectReturnDevicesPromises).then(returnDevices => {
-              if (returnDevices) {
-                let deviceIdsSet = new Set(this.returnDevicesList.map(device => device.deviceId));
-                returnDevices.forEach(device1 => {
-                  if (deviceIdsSet.has(device1.deviceId)) {
-                    const matchingDevice = this.returnDevicesList.find(device2 => device2.deviceId === device1.deviceId);
-                    if (matchingDevice) {
-                      this.$refs.returnDevicesRef.toggleRowSelection(matchingDevice);
-                    }
-                  }
-                });
-              }
-            })
-          }
-          if (data.repairDevices) {
-            this.form.repairDevices = data.repairDevices.split(',');
-            this.form.repairDevices = this.form.repairDevices.map(v => Number(v));
-          }
-          if (data.projectId) {
-            getProject(data.projectId).then(response => {
-              this.chooseProject = response.data;
-              this.isSelect = true
-            })
-          }
+          this.initDeviceFormData(data);
         }
       })
     },
@@ -686,6 +771,7 @@ export default {
             list.push(j.deviceId)
           }
           this.form.modifyDevices = list;
+          this.returnDevicesList = [...this.modifyDeviceList];
         }
       }
       this.openDevice = false;
@@ -703,15 +789,34 @@ export default {
         list.push(j.deviceId)
       }
       this.form.modifyDevices = list;
+      this.returnDevicesList = [...this.modifyDeviceList];
     },
     addRowdata() {
       this.openDevice = true;
       this.multiple = true;
     },
-    // 选择已归还设备
+    // 选择已归还设备（仅归还确认节点）
     handleSelectionReturn(val) {
-      const ids = val.map(item => item.deviceId);
-      this.form.returnDevices = ids
+      if (this.taskName != '归还确认' || this.isSyncingReturnSelection) {
+        return;
+      }
+      this.form.returnDevices = val.map(item => Number(item.deviceId));
+    },
+    syncReturnDeviceSelection() {
+      const table = this.$refs.returnDevicesRef;
+      if (this.taskName != '归还确认' || !table || !this.returnDevicesList.length) {
+        return;
+      }
+      this.isSyncingReturnSelection = true;
+      table.clearSelection();
+      this.returnDevicesList.forEach(device => {
+        if (this.isDeviceReturned(device)) {
+          table.toggleRowSelection(device, true);
+        }
+      });
+      this.$nextTick(() => {
+        this.isSyncingReturnSelection = false;
+      });
     }
   },
 }
@@ -720,6 +825,184 @@ export default {
 <style lang="scss" scoped>
 @import "@/assets/styles/element-reset.scss";
 
+$border-light: #dcdfe6;
+$border-soft: #e4e7ed;
+$label-bg: #f0f2f5;
+$label-color: #606266;
+$text-primary: #303133;
+$accent: #409eff;
+
+.borrow-table-form {
+  margin-top: 16px;
+
+  .table-form-item {
+    margin-bottom: 0;
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+      line-height: normal;
+    }
+
+    ::v-deep .el-form-item__error {
+      position: relative;
+      padding-top: 2px;
+    }
+  }
+
+  ::v-deep .el-input__inner,
+  ::v-deep .el-textarea__inner {
+    border-color: $border-light;
+    border-radius: 6px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: #c0c4cc;
+    }
+
+    &:focus {
+      border-color: $accent;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+    }
+  }
+
+  ::v-deep .el-input.is-disabled .el-input__inner,
+  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    background-color: #f5f7fa;
+    color: #606266;
+  }
+
+  .embed-table {
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  .return-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1;
+
+    i {
+      font-size: 16px;
+    }
+
+    &.is-returned {
+      color: #67c23a;
+    }
+
+    &.is-pending {
+      color: #909399;
+    }
+  }
+}
+
+.form-table-wrap {
+  border: 1px solid $border-soft;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.form-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 14px;
+  color: $text-primary;
+
+  tr {
+    transition: background-color 0.15s;
+  }
+
+  tr:hover td:not(.label-cell) {
+    background-color: #fafcff;
+  }
+
+  td {
+    padding: 12px 14px;
+    border-bottom: 1px solid $border-light;
+    vertical-align: middle;
+    word-break: break-word;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  .label-cell {
+    width: 110px;
+    text-align: right;
+    font-size: 13px;
+    font-weight: 600;
+    color: $label-color;
+    background-color: $label-bg;
+    border-right: 1px solid $border-light;
+    white-space: nowrap;
+  }
+}
+
+.inner-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 8px;
+  font-size: 13px;
+  border: 1px solid $border-light;
+  border-radius: 8px;
+  overflow: hidden;
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid $border-light;
+    border-right: 1px solid $border-light;
+    vertical-align: middle;
+    background: #fff;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+
+  td:last-child {
+    border-right: none;
+  }
+
+  .label-cell {
+    text-align: center;
+    font-weight: 600;
+    font-size: 12px;
+    color: $label-color;
+    background-color: $label-bg;
+    white-space: nowrap;
+  }
+}
+
+.sign-line {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid $border-light;
+  font-size: 13px;
+  color: $label-color;
+  line-height: 26px;
+
+  .auditor {
+    color: $text-primary;
+    font-weight: 500;
+  }
+}
+
+.form-footer {
+  margin-top: 24px;
+  padding-bottom: 20px;
+  text-align: center;
+}
+</style>
+
+<style>
 ::v-deep .el-input.is-disabled .el-input__inner {
   color: #121212 !important;
 }

oa-ui/src/views/oa/device/approval.vue

@@ -265,8 +265,9 @@ export default {
       this.title = "添加cmc设备审批";
     },
     handleView(row) {
+      this.taskForm.formId = row.deviceApplyId;
       this.open = true;
-      this.taskForm.formId = row.deviceApplyId
+      this.title = "查看设备审批";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {

oa-ui/src/views/oa/titles/record.vue

@@ -102,77 +102,116 @@
       @pagination="getList" />
 
     <!-- 添加或修改职称评审对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
-      <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
-        <el-form-item label="申请人" prop="userId">
-          {{ getUserName(form.userId) }}
-        </el-form-item>
-        <el-form-item label="评审年度" prop="annual">
-          {{ form.annual }}
-        </el-form-item>
-        <el-form-item label="评审单位" prop="institude">
-          {{ form.institude }}
-        </el-form-item>
-        <el-form-item label="职称类型" prop="type">
-          {{ form.type }}
-        </el-form-item>
-        <el-form-item label="职称级别" prop="level">
-          {{ form.level }}
-        </el-form-item>
-        <el-form-item label="职称专业名称" prop="titleProfession">
-          {{ form.titleProfession }}
-        </el-form-item>
-        <el-form-item label="评审表(盖章前)" prop="sheet">
-          <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.sheet}`)">
-            {{ getFileName(form.sheet) }}
-          </el-link>
-          <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.sheet}`" :underline="false"
-            target="_blank">
-            <span class="el-icon-download">下载文件</span>
-          </el-link>
-        </el-form-item>
-        <el-form-item label="评审表(盖章后)" prop="sheetStamp">
-          <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.sheetStamp}`)">
-            {{ getFileName(form.sheetStamp) }}
-          </el-link>
-          <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.sheetStamp}`"
-            :underline="false" target="_blank">
-            <span class="el-icon-download">下载文件</span>
-          </el-link>
-        </el-form-item>
-        <el-form-item label="其他材料" prop="material">
-          <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.material}`)">
-            {{ getFileName(form.material) }}
-          </el-link>
-          <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.material}`" :underline="false"
-            target="_blank">
-            <span class="el-icon-download">下载文件</span>
-          </el-link>
-        </el-form-item>
-        <!-- 审核是否通过并添加材料 -->
-        <el-form-item label="是否通过" prop="isApproved">
-          <el-switch v-model="form.isApproved" active-value="1" inactive-value="0" active-text="通过" inactive-text="未通过">
-          </el-switch>
-        </el-form-item>
-        <template v-if="form.isApproved == '1'">
-          <el-form-item label="公示红头文件" prop="publicityFile">
-            <file-upload v-model="form.publicityFile" :filePathName="'职称评审/公示红头文件/' + form.annual + '/' + getUserName(form.userId)" :fileType="['pdf']"
-              @input="getPublicityFilePath" />
-          </el-form-item>
-          <el-form-item label="证书扫描件" prop="scanFile">
-            <file-upload v-model="form.scanFile" :filePathName="'职称评审/证书扫描件/' + form.annual + '/' + getUserName(form.userId)" :fileType="['pdf']"
-              @input="getScanFilePath" />
-          </el-form-item>
-          <el-form-item label="证书取得时间" prop="obtainTime">
-            <el-date-picker clearable v-model="form.obtainTime" type="date" value-format="yyyy-MM-dd"
-              placeholder="请选择证书取得时间">
-            </el-date-picker>
-          </el-form-item>
-        </template>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+    <el-dialog :visible.sync="open" width="760px" append-to-body custom-class="title-eval-dialog"
+      :close-on-click-modal="false">
+      <template slot="title">
+        <div class="title-eval-dialog__header">
+          <i class="el-icon-edit-outline" />
+          <span>{{ title }}</span>
+        </div>
+      </template>
+      <div class="title-eval-dialog__body">
+        <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
+          <div class="form-section">
+            <div class="section-title">
+              <i class="el-icon-user" />
+              <span>基本信息</span>
+            </div>
+            <el-descriptions :column="2" border size="medium" class="info-descriptions">
+              <el-descriptions-item label="申请人">
+                <span class="info-value">{{ getUserName(form.userId) || '—' }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="评审年度">
+                <span class="info-value">{{ form.annual || '—' }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="评审单位">
+                <span class="info-value">{{ form.institude || '—' }}</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="职称类型">
+                <el-tag v-if="form.type" size="small" effect="plain">{{ form.type }}</el-tag>
+                <span v-else class="info-empty">—</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="职称级别">
+                <el-tag v-if="form.level" size="small" type="warning" effect="plain">{{ form.level }}</el-tag>
+                <span v-else class="info-empty">—</span>
+              </el-descriptions-item>
+              <el-descriptions-item label="职称专业名称" :span="2">
+                <span class="info-value">{{ form.titleProfession || '—' }}</span>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+
+          <div class="form-section">
+            <div class="section-title">
+              <i class="el-icon-folder-opened" />
+              <span>申请材料</span>
+            </div>
+            <el-form-item label-width="140px" v-for="item in applicationFiles" :key="item.key" :label="item.label" :prop="item.key">
+              <div v-if="hasFile(item.path)" class="file-row">
+                <el-link type="primary" :underline="false" @click="reviewWord(getUploadUrl(item.path))">
+                  <i class="el-icon-document" /> {{ getFileName(item.path) }}
+                </el-link>
+                <el-link class="ml20" type="warning" :href="getUploadUrl(item.path)" :underline="false" target="_blank">
+                  <i class="el-icon-download" /> 下载文件
+                </el-link>
+              </div>
+              <span v-else class="info-empty">暂无文件</span>
+            </el-form-item>
+          </div>
+
+          <div class="form-section form-section--result">
+            <div class="section-title">
+              <i class="el-icon-circle-check" />
+              <span>审核结果</span>
+            </div>
+            <el-form-item label="是否通过" prop="isApproved" class="approve-switch-item">
+              <el-switch v-model="form.isApproved" active-value="1" inactive-value="0" active-text="通过"
+                inactive-text="未通过" active-color="#67c23a" inactive-color="#f56c6c" />
+            </el-form-item>
+            <transition name="el-fade-in">
+              <div v-if="form.isApproved == '1'" class="pass-materials">
+                <el-alert title="通过评审后，请补充公示文件、证书扫描件及取得时间" type="info" :closable="false" show-icon
+                  class="pass-materials__tip" />
+                <el-form-item label="公示红头文件" prop="publicityFile">
+                  <div v-if="hasFile(form.publicityFile)" class="file-row file-row--readonly">
+                    <el-link type="primary" :underline="false" @click="reviewWord(getUploadUrl(form.publicityFile))">
+                      <i class="el-icon-document" /> {{ getFileName(form.publicityFile) }}
+                    </el-link>
+                    <el-link class="ml20" type="warning" :href="getUploadUrl(form.publicityFile)" :underline="false"
+                      target="_blank">
+                      <i class="el-icon-download" /> 下载文件
+                    </el-link>
+                  </div>
+                  <file-upload v-model="form.publicityFile"
+                    :filePathName="'职称评审/公示红头文件/' + form.annual + '/' + getUserName(form.userId)"
+                    :fileType="['pdf']" @input="getPublicityFilePath" />
+                </el-form-item>
+                <el-form-item label="证书扫描件" prop="scanFile">
+                  <div v-if="hasFile(form.scanFile)" class="file-row file-row--readonly">
+                    <el-link type="primary" :underline="false" @click="reviewWord(getUploadUrl(form.scanFile))">
+                      <i class="el-icon-document" /> {{ getFileName(form.scanFile) }}
+                    </el-link>
+                    <el-link class="ml20" type="warning" :href="getUploadUrl(form.scanFile)" :underline="false"
+                      target="_blank">
+                      <i class="el-icon-download" /> 下载文件
+                    </el-link>
+                  </div>
+                  <file-upload v-model="form.scanFile"
+                    :filePathName="'职称评审/证书扫描件/' + form.annual + '/' + getUserName(form.userId)" :fileType="['pdf']"
+                    @input="getScanFilePath" />
+                </el-form-item>
+                <el-form-item label="证书取得时间" prop="obtainTime">
+                  <el-date-picker v-model="form.obtainTime" clearable type="date" value-format="yyyy-MM-dd"
+                    placeholder="请选择证书取得时间" style="width: 100%" />
+                </el-form-item>
+              </div>
+            </transition>
+          </div>
+        </el-form>
+      </div>
+      <div slot="footer" class="title-eval-dialog__footer">
         <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" icon="el-icon-check" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -248,6 +287,15 @@ export default {
     }
   },
   computed: {
+    applicationFiles() {
+      const form = this.form || {};
+      return [
+        { key: 'sheet', label: '评审表（盖章前）', path: form.sheet },
+        // { key: 'secretOpinion', label: '保密审核意见单及承诺书', path: form.secretOpinion },
+        { key: 'sheetStamp', label: '评审表（盖章后）', path: form.sheetStamp },
+        { key: 'material', label: '其他材料', path: form.material },
+      ];
+    },
     formRules() {
       return {
         publicityFile: [
@@ -263,6 +311,18 @@ export default {
     },
   },
   methods: {
+    hasFile(path) {
+      return path != null && String(path).trim() !== '';
+    },
+    getUploadUrl(path) {
+      if (!this.hasFile(path)) return '';
+      const p = String(path).trim();
+      if (/^https?:\/\//i.test(p)) return p;
+      if (p.indexOf('/profile/upload') === 0) {
+        return `${this.baseUrl}${p}`;
+      }
+      return `${this.baseUrl}/profile/upload${p}`;
+    },
     /** 查询职称评审列表 */
     getList() {
       this.loading = true;
@@ -303,6 +363,7 @@ export default {
         level: null,
         titleProfession: null,
         sheet: null,
+        secretOpinion: null,
         sheetStamp: null,
         material: null,
         isApproved: null,
@@ -344,12 +405,33 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      let targetRow = row;
+      if (!targetRow || !targetRow.titleEvalId) {
+        const selected = (this.evalList || []).filter((item) =>
+          (this.ids || []).includes(item.titleEvalId)
+        );
+        targetRow = selected.length === 1 ? selected[0] : null;
+      }
+      const titleEvalId = targetRow
+        ? targetRow.titleEvalId
+        : Array.isArray(this.ids)
+          ? this.ids[0]
+          : this.ids;
+      if (!titleEvalId) {
+        this.$modal.msgWarning('请选择一条记录');
+        return;
+      }
       this.reset();
-      const titleEvalId = row.titleEvalId || this.ids;
+      this.title = '修改职称评审';
+      this.open = true;
+      if (targetRow) {
+        this.form = { ...this.form, ...targetRow };
+      }
       getEval(titleEvalId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改职称评审";
+        this.form = { ...this.form, ...(response.data || {}) };
+        this.$nextTick(() => {
+          this.$refs.form && this.$refs.form.clearValidate();
+        });
       });
     },
     /**switch切换到未通过时清除上传文件 */
@@ -410,3 +492,131 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.form-section {
+  margin-bottom: 20px;
+  padding: 18px 20px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #fafbfc;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #409eff;
+
+    i {
+      color: #409eff;
+      margin-right: 8px;
+      font-size: 18px;
+    }
+
+    span {
+      font-size: 15px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+}
+
+.form-section--result {
+  background: #fff;
+}
+
+.info-descriptions {
+  ::v-deep .el-descriptions__label {
+    width: 110px;
+    color: #606266;
+    font-weight: 500;
+  }
+}
+
+.info-value {
+  color: #303133;
+  font-weight: 500;
+}
+
+.info-empty {
+  color: #c0c4cc;
+  font-size: 13px;
+}
+
+.file-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 32px;
+
+  &--readonly {
+    margin-bottom: 8px;
+    padding: 8px 12px;
+    background: #f5f7fa;
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+  }
+}
+
+.approve-switch-item {
+  margin-bottom: 8px;
+}
+
+.pass-materials {
+  margin-top: 8px;
+  padding-top: 16px;
+  border-top: 1px dashed #e4e7ed;
+
+  &__tip {
+    margin-bottom: 16px;
+  }
+}
+</style>
+
+<style lang="scss">
+.title-eval-dialog {
+  border-radius: 10px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    padding: 18px 24px 14px;
+    border-bottom: 1px solid #ebeef5;
+    background: linear-gradient(135deg, #f5f9ff 0%, #fff 100%);
+  }
+
+  .el-dialog__body {
+    padding: 20px 24px;
+    max-height: 68vh;
+    overflow-y: auto;
+  }
+
+  .el-dialog__footer {
+    padding: 14px 24px 18px;
+    border-top: 1px solid #ebeef5;
+    background: #fafbfc;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    font-size: 17px;
+    font-weight: 600;
+    color: #303133;
+
+    i {
+      margin-right: 10px;
+      font-size: 20px;
+      color: #409eff;
+    }
+  }
+
+  &__footer {
+    text-align: right;
+  }
+}
+</style>