From 2c8efe556960fd38917273e89943bb941bf56fff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=88=E9=B8=BF?= <shenhongkm@163.com>
Date: Fri, 13 Jun 2025 14:59:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=9C=9F=E5=9C=B0=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landManagement/index.js                   |   7 +
 .../src/components/AreaCascader/index.vue     |   2 +
 .../component/landsManage/index.vue           | 528 ++++++------------
 .../src/views/resource/grid/GridMember.vue    |   6 -
 4 files changed, 178 insertions(+), 365 deletions(-)

diff --git a/sub-government-affairs-service/src/apis/landResourceManagement/landManagement/index.js b/sub-government-affairs-service/src/apis/landResourceManagement/landManagement/index.js
index 5800c7a..f6f1f7f 100644
--- a/sub-government-affairs-service/src/apis/landResourceManagement/landManagement/index.js
+++ b/sub-government-affairs-service/src/apis/landResourceManagement/landManagement/index.js
@@ -18,6 +18,13 @@ export function getLandList(params) {
     params,
   });
 }
+// 新增全部土地信息（POST）
+export function createLand(data = {}) {
+  return request('/land-resource/landManage/v1/save', {
+    method: 'POST',
+    data,
+  });
+}
 
 /**
  * 保存土地基础信息
diff --git a/sub-government-affairs-service/src/components/AreaCascader/index.vue b/sub-government-affairs-service/src/components/AreaCascader/index.vue
index 25ff12c..81d74f2 100644
--- a/sub-government-affairs-service/src/components/AreaCascader/index.vue
+++ b/sub-government-affairs-service/src/components/AreaCascader/index.vue
@@ -120,6 +120,8 @@ const containerStyle = computed(() => ({
   text-align: right;
   line-height: 32px;
   width: 120px;
+  box-sizing: border-box;
+  padding-right: 12px;
 }
 .controls {
   display: flex;
diff --git a/sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue b/sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue
index 9176bd1..c9e12ed 100644
--- a/sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue
+++ b/sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue
@@ -30,154 +30,96 @@
     </avue-crud>
 
     <!-- 新增弹窗 -->
-    <el-dialog v-model="addDialogVisible" title="新增" width="800px" top="8vh">
-      <el-tabs v-model="activeTab">
+    <el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
+      <el-tabs v-model="activeTab" class="tabs-wrapper">
         <el-tab-pane label="土地基本信息" name="basic">
-          <el-form ref="basicFormRef" :model="formDataBasic" :rules="basicRules" label-width="120px" class="form-container">
-            <el-form-item label="地块名称" prop="landName">
-              <el-input v-model="formDataBasic.landName" placeholder="请输入地块名称" />
-            </el-form-item>
-            <el-form-item label="面积(亩)" prop="area">
-              <el-input-number v-model="formDataBasic.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
-            </el-form-item>
-            <el-form-item label="土地类型" prop="landType">
-              <el-select v-model="formDataBasic.landType" placeholder="选择土地类型" clearable>
-                <el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="具体位置" prop="address">
-              <el-input v-model="formDataBasic.address" placeholder="请输入具体位置" />
-            </el-form-item>
-            <el-form-item label="所属网格" prop="gridId">
-              <AreaCascader v-model:region-code="formDataBasic.regionCode" v-model:grid-id="formDataBasic.gridId" label="" :width="500" />
-            </el-form-item>
-            <el-form-item label="土壤类型" prop="soilTypeId">
-              <url-select
-                v-model="formDataBasic.soilTypeId"
-                placeholder="选择土壤类型"
-                url="/land-resource/baseInfo/soilTypePage"
-                :params="{ current: 1, size: 100 }"
-                label-key="soilType"
-                value-key="id"
-                :clearable="true"
-              />
-            </el-form-item>
-            <el-form-item label="土地照片" prop="landUrl">
-              <el-upload
-                :http-request="customUploadRequest"
-                :on-success="(res, file) => handleUploadSuccess(res, file, 'basic')"
-                multiple
-                :show-file-list="true"
-              >
-                <template #trigger>
-                  <el-button type="primary">点击上传</el-button>
-                </template>
-              </el-upload>
-            </el-form-item>
-            <el-form-item label="土地范围" prop="scope">
-              <el-input v-model="formDataBasic.scope" placeholder="请输入土地范围" />
-              <!-- <Attrs v-model:attrs="formDataBasic.scope" type="add" accept="image/*" /> -->
-            </el-form-item>
+          <p class="form-title">编辑基本信息</p>
+          <el-form ref="basicFormRef" :model="formDataBasic" :disabled="isReadonly" label-width="120px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="地块名称" prop="landName">
+                  <el-input v-model="formDataBasic.landName" placeholder="请输入地块名称" />
+                </el-form-item>
+                <el-form-item label="土地类型" prop="landType">
+                  <el-select v-model="formDataBasic.landType" placeholder="选择土地类型" clearable>
+                    <el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="具体位置" prop="address">
+                  <el-input v-model="formDataBasic.address" placeholder="请输入具体位置" />
+                </el-form-item>
+                <el-form-item label="土壤类型" prop="soilTypeId">
+                  <url-select
+                    v-model="formDataBasic.soilTypeId"
+                    placeholder="选择土壤类型"
+                    url="/land-resource/baseInfo/soilTypePage"
+                    :params="{ current: 1, size: 100 }"
+                    label-key="soilType"
+                    value-key="id"
+                    :clearable="true"
+                  />
+                </el-form-item>
+                <el-form-item label="土地照片" prop="landUrl">
+                  <FileUploader v-model="formDataBasic.landUrl" :limit="1" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="面积(亩)" prop="area">
+                  <el-input-number v-model="formDataBasic.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
+                </el-form-item>
+
+                <el-form-item label="" label-width="0" prop="gridId">
+                  <AreaCascader v-model:region-code="formDataBasic.regionCode" v-model:grid-id="formDataBasic.gridId" label="" :split-rows="true" />
+                </el-form-item>
+
+                <el-form-item label="土地范围" prop="scope">
+                  <el-input v-model="formDataBasic.scope" placeholder="请输入土地范围" />
+                  <!-- <Attrs v-model:attrs="formDataBasic.scope" type="add" accept="image/*" /> -->
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
         </el-tab-pane>
         <el-tab-pane label="土地产权信息" name="property">
-          <el-form ref="propertyFormRef" :model="formDataProperty" :rules="propertyRules" label-width="120px" class="form-container">
-            <el-form-item label="地块名称">
-              <el-input v-model="formDataProperty.landName" disabled />
-            </el-form-item>
-            <el-form-item label="产权人姓名" prop="propertyName">
-              <el-input v-model="formDataProperty.propertyName" placeholder="请输入产权人姓名" />
-            </el-form-item>
-            <el-form-item label="联系方式" prop="propertyPhone">
-              <el-input v-model="formDataProperty.propertyPhone" placeholder="请输入产权人联系方式" />
-            </el-form-item>
-            <el-form-item label="产权编号" prop="landCode">
-              <el-input v-model="formDataProperty.landCode" placeholder="请输入产权编号" />
-            </el-form-item>
-            <el-form-item label="产权证书" prop="propertyCertificateUrl">
-              <FileUploader v-model="formDataProperty.propertyCertificateUrl" :limit="1" />
-            </el-form-item>
+          <p class="form-title">编辑产权信息</p>
+          <el-form ref="propertyFormRef" style="width: 60%" :model="formDataProperty" :disabled="isReadonly" label-width="120px">
+            <el-row :gutter="20">
+              <el-form-item label="地块名称">
+                <el-input v-model="formDataProperty.landName" disabled />
+              </el-form-item>
+              <el-form-item label="产权人姓名" prop="propertyName">
+                <el-input v-model="formDataProperty.propertyName" placeholder="请输入产权人姓名" />
+              </el-form-item>
+              <el-form-item label="联系方式" prop="propertyPhone">
+                <el-input v-model="formDataProperty.propertyPhone" placeholder="请输入产权人联系方式" />
+              </el-form-item>
+              <el-form-item label="产权编号" prop="landCode">
+                <el-input v-model="formDataProperty.landCode" placeholder="请输入产权编号" />
+              </el-form-item>
+              <el-form-item label="产权证书" prop="propertyCertificateUrl">
+                <FileUploader v-model="formDataProperty.propertyCertificateUrl" :limit="1" />
+              </el-form-item>
+            </el-row>
           </el-form>
         </el-tab-pane>
       </el-tabs>
 
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="addDialogVisible = false">取消</el-button>
-          <el-button v-if="activeTab === 'basic'" type="primary" @click="handleAddSubmit('basic')">提交</el-button>
-          <el-button v-if="activeTab === 'basic'" :disabled="disabledProperty" @click="activeTab = 'property'">下一步</el-button>
-          <el-button v-else @click="activeTab = 'basic'">上一步</el-button>
-          <el-button v-if="activeTab === 'property'" type="primary" @click="handleAddSubmit('property')"> 提交 </el-button>
-        </span>
-      </template>
-    </el-dialog>
+          <el-button @click="visible = false">取消</el-button>
 
-    <!-- 查看和编辑共用弹窗 -->
-    <el-dialog v-model="viewEditDialogVisible" :title="viewEditTitle" width="800px" top="8vh">
-      <el-form
-        ref="viewEditFormRef"
-        :model="viewEditFormData"
-        :rules="isView ? {} : editRules"
-        label-width="120px"
-        class="view-edit-form"
-        :disabled="isView"
-      >
-        <h3 class="section-title">土地基本信息</h3>
-        <el-form-item label="地块名称" prop="landName">
-          <el-input v-model="viewEditFormData.landName" />
-        </el-form-item>
-        <el-form-item label="面积(亩)" prop="area">
-          <el-input-number v-model="viewEditFormData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
-        </el-form-item>
-        <el-form-item label="土地类型" prop="landType">
-          <el-select v-model="viewEditFormData.landType" clearable>
-            <el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="具体位置" prop="address">
-          <el-input v-model="viewEditFormData.address" />
-        </el-form-item>
-        <el-form-item label="所属网格" prop="gridId">
-          <AreaCascader v-model="viewEditFormData.regionCode" v-model:grid-id="viewEditFormData.gridId" :width="500" label="" />
-        </el-form-item>
-        <el-form-item label="土壤类型" prop="soilTypeId">
-          <url-select
-            v-model="viewEditFormData.soilTypeId"
-            url="/land-resource/baseInfo/soilTypePage"
-            :params="{ current: 1, size: 100 }"
-            label-key="soilType"
-            value-key="id"
-            :clearable="true"
-          />
-        </el-form-item>
-        <el-form-item label="土地照片" prop="landUrl">
-          <FileUploader v-model="viewEditFormData.landUrl" :limit="1" />
-        </el-form-item>
-        <el-form-item label="土地范围" prop="scope">
-          <el-input v-model="viewEditFormData.scope" />
-        </el-form-item>
+          <!-- 土地基本信息 tab -->
+          <template v-if="activeTab === 'basic'">
+            <el-button type="primary" @click="submitBasicInfo">暂存</el-button>
+            <el-button @click="activeTab = 'property'">下一步</el-button>
+          </template>
 
-        <h3 class="section-title">土地产权信息</h3>
-        <el-form-item label="产权人姓名" prop="propertyName">
-          <el-input v-model="viewEditFormData.propertyName" />
-        </el-form-item>
-        <el-form-item label="联系方式" prop="propertyPhone">
-          <el-input v-model="viewEditFormData.propertyPhone" />
-        </el-form-item>
-        <el-form-item label="产权编号" prop="landCode">
-          <el-input v-model="viewEditFormData.landCode" />
-        </el-form-item>
-        <el-form-item label="产权证书" prop="propertyCertificateUrl">
-          <FileUploader v-model="viewEditFormData.propertyCertificateUrl" :limit="1" />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="viewEditDialogVisible = false">{{ isView ? '关闭' : '取消' }}</el-button>
-          <el-button v-if="isView" type="primary" @click="handleEdit">编辑</el-button>
-          <el-button v-if="!isView" type="primary" @click="handleView">查看</el-button>
-          <el-button v-if="!isView" type="primary" @click="handleViewEditSubmit"> 提交 </el-button>
+          <!-- 土地产权信息 tab -->
+          <template v-else>
+            <el-button @click="activeTab = 'basic'">上一步</el-button>
+            <el-button v-if="formDataProperty.landId" type="primary" @click="submitPropertyInfo">提交</el-button>
+            <el-button v-else type="primary" @click="submitAll">保存</el-button>
+          </template>
         </span>
       </template>
     </el-dialog>
@@ -187,8 +129,9 @@
 <script setup>
 import { ref, reactive, onMounted, computed, nextTick } from 'vue';
 import { CRUD_OPTIONS } from '@/config';
-import { getLandList, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
+import { getLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
 import { CommonUpload } from '@/apis/index';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import request from '@/utils/axios';
 
 // ==============================
@@ -196,17 +139,14 @@ import request from '@/utils/axios';
 // ==============================
 const loading = ref(false);
 const crudRef = ref();
-const addDialogVisible = ref(false);
+const visible = ref(false);
+const isReadonly = ref(false);
 const activeTab = ref('basic');
-const viewEditDialogVisible = ref(false);
-const isView = ref(false);
-// 控制是否启用验证规则
-const isValidationEnabled = ref(false);
+const dialogTitle = ref('新增');
 
 // 表单引用
 const basicFormRef = ref(null);
 const propertyFormRef = ref(null);
-const viewEditFormRef = ref(null);
 
 // 分页数据
 const pageData = ref({
@@ -251,97 +191,6 @@ const formDataProperty = ref({
   propertyCertificateUrl: '',
 });
 
-const viewEditFormData = ref({
-  id: '',
-  landName: '',
-  gridId: '',
-  gridName: '',
-  area: 0,
-  landType: '',
-  landTypeId: '',
-  landTypeName: '',
-  address: '',
-  detailAddress: '',
-  fullLandType: '',
-  fullRegionName: '',
-  soilTypeId: '',
-  soilType: '',
-  landUrl: '',
-  scope: '',
-  propertyName: '',
-  propertyPhone: '',
-  landCode: '',
-  propertyCertificateUrl: '',
-  updateTime: '',
-});
-
-// OSS URL
-const ossUrl = 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/';
-
-// ==============================
-// 计算属性
-// ==============================
-const viewEditTitle = computed(() => {
-  return isView.value ? '查看' : '编辑';
-});
-
-const disabledProperty = computed(() => {
-  return formDataBasic.value.id ? false : true;
-});
-
-// ==============================
-// 表单验证规则
-// ==============================
-const basicRules = reactive(
-  isValidationEnabled.value
-    ? {
-        landName: [{ required: true, message: '请输入地块名称', trigger: 'blur' }],
-        area: [
-          { required: true, message: '请输入面积', trigger: 'blur' },
-          {
-            type: 'number',
-            min: 0,
-            message: '面积必须大于0',
-            trigger: 'blur',
-          },
-        ],
-        landType: [{ required: true, message: '请选择土地类型', trigger: 'change' }],
-        address: [{ required: true, message: '请输入具体位置', trigger: 'blur' }],
-        gridId: [{ required: true, message: '请选择所属网格', trigger: 'change' }],
-        soilTypeId: [{ required: true, message: '请选择土壤类型', trigger: 'change' }],
-        landUrl: [{ required: true, message: '请上传土地照片', trigger: 'change' }],
-        scope: [{ required: true, message: '请输入土地范围', trigger: 'blur' }],
-      }
-    : {}
-);
-
-const propertyRules = reactive(
-  isValidationEnabled.value
-    ? {
-        propertyName: [{ required: true, message: '请输入产权人姓名', trigger: 'blur' }],
-        propertyPhone: [
-          { required: true, message: '请输入联系方式', trigger: 'blur' },
-          {
-            pattern: /^1[3-9]\d{9}$/,
-            message: '请输入正确的手机号码',
-            trigger: 'blur',
-          },
-        ],
-        landCode: [{ required: true, message: '请输入产权编号', trigger: 'blur' }],
-        propertyCertificateUrl: [{ required: true, message: '请上传产权证书', trigger: 'change' }],
-      }
-    : {}
-);
-
-const editRules = reactive(
-  isValidationEnabled.value
-    ? {
-        ...basicRules,
-        ...propertyRules,
-      }
-    : {}
-);
-
 // ==============================
 // CRUD 配置
 // ==============================
@@ -353,7 +202,7 @@ const option = reactive({
   column: [
     { label: '地块名称', prop: 'landName' },
     { label: '所属网格', prop: 'gridName' },
-    { label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${cellValue} 亩` },
+    { label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
     { label: '土地类型', prop: 'landTypeName' },
     { label: '所属行政区域', prop: 'fullRegionName' },
     { label: '具体位置', prop: 'address' },
@@ -364,16 +213,16 @@ const option = reactive({
     { label: '信息更新时间', prop: 'updateTime' },
   ],
   actions: [
-    {
-      name: '查看',
-      icon: 'view',
-      event: ({ row }) => handleView(row),
-    },
-    {
-      name: '编辑',
-      icon: 'edit',
-      event: ({ row }) => handleEdit(row),
-    },
+    // {
+    //   name: '查看',
+    //   icon: 'view',
+    //   event: ({ row }) => handleView(row),
+    // },
+    // {
+    //   name: '编辑',
+    //   icon: 'edit',
+    //   event: ({ row }) => handleEdit(row),
+    // },
     {
       type: 'danger',
       name: '删除',
@@ -440,7 +289,7 @@ const handleAdd = () => {
     propertyCertificateUrl: '',
   };
 
-  addDialogVisible.value = true;
+  visible.value = true;
   activeTab.value = 'basic';
 
   // 重置表单验证
@@ -455,22 +304,15 @@ const handleAdd = () => {
 };
 
 const handleView = (row) => {
-  isView.value = true;
-  viewEditFormData.value = { ...row };
-  viewEditDialogVisible.value = true;
+  isReadonly.value = true;
+  dialogTitle.value = '土地资源详情';
+  visible.value = true;
 };
 
 const handleEdit = (row) => {
-  isView.value = false;
-  viewEditFormData.value = { ...row };
-  viewEditDialogVisible.value = true;
-
-  // 重置表单验证
-  // nextTick(() => {
-  //   if (viewEditFormRef.value) {
-  //     viewEditFormRef.value.resetFields();
-  //   }
-  // });
+  dialogTitle.value = '编辑';
+  isReadonly.value = false;
+  visible.value = true;
 };
 
 const handleDelete = (id) => {
@@ -500,94 +342,57 @@ const resetSearch = () => {
 // ==============================
 // 方法 - 表单提交
 // ==============================
-const handleAddSubmit = async (tab) => {
+const submitBasicInfo = async () => {
   try {
-    if (tab === 'basic') {
-      await basicFormRef.value.validate();
-      const res = await saveBaseInfo(formDataBasic.value);
-      if (res.code === 200) {
-        activeTab.value = 'property';
-        formDataProperty.value.id = res.data.id;
-        formDataProperty.value.landName = formDataBasic.value.landName;
-      }
-    } else if (tab === 'property') {
-      await propertyFormRef.value.validate();
-      const res = await saveProperty(formDataProperty.value);
-      if (res.code === 200) {
-        addDialogVisible.value = false;
-        getData();
-      }
+    await basicFormRef.value.validate();
+    const res = await saveBaseInfo(formDataBasic.value);
+    if (res.code === 200) {
+      formDataProperty.value.id = res.data.id;
+      formDataProperty.value.landName = formDataBasic.value.landName;
+      ElMessage.success('基本信息已暂存');
     }
   } catch (error) {
-    console.error('表单提交失败', error);
+    console.error('暂存失败', error);
   }
 };
 
-const handleViewEditSubmit = async () => {
+const submitPropertyInfo = async () => {
   try {
-    await viewEditFormRef.value.validate();
-    // 合并提交逻辑
-    const { id, ...formData } = viewEditFormData.value;
-    if (id) {
-      // 更新逻辑
-      // await updateLandInfo({ id, ...formData });
-      await editLand({ id, ...formData });
-      viewEditDialogVisible.value = false;
+    await propertyFormRef.value.validate();
+    if (!formDataProperty.value.id) {
+      ElMessage.error('请先保存基本信息');
+      return;
+    }
+    const res = await saveProperty(formDataProperty.value);
+    if (res.code === 200) {
+      ElMessage.success('产权信息提交成功');
+      visible.value = false;
       getData();
     }
   } catch (error) {
-    console.error('表单提交失败', error);
+    console.error('产权信息提交失败', error);
   }
 };
 
-// ==============================
-// 方法 - 文件上传
-// ==============================
-const customUploadRequest = async (options) => {
-  const formData = new FormData();
-  formData.append('file', options.file);
-
+const submitAll = async () => {
   try {
-    const response = await CommonUpload(formData);
-    options.onSuccess(response, options.file);
-    return response;
-  } catch (err) {
-    console.error('上传失败', err);
-    options.onError(err);
-    throw err;
-  }
-};
+    await basicFormRef.value.validate();
+    await propertyFormRef.value.validate();
 
-const handleUploadSuccess = (res, file, type) => {
-  if (res?.data?.url) {
-    const url = res.data.url;
-
-    switch (type) {
-      case 'basic':
-        formDataBasic.value.landUrl = url;
-        break;
-      case 'property':
-        formDataProperty.value.propertyCertificateUrl = url;
-        break;
-      case 'viewEditBasic':
-        viewEditFormData.value.landUrl = url;
-        break;
-      case 'viewEditProperty':
-        viewEditFormData.value.propertyCertificateUrl = url;
-        break;
+    const combinedData = {
+      ...formDataProperty.value,
+      ...formDataBasic.value,
+    };
+    const baseRes = await createLand(combinedData);
+    if (baseRes.code === 200) {
+      ElMessage.success('全部信息保存成功');
+      visible.value = false;
+      getData();
+    } else {
+      ElMessage.error('信息保存失败');
     }
-
-    // 手动触发验证
-    nextTick(() => {
-      if (type === 'basic' && basicFormRef.value) {
-        basicFormRef.value.validateField('landUrl');
-      } else if (type === 'property' && propertyFormRef.value) {
-        propertyFormRef.value.validateField('propertyCertificateUrl');
-      } else if (type.includes('viewEdit') && viewEditFormRef.value) {
-        const field = type === 'viewEditBasic' ? 'landUrl' : 'propertyCertificateUrl';
-        viewEditFormRef.value.validateField(field);
-      }
-    });
+  } catch (error) {
+    console.error('保存失败', error);
   }
 };
 
@@ -616,6 +421,11 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+// :deep(.el-dialog__body) {
+//   padding: 20px;
+//   height: calc(100vh - 300px);
+//   overflow-y: auto;
+// }
 .custom-page {
   padding: 20px;
   height: calc(100vh - 150px);
@@ -632,40 +442,40 @@ onMounted(() => {
     }
   }
 }
+.tabs-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  // background-color: #7daaaa;
 
-.form-container,
-.view-edit-form {
-  padding: 0 20px;
-  max-height: calc(100vh - 300px);
-  overflow-y: auto;
-
-  .el-form-item {
-    margin-bottom: 22px;
+  :deep(.el-tabs__item) {
+    font-size: 16px;
+    color: #555555;
+    font-weight: 500;
+    // border: 1 solid #f000;
+  }
+  :deep(.el-tabs__content) {
+    padding: 20px;
+    // background-color: #f5f5f5;
+    border-radius: 4px;
+    height: calc(100vh - 300px);
+    overflow-y: auto;
+  }
+  :deep(.el-tab-pane) {
+    margin: 0 auto;
+    width: 80%;
   }
 }
 
-.view-edit-form {
-  .section-title {
-    color: #409eff;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
-    margin: 20px 0;
-  }
-
-  .preview-image {
-    max-width: 100%;
-    max-height: 200px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-    display: block;
-    margin-top: 8px;
-  }
+.form-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 30px 0;
+  color: #333333;
 }
 
 .dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px 20px 0;
-  border-top: 1px solid #eee;
+  display: block;
+  text-align: center;
 }
 </style>
diff --git a/sub-government-affairs-service/src/views/resource/grid/GridMember.vue b/sub-government-affairs-service/src/views/resource/grid/GridMember.vue
index d525a1f..517b765 100644
--- a/sub-government-affairs-service/src/views/resource/grid/GridMember.vue
+++ b/sub-government-affairs-service/src/views/resource/grid/GridMember.vue
@@ -415,10 +415,4 @@ const onExport = () => {
 .dialog-footer {
   text-align: center;
 }
-:deep(.area-cascader-label) {
-  padding: 0 12px 0 0;
-  margin: 0;
-  width: 120px;
-  box-sizing: border-box;
-}
 </style>