From 05e93d5ecd313df1e52d856640c1886455f51b3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=83=B3?= <826276471@qq.com>
Date: Mon, 3 Mar 2025 16:28:34 +0800
Subject: [PATCH] style

---
 .../src/apis/casualLandApi.js                 |   3 +
 .../src/apis/land.js                          |  11 +-
 .../component/landsManage/index.vue           | 548 +++++++++++++-----
 .../component/landsManage/useLandHook.js      |  43 ++
 4 files changed, 448 insertions(+), 157 deletions(-)
 create mode 100644 sub-government-affairs-service/src/apis/casualLandApi.js
 create mode 100644 sub-government-affairs-service/src/views/landManage/component/landsManage/useLandHook.js

diff --git a/sub-government-affairs-service/src/apis/casualLandApi.js b/sub-government-affairs-service/src/apis/casualLandApi.js
new file mode 100644
index 0000000..329bb62
--- /dev/null
+++ b/sub-government-affairs-service/src/apis/casualLandApi.js
@@ -0,0 +1,3 @@
+import request from '@/utils/request';
+
+
diff --git a/sub-government-affairs-service/src/apis/land.js b/sub-government-affairs-service/src/apis/land.js
index d1c657b..3d7cee1 100644
--- a/sub-government-affairs-service/src/apis/land.js
+++ b/sub-government-affairs-service/src/apis/land.js
@@ -1,4 +1,5 @@
 import request from '@/utils/axios';
+
 /* 土地列表 */
 export function getLandsList(params = {}) {
   return request('land-resource/landManage/page', {
@@ -7,10 +8,10 @@ export function getLandsList(params = {}) {
   });
 }
 
-export function saveLand(params = {}) {
+export function saveLand(data = {}) {
   return request('land-resource/landManage/save', {
     method: 'POST',
-    params,
+    data,
   });
 }
 export function exportLands(params = {}) {
@@ -125,3 +126,9 @@ export function delPlantingStage(params) {
     method: 'DELETE',
   });
 }
+/* 删除土地 */
+export function delLand(id) {
+  return request('land-resource/landManage/delete/' + id, {
+    method: 'DELETE',
+  });
+}
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 c247468..05e9bef 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
@@ -1,144 +1,307 @@
 <template>
   <CustomCard>
-    <el-radio-group v-model="searchCondition.landType" class="lands_types" style="margin-bottom: 30px" @change="getList()">
+    <el-radio-group v-model="landType" class="lands_types" style="margin-bottom: 30px" @change="getList()">
       <el-radio-button v-for="item in landsType" :key="'landsType_' + item.value" :value="item.value">
         {{ item.label }}
       </el-radio-button>
     </el-radio-group>
-    <el-form ref="searchRef" :model="searchCondition">
-      <el-row :gutter="20">
-        <el-col :span="6">
-          <el-form-item label="土地名称:" prop="landName">
-            <el-input v-model="searchCondition.landName" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="所属网格" prop="gridName">
-            <el-input v-model="searchCondition.gridName" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="产权人" prop="owner">
-            <el-input v-model="searchCondition.owner" placeholder="请输入"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-button type="primary" @click="getList()">查询</el-button>
-          <el-button type="" @click="handleResetSearch">重置</el-button>
-        </el-col>
-      </el-row>
-    </el-form>
-    <div class="options_btns">
-      <el-button v-for="(item, i) in btns" :key="'btns_' + i" type="primary" @click="item.method">
-        {{ item.label }}
-      </el-button>
-    </div>
-    <el-table :data="list" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <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 />
-      <el-table-column label="所属网格" prop="gridName" show-overflow-tooltip />
-      <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" width="110">
-        <template #default="{ row }">
-          {{ !row.landTransfer ? '是' : '否' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="产权编号" prop="landCode" show-overflow-tooltip />
-      <el-table-column label="土壤类型" prop="soilType" 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>
-        <template #default="{ row }">
-          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-          <el-button type="info" link @click="handleEdit(row, true)">详情</el-button>
-          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <br />
-    <Pagina :page-data="pageData" @page-change="(v) => handlePaginaChange(v, true)" @size-hange="(v) => handlePaginaChange(v)" />
+    <avue-crud
+      ref="crudRef"
+      v-model:page="pageData"
+      v-model:search="searchData"
+      class="custon_create_land_"
+      :data="data"
+      :option="option"
+      @current-change="handlePageChange"
+      @size-change="handleSizeChange"
+      @search-reset="handleResetSearch"
+      @search-change="handleSearch"
+      @row-save="handleRowSave"
+    >
+      <!-- <template #menu-form>
+        <CreateLand :row-data="rowData" :land-type="0" />
+      </template> -->
+      <template #menu-left>
+        <el-button type="success" icon="upload">导入</el-button>
+        <el-button type="success" icon="download" @click="handleExport">导出</el-button>
+      </template>
+      <template #menu="{ row }">
+        <el-button type="info" link @click="handleView(row)">查看</el-button>
+        <el-popconfirm title="确定删除该土地?" @confirm="() => handleDelete(row.id)">
+          <template #reference>
+            <el-button type="danger" link>删除</el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+
+      <template #propertyCertificateUrl-form="{ type }">
+        <section class="create_land_attrs_content_">
+          <el-upload
+            v-if="type !== 'view'"
+            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>
+          <div v-for="item in attrs" :key="`attr_${item.id}`" class="attrs_content__item">
+            <img :src="item.url" :alt="item.name" style="" />
+            <el-icon class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
+          </div>
+        </section>
+      </template>
+    </avue-crud>
   </CustomCard>
-  <CreateLand :visible="addFlag" :row-data="rowData" :land-type="searchCondition.landType" @close="addFlag = false" />
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import Pagina from '@/components/pagina.vue';
-import CustomCard from '@/components/CustomCard.vue';
-import { getLandsList, exportLands } from '@/apis/land.js';
-import CreateLand from './common/CreateLand.vue';
+import CustomCard from '@/components/CustomCard';
+import { CRUD_OPTIONS } from '@/config';
+import { useUserStore } from '@/store/modules/user';
+import { getLandsList, exportLands, delLand, saveLand } from '@/apis/land.js';
+import { ElMessage } from 'element-plus';
 
+import useLandHook from './useLandHook';
+import { CommonUpload } from '@/apis';
+import { get } from 'lodash';
+const { landType, landsType, landClassificationType, handleIficationType } = useLandHook();
+const { VITE_APP_BASE_API } = import.meta.env;
+const UserStore = useUserStore();
+
+const landClassificationType_ = ref('');
 onMounted(() => {
   getList();
 });
 
 /* --------------- data --------------- */
 // #region
-const addFlag = ref(false);
-const landsType = ref([
-  {
-    value: '0',
-    label: '农用地',
-  },
-  {
-    value: '1',
-    label: '住宅用地',
-  },
-  {
-    value: '2',
-    label: '园林',
-  },
-]);
-const searchCondition = reactive({
-  landType: '0',
+
+const crudRef = ref();
+const pageData = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+const data = ref([]);
+const option = reactive({
+  ...CRUD_OPTIONS,
+  selection: false,
+  menuWidth: 120,
+  column: [
+    {
+      label: '地块名',
+      prop: 'landName',
+      search: true,
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '地址',
+      prop: 'address',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '产权人',
+      prop: 'owner',
+      search: true,
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '所属网格',
+      prop: 'gridName',
+      // type: 'select',
+      search: true,
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '农用地分类',
+      prop: 'landClassificationType',
+      select: 'select',
+      dicData: landClassificationType,
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '面积',
+      prop: 'area',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '坐标',
+      prop: 'coordinate',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '是否流转土地',
+      prop: 'landTransfer',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '产权编号',
+      prop: 'landCode',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '土壤类型',
+      prop: 'soilType',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+    {
+      label: '是否上传附件',
+      prop: 'isUpload',
+      addDisplay: false,
+      display: false,
+      editDisplay: false,
+    },
+  ],
+  group: [
+    {
+      label: '用户信息',
+      prop: 'baseGroup',
+      column: [
+        {
+          label: '土地名称',
+          prop: 'landName',
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+              trigger: 'blur',
+            },
+          ],
+        },
+        {
+          label: '所属网格',
+          prop: 'gridId',
+          type: 'select',
+          dicUrl: `${VITE_APP_BASE_API}/land-resource/gridManage/page`,
+          dicQuery: {
+            current: 1,
+            size: 9999,
+          },
+          props: {
+            value: 'id',
+            label: 'gridName',
+          },
+          dicMethod: 'get',
+          dicHeaders: {
+            authorization: UserStore.token,
+          },
+          dicFormatter: (res) => res?.data?.records ?? [],
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+              trigger: 'blur',
+            },
+          ],
+        },
+        {
+          label: '用地分类',
+          prop: 'landClassificationType',
+          type: 'select',
+          dicData: landClassificationType,
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+              trigger: 'blur',
+            },
+          ],
+        },
+        {
+          label: '位置',
+          prop: 'villageCode',
+          rules: [
+            {
+              required: true,
+              message: '请输入',
+              trigger: 'blur',
+            },
+          ],
+        },
+        {
+          label: '是否土地流转',
+          prop: 'isTransfer',
+          type: 'select',
+          dicData: [
+            {
+              label: '是',
+              value: '0',
+            },
+            {
+              label: '否',
+              value: '1',
+            },
+          ],
+        },
+        {
+          label: '面积',
+          prop: 'area',
+        },
+        {
+          label: '产权人',
+          prop: 'owner',
+        },
+        {
+          label: '土壤类型',
+          prop: 'soilType',
+        },
+      ],
+    },
+    {
+      label: '土地产权信息',
+      prop: 'baseGroup',
+      column: [
+        {
+          label: '产权人姓名',
+          prop: 'propertyName',
+        },
+        {
+          label: '产权人联系电话',
+          prop: 'propertyPhone',
+        },
+        {
+          label: '产权编号',
+          prop: 'landCode',
+        },
+        {
+          label: '产权证书',
+          prop: 'propertyCertificateUrl',
+        },
+      ],
+    },
+  ],
+});
+const searchData = reactive({
   landName: '',
   gridName: '',
   owner: '',
 });
-const searchRef = ref();
-const pageData = reactive({
-  page: 1,
-  size: 10,
-  total: 0,
-});
-
-const list = ref([]);
-const selectRowKeys = ref([]);
-const btns = reactive([
-  {
-    label: '新增土地',
-    method: function () {
-      console.log('add');
-      rowData.value = {};
-      addFlag.value = true;
-    },
-  },
-  // {
-  //   label: '审核',
-  //   disabled: true,
-  //   method: function () {
-  //     console.log('examine');
-  //   },
-  // },
-  {
-    label: '导入',
-    method: function () {
-      console.log('import');
-    },
-  },
-  {
-    label: '导出',
-    method: handleExport,
-  },
-]);
-const rowData = ref({});
-
+const attrs = ref([]);
+const rowData = ref([]);
 // #endregion
 
 /* --------------- methods --------------- */
@@ -146,47 +309,67 @@ const rowData = ref({});
 
 async function getList() {
   const params = {
-    current: pageData.page,
-    size: pageData.size,
-    ...searchCondition,
+    current: pageData.currentPage,
+    size: pageData.pageSize,
+    landType: landType.value,
+    ...searchData,
   };
   let res = await getLandsList(params);
   console.log('res ---------', res);
   if (res.code == 200) {
-    list.value = res.data.records;
+    data.value = res.data.records;
     pageData.total = res.data.total;
   }
 }
-function handleResetSearch() {
-  console.log('searchRef', searchRef.value);
-  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;
-  }
+function handlePageChange(val) {
+  console.log('page', val);
+  pageData.currentPage = val;
   getList();
 }
-const attrNames = ref(['农用地', '住宅用地', '园林']);
+function handleSizeChange(val) {
+  pageData.pageSize = val;
+  getList();
+}
+async function handleSearch(form, done) {
+  for (let key in form) {
+    searchData[key] = form[key];
+  }
+  await getList();
+  done();
+}
+async function handleResetSearch() {
+  for (let key in searchData) {
+    searchData[key] = '';
+  }
+  pageData.currentPage = 1;
+  pageData.pageSize = 10;
+  pageData.total = 0;
+  await getList();
+}
+async function handleRowSave(val, done, loading) {
+  let data = JSON.parse(JSON.stringify(val));
+  data.isDraftsSave = 0;
+  data.landType = 0;
+  let urls = [];
+  if (data.propertyCertificateUrl.length) {
+    data.propertyCertificateUrl.forEach((item) => urls.push(item.url));
+  }
+  data.propertyCertificateUrl = urls.join();
+  const res = await saveLand(data);
+  if (res.code == 200) {
+    ElMessage.success('保存成功');
+    getList();
+    done();
+  }
+}
 async function handleExport() {
   let res = await exportLands({
-    landType: searchCondition.landType,
+    landType: 1,
   });
   if (res) {
     let a = document.createElement('a');
-    a.download = attrNames.value[Number(searchCondition.landType)] + '.xlsx';
+    // a.download = attrNames.value[Number(searchCondition.landType)] + '.xlsx';
+    a.download = 'test.xlsx';
     let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     let link = window.URL.createObjectURL(blob);
     a.href = link;
@@ -196,11 +379,30 @@ async function handleExport() {
     window.URL.revokeObjectURL(link);
   }
 }
-function handleEdit(row, info = true) {
-  rowData.value = row;
-  rowData.value.isDetails = info;
-  addFlag.value = true;
-  console.log('rowd', rowData.value);
+const rowUploadPicture = async ({ file }) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await CommonUpload(formData);
+  if (res.code === 200) {
+    attrs.value.push({
+      ...res.data,
+      id: 'id_' + Date.now(),
+    });
+  }
+};
+function handleClearAttr(id) {
+  attrs.value = attrs.value.filter((item) => item.id !== id);
+}
+async function handleDelete(id) {
+  let res = await delLand(id);
+  if (res.code == 200) {
+    getList();
+  }
+}
+function handleView(obj) {
+  rowData.value = obj;
+  console.log('row', rowData.value);
+  crudRef.value.rowView(obj);
 }
 // #endregion
 </script>
@@ -218,10 +420,46 @@ function handleEdit(row, info = true) {
     }
   }
 }
-.options_btns {
-  margin-bottom: 12px;
-  .el-button {
-    width: 120px;
+.create_land_attrs_content_ {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  gap: 20px;
+  .custom-form__uploader {
+    box-sizing: border-box;
+    height: auto;
+  }
+  > div {
+    width: calc(50% - 10px);
+    aspect-ratio: 1 / 1;
+  }
+  .attrs_content__item {
+    box-sizing: border-box;
+    position: relative;
+    padding: 6px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    img {
+      width: 100%;
+      height: 100%;
+      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;
+      }
+    }
   }
 }
 </style>
diff --git a/sub-government-affairs-service/src/views/landManage/component/landsManage/useLandHook.js b/sub-government-affairs-service/src/views/landManage/component/landsManage/useLandHook.js
new file mode 100644
index 0000000..e80d1bb
--- /dev/null
+++ b/sub-government-affairs-service/src/views/landManage/component/landsManage/useLandHook.js
@@ -0,0 +1,43 @@
+import { ref, reactive } from 'vue';
+export default function useLandHook() {
+  const landType = ref('0');
+  const landsType = reactive([
+    {
+      value: '0',
+      label: '农用地',
+    },
+    {
+      value: '1',
+      label: '住宅用地',
+    },
+    {
+      value: '2',
+      label: '园林',
+    },
+  ]);
+  const landClassificationType = reactive([
+    { label: '耕地', value: '0' },
+    { label: '果园', value: '1' },
+    { label: '茶园', value: '2' },
+    { label: '其他园地', value: '3' },
+    { label: '林地', value: '4' },
+    { label: '草地', value: '5' },
+    { label: '其他农用地', value: '6' },
+    { label: '农村宅基地', value: '7' },
+  ]);
+  function handleIficationType(t = 0) {
+    let arr = landClassificationType.filter((v) => v.value == t);
+
+    let txt = '--';
+    if (arr.length > 0) {
+      txt = arr[0].label;
+    }
+    return txt;
+  }
+  return {
+    landType,
+    landsType,
+    landClassificationType,
+    handleIficationType,
+  };
+}