lcw

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/actualPerformance.vue

@@ -0,0 +1,305 @@
+<template>
+  <div>
+    <div class="headClass" style="">
+      <h3>现实表现</h3>
+      <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
+
+    </div>
+    <div class="headSelect">
+
+      <el-button @click="add" type="primary">新增</el-button>
+    </div>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <template #clys="{ row }">
+        <DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
+      </template>
+      <template #cllx="{ row }">
+        <DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
+      </template>
+      <template #clpp="{ row }">
+        <DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
+      </template>
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
+        <el-link type="danger" @click="updDictItem(row)">修改</el-link>
+      </template>
+    </MyTable>
+  </div>
+  <VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
+    :dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
+</template>
+
+<script setup>
+import { identityCardRule } from "@/utils/rules"
+import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import VehiclDoing from "../component/vehiclDoing.vue";
+import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbZdryClxxSelectPage, tbZdryClxxUpdate } from '@/api/zdr.js'
+import { ElMessage, ElMessageBox } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
+const chooseMarksVisible = ref(false)
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const listData = ref({})
+const addUpd = ref(true)
+watch(() => props.dataList, (val) => {
+  if (val) {
+    listData.value = val
+    gettbZdryClxxSelectPage()
+  }
+}, { deep: true })
+// 表格数据
+const pageData = reactive({
+  tableData: [],
+  tableColumn: [{
+    prop: 'cph',
+    label: '录入人员',
+  }, {
+    prop: 'cllx',
+    label: '录入时间',
+    showSolt: true,
+    prop: 'clpp',
+  }, {
+    showSolt: true,
+    prop: 'clys',
+    label: '表现内容',
+  }, {
+    showSolt: true,
+    prop: 'clpp',
+    label: '附件信息',
+  }],
+  tableHeight: '200px',
+  keyCount: 0,
+  tableConfiger: {
+    border: true,
+    stripe: true,
+    showHeader: true,
+    showIndex: true,
+    indexLabel: '序号',
+    indexWidth: 60,
+    align: 'center',
+    showOverflowTooltip: true,
+    haveControls: !props.disabled
+  },
+  controlsWidth: 200,
+})
+//  表单数据
+const formData = reactive({
+  username: "",
+  ID: ""
+})
+const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
+// 修改数据接口
+const dataModel = ref()
+const addMarks = (val) => {
+  const params = {
+    ...val,
+    zdrid: listData.value.id,
+  }
+  if (props.showBut && !props.disabled) {
+    if (addUpd.value) {
+      tbZdryClxxAdd(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆添加成功',
+          type: 'success'
+        })
+      })
+    }
+    else {
+      tbZdryClxxUpdate(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆修改成功',
+          type: 'success'
+        })
+      })
+    }
+  } else {
+    pageData.tableData.push(val)
+  }
+}
+onMounted(() => {
+
+
+})
+// 删除车辆
+const delDictItem = (val) => {
+  if (!props.disabled && props.showBut) {
+    ElMessageBox.confirm(
+      '是否删除关联车辆',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        tbZdryClxxDelete({ ids: [val] }).then(res => {
+          gettbZdryClxxSelectPage()
+          proxy.$message({
+            message: '关联车辆删除成功',
+            type: 'success'
+          })
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+  } else {
+    pageData.tableData = pageData.tableData.filter(v => v.id != val)
+  }
+
+}
+
+const updDictItem = (val) => {
+  chooseMarksVisible.value = true
+  addUpd.value = false
+  dataModel.value = val
+}
+const AddPore = () => {
+  chooseMarksVisible.value = true
+  dataModel.value = {}
+  addUpd.value = true
+}
+// 查询车辆
+const gettbZdryClxxSelectPage = () => {
+  const promes = {
+    pageCurrent: 1,
+    pageSize: 20,
+    zdrid: listData.value.id
+  }
+  tbZdryClxxSelectPage(promes).then(res => {
+    pageData.tableData = res.records
+  })
+}
+// 抛出数据并验证标签列表不为空
+const throwData = () => {
+  return new Promise((resolve) => {
+    // // 验证：确保标签列表不为空
+    // if (!pageData.tableData || pageData.tableData.length === 0) {
+    //   throw new Error('请录入车辆信息');
+    // }
+    resolve(pageData.tableData);
+  });
+}
+defineExpose({
+  throwData
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+  padding: 10px;
+}
+
+::v-deep(.el-form) {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left_box {
+  width: 200px;
+  border: 1px solid #c8c8c89a;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.right_box {
+  width: calc(100% - 230px);
+  overflow-y: auto;
+  padding: 5px;
+}
+
+::v-deep .el-form-item__content {
+  display: block !important;
+}
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 20px 0 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+
+}
+
+.headSelect {
+  width: 100%;
+  padding: 0 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: end;
+  padding-bottom: 20px;
+}
+
+/* 移除冲突样式：不要用 justify-content */
+
+/* 控制所有 el-form-item 高度和垂直居中 */
+.form-inline :deep(.el-form-item) {
+  margin-bottom: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+
+/* ✅ 按钮区域靠右，且不换行 */
+.form-inline .form-actions {
+  margin-left: auto;
+  /* 推到最右边 */
+  white-space: nowrap;
+  /* 防止按钮换行 */
+}
+
+/* 统一按钮样式，增加间距和视觉舒适度 */
+.form-inline :deep(.el-button) {
+  height: 36px;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+/* 按钮之间留出间距（除了第一个） */
+.form-inline :deep(.el-button:not(:first-child)) {
+  margin-left: 12px;
+  /* 比原来的 8px 更宽松 */
+}
+
+// .headClass::after {
+//   content: '';
+//   position: absolute;
+//   left: 0;
+//   bottom: -2px;
+//   width: 60px;
+//   height: 2px;
+//   background-color: #409eff;
+// }
+
+h3 {
+  margin: 0;
+}
+</style>

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/bakInfo.vue

@@ -2,22 +2,65 @@
 
   <div class="backinfo-container">
     <div class="headClass" style="">
-      <h3>群体信息</h3>
+      <h3>背景信息</h3>
       <el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
     </div>
-    <div>
+    <!-- <div>
       <div>拘留记录：</div>
       <div  v-for="(item,index) in jljl" :key="index">
         <el-input v-model="jljl[index]" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
           class="background-info-input" :disabled="disabled" /></div>
+    </div> -->
+    <div>
+      <!-- 全部输入框 -->
+      <el-form class="record" ref="ruleFormRef" :model="ruleForm" :rules="rules">
+        <!-- 拘留所记录 -->
+        <div class="detentionFacility">
+          <div>拘留所记录：</div>
+          <div>
+            <div v-for="(item, i) in ruleForm.detentionCenterRecords" :key="item.id" class="detentionFacilityArr">
+              <el-form-item  :prop="'detentionCenterRecords.' + i + '.str'"  :rules="rules.str">
+
+                <el-input v-model="ruleForm.detentionCenterRecords[i].str" class="detentionFacilityInput"
+                  placeholder="请输入拘留所记录" />
+              </el-form-item>
+
+              <el-button type="primary"
+                v-if="ruleForm.detentionCenterRecords.length > 1 && i != ruleForm.detentionCenterRecords.length - 1"
+                @click="decreaseRecord(i, '拘留所')">−</el-button>
+              <el-button type="primary" @click="addRecord(i, '拘留所')"
+                v-if="ruleForm.detentionCenterRecords.length - 1 == i">+</el-button>
+            </div>
+          </div>
+        </div>
+        <!-- 看守所记录 -->
+        <div class="detentionFacility">
+          <div>看守所记录：</div>
+          <div>
+            <div v-for="(item, i) in ruleForm.prison" :key="item.id" class="detentionFacilityArr">
+              <el-form-item   :prop="'prison.' + i + '.str'"  :rules="rules.str">
+                <el-input v-model="ruleForm.prison[i].str" 
+                class="detentionFacilityInput" placeholder="请输入拘留所记录"
+                @input="changeprison(ruleForm.prison[i].str)"
+                />
+              </el-form-item>
+              <el-button type="primary" v-if="ruleForm.prison.length > 1 && i != ruleForm.prison.length - 1"
+                @click="decreaseRecord(i, '看守所')">−</el-button>
+              <el-button type="primary" @click="addRecord(i, '看守所')" v-if="ruleForm.prison.length - 1 == i">+</el-button>
+            </div>
+          </div>
+        </div>
+        <div class="sumbitBtnBOX">
+          <el-button type="primary" @click="submitForm(ruleFormRef)" class="sumbitBtn">确认提交</el-button>
+        </div>
+      </el-form>
     </div>
-    <div></div>
 
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { reactive, ref, watch, onMounted } from "vue";
 import { Delete, Download } from '@element-plus/icons';
 // import { tbGsxtZdryUpdate } from '@/api/zdr.js'
 const props = defineProps({
@@ -33,13 +76,28 @@ const props = defineProps({
     default: false
   },
 })
-const jljl=ref([])
+const jljl = ref([])
+const ruleFormRef = ref()
+const ruleForm = reactive({
+  detentionCenterRecords: [{ id: 0, str: "" }],
+  prison: [{ id: 0, str: "" }],
+})
+// 表单校验
+const rules = reactive({
+  str: [
+    { required: true, message: '请输入具体信息', trigger: 'blur' },
+    { min: 3, max: 20, message: '请最少输入3个字,最多输入20个字', trigger: 'blur' },
+  ],
+})
 watch(() => props.dataList, (val) => {
   if (val) {
     // qtbjxx.value = val.qtBjzl
   }
 }, { deep: true })
+onMounted(() => {
+  console.log('组件已挂载')
 
+})
 const throwData = () => {
   return new Promise((resolve) => {
     // 基本验证：确保背景信息不为空
@@ -53,6 +111,43 @@ const throwData = () => {
     });
   });
 }
+// 增加输入记录输入框
+const addRecord = (val, type) => {
+  if (type == '拘留所') {
+    ruleForm.detentionCenterRecords.push({ id: val })
+  } else {
+    ruleForm.prison.push({ id: val })
+  }
+
+}
+// 减少输入记录输入框
+const decreaseRecord = (val, type) => {
+  if (type == '拘留所') {
+    ruleForm.detentionCenterRecords.splice(val, 1)
+  } else {
+    ruleForm.prison.splice(val, 1)
+  }
+
+}
+const changeprison=(value)=>{
+  console.log(value,"jafahfahf");
+  
+}
+//提交数据校验表单
+const submitForm = async (formEl) => {
+  console.log(formEl,"formElformEl");
+  
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    console.log(valid,fields,"22222222");
+    
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+} 
 defineExpose({
   throwData
 })
@@ -64,6 +159,61 @@ defineExpose({
 
 .backinfo-container {
   padding: 10px;
+
+}
+
+.sumbitBtnBOX {
+  position: relative;
+  width: 100%;
+  height: 50px;
+
+  // background-color: saddlebrown;
+  .sumbitBtn {
+    position: absolute;
+    right: 18px;
+    bottom: 0px;
+  }
+}
+
+.backinfo-container>:nth-child(2) {
+
+  width: 100%;
+  // height: 50px;
+  justify-content: space-between;
+
+  .detentionFacility {
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+    box-sizing: border-box;
+    padding: 20px;
+    justify-content: space-between;
+  }
+
+  .detentionFacility>:nth-child(1) {
+    width: 100px;
+  }
+
+  .detentionFacility>:nth-child(2) {
+    width: 98%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .detentionFacilityArr {
+    display: flex;
+   
+    margin-top: 20px;
+    justify-content: space-between;
+
+    .el-form-item {
+      width: 93%;
+      height: 100%;
+
+
+    }
+  }
+
 }
 
 .background-info-input {

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/caseInfo.vue

@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <div class="headClass" style="">
+      <h3>案件信息</h3>
+      <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
+
+    </div>
+    <div class="headSelect">
+
+      <el-button @click="add" type="primary">新增</el-button>
+    </div>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <template #clys="{ row }">
+        <DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
+      </template>
+      <template #cllx="{ row }">
+        <DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
+      </template>
+      <template #clpp="{ row }">
+        <DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
+      </template>
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
+        <el-link type="danger" @click="updDictItem(row)">修改</el-link>
+      </template>
+    </MyTable>
+  </div>
+  <VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
+    :dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
+</template>
+
+<script setup>
+import { identityCardRule } from "@/utils/rules"
+import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import VehiclDoing from "../component/vehiclDoing.vue";
+import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryAjxxselectAjxx, tbZdryClxxUpdate } from '@/api/zdr.js'
+import { ElMessage, ElMessageBox } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
+const chooseMarksVisible = ref(false)
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const listData = ref({})
+const addUpd = ref(true)
+watch(() => props.dataList, (val) => {
+  if (val) {
+    listData.value = val
+    gettbZdryClxxSelectPage()
+  }
+}, { deep: true })
+// 表格数据
+const pageData = reactive({
+  tableData: [],
+  tableColumn: [{
+    prop: 'cph',
+    label: '案件编号',
+  }, {
+    prop: 'cllx',
+    label: '案件名称',
+    showSolt: true,
+    prop: 'clpp',
+  }, {
+    showSolt: true,
+    prop: 'clys',
+    label: '受案时间',
+  },],
+  tableHeight: '200px',
+  keyCount: 0,
+  tableConfiger: {
+    border: true,
+    stripe: true,
+    showHeader: true,
+    showIndex: true,
+    indexLabel: '序号',
+    indexWidth: 60,
+    align: 'center',
+    showOverflowTooltip: true,
+    haveControls: !props.disabled
+  },
+  controlsWidth: 200,
+})
+//  表单数据
+const formData = reactive({
+  username: "",
+  ID: ""
+})
+const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
+// 修改数据接口
+const dataModel = ref()
+const addMarks = (val) => {
+  const params = {
+    ...val,
+    zdrid: listData.value.id,
+  }
+  if (props.showBut && !props.disabled) {
+    if (addUpd.value) {
+      tbZdryClxxAdd(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆添加成功',
+          type: 'success'
+        })
+      })
+    }
+    else {
+      tbZdryClxxUpdate(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆修改成功',
+          type: 'success'
+        })
+      })
+    }
+  } else {
+    pageData.tableData.push(val)
+  }
+}
+onMounted(() => {
+  // console.log(identityCardRule,"dadad1");
+
+})
+// 删除车辆
+const delDictItem = (val) => {
+  if (!props.disabled && props.showBut) {
+    ElMessageBox.confirm(
+      '是否删除关联车辆',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        tbZdryClxxDelete({ ids: [val] }).then(res => {
+          gettbZdryClxxSelectPage()
+          proxy.$message({
+            message: '关联车辆删除成功',
+            type: 'success'
+          })
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+  } else {
+    pageData.tableData = pageData.tableData.filter(v => v.id != val)
+  }
+
+}
+
+const updDictItem = (val) => {
+  chooseMarksVisible.value = true
+  addUpd.value = false
+  dataModel.value = val
+}
+const AddPore = () => {
+  chooseMarksVisible.value = true
+  dataModel.value = {}
+  addUpd.value = true
+}
+// 查询车辆
+const gettbZdryClxxSelectPage = () => {
+  const promes = {
+    pageCurrent: 1,
+    pageSize: 20,
+    zdrid: listData.value.id
+  }
+  tbGsxtZdryAjxxselectAjxx(promes).then(res => {
+    console.log(res, "案件信息");
+
+    pageData.tableData = res.records
+  })
+}
+// 抛出数据并验证标签列表不为空
+const throwData = () => {
+  return new Promise((resolve) => {
+    // // 验证：确保标签列表不为空
+    // if (!pageData.tableData || pageData.tableData.length === 0) {
+    //   throw new Error('请录入车辆信息');
+    // }
+    resolve(pageData.tableData);
+  });
+}
+defineExpose({
+  throwData
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+  padding: 10px;
+}
+
+::v-deep(.el-form) {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left_box {
+  width: 200px;
+  border: 1px solid #c8c8c89a;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.right_box {
+  width: calc(100% - 230px);
+  overflow-y: auto;
+  padding: 5px;
+}
+
+::v-deep .el-form-item__content {
+  display: block !important;
+}
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 20px 0 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+
+}
+
+.headSelect {
+  width: 100%;
+  padding: 0 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: end;
+  padding-bottom: 20px;
+}
+
+/* 移除冲突样式：不要用 justify-content */
+
+/* 控制所有 el-form-item 高度和垂直居中 */
+.form-inline :deep(.el-form-item) {
+  margin-bottom: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+
+/* ✅ 按钮区域靠右，且不换行 */
+.form-inline .form-actions {
+  margin-left: auto;
+  /* 推到最右边 */
+  white-space: nowrap;
+  /* 防止按钮换行 */
+}
+
+/* 统一按钮样式，增加间距和视觉舒适度 */
+.form-inline :deep(.el-button) {
+  height: 36px;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+/* 按钮之间留出间距（除了第一个） */
+.form-inline :deep(.el-button:not(:first-child)) {
+  margin-left: 12px;
+  /* 比原来的 8px 更宽松 */
+}
+
+// .headClass::after {
+//   content: '';
+//   position: absolute;
+//   left: 0;
+//   bottom: -2px;
+//   width: 60px;
+//   height: 2px;
+//   background-color: #409eff;
+// }
+
+h3 {
+  margin: 0;
+}
+</style>

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/contact.vue

@@ -0,0 +1,400 @@
+<template>
+  <div>
+    <div class="headClass" style="">
+      <h3>密切联系人</h3>
+      <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
+
+    </div>
+    <div class="headSelect">
+      <el-form :model="formData" :inline="true" ref="formRef" :rules="rulesForm" class="form-inline">
+        <!-- 姓名 -->
+        <el-form-item label="姓名" prop="username" :rules="[
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
+        ]">
+          <el-input v-model="formData.username" placeholder="请输入姓名" style="width: 120px;" />
+        </el-form-item>
+
+        <!-- 身份证号码 -->
+        <el-form-item label="身份证号码" prop="cardID" :rules="[
+          { required: true, message: '请输入身份证号码', trigger: 'blur' }
+        ]">
+          <el-input v-model="formData.ID" placeholder="请输入身份证号码" style="width: 200px;" />
+        </el-form-item>
+
+        <!-- 按钮组：统一放在一个 item 中 -->
+        <el-form-item class="form-actions">
+          <el-button type="primary" @click="check">查询</el-button>
+          <el-button @click="resetForm">重置</el-button>
+          <el-button @click="openDialog('新增密切联系人')">新增</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <!-- <template #ryXm="{ row }">
+        <DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
+      </template> -->
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
+        <el-link type="danger" @click="openDialog('修改密切联系人', row)">修改</el-link>
+      </template>
+    </MyTable>
+    <diaLogForm v-model:visible="dialogVisible" :diaLogRules="diaLogRules" :diaLogRuleForm="diaLogRuleForm"
+      @submit="addPersonOrModifica" :Tips="Tips">
+    </diaLogForm>
+  </div>
+
+
+</template>
+
+<script setup>
+import { identityCardRule } from "@/utils/rules"
+import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import diaLogForm from "../components/diaLogForm.vue";
+import { tbGsxtZdryLxrsaveOrUpdateLxr, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryLxrselectLxrBy, tbZdryClxxUpdate } from '@/api/zdr.js'
+import { ElMessage, ElMessageBox } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
+const chooseMarksVisible = ref(false)
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const ruleForm = ref({
+  name: '',
+  cardID: '',
+  relation: '',
+  phone: '',
+})
+const dialogVisible = ref(false)
+const listData = ref({})
+const Tips = ref(false)
+const addUpd = ref(true)
+// 表格数据
+const pageData = reactive({
+  tableData: [],
+  tableColumn: [{
+    prop: 'ryXm',
+    label: '人员姓名',
+
+  }, {
+    prop: 'rySfzh',
+    label: '身份证号码',
+    width: 200
+
+  }, {
+
+    prop: 'dygx',
+    label: '关系',
+  }, {
+
+    prop: 'lxrDh',
+    label: '联系电话',
+    width: 120
+  }],
+  tableHeight: '200px',
+  keyCount: 0,
+  tableConfiger: {
+    border: true,
+    stripe: true,
+    showHeader: true,
+    showIndex: true,
+    indexLabel: '序号',
+    indexWidth: 60,
+    align: 'center',
+    showOverflowTooltip: true,
+    haveControls: !props.disabled
+  },
+  controlsWidth: 200,
+})
+//  表单数据
+const formData = reactive({
+  username: "",
+  ID: ""
+})
+const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
+const diaLogRuleForm = reactive([{ prop: 'username', label: '姓名', type: 'input', value: '' },
+{ prop: 'cardID', label: '身份证号', type: 'input', value: '' },
+{ prop: 'relation', label: '关系', type: 'input', value: '' },
+{ prop: 'phone', label: '联系电话', type: 'input', value: '' }
+])
+watch(() => props.dataList, (val) => {
+  if (val) {
+    console.log(val, 'listData.value');
+
+    listData.value = val
+
+  }
+}, { deep: true })
+// 弹出增加或者修改弹窗
+const openDialog = (type, formVal) => {
+  dialogVisible.value = true
+  Tips.value = type
+  console.log(formVal, "formVal");
+
+  console.log(dialogVisible.value, "dialogVisible.value")
+  if (type === '新增密切联系人') {
+    diaLogRuleForm.forEach(item => {
+      item.value = ''
+    })
+  } else {
+    diaLogRuleForm[0].value = formVal.ryXm
+    diaLogRuleForm[1].value = formVal.rySfzh
+    diaLogRuleForm[2].value = formVal.dygx
+    diaLogRuleForm[3].value = formVal.lxrDh
+  }
+
+}
+// 增加或修改数据接口
+const dataModel = ref()
+const addPersonOrModifica = async (val) => {
+  console.log('dafafaf', val)
+  let params = {
+    id: listData.value.id
+  }
+  val.forEach(item => {
+    switch (item.label) {
+      case '姓名':
+        params.ryXm = item.value
+        break
+      case '身份证号':
+        params.rySfzh = item.value
+        break
+      case '关系':
+        params.dygx = item.value
+        break
+      case '联系电话':
+        params.lxrDh = item.value
+        break
+      default:
+        break
+    }
+  })
+  console.log(params, "fafafafaff");
+
+  if (props.showBut && !props.disabled) {
+    const res = await tbGsxtZdryLxrsaveOrUpdateLxr(params)
+    console.log(res, "联系人增加res");
+
+    // if (type) {
+
+    //   if (res.code == 200) {
+    //     gettbZdryClxxSelectPage()
+    //     proxy.$message({
+    //       message: '密切联系人添加成功',
+    //       type: 'success'
+    //     })
+    //   } else {
+    //     proxy.$message({
+    //       message: '密切联系人添加失败',
+    //       type: 'error'
+    //     })
+    //   }
+
+
+    // } else {
+    //   if (res.code == 200) {
+    //     gettbZdryClxxSelectPage()
+    //     proxy.$message({
+    //       message: '密切联系人添加成功',
+    //       type: 'success'
+    //     })
+    //   } else {
+    //     proxy.$message({
+    //       message: '密切联系人添加失败',
+    //       type: 'error'
+    //     })
+    //   }
+    // }
+
+  } else {
+    pageData.tableData.push(val)
+  }
+}
+onMounted(() => {
+  // console.log(identityCardRule,"dadad1");
+
+})
+// 删除车辆
+const delDictItem = (val) => {
+  if (!props.disabled && props.showBut) {
+    ElMessageBox.confirm(
+      '是否删除关联车辆',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        tbZdryClxxDelete({ ids: [val] }).then(res => {
+          gettbZdryClxxSelectPage()
+          proxy.$message({
+            message: '关联车辆删除成功',
+            type: 'success'
+          })
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+  } else {
+    pageData.tableData = pageData.tableData.filter(v => v.id != val)
+  }
+
+}
+
+const updDictItem = (val) => {
+  chooseMarksVisible.value = true
+  addUpd.value = false
+  dataModel.value = val
+}
+const AddPore = () => {
+  chooseMarksVisible.value = true
+  dataModel.value = {}
+  addUpd.value = true
+}
+// 初始化密切联系人
+const gettbZdryClxxSelectPage = () => {
+  const promes = {
+    pageCurrent: 1,
+    pageSize: 20,
+    zdrid: listData.value.id
+  }
+  tbGsxtZdryLxrselectLxrBy(promes).then(res => {
+
+
+    pageData.tableData = res
+    console.log(pageData.tableData, "表格原生数据");
+
+  })
+}
+// 抛出数据并验证标签列表不为空
+const throwData = () => {
+  return new Promise((resolve) => {
+    // // 验证：确保标签列表不为空
+    // if (!pageData.tableData || pageData.tableData.length === 0) {
+    //   throw new Error('请录入车辆信息');
+    // }
+    resolve(pageData.tableData);
+  });
+}
+defineExpose({
+  throwData
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+  padding: 10px;
+}
+
+
+
+.left_box {
+  width: 200px;
+  border: 1px solid #c8c8c89a;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.right_box {
+  width: calc(100% - 230px);
+  overflow-y: auto;
+  padding: 5px;
+}
+
+::v-deep .el-form-item__content {
+  display: block !important;
+}
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+
+}
+
+.headSelect {
+  width: 100%;
+  padding: 0 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+
+  ::v-deep(.el-form) {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  /* 移除冲突样式：不要用 justify-content */
+
+  /* 控制所有 el-form-item 高度和垂直居中 */
+  .form-inline :deep(.el-form-item) {
+    margin-bottom: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* ✅ 按钮区域靠右，且不换行 */
+  .form-inline .form-actions {
+    margin-left: auto;
+    /* 推到最右边 */
+    white-space: nowrap;
+    /* 防止按钮换行 */
+  }
+
+  /* 统一按钮样式，增加间距和视觉舒适度 */
+  .form-inline :deep(.el-button) {
+    height: 36px;
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 4px;
+  }
+
+  /* 按钮之间留出间距（除了第一个） */
+  .form-inline :deep(.el-button:not(:first-child)) {
+    margin-left: 12px;
+    /* 比原来的 8px 更宽松 */
+  }
+}
+
+
+
+// .headClass::after {
+//   content: '';
+//   position: absolute;
+//   left: 0;
+//   bottom: -2px;
+//   width: 60px;
+//   height: 2px;
+//   background-color: #409eff;
+// }
+
+h3 {
+  margin: 0;
+}
+</style>

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/deployment.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="headClass" style="">
+      <h3>全要素布控</h3>
+
+    </div>
+    <div class="marginBox">
+      <div>身份证号码：{{ listData.rySfzh }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
+
+      <div>手机号码：{{ listData.ryLxdh?.[0] }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span>
+        <div> {{ listData.ryLxdh?.[1] }}<span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
+      </div>
+      <div>车牌号码：{{ listData.clHm }} <span>({{ listData.zdrBkZt ? '已布控' : '未布控' }})</span></div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const status = ref(false)
+const listData = ref({})
+watch(() => props.dataList, (val) => {
+  if (val) {
+    listData.value = val
+
+  }
+}, { deep: true })
+onMounted(() => {
+  console.log('Deployment 组件已挂载！')
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 10px 0;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.marginBox {
+  span {
+    margin-left: 10px;
+    color: #ff4040;
+  }
+
+  &>:nth-child(1) {
+    width: 300px;
+    height: 30px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &>:nth-child(2) {
+    width: 400px;
+    height: 30px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &>:nth-child(3) {
+    width: 210px;
+    height: 30px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/dynamicTrajectory.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <div class="headClass" style="">
+            <h3>动态轨迹</h3>
+            <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
+        </div>
+        <div class="headSelect">
+            <el-select v-model="value" placeholder="身份证号码" style="width: 100px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-select v-model="value" placeholder="请输入内容" style="width: 240px">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <div class="demo-datetime-picker">
+                <div class="block">
+                    <el-date-picker v-model="value2" type="datetimerange" start-placeholder="Start date"
+                        end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
+                        time-format="A hh:mm:ss" />
+                </div>
+            </div>
+            <el-button type="primary" @click="check">查询</el-button>
+            <el-button @click="resetForm">重置</el-button>
+        </div>
+          <div class="mapBox">地图</div>
+         
+    </div>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+
+const options = [
+    {
+        value: '1',
+        label: '身份证号码',
+    },
+    {
+        value: '2',
+        label: '港澳台通行证',
+    },
+    {
+        value: 'Option3',
+        label: 'Option3',
+    },
+]
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+    padding: 10px;
+}
+
+::v-deep(.el-form) {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left_box {
+    width: 200px;
+    border: 1px solid #c8c8c89a;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+.right_box {
+    width: calc(100% - 230px);
+    overflow-y: auto;
+    padding: 5px;
+}
+
+::v-deep .el-form-item__content {
+    display: block !important;
+}
+
+.headClass {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0 0 10px 0;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #409eff;
+    position: relative;
+
+}
+
+.headSelect {
+    width: 100%;
+    margin: 20px 0;
+    padding:0 16px;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+   
+}
+ .mapBox{
+    
+        width: 100%;
+        height: 300px;
+         background-color: rgba(0, 123, 255, 0.5);
+    }
+h3 {
+    margin: 0;
+}
+</style>

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/vehicle.vue

@@ -53,6 +53,7 @@ const addUpd = ref(true)
 watch(() => props.dataList, (val) => {
   if (val) {
     listData.value = val
+    console.log(listData.value, 'listData.value')
     gettbZdryClxxSelectPage()
   }
 }, { deep: true })

src/views/backOfficeSystem/DeploymentDisposal/mpvPeo/model/visitRecord.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div class="headClass" style="">
+      <h3>走访记录</h3>
+      <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
+
+    </div>
+    <div class="headSelect">
+
+      <el-button @click="add" type="primary">新增</el-button>
+    </div>
+    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+      <template #clys="{ row }">
+        <DictTag :tag="false" :value="row.clys" :options="D_BZ_CLYS" />
+      </template>
+      <template #cllx="{ row }">
+        <DictTag :tag="false" :value="row.cllx" :options="D_BZ_CLLX" />
+      </template>
+      <template #clpp="{ row }">
+        <DictTag :tag="false" :value="row.clpp" :options="D_BZ_CLPP" />
+      </template>
+      <!-- 操作 -->
+      <template #controls="{ row }">
+        <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
+        <el-link type="danger" @click="updDictItem(row)">修改</el-link>
+      </template>
+    </MyTable>
+  </div>
+  <VehiclDoing v-model="chooseMarksVisible" @comfirm="addMarks" :data="dataModel"
+    :dict="{ D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP }" />
+</template>
+
+<script setup>
+import { identityCardRule } from "@/utils/rules"
+import { ref, reactive, watch, toRaw, getCurrentInstance, onMounted, onUnmounted } from "vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import VehiclDoing from "../component/vehiclDoing.vue";
+import { tbZdryClxxAdd, tbZdryClxxBatchAdd, tbZdryClxxDelete, tbGsxtZdryZfjlselectZfjl, tbZdryClxxUpdate } from '@/api/zdr.js'
+import { ElMessage, ElMessageBox } from "element-plus";
+const { proxy } = getCurrentInstance();
+const { D_BZ_CLLX, D_BZ_CLYS, D_BZ_CLPP } = proxy.$dict("D_BZ_CLLX", "D_BZ_CLYS", "D_BZ_CLPP"); //获取字典数据
+const chooseMarksVisible = ref(false)
+const props = defineProps({
+  dataList: {
+    type: Object,
+    default: () => { },
+  }, disabled: {
+    type: Boolean,
+    default: false
+  },
+  showBut: {
+    type: Boolean,
+    default: false
+  },
+})
+const listData = ref({})
+const addUpd = ref(true)
+watch(() => props.dataList, (val) => {
+  if (val) {
+    listData.value = val
+
+
+    gettbZdryClxxSelectPage()
+  }
+}, { deep: true })
+// 表格数据
+const pageData = reactive({
+  tableData: [],
+  tableColumn: [{
+    prop: 'cph',
+    width: 150,
+    label: '走访民警/辅警',
+  }, {
+    prop: 'cllx',
+    label: '走访方式',
+    showSolt: true,
+    prop: 'clpp',
+  }, {
+    showSolt: true,
+    prop: 'clys',
+    label: '走访时间',
+  }, {
+    showSolt: true,
+    prop: 'clpp',
+    label: '走访地址',
+  },
+  {
+    showSolt: true,
+    prop: 'clpp',
+    label: '走访情况',
+  }],
+  tableHeight: '200px',
+  keyCount: 0,
+  tableConfiger: {
+    border: true,
+    stripe: true,
+    showHeader: true,
+    showIndex: true,
+    indexLabel: '序号',
+    indexWidth: 60,
+    align: 'center',
+    showOverflowTooltip: true,
+    haveControls: !props.disabled
+  },
+  controlsWidth: 200,
+})
+//  表单数据
+const formData = reactive({
+  username: "",
+  ID: ""
+})
+const rulesForm = ref(identityCardRule({ validator: true }, 'rySfzh'))
+// 修改数据接口
+const dataModel = ref()
+const addMarks = (val) => {
+  const params = {
+    ...val,
+    zdrid: listData.value.id,
+  }
+  if (props.showBut && !props.disabled) {
+    if (addUpd.value) {
+      tbZdryClxxAdd(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆添加成功',
+          type: 'success'
+        })
+      })
+    }
+    else {
+      tbZdryClxxUpdate(params).then(res => {
+        gettbZdryClxxSelectPage()
+        proxy.$message({
+          message: '关联车辆修改成功',
+          type: 'success'
+        })
+      })
+    }
+  } else {
+    pageData.tableData.push(val)
+  }
+}
+onMounted(() => {
+
+
+})
+// 删除车辆
+const delDictItem = (val) => {
+  if (!props.disabled && props.showBut) {
+    ElMessageBox.confirm(
+      '是否删除关联车辆',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        tbZdryClxxDelete({ ids: [val] }).then(res => {
+          gettbZdryClxxSelectPage()
+          proxy.$message({
+            message: '关联车辆删除成功',
+            type: 'success'
+          })
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+  } else {
+    pageData.tableData = pageData.tableData.filter(v => v.id != val)
+  }
+
+}
+
+const updDictItem = (val) => {
+  chooseMarksVisible.value = true
+  addUpd.value = false
+  dataModel.value = val
+}
+const AddPore = () => {
+  chooseMarksVisible.value = true
+  dataModel.value = {}
+  addUpd.value = true
+}
+// 查询车辆
+const gettbZdryClxxSelectPage = () => {
+  const promes = {
+    pageCurrent: 1,
+    pageSize: 20,
+    zdrid: listData.value.id
+  }
+  tbGsxtZdryZfjlselectZfjl(promes).then(res => {
+    console.log(res, "走访记录");
+    pageData.tableData = res
+  })
+}
+// 抛出数据并验证标签列表不为空
+const throwData = () => {
+  return new Promise((resolve) => {
+    // // 验证：确保标签列表不为空
+    // if (!pageData.tableData || pageData.tableData.length === 0) {
+    //   throw new Error('请录入车辆信息');
+    // }
+    resolve(pageData.tableData);
+  });
+}
+defineExpose({
+  throwData
+})
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/css/layout.scss";
+@import "~@/assets/css/element-plus.scss";
+
+.backinfo-container {
+  padding: 10px;
+}
+
+::v-deep(.el-form) {
+  display: flex;
+  justify-content: space-between;
+}
+
+.left_box {
+  width: 200px;
+  border: 1px solid #c8c8c89a;
+  border-radius: 5px;
+  padding: 5px;
+}
+
+.right_box {
+  width: calc(100% - 230px);
+  overflow-y: auto;
+  padding: 5px;
+}
+
+::v-deep .el-form-item__content {
+  display: block !important;
+}
+
+.headClass {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 20px 0 10px 0;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+  position: relative;
+
+}
+
+.headSelect {
+  width: 100%;
+  padding: 0 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: end;
+  padding-bottom: 20px;
+}
+
+/* 移除冲突样式：不要用 justify-content */
+
+/* 控制所有 el-form-item 高度和垂直居中 */
+.form-inline :deep(.el-form-item) {
+  margin-bottom: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+
+/* ✅ 按钮区域靠右，且不换行 */
+.form-inline .form-actions {
+  margin-left: auto;
+  /* 推到最右边 */
+  white-space: nowrap;
+  /* 防止按钮换行 */
+}
+
+/* 统一按钮样式，增加间距和视觉舒适度 */
+.form-inline :deep(.el-button) {
+  height: 36px;
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+/* 按钮之间留出间距（除了第一个） */
+.form-inline :deep(.el-button:not(:first-child)) {
+  margin-left: 12px;
+  /* 比原来的 8px 更宽松 */
+}
+
+// .headClass::after {
+//   content: '';
+//   position: absolute;
+//   left: 0;
+//   bottom: -2px;
+//   width: 60px;
+//   height: 2px;
+//   background-color: #409eff;
+// }
+
+h3 {
+  margin: 0;
+}
+</style>