feat

sub-government-affairs-service/src/apis/land.js

@@ -1,15 +1,22 @@
 import request from '@/utils/axios';
-
+/* 土地列表 */
 export function getLandsList(params = {}) {
   return request('land-resource/landManage/page', {
     method: 'GET',
     params,
   });
 }
-
+/* 新增土地 */
 export function lnadSave(data = {}) {
   return request('/land-resource/landManage/save', {
     method: 'POST',
     data,
   });
 }
+/* 导出土地 */
+export function exportLands(params = {}) {
+  return request('/land-resource/landManage/export', {
+    method: 'GET',
+    params,
+  });
+}

sub-government-affairs-service/src/components/CustomSelect.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import request from '@/utils/axios';
 const emit = defineEmits(['update:value']);
 
@@ -69,6 +69,16 @@ onMounted(async () => {
 /* --------------- data --------------- */
 // #region
 const val = ref(null);
+watch(
+  () => props.value,
+  () => {
+    val.value = props.value;
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 const options = ref([]);
 
 // #endregion

sub-government-affairs-service/src/views/landManage/component/landsManage/common/CreateLand.vue

@@ -2,7 +2,7 @@
   <el-drawer v-model="_visible" title="土地信息" :size="800" @close="handleClose">
     <el-card>
       <div class="title_">基础信息</div>
-      <el-form ref="baseForm" :model="baseInfo" class="base_form" label-width="120px">
+      <el-form ref="baseForm" :model="baseInfo" class="base_form" label-width="120px" :rules="rules">
         <el-form-item label="土地名称" prop="landName">
           <el-input v-model="baseInfo.landName" placeholder="请输入名称"></el-input>
         </el-form-item>
@@ -19,7 +19,7 @@
             placeholder="请选择所属网格"
           />
         </el-form-item>
-        <el-form-item label="用地分类" prop="LandType">
+        <el-form-item label="用地分类" prop="landClassificationType">
           <LandClassificationType v-model:value="baseInfo.landClassificationType" placeholder="请选择用地分类" />
         </el-form-item>
         <el-form-item label="位置" prop="villageCode">
@@ -49,14 +49,18 @@
         <el-form-item label="产权人联系电话" prop="propertyPhone">
           <el-input v-model="propertyInfo.propertyPhone" placeholder="请输入联系人"></el-input>
         </el-form-item>
-        <el-form-item label="产权编号" prop="landCode">
+        <el-form-item label="产权编号" prop="landCode" class="land_code">
           <el-input v-model="propertyInfo.landCode" placeholder="请输入联系人"></el-input>
         </el-form-item>
-        <!-- <el-form-item label="产权证书" prop="propertyCertificateUrl">
+        <el-form-item label="产权证书" prop="propertyCertificateUrl" class="attrs_content">
           <el-upload class="custom-form__uploader" action="#" :show-file-list="false" accept="image/*" :limit="20" :http-request="rowUploadPicture">
             <el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
           </el-upload>
-        </el-form-item> -->
+          <div v-for="item in propertyInfo.propertyCertificateUrl" :key="`attr_${item.id}`" class="attrs_content__item">
+            <img :src="item.url" :alt="item.name" style="width: 100%; height: 100%" />
+            <el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
+          </div>
+        </el-form-item>
       </el-form>
     </el-card>
     <section class="btns">
@@ -72,7 +76,7 @@ import { reactive, ref, watch } from 'vue';
 import LandClassificationType from '@/components/LandClassificationType.vue';
 import CustomSelect from '@/components/CustomSelect.vue';
 import LandIsTranfer from '@/components/LandIsTranfer.vue';
-import { lnadSave } from '@/apis/land';
+import { lnadSave, exportLands } from '@/apis/land';
 import { ElMessage } from 'element-plus';
 import { CommonUpload } from '@/apis';
 
@@ -101,7 +105,7 @@ const propertyInfo = reactive({
   propertyName: '',
   propertyPhone: '',
   landCode: '',
-  propertyCertificateUrl: '',
+  propertyCertificateUrl: [],
 });
 watch(
   () => props.visible,
@@ -117,6 +121,12 @@ watch(
 );
 const baseForm = ref();
 const propertyForm = ref();
+const rules = reactive({
+  landName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  gridId: [{ required: true, message: '请选择所属网格', trigger: 'blur' }],
+  landClassificationType: [{ required: true, message: '请选择用地分类', trigger: 'blur' }],
+  villageCode: [{ required: true, message: '请输入位置', trigger: 'blur' }],
+});
 // #endregion
 
 /* --------------- methods --------------- */
@@ -126,23 +136,35 @@ const rowUploadPicture = async ({ file }) => {
   formData.append('file', file);
   const res = await CommonUpload(formData);
   if (res.code === 200) {
+    propertyInfo.propertyCertificateUrl.push({
+      ...res.data,
+      id: 'id_' + Date.now(),
+    });
     console.log('---', res);
     // state.form.productUrl = res.data.url;
     // const base64 = await imageToBase64(file);
     // state.form.base64 = base64;
   }
 };
+function handleClearAttr(id) {
+  propertyInfo.propertyCertificateUrl = propertyInfo.propertyCertificateUrl.filter((item) => item.id !== id);
+}
 async function handleSubmit() {
-  const data = {
+  baseForm.value.validate().then(async () => {
-    ...baseInfo,
+    const data = {
-    ...propertyInfo,
+      ...baseInfo,
-    isDraftsSave: 0,
+      ...propertyInfo,
-  };
+      isDraftsSave: 0,
-  const res = await lnadSave(data);
+    };
-  if (res.code == 200) {
+    let ids = '';
-    ElMessage.success('保存成功');
+    propertyInfo.propertyCertificateUrl.map((item) => (ids += item.id));
-    resFrom();
+    data.propertyCertificateUrl = ids;
-  }
+    const res = await lnadSave(data);
+    if (res.code == 200) {
+      ElMessage.success('保存成功');
+      resFrom();
+    }
+  });
 }
 function handleClose() {
   resFrom();
@@ -157,6 +179,9 @@ function resFrom() {
 </script>
 
 <style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
 .title_ {
   margin-bottom: 12px;
   font-size: 16px;
@@ -175,4 +200,47 @@ function resFrom() {
   grid-template-columns: auto auto auto;
   gap: 12px;
 }
+.attrs_content__item {
+  position: relative;
+  padding: 6px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  img {
+    border-radius: 2px;
+  }
+  .clear_btn {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    font-size: 18px;
+    color: #f15c5c;
+    opacity: 0;
+    cursor: pointer;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+  &:hover {
+    .clear_btn {
+      opacity: 1;
+    }
+  }
+}
+::v-deep() {
+  .land_code {
+    .el-form-item__content {
+      align-items: baseline;
+    }
+  }
+  .attrs_content {
+    .el-form-item__content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      > div {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}
 </style>

sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue

@@ -29,13 +29,13 @@
       </el-row>
     </el-form>
     <div class="options_btns">
-      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
+      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" :disabled="item.needKey && item.disabled" @click="item.method">
         {{ item.label }}
       </el-button>
     </div>
-    <el-table :data="list">
+    <el-table :data="list" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" />
-      <el-table-column type="index"> </el-table-column>
+      <el-table-column type="index" label="序号" width="100"> </el-table-column>
       <el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
       <el-table-column label="地址" prop="address" show-overflow-tooltip />
       <el-table-column label="产权人" prop="owner" show-overflow-tooltip />
@@ -43,19 +43,20 @@
       <el-table-column label="农用地分类" prop="landClassificationType" show-overflow-tooltip />
       <el-table-column label="面积" prop="978.2" show-overflow-tooltip />
       <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
-      <el-table-column label="是否土地流转" prop="landTransfer" show-overflow-tooltip>
+      <el-table-column label="是否土地流转" prop="landTransfer" width="110">
         <template #default="{ row }">
           {{ !row.landTransfer ? '是' : '否' }}
         </template>
       </el-table-column>
-      <el-table-column label="产权编号" prop="" show-overflow-tooltip />
+      <el-table-column label="产权编号" prop="landCode" show-overflow-tooltip />
       <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
-      <el-table-column label="是否上传附件" prop="isUpload" show-overflow-tooltip>
+      <el-table-column label="是否上传附件" prop="isUpload" width="110">
         <template #default="{ row }">{{ !row.isUpload ? '是' : '否' }}</template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip />
     </el-table>
-    <Pagina :page-data="pageData" />
+    <br />
+    <Pagina :page-data="pageData" @page-change="(v) => handlePaginaChange(v, true)" @size-hange="(v) => handlePaginaChange(v)" />
   </CustCard>
   <CreateLand :visible="addFlag" @close="addFlag = false" />
 </template>
@@ -102,6 +103,7 @@ const pageData = reactive({
 });
 
 const list = ref([]);
+const selectRowKeys = ref([]);
 const btns = reactive([
   {
     label: '新增土地',
@@ -110,22 +112,24 @@ const btns = reactive([
       addFlag.value = true;
     },
   },
-  {
+  // {
-    label: '审核',
+  //   label: '审核',
-    disabled: true,
+  //   disabled: true,
-    method: function () {
+  //   method: function () {
-      console.log('examine');
+  //     console.log('examine');
-    },
+  //   },
-  },
+  // },
   {
     label: '导入',
-    disabled: false,
+    needKey: true,
+    disabled: true,
     method: function () {
       console.log('import');
     },
   },
   {
     label: '导出',
+    needKey: true,
     disabled: true,
     method: function () {
       console.log('export');
@@ -156,6 +160,23 @@ function handleResetSearch() {
   searchRef.value && searchRef.value.resetFields();
   getLandsList();
 }
+function handleSelectionChange(val) {
+  console.log(val);
+  selectRowKeys.value = val.map((item) => item.id);
+  btns.forEach((item) => {
+    if (item.needKey) {
+      item.disabled = !selectRowKeys.value.length;
+    }
+  });
+}
+function handlePaginaChange(v, t = false) {
+  if (t) pageData.page = v;
+  else {
+    pageData;
+    pageData.size = v;
+  }
+  getList();
+}
 // #endregion
 </script>