diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),
diff --git a/src/views/resource/outsideService/consumable/applyDetail.vue b/src/views/resource/outsideService/consumable/applyDetail.vue
new file mode 100644
index 0000000..241d195
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyDetail.vue
@@ -0,0 +1,669 @@
+<!-- 易耗物资申请单 详情 -->
+<script name="ConsumableApplyDetail" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import type { ISupplierInfo } from '@/views/resource/outsideService/supplier/supplier-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import FilterSupplier from '@/views/resource/common/filterSupplier.vue'
+import type { IDictType } from '@/commonInterface/resource-interface'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import { detailConsumableApply, draftDeleteApply, failUpdateConsumableApply, refuseApprovalApply, revokeApprovalApply, saveConsumableApply, submitConsumableApply, updateConsumableApply } from '@/api/resource/supplierConsumable'
+import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
+import useUserStore from '@/store/modules/user'
+import { getDictByCode } from '@/api/system/dict'
+import { useCheckList } from '@/commonMethods/useCheckList'
+
+// 变量
+// 从路由中传过来的参数
+const type = ref<string>('')
+const id = ref<string>('')
+const status = ref<string>('')
+
+// 关键字段是否可以编辑
+const keyFieldsDisable = ref<boolean>(true)
+
+const userInfo = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const title = ref('')
+
+const radioItems = ref([
+  { name: '基本信息', value: 'consumable-apply-basic' },
+  { name: '审批详情', value: 'consumable-apply-approval' },
+])
+const current = ref('')
+const currentLabel = ref('')
+
+// 子组件
+const approvalDialog = ref()
+const consumableApplyRef = ref()
+const supplierFilterRef = ref()
+
+const consumableApply = ref<IConsumableApply>({
+  id: '',
+  labCode: '',
+  groupCode: '',
+  applyNo: '',
+  applyName: '易耗物资申请单',
+  createDeptId: '',
+  createUserId: '',
+  createTime: '',
+  applyReason: '',
+  remark: '',
+  goodsDetailList: [],
+  approvalStatus: '',
+  approvalStatusName: '',
+  processId: '',
+  taskId: '',
+})
+
+const goodsList = ref<Array<IConsumableApplyGoods>>([])
+const goodsColumns = [
+  { text: '名称', value: 'goodsName', align: 'center', width: '240', required: true },
+  { text: '规格型号', value: 'goodsModel', align: 'center', width: '240', required: true },
+  { text: '数量及单位', value: 'goodsQuantity', align: 'center', width: '240', required: true },
+  { text: '生产商', value: 'supplierName', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
+] // 表头
+
+const applyRules = ref({
+  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  groupCode: [{ required: true, message: '组别代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+
+// 是否显示相关按钮
+const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮
+const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮
+const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮
+const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮
+const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮
+const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮
+
+// 字典值
+const labCodeDict = ref<IDictType[]>([])
+const groupCodeDict = ref<IDictType[]>([])
+
+const recordSelected = ref<IConsumableApplyGoods[]>([])
+
+// 逻辑
+// 详情页的各个tab切换操作
+const radioChangeHandler = (newVal: string | number | boolean) => {
+  const radioTarget = radioItems.value.filter(item => item.name === newVal)
+  if (radioTarget.length > 0) {
+    currentLabel.value = radioTarget[0].name
+    current.value = radioTarget[0].value
+  }
+  else {
+    currentLabel.value = radioItems.value[0].name
+    current.value = radioItems.value[0].value
+  }
+}
+
+// 将所有流程操作的按钮隐藏
+const hideAllOpterationButtons = () => {
+  saveButtVisable.value = false
+  submitButtVisable.value = false
+  flowButtsVisable.value = false
+  cancelButtVisable.value = false
+  deleteButtVisable.value = false
+  editButtVisable.value = false
+}
+
+// 根据审批状态显示对应的流程操作按钮
+const showOperationButtonByStatus = () => {
+  switch (status.value) {
+    case '0':
+      // 全部：保存按钮可见
+      if (type.value === 'update') {
+        saveButtVisable.value = true
+      }
+      else {
+        saveButtVisable.value = false
+      }
+      break
+
+    case '1':
+      // 草稿箱：保存、提交按钮可见
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+      break
+
+    case '2':
+      // 待审批：同意、拒绝按钮可见
+      flowButtsVisable.value = true
+      break
+
+    case '3':
+      // 审批中：取消按钮可见
+      cancelButtVisable.value = true
+      break
+
+    case '5':
+      // 未通过：编辑 按钮可见
+      editButtVisable.value = true
+      break
+
+    case '6':
+      // 已取消：编辑 删除按钮可见
+      editButtVisable.value = true
+      deleteButtVisable.value = true
+      break
+
+    default:
+      // 默认不显示所有的操作按钮
+      hideAllOpterationButtons()
+      break
+  }
+}
+
+// 关闭
+const resetForm = () => {
+  sessionStorage.removeItem('consumableApplyTaskId') // 返回列表时 将缓存中的数据删除
+  router.go(-1)
+}
+
+// 新增
+const addEditableRow = () => {
+  supplierFilterRef.value.showOrHideFilterDialog(true, '3')
+}
+
+const delSupplierRecords = () => {
+  if (recordSelected.value.length === 0) {
+    ElMessage.warning('请至少选择一行')
+    return
+  }
+
+  goodsList.value = goodsList.value.filter(item => recordSelected.value.includes(item) === false)
+}
+
+const supplierMultiSelect = (e: any) => {
+  recordSelected.value = e
+}
+
+// 保存至草稿箱
+const saveDraftApply = () => {
+  consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间
+  saveConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+      // 设置返回的id和编号
+      consumableApply.value.applyNo = res.data.applyNo
+      consumableApply.value.id = res.data.id
+      id.value = res.data.id
+
+      type.value = 'update'
+      status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+// 编辑草稿箱（不走流程审批）
+const updateDraftApply = () => {
+  updateConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+
+// 编辑按钮点击事件处理函数
+const editClickedHandler = () => {
+  type.value = 'update'
+  title.value = '易耗物资申请单（编辑）'
+
+  // 隐藏编辑按钮 显示提交按钮
+  editButtVisable.value = false
+  submitButtVisable.value = true
+}
+
+// 新建时保存后的处理 获取返回的id
+const saveButtonHandler = async () => {
+  if (!consumableApplyRef) { return }
+
+  if (goodsList.value.length === 0) {
+    ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+    return
+  }
+
+  if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+    return
+  }
+
+  await consumableApplyRef.value.validate((valid: boolean) => {
+    if (valid === true) {
+      consumableApply.value.goodsDetailList = goodsList.value
+
+      ElMessageBox.confirm(
+        '确认保存吗？',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        },
+      ).then(() => {
+        if (type.value === 'create') {
+          saveDraftApply()
+        }
+        else if (type.value === 'update') {
+          updateDraftApply()
+        }
+      })
+    }
+  })
+}
+
+// 提交按钮
+const submitButtonHandler = async () => {
+  if (consumableApply.value === null || consumableApply.value.processId === undefined || consumableApply.value.processId === '') {
+    // 流程id为空 表示还未进入流程中 直接提交
+    ElMessageBox.confirm(`是否提交易耗物资申请单 ${consumableApply.value.applyNo}`, '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      submitConsumableApply({
+        formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL,
+        id: consumableApply.value.id,
+      }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+          type.value = 'detail'
+          hideAllOpterationButtons()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+        }
+      })
+    })
+  }
+  else {
+    // 之前已经在流程中的表单 保存提交
+    if (goodsList.value.length === 0) {
+      ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+      return
+    }
+
+    if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+      return
+    }
+
+    await consumableApplyRef.value.validate((valid: boolean) => {
+      if (valid === true) {
+        failUpdateConsumableApply(consumableApply.value).then((res) => {
+          if (res.code === 200) {
+          // 提示保存成功
+            ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+            type.value = 'detail'
+            hideAllOpterationButtons()
+          }
+          else {
+          // 提示失败信息
+            ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据id查询详情
+const detailById = async (id: string) => {
+  await detailConsumableApply({ id }).then((res) => {
+    if (res.code === 200) {
+      consumableApply.value = res.data
+      goodsList.value = consumableApply.value.goodsDetailList
+      if (consumableApply.value.taskId === '') {
+        consumableApply.value.taskId = sessionStorage.getItem('consumableApplyTaskId')!
+      }
+    }
+  })
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = () => {
+  approvalDialog.value.initDialog('refuse', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = () => {
+  approvalDialog.value.initDialog('agree', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 取消流程
+const revokeClickedHandler = () => {
+  approvalDialog.value.initDialog('revoke', consumableApply.value.id, consumableApply.value.taskId, consumableApply.value.processId)
+}
+
+// 删除审批单
+const deleteClickedHandler = () => {
+  ElMessageBox.confirm(`是否删除审批单 ${consumableApply.value.applyNo}`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    draftDeleteApply({ id: id.value }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(`审批单 ${consumableApply.value.applyNo} 删除成功`)
+        resetForm()
+      }
+      else {
+        ElMessage.error(`审批单 ${consumableApply.value.applyNo} 删除失败: ${res.message}`)
+      }
+    })
+  })
+}
+
+// 流程审批（同意、拒绝、取消）结束后的操作 将按钮都隐藏（本身就不能编辑了）
+const approvalSuccessHandler = (type: string) => {
+  if (type === 'agree' || type === 'refuse') {
+    flowButtsVisable.value = false
+  }
+  else if (type === 'revoke') {
+    cancelButtVisable.value = false
+  }
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    cancelButtVisable.value = false
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    flowButtsVisable.value = false
+  })
+}
+
+// 选定供应商返回 允许供应商重复
+const appendToContentList = (rows: ISupplierInfo[]) => {
+  rows.forEach((row) => {
+    goodsList.value.push({
+      id: '',
+      supplierId: row.id,
+      supplierName: row.supplierName,
+      goodsName: '',
+      goodsModel: '',
+      goodsQuantity: '',
+      remark: '',
+      createTime: '',
+    })
+  })
+}
+
+const getLabCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizLabCode').then((res) => {
+      if (res.code === 200) {
+        labCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
+  }
+}
+
+const getGroupCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizGroupCode').then((res) => {
+      if (res.code === 200) {
+        groupCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
+  }
+}
+
+const initDict = async () => {
+  await getLabCodeDict()
+  await getGroupCodeDict()
+}
+
+const initDialog = (params: any) => {
+  // 从路由中获取参数
+  type.value = params.type
+  id.value = params.id !== undefined ? params.id : ''
+  status.value = params.status !== undefined ? params.status : ''
+
+  // 默认显示第一个tab内容
+  current.value = radioItems.value[0].value
+  currentLabel.value = radioItems.value[0].name
+
+  switch (params.type) {
+    case 'create' :
+      title.value = '易耗物资申请单（新增）'
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+
+      consumableApply.value.createUserId = userInfo.id
+      consumableApply.value.createUserName = userInfo.name
+      consumableApply.value.createDeptId = userInfo.deptId
+      consumableApply.value.createDept = userInfo.deptName
+      consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
+
+      keyFieldsDisable.value = false
+
+      break
+    case 'update':
+      title.value = '易耗物资申请单（编辑）'
+
+      detailById(id.value)
+
+      // 判断显示哪些流程操作按钮
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    case 'detail':
+      title.value = '易耗物资申请单（详情）'
+      id.value = params.id
+
+      detailById(id.value)
+
+      // 查看详情时所有的操作按钮都隐藏
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    default:
+      title.value = ''
+      break
+  }
+}
+
+onMounted(() => {
+  initDict()
+  initDialog(route.query)
+})
+</script>
+
+<template>
+  <app-container>
+    <el-form ref="consumableApplyRef" :model="consumableApply" :rules="applyRules" label-position="right" label-width="110px" border stripe>
+      <detail-page :title="`${title}`">
+        <template #btns>
+          <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()">
+            编辑
+          </el-button>
+
+          <template v-if="flowButtsVisable">
+            <el-button type="primary" @click="approvalAgreeHandler">
+              同意
+            </el-button>
+            <el-button type="danger" @click="approvalRefuseHandler">
+              拒绝
+            </el-button>
+          </template>
+
+          <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler">
+            提交
+          </el-button>
+          <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler">
+            保存
+          </el-button>
+
+          <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler">
+            删除
+          </el-button>
+          <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler">
+            取消
+          </el-button>
+
+          <el-button type="info" @click="resetForm()">
+            关闭
+          </el-button>
+        </template>
+
+        <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
+          <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
+        </el-radio-group>
+
+        <template v-if="current === 'consumable-apply-basic'">
+          <el-row :gutter="24">
+            <!-- 第一行 第一列 -->
+            <el-col :span="6">
+              <el-form-item label="实验室代码" prop="labCode">
+                <el-select v-model="consumableApply.labCode" placeholder="请选择实验室代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请部门">
+                <el-input v-model="consumableApply.createDept" :disabled="true" />
+                <el-input v-model="consumableApply.createDeptId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="组别代码" prop="groupCode">
+                <el-select v-model="consumableApply.groupCode" placeholder="请选择组别代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请人">
+                <el-input v-model="consumableApply.createUserName" :disabled="true" />
+                <el-input v-model="consumableApply.createUserId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单编号">
+                <el-input v-model="consumableApply.applyNo" placeholder="申请单编号，保存后自动生成" :disabled="true" />
+              </el-form-item>
+              <el-form-item label="申请时间">
+                <el-input v-model="consumableApply.createTime" :disabled="true" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单名称">
+                <el-input v-model="consumableApply.applyName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="申请原因" prop="applyReason">
+                <el-input v-model="consumableApply.applyReason" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="备注">
+                <el-input v-model="consumableApply.remark" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+      </detail-page>
+
+      <template v-if="current === 'consumable-apply-basic'">
+        <table-container title="物资明细">
+          <template v-if="type !== 'detail'" #btns-right>
+            <el-button type="primary" @click="addEditableRow">
+              增加行
+            </el-button>
+            <el-button type="info" @click="delSupplierRecords">
+              删除行
+            </el-button>
+          </template>
+
+          <!-- 表格区域 -->
+          <el-table :data="goodsList" border style="width: 100%;" @selection-change="supplierMultiSelect">
+            <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" />
+            <el-table-column align="center" label="序号" width="55" type="index" />
+            <el-table-column
+              v-for="item in goodsColumns"
+              :key="item.value"
+              :prop="item.value"
+              :label="item.text"
+              :width="item.width"
+              align="center"
+            >
+              <template #header>
+                <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
+              </template>
+              <template #default="scope">
+                <el-input v-if="item.required === true && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+                <el-input v-if="item.value === 'remark' && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </table-container>
+      </template>
+    </el-form>
+
+    <approval-dialog
+      ref="approvalDialog"
+      @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler"
+    />
+
+    <filter-supplier ref="supplierFilterRef" @records-selected="appendToContentList" />
+
+    <template v-if="current === 'consumable-apply-approval' && status !== '1'">
+      <approval-record-table :process-id="consumableApply.processId" />
+    </template>
+  </app-container>
+</template>

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),
diff --git a/src/views/resource/outsideService/consumable/applyDetail.vue b/src/views/resource/outsideService/consumable/applyDetail.vue
new file mode 100644
index 0000000..241d195
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyDetail.vue
@@ -0,0 +1,669 @@
+<!-- 易耗物资申请单 详情 -->
+<script name="ConsumableApplyDetail" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import type { ISupplierInfo } from '@/views/resource/outsideService/supplier/supplier-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import FilterSupplier from '@/views/resource/common/filterSupplier.vue'
+import type { IDictType } from '@/commonInterface/resource-interface'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import { detailConsumableApply, draftDeleteApply, failUpdateConsumableApply, refuseApprovalApply, revokeApprovalApply, saveConsumableApply, submitConsumableApply, updateConsumableApply } from '@/api/resource/supplierConsumable'
+import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
+import useUserStore from '@/store/modules/user'
+import { getDictByCode } from '@/api/system/dict'
+import { useCheckList } from '@/commonMethods/useCheckList'
+
+// 变量
+// 从路由中传过来的参数
+const type = ref<string>('')
+const id = ref<string>('')
+const status = ref<string>('')
+
+// 关键字段是否可以编辑
+const keyFieldsDisable = ref<boolean>(true)
+
+const userInfo = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const title = ref('')
+
+const radioItems = ref([
+  { name: '基本信息', value: 'consumable-apply-basic' },
+  { name: '审批详情', value: 'consumable-apply-approval' },
+])
+const current = ref('')
+const currentLabel = ref('')
+
+// 子组件
+const approvalDialog = ref()
+const consumableApplyRef = ref()
+const supplierFilterRef = ref()
+
+const consumableApply = ref<IConsumableApply>({
+  id: '',
+  labCode: '',
+  groupCode: '',
+  applyNo: '',
+  applyName: '易耗物资申请单',
+  createDeptId: '',
+  createUserId: '',
+  createTime: '',
+  applyReason: '',
+  remark: '',
+  goodsDetailList: [],
+  approvalStatus: '',
+  approvalStatusName: '',
+  processId: '',
+  taskId: '',
+})
+
+const goodsList = ref<Array<IConsumableApplyGoods>>([])
+const goodsColumns = [
+  { text: '名称', value: 'goodsName', align: 'center', width: '240', required: true },
+  { text: '规格型号', value: 'goodsModel', align: 'center', width: '240', required: true },
+  { text: '数量及单位', value: 'goodsQuantity', align: 'center', width: '240', required: true },
+  { text: '生产商', value: 'supplierName', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
+] // 表头
+
+const applyRules = ref({
+  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  groupCode: [{ required: true, message: '组别代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+
+// 是否显示相关按钮
+const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮
+const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮
+const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮
+const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮
+const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮
+const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮
+
+// 字典值
+const labCodeDict = ref<IDictType[]>([])
+const groupCodeDict = ref<IDictType[]>([])
+
+const recordSelected = ref<IConsumableApplyGoods[]>([])
+
+// 逻辑
+// 详情页的各个tab切换操作
+const radioChangeHandler = (newVal: string | number | boolean) => {
+  const radioTarget = radioItems.value.filter(item => item.name === newVal)
+  if (radioTarget.length > 0) {
+    currentLabel.value = radioTarget[0].name
+    current.value = radioTarget[0].value
+  }
+  else {
+    currentLabel.value = radioItems.value[0].name
+    current.value = radioItems.value[0].value
+  }
+}
+
+// 将所有流程操作的按钮隐藏
+const hideAllOpterationButtons = () => {
+  saveButtVisable.value = false
+  submitButtVisable.value = false
+  flowButtsVisable.value = false
+  cancelButtVisable.value = false
+  deleteButtVisable.value = false
+  editButtVisable.value = false
+}
+
+// 根据审批状态显示对应的流程操作按钮
+const showOperationButtonByStatus = () => {
+  switch (status.value) {
+    case '0':
+      // 全部：保存按钮可见
+      if (type.value === 'update') {
+        saveButtVisable.value = true
+      }
+      else {
+        saveButtVisable.value = false
+      }
+      break
+
+    case '1':
+      // 草稿箱：保存、提交按钮可见
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+      break
+
+    case '2':
+      // 待审批：同意、拒绝按钮可见
+      flowButtsVisable.value = true
+      break
+
+    case '3':
+      // 审批中：取消按钮可见
+      cancelButtVisable.value = true
+      break
+
+    case '5':
+      // 未通过：编辑 按钮可见
+      editButtVisable.value = true
+      break
+
+    case '6':
+      // 已取消：编辑 删除按钮可见
+      editButtVisable.value = true
+      deleteButtVisable.value = true
+      break
+
+    default:
+      // 默认不显示所有的操作按钮
+      hideAllOpterationButtons()
+      break
+  }
+}
+
+// 关闭
+const resetForm = () => {
+  sessionStorage.removeItem('consumableApplyTaskId') // 返回列表时 将缓存中的数据删除
+  router.go(-1)
+}
+
+// 新增
+const addEditableRow = () => {
+  supplierFilterRef.value.showOrHideFilterDialog(true, '3')
+}
+
+const delSupplierRecords = () => {
+  if (recordSelected.value.length === 0) {
+    ElMessage.warning('请至少选择一行')
+    return
+  }
+
+  goodsList.value = goodsList.value.filter(item => recordSelected.value.includes(item) === false)
+}
+
+const supplierMultiSelect = (e: any) => {
+  recordSelected.value = e
+}
+
+// 保存至草稿箱
+const saveDraftApply = () => {
+  consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间
+  saveConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+      // 设置返回的id和编号
+      consumableApply.value.applyNo = res.data.applyNo
+      consumableApply.value.id = res.data.id
+      id.value = res.data.id
+
+      type.value = 'update'
+      status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+// 编辑草稿箱（不走流程审批）
+const updateDraftApply = () => {
+  updateConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+
+// 编辑按钮点击事件处理函数
+const editClickedHandler = () => {
+  type.value = 'update'
+  title.value = '易耗物资申请单（编辑）'
+
+  // 隐藏编辑按钮 显示提交按钮
+  editButtVisable.value = false
+  submitButtVisable.value = true
+}
+
+// 新建时保存后的处理 获取返回的id
+const saveButtonHandler = async () => {
+  if (!consumableApplyRef) { return }
+
+  if (goodsList.value.length === 0) {
+    ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+    return
+  }
+
+  if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+    return
+  }
+
+  await consumableApplyRef.value.validate((valid: boolean) => {
+    if (valid === true) {
+      consumableApply.value.goodsDetailList = goodsList.value
+
+      ElMessageBox.confirm(
+        '确认保存吗？',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        },
+      ).then(() => {
+        if (type.value === 'create') {
+          saveDraftApply()
+        }
+        else if (type.value === 'update') {
+          updateDraftApply()
+        }
+      })
+    }
+  })
+}
+
+// 提交按钮
+const submitButtonHandler = async () => {
+  if (consumableApply.value === null || consumableApply.value.processId === undefined || consumableApply.value.processId === '') {
+    // 流程id为空 表示还未进入流程中 直接提交
+    ElMessageBox.confirm(`是否提交易耗物资申请单 ${consumableApply.value.applyNo}`, '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      submitConsumableApply({
+        formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL,
+        id: consumableApply.value.id,
+      }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+          type.value = 'detail'
+          hideAllOpterationButtons()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+        }
+      })
+    })
+  }
+  else {
+    // 之前已经在流程中的表单 保存提交
+    if (goodsList.value.length === 0) {
+      ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+      return
+    }
+
+    if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+      return
+    }
+
+    await consumableApplyRef.value.validate((valid: boolean) => {
+      if (valid === true) {
+        failUpdateConsumableApply(consumableApply.value).then((res) => {
+          if (res.code === 200) {
+          // 提示保存成功
+            ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+            type.value = 'detail'
+            hideAllOpterationButtons()
+          }
+          else {
+          // 提示失败信息
+            ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据id查询详情
+const detailById = async (id: string) => {
+  await detailConsumableApply({ id }).then((res) => {
+    if (res.code === 200) {
+      consumableApply.value = res.data
+      goodsList.value = consumableApply.value.goodsDetailList
+      if (consumableApply.value.taskId === '') {
+        consumableApply.value.taskId = sessionStorage.getItem('consumableApplyTaskId')!
+      }
+    }
+  })
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = () => {
+  approvalDialog.value.initDialog('refuse', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = () => {
+  approvalDialog.value.initDialog('agree', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 取消流程
+const revokeClickedHandler = () => {
+  approvalDialog.value.initDialog('revoke', consumableApply.value.id, consumableApply.value.taskId, consumableApply.value.processId)
+}
+
+// 删除审批单
+const deleteClickedHandler = () => {
+  ElMessageBox.confirm(`是否删除审批单 ${consumableApply.value.applyNo}`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    draftDeleteApply({ id: id.value }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(`审批单 ${consumableApply.value.applyNo} 删除成功`)
+        resetForm()
+      }
+      else {
+        ElMessage.error(`审批单 ${consumableApply.value.applyNo} 删除失败: ${res.message}`)
+      }
+    })
+  })
+}
+
+// 流程审批（同意、拒绝、取消）结束后的操作 将按钮都隐藏（本身就不能编辑了）
+const approvalSuccessHandler = (type: string) => {
+  if (type === 'agree' || type === 'refuse') {
+    flowButtsVisable.value = false
+  }
+  else if (type === 'revoke') {
+    cancelButtVisable.value = false
+  }
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    cancelButtVisable.value = false
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    flowButtsVisable.value = false
+  })
+}
+
+// 选定供应商返回 允许供应商重复
+const appendToContentList = (rows: ISupplierInfo[]) => {
+  rows.forEach((row) => {
+    goodsList.value.push({
+      id: '',
+      supplierId: row.id,
+      supplierName: row.supplierName,
+      goodsName: '',
+      goodsModel: '',
+      goodsQuantity: '',
+      remark: '',
+      createTime: '',
+    })
+  })
+}
+
+const getLabCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizLabCode').then((res) => {
+      if (res.code === 200) {
+        labCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
+  }
+}
+
+const getGroupCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizGroupCode').then((res) => {
+      if (res.code === 200) {
+        groupCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
+  }
+}
+
+const initDict = async () => {
+  await getLabCodeDict()
+  await getGroupCodeDict()
+}
+
+const initDialog = (params: any) => {
+  // 从路由中获取参数
+  type.value = params.type
+  id.value = params.id !== undefined ? params.id : ''
+  status.value = params.status !== undefined ? params.status : ''
+
+  // 默认显示第一个tab内容
+  current.value = radioItems.value[0].value
+  currentLabel.value = radioItems.value[0].name
+
+  switch (params.type) {
+    case 'create' :
+      title.value = '易耗物资申请单（新增）'
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+
+      consumableApply.value.createUserId = userInfo.id
+      consumableApply.value.createUserName = userInfo.name
+      consumableApply.value.createDeptId = userInfo.deptId
+      consumableApply.value.createDept = userInfo.deptName
+      consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
+
+      keyFieldsDisable.value = false
+
+      break
+    case 'update':
+      title.value = '易耗物资申请单（编辑）'
+
+      detailById(id.value)
+
+      // 判断显示哪些流程操作按钮
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    case 'detail':
+      title.value = '易耗物资申请单（详情）'
+      id.value = params.id
+
+      detailById(id.value)
+
+      // 查看详情时所有的操作按钮都隐藏
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    default:
+      title.value = ''
+      break
+  }
+}
+
+onMounted(() => {
+  initDict()
+  initDialog(route.query)
+})
+</script>
+
+<template>
+  <app-container>
+    <el-form ref="consumableApplyRef" :model="consumableApply" :rules="applyRules" label-position="right" label-width="110px" border stripe>
+      <detail-page :title="`${title}`">
+        <template #btns>
+          <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()">
+            编辑
+          </el-button>
+
+          <template v-if="flowButtsVisable">
+            <el-button type="primary" @click="approvalAgreeHandler">
+              同意
+            </el-button>
+            <el-button type="danger" @click="approvalRefuseHandler">
+              拒绝
+            </el-button>
+          </template>
+
+          <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler">
+            提交
+          </el-button>
+          <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler">
+            保存
+          </el-button>
+
+          <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler">
+            删除
+          </el-button>
+          <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler">
+            取消
+          </el-button>
+
+          <el-button type="info" @click="resetForm()">
+            关闭
+          </el-button>
+        </template>
+
+        <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
+          <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
+        </el-radio-group>
+
+        <template v-if="current === 'consumable-apply-basic'">
+          <el-row :gutter="24">
+            <!-- 第一行 第一列 -->
+            <el-col :span="6">
+              <el-form-item label="实验室代码" prop="labCode">
+                <el-select v-model="consumableApply.labCode" placeholder="请选择实验室代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请部门">
+                <el-input v-model="consumableApply.createDept" :disabled="true" />
+                <el-input v-model="consumableApply.createDeptId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="组别代码" prop="groupCode">
+                <el-select v-model="consumableApply.groupCode" placeholder="请选择组别代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请人">
+                <el-input v-model="consumableApply.createUserName" :disabled="true" />
+                <el-input v-model="consumableApply.createUserId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单编号">
+                <el-input v-model="consumableApply.applyNo" placeholder="申请单编号，保存后自动生成" :disabled="true" />
+              </el-form-item>
+              <el-form-item label="申请时间">
+                <el-input v-model="consumableApply.createTime" :disabled="true" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单名称">
+                <el-input v-model="consumableApply.applyName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="申请原因" prop="applyReason">
+                <el-input v-model="consumableApply.applyReason" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="备注">
+                <el-input v-model="consumableApply.remark" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+      </detail-page>
+
+      <template v-if="current === 'consumable-apply-basic'">
+        <table-container title="物资明细">
+          <template v-if="type !== 'detail'" #btns-right>
+            <el-button type="primary" @click="addEditableRow">
+              增加行
+            </el-button>
+            <el-button type="info" @click="delSupplierRecords">
+              删除行
+            </el-button>
+          </template>
+
+          <!-- 表格区域 -->
+          <el-table :data="goodsList" border style="width: 100%;" @selection-change="supplierMultiSelect">
+            <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" />
+            <el-table-column align="center" label="序号" width="55" type="index" />
+            <el-table-column
+              v-for="item in goodsColumns"
+              :key="item.value"
+              :prop="item.value"
+              :label="item.text"
+              :width="item.width"
+              align="center"
+            >
+              <template #header>
+                <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
+              </template>
+              <template #default="scope">
+                <el-input v-if="item.required === true && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+                <el-input v-if="item.value === 'remark' && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </table-container>
+      </template>
+    </el-form>
+
+    <approval-dialog
+      ref="approvalDialog"
+      @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler"
+    />
+
+    <filter-supplier ref="supplierFilterRef" @records-selected="appendToContentList" />
+
+    <template v-if="current === 'consumable-apply-approval' && status !== '1'">
+      <approval-record-table :process-id="consumableApply.processId" />
+    </template>
+  </app-container>
+</template>
diff --git a/src/views/resource/outsideService/consumable/applyList.vue b/src/views/resource/outsideService/consumable/applyList.vue
new file mode 100644
index 0000000..d6cba40
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyList.vue
@@ -0,0 +1,533 @@
+<!-- 易耗物资申请单 列表 -->
+<script name="ConsumableApplyList" lang="ts" setup>
+import type { DateModelType } from 'element-plus'
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IApplyListQuery, IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import type { IMenu } from '@/components/buttonBox/buttonBox'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { canceledApprDeleteApply, detailConsumableApply, draftDeleteApply, getConsumableApplyList, refuseApprovalApply, revokeApprovalApply } from '@/api/resource/supplierConsumable'
+
+// 定义常量
+const buttonBoxActive = 'consumableApplyApproval' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
+
+const { proxy } = getCurrentInstance() as any
+const router = useRouter()
+
+// 选中的审批状态按钮
+const active = ref('')
+const menu = ref<IMenu[]>([]) // 审批状态按钮组合
+const approvalStatusList = ref<String[]>([
+  '全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消',
+])
+
+// 弹窗子组件
+const apprDial = ref()
+const applyTableRef = ref()
+
+// 查询条件
+const searchQuery = ref<IApplyListQuery>({
+  applyNo: '', // 申请单编号
+  applyName: '', // 申请单名称
+  createDept: '', // 编制部门
+  createUserName: '', // 编制人
+  createTimeStart: '', // 创建时间-起始
+  createTimeEnd: '', // 创建时间-结束
+  approvalStatus: active.value, // 审批状态
+  formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+  offset: 1,
+  limit: 20,
+})
+const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
+const total = ref(0) // 数据条数
+const loadingTable = ref(false) // 表格loading
+const expandLoading = ref(false) // 展开表格的loading
+
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '申请单编号', value: 'applyNo', align: 'center', width: '200' },
+  { text: '易耗物资名称、规格型号及数量', value: 'goodsListStr', align: 'center' },
+  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
+  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
+  { text: '申请时间', value: 'createTime', align: 'center', width: '120' },
+  { text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' },
+])
+const statusColumn = ref<TableColumn>({ text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' })
+const applyList = ref<Array<IConsumableApply>>([]) // 表格数据
+const expandRowKey = ref<string>('')
+const goodsListExpand = ref<Array<IConsumableApplyGoods>>([])
+
+const expandRowKeys = computed(() => {
+  return [expandRowKey.value]
+})
+
+const expandTableWidth = computed(() => {
+  console.log(applyTableRef.value.width)
+})
+
+// 逻辑
+// 跳转到新建的页面
+const addConsumableApply = () => {
+  router.push({
+    query: {
+      type: 'create',
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击编辑按钮
+const updateInfo = (row: IConsumableApply) => {
+  sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+  router.push({
+    query: {
+      type: 'update',
+      id: row.id,
+      status: searchQuery.value.approvalStatus,
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击查看（或编辑）按钮
+const detail = (row: IConsumableApply) => {
+  if (searchQuery.value.approvalStatus === '1') {
+    // 全部或草稿箱 状态的 查看 是可以编辑的组件
+    updateInfo(row)
+  }
+  else if (active.value === '0') {
+    router.push({
+      query: {
+        type: 'apply',
+        id: row.id,
+      },
+      path: 'consumableApply/approved',
+    })
+  }
+  else {
+    // 将行数据存入缓存 用来在路由之间传递数据
+    sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+
+    router.push({
+      query: {
+        type: 'detail',
+        id: row.id,
+        status: searchQuery.value.approvalStatus,
+      },
+      path: 'consumableApply/detail',
+    })
+  }
+}
+
+// 删除易耗物资申请单 或 删除草稿箱中的审批单
+const deleteById = (row: any) => {
+  ElMessageBox.confirm('是否删除易耗物资申请单', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    if (active.value === '1') {
+      // 草稿箱中的删除记录
+      draftDeleteApply({ id: row.id }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+    else if (active.value === '6') {
+      // 已取消中的删除记录
+      canceledApprDeleteApply({ id: row.id, taskId: row.taskId }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+  })
+}
+
+const getDetailGoodsList = (goods: IConsumableApply) => {
+  expandLoading.value = true
+  detailConsumableApply({ id: goods.id }).then((res) => {
+    if (res.code === 200) {
+      goodsListExpand.value = res.data.goodsDetailList
+
+      expandLoading.value = false
+    }
+  }).catch(() => {
+    expandLoading.value = false
+  })
+}
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    searchQuery.value.offset = 1
+  }
+  getConsumableApplyList(searchQuery.value).then((response) => {
+    if (response.code === 200) {
+      applyList.value = response.data.rows.map((item: IConsumableApply) => {
+        return {
+          ...item,
+          createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '',
+          goodsListStr: `${item.goodsName}；${item.goodsModel}；${item.goodsQuantity}`,
+        }
+      })
+      total.value = parseInt(response.data.total)
+    }
+    expandRowKey.value = ''
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+
+const searchList = () => {
+  fetchData(true)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.value.offset = val.page
+  }
+  fetchData(true)
+}
+
+// 改变页容量
+function handleSizeChange(val: number) {
+  changePage({ size: val })
+}
+// 改变当前页
+function handleCurrentChange(val: number) {
+  changePage({ page: val })
+}
+
+// 重置
+const reset = () => {
+  searchQuery.value = {
+    applyNo: '', // 申请单编号
+    applyName: '', // 申请单名称
+    createDept: '', // 编制部门
+    createUserName: '', // 编制人
+    createTimeStart: '', // 创建时间-起始
+    createTimeEnd: '', // 创建时间-结束
+    approvalStatus: active.value, // 审批状态
+    formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+    offset: 1,
+    limit: 20,
+  }
+  dateRange.value = ['', '']
+  fetchData(true)
+}
+
+// 审批按钮点击切换事件
+const changeCurrentButton = (val: string) => {
+  active.value = val // 此时的tab
+  window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态
+
+  const hasStatus = columns.value.filter((col) => {
+    return col.value === statusColumn.value.value
+  })
+
+  if (val === '0') {
+    // 全部的时候不要显示审批状态
+    if (hasStatus.length > 0) {
+      columns.value.pop()
+    }
+  }
+  else {
+    // 其他状态下要显示审批状态字段
+    if (hasStatus.length === 0) {
+      columns.value.push(statusColumn.value)
+    }
+  }
+
+  reset() // 刷新
+}
+
+// 展开行 每次只能展开一行
+const expandCurrentRow = (row: IConsumableApply) => {
+  if (expandRowKey.value === '') {
+    expandRowKey.value = row.applyNo
+  }
+  else {
+    expandRowKey.value = ''
+  }
+}
+
+// 点击行
+const expandClickedHandler = async (row: IConsumableApply, event: any) => {
+  expandCurrentRow(row)
+  if (expandRowKey.value !== '') {
+    getDetailGoodsList(row)
+  }
+}
+
+const tableRowExpandChange = (row: IConsumableApply) => {
+  expandCurrentRow(row)
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('agree', row.id, row.taskId, '')
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('refuse', row.id, row.taskId, '')
+}
+
+// 取消（撤回审批单）
+const revokeApprById = (row: IConsumableApply) => {
+  apprDial.value.initDialog('revoke', row.id, row.taskId, row.processId)
+}
+
+// 流程操作之后刷新
+const afterApprovalHandler = () => {
+  fetchData(true)
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 初始化流程审批状态按钮
+const getApprovalStatusDict = () => {
+  getDictByCode('approvalStatus').then((res) => {
+    if (res.code === 200) {
+      approvalStatusList.value.forEach((item) => {
+        const tempFindData = res.data.find((e: { name: string; value: string }) => e.name === item)
+        if (tempFindData) {
+          menu.value.push({
+            name: tempFindData.name,
+            id: `${tempFindData.value}`,
+          })
+        }
+      })
+    }
+  })
+}
+
+const getLabCodeDict = async () => {
+  await getDictByCode('bizLabCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizLabCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getGroupCodeDict = async () => {
+  await getDictByCode('bizGroupCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getDict = async () => {
+  getApprovalStatusDict()
+  getLabCodeDict()
+  getGroupCodeDict()
+}
+
+watch(dateRange, (val) => {
+  if (val) {
+    searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD')
+    searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD')
+  }
+  else {
+    searchQuery.value.createTimeStart = ''
+    searchQuery.value.createTimeEnd = ''
+  }
+})
+
+onMounted(async () => {
+  await getDict()
+  if (sessionStorage.getItem(buttonBoxActive) !== 'undefined' && sessionStorage.getItem(buttonBoxActive) !== null) {
+    active.value = sessionStorage.getItem(buttonBoxActive)!
+  }
+  else {
+    active.value = '0' // 全部
+  }
+})
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="searchList" @clear="reset">
+      <search-item>
+        <el-input v-model="searchQuery.applyNo" placeholder="申请单编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createDept" placeholder="申请部门" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createUserName" placeholder="申请人" clearable />
+      </search-item>
+      <search-item>
+        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="申请时间（开始）" end-placeholder="申请时间（结束）" />
+      </search-item>
+    </search-area>
+
+    <!-- 表格数据展示 -->
+    <table-container>
+      <!-- 表头区域 -->
+      <template v-if="active === '0' && proxy.hasPerm(`/resource/outsideService/consumableApply/add`)" #btns-right>
+        <icon-button icon="icon-add" title="新建" @click="addConsumableApply" />
+      </template>
+
+      <el-table
+        ref="applyTableRef"
+        v-loading="loadingTable" :data="applyList" style="width: 100%;" stripe
+        border row-key="applyNo"
+        :expand-row-keys="expandRowKeys"
+        @expand-change="tableRowExpandChange"
+      >
+        <el-table-column type="expand" width="1">
+          <el-table
+            v-loading="expandLoading" :show-header="false" :data="goodsListExpand"
+            border :class="active === '0' ? 'expand-approval-all' : 'expand-approval-with-status'"
+          >
+            <el-table-column label="名称" prop="goodsName" align="center" />
+            <el-table-column label="规格型号" prop="goodsModel" align="center" />
+            <el-table-column label="数量" prop="goodsQuantity" align="center" />
+          </el-table>
+        </el-table-column>
+
+        <el-table-column align="center" label="序号" width="55" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+          :width="item.width"
+          align="center"
+        />
+
+        <el-table-column fixed="right" label="操作" align="center" width="130">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="expandClickedHandler(row, $event)">
+              <template v-if="expandRowKey !== row.applyNo">
+                展开物资
+              </template>
+              <template v-else>
+                收起展开
+              </template>
+            </el-button>
+            <el-button size="small" type="primary" link @click="detail(row)">
+              查看
+            </el-button>
+
+            <el-button v-if="(active === '1' || active === '6') && proxy.hasPerm(`/resource/outsideService/consumableApply/del`)" size="small" type="danger" link @click="deleteById(row)">
+              删除
+            </el-button>
+
+            <template v-if="active === '2'">
+              <el-button size="small" type="primary" link @click="approvalAgreeHandler(row)">
+                同意
+              </el-button>
+              <el-button size="small" type="danger" link @click="approvalRefuseHandler(row)">
+                拒绝
+              </el-button>
+            </template>
+            <template v-if="active === '3'">
+              <el-button size="small" type="info" link @click="revokeApprById(row)">
+                取消
+              </el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div style="width: 100%;margin-top: 10px;">
+        <el-pagination
+          :current-page="searchQuery.offset"
+          :page-sizes="[10, 20, 30]"
+          :page-size="searchQuery.limit"
+          :total="total"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </table-container>
+
+    <!-- 审批单弹窗 -->
+    <approval-dialog
+      ref="apprDial"
+      @on-success="afterApprovalHandler"
+      @on-refuse="refuseHandler"
+      @on-revoke="revokeHandler"
+    />
+
+    <!-- 右上角按钮集合 -->
+    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+  </app-container>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-icon) {
+  visibility: hidden !important;
+}
+
+::v-deep(.el-table__expanded-cell) {
+  padding-top: 0 !important;
+}
+
+/* 其他状态下的列表 */
+.expand-approval-with-status {
+  width: calc(100% - 885px);
+  margin-left: 255px;
+}
+
+/* 全部状态下的列表 */
+.expand-approval-all {
+  width: calc(100% - 785px);
+  margin-left: 255px;
+}
+</style>

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),
diff --git a/src/views/resource/outsideService/consumable/applyDetail.vue b/src/views/resource/outsideService/consumable/applyDetail.vue
new file mode 100644
index 0000000..241d195
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyDetail.vue
@@ -0,0 +1,669 @@
+<!-- 易耗物资申请单 详情 -->
+<script name="ConsumableApplyDetail" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import type { ISupplierInfo } from '@/views/resource/outsideService/supplier/supplier-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import FilterSupplier from '@/views/resource/common/filterSupplier.vue'
+import type { IDictType } from '@/commonInterface/resource-interface'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import { detailConsumableApply, draftDeleteApply, failUpdateConsumableApply, refuseApprovalApply, revokeApprovalApply, saveConsumableApply, submitConsumableApply, updateConsumableApply } from '@/api/resource/supplierConsumable'
+import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
+import useUserStore from '@/store/modules/user'
+import { getDictByCode } from '@/api/system/dict'
+import { useCheckList } from '@/commonMethods/useCheckList'
+
+// 变量
+// 从路由中传过来的参数
+const type = ref<string>('')
+const id = ref<string>('')
+const status = ref<string>('')
+
+// 关键字段是否可以编辑
+const keyFieldsDisable = ref<boolean>(true)
+
+const userInfo = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const title = ref('')
+
+const radioItems = ref([
+  { name: '基本信息', value: 'consumable-apply-basic' },
+  { name: '审批详情', value: 'consumable-apply-approval' },
+])
+const current = ref('')
+const currentLabel = ref('')
+
+// 子组件
+const approvalDialog = ref()
+const consumableApplyRef = ref()
+const supplierFilterRef = ref()
+
+const consumableApply = ref<IConsumableApply>({
+  id: '',
+  labCode: '',
+  groupCode: '',
+  applyNo: '',
+  applyName: '易耗物资申请单',
+  createDeptId: '',
+  createUserId: '',
+  createTime: '',
+  applyReason: '',
+  remark: '',
+  goodsDetailList: [],
+  approvalStatus: '',
+  approvalStatusName: '',
+  processId: '',
+  taskId: '',
+})
+
+const goodsList = ref<Array<IConsumableApplyGoods>>([])
+const goodsColumns = [
+  { text: '名称', value: 'goodsName', align: 'center', width: '240', required: true },
+  { text: '规格型号', value: 'goodsModel', align: 'center', width: '240', required: true },
+  { text: '数量及单位', value: 'goodsQuantity', align: 'center', width: '240', required: true },
+  { text: '生产商', value: 'supplierName', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
+] // 表头
+
+const applyRules = ref({
+  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  groupCode: [{ required: true, message: '组别代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+
+// 是否显示相关按钮
+const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮
+const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮
+const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮
+const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮
+const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮
+const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮
+
+// 字典值
+const labCodeDict = ref<IDictType[]>([])
+const groupCodeDict = ref<IDictType[]>([])
+
+const recordSelected = ref<IConsumableApplyGoods[]>([])
+
+// 逻辑
+// 详情页的各个tab切换操作
+const radioChangeHandler = (newVal: string | number | boolean) => {
+  const radioTarget = radioItems.value.filter(item => item.name === newVal)
+  if (radioTarget.length > 0) {
+    currentLabel.value = radioTarget[0].name
+    current.value = radioTarget[0].value
+  }
+  else {
+    currentLabel.value = radioItems.value[0].name
+    current.value = radioItems.value[0].value
+  }
+}
+
+// 将所有流程操作的按钮隐藏
+const hideAllOpterationButtons = () => {
+  saveButtVisable.value = false
+  submitButtVisable.value = false
+  flowButtsVisable.value = false
+  cancelButtVisable.value = false
+  deleteButtVisable.value = false
+  editButtVisable.value = false
+}
+
+// 根据审批状态显示对应的流程操作按钮
+const showOperationButtonByStatus = () => {
+  switch (status.value) {
+    case '0':
+      // 全部：保存按钮可见
+      if (type.value === 'update') {
+        saveButtVisable.value = true
+      }
+      else {
+        saveButtVisable.value = false
+      }
+      break
+
+    case '1':
+      // 草稿箱：保存、提交按钮可见
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+      break
+
+    case '2':
+      // 待审批：同意、拒绝按钮可见
+      flowButtsVisable.value = true
+      break
+
+    case '3':
+      // 审批中：取消按钮可见
+      cancelButtVisable.value = true
+      break
+
+    case '5':
+      // 未通过：编辑 按钮可见
+      editButtVisable.value = true
+      break
+
+    case '6':
+      // 已取消：编辑 删除按钮可见
+      editButtVisable.value = true
+      deleteButtVisable.value = true
+      break
+
+    default:
+      // 默认不显示所有的操作按钮
+      hideAllOpterationButtons()
+      break
+  }
+}
+
+// 关闭
+const resetForm = () => {
+  sessionStorage.removeItem('consumableApplyTaskId') // 返回列表时 将缓存中的数据删除
+  router.go(-1)
+}
+
+// 新增
+const addEditableRow = () => {
+  supplierFilterRef.value.showOrHideFilterDialog(true, '3')
+}
+
+const delSupplierRecords = () => {
+  if (recordSelected.value.length === 0) {
+    ElMessage.warning('请至少选择一行')
+    return
+  }
+
+  goodsList.value = goodsList.value.filter(item => recordSelected.value.includes(item) === false)
+}
+
+const supplierMultiSelect = (e: any) => {
+  recordSelected.value = e
+}
+
+// 保存至草稿箱
+const saveDraftApply = () => {
+  consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间
+  saveConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+      // 设置返回的id和编号
+      consumableApply.value.applyNo = res.data.applyNo
+      consumableApply.value.id = res.data.id
+      id.value = res.data.id
+
+      type.value = 'update'
+      status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+// 编辑草稿箱（不走流程审批）
+const updateDraftApply = () => {
+  updateConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+
+// 编辑按钮点击事件处理函数
+const editClickedHandler = () => {
+  type.value = 'update'
+  title.value = '易耗物资申请单（编辑）'
+
+  // 隐藏编辑按钮 显示提交按钮
+  editButtVisable.value = false
+  submitButtVisable.value = true
+}
+
+// 新建时保存后的处理 获取返回的id
+const saveButtonHandler = async () => {
+  if (!consumableApplyRef) { return }
+
+  if (goodsList.value.length === 0) {
+    ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+    return
+  }
+
+  if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+    return
+  }
+
+  await consumableApplyRef.value.validate((valid: boolean) => {
+    if (valid === true) {
+      consumableApply.value.goodsDetailList = goodsList.value
+
+      ElMessageBox.confirm(
+        '确认保存吗？',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        },
+      ).then(() => {
+        if (type.value === 'create') {
+          saveDraftApply()
+        }
+        else if (type.value === 'update') {
+          updateDraftApply()
+        }
+      })
+    }
+  })
+}
+
+// 提交按钮
+const submitButtonHandler = async () => {
+  if (consumableApply.value === null || consumableApply.value.processId === undefined || consumableApply.value.processId === '') {
+    // 流程id为空 表示还未进入流程中 直接提交
+    ElMessageBox.confirm(`是否提交易耗物资申请单 ${consumableApply.value.applyNo}`, '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      submitConsumableApply({
+        formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL,
+        id: consumableApply.value.id,
+      }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+          type.value = 'detail'
+          hideAllOpterationButtons()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+        }
+      })
+    })
+  }
+  else {
+    // 之前已经在流程中的表单 保存提交
+    if (goodsList.value.length === 0) {
+      ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+      return
+    }
+
+    if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+      return
+    }
+
+    await consumableApplyRef.value.validate((valid: boolean) => {
+      if (valid === true) {
+        failUpdateConsumableApply(consumableApply.value).then((res) => {
+          if (res.code === 200) {
+          // 提示保存成功
+            ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+            type.value = 'detail'
+            hideAllOpterationButtons()
+          }
+          else {
+          // 提示失败信息
+            ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据id查询详情
+const detailById = async (id: string) => {
+  await detailConsumableApply({ id }).then((res) => {
+    if (res.code === 200) {
+      consumableApply.value = res.data
+      goodsList.value = consumableApply.value.goodsDetailList
+      if (consumableApply.value.taskId === '') {
+        consumableApply.value.taskId = sessionStorage.getItem('consumableApplyTaskId')!
+      }
+    }
+  })
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = () => {
+  approvalDialog.value.initDialog('refuse', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = () => {
+  approvalDialog.value.initDialog('agree', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 取消流程
+const revokeClickedHandler = () => {
+  approvalDialog.value.initDialog('revoke', consumableApply.value.id, consumableApply.value.taskId, consumableApply.value.processId)
+}
+
+// 删除审批单
+const deleteClickedHandler = () => {
+  ElMessageBox.confirm(`是否删除审批单 ${consumableApply.value.applyNo}`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    draftDeleteApply({ id: id.value }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(`审批单 ${consumableApply.value.applyNo} 删除成功`)
+        resetForm()
+      }
+      else {
+        ElMessage.error(`审批单 ${consumableApply.value.applyNo} 删除失败: ${res.message}`)
+      }
+    })
+  })
+}
+
+// 流程审批（同意、拒绝、取消）结束后的操作 将按钮都隐藏（本身就不能编辑了）
+const approvalSuccessHandler = (type: string) => {
+  if (type === 'agree' || type === 'refuse') {
+    flowButtsVisable.value = false
+  }
+  else if (type === 'revoke') {
+    cancelButtVisable.value = false
+  }
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    cancelButtVisable.value = false
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    flowButtsVisable.value = false
+  })
+}
+
+// 选定供应商返回 允许供应商重复
+const appendToContentList = (rows: ISupplierInfo[]) => {
+  rows.forEach((row) => {
+    goodsList.value.push({
+      id: '',
+      supplierId: row.id,
+      supplierName: row.supplierName,
+      goodsName: '',
+      goodsModel: '',
+      goodsQuantity: '',
+      remark: '',
+      createTime: '',
+    })
+  })
+}
+
+const getLabCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizLabCode').then((res) => {
+      if (res.code === 200) {
+        labCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
+  }
+}
+
+const getGroupCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizGroupCode').then((res) => {
+      if (res.code === 200) {
+        groupCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
+  }
+}
+
+const initDict = async () => {
+  await getLabCodeDict()
+  await getGroupCodeDict()
+}
+
+const initDialog = (params: any) => {
+  // 从路由中获取参数
+  type.value = params.type
+  id.value = params.id !== undefined ? params.id : ''
+  status.value = params.status !== undefined ? params.status : ''
+
+  // 默认显示第一个tab内容
+  current.value = radioItems.value[0].value
+  currentLabel.value = radioItems.value[0].name
+
+  switch (params.type) {
+    case 'create' :
+      title.value = '易耗物资申请单（新增）'
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+
+      consumableApply.value.createUserId = userInfo.id
+      consumableApply.value.createUserName = userInfo.name
+      consumableApply.value.createDeptId = userInfo.deptId
+      consumableApply.value.createDept = userInfo.deptName
+      consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
+
+      keyFieldsDisable.value = false
+
+      break
+    case 'update':
+      title.value = '易耗物资申请单（编辑）'
+
+      detailById(id.value)
+
+      // 判断显示哪些流程操作按钮
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    case 'detail':
+      title.value = '易耗物资申请单（详情）'
+      id.value = params.id
+
+      detailById(id.value)
+
+      // 查看详情时所有的操作按钮都隐藏
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    default:
+      title.value = ''
+      break
+  }
+}
+
+onMounted(() => {
+  initDict()
+  initDialog(route.query)
+})
+</script>
+
+<template>
+  <app-container>
+    <el-form ref="consumableApplyRef" :model="consumableApply" :rules="applyRules" label-position="right" label-width="110px" border stripe>
+      <detail-page :title="`${title}`">
+        <template #btns>
+          <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()">
+            编辑
+          </el-button>
+
+          <template v-if="flowButtsVisable">
+            <el-button type="primary" @click="approvalAgreeHandler">
+              同意
+            </el-button>
+            <el-button type="danger" @click="approvalRefuseHandler">
+              拒绝
+            </el-button>
+          </template>
+
+          <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler">
+            提交
+          </el-button>
+          <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler">
+            保存
+          </el-button>
+
+          <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler">
+            删除
+          </el-button>
+          <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler">
+            取消
+          </el-button>
+
+          <el-button type="info" @click="resetForm()">
+            关闭
+          </el-button>
+        </template>
+
+        <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
+          <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
+        </el-radio-group>
+
+        <template v-if="current === 'consumable-apply-basic'">
+          <el-row :gutter="24">
+            <!-- 第一行 第一列 -->
+            <el-col :span="6">
+              <el-form-item label="实验室代码" prop="labCode">
+                <el-select v-model="consumableApply.labCode" placeholder="请选择实验室代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请部门">
+                <el-input v-model="consumableApply.createDept" :disabled="true" />
+                <el-input v-model="consumableApply.createDeptId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="组别代码" prop="groupCode">
+                <el-select v-model="consumableApply.groupCode" placeholder="请选择组别代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请人">
+                <el-input v-model="consumableApply.createUserName" :disabled="true" />
+                <el-input v-model="consumableApply.createUserId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单编号">
+                <el-input v-model="consumableApply.applyNo" placeholder="申请单编号，保存后自动生成" :disabled="true" />
+              </el-form-item>
+              <el-form-item label="申请时间">
+                <el-input v-model="consumableApply.createTime" :disabled="true" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单名称">
+                <el-input v-model="consumableApply.applyName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="申请原因" prop="applyReason">
+                <el-input v-model="consumableApply.applyReason" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="备注">
+                <el-input v-model="consumableApply.remark" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+      </detail-page>
+
+      <template v-if="current === 'consumable-apply-basic'">
+        <table-container title="物资明细">
+          <template v-if="type !== 'detail'" #btns-right>
+            <el-button type="primary" @click="addEditableRow">
+              增加行
+            </el-button>
+            <el-button type="info" @click="delSupplierRecords">
+              删除行
+            </el-button>
+          </template>
+
+          <!-- 表格区域 -->
+          <el-table :data="goodsList" border style="width: 100%;" @selection-change="supplierMultiSelect">
+            <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" />
+            <el-table-column align="center" label="序号" width="55" type="index" />
+            <el-table-column
+              v-for="item in goodsColumns"
+              :key="item.value"
+              :prop="item.value"
+              :label="item.text"
+              :width="item.width"
+              align="center"
+            >
+              <template #header>
+                <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
+              </template>
+              <template #default="scope">
+                <el-input v-if="item.required === true && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+                <el-input v-if="item.value === 'remark' && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </table-container>
+      </template>
+    </el-form>
+
+    <approval-dialog
+      ref="approvalDialog"
+      @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler"
+    />
+
+    <filter-supplier ref="supplierFilterRef" @records-selected="appendToContentList" />
+
+    <template v-if="current === 'consumable-apply-approval' && status !== '1'">
+      <approval-record-table :process-id="consumableApply.processId" />
+    </template>
+  </app-container>
+</template>
diff --git a/src/views/resource/outsideService/consumable/applyList.vue b/src/views/resource/outsideService/consumable/applyList.vue
new file mode 100644
index 0000000..d6cba40
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyList.vue
@@ -0,0 +1,533 @@
+<!-- 易耗物资申请单 列表 -->
+<script name="ConsumableApplyList" lang="ts" setup>
+import type { DateModelType } from 'element-plus'
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IApplyListQuery, IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import type { IMenu } from '@/components/buttonBox/buttonBox'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { canceledApprDeleteApply, detailConsumableApply, draftDeleteApply, getConsumableApplyList, refuseApprovalApply, revokeApprovalApply } from '@/api/resource/supplierConsumable'
+
+// 定义常量
+const buttonBoxActive = 'consumableApplyApproval' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
+
+const { proxy } = getCurrentInstance() as any
+const router = useRouter()
+
+// 选中的审批状态按钮
+const active = ref('')
+const menu = ref<IMenu[]>([]) // 审批状态按钮组合
+const approvalStatusList = ref<String[]>([
+  '全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消',
+])
+
+// 弹窗子组件
+const apprDial = ref()
+const applyTableRef = ref()
+
+// 查询条件
+const searchQuery = ref<IApplyListQuery>({
+  applyNo: '', // 申请单编号
+  applyName: '', // 申请单名称
+  createDept: '', // 编制部门
+  createUserName: '', // 编制人
+  createTimeStart: '', // 创建时间-起始
+  createTimeEnd: '', // 创建时间-结束
+  approvalStatus: active.value, // 审批状态
+  formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+  offset: 1,
+  limit: 20,
+})
+const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
+const total = ref(0) // 数据条数
+const loadingTable = ref(false) // 表格loading
+const expandLoading = ref(false) // 展开表格的loading
+
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '申请单编号', value: 'applyNo', align: 'center', width: '200' },
+  { text: '易耗物资名称、规格型号及数量', value: 'goodsListStr', align: 'center' },
+  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
+  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
+  { text: '申请时间', value: 'createTime', align: 'center', width: '120' },
+  { text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' },
+])
+const statusColumn = ref<TableColumn>({ text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' })
+const applyList = ref<Array<IConsumableApply>>([]) // 表格数据
+const expandRowKey = ref<string>('')
+const goodsListExpand = ref<Array<IConsumableApplyGoods>>([])
+
+const expandRowKeys = computed(() => {
+  return [expandRowKey.value]
+})
+
+const expandTableWidth = computed(() => {
+  console.log(applyTableRef.value.width)
+})
+
+// 逻辑
+// 跳转到新建的页面
+const addConsumableApply = () => {
+  router.push({
+    query: {
+      type: 'create',
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击编辑按钮
+const updateInfo = (row: IConsumableApply) => {
+  sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+  router.push({
+    query: {
+      type: 'update',
+      id: row.id,
+      status: searchQuery.value.approvalStatus,
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击查看（或编辑）按钮
+const detail = (row: IConsumableApply) => {
+  if (searchQuery.value.approvalStatus === '1') {
+    // 全部或草稿箱 状态的 查看 是可以编辑的组件
+    updateInfo(row)
+  }
+  else if (active.value === '0') {
+    router.push({
+      query: {
+        type: 'apply',
+        id: row.id,
+      },
+      path: 'consumableApply/approved',
+    })
+  }
+  else {
+    // 将行数据存入缓存 用来在路由之间传递数据
+    sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+
+    router.push({
+      query: {
+        type: 'detail',
+        id: row.id,
+        status: searchQuery.value.approvalStatus,
+      },
+      path: 'consumableApply/detail',
+    })
+  }
+}
+
+// 删除易耗物资申请单 或 删除草稿箱中的审批单
+const deleteById = (row: any) => {
+  ElMessageBox.confirm('是否删除易耗物资申请单', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    if (active.value === '1') {
+      // 草稿箱中的删除记录
+      draftDeleteApply({ id: row.id }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+    else if (active.value === '6') {
+      // 已取消中的删除记录
+      canceledApprDeleteApply({ id: row.id, taskId: row.taskId }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+  })
+}
+
+const getDetailGoodsList = (goods: IConsumableApply) => {
+  expandLoading.value = true
+  detailConsumableApply({ id: goods.id }).then((res) => {
+    if (res.code === 200) {
+      goodsListExpand.value = res.data.goodsDetailList
+
+      expandLoading.value = false
+    }
+  }).catch(() => {
+    expandLoading.value = false
+  })
+}
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    searchQuery.value.offset = 1
+  }
+  getConsumableApplyList(searchQuery.value).then((response) => {
+    if (response.code === 200) {
+      applyList.value = response.data.rows.map((item: IConsumableApply) => {
+        return {
+          ...item,
+          createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '',
+          goodsListStr: `${item.goodsName}；${item.goodsModel}；${item.goodsQuantity}`,
+        }
+      })
+      total.value = parseInt(response.data.total)
+    }
+    expandRowKey.value = ''
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+
+const searchList = () => {
+  fetchData(true)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.value.offset = val.page
+  }
+  fetchData(true)
+}
+
+// 改变页容量
+function handleSizeChange(val: number) {
+  changePage({ size: val })
+}
+// 改变当前页
+function handleCurrentChange(val: number) {
+  changePage({ page: val })
+}
+
+// 重置
+const reset = () => {
+  searchQuery.value = {
+    applyNo: '', // 申请单编号
+    applyName: '', // 申请单名称
+    createDept: '', // 编制部门
+    createUserName: '', // 编制人
+    createTimeStart: '', // 创建时间-起始
+    createTimeEnd: '', // 创建时间-结束
+    approvalStatus: active.value, // 审批状态
+    formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+    offset: 1,
+    limit: 20,
+  }
+  dateRange.value = ['', '']
+  fetchData(true)
+}
+
+// 审批按钮点击切换事件
+const changeCurrentButton = (val: string) => {
+  active.value = val // 此时的tab
+  window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态
+
+  const hasStatus = columns.value.filter((col) => {
+    return col.value === statusColumn.value.value
+  })
+
+  if (val === '0') {
+    // 全部的时候不要显示审批状态
+    if (hasStatus.length > 0) {
+      columns.value.pop()
+    }
+  }
+  else {
+    // 其他状态下要显示审批状态字段
+    if (hasStatus.length === 0) {
+      columns.value.push(statusColumn.value)
+    }
+  }
+
+  reset() // 刷新
+}
+
+// 展开行 每次只能展开一行
+const expandCurrentRow = (row: IConsumableApply) => {
+  if (expandRowKey.value === '') {
+    expandRowKey.value = row.applyNo
+  }
+  else {
+    expandRowKey.value = ''
+  }
+}
+
+// 点击行
+const expandClickedHandler = async (row: IConsumableApply, event: any) => {
+  expandCurrentRow(row)
+  if (expandRowKey.value !== '') {
+    getDetailGoodsList(row)
+  }
+}
+
+const tableRowExpandChange = (row: IConsumableApply) => {
+  expandCurrentRow(row)
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('agree', row.id, row.taskId, '')
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('refuse', row.id, row.taskId, '')
+}
+
+// 取消（撤回审批单）
+const revokeApprById = (row: IConsumableApply) => {
+  apprDial.value.initDialog('revoke', row.id, row.taskId, row.processId)
+}
+
+// 流程操作之后刷新
+const afterApprovalHandler = () => {
+  fetchData(true)
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 初始化流程审批状态按钮
+const getApprovalStatusDict = () => {
+  getDictByCode('approvalStatus').then((res) => {
+    if (res.code === 200) {
+      approvalStatusList.value.forEach((item) => {
+        const tempFindData = res.data.find((e: { name: string; value: string }) => e.name === item)
+        if (tempFindData) {
+          menu.value.push({
+            name: tempFindData.name,
+            id: `${tempFindData.value}`,
+          })
+        }
+      })
+    }
+  })
+}
+
+const getLabCodeDict = async () => {
+  await getDictByCode('bizLabCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizLabCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getGroupCodeDict = async () => {
+  await getDictByCode('bizGroupCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getDict = async () => {
+  getApprovalStatusDict()
+  getLabCodeDict()
+  getGroupCodeDict()
+}
+
+watch(dateRange, (val) => {
+  if (val) {
+    searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD')
+    searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD')
+  }
+  else {
+    searchQuery.value.createTimeStart = ''
+    searchQuery.value.createTimeEnd = ''
+  }
+})
+
+onMounted(async () => {
+  await getDict()
+  if (sessionStorage.getItem(buttonBoxActive) !== 'undefined' && sessionStorage.getItem(buttonBoxActive) !== null) {
+    active.value = sessionStorage.getItem(buttonBoxActive)!
+  }
+  else {
+    active.value = '0' // 全部
+  }
+})
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="searchList" @clear="reset">
+      <search-item>
+        <el-input v-model="searchQuery.applyNo" placeholder="申请单编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createDept" placeholder="申请部门" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createUserName" placeholder="申请人" clearable />
+      </search-item>
+      <search-item>
+        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="申请时间（开始）" end-placeholder="申请时间（结束）" />
+      </search-item>
+    </search-area>
+
+    <!-- 表格数据展示 -->
+    <table-container>
+      <!-- 表头区域 -->
+      <template v-if="active === '0' && proxy.hasPerm(`/resource/outsideService/consumableApply/add`)" #btns-right>
+        <icon-button icon="icon-add" title="新建" @click="addConsumableApply" />
+      </template>
+
+      <el-table
+        ref="applyTableRef"
+        v-loading="loadingTable" :data="applyList" style="width: 100%;" stripe
+        border row-key="applyNo"
+        :expand-row-keys="expandRowKeys"
+        @expand-change="tableRowExpandChange"
+      >
+        <el-table-column type="expand" width="1">
+          <el-table
+            v-loading="expandLoading" :show-header="false" :data="goodsListExpand"
+            border :class="active === '0' ? 'expand-approval-all' : 'expand-approval-with-status'"
+          >
+            <el-table-column label="名称" prop="goodsName" align="center" />
+            <el-table-column label="规格型号" prop="goodsModel" align="center" />
+            <el-table-column label="数量" prop="goodsQuantity" align="center" />
+          </el-table>
+        </el-table-column>
+
+        <el-table-column align="center" label="序号" width="55" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+          :width="item.width"
+          align="center"
+        />
+
+        <el-table-column fixed="right" label="操作" align="center" width="130">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="expandClickedHandler(row, $event)">
+              <template v-if="expandRowKey !== row.applyNo">
+                展开物资
+              </template>
+              <template v-else>
+                收起展开
+              </template>
+            </el-button>
+            <el-button size="small" type="primary" link @click="detail(row)">
+              查看
+            </el-button>
+
+            <el-button v-if="(active === '1' || active === '6') && proxy.hasPerm(`/resource/outsideService/consumableApply/del`)" size="small" type="danger" link @click="deleteById(row)">
+              删除
+            </el-button>
+
+            <template v-if="active === '2'">
+              <el-button size="small" type="primary" link @click="approvalAgreeHandler(row)">
+                同意
+              </el-button>
+              <el-button size="small" type="danger" link @click="approvalRefuseHandler(row)">
+                拒绝
+              </el-button>
+            </template>
+            <template v-if="active === '3'">
+              <el-button size="small" type="info" link @click="revokeApprById(row)">
+                取消
+              </el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div style="width: 100%;margin-top: 10px;">
+        <el-pagination
+          :current-page="searchQuery.offset"
+          :page-sizes="[10, 20, 30]"
+          :page-size="searchQuery.limit"
+          :total="total"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </table-container>
+
+    <!-- 审批单弹窗 -->
+    <approval-dialog
+      ref="apprDial"
+      @on-success="afterApprovalHandler"
+      @on-refuse="refuseHandler"
+      @on-revoke="revokeHandler"
+    />
+
+    <!-- 右上角按钮集合 -->
+    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+  </app-container>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-icon) {
+  visibility: hidden !important;
+}
+
+::v-deep(.el-table__expanded-cell) {
+  padding-top: 0 !important;
+}
+
+/* 其他状态下的列表 */
+.expand-approval-with-status {
+  width: calc(100% - 885px);
+  margin-left: 255px;
+}
+
+/* 全部状态下的列表 */
+.expand-approval-all {
+  width: calc(100% - 785px);
+  margin-left: 255px;
+}
+</style>
diff --git a/src/views/resource/outsideService/consumable/approvedDetail.vue b/src/views/resource/outsideService/consumable/approvedDetail.vue
index dd66210..4f5673c 100644
--- a/src/views/resource/outsideService/consumable/approvedDetail.vue
+++ b/src/views/resource/outsideService/consumable/approvedDetail.vue
@@ -3,11 +3,14 @@
 import { ElMessage } from 'element-plus'
 
 // 从路由中传过来的参数
+const type = ref<string>('')
 const id = ref<string>('')
 
 const route = useRoute()
 const router = useRouter()
 
+const title = ref('')
+
 // 逻辑
 // 关闭
 const resetForm = () => {
@@ -31,7 +34,22 @@
 
 const initDialog = (params: any) => {
   // 从路由中获取参数
+  type.value = params.type !== undefined ? params.type : ''
   id.value = params.id !== undefined ? params.id : ''
+
+  switch (type.value) {
+    case 'evaluate':
+      title.value = '易耗物资供方评价表'
+      break
+
+    case 'apply' :
+      title.value = '易耗物资申请单'
+      break
+
+    case 'use':
+      title.value = '易耗物资使用记录'
+      break
+  }
 }
 
 onMounted(() => {
@@ -41,7 +59,7 @@
 
 <template>
   <app-container>
-    <detail-page title="易耗物资供方评价表">
+    <detail-page :title="title">
       <template #btns>
         <el-button type="primary" @click="printToWord">
           导出Word

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),
diff --git a/src/views/resource/outsideService/consumable/applyDetail.vue b/src/views/resource/outsideService/consumable/applyDetail.vue
new file mode 100644
index 0000000..241d195
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyDetail.vue
@@ -0,0 +1,669 @@
+<!-- 易耗物资申请单 详情 -->
+<script name="ConsumableApplyDetail" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import type { ISupplierInfo } from '@/views/resource/outsideService/supplier/supplier-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import FilterSupplier from '@/views/resource/common/filterSupplier.vue'
+import type { IDictType } from '@/commonInterface/resource-interface'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import { detailConsumableApply, draftDeleteApply, failUpdateConsumableApply, refuseApprovalApply, revokeApprovalApply, saveConsumableApply, submitConsumableApply, updateConsumableApply } from '@/api/resource/supplierConsumable'
+import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
+import useUserStore from '@/store/modules/user'
+import { getDictByCode } from '@/api/system/dict'
+import { useCheckList } from '@/commonMethods/useCheckList'
+
+// 变量
+// 从路由中传过来的参数
+const type = ref<string>('')
+const id = ref<string>('')
+const status = ref<string>('')
+
+// 关键字段是否可以编辑
+const keyFieldsDisable = ref<boolean>(true)
+
+const userInfo = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const title = ref('')
+
+const radioItems = ref([
+  { name: '基本信息', value: 'consumable-apply-basic' },
+  { name: '审批详情', value: 'consumable-apply-approval' },
+])
+const current = ref('')
+const currentLabel = ref('')
+
+// 子组件
+const approvalDialog = ref()
+const consumableApplyRef = ref()
+const supplierFilterRef = ref()
+
+const consumableApply = ref<IConsumableApply>({
+  id: '',
+  labCode: '',
+  groupCode: '',
+  applyNo: '',
+  applyName: '易耗物资申请单',
+  createDeptId: '',
+  createUserId: '',
+  createTime: '',
+  applyReason: '',
+  remark: '',
+  goodsDetailList: [],
+  approvalStatus: '',
+  approvalStatusName: '',
+  processId: '',
+  taskId: '',
+})
+
+const goodsList = ref<Array<IConsumableApplyGoods>>([])
+const goodsColumns = [
+  { text: '名称', value: 'goodsName', align: 'center', width: '240', required: true },
+  { text: '规格型号', value: 'goodsModel', align: 'center', width: '240', required: true },
+  { text: '数量及单位', value: 'goodsQuantity', align: 'center', width: '240', required: true },
+  { text: '生产商', value: 'supplierName', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
+] // 表头
+
+const applyRules = ref({
+  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  groupCode: [{ required: true, message: '组别代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+
+// 是否显示相关按钮
+const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮
+const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮
+const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮
+const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮
+const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮
+const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮
+
+// 字典值
+const labCodeDict = ref<IDictType[]>([])
+const groupCodeDict = ref<IDictType[]>([])
+
+const recordSelected = ref<IConsumableApplyGoods[]>([])
+
+// 逻辑
+// 详情页的各个tab切换操作
+const radioChangeHandler = (newVal: string | number | boolean) => {
+  const radioTarget = radioItems.value.filter(item => item.name === newVal)
+  if (radioTarget.length > 0) {
+    currentLabel.value = radioTarget[0].name
+    current.value = radioTarget[0].value
+  }
+  else {
+    currentLabel.value = radioItems.value[0].name
+    current.value = radioItems.value[0].value
+  }
+}
+
+// 将所有流程操作的按钮隐藏
+const hideAllOpterationButtons = () => {
+  saveButtVisable.value = false
+  submitButtVisable.value = false
+  flowButtsVisable.value = false
+  cancelButtVisable.value = false
+  deleteButtVisable.value = false
+  editButtVisable.value = false
+}
+
+// 根据审批状态显示对应的流程操作按钮
+const showOperationButtonByStatus = () => {
+  switch (status.value) {
+    case '0':
+      // 全部：保存按钮可见
+      if (type.value === 'update') {
+        saveButtVisable.value = true
+      }
+      else {
+        saveButtVisable.value = false
+      }
+      break
+
+    case '1':
+      // 草稿箱：保存、提交按钮可见
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+      break
+
+    case '2':
+      // 待审批：同意、拒绝按钮可见
+      flowButtsVisable.value = true
+      break
+
+    case '3':
+      // 审批中：取消按钮可见
+      cancelButtVisable.value = true
+      break
+
+    case '5':
+      // 未通过：编辑 按钮可见
+      editButtVisable.value = true
+      break
+
+    case '6':
+      // 已取消：编辑 删除按钮可见
+      editButtVisable.value = true
+      deleteButtVisable.value = true
+      break
+
+    default:
+      // 默认不显示所有的操作按钮
+      hideAllOpterationButtons()
+      break
+  }
+}
+
+// 关闭
+const resetForm = () => {
+  sessionStorage.removeItem('consumableApplyTaskId') // 返回列表时 将缓存中的数据删除
+  router.go(-1)
+}
+
+// 新增
+const addEditableRow = () => {
+  supplierFilterRef.value.showOrHideFilterDialog(true, '3')
+}
+
+const delSupplierRecords = () => {
+  if (recordSelected.value.length === 0) {
+    ElMessage.warning('请至少选择一行')
+    return
+  }
+
+  goodsList.value = goodsList.value.filter(item => recordSelected.value.includes(item) === false)
+}
+
+const supplierMultiSelect = (e: any) => {
+  recordSelected.value = e
+}
+
+// 保存至草稿箱
+const saveDraftApply = () => {
+  consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间
+  saveConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+      // 设置返回的id和编号
+      consumableApply.value.applyNo = res.data.applyNo
+      consumableApply.value.id = res.data.id
+      id.value = res.data.id
+
+      type.value = 'update'
+      status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+// 编辑草稿箱（不走流程审批）
+const updateDraftApply = () => {
+  updateConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+
+// 编辑按钮点击事件处理函数
+const editClickedHandler = () => {
+  type.value = 'update'
+  title.value = '易耗物资申请单（编辑）'
+
+  // 隐藏编辑按钮 显示提交按钮
+  editButtVisable.value = false
+  submitButtVisable.value = true
+}
+
+// 新建时保存后的处理 获取返回的id
+const saveButtonHandler = async () => {
+  if (!consumableApplyRef) { return }
+
+  if (goodsList.value.length === 0) {
+    ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+    return
+  }
+
+  if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+    return
+  }
+
+  await consumableApplyRef.value.validate((valid: boolean) => {
+    if (valid === true) {
+      consumableApply.value.goodsDetailList = goodsList.value
+
+      ElMessageBox.confirm(
+        '确认保存吗？',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        },
+      ).then(() => {
+        if (type.value === 'create') {
+          saveDraftApply()
+        }
+        else if (type.value === 'update') {
+          updateDraftApply()
+        }
+      })
+    }
+  })
+}
+
+// 提交按钮
+const submitButtonHandler = async () => {
+  if (consumableApply.value === null || consumableApply.value.processId === undefined || consumableApply.value.processId === '') {
+    // 流程id为空 表示还未进入流程中 直接提交
+    ElMessageBox.confirm(`是否提交易耗物资申请单 ${consumableApply.value.applyNo}`, '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      submitConsumableApply({
+        formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL,
+        id: consumableApply.value.id,
+      }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+          type.value = 'detail'
+          hideAllOpterationButtons()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+        }
+      })
+    })
+  }
+  else {
+    // 之前已经在流程中的表单 保存提交
+    if (goodsList.value.length === 0) {
+      ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+      return
+    }
+
+    if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+      return
+    }
+
+    await consumableApplyRef.value.validate((valid: boolean) => {
+      if (valid === true) {
+        failUpdateConsumableApply(consumableApply.value).then((res) => {
+          if (res.code === 200) {
+          // 提示保存成功
+            ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+            type.value = 'detail'
+            hideAllOpterationButtons()
+          }
+          else {
+          // 提示失败信息
+            ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据id查询详情
+const detailById = async (id: string) => {
+  await detailConsumableApply({ id }).then((res) => {
+    if (res.code === 200) {
+      consumableApply.value = res.data
+      goodsList.value = consumableApply.value.goodsDetailList
+      if (consumableApply.value.taskId === '') {
+        consumableApply.value.taskId = sessionStorage.getItem('consumableApplyTaskId')!
+      }
+    }
+  })
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = () => {
+  approvalDialog.value.initDialog('refuse', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = () => {
+  approvalDialog.value.initDialog('agree', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 取消流程
+const revokeClickedHandler = () => {
+  approvalDialog.value.initDialog('revoke', consumableApply.value.id, consumableApply.value.taskId, consumableApply.value.processId)
+}
+
+// 删除审批单
+const deleteClickedHandler = () => {
+  ElMessageBox.confirm(`是否删除审批单 ${consumableApply.value.applyNo}`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    draftDeleteApply({ id: id.value }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(`审批单 ${consumableApply.value.applyNo} 删除成功`)
+        resetForm()
+      }
+      else {
+        ElMessage.error(`审批单 ${consumableApply.value.applyNo} 删除失败: ${res.message}`)
+      }
+    })
+  })
+}
+
+// 流程审批（同意、拒绝、取消）结束后的操作 将按钮都隐藏（本身就不能编辑了）
+const approvalSuccessHandler = (type: string) => {
+  if (type === 'agree' || type === 'refuse') {
+    flowButtsVisable.value = false
+  }
+  else if (type === 'revoke') {
+    cancelButtVisable.value = false
+  }
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    cancelButtVisable.value = false
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    flowButtsVisable.value = false
+  })
+}
+
+// 选定供应商返回 允许供应商重复
+const appendToContentList = (rows: ISupplierInfo[]) => {
+  rows.forEach((row) => {
+    goodsList.value.push({
+      id: '',
+      supplierId: row.id,
+      supplierName: row.supplierName,
+      goodsName: '',
+      goodsModel: '',
+      goodsQuantity: '',
+      remark: '',
+      createTime: '',
+    })
+  })
+}
+
+const getLabCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizLabCode').then((res) => {
+      if (res.code === 200) {
+        labCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
+  }
+}
+
+const getGroupCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizGroupCode').then((res) => {
+      if (res.code === 200) {
+        groupCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
+  }
+}
+
+const initDict = async () => {
+  await getLabCodeDict()
+  await getGroupCodeDict()
+}
+
+const initDialog = (params: any) => {
+  // 从路由中获取参数
+  type.value = params.type
+  id.value = params.id !== undefined ? params.id : ''
+  status.value = params.status !== undefined ? params.status : ''
+
+  // 默认显示第一个tab内容
+  current.value = radioItems.value[0].value
+  currentLabel.value = radioItems.value[0].name
+
+  switch (params.type) {
+    case 'create' :
+      title.value = '易耗物资申请单（新增）'
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+
+      consumableApply.value.createUserId = userInfo.id
+      consumableApply.value.createUserName = userInfo.name
+      consumableApply.value.createDeptId = userInfo.deptId
+      consumableApply.value.createDept = userInfo.deptName
+      consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
+
+      keyFieldsDisable.value = false
+
+      break
+    case 'update':
+      title.value = '易耗物资申请单（编辑）'
+
+      detailById(id.value)
+
+      // 判断显示哪些流程操作按钮
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    case 'detail':
+      title.value = '易耗物资申请单（详情）'
+      id.value = params.id
+
+      detailById(id.value)
+
+      // 查看详情时所有的操作按钮都隐藏
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    default:
+      title.value = ''
+      break
+  }
+}
+
+onMounted(() => {
+  initDict()
+  initDialog(route.query)
+})
+</script>
+
+<template>
+  <app-container>
+    <el-form ref="consumableApplyRef" :model="consumableApply" :rules="applyRules" label-position="right" label-width="110px" border stripe>
+      <detail-page :title="`${title}`">
+        <template #btns>
+          <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()">
+            编辑
+          </el-button>
+
+          <template v-if="flowButtsVisable">
+            <el-button type="primary" @click="approvalAgreeHandler">
+              同意
+            </el-button>
+            <el-button type="danger" @click="approvalRefuseHandler">
+              拒绝
+            </el-button>
+          </template>
+
+          <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler">
+            提交
+          </el-button>
+          <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler">
+            保存
+          </el-button>
+
+          <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler">
+            删除
+          </el-button>
+          <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler">
+            取消
+          </el-button>
+
+          <el-button type="info" @click="resetForm()">
+            关闭
+          </el-button>
+        </template>
+
+        <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
+          <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
+        </el-radio-group>
+
+        <template v-if="current === 'consumable-apply-basic'">
+          <el-row :gutter="24">
+            <!-- 第一行 第一列 -->
+            <el-col :span="6">
+              <el-form-item label="实验室代码" prop="labCode">
+                <el-select v-model="consumableApply.labCode" placeholder="请选择实验室代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请部门">
+                <el-input v-model="consumableApply.createDept" :disabled="true" />
+                <el-input v-model="consumableApply.createDeptId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="组别代码" prop="groupCode">
+                <el-select v-model="consumableApply.groupCode" placeholder="请选择组别代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请人">
+                <el-input v-model="consumableApply.createUserName" :disabled="true" />
+                <el-input v-model="consumableApply.createUserId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单编号">
+                <el-input v-model="consumableApply.applyNo" placeholder="申请单编号，保存后自动生成" :disabled="true" />
+              </el-form-item>
+              <el-form-item label="申请时间">
+                <el-input v-model="consumableApply.createTime" :disabled="true" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单名称">
+                <el-input v-model="consumableApply.applyName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="申请原因" prop="applyReason">
+                <el-input v-model="consumableApply.applyReason" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="备注">
+                <el-input v-model="consumableApply.remark" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+      </detail-page>
+
+      <template v-if="current === 'consumable-apply-basic'">
+        <table-container title="物资明细">
+          <template v-if="type !== 'detail'" #btns-right>
+            <el-button type="primary" @click="addEditableRow">
+              增加行
+            </el-button>
+            <el-button type="info" @click="delSupplierRecords">
+              删除行
+            </el-button>
+          </template>
+
+          <!-- 表格区域 -->
+          <el-table :data="goodsList" border style="width: 100%;" @selection-change="supplierMultiSelect">
+            <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" />
+            <el-table-column align="center" label="序号" width="55" type="index" />
+            <el-table-column
+              v-for="item in goodsColumns"
+              :key="item.value"
+              :prop="item.value"
+              :label="item.text"
+              :width="item.width"
+              align="center"
+            >
+              <template #header>
+                <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
+              </template>
+              <template #default="scope">
+                <el-input v-if="item.required === true && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+                <el-input v-if="item.value === 'remark' && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </table-container>
+      </template>
+    </el-form>
+
+    <approval-dialog
+      ref="approvalDialog"
+      @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler"
+    />
+
+    <filter-supplier ref="supplierFilterRef" @records-selected="appendToContentList" />
+
+    <template v-if="current === 'consumable-apply-approval' && status !== '1'">
+      <approval-record-table :process-id="consumableApply.processId" />
+    </template>
+  </app-container>
+</template>
diff --git a/src/views/resource/outsideService/consumable/applyList.vue b/src/views/resource/outsideService/consumable/applyList.vue
new file mode 100644
index 0000000..d6cba40
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyList.vue
@@ -0,0 +1,533 @@
+<!-- 易耗物资申请单 列表 -->
+<script name="ConsumableApplyList" lang="ts" setup>
+import type { DateModelType } from 'element-plus'
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IApplyListQuery, IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import type { IMenu } from '@/components/buttonBox/buttonBox'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { canceledApprDeleteApply, detailConsumableApply, draftDeleteApply, getConsumableApplyList, refuseApprovalApply, revokeApprovalApply } from '@/api/resource/supplierConsumable'
+
+// 定义常量
+const buttonBoxActive = 'consumableApplyApproval' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
+
+const { proxy } = getCurrentInstance() as any
+const router = useRouter()
+
+// 选中的审批状态按钮
+const active = ref('')
+const menu = ref<IMenu[]>([]) // 审批状态按钮组合
+const approvalStatusList = ref<String[]>([
+  '全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消',
+])
+
+// 弹窗子组件
+const apprDial = ref()
+const applyTableRef = ref()
+
+// 查询条件
+const searchQuery = ref<IApplyListQuery>({
+  applyNo: '', // 申请单编号
+  applyName: '', // 申请单名称
+  createDept: '', // 编制部门
+  createUserName: '', // 编制人
+  createTimeStart: '', // 创建时间-起始
+  createTimeEnd: '', // 创建时间-结束
+  approvalStatus: active.value, // 审批状态
+  formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+  offset: 1,
+  limit: 20,
+})
+const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
+const total = ref(0) // 数据条数
+const loadingTable = ref(false) // 表格loading
+const expandLoading = ref(false) // 展开表格的loading
+
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '申请单编号', value: 'applyNo', align: 'center', width: '200' },
+  { text: '易耗物资名称、规格型号及数量', value: 'goodsListStr', align: 'center' },
+  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
+  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
+  { text: '申请时间', value: 'createTime', align: 'center', width: '120' },
+  { text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' },
+])
+const statusColumn = ref<TableColumn>({ text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' })
+const applyList = ref<Array<IConsumableApply>>([]) // 表格数据
+const expandRowKey = ref<string>('')
+const goodsListExpand = ref<Array<IConsumableApplyGoods>>([])
+
+const expandRowKeys = computed(() => {
+  return [expandRowKey.value]
+})
+
+const expandTableWidth = computed(() => {
+  console.log(applyTableRef.value.width)
+})
+
+// 逻辑
+// 跳转到新建的页面
+const addConsumableApply = () => {
+  router.push({
+    query: {
+      type: 'create',
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击编辑按钮
+const updateInfo = (row: IConsumableApply) => {
+  sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+  router.push({
+    query: {
+      type: 'update',
+      id: row.id,
+      status: searchQuery.value.approvalStatus,
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击查看（或编辑）按钮
+const detail = (row: IConsumableApply) => {
+  if (searchQuery.value.approvalStatus === '1') {
+    // 全部或草稿箱 状态的 查看 是可以编辑的组件
+    updateInfo(row)
+  }
+  else if (active.value === '0') {
+    router.push({
+      query: {
+        type: 'apply',
+        id: row.id,
+      },
+      path: 'consumableApply/approved',
+    })
+  }
+  else {
+    // 将行数据存入缓存 用来在路由之间传递数据
+    sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+
+    router.push({
+      query: {
+        type: 'detail',
+        id: row.id,
+        status: searchQuery.value.approvalStatus,
+      },
+      path: 'consumableApply/detail',
+    })
+  }
+}
+
+// 删除易耗物资申请单 或 删除草稿箱中的审批单
+const deleteById = (row: any) => {
+  ElMessageBox.confirm('是否删除易耗物资申请单', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    if (active.value === '1') {
+      // 草稿箱中的删除记录
+      draftDeleteApply({ id: row.id }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+    else if (active.value === '6') {
+      // 已取消中的删除记录
+      canceledApprDeleteApply({ id: row.id, taskId: row.taskId }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+  })
+}
+
+const getDetailGoodsList = (goods: IConsumableApply) => {
+  expandLoading.value = true
+  detailConsumableApply({ id: goods.id }).then((res) => {
+    if (res.code === 200) {
+      goodsListExpand.value = res.data.goodsDetailList
+
+      expandLoading.value = false
+    }
+  }).catch(() => {
+    expandLoading.value = false
+  })
+}
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    searchQuery.value.offset = 1
+  }
+  getConsumableApplyList(searchQuery.value).then((response) => {
+    if (response.code === 200) {
+      applyList.value = response.data.rows.map((item: IConsumableApply) => {
+        return {
+          ...item,
+          createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '',
+          goodsListStr: `${item.goodsName}；${item.goodsModel}；${item.goodsQuantity}`,
+        }
+      })
+      total.value = parseInt(response.data.total)
+    }
+    expandRowKey.value = ''
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+
+const searchList = () => {
+  fetchData(true)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.value.offset = val.page
+  }
+  fetchData(true)
+}
+
+// 改变页容量
+function handleSizeChange(val: number) {
+  changePage({ size: val })
+}
+// 改变当前页
+function handleCurrentChange(val: number) {
+  changePage({ page: val })
+}
+
+// 重置
+const reset = () => {
+  searchQuery.value = {
+    applyNo: '', // 申请单编号
+    applyName: '', // 申请单名称
+    createDept: '', // 编制部门
+    createUserName: '', // 编制人
+    createTimeStart: '', // 创建时间-起始
+    createTimeEnd: '', // 创建时间-结束
+    approvalStatus: active.value, // 审批状态
+    formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+    offset: 1,
+    limit: 20,
+  }
+  dateRange.value = ['', '']
+  fetchData(true)
+}
+
+// 审批按钮点击切换事件
+const changeCurrentButton = (val: string) => {
+  active.value = val // 此时的tab
+  window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态
+
+  const hasStatus = columns.value.filter((col) => {
+    return col.value === statusColumn.value.value
+  })
+
+  if (val === '0') {
+    // 全部的时候不要显示审批状态
+    if (hasStatus.length > 0) {
+      columns.value.pop()
+    }
+  }
+  else {
+    // 其他状态下要显示审批状态字段
+    if (hasStatus.length === 0) {
+      columns.value.push(statusColumn.value)
+    }
+  }
+
+  reset() // 刷新
+}
+
+// 展开行 每次只能展开一行
+const expandCurrentRow = (row: IConsumableApply) => {
+  if (expandRowKey.value === '') {
+    expandRowKey.value = row.applyNo
+  }
+  else {
+    expandRowKey.value = ''
+  }
+}
+
+// 点击行
+const expandClickedHandler = async (row: IConsumableApply, event: any) => {
+  expandCurrentRow(row)
+  if (expandRowKey.value !== '') {
+    getDetailGoodsList(row)
+  }
+}
+
+const tableRowExpandChange = (row: IConsumableApply) => {
+  expandCurrentRow(row)
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('agree', row.id, row.taskId, '')
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('refuse', row.id, row.taskId, '')
+}
+
+// 取消（撤回审批单）
+const revokeApprById = (row: IConsumableApply) => {
+  apprDial.value.initDialog('revoke', row.id, row.taskId, row.processId)
+}
+
+// 流程操作之后刷新
+const afterApprovalHandler = () => {
+  fetchData(true)
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 初始化流程审批状态按钮
+const getApprovalStatusDict = () => {
+  getDictByCode('approvalStatus').then((res) => {
+    if (res.code === 200) {
+      approvalStatusList.value.forEach((item) => {
+        const tempFindData = res.data.find((e: { name: string; value: string }) => e.name === item)
+        if (tempFindData) {
+          menu.value.push({
+            name: tempFindData.name,
+            id: `${tempFindData.value}`,
+          })
+        }
+      })
+    }
+  })
+}
+
+const getLabCodeDict = async () => {
+  await getDictByCode('bizLabCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizLabCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getGroupCodeDict = async () => {
+  await getDictByCode('bizGroupCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getDict = async () => {
+  getApprovalStatusDict()
+  getLabCodeDict()
+  getGroupCodeDict()
+}
+
+watch(dateRange, (val) => {
+  if (val) {
+    searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD')
+    searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD')
+  }
+  else {
+    searchQuery.value.createTimeStart = ''
+    searchQuery.value.createTimeEnd = ''
+  }
+})
+
+onMounted(async () => {
+  await getDict()
+  if (sessionStorage.getItem(buttonBoxActive) !== 'undefined' && sessionStorage.getItem(buttonBoxActive) !== null) {
+    active.value = sessionStorage.getItem(buttonBoxActive)!
+  }
+  else {
+    active.value = '0' // 全部
+  }
+})
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="searchList" @clear="reset">
+      <search-item>
+        <el-input v-model="searchQuery.applyNo" placeholder="申请单编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createDept" placeholder="申请部门" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createUserName" placeholder="申请人" clearable />
+      </search-item>
+      <search-item>
+        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="申请时间（开始）" end-placeholder="申请时间（结束）" />
+      </search-item>
+    </search-area>
+
+    <!-- 表格数据展示 -->
+    <table-container>
+      <!-- 表头区域 -->
+      <template v-if="active === '0' && proxy.hasPerm(`/resource/outsideService/consumableApply/add`)" #btns-right>
+        <icon-button icon="icon-add" title="新建" @click="addConsumableApply" />
+      </template>
+
+      <el-table
+        ref="applyTableRef"
+        v-loading="loadingTable" :data="applyList" style="width: 100%;" stripe
+        border row-key="applyNo"
+        :expand-row-keys="expandRowKeys"
+        @expand-change="tableRowExpandChange"
+      >
+        <el-table-column type="expand" width="1">
+          <el-table
+            v-loading="expandLoading" :show-header="false" :data="goodsListExpand"
+            border :class="active === '0' ? 'expand-approval-all' : 'expand-approval-with-status'"
+          >
+            <el-table-column label="名称" prop="goodsName" align="center" />
+            <el-table-column label="规格型号" prop="goodsModel" align="center" />
+            <el-table-column label="数量" prop="goodsQuantity" align="center" />
+          </el-table>
+        </el-table-column>
+
+        <el-table-column align="center" label="序号" width="55" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+          :width="item.width"
+          align="center"
+        />
+
+        <el-table-column fixed="right" label="操作" align="center" width="130">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="expandClickedHandler(row, $event)">
+              <template v-if="expandRowKey !== row.applyNo">
+                展开物资
+              </template>
+              <template v-else>
+                收起展开
+              </template>
+            </el-button>
+            <el-button size="small" type="primary" link @click="detail(row)">
+              查看
+            </el-button>
+
+            <el-button v-if="(active === '1' || active === '6') && proxy.hasPerm(`/resource/outsideService/consumableApply/del`)" size="small" type="danger" link @click="deleteById(row)">
+              删除
+            </el-button>
+
+            <template v-if="active === '2'">
+              <el-button size="small" type="primary" link @click="approvalAgreeHandler(row)">
+                同意
+              </el-button>
+              <el-button size="small" type="danger" link @click="approvalRefuseHandler(row)">
+                拒绝
+              </el-button>
+            </template>
+            <template v-if="active === '3'">
+              <el-button size="small" type="info" link @click="revokeApprById(row)">
+                取消
+              </el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div style="width: 100%;margin-top: 10px;">
+        <el-pagination
+          :current-page="searchQuery.offset"
+          :page-sizes="[10, 20, 30]"
+          :page-size="searchQuery.limit"
+          :total="total"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </table-container>
+
+    <!-- 审批单弹窗 -->
+    <approval-dialog
+      ref="apprDial"
+      @on-success="afterApprovalHandler"
+      @on-refuse="refuseHandler"
+      @on-revoke="revokeHandler"
+    />
+
+    <!-- 右上角按钮集合 -->
+    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+  </app-container>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-icon) {
+  visibility: hidden !important;
+}
+
+::v-deep(.el-table__expanded-cell) {
+  padding-top: 0 !important;
+}
+
+/* 其他状态下的列表 */
+.expand-approval-with-status {
+  width: calc(100% - 885px);
+  margin-left: 255px;
+}
+
+/* 全部状态下的列表 */
+.expand-approval-all {
+  width: calc(100% - 785px);
+  margin-left: 255px;
+}
+</style>
diff --git a/src/views/resource/outsideService/consumable/approvedDetail.vue b/src/views/resource/outsideService/consumable/approvedDetail.vue
index dd66210..4f5673c 100644
--- a/src/views/resource/outsideService/consumable/approvedDetail.vue
+++ b/src/views/resource/outsideService/consumable/approvedDetail.vue
@@ -3,11 +3,14 @@
 import { ElMessage } from 'element-plus'
 
 // 从路由中传过来的参数
+const type = ref<string>('')
 const id = ref<string>('')
 
 const route = useRoute()
 const router = useRouter()
 
+const title = ref('')
+
 // 逻辑
 // 关闭
 const resetForm = () => {
@@ -31,7 +34,22 @@
 
 const initDialog = (params: any) => {
   // 从路由中获取参数
+  type.value = params.type !== undefined ? params.type : ''
   id.value = params.id !== undefined ? params.id : ''
+
+  switch (type.value) {
+    case 'evaluate':
+      title.value = '易耗物资供方评价表'
+      break
+
+    case 'apply' :
+      title.value = '易耗物资申请单'
+      break
+
+    case 'use':
+      title.value = '易耗物资使用记录'
+      break
+  }
 }
 
 onMounted(() => {
@@ -41,7 +59,7 @@
 
 <template>
   <app-container>
-    <detail-page title="易耗物资供方评价表">
+    <detail-page :title="title">
       <template #btns>
         <el-button type="primary" @click="printToWord">
           导出Word
diff --git a/src/views/resource/outsideService/consumable/consumable-interface.ts b/src/views/resource/outsideService/consumable/consumable-interface.ts
index c4c4a39..052a237 100644
--- a/src/views/resource/outsideService/consumable/consumable-interface.ts
+++ b/src/views/resource/outsideService/consumable/consumable-interface.ts
@@ -1,3 +1,4 @@
+/* --------------------------------  供方评价表 -------------------------------- */
 export interface IListQuery {
   formNo: string
   formName: string
@@ -44,3 +45,57 @@
   createTime?: string
   decisionItem?: number
 }
+
+/* --------------------------------  申请单 -------------------------------- */
+export interface IApplyListQuery {
+  applyNo: string
+  applyName: string
+  createUserName: string
+  createDept: string
+  createTimeStart: string
+  createTimeEnd: string
+  approvalStatus: string
+  formId: string
+  offset: number
+  limit: number
+  sort?: string
+  order?: string
+}
+
+export interface IConsumableApplyGoods {
+  id: string
+  applyId?: string
+  goodsName: string
+  goodsModel: string
+  goodsQuantity: string
+  supplierId?: string
+  supplierName: string
+  remark: string
+  createTime: string
+}
+
+export interface IConsumableApply {
+  id: string
+  labCode: string
+  labCodeName?: string
+  groupCode: string
+  groupCodeName?: string
+  applyNo: string
+  applyName: string
+  createDeptId: string
+  createDept?: string
+  applyReason: string
+  goodsDetailList: Array<IConsumableApplyGoods>
+  goodsName?: string
+  goodsModel?: string
+  goodsQuantity?: string
+  remark: string
+  approvalStatus?: string
+  approvalStatusName?: string
+  processId?: string
+  taskId?: string
+  createUserId?: string
+  createUserName?: string
+  createTime?: string
+  decisionItem?: number
+}

diff --git a/src/api/resource/supplierConsumable.ts b/src/api/resource/supplierConsumable.ts
index 8949fa8..37ce1eb 100644
--- a/src/api/resource/supplierConsumable.ts
+++ b/src/api/resource/supplierConsumable.ts
@@ -1,10 +1,11 @@
 import request from '../index'
-const prefix = 'resource/supplier/consumableGoodsEvaluate'
+const prefix = 'resource/supplier/consumableGoods'
 
+/* --------------------------------  供方评价表 -------------------------------- */
 // 查询列表
 export function getConsumableEvaluateList(data: any) {
   return request({
-    url: `${prefix}/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    url: `${prefix}Evaluate/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
     method: 'post',
     data,
   })
@@ -13,7 +14,7 @@
 // 详情
 export function detailConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/detail`,
+    url: `${prefix}Evaluate/detail`,
     method: 'post',
     data,
   })
@@ -22,7 +23,7 @@
 // 保存至草稿箱
 export function saveConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/save`,
+    url: `${prefix}Evaluate/save`,
     method: 'post',
     data,
   })
@@ -31,7 +32,7 @@
 // 提交流程
 export function submitConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/submit`,
+    url: `${prefix}Evaluate/submit`,
     method: 'post',
     data,
   })
@@ -40,7 +41,7 @@
 // 草稿箱编辑（不走流程审批）
 export function updateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/draftUpdate`,
+    url: `${prefix}Evaluate/draftUpdate`,
     method: 'post',
     data,
   })
@@ -49,7 +50,7 @@
 // 未通过供方编辑（重走流程审批）
 export function failUpdateConsumableEvaluate(data: object) {
   return request({
-    url: `${prefix}/failUpdate`,
+    url: `${prefix}Evaluate/failUpdate`,
     method: 'post',
     data,
   })
@@ -58,7 +59,7 @@
 // 删除草稿箱
 export function draftDelete(data: object) {
   return request({
-    url: `${prefix}/draftDelete`,
+    url: `${prefix}Evaluate/draftDelete`,
     method: 'post',
     data,
   })
@@ -67,7 +68,7 @@
 // 删除已取消
 export function canceledApprDelete(data: object) {
   return request({
-    url: `${prefix}/approval/delete`,
+    url: `${prefix}Evaluate/approval/delete`,
     method: 'post',
     data,
   })
@@ -76,7 +77,7 @@
 // 发起者撤回，表单状态更改为已取消
 export function revokeApproval(data: object) {
   return request({
-    url: `${prefix}/approval/revoke`,
+    url: `${prefix}Evaluate/approval/revoke`,
     method: 'post',
     data,
   })
@@ -85,7 +86,98 @@
 // 设备供方审批-拒绝
 export function refuseApproval(data: object) {
   return request({
-    url: `${prefix}/approval/refuse`,
+    url: `${prefix}Evaluate/approval/refuse`,
+    method: 'post',
+    data,
+  })
+}
+
+/* --------------------------------  申请单 -------------------------------- */
+// 查询申请单列表
+export function getConsumableApplyList(data: any) {
+  return request({
+    url: `${prefix}Apply/approval/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+
+// 详情
+export function detailConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/detail`,
+    method: 'post',
+    data,
+  })
+}
+
+// 保存至草稿箱
+export function saveConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/save`,
+    method: 'post',
+    data,
+  })
+}
+
+// 提交流程
+export function submitConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/submit`,
+    method: 'post',
+    data,
+  })
+}
+
+// 草稿箱编辑（不走流程审批）
+export function updateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 未通过供方编辑（重走流程审批）
+export function failUpdateConsumableApply(data: object) {
+  return request({
+    url: `${prefix}Apply/failUpdate`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除草稿箱
+export function draftDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/draftDelete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 删除已取消
+export function canceledApprDeleteApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/delete`,
+    method: 'post',
+    data,
+  })
+}
+
+// 发起者撤回，表单状态更改为已取消
+export function revokeApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/revoke`,
+    method: 'post',
+    data,
+  })
+}
+
+// 设备供方审批-拒绝
+export function refuseApprovalApply(data: object) {
+  return request({
+    url: `${prefix}Apply/approval/refuse`,
     method: 'post',
     data,
   })
diff --git a/src/router/modules/resource.ts b/src/router/modules/resource.ts
index 1d75264..b403d3f 100644
--- a/src/router/modules/resource.ts
+++ b/src/router/modules/resource.ts
@@ -655,6 +655,40 @@
         },
       },
       {
+        path: 'consumableApplyList',
+        name: 'ConsumableApplyList',
+        component: () => import('@/views/resource/outsideService/consumable/applyList.vue'),
+        meta: {
+          title: '易耗物资申请单',
+          auth: '/resource/outsideService/consumableApply',
+          icon: 'ep:key',
+        },
+      },
+      {
+        path: 'consumableApply/:type/:id?/:status?',
+        name: 'ConsumableApplyDetail',
+        component: () => import('@/views/resource/outsideService/consumable/applyDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
+        path: 'consumableApply/approved/:type?/:id?',
+        name: 'ConsumableApplyDetailApproved',
+        component: () => import('@/views/resource/outsideService/consumable/approvedDetail.vue'),
+        meta: {
+          title: '易耗物资申请单详情',
+          icon: 'ep:key',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/outsideService/consumableApplyList',
+        },
+      },
+      {
         path: 'consumableEvaluateList',
         name: 'ConsumableEvaluateList',
         component: () => import('@/views/resource/outsideService/consumable/evaluateList.vue'),
diff --git a/src/views/resource/outsideService/consumable/applyDetail.vue b/src/views/resource/outsideService/consumable/applyDetail.vue
new file mode 100644
index 0000000..241d195
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyDetail.vue
@@ -0,0 +1,669 @@
+<!-- 易耗物资申请单 详情 -->
+<script name="ConsumableApplyDetail" lang="ts" setup>
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import type { ISupplierInfo } from '@/views/resource/outsideService/supplier/supplier-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import FilterSupplier from '@/views/resource/common/filterSupplier.vue'
+import type { IDictType } from '@/commonInterface/resource-interface'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import { detailConsumableApply, draftDeleteApply, failUpdateConsumableApply, refuseApprovalApply, revokeApprovalApply, saveConsumableApply, submitConsumableApply, updateConsumableApply } from '@/api/resource/supplierConsumable'
+import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue'
+import useUserStore from '@/store/modules/user'
+import { getDictByCode } from '@/api/system/dict'
+import { useCheckList } from '@/commonMethods/useCheckList'
+
+// 变量
+// 从路由中传过来的参数
+const type = ref<string>('')
+const id = ref<string>('')
+const status = ref<string>('')
+
+// 关键字段是否可以编辑
+const keyFieldsDisable = ref<boolean>(true)
+
+const userInfo = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const title = ref('')
+
+const radioItems = ref([
+  { name: '基本信息', value: 'consumable-apply-basic' },
+  { name: '审批详情', value: 'consumable-apply-approval' },
+])
+const current = ref('')
+const currentLabel = ref('')
+
+// 子组件
+const approvalDialog = ref()
+const consumableApplyRef = ref()
+const supplierFilterRef = ref()
+
+const consumableApply = ref<IConsumableApply>({
+  id: '',
+  labCode: '',
+  groupCode: '',
+  applyNo: '',
+  applyName: '易耗物资申请单',
+  createDeptId: '',
+  createUserId: '',
+  createTime: '',
+  applyReason: '',
+  remark: '',
+  goodsDetailList: [],
+  approvalStatus: '',
+  approvalStatusName: '',
+  processId: '',
+  taskId: '',
+})
+
+const goodsList = ref<Array<IConsumableApplyGoods>>([])
+const goodsColumns = [
+  { text: '名称', value: 'goodsName', align: 'center', width: '240', required: true },
+  { text: '规格型号', value: 'goodsModel', align: 'center', width: '240', required: true },
+  { text: '数量及单位', value: 'goodsQuantity', align: 'center', width: '240', required: true },
+  { text: '生产商', value: 'supplierName', align: 'center' },
+  { text: '备注', value: 'remark', align: 'center' },
+] // 表头
+
+const applyRules = ref({
+  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  groupCode: [{ required: true, message: '组别代码不能为空，请选择', trigger: ['change', 'blur'] }],
+  applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+
+// 是否显示相关按钮
+const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮
+const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮
+const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮
+const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮
+const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮
+const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮
+
+// 字典值
+const labCodeDict = ref<IDictType[]>([])
+const groupCodeDict = ref<IDictType[]>([])
+
+const recordSelected = ref<IConsumableApplyGoods[]>([])
+
+// 逻辑
+// 详情页的各个tab切换操作
+const radioChangeHandler = (newVal: string | number | boolean) => {
+  const radioTarget = radioItems.value.filter(item => item.name === newVal)
+  if (radioTarget.length > 0) {
+    currentLabel.value = radioTarget[0].name
+    current.value = radioTarget[0].value
+  }
+  else {
+    currentLabel.value = radioItems.value[0].name
+    current.value = radioItems.value[0].value
+  }
+}
+
+// 将所有流程操作的按钮隐藏
+const hideAllOpterationButtons = () => {
+  saveButtVisable.value = false
+  submitButtVisable.value = false
+  flowButtsVisable.value = false
+  cancelButtVisable.value = false
+  deleteButtVisable.value = false
+  editButtVisable.value = false
+}
+
+// 根据审批状态显示对应的流程操作按钮
+const showOperationButtonByStatus = () => {
+  switch (status.value) {
+    case '0':
+      // 全部：保存按钮可见
+      if (type.value === 'update') {
+        saveButtVisable.value = true
+      }
+      else {
+        saveButtVisable.value = false
+      }
+      break
+
+    case '1':
+      // 草稿箱：保存、提交按钮可见
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+      break
+
+    case '2':
+      // 待审批：同意、拒绝按钮可见
+      flowButtsVisable.value = true
+      break
+
+    case '3':
+      // 审批中：取消按钮可见
+      cancelButtVisable.value = true
+      break
+
+    case '5':
+      // 未通过：编辑 按钮可见
+      editButtVisable.value = true
+      break
+
+    case '6':
+      // 已取消：编辑 删除按钮可见
+      editButtVisable.value = true
+      deleteButtVisable.value = true
+      break
+
+    default:
+      // 默认不显示所有的操作按钮
+      hideAllOpterationButtons()
+      break
+  }
+}
+
+// 关闭
+const resetForm = () => {
+  sessionStorage.removeItem('consumableApplyTaskId') // 返回列表时 将缓存中的数据删除
+  router.go(-1)
+}
+
+// 新增
+const addEditableRow = () => {
+  supplierFilterRef.value.showOrHideFilterDialog(true, '3')
+}
+
+const delSupplierRecords = () => {
+  if (recordSelected.value.length === 0) {
+    ElMessage.warning('请至少选择一行')
+    return
+  }
+
+  goodsList.value = goodsList.value.filter(item => recordSelected.value.includes(item) === false)
+}
+
+const supplierMultiSelect = (e: any) => {
+  recordSelected.value = e
+}
+
+// 保存至草稿箱
+const saveDraftApply = () => {
+  consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间
+  saveConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+      // 设置返回的id和编号
+      consumableApply.value.applyNo = res.data.applyNo
+      consumableApply.value.id = res.data.id
+      id.value = res.data.id
+
+      type.value = 'update'
+      status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+// 编辑草稿箱（不走流程审批）
+const updateDraftApply = () => {
+  updateConsumableApply(consumableApply.value).then((res) => {
+    if (res.code === 200) {
+      // 提示保存成功
+      ElMessage.success('保存成功')
+    }
+    else {
+      // 提示失败信息
+      ElMessage.error(`保存失败：${res.message}`)
+    }
+  })
+}
+
+// 编辑按钮点击事件处理函数
+const editClickedHandler = () => {
+  type.value = 'update'
+  title.value = '易耗物资申请单（编辑）'
+
+  // 隐藏编辑按钮 显示提交按钮
+  editButtVisable.value = false
+  submitButtVisable.value = true
+}
+
+// 新建时保存后的处理 获取返回的id
+const saveButtonHandler = async () => {
+  if (!consumableApplyRef) { return }
+
+  if (goodsList.value.length === 0) {
+    ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+    return
+  }
+
+  if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+    return
+  }
+
+  await consumableApplyRef.value.validate((valid: boolean) => {
+    if (valid === true) {
+      consumableApply.value.goodsDetailList = goodsList.value
+
+      ElMessageBox.confirm(
+        '确认保存吗？',
+        '提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        },
+      ).then(() => {
+        if (type.value === 'create') {
+          saveDraftApply()
+        }
+        else if (type.value === 'update') {
+          updateDraftApply()
+        }
+      })
+    }
+  })
+}
+
+// 提交按钮
+const submitButtonHandler = async () => {
+  if (consumableApply.value === null || consumableApply.value.processId === undefined || consumableApply.value.processId === '') {
+    // 流程id为空 表示还未进入流程中 直接提交
+    ElMessageBox.confirm(`是否提交易耗物资申请单 ${consumableApply.value.applyNo}`, '提示', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      submitConsumableApply({
+        formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL,
+        id: consumableApply.value.id,
+      }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+          type.value = 'detail'
+          hideAllOpterationButtons()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+        }
+      })
+    })
+  }
+  else {
+    // 之前已经在流程中的表单 保存提交
+    if (goodsList.value.length === 0) {
+      ElMessage.error('物资明细不能为空，请选择易耗物资及供方')
+      return
+    }
+
+    if (useCheckList(goodsList.value, goodsColumns, '物资明细') === false) {
+      return
+    }
+
+    await consumableApplyRef.value.validate((valid: boolean) => {
+      if (valid === true) {
+        failUpdateConsumableApply(consumableApply.value).then((res) => {
+          if (res.code === 200) {
+          // 提示保存成功
+            ElMessage.success(`易耗物资申请单 ${consumableApply.value.applyNo} 提交成功`)
+
+            type.value = 'detail'
+            hideAllOpterationButtons()
+          }
+          else {
+          // 提示失败信息
+            ElMessage.error(`易耗物资申请单 ${consumableApply.value.applyNo} 提交失败：${res.message}`)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据id查询详情
+const detailById = async (id: string) => {
+  await detailConsumableApply({ id }).then((res) => {
+    if (res.code === 200) {
+      consumableApply.value = res.data
+      goodsList.value = consumableApply.value.goodsDetailList
+      if (consumableApply.value.taskId === '') {
+        consumableApply.value.taskId = sessionStorage.getItem('consumableApplyTaskId')!
+      }
+    }
+  })
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = () => {
+  approvalDialog.value.initDialog('refuse', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = () => {
+  approvalDialog.value.initDialog('agree', consumableApply.value.id, consumableApply.value.taskId, '')
+}
+
+// 取消流程
+const revokeClickedHandler = () => {
+  approvalDialog.value.initDialog('revoke', consumableApply.value.id, consumableApply.value.taskId, consumableApply.value.processId)
+}
+
+// 删除审批单
+const deleteClickedHandler = () => {
+  ElMessageBox.confirm(`是否删除审批单 ${consumableApply.value.applyNo}`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    draftDeleteApply({ id: id.value }).then((res) => {
+      if (res.code === 200) {
+        ElMessage.success(`审批单 ${consumableApply.value.applyNo} 删除成功`)
+        resetForm()
+      }
+      else {
+        ElMessage.error(`审批单 ${consumableApply.value.applyNo} 删除失败: ${res.message}`)
+      }
+    })
+  })
+}
+
+// 流程审批（同意、拒绝、取消）结束后的操作 将按钮都隐藏（本身就不能编辑了）
+const approvalSuccessHandler = (type: string) => {
+  if (type === 'agree' || type === 'refuse') {
+    flowButtsVisable.value = false
+  }
+  else if (type === 'revoke') {
+    cancelButtVisable.value = false
+  }
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    cancelButtVisable.value = false
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    approvalDialog.value.handleClose()
+
+    flowButtsVisable.value = false
+  })
+}
+
+// 选定供应商返回 允许供应商重复
+const appendToContentList = (rows: ISupplierInfo[]) => {
+  rows.forEach((row) => {
+    goodsList.value.push({
+      id: '',
+      supplierId: row.id,
+      supplierName: row.supplierName,
+      goodsName: '',
+      goodsModel: '',
+      goodsQuantity: '',
+      remark: '',
+      createTime: '',
+    })
+  })
+}
+
+const getLabCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizLabCode').then((res) => {
+      if (res.code === 200) {
+        labCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!)
+  }
+}
+
+const getGroupCodeDict = async () => {
+  // 先从缓存中获取
+  if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) {
+    // 缓存中没有则调用接口查询
+    await getDictByCode('bizGroupCode').then((res) => {
+      if (res.code === 200) {
+        groupCodeDict.value = res.data
+      }
+    })
+  }
+  else {
+    groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!)
+  }
+}
+
+const initDict = async () => {
+  await getLabCodeDict()
+  await getGroupCodeDict()
+}
+
+const initDialog = (params: any) => {
+  // 从路由中获取参数
+  type.value = params.type
+  id.value = params.id !== undefined ? params.id : ''
+  status.value = params.status !== undefined ? params.status : ''
+
+  // 默认显示第一个tab内容
+  current.value = radioItems.value[0].value
+  currentLabel.value = radioItems.value[0].name
+
+  switch (params.type) {
+    case 'create' :
+      title.value = '易耗物资申请单（新增）'
+      saveButtVisable.value = true
+      submitButtVisable.value = true
+
+      consumableApply.value.createUserId = userInfo.id
+      consumableApply.value.createUserName = userInfo.name
+      consumableApply.value.createDeptId = userInfo.deptId
+      consumableApply.value.createDept = userInfo.deptName
+      consumableApply.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
+
+      keyFieldsDisable.value = false
+
+      break
+    case 'update':
+      title.value = '易耗物资申请单（编辑）'
+
+      detailById(id.value)
+
+      // 判断显示哪些流程操作按钮
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    case 'detail':
+      title.value = '易耗物资申请单（详情）'
+      id.value = params.id
+
+      detailById(id.value)
+
+      // 查看详情时所有的操作按钮都隐藏
+      showOperationButtonByStatus()
+      keyFieldsDisable.value = true
+
+      break
+    default:
+      title.value = ''
+      break
+  }
+}
+
+onMounted(() => {
+  initDict()
+  initDialog(route.query)
+})
+</script>
+
+<template>
+  <app-container>
+    <el-form ref="consumableApplyRef" :model="consumableApply" :rules="applyRules" label-position="right" label-width="110px" border stripe>
+      <detail-page :title="`${title}`">
+        <template #btns>
+          <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()">
+            编辑
+          </el-button>
+
+          <template v-if="flowButtsVisable">
+            <el-button type="primary" @click="approvalAgreeHandler">
+              同意
+            </el-button>
+            <el-button type="danger" @click="approvalRefuseHandler">
+              拒绝
+            </el-button>
+          </template>
+
+          <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler">
+            提交
+          </el-button>
+          <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler">
+            保存
+          </el-button>
+
+          <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler">
+            删除
+          </el-button>
+          <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler">
+            取消
+          </el-button>
+
+          <el-button type="info" @click="resetForm()">
+            关闭
+          </el-button>
+        </template>
+
+        <el-radio-group v-model="currentLabel" style="margin-bottom: 20px;" @change="radioChangeHandler">
+          <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" />
+        </el-radio-group>
+
+        <template v-if="current === 'consumable-apply-basic'">
+          <el-row :gutter="24">
+            <!-- 第一行 第一列 -->
+            <el-col :span="6">
+              <el-form-item label="实验室代码" prop="labCode">
+                <el-select v-model="consumableApply.labCode" placeholder="请选择实验室代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请部门">
+                <el-input v-model="consumableApply.createDept" :disabled="true" />
+                <el-input v-model="consumableApply.createDeptId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="组别代码" prop="groupCode">
+                <el-select v-model="consumableApply.groupCode" placeholder="请选择组别代码" :disabled="keyFieldsDisable" style="width: 100%;">
+                  <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="申请人">
+                <el-input v-model="consumableApply.createUserName" :disabled="true" />
+                <el-input v-model="consumableApply.createUserId" type="hidden" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单编号">
+                <el-input v-model="consumableApply.applyNo" placeholder="申请单编号，保存后自动生成" :disabled="true" />
+              </el-form-item>
+              <el-form-item label="申请时间">
+                <el-input v-model="consumableApply.createTime" :disabled="true" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="6">
+              <el-form-item label="申请单名称">
+                <el-input v-model="consumableApply.applyName" :disabled="true" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="申请原因" prop="applyReason">
+                <el-input v-model="consumableApply.applyReason" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="24">
+            <el-col :span="18">
+              <el-form-item label="备注">
+                <el-input v-model="consumableApply.remark" :disabled="type === 'detail'" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </template>
+      </detail-page>
+
+      <template v-if="current === 'consumable-apply-basic'">
+        <table-container title="物资明细">
+          <template v-if="type !== 'detail'" #btns-right>
+            <el-button type="primary" @click="addEditableRow">
+              增加行
+            </el-button>
+            <el-button type="info" @click="delSupplierRecords">
+              删除行
+            </el-button>
+          </template>
+
+          <!-- 表格区域 -->
+          <el-table :data="goodsList" border style="width: 100%;" @selection-change="supplierMultiSelect">
+            <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" />
+            <el-table-column align="center" label="序号" width="55" type="index" />
+            <el-table-column
+              v-for="item in goodsColumns"
+              :key="item.value"
+              :prop="item.value"
+              :label="item.text"
+              :width="item.width"
+              align="center"
+            >
+              <template #header>
+                <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span>
+              </template>
+              <template #default="scope">
+                <el-input v-if="item.required === true && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+                <el-input v-if="item.value === 'remark' && type !== 'detail'" v-model="scope.row[item.value]" :autofocus="true" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </table-container>
+      </template>
+    </el-form>
+
+    <approval-dialog
+      ref="approvalDialog"
+      @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" @on-revoke="revokeHandler"
+    />
+
+    <filter-supplier ref="supplierFilterRef" @records-selected="appendToContentList" />
+
+    <template v-if="current === 'consumable-apply-approval' && status !== '1'">
+      <approval-record-table :process-id="consumableApply.processId" />
+    </template>
+  </app-container>
+</template>
diff --git a/src/views/resource/outsideService/consumable/applyList.vue b/src/views/resource/outsideService/consumable/applyList.vue
new file mode 100644
index 0000000..d6cba40
--- /dev/null
+++ b/src/views/resource/outsideService/consumable/applyList.vue
@@ -0,0 +1,533 @@
+<!-- 易耗物资申请单 列表 -->
+<script name="ConsumableApplyList" lang="ts" setup>
+import type { DateModelType } from 'element-plus'
+import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
+import type { IApplyListQuery, IConsumableApply, IConsumableApplyGoods } from './consumable-interface'
+import ApprovalDialog from '@/views/resource/common/approvalDialog.vue'
+import { SCHEDULE } from '@/utils/scheduleDict'
+import type { IMenu } from '@/components/buttonBox/buttonBox'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { canceledApprDeleteApply, detailConsumableApply, draftDeleteApply, getConsumableApplyList, refuseApprovalApply, revokeApprovalApply } from '@/api/resource/supplierConsumable'
+
+// 定义常量
+const buttonBoxActive = 'consumableApplyApproval' // 存储在sessionstorage里面的字段名，用于记录右上角buttonbox点击状态
+
+const { proxy } = getCurrentInstance() as any
+const router = useRouter()
+
+// 选中的审批状态按钮
+const active = ref('')
+const menu = ref<IMenu[]>([]) // 审批状态按钮组合
+const approvalStatusList = ref<String[]>([
+  '全部', '已审批', '待审批', '审批', '草稿箱', '审批中', '已通过', '未通过', '已取消',
+])
+
+// 弹窗子组件
+const apprDial = ref()
+const applyTableRef = ref()
+
+// 查询条件
+const searchQuery = ref<IApplyListQuery>({
+  applyNo: '', // 申请单编号
+  applyName: '', // 申请单名称
+  createDept: '', // 编制部门
+  createUserName: '', // 编制人
+  createTimeStart: '', // 创建时间-起始
+  createTimeEnd: '', // 创建时间-结束
+  approvalStatus: active.value, // 审批状态
+  formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+  offset: 1,
+  limit: 20,
+})
+const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据
+const total = ref(0) // 数据条数
+const loadingTable = ref(false) // 表格loading
+const expandLoading = ref(false) // 展开表格的loading
+
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '申请单编号', value: 'applyNo', align: 'center', width: '200' },
+  { text: '易耗物资名称、规格型号及数量', value: 'goodsListStr', align: 'center' },
+  { text: '申请部门', value: 'createDept', align: 'center', width: '160' },
+  { text: '申请人', value: 'createUserName', align: 'center', width: '120' },
+  { text: '申请时间', value: 'createTime', align: 'center', width: '120' },
+  { text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' },
+])
+const statusColumn = ref<TableColumn>({ text: '审批状态', value: 'approvalStatusName', align: 'center', width: '100' })
+const applyList = ref<Array<IConsumableApply>>([]) // 表格数据
+const expandRowKey = ref<string>('')
+const goodsListExpand = ref<Array<IConsumableApplyGoods>>([])
+
+const expandRowKeys = computed(() => {
+  return [expandRowKey.value]
+})
+
+const expandTableWidth = computed(() => {
+  console.log(applyTableRef.value.width)
+})
+
+// 逻辑
+// 跳转到新建的页面
+const addConsumableApply = () => {
+  router.push({
+    query: {
+      type: 'create',
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击编辑按钮
+const updateInfo = (row: IConsumableApply) => {
+  sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+  router.push({
+    query: {
+      type: 'update',
+      id: row.id,
+      status: searchQuery.value.approvalStatus,
+    },
+    path: 'consumableApply/detail',
+  })
+}
+
+// 点击查看（或编辑）按钮
+const detail = (row: IConsumableApply) => {
+  if (searchQuery.value.approvalStatus === '1') {
+    // 全部或草稿箱 状态的 查看 是可以编辑的组件
+    updateInfo(row)
+  }
+  else if (active.value === '0') {
+    router.push({
+      query: {
+        type: 'apply',
+        id: row.id,
+      },
+      path: 'consumableApply/approved',
+    })
+  }
+  else {
+    // 将行数据存入缓存 用来在路由之间传递数据
+    sessionStorage.setItem('consumableApplyTaskId', row.taskId!)
+
+    router.push({
+      query: {
+        type: 'detail',
+        id: row.id,
+        status: searchQuery.value.approvalStatus,
+      },
+      path: 'consumableApply/detail',
+    })
+  }
+}
+
+// 删除易耗物资申请单 或 删除草稿箱中的审批单
+const deleteById = (row: any) => {
+  ElMessageBox.confirm('是否删除易耗物资申请单', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    if (active.value === '1') {
+      // 草稿箱中的删除记录
+      draftDeleteApply({ id: row.id }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+    else if (active.value === '6') {
+      // 已取消中的删除记录
+      canceledApprDeleteApply({ id: row.id, taskId: row.taskId }).then((res) => {
+        if (res.code === 200) {
+          ElMessage.success('易耗物资申请单删除成功')
+          fetchData()
+        }
+        else {
+          ElMessage.error(`易耗物资申请单删除失败: ${res.message}`)
+        }
+      })
+    }
+  })
+}
+
+const getDetailGoodsList = (goods: IConsumableApply) => {
+  expandLoading.value = true
+  detailConsumableApply({ id: goods.id }).then((res) => {
+    if (res.code === 200) {
+      goodsListExpand.value = res.data.goodsDetailList
+
+      expandLoading.value = false
+    }
+  }).catch(() => {
+    expandLoading.value = false
+  })
+}
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    searchQuery.value.offset = 1
+  }
+  getConsumableApplyList(searchQuery.value).then((response) => {
+    if (response.code === 200) {
+      applyList.value = response.data.rows.map((item: IConsumableApply) => {
+        return {
+          ...item,
+          createTime: item.createTime!.length > 16 ? item.createTime!.substring(0, 10) : '',
+          goodsListStr: `${item.goodsName}；${item.goodsModel}；${item.goodsQuantity}`,
+        }
+      })
+      total.value = parseInt(response.data.total)
+    }
+    expandRowKey.value = ''
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+
+const searchList = () => {
+  fetchData(true)
+}
+
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size?: number; page?: number }) => {
+  if (val && val.size) {
+    searchQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    searchQuery.value.offset = val.page
+  }
+  fetchData(true)
+}
+
+// 改变页容量
+function handleSizeChange(val: number) {
+  changePage({ size: val })
+}
+// 改变当前页
+function handleCurrentChange(val: number) {
+  changePage({ page: val })
+}
+
+// 重置
+const reset = () => {
+  searchQuery.value = {
+    applyNo: '', // 申请单编号
+    applyName: '', // 申请单名称
+    createDept: '', // 编制部门
+    createUserName: '', // 编制人
+    createTimeStart: '', // 创建时间-起始
+    createTimeEnd: '', // 创建时间-结束
+    approvalStatus: active.value, // 审批状态
+    formId: SCHEDULE.CONSUMABLE_MATERIAL_APPROVAL, // 表单id（流程定义对应的表单id，等价于业务id），此处为固定值
+    offset: 1,
+    limit: 20,
+  }
+  dateRange.value = ['', '']
+  fetchData(true)
+}
+
+// 审批按钮点击切换事件
+const changeCurrentButton = (val: string) => {
+  active.value = val // 此时的tab
+  window.sessionStorage.setItem(buttonBoxActive, val) // 记录tab状态
+
+  const hasStatus = columns.value.filter((col) => {
+    return col.value === statusColumn.value.value
+  })
+
+  if (val === '0') {
+    // 全部的时候不要显示审批状态
+    if (hasStatus.length > 0) {
+      columns.value.pop()
+    }
+  }
+  else {
+    // 其他状态下要显示审批状态字段
+    if (hasStatus.length === 0) {
+      columns.value.push(statusColumn.value)
+    }
+  }
+
+  reset() // 刷新
+}
+
+// 展开行 每次只能展开一行
+const expandCurrentRow = (row: IConsumableApply) => {
+  if (expandRowKey.value === '') {
+    expandRowKey.value = row.applyNo
+  }
+  else {
+    expandRowKey.value = ''
+  }
+}
+
+// 点击行
+const expandClickedHandler = async (row: IConsumableApply, event: any) => {
+  expandCurrentRow(row)
+  if (expandRowKey.value !== '') {
+    getDetailGoodsList(row)
+  }
+}
+
+const tableRowExpandChange = (row: IConsumableApply) => {
+  expandCurrentRow(row)
+}
+
+// 流程审批-同意
+const approvalAgreeHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('agree', row.id, row.taskId, '')
+}
+
+// 流程审批-拒绝
+const approvalRefuseHandler = (row: IConsumableApply) => {
+  apprDial.value.initDialog('refuse', row.id, row.taskId, '')
+}
+
+// 取消（撤回审批单）
+const revokeApprById = (row: IConsumableApply) => {
+  apprDial.value.initDialog('revoke', row.id, row.taskId, row.processId)
+}
+
+// 流程操作之后刷新
+const afterApprovalHandler = () => {
+  fetchData(true)
+}
+
+// 取消
+const revokeHandler = (param: any) => {
+  revokeApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('流程取消成功')
+    }
+    else {
+      ElMessage.error(`流程取消失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 拒绝
+const refuseHandler = (param: any) => {
+  refuseApprovalApply(param).then((res) => {
+    if (res.code === 200) {
+      ElMessage.success('拒绝审批完成')
+    }
+    else {
+      ElMessage.error(`拒绝审批失败：${res.message}`)
+    }
+    // 关闭弹窗
+    apprDial.value.handleClose()
+
+    fetchData(true)
+  })
+}
+
+// 初始化流程审批状态按钮
+const getApprovalStatusDict = () => {
+  getDictByCode('approvalStatus').then((res) => {
+    if (res.code === 200) {
+      approvalStatusList.value.forEach((item) => {
+        const tempFindData = res.data.find((e: { name: string; value: string }) => e.name === item)
+        if (tempFindData) {
+          menu.value.push({
+            name: tempFindData.name,
+            id: `${tempFindData.value}`,
+          })
+        }
+      })
+    }
+  })
+}
+
+const getLabCodeDict = async () => {
+  await getDictByCode('bizLabCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizLabCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getGroupCodeDict = async () => {
+  await getDictByCode('bizGroupCode').then((res) => {
+    if (res.code === 200) {
+      sessionStorage.setItem('bizGroupCode', JSON.stringify(res.data))
+    }
+  })
+}
+
+const getDict = async () => {
+  getApprovalStatusDict()
+  getLabCodeDict()
+  getGroupCodeDict()
+}
+
+watch(dateRange, (val) => {
+  if (val) {
+    searchQuery.value.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD')
+    searchQuery.value.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD')
+  }
+  else {
+    searchQuery.value.createTimeStart = ''
+    searchQuery.value.createTimeEnd = ''
+  }
+})
+
+onMounted(async () => {
+  await getDict()
+  if (sessionStorage.getItem(buttonBoxActive) !== 'undefined' && sessionStorage.getItem(buttonBoxActive) !== null) {
+    active.value = sessionStorage.getItem(buttonBoxActive)!
+  }
+  else {
+    active.value = '0' // 全部
+  }
+})
+</script>
+
+<template>
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="searchList" @clear="reset">
+      <search-item>
+        <el-input v-model="searchQuery.applyNo" placeholder="申请单编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createDept" placeholder="申请部门" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model="searchQuery.createUserName" placeholder="申请人" clearable />
+      </search-item>
+      <search-item>
+        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="申请时间（开始）" end-placeholder="申请时间（结束）" />
+      </search-item>
+    </search-area>
+
+    <!-- 表格数据展示 -->
+    <table-container>
+      <!-- 表头区域 -->
+      <template v-if="active === '0' && proxy.hasPerm(`/resource/outsideService/consumableApply/add`)" #btns-right>
+        <icon-button icon="icon-add" title="新建" @click="addConsumableApply" />
+      </template>
+
+      <el-table
+        ref="applyTableRef"
+        v-loading="loadingTable" :data="applyList" style="width: 100%;" stripe
+        border row-key="applyNo"
+        :expand-row-keys="expandRowKeys"
+        @expand-change="tableRowExpandChange"
+      >
+        <el-table-column type="expand" width="1">
+          <el-table
+            v-loading="expandLoading" :show-header="false" :data="goodsListExpand"
+            border :class="active === '0' ? 'expand-approval-all' : 'expand-approval-with-status'"
+          >
+            <el-table-column label="名称" prop="goodsName" align="center" />
+            <el-table-column label="规格型号" prop="goodsModel" align="center" />
+            <el-table-column label="数量" prop="goodsQuantity" align="center" />
+          </el-table>
+        </el-table-column>
+
+        <el-table-column align="center" label="序号" width="55" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+          :width="item.width"
+          align="center"
+        />
+
+        <el-table-column fixed="right" label="操作" align="center" width="130">
+          <template #default="{ row }">
+            <el-button size="small" type="primary" link @click="expandClickedHandler(row, $event)">
+              <template v-if="expandRowKey !== row.applyNo">
+                展开物资
+              </template>
+              <template v-else>
+                收起展开
+              </template>
+            </el-button>
+            <el-button size="small" type="primary" link @click="detail(row)">
+              查看
+            </el-button>
+
+            <el-button v-if="(active === '1' || active === '6') && proxy.hasPerm(`/resource/outsideService/consumableApply/del`)" size="small" type="danger" link @click="deleteById(row)">
+              删除
+            </el-button>
+
+            <template v-if="active === '2'">
+              <el-button size="small" type="primary" link @click="approvalAgreeHandler(row)">
+                同意
+              </el-button>
+              <el-button size="small" type="danger" link @click="approvalRefuseHandler(row)">
+                拒绝
+              </el-button>
+            </template>
+            <template v-if="active === '3'">
+              <el-button size="small" type="info" link @click="revokeApprById(row)">
+                取消
+              </el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div style="width: 100%;margin-top: 10px;">
+        <el-pagination
+          :current-page="searchQuery.offset"
+          :page-sizes="[10, 20, 30]"
+          :page-size="searchQuery.limit"
+          :total="total"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </table-container>
+
+    <!-- 审批单弹窗 -->
+    <approval-dialog
+      ref="apprDial"
+      @on-success="afterApprovalHandler"
+      @on-refuse="refuseHandler"
+      @on-revoke="revokeHandler"
+    />
+
+    <!-- 右上角按钮集合 -->
+    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+  </app-container>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-icon) {
+  visibility: hidden !important;
+}
+
+::v-deep(.el-table__expanded-cell) {
+  padding-top: 0 !important;
+}
+
+/* 其他状态下的列表 */
+.expand-approval-with-status {
+  width: calc(100% - 885px);
+  margin-left: 255px;
+}
+
+/* 全部状态下的列表 */
+.expand-approval-all {
+  width: calc(100% - 785px);
+  margin-left: 255px;
+}
+</style>
diff --git a/src/views/resource/outsideService/consumable/approvedDetail.vue b/src/views/resource/outsideService/consumable/approvedDetail.vue
index dd66210..4f5673c 100644
--- a/src/views/resource/outsideService/consumable/approvedDetail.vue
+++ b/src/views/resource/outsideService/consumable/approvedDetail.vue
@@ -3,11 +3,14 @@
 import { ElMessage } from 'element-plus'
 
 // 从路由中传过来的参数
+const type = ref<string>('')
 const id = ref<string>('')
 
 const route = useRoute()
 const router = useRouter()
 
+const title = ref('')
+
 // 逻辑
 // 关闭
 const resetForm = () => {
@@ -31,7 +34,22 @@
 
 const initDialog = (params: any) => {
   // 从路由中获取参数
+  type.value = params.type !== undefined ? params.type : ''
   id.value = params.id !== undefined ? params.id : ''
+
+  switch (type.value) {
+    case 'evaluate':
+      title.value = '易耗物资供方评价表'
+      break
+
+    case 'apply' :
+      title.value = '易耗物资申请单'
+      break
+
+    case 'use':
+      title.value = '易耗物资使用记录'
+      break
+  }
 }
 
 onMounted(() => {
@@ -41,7 +59,7 @@
 
 <template>
   <app-container>
-    <detail-page title="易耗物资供方评价表">
+    <detail-page :title="title">
       <template #btns>
         <el-button type="primary" @click="printToWord">
           导出Word
diff --git a/src/views/resource/outsideService/consumable/consumable-interface.ts b/src/views/resource/outsideService/consumable/consumable-interface.ts
index c4c4a39..052a237 100644
--- a/src/views/resource/outsideService/consumable/consumable-interface.ts
+++ b/src/views/resource/outsideService/consumable/consumable-interface.ts
@@ -1,3 +1,4 @@
+/* --------------------------------  供方评价表 -------------------------------- */
 export interface IListQuery {
   formNo: string
   formName: string
@@ -44,3 +45,57 @@
   createTime?: string
   decisionItem?: number
 }
+
+/* --------------------------------  申请单 -------------------------------- */
+export interface IApplyListQuery {
+  applyNo: string
+  applyName: string
+  createUserName: string
+  createDept: string
+  createTimeStart: string
+  createTimeEnd: string
+  approvalStatus: string
+  formId: string
+  offset: number
+  limit: number
+  sort?: string
+  order?: string
+}
+
+export interface IConsumableApplyGoods {
+  id: string
+  applyId?: string
+  goodsName: string
+  goodsModel: string
+  goodsQuantity: string
+  supplierId?: string
+  supplierName: string
+  remark: string
+  createTime: string
+}
+
+export interface IConsumableApply {
+  id: string
+  labCode: string
+  labCodeName?: string
+  groupCode: string
+  groupCodeName?: string
+  applyNo: string
+  applyName: string
+  createDeptId: string
+  createDept?: string
+  applyReason: string
+  goodsDetailList: Array<IConsumableApplyGoods>
+  goodsName?: string
+  goodsModel?: string
+  goodsQuantity?: string
+  remark: string
+  approvalStatus?: string
+  approvalStatusName?: string
+  processId?: string
+  taskId?: string
+  createUserId?: string
+  createUserName?: string
+  createTime?: string
+  decisionItem?: number
+}
diff --git a/src/views/resource/outsideService/consumable/evaluateList.vue b/src/views/resource/outsideService/consumable/evaluateList.vue
index 5b67e31..abb04b8 100644
--- a/src/views/resource/outsideService/consumable/evaluateList.vue
+++ b/src/views/resource/outsideService/consumable/evaluateList.vue
@@ -88,6 +88,7 @@
   else if (active.value === '0') {
     router.push({
       query: {
+        type: 'evaluate',
         id: row.id,
       },
       path: 'consumable/approved',