审批历史 和代办审批

src/api/adminApi.ts

@@ -251,7 +251,7 @@ export class manageService {
   //审批记录
   static stockapprovalrecord(params: any) {
     return request.get<any>({
-      url: '/admin/approval/records/list',
+      url: '/admin/approval/records/todo',
       params
     })
   }

src/api/crmApi.ts

@@ -260,7 +260,7 @@ export class CrmService {
   //审批记录
   static stockapprovalrecord(params: any) {
     return request.get<any>({
-      url: '/crm/approval/records/list',
+      url: '/crm/approval/records/todo',
       params
     })
   }

src/views/admin/approval/stocking_auth.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="stocking-page">
     <div class="stocking-toolbar boxshadow">
-      <!-- <div class="toolbar-left">
-        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
-      </div> -->
       <div class="toolbar-right">
         <el-input
           v-model="keyword"
@@ -34,12 +31,17 @@
         <template #default>
           <ElTableColumn label="审批单名称" prop="flows_name" min-width="140" />
           <ElTableColumn label="审批说明" prop="biz_desc" min-width="160" />
-          <ElTableColumn label="审批结果" prop="action_desc" min-width="160" />
+          <ElTableColumn label="提交人" prop="initiator_name" min-width="120">
-          <ElTableColumn label="提交人" prop="initiator_name" min-width="120" />
+            <template #default="scope">
+              <div style="display: flex; align-items: center">
+                <img class="avatar" :src="scope.row.initiator_avatar" alt="" />
+                <p>{{ scope.row.initiator_name }}</p>
+              </div>
+            </template>
+          </ElTableColumn>
           <ElTableColumn label="审核人" prop="approver_name" min-width="120" />
           <ElTableColumn label="状态" prop="status_desc" min-width="120" />
-          <ElTableColumn label="审批时间" prop="approved_at" min-width="120" />
+          <ElTableColumn label="提交时间" prop="created_at" min-width="120" />
-          <ElTableColumn label="创建时间" prop="created_at" min-width="120" />
           <ElTableColumn label="操作" fixed="right" min-width="140" align="center">
             <template #default="scope">
               <ElRow :gutter="10" justify="center">
@@ -112,7 +114,6 @@
   import { router } from '@/router'
   import { manageService } from '@/api/adminApi'
   import { useAuth } from '@/composables/useAuth'
-  import { CrmService } from '@/api/crmApi'
   import { commonService } from '@/api/commonApi'
   import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
   import type { OrderData } from '@/composables/useOrderDetailDialog'
@@ -129,25 +130,8 @@
 
   // 审批弹出框相关
   const approvalDialogVisible = ref(false)
-  const stockingInfo = ref<any>({})
-
-  // 回显视图模型，字段与模板一致
-  const header = reactive({ order_no: '', salesman: '' })
-  const base = reactive({
-    pn_no: '',
-    date: '',
-    close_date: '',
-    channel: '',
-    customer_name: '',
-    client_country: '',
-    total_cif: '',
-    total_cif_currency: '',
-    contract_rate: ''
-  })
-  const items = ref<any[]>([])
 
   const approvalNotes = ref('')
-  const approvalAction = ref('')
   onMounted(() => {
     getList()
   })
@@ -164,7 +148,7 @@
       const params = {
         current: currentPage,
         size: pageSize,
-        is_final: 0, // 只获取备货单，非终版
+        scene: 'todo',
         keyword: keyword.value
       }
 
@@ -243,6 +227,12 @@
 </script>
 
 <style scoped lang="scss">
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    margin-right: 10px;
+  }
   .stocking-page {
     background: var(--art-main-bg-color);
     min-height: 100vh;

src/views/admin/approval/stocking_auth_history.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="stocking-page">
+    <div class="stocking-toolbar boxshadow">
+      <!-- <div class="toolbar-left">
+        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
+      </div> -->
+      <div class="toolbar-right">
+        <el-input
+          v-model="keyword"
+          placeholder="请输入客户名称"
+          clearable
+          style="width: 260px"
+          @keyup.enter="getList"
+        >
+          <template #suffix>
+            <el-icon class="clickable" @click="getList"><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="boxshadow">
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="审批单名称" prop="flows_name" min-width="140" />
+          <ElTableColumn label="审批说明" prop="biz_desc" min-width="160" />
+          <ElTableColumn label="审批结果" prop="action_desc" min-width="160" />
+          <ElTableColumn label="提交人" prop="initiator_name" min-width="120">
+            <template #default="scope">
+              <div style="display: flex; align-items: center">
+                <img class="avatar" :src="scope.row.initiator_avatar" alt="" />
+                <p>{{ scope.row.initiator_name }}</p>
+              </div>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="审核人" prop="approver_name" min-width="120" />
+          <ElTableColumn label="状态" prop="status_desc" min-width="120" />
+          <ElTableColumn label="审批时间" prop="approved_at" min-width="120" />
+          <ElTableColumn label="提交时间" prop="created_at" min-width="120" />
+          <ElTableColumn label="操作" fixed="right" min-width="140" align="center">
+            <template #default="scope">
+              <ElRow :gutter="10" justify="center">
+                <el-link
+                  type="primary"
+                  underline="never"
+                  @click="handleView(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe76c;</i> 查看审批
+                </el-link>
+                <el-link
+                  v-if="scope.row.status == 'pending'"
+                  type="success"
+                  underline="never"
+                  @click="handleCreateRepair(scope.row)"
+                >
+                  <i class="iconfont-sys">&#xe6bf;</i> 快速审批
+                </el-link>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+
+    <!-- 快速审批弹出框 -->
+    <el-dialog
+      v-model="approvalDialogVisible"
+      title="合塑实业-汽车事业部-备货单(客户下定)"
+      width="80%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      class="approval-dialog"
+    >
+      <div class="approval-content">
+        <!-- 头部信息 -->
+        <OrderDetailContent :orderData="orderDialog.orderData" />
+        <!-- 审批备注 -->
+        <div class="info-section">
+          <ElRow :gutter="12">
+            <ElCol :span="24">
+              <el-input
+                  v-model="approvalNotes"
+                  type="textarea"
+                  :rows="2"
+                  placeholder="备注"
+                  class="approval-notes"
+                />
+            </ElCol>
+          </ElRow>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton type="primary" plain size="large" class="submit-btn" @click="handleApprove('reject')"
+            >驳回</ElButton
+          >
+          <ElButton type="primary" size="large" class="submit-btn" @click="handleApprove('approve')"
+            >同意</ElButton
+          >
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { router } from '@/router'
+  import { manageService } from '@/api/adminApi'
+  import { useAuth } from '@/composables/useAuth'
+  import { CrmService } from '@/api/crmApi'
+  import { commonService } from '@/api/commonApi'
+  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
+  import type { OrderData } from '@/composables/useOrderDetailDialog'
+  defineOptions({ name: 'AdminStockingPage' })
+  const orderDialog = reactive({
+    orderData: {} as OrderData
+  })
+  const { hasAuth } = useAuth()
+  const loading = ref(false)
+  const keyword = ref('')
+  const tableRef = ref()
+  const tableData = ref<any[]>([])
+  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
+
+  // 审批弹出框相关
+  const approvalDialogVisible = ref(false)
+  const stockingInfo = ref<any>({})
+
+  // 回显视图模型，字段与模板一致
+  const header = reactive({ order_no: '', salesman: '' })
+  const base = reactive({
+    pn_no: '',
+    date: '',
+    close_date: '',
+    channel: '',
+    customer_name: '',
+    client_country: '',
+    total_cif: '',
+    total_cif_currency: '',
+    contract_rate: ''
+  })
+  const items = ref<any[]>([])
+
+  const approvalNotes = ref('')
+  const approvalAction = ref('')
+  onMounted(() => {
+    getList()
+  })
+
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    // 不自动请求，保持与截图行为一致，点击搜索或回车触发
+  })
+
+  const getList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        scene: 'history',
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await manageService.stockapprovalrecord(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSizeChange = (size: number) => {
+    pagination.pageSize = size
+    getList()
+  }
+  const handleCurrentChange = (page: number) => {
+    pagination.currentPage = page
+    getList()
+  }
+  const handleView = (row: any) => {
+    router.push({
+      path: '/admin/approval/stocking_auth_detil',
+      query: { id: row.id, biz_id: row.biz_id, instance_id: row.instance_id, status: row.status } // 可带客户名等参数
+    })
+  }
+  const instance_id = ref('')
+  const handleCreateRepair = async (row: any) => {
+    instance_id.value = row.instance_id
+    const res = await manageService.checkStock({ id: row.biz_id })
+    const orderData: OrderData = res
+    orderDialog.orderData = orderData
+    approvalDialogVisible.value = true
+  }
+
+  // 审批操作
+  const handleApprove = async (approvalAction: string) => {
+    try {
+      // 这里调用审批API
+      const { message } = await manageService.stockapprovalpass({
+        instance_id: instance_id.value,
+        action: approvalAction,
+        comment: approvalNotes.value
+      })
+
+      ElMessage.success(message)
+      approvalDialogVisible.value = false
+      approvalNotes.value = ''
+      instance_id.value = ''
+      // 刷新列表
+      getList()
+    } catch (error) {
+      console.error('审批失败:', error)
+      ElMessage.error('审批失败')
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    margin-right: 10px;
+  }
+  .stocking-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+  .stocking-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: var(--art-main-bg-color);
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+
+  // 审批弹出框样式
+  .approval-dialog {
+    .approval-content {
+      max-height: 70vh;
+      overflow-y: auto;
+    }
+
+    .header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 12px;
+      color: #333333;
+      .mr40 { margin-right: 40px; }
+    }
+
+    .info-section {
+      margin-bottom: 24px;
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .title-bar {
+          width: 4px;
+          height: 20px;
+          background: #409eff;
+          margin-right: 8px;
+          border-radius: 2px;
+        }
+
+        span {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+    }
+
+    .order-items {
+      .order-item {
+        border: 1px solid #e4e7ed;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+        background: #fafafa;
+
+        .item-header {
+          margin-bottom: 16px;
+          padding-bottom: 12px;
+          border-bottom: 1px solid #e4e7ed;
+
+          .item-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+
+        .item-details {
+          .detail-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin-bottom: 12px;
+
+            .detail-item {
+              display: flex;
+              flex-direction: column;
+
+              label {
+                margin-bottom: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #606266;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .summary-section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      background: #f0f9ff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+
+      .summary-item {
+        .summary-label {
+          font-weight: 600;
+          color: #606266;
+          margin-right: 8px;
+        }
+        .summary-value {
+          font-size: 18px;
+          font-weight: 700;
+          color: #409eff;
+        }
+      }
+    }
+
+    .approval-notes {
+      width: 100%;
+    }
+
+    .dialog-footer {
+      display: flex;
+      justify-content: space-around;
+      width: 500px;
+      margin: auto;
+      gap: 12px;
+
+      .reject-btn {
+        border-color: #409eff;
+        color: #409eff;
+        background: white;
+
+        &:hover {
+          background: #ecf5ff;
+        }
+      }
+
+      .approve-btn {
+        background: #409eff;
+        border-color: #409eff;
+      }
+    }
+  }
+</style>

src/views/crmpc/approval/stocking_auth.vue

@@ -149,7 +149,7 @@
       const params = {
         current: currentPage,
         size: pageSize,
-        is_final: 0, // 只获取备货单，非终版
+        scene: 'todo',
         keyword: keyword.value
       }
 

src/views/crmpc/approval/stocking_auth_history.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="stocking-page">
+    <div class="stocking-toolbar boxshadow">
+      <!-- <div class="toolbar-left">
+        <ElButton type="primary" v-ripple @click="handleCreate">创建备货单</ElButton>
+      </div> -->
+      <div class="toolbar-right">
+        <el-input
+          v-model="keyword"
+          placeholder="请输入客户名称"
+          clearable
+          style="width: 260px"
+          @keyup.enter="getList"
+        >
+          <template #suffix>
+            <el-icon class="clickable" @click="getList"><Search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+    </div>
+
+    <div class="boxshadow">
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="审批单名称" prop="flows_name" min-width="140" />
+          <ElTableColumn label="审批说明" prop="biz_desc" min-width="160" />
+          <ElTableColumn label="审批结果" prop="action_desc" min-width="160" />
+          <ElTableColumn label="提交人" prop="initiator_name" min-width="120" />
+          <ElTableColumn label="审核人" prop="approver_name" min-width="120" />
+          <ElTableColumn label="审批时间" prop="approved_at" min-width="120" />
+          <ElTableColumn label="状态" prop="status_desc" min-width="120" />
+          <ElTableColumn label="创建时间" prop="created_at" min-width="120" />
+          <ElTableColumn label="操作" fixed="right" min-width="140" align="center">
+            <template #default="scope">
+              <ElRow :gutter="10" justify="center">
+                <el-link
+                  type="primary"
+                  underline="never"
+                  @click="handleView(scope.row)"
+                  style="margin-right: 8px"
+                >
+                  <i class="iconfont-sys">&#xe76c;</i> 查看审批
+                </el-link>
+                <el-link
+                  v-if="scope.row.status == 'pending'"
+                  type="success"
+                  underline="never"
+                  @click="handleCreateRepair(scope.row)"
+                >
+                  <i class="iconfont-sys">&#xe6bf;</i> 快速审批
+                </el-link>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+
+    <!-- 快速审批弹出框 -->
+    <el-dialog
+      v-model="approvalDialogVisible"
+      title="合塑实业-汽车事业部-备货单(客户下定)"
+      width="80%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      class="approval-dialog"
+    >
+      <div class="approval-content">
+        <!-- 头部信息 -->
+        <OrderDetailContent :orderData="orderDialog.orderData" />
+        <!-- 审批备注 -->
+        <div class="info-section">
+          <ElRow :gutter="12">
+            <ElCol :span="24">
+              <el-input
+                  v-model="approvalNotes"
+                  type="textarea"
+                  :rows="2"
+                  placeholder="备注"
+                  class="approval-notes"
+                />
+            </ElCol>
+          </ElRow>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton type="primary" plain size="large" class="submit-btn" @click="handleApprove('reject')"
+            >驳回</ElButton
+          >
+          <ElButton type="primary" size="large" class="submit-btn" @click="handleApprove('approve')"
+            >同意</ElButton
+          >
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { router } from '@/router'
+  // import { manageService } from '@/api/adminApi'
+  import { useAuth } from '@/composables/useAuth'
+  import { CrmService } from '@/api/crmApi'
+  import { commonService } from '@/api/commonApi'
+  import OrderDetailContent from '@/components/custom/OrderDetailContent.vue'
+  import type { OrderData } from '@/composables/useOrderDetailDialog'
+
+  defineOptions({ name: 'CrmStockingAuth' }) // 定义组件名称，用于 KeepAlive 缓存控制
+
+  const { hasAuth } = useAuth()
+  const orderDialog = reactive({
+    orderData: {} as OrderData
+  })
+  const loading = ref(false)
+  const keyword = ref('')
+  const tableRef = ref()
+  const tableData = ref<any[]>([])
+  const pagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
+
+  // 审批弹出框相关
+  const approvalDialogVisible = ref(false)
+
+  const approvalNotes = ref('')
+  onMounted(() => {
+    getList()
+  })
+
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    // 不自动请求，保持与截图行为一致，点击搜索或回车触发
+  })
+
+  const getList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        scene: 'history',
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await CrmService.stockapprovalrecord(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSizeChange = (size: number) => {
+    pagination.pageSize = size
+    getList()
+  }
+  const handleCurrentChange = (page: number) => {
+    pagination.currentPage = page
+    getList()
+  }
+  const handleView = (row: any) => {
+    router.push({
+      path: '/crmpc/approval/auth_detil',
+      query: { id: row.id, biz_id: row.biz_id, instance_id: row.instance_id, status: row.status } // 可带客户名等参数
+    })
+  }
+  const getDictItemSelectlist = ref<any[]>([])
+  const getDictItemSelect = async () => {
+    const res = await commonService.getDictItemSelect({ dict_id: '18' })
+    getDictItemSelectlist.value = res
+  }
+  const instance_id = ref('')
+  const handleCreateRepair = async (row: any) => {
+    // getDictItemSelect()
+    instance_id.value = row.instance_id
+    const res = await CrmService.checkStock({ id: row.biz_id })
+    const orderData: OrderData = res
+    orderDialog.orderData = orderData
+    approvalDialogVisible.value = true
+  }
+
+  // 审批操作
+  const handleApprove = async (approvalAction: string) => {
+    try {
+      // 这里调用审批API
+      const { message } = await CrmService.stockapprovalpass({
+        instance_id: instance_id.value,
+        action: approvalAction,
+        comment: approvalNotes.value
+      })
+
+      ElMessage.success(message)
+      approvalDialogVisible.value = false
+      approvalNotes.value = ''
+      instance_id.value = ''
+      // 刷新列表
+      getList()
+    } catch (error) {
+      console.error('审批失败:', error)
+      ElMessage.error('审批失败')
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .stocking-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+  .stocking-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: var(--art-main-bg-color);
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+  }
+  .clickable {
+    cursor: pointer;
+  }
+
+  // 审批弹出框样式
+  .approval-dialog {
+    .approval-content {
+      max-height: 70vh;
+      overflow-y: auto;
+    }
+
+    .header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 12px;
+      color: #333333;
+      .mr40 { margin-right: 40px; }
+    }
+
+    .info-section {
+      margin-bottom: 24px;
+
+      .section-title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .title-bar {
+          width: 4px;
+          height: 20px;
+          background: #409eff;
+          margin-right: 8px;
+          border-radius: 2px;
+        }
+
+        span {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+    }
+
+    .order-items {
+      .order-item {
+        border: 1px solid #e4e7ed;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+        background: #fafafa;
+
+        .item-header {
+          margin-bottom: 16px;
+          padding-bottom: 12px;
+          border-bottom: 1px solid #e4e7ed;
+
+          .item-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+
+        .item-details {
+          .detail-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin-bottom: 12px;
+
+            .detail-item {
+              display: flex;
+              flex-direction: column;
+
+              label {
+                margin-bottom: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                color: #606266;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .summary-section {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      background: #f0f9ff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+
+      .summary-item {
+        .summary-label {
+          font-weight: 600;
+          color: #606266;
+          margin-right: 8px;
+        }
+        .summary-value {
+          font-size: 18px;
+          font-weight: 700;
+          color: #409eff;
+        }
+      }
+    }
+
+    .approval-notes {
+      width: 100%;
+    }
+
+    .dialog-footer {
+      justify-content: space-around;
+      width: 500px;
+      margin: auto;
+      display: flex;
+      gap: 12px;
+
+      .reject-btn {
+        border-color: #409eff;
+        color: #409eff;
+        background: white;
+
+        &:hover {
+          background: #ecf5ff;
+        }
+      }
+
+      .approve-btn {
+        background: #409eff;
+        border-color: #409eff;
+      }
+    }
+  }
+</style>