diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/components/listPage.vue b/src/views/measure/train/components/listPage.vue
index c0eb859..98d50ad 100644
--- a/src/views/measure/train/components/listPage.vue
+++ b/src/views/measure/train/components/listPage.vue
@@ -147,7 +147,12 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  if (value === '查看') {
+    buttonArray.value = ['同意', '驳回', '拒绝']
+  }
+  else {
+    buttonArray.value = ['提交']
+  }
   buttonType.value = value
   infoId.value = row.id
   show.value = false

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/components/listPage.vue b/src/views/measure/train/components/listPage.vue
index c0eb859..98d50ad 100644
--- a/src/views/measure/train/components/listPage.vue
+++ b/src/views/measure/train/components/listPage.vue
@@ -147,7 +147,12 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  if (value === '查看') {
+    buttonArray.value = ['同意', '驳回', '拒绝']
+  }
+  else {
+    buttonArray.value = ['提交']
+  }
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/train/components/listPageAdd.vue b/src/views/measure/train/components/listPageAdd.vue
index ebbc451..b067e3d 100644
--- a/src/views/measure/train/components/listPageAdd.vue
+++ b/src/views/measure/train/components/listPageAdd.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import {
   getDeptTree,
   getListAdd,
@@ -41,6 +43,7 @@
 })
 // 主管部门下拉框
 const options = ref([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -48,6 +51,20 @@
   { text: '签到时间', value: 'signTime', type: '下拉' },
 ]
 const dialogVisible = ref(false)
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptName: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const addPersonList = ref({
   company: '',
   examResult: '',
@@ -107,11 +124,26 @@
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -143,159 +175,185 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
-        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
-          {{ item }}
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          v-print="buttonType === '详情' ? printObj : ''"
+          type="primary"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
+        >
+          {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" plain @click="close">
+        <el-button v-if=" buttonType === '编辑'" type="primary">
+          保存
+        </el-button>
+        <el-button type="warning" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptName">
+              <el-select
+                v-model="formInline.deptName"
+                clearable
+                placeholder="主管部门"
+                size="default"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/components/listPage.vue b/src/views/measure/train/components/listPage.vue
index c0eb859..98d50ad 100644
--- a/src/views/measure/train/components/listPage.vue
+++ b/src/views/measure/train/components/listPage.vue
@@ -147,7 +147,12 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  if (value === '查看') {
+    buttonArray.value = ['同意', '驳回', '拒绝']
+  }
+  else {
+    buttonArray.value = ['提交']
+  }
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/train/components/listPageAdd.vue b/src/views/measure/train/components/listPageAdd.vue
index ebbc451..b067e3d 100644
--- a/src/views/measure/train/components/listPageAdd.vue
+++ b/src/views/measure/train/components/listPageAdd.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import {
   getDeptTree,
   getListAdd,
@@ -41,6 +43,7 @@
 })
 // 主管部门下拉框
 const options = ref([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -48,6 +51,20 @@
   { text: '签到时间', value: 'signTime', type: '下拉' },
 ]
 const dialogVisible = ref(false)
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptName: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const addPersonList = ref({
   company: '',
   examResult: '',
@@ -107,11 +124,26 @@
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -143,159 +175,185 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
-        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
-          {{ item }}
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          v-print="buttonType === '详情' ? printObj : ''"
+          type="primary"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
+        >
+          {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" plain @click="close">
+        <el-button v-if=" buttonType === '编辑'" type="primary">
+          保存
+        </el-button>
+        <el-button type="warning" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptName">
+              <el-select
+                v-model="formInline.deptName"
+                clearable
+                placeholder="主管部门"
+                size="default"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
diff --git a/src/views/measure/train/components/userListDialog.vue b/src/views/measure/train/components/userListDialog.vue
new file mode 100644
index 0000000..55e33e2
--- /dev/null
+++ b/src/views/measure/train/components/userListDialog.vue
@@ -0,0 +1,131 @@
+<!-- 用户列表弹窗 -->
+<script lang="ts" setup name="selectPerson">
+import { ElMessage } from 'element-plus'
+import { getUserList } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
+import type { TreeStructure } from '@/views/system/user/user-interface'
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+})
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+
+// 查询条件
+const listQuery = ref({
+  name: '', // 姓名
+})
+const loadingTable = ref<boolean>(false)
+const total = ref<number>(0)
+const select = ref<number>(-1)
+const columns = ref([
+  {
+    text: '姓名',
+    value: 'name',
+  },
+  {
+    text: '单位名称',
+    value: 'company',
+  },
+  {
+    text: '技术职称',
+    value: 'remark',
+  },
+  {
+    text: '签到时间',
+    value: 'signTime',
+  },
+  {
+    text: '考核结果',
+    value: 'examResult',
+  },
+])
+const list = ref(props.list || [])
+// 搜索
+const search = () => {
+  list.value = props.list.filter(item => item.name === listQuery.value.name)
+}
+const changePage = (e: any) => {
+  console.log(e)
+}
+// 重置
+const reset = () => {
+  listQuery.value = {
+    name: '', // 姓名
+  }
+  list.value = props.list
+}
+// 点击保存
+const submitForm = () => {
+  console.log(select.value)
+  if (select.value >= 0) {
+    const person = list.value.filter((item, index) => index == select.value)[0]
+    emits('add', person)
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先选择人员')
+  }
+}
+// 监听数据变化
+watch(
+  [() => props.list], ([newNums], [oldNums]) => {
+    list.value = newNums
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 取消
+const resetForm = () => {
+  dialogFormVisible.value = false
+}
+// 初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择人员">
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.name" placeholder="真实姓名" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <div style="padding: 12px;">
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery"
+        :list-loading="loadingTable"
+      >
+        <template #preColumns>
+          <el-table-column label="选择" width="55" align="center">
+            <template #default="scope">
+              <el-radio v-model="select" :label="scope.$index" class="radio" />
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确认</el-button>
+        <el-button @click="resetForm">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-radio__label) {
+  display: none;
+}
+</style>

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/components/listPage.vue b/src/views/measure/train/components/listPage.vue
index c0eb859..98d50ad 100644
--- a/src/views/measure/train/components/listPage.vue
+++ b/src/views/measure/train/components/listPage.vue
@@ -147,7 +147,12 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  if (value === '查看') {
+    buttonArray.value = ['同意', '驳回', '拒绝']
+  }
+  else {
+    buttonArray.value = ['提交']
+  }
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/train/components/listPageAdd.vue b/src/views/measure/train/components/listPageAdd.vue
index ebbc451..b067e3d 100644
--- a/src/views/measure/train/components/listPageAdd.vue
+++ b/src/views/measure/train/components/listPageAdd.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import {
   getDeptTree,
   getListAdd,
@@ -41,6 +43,7 @@
 })
 // 主管部门下拉框
 const options = ref([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -48,6 +51,20 @@
   { text: '签到时间', value: 'signTime', type: '下拉' },
 ]
 const dialogVisible = ref(false)
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptName: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const addPersonList = ref({
   company: '',
   examResult: '',
@@ -107,11 +124,26 @@
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -143,159 +175,185 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
-        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
-          {{ item }}
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          v-print="buttonType === '详情' ? printObj : ''"
+          type="primary"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
+        >
+          {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" plain @click="close">
+        <el-button v-if=" buttonType === '编辑'" type="primary">
+          保存
+        </el-button>
+        <el-button type="warning" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptName">
+              <el-select
+                v-model="formInline.deptName"
+                clearable
+                placeholder="主管部门"
+                size="default"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
diff --git a/src/views/measure/train/components/userListDialog.vue b/src/views/measure/train/components/userListDialog.vue
new file mode 100644
index 0000000..55e33e2
--- /dev/null
+++ b/src/views/measure/train/components/userListDialog.vue
@@ -0,0 +1,131 @@
+<!-- 用户列表弹窗 -->
+<script lang="ts" setup name="selectPerson">
+import { ElMessage } from 'element-plus'
+import { getUserList } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
+import type { TreeStructure } from '@/views/system/user/user-interface'
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+})
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+
+// 查询条件
+const listQuery = ref({
+  name: '', // 姓名
+})
+const loadingTable = ref<boolean>(false)
+const total = ref<number>(0)
+const select = ref<number>(-1)
+const columns = ref([
+  {
+    text: '姓名',
+    value: 'name',
+  },
+  {
+    text: '单位名称',
+    value: 'company',
+  },
+  {
+    text: '技术职称',
+    value: 'remark',
+  },
+  {
+    text: '签到时间',
+    value: 'signTime',
+  },
+  {
+    text: '考核结果',
+    value: 'examResult',
+  },
+])
+const list = ref(props.list || [])
+// 搜索
+const search = () => {
+  list.value = props.list.filter(item => item.name === listQuery.value.name)
+}
+const changePage = (e: any) => {
+  console.log(e)
+}
+// 重置
+const reset = () => {
+  listQuery.value = {
+    name: '', // 姓名
+  }
+  list.value = props.list
+}
+// 点击保存
+const submitForm = () => {
+  console.log(select.value)
+  if (select.value >= 0) {
+    const person = list.value.filter((item, index) => index == select.value)[0]
+    emits('add', person)
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先选择人员')
+  }
+}
+// 监听数据变化
+watch(
+  [() => props.list], ([newNums], [oldNums]) => {
+    list.value = newNums
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 取消
+const resetForm = () => {
+  dialogFormVisible.value = false
+}
+// 初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择人员">
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.name" placeholder="真实姓名" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <div style="padding: 12px;">
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery"
+        :list-loading="loadingTable"
+      >
+        <template #preColumns>
+          <el-table-column label="选择" width="55" align="center">
+            <template #default="scope">
+              <el-radio v-model="select" :label="scope.$index" class="radio" />
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确认</el-button>
+        <el-button @click="resetForm">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-radio__label) {
+  display: none;
+}
+</style>
diff --git a/src/views/measure/train/planAdd.vue b/src/views/measure/train/planAdd.vue
index 9d717c0..76ed102 100644
--- a/src/views/measure/train/planAdd.vue
+++ b/src/views/measure/train/planAdd.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import userListDialog from '../person/components/userListDialog.vue'
 import type { IOptions } from './plan_interface'
+import DeptSelect from '@/components/DeptSelect/index.vue'
 import {
   getDeptTree,
   getListAdd,
@@ -35,8 +39,7 @@
   trainStaffList: [],
   trainTime: null,
 })
-// 主管部门下拉框
-const options = ref<IOptions[]>([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -55,21 +58,29 @@
   technologyJob: '',
 })
 const SelectionList = ref([])
-// 获取到组织信息
-const getDept = () => {
-  const params = {
-    roleId: '',
-    deptType: '',
-    tips: '',
-  }
-  getDeptTree(params).then((response) => {
-    options.value = response.data
-  })
-}
-getDept()
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+// 关闭新增页面的回调
 const close = () => {
   emit('close')
 }
+const userListRef = ref()
+// 选择人员
+const selectPerson = () => {
+  userListRef.value.initDialog()
+}
 const addRoow = () => {
   Object.keys(addPersonList.value).forEach(
     key => (addPersonList.value[key] = ''),
@@ -95,19 +106,40 @@
     },
   )
 }
+// 多选框选择
 const handleSelectionChange = (e: any) => {
   SelectionList.value = e
 }
+// 选择完负责人的函数
+const confirmPerson = (object: object) => {
+  console.log(object)
+  formInline.value.director = object.name
+}
 if (props.infoId && props.infoId !== '') {
   getListDetail({ id: props.infoId }).then((res) => {
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -139,166 +171,178 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
         <el-button
           v-print="buttonType === '详情' ? printObj : ''"
           type="primary"
-          @click="getAddList(buttonType === '详情' ? '打印' : '提交')"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
         >
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
         <el-button v-if=" buttonType === '编辑'" type="primary">
           保存
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptId">
+              <dept-select ref="deptSelect" v-model="formInline.deptId" :dept-show="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              >
+                <template #append>
+                  <el-button size="small" :disabled="buttonType === '详情'" @click="selectPerson">
+                    选择
+                  </el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -338,6 +382,8 @@
       完成
     </el-button>
   </el-dialog>
+  <!-- 选择用户列表组件 -->
+  <user-list-dialog ref="userListRef" @add="confirmPerson" />
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/components.d.ts b/src/components.d.ts
index 6e85584..bc39b3b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@
     Benchcol: typeof import('./components/benchcol/index.vue')['default']
     BenchCol: typeof import('./components/benchCol/index.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
-    copy: typeof import('./components/DetailPage/index copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/views/measure/price/list.vue b/src/views/measure/price/list.vue
index 9d6d975..b6d4f2f 100644
--- a/src/views/measure/price/list.vue
+++ b/src/views/measure/price/list.vue
@@ -273,7 +273,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/price/priceAdd.vue b/src/views/measure/price/priceAdd.vue
index 2f623df..33627d7 100644
--- a/src/views/measure/price/priceAdd.vue
+++ b/src/views/measure/price/priceAdd.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ListSourceAdd">
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import type { formInlineType, optionsType } from './list_interface'
 import { getPriceAddList, getQueryPriceInfo, getTypeSelect, getUpdatePriceInfo } from '@/api/system/price'
 const props = defineProps({
@@ -35,6 +36,17 @@
   remark: '',
   updateTime: null,
 })
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  priceName: [{ required: true, message: '价格名称不能为空', trigger: 'blur' }],
+  checkType: [{ required: true, message: '校验类型不能为空', trigger: 'blur' }],
+  priceType: [{ required: true, message: '类别不能为空', trigger: 'blur' }],
+  priceItem: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  priceStandard: [{ required: true, message: '依据标准不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '标准价格不能为空', trigger: 'blur' }],
+  operatorDiscountPermission: [{ required: true, message: '业务员折扣权限不能为空', trigger: 'blur' }],
+  directorDiscountPermission: [{ required: true, message: '负责人折扣权限不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const checkTypeOptions = ref<optionsType[]>([])
 const priceTypeOptions = ref<optionsType[]>([])
 const priceItemOptions = ref<optionsType[]>([])
@@ -76,239 +88,221 @@
 getOptions('directorDiscountPermission')
 
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.priceName === '') {
-    return ElMessage.error('请填写价格名称')
-  }
-  else if (formInline.value.checkType === '') {
-    return ElMessage.error('请选择检校类型')
-  }
-  else if (formInline.value.priceType === '') {
-    return ElMessage.error('请选择类别')
-  }
-  else if (formInline.value.priceItem === '') {
-    return ElMessage.error('请选择项目')
-  }
-  else if (formInline.value.priceStandard === '') {
-    return ElMessage.error('请输入依据标准')
-  }
-  else if (formInline.value.price === '') {
-    return ElMessage.error('请输入标准价格')
-  }
-  else if (formInline.value.operatorDiscountPermission === '') {
-    return ElMessage.error('请选择业务员折扣权限')
-  }
-  else if (formInline.value.directorDiscountPermission === '') {
-    return ElMessage.error('请选择负责人折扣权限')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getPriceAddList(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getUpdatePriceInfo(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    // 打印
-    const printObj = ref({
-      id: 'print', // 需要打印元素的id
-      popTitle: '证书报告模板', // 打印配置页上方的标题
-      extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
-      preview: false, // 是否启动预览模式，默认是false
-      standard: '',
-      extarCss: '',
-    })
-  }
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getPriceAddList(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getUpdatePriceInfo(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          // 打印
+          const printObj = ref({
+            id: 'print', // 需要打印元素的id
+            popTitle: '证书报告模板', // 打印配置页上方的标题
+            extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+            preview: false, // 是否启动预览模式，默认是false
+            standard: '',
+            extarCss: '',
+          })
+        }
+      })
+    }
+  })
 }
-if (props.buttonType !== '') {
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(buttonType === '详情' ? '打印' : '提交')">
+    <detail-page :title="`价格列表-${buttonType}`">
+      <template #btns>
+        <el-button v-print="buttonType === '详情' ? printObj : ''" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')">
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
+        label-width="auto"
         class="demo-form-inline"
         label-position="right"
+        :rules="rules"
       >
-        <!-- <el-form-item label="价格编号:" label-width="auto">
-          <el-input
-            v-model="formInline.priceNo"
-            placeholder="请输入价格编号"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item> -->
-        <el-form-item label="价格名称:" label-width="110">
-          <el-input
-            v-model.trim="formInline.priceName"
-            placeholder="价格名称"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span>
-          <el-form-item label="检校类型:" label-width="110">
-            <el-select
-              v-model.trim="formInline.checkType"
-              clearable
-              placeholder="检校类型"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in checkTypeOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="价格名称:" prop="priceName">
+              <el-input
+                v-model.trim="formInline.priceName"
+                placeholder="价格名称"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        <!-- <el-form-item label="创建时间:" label-width="80">
-          <el-date-picker
-              v-model="formInline.createTime"
-              type="datetime"
-              placeholder="请选择创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        </span>
-        <el-form-item label="类别:" label-width="auto">
-          <el-select
-            v-model.trim="formInline.priceType"
-            clearable
-            placeholder="类别"
-            style="width: 80%;"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in priceTypeOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="项目:" label-width="110">
-            <el-select
-              v-model.trim="formInline.priceItem"
-              clearable
-              placeholder="项目"
-              style="width: 80%;"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in priceItemOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="检校类型:" prop="checkType">
+              <el-select
+                v-model.trim="formInline.checkType"
+                clearable
+                placeholder="请选择检校类型"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in checkTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="类别:" prop="priceType">
+              <el-select
+                v-model.trim="formInline.priceType"
+                clearable
+                placeholder="请选择类别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目:" prop="priceItem">
+              <el-select
+                v-model.trim="formInline.priceItem"
+                clearable
+                placeholder="请选择项目"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in priceItemOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="依据标准:" prop="priceStandard">
+              <el-input
+                v-model.trim="formInline.priceStandard"
+                clearable
+                placeholder="依据标准"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="依据标准:" label-width="110">
-            <el-input
-              v-model.trim="formInline.priceStandard"
-              style="width: 18vw;"
-              clearable
-              placeholder="依据标准"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="标准价格（元):" label-width="110">
-            <el-input
-              v-model.trim="formInline.price"
-              clearable
-              placeholder="标准价格（元)"
-              size="default"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="限制范围:" label-width="110">
-            <el-input
-              v-model="formInline.priceLimit"
-              placeholder="限制范围"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-          <el-form-item label="说明:">
-            <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
-        <div>
-          <el-form-item label="业务员折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.operatorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in operatorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="标准价格（元):" prop="price">
+              <el-input
+                v-model.trim="formInline.price"
+                clearable
+                placeholder="标准价格（元)"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="负责人折扣权限:" label-width="auto">
-            <el-select
-              v-model.trim="formInline.directorDiscountPermission"
-              style="width: 26vw;"
-              clearable
-              placeholder="业务员折扣权限"
-              size="default"
-              :disabled="buttonType === '详情'"
-            >
-              <el-option
-                v-for="item in directorDiscountPermissionOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.value"
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="限制范围:">
+              <el-input
+                v-model="formInline.priceLimit"
+                placeholder="限制范围"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:" label-width="110">
-            <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="说明:">
+              <el-input v-model="formInline.priceDescription" placeholder="说明" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="业务员折扣权限:" prop="operatorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.operatorDiscountPermission"
+                clearable
+                placeholder="请选择业务员折扣权限"
+                style="width: 200%;"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in operatorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="负责人折扣权限:" prop="directorDiscountPermission">
+              <el-select
+                v-model.trim="formInline.directorDiscountPermission"
+                clearable
+                style="width: 200%;"
+                placeholder="请选择负责人折扣权限"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in directorDiscountPermissionOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input v-model="formInline.remark" placeholder="备注" :disabled="buttonType === '详情'" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
+    </detail-page>
   </app-container>
 </template>
 
diff --git a/src/views/measure/source/components/listPage.vue b/src/views/measure/source/components/listPage.vue
index 70a3518..2a0169b 100644
--- a/src/views/measure/source/components/listPage.vue
+++ b/src/views/measure/source/components/listPage.vue
@@ -120,7 +120,7 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  buttonArray.value = value === '编辑' ? ['提交'] : ['同意', '驳回', '拒绝']
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/source/components/listPageAdd.vue b/src/views/measure/source/components/listPageAdd.vue
index d20c2cd..edd9de9 100644
--- a/src/views/measure/source/components/listPageAdd.vue
+++ b/src/views/measure/source/components/listPageAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -22,7 +22,7 @@
   },
 })
 const emit = defineEmits(['close'])
-const formInline: Ref<IformInline> = ref({
+const formInline = ref({
   businessContent: null,
   supplierName: null,
   supplierNo: null,
@@ -54,6 +54,7 @@
   website: null,
   traceSupplierPersonList: [],
 })
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '人员编号', value: 'personNo' },
   { text: '姓名', value: 'name' },
@@ -61,6 +62,12 @@
   { text: '职务', value: 'job' },
   { text: '联系方式', value: 'phone' },
 ]
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const provinceList = ref([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref([])
@@ -83,7 +90,7 @@
 }
 const getInfo = () => {
   getSoucreListDetail({ id: props.infoId }).then((res) => {
-    formInline.value = res.data
+    // formInline.value = res.data
   })
 }
 // 表格选中
@@ -157,27 +164,30 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (type === '提交' && props.buttonType === '编辑') {
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
-  else if (type === '提交' && props.buttonType === '编辑') {
+  else if (type === '提交' && props.buttonType !== '编辑') {
     formInline.value.id = props.infoId
     getSoucreLisUpdate(formInline.value).then((res) => {
       if (res.code === 200) {
@@ -252,54 +262,74 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button v-for="item in buttonArray" :key="item" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划审批-${buttonType}`">
+      <template #btns>
+        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')">
           {{ item }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -307,35 +337,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -343,105 +413,208 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -465,15 +638,6 @@
       完成
     </el-button>
   </el-dialog>
-  <!-- <el-dialog
-        title="文件预览"
-        :visible="isShow"
-        @close="isShow = false"
-        width="40%"
-        append-to-body
-      >
-        <div v-html="testForm.fileContent"></div>
-      </el-dialog> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e50226a..f5caa50 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -224,7 +224,7 @@
   upload()
 }
 const add = () => {
-  buttonType.value = ''
+  buttonType.value = '新建'
   show.value = false
 }
 const exportAll = () => {
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
index 8c45236..af0a29d 100644
--- a/src/views/measure/source/listAdd.vue
+++ b/src/views/measure/source/listAdd.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue'
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
 import type { IOptions, IformInline } from './list_interface'
 import { exportFile } from '@/utils/exportUtils'
 import { UploadFile } from '@/api/measure/file'
@@ -50,13 +50,14 @@
   website: null,
   traceSupplierPersonList: [],
 })
-const columns = [
-  { text: '人员编号', value: 'personNo' },
-  { text: '姓名', value: 'name' },
-  { text: '工作部门', value: 'department' },
-  { text: '职务', value: 'job' },
-  { text: '联系方式', value: 'phone' },
-]
+const columns = ref([
+  { text: '人员编号', value: 'personNo', show: true },
+  { text: '姓名', value: 'name', show: true },
+  { text: '工作部门', value: 'department', show: true },
+  { text: '职务', value: 'job', show: true },
+  { text: '联系方式', value: 'phone', show: true },
+])
+const ruleFormRef = ref<FormInstance>()
 const provinceList = ref<IOptions[]>([])
 const fileList = ref<UploadUserFile[]>([])
 const cityList = ref<IOptions[]>([])
@@ -74,6 +75,13 @@
 })
 const SelectionList = ref([])
 const upload = ref<UploadInstance>()
+// 校验规则
+const rules = ref({
+  supplierNo: [{ required: true, message: '溯源供方编号不能为空', trigger: 'blur' }],
+  supplierName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+  businessContent: [{ required: true, message: '业务内容不能为空', trigger: 'blur' }],
+  taxNumber: [{ required: true, message: '税号不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const close = () => {
   emit('close')
 }
@@ -92,6 +100,7 @@
     provinceList.value = res.data
   })
 }
+
 // 公司地址省级的值发生改变
 const changeProvince = (e: any) => {
   cityList.value = []
@@ -134,8 +143,14 @@
 }
 // 点击增加行
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(key => (addPersonList.value[key] = ''))
-  dialogVisible.value = true
+  const object = {
+    personNo: '',
+    name: '',
+    department: '',
+    job: '',
+    phone: '',
+  }
+  formInline.value.traceSupplierPersonList.push(object)
 }
 // 点击关闭
 const handleClose = () => {
@@ -153,44 +168,47 @@
   })
 }
 // 点击提交/导出按钮
-const getAddList = (type: string) => {
-  if (formInline.value.supplierNo === null) {
-    return ElMessage.error('请填写溯源供方编号')
-  }
-  else if (formInline.value.supplierName === null) {
-    return ElMessage.error('请填写公司名称')
-  }
-  else if (formInline.value.businessContent === null) {
-    return ElMessage.error('请填写业务内容')
-  }
-  else if (formInline.value.taxNumber === null) {
-    return ElMessage.error('请填写税号')
-  }
-  if (type === '提交' && props.buttonType !== '编辑') {
-    getSoucreListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else if (type === '提交' && props.buttonType === '编辑') {
-    formInline.value.id = props.infoId
-    getSoucreLisUpdate(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
-      }
-    })
-  }
-  else {
-    const params = {
-      businessContent: formInline.value.businessContent,
-      supplierName: formInline.value.supplierName,
-      supplierNo: formInline.value.supplierNo,
+const getAddList = async (formEl: FormInstance | undefined, type: string) => {
+  if (!formEl) { return }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ElMessageBox.confirm(
+    `确认${type}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+      ).then(() => {
+        if (type === '提交' && props.buttonType !== '编辑') {
+          getSoucreListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else if (type === '提交' && props.buttonType === '编辑') {
+          formInline.value.id = props.infoId
+          getSoucreLisUpdate(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        }
+        else {
+          const params = {
+            businessContent: formInline.value.businessContent,
+            supplierName: formInline.value.supplierName,
+            supplierNo: formInline.value.supplierNo,
+          }
+          getSoucreLisListExport(params).then((res) => {
+            exportFile(res.data, '溯源供方详情')
+          })
+        }
+      })
     }
-    getSoucreLisListExport(params).then((res) => {
-      exportFile(res.data, '溯源供方详情')
-    })
-  }
+  })
 }
 const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   ElMessage.warning('只能上传一个文件')
@@ -243,61 +261,91 @@
     }
   })
 }
-if (props.buttonType !== '') {
+// 双击表格显示输入框
+const dblclickName = (item: object) => {
+  console.log(item)
+  item.show = false
+}
+if (props.buttonType !== '新建') {
   getInfo()
 }
 </script>
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        基本信息
-      </h4>
-      <div>
-        <el-button type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          type="primary"
+          @click="
+            getAddList(ruleFormRef, buttonType === '详情' ? '导出' : '提交')
+          "
+        >
           {{ buttonType === '详情' ? '导出' : '提交' }}
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="100"
-        label-position="left"
+        label-width="auto"
+        label-position="right"
+        :rules="rules"
       >
-        <div class="content-top">
-          <span>
-            <el-form-item label="溯源供方编号:">
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="溯源供方编号:" prop="supplierNo">
               <el-input
                 v-model="formInline.supplierNo"
-                :placeholder="buttonType === '详情' ? '无' : '请输入溯源供方编号'"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入溯源供方编号'
+                "
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
-            <el-form-item label="税号:">
-              <el-input v-model="formInline.taxNumber" :placeholder="buttonType === '详情' ? '无' : '请输入税号'" :disabled="buttonType === '详情'" />
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="税号:" prop="taxNumber">
+              <el-input
+                v-model="formInline.taxNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入税号'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮编:">
-              <el-input v-model="formInline.postalCode" :placeholder="buttonType === '详情' ? '无' : '请输入邮编'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.postalCode"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮编'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="手机:">
-              <el-input v-model="formInline.mobile" :placeholder="buttonType === '详情' ? '无' : '请输入手机'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mobile"
+                :placeholder="buttonType === '详情' ? '无' : '请输入手机'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="公司名称:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="公司名称:" prop="supplierName">
               <el-input
                 v-model="formInline.supplierName"
                 :placeholder="buttonType === '详情' ? '无' : '请输入公司名称'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账户名:">
               <el-input
                 v-model="formInline.bankAccount"
@@ -305,35 +353,75 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="负责人:">
-              <el-input v-model="formInline.director" :placeholder="buttonType === '详情' ? '无' : '请输入负责人'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="邮箱:">
-              <el-input v-model="formInline.mailbox" :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.mailbox"
+                :placeholder="buttonType === '详情' ? '无' : '请输入邮箱'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
             <el-form-item label="公司简称:">
-              <el-input v-model="formInline.briefName" :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.briefName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入公司简称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行名称:">
-              <el-input v-model="formInline.bankName" :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.bankName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入银行名称'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="电话:">
-              <el-input v-model="formInline.phone" :placeholder="buttonType === '详情' ? '无' : '请输入电话'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.phone"
+                :placeholder="buttonType === '详情' ? '无' : '请输入电话'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="网址:">
-              <el-input v-model="formInline.website" :placeholder="buttonType === '详情' ? '无' : '请输入网址'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.website"
+                :placeholder="buttonType === '详情' ? '无' : '请输入网址'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-          <span>
-            <el-form-item label="业务内容:">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="业务内容:" prop="businessContent">
               <el-input
                 v-model="formInline.businessContent"
                 :placeholder="buttonType === '详情' ? '无' : '请输入业务内容'"
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="银行账号:">
               <el-input
                 v-model="formInline.bankAccountNumber"
@@ -341,128 +429,232 @@
                 :disabled="buttonType === '详情'"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="传真:">
-              <el-input v-model="formInline.fax" :placeholder="buttonType === '详情' ? '无' : '请输入传真'" :disabled="buttonType === '详情'" />
+              <el-input
+                v-model="formInline.fax"
+                :placeholder="buttonType === '详情' ? '无' : '请输入传真'"
+                :disabled="buttonType === '详情'"
+              />
             </el-form-item>
-          </span>
-        </div>
-        <div class="info-dizhi">
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="公司地址:">
-            <el-select v-model="formInline.companyCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.companyProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getCompanyAddress('0')" @change="changeProvince">
-              <el-option v-for="province in provinceList" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.companyCity" placeholder="市" :disabled="buttonType === '详情'" @change="cityChange">
-              <el-option v-for="city in cityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.companyArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.companyAddress"
-              placeholder="公司详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getCompanyAddress('0')"
+                @change="changeProvince"
+              >
+                <el-option
+                  v-for="province in provinceList"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="cityChange"
+              >
+                <el-option
+                  v-for="city in cityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.companyArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.companyAddress"
+                placeholder="公司详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <div class="info-dizhi">
+        </el-row>
+        <el-row :gutter="24" class="marg">
           <el-form-item label="开票地址:">
-            <el-select v-model="formInline.invoiceCountry" placeholder="国别" :disabled="buttonType === '详情'">
-              <el-option label="中国" value="中国" />
-            </el-select>
-            <el-select v-model="formInline.invoiceProvince" placeholder="省" :disabled="buttonType === '详情'" @click="getinvoiceProvinceList('0')" @change="changeInvoice">
-              <el-option v-for="province in invoiceProvince" :key="province.id" :label="province.areaName" :value="province.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceCity" placeholder="市" :disabled="buttonType === '详情'" @change="invoiceCityChange">
-              <el-option v-for="city in invoiceCityList" :key="city.id" :label="city.areaName" :value="city.id" />
-            </el-select>
-            <el-select v-model="formInline.invoiceArea" placeholder="区/县" :disabled="buttonType === '详情'">
-              <el-option v-for="area in areaInvoiceList" :key="area.id" :label="area.areaName" :value="area.id" />
-            </el-select>
-            <el-input
-              v-model="formInline.invoiceAddress"
-              placeholder="开票详细地址"
-              :disabled="buttonType === '详情'"
-            />
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCountry"
+                placeholder="国别"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option label="中国" value="中国" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceProvince"
+                placeholder="省"
+                :disabled="buttonType === '详情'"
+                @click="getinvoiceProvinceList('0')"
+                @change="changeInvoice"
+              >
+                <el-option
+                  v-for="province in invoiceProvince"
+                  :key="province.id"
+                  :label="province.areaName"
+                  :value="province.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceCity"
+                placeholder="市"
+                :disabled="buttonType === '详情'"
+                @change="invoiceCityChange"
+              >
+                <el-option
+                  v-for="city in invoiceCityList"
+                  :key="city.id"
+                  :label="city.areaName"
+                  :value="city.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select
+                v-model="formInline.invoiceArea"
+                placeholder="区/县"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="area in areaInvoiceList"
+                  :key="area.id"
+                  :label="area.areaName"
+                  :value="area.id"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="8">
+              <el-input
+                v-model="formInline.invoiceAddress"
+                placeholder="开票详细地址"
+                :disabled="buttonType === '详情'"
+              />
+            </el-col>
           </el-form-item>
-        </div>
-        <span class="input-width">
-          <el-form-item label="公司业务范围:">
-            <el-input
-              v-model="formInline.businessScope"
-              :placeholder="buttonType === '详情' ? '无' : '请输入公司业务范围'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <span class="input-width">
-          <el-form-item label="备注:">
-            <el-input v-model="formInline.remark" :placeholder="buttonType === '详情' ? '无' : '请输入备注'" :disabled="buttonType === '详情'" />
-          </el-form-item>
-        </span>
-        <div class="info-appendix">
-          <el-form-item label="附件:">
-            <el-upload
-              v-model:file-list="fileList"
-              enctype="multipart/form-data"
-              :http-request="uploadQuarterlyEvaluateFile"
-              :before-remove="beforeRemove"
-              :on-exceed="handleExceed"
-              :on-preview="uploadShow"
-              :on-change="handleFileChange"
-              :limit="1"
-            >
-              <el-button :disabled="buttonType === '详情'">
-                上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
-        </div>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="公司业务范围:">
+              <el-input
+                v-model="formInline.businessScope"
+                :placeholder="
+                  buttonType === '详情' ? '无' : '请输入公司业务范围'
+                "
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="14">
+            <el-form-item label="附件:">
+              <el-upload
+                v-model:file-list="fileList"
+                enctype="multipart/form-data"
+                :http-request="uploadQuarterlyEvaluateFile"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :on-preview="uploadShow"
+                :on-change="handleFileChange"
+                :limit="1"
+              >
+                <el-button type="primary" :disabled="buttonType === '详情'">
+                  上传
+                </el-button>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button
+          type="info"
+          :disabled="buttonType === '详情'"
+          @click="deleteList"
+        >
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button
+          type="primary"
+          :disabled="buttonType === '详情'"
+          @click="addRoow"
+        >
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table :data="formInline.traceSupplierPersonList" border style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.traceSupplierPersonList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        >
+          <template #default="scope">
+            <span v-show="item.show" style="color: gray;" @dblclick="dblclickName(item)">{{ scope.row[item.value] || `双击编辑${item.text}` }}</span>
+            <el-input v-show="!item.show" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" @blur="item.show = true" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item v-for="column in columns" :key="column.value" :label="column.text" :prop="addPersonList[column.value]">
-        <el-input v-model="addPersonList[column.value]" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/components/listPage.vue b/src/views/measure/train/components/listPage.vue
index c0eb859..98d50ad 100644
--- a/src/views/measure/train/components/listPage.vue
+++ b/src/views/measure/train/components/listPage.vue
@@ -147,7 +147,12 @@
 }
 // 点击编辑/详情
 const handleEdit = (index: string, row: rowReturn, value: string) => {
-  buttonArray.value = ['同意', '驳回', '拒绝']
+  if (value === '查看') {
+    buttonArray.value = ['同意', '驳回', '拒绝']
+  }
+  else {
+    buttonArray.value = ['提交']
+  }
   buttonType.value = value
   infoId.value = row.id
   show.value = false
diff --git a/src/views/measure/train/components/listPageAdd.vue b/src/views/measure/train/components/listPageAdd.vue
index ebbc451..b067e3d 100644
--- a/src/views/measure/train/components/listPageAdd.vue
+++ b/src/views/measure/train/components/listPageAdd.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
 import {
   getDeptTree,
   getListAdd,
@@ -41,6 +43,7 @@
 })
 // 主管部门下拉框
 const options = ref([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -48,6 +51,20 @@
   { text: '签到时间', value: 'signTime', type: '下拉' },
 ]
 const dialogVisible = ref(false)
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptName: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
 const addPersonList = ref({
   company: '',
   examResult: '',
@@ -107,11 +124,26 @@
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -143,159 +175,185 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
-        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(buttonType === '详情' ? '导出' : '提交')">
-          {{ item }}
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
+        <el-button
+          v-print="buttonType === '详情' ? printObj : ''"
+          type="primary"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
+        >
+          {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
-        <el-button type="warning" plain @click="close">
+        <el-button v-if=" buttonType === '编辑'" type="primary">
+          保存
+        </el-button>
+        <el-button type="warning" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptName">
+              <el-select
+                v-model="formInline.deptName"
+                clearable
+                placeholder="主管部门"
+                size="default"
+                :disabled="buttonType === '详情'"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
diff --git a/src/views/measure/train/components/userListDialog.vue b/src/views/measure/train/components/userListDialog.vue
new file mode 100644
index 0000000..55e33e2
--- /dev/null
+++ b/src/views/measure/train/components/userListDialog.vue
@@ -0,0 +1,131 @@
+<!-- 用户列表弹窗 -->
+<script lang="ts" setup name="selectPerson">
+import { ElMessage } from 'element-plus'
+import { getUserList } from '@/api/system/user'
+import { getDeptTreeList } from '@/api/system/dept'
+import type { TreeStructure } from '@/views/system/user/user-interface'
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+})
+const emits = defineEmits(['add'])
+const dialogFormVisible = ref(false)
+
+// 查询条件
+const listQuery = ref({
+  name: '', // 姓名
+})
+const loadingTable = ref<boolean>(false)
+const total = ref<number>(0)
+const select = ref<number>(-1)
+const columns = ref([
+  {
+    text: '姓名',
+    value: 'name',
+  },
+  {
+    text: '单位名称',
+    value: 'company',
+  },
+  {
+    text: '技术职称',
+    value: 'remark',
+  },
+  {
+    text: '签到时间',
+    value: 'signTime',
+  },
+  {
+    text: '考核结果',
+    value: 'examResult',
+  },
+])
+const list = ref(props.list || [])
+// 搜索
+const search = () => {
+  list.value = props.list.filter(item => item.name === listQuery.value.name)
+}
+const changePage = (e: any) => {
+  console.log(e)
+}
+// 重置
+const reset = () => {
+  listQuery.value = {
+    name: '', // 姓名
+  }
+  list.value = props.list
+}
+// 点击保存
+const submitForm = () => {
+  console.log(select.value)
+  if (select.value >= 0) {
+    const person = list.value.filter((item, index) => index == select.value)[0]
+    emits('add', person)
+    dialogFormVisible.value = false
+  }
+  else {
+    ElMessage.warning('请先选择人员')
+  }
+}
+// 监听数据变化
+watch(
+  [() => props.list], ([newNums], [oldNums]) => {
+    list.value = newNums
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 取消
+const resetForm = () => {
+  dialogFormVisible.value = false
+}
+// 初始化
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({ initDialog })
+</script>
+
+<template>
+  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择人员">
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="search" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.name" placeholder="真实姓名" clearable />
+      </search-item>
+    </search-area>
+    <!-- 查询结果Table显示 -->
+    <div style="padding: 12px;">
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery"
+        :list-loading="loadingTable"
+      >
+        <template #preColumns>
+          <el-table-column label="选择" width="55" align="center">
+            <template #default="scope">
+              <el-radio v-model="select" :label="scope.$index" class="radio" />
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确认</el-button>
+        <el-button @click="resetForm">
+          取消
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-radio__label) {
+  display: none;
+}
+</style>
diff --git a/src/views/measure/train/planAdd.vue b/src/views/measure/train/planAdd.vue
index 9d717c0..76ed102 100644
--- a/src/views/measure/train/planAdd.vue
+++ b/src/views/measure/train/planAdd.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import userListDialog from '../person/components/userListDialog.vue'
 import type { IOptions } from './plan_interface'
+import DeptSelect from '@/components/DeptSelect/index.vue'
 import {
   getDeptTree,
   getListAdd,
@@ -35,8 +39,7 @@
   trainStaffList: [],
   trainTime: null,
 })
-// 主管部门下拉框
-const options = ref<IOptions[]>([])
+const ruleFormRef = ref<FormInstance>()
 const columns = [
   { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
@@ -55,21 +58,29 @@
   technologyJob: '',
 })
 const SelectionList = ref([])
-// 获取到组织信息
-const getDept = () => {
-  const params = {
-    roleId: '',
-    deptType: '',
-    tips: '',
-  }
-  getDeptTree(params).then((response) => {
-    options.value = response.data
-  })
-}
-getDept()
+// 校验规则
+const rules = ref({
+  planNo: [{ required: true, message: '计划编号不能为空', trigger: 'blur' }],
+  planName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '主管部门不能为空', trigger: 'blur' }],
+  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: 'blur' }],
+  director: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  trainContent: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+// 关闭新增页面的回调
 const close = () => {
   emit('close')
 }
+const userListRef = ref()
+// 选择人员
+const selectPerson = () => {
+  userListRef.value.initDialog()
+}
 const addRoow = () => {
   Object.keys(addPersonList.value).forEach(
     key => (addPersonList.value[key] = ''),
@@ -95,19 +106,40 @@
     },
   )
 }
+// 多选框选择
 const handleSelectionChange = (e: any) => {
   SelectionList.value = e
 }
+// 选择完负责人的函数
+const confirmPerson = (object: object) => {
+  console.log(object)
+  formInline.value.director = object.name
+}
 if (props.infoId && props.infoId !== '') {
   getListDetail({ id: props.infoId }).then((res) => {
     formInline.value = res.data
   })
 }
-const getAddList = (buttonType: string) => {
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
@@ -139,166 +171,178 @@
 
 <template>
   <app-container>
-    <div class="top-info">
-      <h4 class="title">
-        培训计划
-      </h4>
-      <div>
+    <detail-page :title="`培训计划-${buttonType}`">
+      <template #btns>
         <el-button
           v-print="buttonType === '详情' ? printObj : ''"
           type="primary"
-          @click="getAddList(buttonType === '详情' ? '打印' : '提交')"
+          @click="getAddList(ruleFormRef, buttonType === '详情' ? '打印' : '提交')"
         >
           {{ buttonType === '详情' ? '打印' : '提交' }}
         </el-button>
         <el-button v-if=" buttonType === '编辑'" type="primary">
           保存
         </el-button>
-        <el-button type="warning" @click="close">
+        <el-button type="info" @click="close">
           关闭
         </el-button>
-      </div>
-    </div>
-    <div class="info-content">
+      </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        :rules="rules"
+        label-width="auto"
+        label-position="right"
       >
-        <el-form-item label="计划编号:">
-          <el-input
-            v-model="formInline.planNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.planName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="time">
-          <el-form-item label="培训时间:" label-width="auto">
-            <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="培训时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <el-form-item label="培训学时:" label-width="auto">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="主管部门:" label-width="auto">
-          <el-select
-            v-model="formInline.deptName"
-            clearable
-            placeholder="主管部门"
-            size="default"
-            :disabled="buttonType === '详情'"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实施单位:" label-width="auto">
-          <el-input
-            v-model="formInline.effectiveCompany"
-            :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="负责人:">
-          <el-input
-            v-model="formInline.director"
-            :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <span class="input-width">
-          <el-form-item label="培训内容:">
-            <el-input
-              v-model="formInline.trainContent"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </span>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="计划编号:" prop="planNo">
+              <el-input
+                v-model="formInline.planNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入计划编号'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="planName">
+              <el-input
+                v-model="formInline.planName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="主管部门:" prop="deptId">
+              <dept-select ref="deptSelect" v-model="formInline.deptId" :dept-show="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="实施单位:" prop="effectiveCompany">
+              <el-input
+                v-model="formInline.effectiveCompany"
+                :placeholder="buttonType === '详情' ? '无' : '请输入实施单位'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="负责人:" prop="director">
+              <el-input
+                v-model="formInline.director"
+                :placeholder="buttonType === '详情' ? '无' : '请输入负责人'"
+                :disabled="buttonType === '详情'"
+              >
+                <template #append>
+                  <el-button size="small" :disabled="buttonType === '详情'" @click="selectPerson">
+                    选择
+                  </el-button>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="培训内容:" prop="trainContent">
+              <el-input
+                v-model="formInline.trainContent"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训内容'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-    </div>
-    <div class="table-top">
-      <div class="table-top-title">
-        人员信息
-      </div>
-      <div v-if="buttonType !== '详情'" class="table-top-button">
-        <el-button :disabled="buttonType === '详情'" @click="deleteList">
+    </detail-page>
+    <detail-block title="人员信息">
+      <template #btns>
+        <el-button v-if="buttonType !== '详情'" type="info" @click="deleteList">
           删除行
         </el-button>
-        <el-button :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" @click="addRoow">
           增加行
         </el-button>
-      </div>
-    </div>
-    <el-table
-      :data="formInline.trainStaffList"
-      border
-      style="width: 100%;"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column align="center" label="序号" width="80" type="index" />
-      <el-table-column
-        v-for="item in columns"
-        :key="item.value"
-        :prop="item.value"
-        :label="item.text"
-      />
-    </el-table>
+      </template>
+      <el-table
+        :data="formInline.trainStaffList"
+        border
+        style="width: 100%;"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="item in columns"
+          :key="item.value"
+          :prop="item.value"
+          :label="item.text"
+        />
+      </el-table>
+    </detail-block>
   </app-container>
   <el-dialog
     v-model="dialogVisible"
@@ -338,6 +382,8 @@
       完成
     </el-button>
   </el-dialog>
+  <!-- 选择用户列表组件 -->
+  <user-list-dialog ref="userListRef" @add="confirmPerson" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/measure/train/trainLogAdd.vue b/src/views/measure/train/trainLogAdd.vue
index f4a66b1..32422e1 100644
--- a/src/views/measure/train/trainLogAdd.vue
+++ b/src/views/measure/train/trainLogAdd.vue
@@ -1,5 +1,9 @@
 <script lang="ts" setup name="PlanAdd">
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import type { IOptions } from './plan_interface'
+import userListDialog from './components/userListDialog.vue'
+import useUserStore from '@/store/modules/user.ts'
 import {
   getListDetail,
   getListLogAdd,
@@ -19,10 +23,12 @@
   },
 })
 const emit = defineEmits(['close'])
+const { name } = useUserStore()
+const ruleFormRef = ref<FormInstance>()
 const formInline = ref({
   improveMethod: '',
   logNo: '',
-  preparer: '',
+  preparer: name || '',
   problems: '',
   planId: '',
   remark: '',
@@ -39,13 +45,31 @@
 // 主管部门下拉框
 const options = ref<IOptions[]>([])
 const dialogVisible = ref(false)
+// 下面列表用的
+const trainList = ref([])
 const columns = [
-  { text: '学员名称', value: 'name' },
+  // { text: '学员名称', value: 'name' },
   { text: '单位名称', value: 'company' },
   { text: '技术职称', value: 'technologyJob' },
   { text: '签到时间', value: 'signTime' },
   { text: '考核结果', value: 'examResult' },
 ]
+// 校验规则
+const rules = ref({
+  logNo: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
+  preparer: [{ required: true, message: '填表人不能为空', trigger: 'blur' }],
+  planId: [{ required: true, message: '计划编号必选', trigger: 'blur' }],
+  trainName: [{ required: true, message: '培训名称不能为空', trigger: 'blur' }],
+  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: 'blur' }],
+  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: 'blur' }],
+  trainHour: [{ required: true, message: '培训学时不能为空', trigger: 'blur' }],
+  trainTime: [{ required: true, message: '培训时间不能为空', trigger: 'blur' }],
+  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
+  trainEffect: [{ required: true, message: '培训效果不能为空', trigger: 'blur' }],
+  problems: [{ required: true, message: '存在问题不能为空', trigger: 'blur' }],
+  improveMethod: [{ required: true, message: '改进措施不能为空', trigger: 'blur' }],
+}) // 表单验证规则
+const userListRef = ref()
 const addPersonList = ref({
   company: '',
   examResult: '',
@@ -58,6 +82,8 @@
 })
 const SelectionList = ref([])
 const ListDetail = ref([])
+// 控制是否显示输入框开关
+const isNameShow = ref(true)
 // 获取到组织信息
 const getDept = () => {
   const params = {
@@ -76,33 +102,39 @@
   emit('close')
 }
 const addRoow = () => {
-  Object.keys(addPersonList.value).forEach(
-    key => (addPersonList.value[key] = ''),
-  )
-  dialogVisible.value = true
+  if (formInline.value.planId === '') {
+    return ElMessage.warning('还未选择计划编号')
+  }
+  const object = {
+    company: '',
+    examResult: '',
+    name: '',
+    remark: '',
+    signTime: '',
+    technologyJob: '',
+    planId: 0,
+    staffId: 0,
+    isNameShow: false,
+  }
+  trainList.value.push(object)
 }
 // 点击关闭
 const handleClose = () => {
   dialogVisible.value = false
 }
+// 选择人员编号
 const selectChange = (e: any) => {
   const id = options.value.filter(item => item.id === e)[0].id
   getListDetail({ id }).then((res) => {
     ListDetail.value = res.data.trainStaffList
+    res.data.preparer = name
     formInline.value = { ...res.data }
     formInline.value.planId = e
   })
 }
-// 点击弹窗的完成追加到表格数组中
-const addPushList = () => {
-  formInline.value.trainStaffList.push(
-    JSON.parse(JSON.stringify(addPersonList.value)),
-  )
-  handleClose()
-}
 // 删除行
 const deleteList = () => {
-  formInline.value.trainStaffList = formInline.value.trainStaffList.filter(
+  trainList.value = trainList.value.filter(
     (item) => {
       return !SelectionList.value.includes(item)
     },
@@ -117,17 +149,38 @@
 if (props.infoId && props.infoId !== '') {
   getListLogDetail({ id: props.infoId }).then((res) => {
     formInline.value = res.data
+    trainList.value = formInline.value.trainStaffList
   })
 }
-const getAddList = (buttonType: string) => {
+// 双击表格中默认显示的name
+const dblclickName = (row: object) => {
+  row.isNameShow = true
+}
+const getAddList = async (formEl: FormInstance | undefined, buttonType: string) => {
   if (buttonType === '提交' && props.buttonType !== '编辑') {
-    getListLogAdd(formInline.value).then((res) => {
-      if (res.code === 200) {
-        close()
+    if (!formEl) { return }
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        ElMessageBox.confirm(
+    `确认${buttonType}吗？`,
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+        ).then(() => {
+          getListLogAdd(formInline.value).then((res) => {
+            if (res.code === 200) {
+              close()
+            }
+          })
+        })
       }
     })
   }
   else if (buttonType === '提交' && props.buttonType === '编辑') {
+    formInline.value.trainStaffList = trainList.value
     formInline.value.trainStaffList.map((item) => {
       delete item.updateTime
       delete item.createTime
@@ -151,6 +204,22 @@
     })
   }
 }
+const listIndex = ref(0)
+// 选择人员
+const selectPerson = (index: number) => {
+  userListRef.value.initDialog()
+  listIndex.value = index
+}
+// 选择完负责人的函数
+const confirmPerson = (object: object) => {
+  if (!trainList.value.includes(object)) {
+    trainList.value[listIndex.value] = object
+  }
+  else {
+    ElMessage.warning('该学员已经存在')
+    trainList.value.splice(listIndex.value, 1)
+  }
+}
 </script>
 
 <template>
@@ -160,11 +229,11 @@
         <el-button
           v-if=" buttonType !== '详情'"
           type="primary"
-          @click="getAddList('提交')"
+          @click="getAddList(ruleFormRef, '提交')"
         >
           提交
         </el-button>
-        <el-button v-if=" buttonType === '详情'" v-print="printObj" type="primary" @click="getAddList('打印')">
+        <el-button v-if=" buttonType === '详情'" v-print="printObj" type="primary" @click="getAddList(ruleFormRef, '打印')">
           打印
         </el-button>
         <el-button v-if=" buttonType === '详情'" type="primary" @click="buttonType = '编辑'">
@@ -175,203 +244,196 @@
         </el-button>
       </template>
       <el-form
-        :inline="true"
+        ref="ruleFormRef"
         :model="formInline"
         class="demo-form-inline"
-        label-width="80"
-        label-position="left"
+        label-position="right"
+        label-width="100"
+        :rules="rules"
       >
-        <el-form-item label="编号:">
-          <el-input
-            v-model="formInline.logNo"
-            :placeholder="buttonType === '详情' ? '无' : '请输入编号'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="填表人:">
-          <el-input
-            v-model="formInline.preparer"
-            :placeholder="buttonType === '详情' ? '无' : '请输入填表人'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <!-- <el-form-item label="创建时间:">
-          <el-date-picker
-              v-model="formInline.trainTime"
-              type="datetime"
-              placeholder="创建时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD h:m:s"
-              :disabled="buttonType === '详情'"
-            />
-        </el-form-item> -->
-        <span v-if="infoId === ''">
-          <el-form-item label="计划编号:">
-            <el-select
-              v-model="formInline.planName"
-              clearable
-              placeholder="计划编号"
-              size="default"
-              :disabled="buttonType === '详情'"
-              @change="selectChange"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.id"
-                :label="item.planName"
-                :value="item.id"
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="编号:" prop="logNo">
+              <el-input
+                v-model="formInline.logNo"
+                :placeholder="buttonType === '详情' ? '无' : '请输入编号'"
+                :disabled="buttonType === '详情'"
               />
-            </el-select>
-          </el-form-item>
-        </span>
-        <el-form-item label="培训名称:">
-          <el-input
-            v-model="formInline.trainName"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训对象:">
-          <el-input
-            v-model="formInline.trainPerson"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训人数:">
-          <el-input
-            v-model="formInline.trainNumber"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训学时:">
-          <el-input
-            v-model="formInline.trainHour"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训时间:">
-          <el-date-picker
-            v-model="formInline.trainTime"
-            type="datetime"
-            placeholder="培训时间"
-            format="YYYY/MM/DD HH:mm:ss"
-            value-format="YYYY-MM-DD h:m:s"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <el-form-item label="培训地点:">
-          <el-input
-            v-model="formInline.trainAddress"
-            :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
-            :disabled="buttonType === '详情'"
-          />
-        </el-form-item>
-        <div class="input-width">
-          <el-form-item label="培训效果:">
-            <el-input
-              v-model="formInline.trainEffect"
-              :placeholder="buttonType === '详情' ? '无' : '请输入培训效果'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="存在问题:">
-            <el-input
-              v-model="formInline.problems"
-              :placeholder="buttonType === '详情' ? '无' : '请输入存在问题'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="改进措施:">
-            <el-input
-              v-model="formInline.improveMethod"
-              :placeholder="buttonType === '详情' ? '无' : '请输入改进措施'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
-        <div class="input-width">
-          <el-form-item label="备注:">
-            <el-input
-              v-model="formInline.remark"
-              :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
-              :disabled="buttonType === '详情'"
-            />
-          </el-form-item>
-        </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="填表人:" prop="preparer">
+              <el-input
+                v-model="formInline.preparer"
+                :placeholder="buttonType === '详情' ? '无' : '请输入填表人'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <span v-if="infoId === ''">
+              <el-form-item label="计划编号:" prop="planId">
+                <el-select
+                  v-model="formInline.planId"
+                  clearable
+                  placeholder="计划编号"
+                  size="default"
+                  :disabled="buttonType === '详情'"
+                  @change="selectChange"
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.id"
+                    :label="item.planName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </span>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训名称:" prop="trainName">
+              <el-input
+                v-model="formInline.trainName"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训名称'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="6">
+            <el-form-item label="培训对象:" prop="trainPerson">
+              <el-input
+                v-model="formInline.trainPerson"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训对象'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训人数:" prop="trainNumber">
+              <el-input
+                v-model="formInline.trainNumber"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训人数'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训学时:" prop="trainHour">
+              <el-input
+                v-model="formInline.trainHour"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训学时'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="培训时间:" prop="trainTime">
+              <el-date-picker
+                v-model="formInline.trainTime"
+                type="datetime"
+                placeholder="培训时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD h:m:s"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="培训地点:" prop="trainAddress">
+              <el-input
+                v-model="formInline.trainAddress"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训地点'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="培训效果:" prop="trainEffect">
+              <el-input
+                v-model="formInline.trainEffect"
+                :placeholder="buttonType === '详情' ? '无' : '请输入培训效果'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="存在问题:" prop="problems">
+              <el-input
+                v-model="formInline.problems"
+                :placeholder="buttonType === '详情' ? '无' : '请输入存在问题'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="改进措施:" prop="improveMethod">
+              <el-input
+                v-model="formInline.improveMethod"
+                :placeholder="buttonType === '详情' ? '无' : '请输入改进措施'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" class="marg">
+          <el-col :span="12">
+            <el-form-item label="备注:">
+              <el-input
+                v-model="formInline.remark"
+                :placeholder="buttonType === '详情' ? '无' : '请输入备注'"
+                :disabled="buttonType === '详情'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </detail-page>
     <detail-block title="人员信息">
       <template #btns>
-        <el-button v-if="buttonType !== '详情'" :disabled="buttonType === '详情'" @click="deleteList">
+        <el-button v-if="buttonType !== '详情'" type="info" :disabled="buttonType === '详情'" @click="deleteList">
           删除行
         </el-button>
-        <el-button v-if="buttonType !== '详情'" :disabled="buttonType === '详情'" @click="addRoow">
+        <el-button v-if="buttonType !== '详情'" type="primary" :disabled="buttonType === '详情'" @click="addRoow">
           增加行
         </el-button>
       </template>
       <el-table
-        :data="formInline.trainStaffList"
+        :data="trainList"
         border
         style="width: 100%;"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column align="center" label="序号" width="80" type="index" />
-        <el-table-column
-          v-for="item in columns"
-          :key="item.value"
-          :prop="item.value"
-          :label="item.text"
-        />
+        <el-table-column align="center" label="学员名称">
+          <template #default="scope">
+            <span v-show="!scope.row.isNameShow" style="color: gray;" @dblclick="dblclickName(scope.row)">{{ scope.row.name || '双击选择' }}</span>
+            <el-input v-show="scope.row.isNameShow" v-model="scope.row.name" placeholder="请选择" class="input">
+              <template #append>
+                <el-button size="small" :disabled="buttonType === '详情'" @click="selectPerson(scope.$index)">
+                  选择
+                </el-button>
+              </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, index) in columns" :key="index" align="center" :label="item.text" :prop="item.value" />
       </el-table>
     </detail-block>
   </app-container>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员信息"
-    width="30%"
-    :before-close="handleClose"
-    center
-  >
-    <el-form
-      ref="addPersonListForm"
-      label-position="left"
-      label-width="100px"
-      :model="addPersonList"
-      style="max-width: 460px;"
-    >
-      <el-form-item label="学员名称">
-        <el-select
-          v-model="addPersonList.planId"
-          clearable
-          placeholder="计划编号"
-          size="default"
-          :disabled="buttonType === '详情'"
-          @change="addPersonListChange"
-        >
-          <el-option
-            v-for="item in ListDetail"
-            :key="item.id"
-            :label="item.name"
-            :value="item.staffId"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="考核结果">
-        <el-input v-model="addPersonList.examResult" />
-      </el-form-item>
-    </el-form>
-    <el-button type="primary" class="dialog-button" @click="addPushList">
-      完成
-    </el-button>
-  </el-dialog>
+  <!-- 选择用户列表组件 -->
+  <user-list-dialog ref="userListRef" :list="formInline.trainStaffList" @add="confirmPerson" />
 </template>
 
 <style lang="scss" scoped>