diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>
diff --git a/src/views/business/subpackage/subpackage-interface.ts b/src/views/business/subpackage/subpackage-interface.ts
index 5d8eb91..9fbbb49 100644
--- a/src/views/business/subpackage/subpackage-interface.ts
+++ b/src/views/business/subpackage/subpackage-interface.ts
@@ -208,3 +208,29 @@
   taxNumber: string // 税号
   website: string // 网址
 }
+
+// 分包方人员
+export interface IOutsourcerUser {
+  createTime: string // 创建时间（列表返回参数）
+  department: string // 部门
+  id?: string | number //
+  job: string // 职务
+  name: string // 人员名字
+  outsourcerId: string | number // 分包方id
+  phone: string // 联系方式
+  userNo: string // 人员编号-手动输入
+  offset?: number | undefined
+  limit?: number | undefined
+}
+
+// 业务能力
+export interface IOutsourcerAbility {
+  abilityDesc: string // 能力描述
+  abilityName: string // 能力名称
+  createTime: string // 创建时间（列表返回参数）
+  id: string | number //
+  outsourcerId: string | number // 分包方id
+  price: string // 报价
+  offset?: number | undefined
+  limit?: number | undefined
+}

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>
diff --git a/src/views/business/subpackage/subpackage-interface.ts b/src/views/business/subpackage/subpackage-interface.ts
index 5d8eb91..9fbbb49 100644
--- a/src/views/business/subpackage/subpackage-interface.ts
+++ b/src/views/business/subpackage/subpackage-interface.ts
@@ -208,3 +208,29 @@
   taxNumber: string // 税号
   website: string // 网址
 }
+
+// 分包方人员
+export interface IOutsourcerUser {
+  createTime: string // 创建时间（列表返回参数）
+  department: string // 部门
+  id?: string | number //
+  job: string // 职务
+  name: string // 人员名字
+  outsourcerId: string | number // 分包方id
+  phone: string // 联系方式
+  userNo: string // 人员编号-手动输入
+  offset?: number | undefined
+  limit?: number | undefined
+}
+
+// 业务能力
+export interface IOutsourcerAbility {
+  abilityDesc: string // 能力描述
+  abilityName: string // 能力名称
+  createTime: string // 创建时间（列表返回参数）
+  id: string | number //
+  outsourcerId: string | number // 分包方id
+  price: string // 报价
+  offset?: number | undefined
+  limit?: number | undefined
+}
diff --git a/src/views/measure/person/components/addPerson.vue b/src/views/measure/person/components/addPerson.vue
index 733efc3..c750426 100644
--- a/src/views/measure/person/components/addPerson.vue
+++ b/src/views/measure/person/components/addPerson.vue
@@ -761,7 +761,7 @@
         </el-table-column>
       </el-table>
       <!-- 选择用户列表组件 -->
-      <user-list-dialog ref="userListRef" @add="confirmPerson" />
+      <user-list-dialog ref="userListRef" :need-admin="false" @add="confirmPerson" />
     </detail-block-switch>
   </app-container>
 </template>

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>
diff --git a/src/views/business/subpackage/subpackage-interface.ts b/src/views/business/subpackage/subpackage-interface.ts
index 5d8eb91..9fbbb49 100644
--- a/src/views/business/subpackage/subpackage-interface.ts
+++ b/src/views/business/subpackage/subpackage-interface.ts
@@ -208,3 +208,29 @@
   taxNumber: string // 税号
   website: string // 网址
 }
+
+// 分包方人员
+export interface IOutsourcerUser {
+  createTime: string // 创建时间（列表返回参数）
+  department: string // 部门
+  id?: string | number //
+  job: string // 职务
+  name: string // 人员名字
+  outsourcerId: string | number // 分包方id
+  phone: string // 联系方式
+  userNo: string // 人员编号-手动输入
+  offset?: number | undefined
+  limit?: number | undefined
+}
+
+// 业务能力
+export interface IOutsourcerAbility {
+  abilityDesc: string // 能力描述
+  abilityName: string // 能力名称
+  createTime: string // 创建时间（列表返回参数）
+  id: string | number //
+  outsourcerId: string | number // 分包方id
+  price: string // 报价
+  offset?: number | undefined
+  limit?: number | undefined
+}
diff --git a/src/views/measure/person/components/addPerson.vue b/src/views/measure/person/components/addPerson.vue
index 733efc3..c750426 100644
--- a/src/views/measure/person/components/addPerson.vue
+++ b/src/views/measure/person/components/addPerson.vue
@@ -761,7 +761,7 @@
         </el-table-column>
       </el-table>
       <!-- 选择用户列表组件 -->
-      <user-list-dialog ref="userListRef" @add="confirmPerson" />
+      <user-list-dialog ref="userListRef" :need-admin="false" @add="confirmPerson" />
     </detail-block-switch>
   </app-container>
 </template>
diff --git a/src/views/measure/person/components/userListDialog.vue b/src/views/measure/person/components/userListDialog.vue
index 91058ac..303f239 100644
--- a/src/views/measure/person/components/userListDialog.vue
+++ b/src/views/measure/person/components/userListDialog.vue
@@ -8,6 +8,12 @@
 import { toTreeList } from '@/utils/structure'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 
+const props = defineProps({
+  needAdmin: { // 是否展示admin用户
+    type: Boolean,
+    default: true,
+  },
+})
 const emits = defineEmits(['add'])
 const dialogFormVisible = ref(false)
 // 查询条件
@@ -43,8 +49,14 @@
   select.value = -1
   getUserList(listQuery.value).then((res) => {
     if (res.code === 200) {
-      list.value = res.data.rows
-      total.value = res.data.total
+      if (props.needAdmin) {
+        list.value = res.data.rows
+        total.value = res.data.total
+      }
+      else {
+        list.value = res.data.rows.filter((item: any) => item.account !== 'admin')
+        total.value = res.data.total - 1
+      }
     }
   })
 }

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>
diff --git a/src/views/business/subpackage/subpackage-interface.ts b/src/views/business/subpackage/subpackage-interface.ts
index 5d8eb91..9fbbb49 100644
--- a/src/views/business/subpackage/subpackage-interface.ts
+++ b/src/views/business/subpackage/subpackage-interface.ts
@@ -208,3 +208,29 @@
   taxNumber: string // 税号
   website: string // 网址
 }
+
+// 分包方人员
+export interface IOutsourcerUser {
+  createTime: string // 创建时间（列表返回参数）
+  department: string // 部门
+  id?: string | number //
+  job: string // 职务
+  name: string // 人员名字
+  outsourcerId: string | number // 分包方id
+  phone: string // 联系方式
+  userNo: string // 人员编号-手动输入
+  offset?: number | undefined
+  limit?: number | undefined
+}
+
+// 业务能力
+export interface IOutsourcerAbility {
+  abilityDesc: string // 能力描述
+  abilityName: string // 能力名称
+  createTime: string // 创建时间（列表返回参数）
+  id: string | number //
+  outsourcerId: string | number // 分包方id
+  price: string // 报价
+  offset?: number | undefined
+  limit?: number | undefined
+}
diff --git a/src/views/measure/person/components/addPerson.vue b/src/views/measure/person/components/addPerson.vue
index 733efc3..c750426 100644
--- a/src/views/measure/person/components/addPerson.vue
+++ b/src/views/measure/person/components/addPerson.vue
@@ -761,7 +761,7 @@
         </el-table-column>
       </el-table>
       <!-- 选择用户列表组件 -->
-      <user-list-dialog ref="userListRef" @add="confirmPerson" />
+      <user-list-dialog ref="userListRef" :need-admin="false" @add="confirmPerson" />
     </detail-block-switch>
   </app-container>
 </template>
diff --git a/src/views/measure/person/components/userListDialog.vue b/src/views/measure/person/components/userListDialog.vue
index 91058ac..303f239 100644
--- a/src/views/measure/person/components/userListDialog.vue
+++ b/src/views/measure/person/components/userListDialog.vue
@@ -8,6 +8,12 @@
 import { toTreeList } from '@/utils/structure'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 
+const props = defineProps({
+  needAdmin: { // 是否展示admin用户
+    type: Boolean,
+    default: true,
+  },
+})
 const emits = defineEmits(['add'])
 const dialogFormVisible = ref(false)
 // 查询条件
@@ -43,8 +49,14 @@
   select.value = -1
   getUserList(listQuery.value).then((res) => {
     if (res.code === 200) {
-      list.value = res.data.rows
-      total.value = res.data.total
+      if (props.needAdmin) {
+        list.value = res.data.rows
+        total.value = res.data.total
+      }
+      else {
+        list.value = res.data.rows.filter((item: any) => item.account !== 'admin')
+        total.value = res.data.total - 1
+      }
     }
   })
 }
diff --git a/src/views/system/tool/fileConfiguration/addDDialog.vue b/src/views/system/tool/fileConfiguration/addDDialog.vue
index 69b5832..469f2ae 100644
--- a/src/views/system/tool/fileConfiguration/addDDialog.vue
+++ b/src/views/system/tool/fileConfiguration/addDDialog.vue
@@ -5,10 +5,8 @@
 import dayjs from 'dayjs'
 import showPhoto from '../showPhoto.vue'
 import { getDictByCode } from '@/api/system/dict'
-import userListComp from '@/views/measure/person/components/userListDialog.vue'
-import { getUserList } from '@/api/system/user'
 import { uploadApi } from '@/api/system/notice'
-import { addeFileListPage } from '@/api/system/tool'
+import { addeFileListPage, updateFileListPage } from '@/api/system/tool'
 const emits = defineEmits(['resetData'])
 const ruleFormRef = ref<FormInstance>() // from组件
 const updateTime = ref('')
@@ -85,18 +83,25 @@
             type: 'success',
             message: '添加成功',
           })
+          close()
         })
       }
       else {
-        console.log('编辑')
+        updateFileListPage(ruleForm.value).then((res) => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          })
+          close()
+        })
       }
     }
   })
 }
 // 获取文件类型
-const fileTypeList = ref([])
+const fileTypeList = ref<any>([])
 const getFileType = () => {
-  getDictByCode('').then((res) => {
+  getDictByCode('configFileType').then((res) => {
     fileTypeList.value = res.data
   })
 }
@@ -126,7 +131,7 @@
     uploadApi(fd).then((res) => {
       if (res.code === 200) {
         ruleFormRef.value?.clearValidate('minioFileName')
-        ruleForm.minioFileName = res.data[0]
+        ruleForm.value.minioFileName = res.data[0]
         ElMessage.success('上传成功')
       }
       else {
@@ -141,15 +146,15 @@
 </script>
 
 <template>
-  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="title" width="80%" append-to-body class="container" @close="resetForm">
+  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="title" width="60%" append-to-body class="container" @close="resetForm">
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" :class="[title === '详情' ? 'isDetail' : '']">
       <el-row :gutter="24">
-        <el-col :span="6">
-          <el-form-item label="文件编号" prop="minioFileName">
+        <el-col :span="8">
+          <el-form-item label="文件编号">
             <el-input v-model="ruleForm.downloadNo" disabled placeholder="系统自动生成" />
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="模块名称" prop="moduleName">
             <el-input v-model="ruleForm.moduleName" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请输入模块名称'" />
           </el-form-item>
@@ -159,10 +164,11 @@
             <el-input v-model="ruleForm.updateUser" disabled />
           </el-form-item>
         </el-col> -->
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="创建时间" prop="updateTime">
             <el-date-picker
               v-model="updateTime"
+              :disabled="title === '详情'"
               type="datetime"
               format="YYYY-MM-DD hh:mm"
               value-format="YYYY-MM-DD hh:mm"
@@ -171,19 +177,19 @@
         </el-col>
       </el-row>
       <el-row :gutter="24">
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="业务类型" prop="businessDownloadType">
             <el-select v-model="ruleForm.businessDownloadType" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请选择业务类型'">
               <el-option v-for="item in businessTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="文件名称" prop="fileName">
             <el-input v-model="ruleForm.fileName" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请输入文件名称'" />
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="文件类型" prop="fileType">
             <el-select v-model="ruleForm.fileType" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请选择文件类型'">
               <el-option v-for="item in fileTypeList" :key="item.id" :label="item.name" :value="item.value" />
@@ -199,10 +205,10 @@
         </el-col>
       </el-row>
       <el-row :gutter="24">
-        <el-col :span="12">
+        <el-col :span="24">
           <el-form-item label="模板附件" prop="minioFileName">
             <show-photo :minio-file-name="ruleForm.minioFileName" width="100%" height="125px" />
-            <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '0px' : '20px', 'margin-top': ruleForm.minioFileName === '' ? '0px' : '56px' }" @click="upload">
+            <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
               {{ ruleForm.minioFileName === '' ? '上传' : '更换附件' }}
             </el-button>
             <input v-show="title === '123'" ref="fileRef" type="file" @change="onFileChange">
@@ -220,8 +226,6 @@
         </el-button>
       </div>
     </template>
-    <!-- 多选用户弹窗 -->
-    <user-list-comp ref="userListRef" @add="confirmUser" />
   </el-dialog>
 </template>
 

diff --git a/src/api/business/subpackage/record.ts b/src/api/business/subpackage/record.ts
index 9420480..2b12805 100644
--- a/src/api/business/subpackage/record.ts
+++ b/src/api/business/subpackage/record.ts
@@ -76,3 +76,73 @@
   })
 }
 
+// 分包方人员
+// 新增
+export function outsourcerUserAdd(data: object) {
+  return request({
+    url: '/business/outsourcerUser/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerUserDelete(data: object) {
+  return request({
+    url: '/business/outsourcerUser/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerUserList(data: object) {
+  return request({
+    url: '/business/outsourcerUser/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerUserListPage(data: object) {
+  return request({
+    url: '/business/outsourcerUser/listPage',
+    method: 'post',
+    data,
+  })
+}
+// 分包方业务能力
+// 新增
+export function outsourcerAbilityAdd(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/add',
+    method: 'post',
+    data,
+  })
+}
+
+// 删除
+export function outsourcerAbilityDelete(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/delete',
+    method: 'post',
+    data,
+  })
+}
+
+// 列表
+export function outsourcerAbilityList(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/list',
+    method: 'post',
+    data,
+  })
+}
+// 分页
+export function outsourcerAbilityListPage(data: object) {
+  return request({
+    url: '/business/outsourcerAbility/listPage',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/layouts/components/Tools/index.vue b/src/layouts/components/Tools/index.vue
index 13377a4..130ee5d 100644
--- a/src/layouts/components/Tools/index.vue
+++ b/src/layouts/components/Tools/index.vue
@@ -30,6 +30,10 @@
   { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
   { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
   { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
+  { id: '1', message: '示例消息', time: '2022-07-20 18:32:00' },
+  { id: '2', message: '收到一条证书到期提醒', time: '2022-07-20 18:32:00' },
+  { id: '3', message: '有新的借用申请待审批', time: '2022-07-20 18:32:00' },
+  { id: '4', message: '您的请假申请已通过', time: '2022-07-20 18:32:00' },
 ]
 
 function userCommand(command: 'dashboard' | 'resetPassword' | 'setting' | 'hotkeys' | 'logout') {
@@ -66,6 +70,10 @@
   // 连接 websocket
   websocket.initWebSocket()
 })
+onBeforeMount(() => {
+  // 断开 websocket
+  // websocket.destroyWebSocket()
+})
 </script>
 
 <template>
@@ -110,7 +118,7 @@
           </template>
           <template #default>
             <div class="message-container">
-              <div class="message-title">消息({{ messageList.length }})</div>
+              <div v-show="messageList.length" class="message-title">消息({{ messageList.length }})</div>
               <el-scrollbar max-height="400px">
                 <div v-for="message of messageList" :key="message.id" class="message-item">
                   <div class="icon">
diff --git a/src/store/modules/websocket.ts b/src/store/modules/websocket.ts
index 17f6d1c..9ac4510 100644
--- a/src/store/modules/websocket.ts
+++ b/src/store/modules/websocket.ts
@@ -6,7 +6,7 @@
   {
     state: () => ({
       wsUrl: `ws://${import.meta.env.VITE_APP_API_BASEURL.split('://')[1]}/websocket/${useUserStore().id}`,
-      websocket: '', // ws连接
+      websocket: null, // ws连接
       wsStatus: false, // websocket连接状态 true为连接
       wsPingTimer: null, // 心跳定时器
       wsPingTime: 60000, // 心跳定时时长
@@ -59,6 +59,7 @@
           }
           // 监听socket消息接收s
           socket.onmessage = (msg) => {
+            console.log(msg, 'websocket初始')
             // 转换为json对象
             const data = JSON.parse(msg.data)
             console.log(data, 'websocket 返回消息')
@@ -93,7 +94,9 @@
       // 断开websocket
       destroyWebSocket() {
         this.wsIsReconnect = false
-        this.websocket.close()
+        if (this.websocket) {
+          this.websocket.close()
+        }
         if (this.wsPingTimer) {
           console.log('停止定时器')
           clearInterval(this.wsPingTimer)
diff --git a/src/views/business/subpackage/record/components/addRow.vue b/src/views/business/subpackage/record/components/addRow.vue
new file mode 100644
index 0000000..07b03d1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/addRow.vue
@@ -0,0 +1,287 @@
+<!-- 添加记录弹窗 -->
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+const formLabelWidth = '110px'
+const form = ref({})
+const formTable = ref([
+  {
+    name: '周检记录',
+    form: {
+
+    },
+  },
+  {
+    name: '状态变更记录',
+    form: {
+
+    },
+  },
+  {
+    name: '使用记录',
+    form: {
+
+    },
+  },
+  {
+    name: '检定证书',
+    form: {
+
+    },
+  },
+])
+const title = ref('')
+const name = ref('')
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules>({
+})
+const managerStateList = ref([]) // 管理状态
+// 重置
+const resetData = () => {
+}
+const initDialog = (row: any) => {
+  title.value = row.title
+  name.value = row.name
+  form.value = formTable.value.filter(item => item.name === row.name)[0].form
+  // if (row.title === '编辑') {
+
+  // }
+  dialogFormVisible.value = true
+  // 获取管理状态
+  getDictByCode('managerState').then((response) => {
+    managerStateList.value = response.data
+  })
+}
+defineExpose({ initDialog })
+
+// 点击保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(form.value, 'form')
+  const flagArr = []
+  for (const key in form.value) {
+    if (form.value[key]) {
+      flagArr.push(1)
+    }
+    else {
+      flagArr.push(0)
+    }
+  }
+  if (flagArr.every(item => item == 1)) {
+    if (title.value === '编辑') {
+      emits('add', form.value, 'update')
+    }
+    else {
+      emits('add', form.value, '')
+    }
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先完整填写信息')
+  }
+}
+// 取消
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) { return }
+  formEl.resetFields()
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${name}-${title}`" width="50%">
+    <el-form
+      ref="ruleFormRef" :model="form"
+      :rules="rules"
+    >
+      <div v-if="name === '周检记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录表编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录表编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="记录人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="记录人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="检定日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="检定日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="有效日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="有效日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="送检人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="送检人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="计量确认结论" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="计量确认结论" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '状态变更记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="状态类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="状态类型" clearable style="width: 100%;">
+                <el-option v-for="item in managerStateList" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="申请人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="申请人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '使用记录'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用人" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用部门" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="使用部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="使用类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用开始日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用开始日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="使用结束日期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="使用结束日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div v-if="name === '检定证书'">
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书编号" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书编号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书名称" :label-width="formLabelWidth" prop="certificateNo">
+              <el-input v-model="form.certificateNo" placeholder="证书名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书类型" :label-width="formLabelWidth" prop="certificateNo">
+              <el-select v-model="form.certificateNo" placeholder="证书类型" clearable style="width: 100%;">
+                <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书出具日期" :label-width="formLabelWidth" prop="certificateNo">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书出具日期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="18">
+            <el-form-item label="证书有效期" :label-width="formLabelWidth" prop="validDate">
+              <el-date-picker
+                v-model="form.validDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="证书有效期" style="width: 100%;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
+        <el-button @click="resetForm(ruleFormRef)">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
diff --git a/src/views/business/subpackage/record/components/outsourcerAbility.vue b/src/views/business/subpackage/record/components/outsourcerAbility.vue
new file mode 100644
index 0000000..7a91322
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerAbility.vue
@@ -0,0 +1,74 @@
+<!-- 分包方业务能力 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerAbility } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerAbility>({
+  abilityDesc: '', // 能力描述
+  abilityName: '', // 能力名称
+  createTime: '', // 创建时间（列表返回参数）
+  id: '', //
+  outsourcerId: '', // 分包方id
+  price: '', // 报价
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '能力名称', value: 'abilityName', align: 'center', width: '160px' },
+  { text: '能力描述', value: 'abilityDesc', align: 'center' },
+  { text: '报价', value: 'price', align: 'center', width: '160px' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/outsourcerUser.vue b/src/views/business/subpackage/record/components/outsourcerUser.vue
new file mode 100644
index 0000000..4f9a310
--- /dev/null
+++ b/src/views/business/subpackage/record/components/outsourcerUser.vue
@@ -0,0 +1,77 @@
+<!-- 分包方人员 -->
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { IOutsourcerUser } from '../../subpackage-interface'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+import { outsourcerUserListPage } from '@/api/business/subpackage/record'
+
+// 查询条件
+const listQuery = ref<IOutsourcerUser>({
+  createTime: '', // 创建时间（列表返回参数）
+  department: '', // 部门
+  id: '', //
+  job: '', // 职务
+  name: '', // 人员名字
+  outsourcerId: '', // 分包方id
+  phone: '', // 联系方式
+  userNo: '', // 人员编号-手动输入
+  offset: 1,
+  limit: 20,
+})
+// 表头
+const columns = ref<TableColumn[]>([
+  { text: '姓名', value: 'name', align: 'center', width: '160px' },
+  { text: '工作部门', value: 'department', align: 'center' },
+  { text: '职务', value: 'job', align: 'center', width: '160px' },
+  { text: '联系方式', value: 'phone', align: 'center' },
+])
+const list = ref([])
+const loadingTable = ref(false)
+const total = ref(0)
+
+// 数据查询
+function fetchData(isNowPage = false) {
+  loadingTable.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  // 模拟数据
+  loadingTable.value = false
+  outsourcerUserListPage(listQuery.value).then((response) => {
+    list.value = response.data.rows
+    total.value = parseInt(response.data.total)
+    loadingTable.value = false
+  })
+}
+// 分页
+const changePage = () => {
+
+}
+// 选中
+const handleSelectionChange = () => {
+
+}
+onMounted(async () => {
+  fetchData()
+})
+</script>
+
+<template>
+  <normal-table
+    :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+    is-showmulti-select @change="changePage" @multi-select="handleSelectionChange"
+  >
+    <template #preColumns>
+      <el-table-column label="序号" width="55" align="center">
+        <template #default="scope">
+          {{ (listQuery.offset! - 1) * listQuery.limit! + scope.$index + 1 }}
+        </template>
+      </el-table-column>
+    </template>
+  </normal-table>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+</style>
diff --git a/src/views/business/subpackage/record/components/templateTable.vue b/src/views/business/subpackage/record/components/templateTable.vue
new file mode 100644
index 0000000..51c05f1
--- /dev/null
+++ b/src/views/business/subpackage/record/components/templateTable.vue
@@ -0,0 +1,51 @@
+<!-- 表格记录 -->
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
+
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+  },
+  list: {
+    type: Array,
+    required: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+})
+const emits = defineEmits(['changePage'])
+const searchQuery = ref({
+  limit: 10,
+  offset: 1,
+})
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+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
+  }
+  emits('changePage', searchQuery)
+}
+</script>
+
+<template>
+  <div>
+    <normal-table
+      :data="list" :total="total" :columns="columns"
+      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
+      :list-loading="loading"
+      @change="changePage"
+    />
+  </div>
+</template>
+
diff --git a/src/views/business/subpackage/record/edit.vue b/src/views/business/subpackage/record/edit.vue
index c73714b..6c46aa2 100644
--- a/src/views/business/subpackage/record/edit.vue
+++ b/src/views/business/subpackage/record/edit.vue
@@ -4,6 +4,8 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
 import type { IRecordDetail } from '../subpackage-interface'
+import outsourcerUser from './components/outsourcerUser.vue'
+import outsourcerAbility from './components/outsourcerAbility.vue'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { detail } from '@/api/business/subpackage/record'
 import { fetchApproval, submitApproval } from '@/api/approval'
@@ -159,6 +161,7 @@
 <template>
   <app-container style="overflow: hidden;">
     <detail-page title="分包方档案">
+      <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
       <template #btns>
         <el-button type="primary">
           打印
@@ -170,7 +173,9 @@
           关闭
         </el-button>
       </template>
+      <!-- 基本信息 -->
       <el-form
+        v-if="active === '0'"
         ref="ruleFormRef"
         :model="detailForm"
         label-width="140"
@@ -381,10 +386,30 @@
         </el-row>
       </el-form>
     </detail-page>
-    <button-box :active="active" :menu="menu" @change-current-button="changeCurrentButton" />
+    <template
+      #btns
+    >
+      <el-button type="primary">
+        增加行
+      </el-button>
+      <el-button type="info">
+        删除行
+      </el-button>
+    </template>
+    <outsourcer-user v-if="active === '1'" />
+    <outsourcer-ability v-if="active === '2'" />
+    <!-- 分包方人员 -->
+    <!-- 业务能力 -->
+    <!-- 项目记录 -->
+    <!-- 合同记录 -->
+    <!-- 检定证书 -->
   </app-container>
 </template>
 
 <style lang="scss" scoped>
 // 样式
+::v-deep.container .btns {
+  position: static !important;
+  padding-bottom: 20px !important;
+}
 </style>
diff --git a/src/views/business/subpackage/subpackage-interface.ts b/src/views/business/subpackage/subpackage-interface.ts
index 5d8eb91..9fbbb49 100644
--- a/src/views/business/subpackage/subpackage-interface.ts
+++ b/src/views/business/subpackage/subpackage-interface.ts
@@ -208,3 +208,29 @@
   taxNumber: string // 税号
   website: string // 网址
 }
+
+// 分包方人员
+export interface IOutsourcerUser {
+  createTime: string // 创建时间（列表返回参数）
+  department: string // 部门
+  id?: string | number //
+  job: string // 职务
+  name: string // 人员名字
+  outsourcerId: string | number // 分包方id
+  phone: string // 联系方式
+  userNo: string // 人员编号-手动输入
+  offset?: number | undefined
+  limit?: number | undefined
+}
+
+// 业务能力
+export interface IOutsourcerAbility {
+  abilityDesc: string // 能力描述
+  abilityName: string // 能力名称
+  createTime: string // 创建时间（列表返回参数）
+  id: string | number //
+  outsourcerId: string | number // 分包方id
+  price: string // 报价
+  offset?: number | undefined
+  limit?: number | undefined
+}
diff --git a/src/views/measure/person/components/addPerson.vue b/src/views/measure/person/components/addPerson.vue
index 733efc3..c750426 100644
--- a/src/views/measure/person/components/addPerson.vue
+++ b/src/views/measure/person/components/addPerson.vue
@@ -761,7 +761,7 @@
         </el-table-column>
       </el-table>
       <!-- 选择用户列表组件 -->
-      <user-list-dialog ref="userListRef" @add="confirmPerson" />
+      <user-list-dialog ref="userListRef" :need-admin="false" @add="confirmPerson" />
     </detail-block-switch>
   </app-container>
 </template>
diff --git a/src/views/measure/person/components/userListDialog.vue b/src/views/measure/person/components/userListDialog.vue
index 91058ac..303f239 100644
--- a/src/views/measure/person/components/userListDialog.vue
+++ b/src/views/measure/person/components/userListDialog.vue
@@ -8,6 +8,12 @@
 import { toTreeList } from '@/utils/structure'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 
+const props = defineProps({
+  needAdmin: { // 是否展示admin用户
+    type: Boolean,
+    default: true,
+  },
+})
 const emits = defineEmits(['add'])
 const dialogFormVisible = ref(false)
 // 查询条件
@@ -43,8 +49,14 @@
   select.value = -1
   getUserList(listQuery.value).then((res) => {
     if (res.code === 200) {
-      list.value = res.data.rows
-      total.value = res.data.total
+      if (props.needAdmin) {
+        list.value = res.data.rows
+        total.value = res.data.total
+      }
+      else {
+        list.value = res.data.rows.filter((item: any) => item.account !== 'admin')
+        total.value = res.data.total - 1
+      }
     }
   })
 }
diff --git a/src/views/system/tool/fileConfiguration/addDDialog.vue b/src/views/system/tool/fileConfiguration/addDDialog.vue
index 69b5832..469f2ae 100644
--- a/src/views/system/tool/fileConfiguration/addDDialog.vue
+++ b/src/views/system/tool/fileConfiguration/addDDialog.vue
@@ -5,10 +5,8 @@
 import dayjs from 'dayjs'
 import showPhoto from '../showPhoto.vue'
 import { getDictByCode } from '@/api/system/dict'
-import userListComp from '@/views/measure/person/components/userListDialog.vue'
-import { getUserList } from '@/api/system/user'
 import { uploadApi } from '@/api/system/notice'
-import { addeFileListPage } from '@/api/system/tool'
+import { addeFileListPage, updateFileListPage } from '@/api/system/tool'
 const emits = defineEmits(['resetData'])
 const ruleFormRef = ref<FormInstance>() // from组件
 const updateTime = ref('')
@@ -85,18 +83,25 @@
             type: 'success',
             message: '添加成功',
           })
+          close()
         })
       }
       else {
-        console.log('编辑')
+        updateFileListPage(ruleForm.value).then((res) => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          })
+          close()
+        })
       }
     }
   })
 }
 // 获取文件类型
-const fileTypeList = ref([])
+const fileTypeList = ref<any>([])
 const getFileType = () => {
-  getDictByCode('').then((res) => {
+  getDictByCode('configFileType').then((res) => {
     fileTypeList.value = res.data
   })
 }
@@ -126,7 +131,7 @@
     uploadApi(fd).then((res) => {
       if (res.code === 200) {
         ruleFormRef.value?.clearValidate('minioFileName')
-        ruleForm.minioFileName = res.data[0]
+        ruleForm.value.minioFileName = res.data[0]
         ElMessage.success('上传成功')
       }
       else {
@@ -141,15 +146,15 @@
 </script>
 
 <template>
-  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="title" width="80%" append-to-body class="container" @close="resetForm">
+  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="title" width="60%" append-to-body class="container" @close="resetForm">
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" :class="[title === '详情' ? 'isDetail' : '']">
       <el-row :gutter="24">
-        <el-col :span="6">
-          <el-form-item label="文件编号" prop="minioFileName">
+        <el-col :span="8">
+          <el-form-item label="文件编号">
             <el-input v-model="ruleForm.downloadNo" disabled placeholder="系统自动生成" />
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="模块名称" prop="moduleName">
             <el-input v-model="ruleForm.moduleName" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请输入模块名称'" />
           </el-form-item>
@@ -159,10 +164,11 @@
             <el-input v-model="ruleForm.updateUser" disabled />
           </el-form-item>
         </el-col> -->
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="创建时间" prop="updateTime">
             <el-date-picker
               v-model="updateTime"
+              :disabled="title === '详情'"
               type="datetime"
               format="YYYY-MM-DD hh:mm"
               value-format="YYYY-MM-DD hh:mm"
@@ -171,19 +177,19 @@
         </el-col>
       </el-row>
       <el-row :gutter="24">
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="业务类型" prop="businessDownloadType">
             <el-select v-model="ruleForm.businessDownloadType" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请选择业务类型'">
               <el-option v-for="item in businessTypeList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="文件名称" prop="fileName">
             <el-input v-model="ruleForm.fileName" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请输入文件名称'" />
           </el-form-item>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-form-item label="文件类型" prop="fileType">
             <el-select v-model="ruleForm.fileType" :disabled="title === '详情'" :placeholder="title === '详情' ? '' : '请选择文件类型'">
               <el-option v-for="item in fileTypeList" :key="item.id" :label="item.name" :value="item.value" />
@@ -199,10 +205,10 @@
         </el-col>
       </el-row>
       <el-row :gutter="24">
-        <el-col :span="12">
+        <el-col :span="24">
           <el-form-item label="模板附件" prop="minioFileName">
             <show-photo :minio-file-name="ruleForm.minioFileName" width="100%" height="125px" />
-            <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '0px' : '20px', 'margin-top': ruleForm.minioFileName === '' ? '0px' : '56px' }" @click="upload">
+            <el-button v-if="title !== '详情'" type="primary" :disabled="title === '详情'" :style="{ 'margin-left': ruleForm.minioFileName === '' ? '0px' : '20px' }" @click="upload">
               {{ ruleForm.minioFileName === '' ? '上传' : '更换附件' }}
             </el-button>
             <input v-show="title === '123'" ref="fileRef" type="file" @change="onFileChange">
@@ -220,8 +226,6 @@
         </el-button>
       </div>
     </template>
-    <!-- 多选用户弹窗 -->
-    <user-list-comp ref="userListRef" @add="confirmUser" />
   </el-dialog>
 </template>
 
diff --git a/src/views/system/tool/fileConfiguration/configuration.vue b/src/views/system/tool/fileConfiguration/configuration.vue
index 21b4230..d699e65 100644
--- a/src/views/system/tool/fileConfiguration/configuration.vue
+++ b/src/views/system/tool/fileConfiguration/configuration.vue
@@ -1,12 +1,9 @@
 <!-- 文件配置管理 -->
 <script lang="ts" setup>
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import type { queryType, signType, typeofSign } from '../tool_interface'
 import addDDialog from './addDDialog.vue'
 import { printJSON } from '@/utils/printUtils'
 import { deleteFileListPage, exportFileListPage, getFileListPage } from '@/api/system/tool'
-import { getDictByCode } from '@/api/system/dict'
-// import { exportExcel } from '@/utils/exportXlsx'
 import { exportFile } from '@/utils/exportUtils'
 const { proxy } = getCurrentInstance() as any
 const searchQuery = reactive<any>({
@@ -22,9 +19,9 @@
 const columns = ref([
   { text: '文件编号', value: 'downloadNo', align: 'center' },
   { text: '模块名称', value: 'moduleName', align: 'center' },
-  { text: '业务类型', value: 'businessDownloadType', align: 'center' },
+  { text: '业务类型', value: 'businessDownloadTypeName', align: 'center' },
   { text: '文件名称', value: 'fileName', align: 'center' },
-  { text: '文件类型', value: 'fileType', align: 'center' },
+  { text: '文件类型', value: 'fileTypeName', align: 'center' },
   // { text: '创建人', value: 'updateUser', align: 'center' },
   { text: '创建时间', value: 'updateTime', align: 'center' },
 ])
@@ -57,7 +54,7 @@
   getList()
 }
 // 编辑
-const edit = (row: signType) => {
+const edit = (row: any) => {
   addRef.value.initDialog({
     ...row,
     title: '编辑',
@@ -65,16 +62,16 @@
 }
 
 // 详情
-const detail = (row: signType) => {
+const detail = (row: any) => {
   addRef.value.initDialog({
     ...row,
     title: '详情',
   })
 }
 // 删除
-const remove = (row: signType) => {
+const remove = (row: any) => {
   ElMessageBox.confirm(
-    `确认删除${row.signName}吗？`,
+    `确认删除${row.fileName}吗？`,
     '提示',
     {
       confirmButtonText: '确认',
@@ -114,9 +111,9 @@
   })
 }
 // 表格被选中的行
-const selectList = ref<signType[]>([])
+const selectList = ref<any[]>([])
 // 表格多选
-const multiSelect = (row: signType[]) => {
+const multiSelect = (row: any[]) => {
   selectList.value = row
 }
 // 导出
@@ -126,21 +123,24 @@
     text: 'Loading',
     background: 'rgba(255, 255, 255, 0.8)',
   })
+  console.log(selectList.value)
   if (selectList.value.length) {
     selectList.value.forEach((item) => {
       searchQuery.ids?.push(item.id as string)
     })
+    exportFileListPage(searchQuery).then((res) => {
+      exportFile(res.data, '配置文件管理')
+      loading.close()
+      searchQuery.ids = []
+    })
+      .catch((_) => {
+        loading.close()
+      })
   }
   else {
-    searchQuery.ids = []
-  }
-  exportFileListPage(searchQuery).then((res) => {
     loading.close()
-    searchQuery.ids = []
-  })
-    .catch((_) => {
-      loading.close()
-    })
+    ElMessage('请先选择需要导出的内容')
+  }
 }
 // 打印
 function printList() {
@@ -153,11 +153,11 @@
     }
   })
   if (selectIds.length <= 0 && list.value.length > 0) {
-    printJSON(list.value, properties, '签名管理')
+    printJSON(list.value, properties, '配置文件管理')
   }
   else if (selectIds.length > 0) {
-    const printList = list.value.filter((item: signType) => selectIds.includes(item.id))
-    printJSON(printList, properties, '签名管理')
+    const printList = list.value.filter((item: any) => selectIds.includes(item.id))
+    printJSON(printList, properties, '配置文件管理')
   }
   else {
     ElMessage('无可打印内容')