feat:土地违法页面搭建

2025-02-28 16:57:40 +08:00 · 2025-02-28 16:57:40 +08:00 · 17d57cfee8
commit 17d57cfee8
parent 15932fe654 ac0eef1407
2 changed files with 227 additions and 62 deletions
--- a/sub-government-affairs-service/src/apis/land.js
+++ b/sub-government-affairs-service/src/apis/land.js
@ -21,6 +21,7 @@ export function exportLands(params = {}) {
  });
 }

+//年度计划相关
 export function getAnnualList(params = {}) {
  return request('land-resource/annualManage/page', {
    method: 'GET',
@ -61,3 +62,33 @@ export function delAnnual(params) {
    params,
  });
 }
+
+//种植规划相关
+export function getPlanList(params = {}) {
+  return request('land-resource/planManage/page', {
+    method: 'GET',
+    params,
+  });
+}
+
+export function savePlan(data) {
+  return request('land-resource/planManage/save', {
+    method: 'POST',
+    data,
+  });
+}
+
+export function editAlan(data = {}) {
+  return request('land-resource/planManage/edit', {
+    method: 'PUT',
+    data,
+  });
+}
+
+export function exportPlan(params = {}) {
+  return request('/land-resource/planManage/export', {
+    method: 'GET',
+    params,
+    responseType: 'blob',
+  });
+}
--- a/sub-government-affairs-service/src/views/landManage/component/plantPlan/index.vue
+++ b/sub-government-affairs-service/src/views/landManage/component/plantPlan/index.vue
@ -1,3 +1,4 @@
+<!-- eslint-disCustomCardnst-assign -->
 <template>
  <CustomCard>
    <el-form ref="searchRef" :model="searchCondition">
@ -24,74 +25,98 @@
      </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" :loading="item.loading" @click="item.method">
        {{ item.label }}
      </el-button>
    </div>
-    <el-table :data="list">
+    <el-table :data="list" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index"> </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="landClassificationType" show-overflow-tooltip />
-      <el-table-column label="面积" prop="978.2" show-overflow-tooltip />
+      <el-table-column label="农用地分类" prop="landClassificationType" width="120" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-tag type="primary" :hit="true" size="small" effect="plain">{{ landClassificationType[row.landClassificationType] }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="面积" prop="area" show-overflow-tooltip />
      <el-table-column label="坐标" prop="coordinate" show-overflow-tooltip />
      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
-      <el-table-column label="种植产物" prop="" show-overflow-tooltip />
-      <el-table-column label="种子供应商" prop="" show-overflow-tooltip />
-      <el-table-column label="年度计划" prop="" show-overflow-tooltip />
-      <el-table-column label="种植日期" prop="" show-overflow-tooltip />
+      <el-table-column label="种植产物" prop="crop" show-overflow-tooltip />
+      <el-table-column label="种子供应商" prop="seedSupplier" show-overflow-tooltip />
+      <el-table-column label="年度计划" prop="planName" show-overflow-tooltip />
+      <el-table-column label="种植日期" prop="planDate" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
-        <el-button type="primary" @click="doEdit()">编辑</el-button>
-        <el-button type="danger" @click="doDel()">删除</el-button>
+        <template #default="{ row }">
+          <el-button type="primary" @click="doEdit(row)">编辑</el-button>
+          <el-button type="danger" @click="doDel(row)">删除</el-button>
+        </template>
      </el-table-column>
    </el-table>
-    <Pagina :page-data="pageData" />
+    <Pagina :page-data="pageData" @page-change="pageChange" />
    <el-dialog v-model="infoVisible" title="种植规划" width="1000" center>
      <el-form ref="infoRef" :model="infoData" :rules="infoRules">
        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="地块名:" prop="landName">
-              <el-input v-model="infoData.landName" placeholder="请输入" style="width: 240px"></el-input>
+          <!--<el-col :span="12">
+            <el-form-item label="地块:" prop="landId">
+              <CustomSelect
+                v-model:value="infoData.landId"
+                :set="{
+                  url: 'land-resource/landManage/page',
+                  props: {
+                    value: 'id',
+                    label: 'landName',
+                  },
+                }"
+                placeholder="请选择地块"
+              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" prop="gridName">
              <el-input v-model="infoData.gridName" placeholder="请输入面积" style="width: 240px"></el-input>
            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
+          </el-col> -->
          <el-col :span="12">
-            <el-form-item label="种植产物" prop="gridName">
-              <el-input v-model="infoData.gridName" placeholder="请输入种植产物" style="width: 240px"></el-input>
+            <el-form-item label="种植产物" prop="crop">
+              <el-input v-model="infoData.crop" placeholder="请输入种植产物" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
-            <el-form-item label="种植日期" prop="gridName">
+            <el-form-item label="种植日期" prop="planDate">
              <el-date-picker
-                v-model="infoData.date"
+                v-model="infoData.planDate"
                type="date"
                placeholder="请选择种植日期"
                :disabled-date="disabledDate"
-                :shortcuts="shortcuts"
+                format="YYYY/MM/DD"
+                value-format="YYYY/MM/DD"
                :size="size"
              />
            </el-form-item>
          </el-col>
-        </el-row>
-        <el-row :gutter="20">
          <el-col :span="12">
-            <el-form-item label="种子供应商" prop="gridName">
-              <el-input v-model="infoData.gridName" placeholder="请输入种子供应商" style="width: 240px"></el-input>
+            <el-form-item label="种子供应商" prop="seedSupplier">
+              <el-input v-model="infoData.seedSupplier" placeholder="请输入种子供应商" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
-            <el-form-item label="年度计划" prop="gridName">
-              <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
+            <el-form-item label="年度计划" prop="planId">
+              <!-- <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
+              </el-select> -->
+              <CustomSelect
+                v-model:value="infoData.planId"
+                :set="{
+                  url: 'land-resource/annualManage/page',
+                  props: {
+                    value: 'id',
+                    label: 'planName',
+                  },
+                }"
+                placeholder="请选择种植计划"
+              />
            </el-form-item>
          </el-col>
        </el-row>
@ -146,8 +171,10 @@
 import { ref, reactive, onMounted } from 'vue';
 import Pagina from '@/components/pagina.vue';
 import CustomCard from '@/components/CustomCard.vue';
-import { getLandsList, saveLand } from '@/apis/land.js';
+import { getPlanList, savePlan, exportPlan, editAlan } from '@/apis/land.js';
 import { useApp } from '@/hooks';
+import CustomSelect from '@/components/CustomSelect.vue';
+import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
 onMounted(() => {
  getList();
 });
@ -168,38 +195,52 @@ const pageData = reactive({
  size: 10,
  total: 0,
 });
+const landClassificationType = reactive({
+  0: '耕地',
+  1: '果园',
+  2: '茶园',
+  3: '其他园地',
+  4: '林地',
+  5: '草地',
+  6: '其他农用地',
+  7: '农村宅基地',
+});

+let selectIds = ref('');
 const infoVisible = ref(false);
 const infoRef = ref();
 const list = ref([]);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
 const btns = reactive([
  {
    label: '新增种植规划',
+    loading: false,
    method: function () {
      console.log('add');
+      if (selectIds.value.length <= 0) {
+        app.$message.error('请先选择地块');
+        return;
+      }
      infoVisible.value = true;
-      let parmer = {
-        landId: '1892400039696359426,1892400422703423489',
-        planId: '1890242496744136706',
-        crop: '水稻',
-        seedSupplier: '园艺',
-        planDate: '2025-02-25',
-      };
-      saveLand({})
-        .then((res) => {
-          if (res.code === 200) {
-            app.$message.success('添加成功！');
-          }
-        })
-        .catch((err) => {
-          app.$message.error(err.msg);
-        })
-        .finally(() => {});
    },
  },
  {
    label: '导入',
    disabled: false,
+    loading: false,
    method: function () {
      console.log('import');
    },
@ -207,22 +248,44 @@ const btns = reactive([
  {
    label: '导出',
    disabled: true,
+    loading: state.loading,
    method: function () {
-      console.log('export');
+      if (isEmpty(state.data)) {
+        app.$message.error('当前暂时没有可供导出的数据！');
+        return;
+      }
+      state.loading = true;
+      const fileName = '种植计划明细表';
+      exportPlan(state.query)
+        .then((res) => {
+          if (res.status === 200) {
+            downloadFile(res.data, `${fileName}.xlsx`, 'blob');
+            app.$message.success('导出成功！');
+          }
+        })
+        .catch((err) => {
+          app.$message.error('导出失败！');
+        })
+        .finally(() => {
+          state.loading = false;
+        });
    },
  },
 ]);

-const infoData = reactive({
-  landName: '',
-  gridName: '',
-  owner: '',
-  date: '',
-  plan: '',
+let infoData = reactive({
+  landId: [], //土地主键id
+  planId: '', //种植规划主键id
+  crop: '', //种植产物
+  seedSupplier: '', //供应商
+  planDate: '', //种植时间
 });

 const infoRules = reactive({
-  landName: [{ required: true, message: '请输入地块名', trigger: 'blur' }],
+  crop: [{ required: true, message: '请输入种植产物', trigger: 'blur' }],
+  planId: [{ required: true, message: '请选择种植计划', trigger: 'blur' }],
+  seedSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
+  planDate: [{ required: true, message: '请选择种植时间', trigger: 'blur' }],
 });
 const options = reactive([
  {
@ -262,21 +325,60 @@ const stageOptions = reactive([
 // #region

 async function getList() {
-  const params = { current: pageData.page, size: pageData.size };
-  let { code, data, msg } = await getLandsList(params);
+  const params = { current: pageData.page, size: pageData.size, ...searchCondition };
+  let { code, data, msg } = await getPlanList(params);
  //console.log('res ---------', data);
  list.value = data.records || [];
  pageData.total = data.total;
+  state.data = data.records;
+  state.pageData = {
+    currentPage: data.current || 1,
+    pageSize: data.size || 10,
+    total: data.total,
+  };
 }

 function handleResetSearch() {
  searchRef.value && searchRef.value.resetFields();
-  getLandsList();
+  getList();
 }

-function doEdit() {
-  console.info('编辑');
+const selectionChange = (data) => {
+  let datalist = data.map((m) => {
+    return { landId: m.landId, landName: m.landName };
+  });
+
+  let selectIdlist = uniqueObjects(datalist, 'landId');
+  let selectIdsVal = selectIdlist.map((n) => {
+    return n.landId;
+  });
+
+  selectIds.value = selectIdsVal.toString();
+  console.info('selectionChange', selectIds.value);
+};
+
+const pageChange = (data) => {
+  console.info('pageChange', data);
+  pageData.page = data;
+  getList();
+};
+
+function uniqueObjects(arr, key) {
+  return arr.reduce((acc, current) => {
+    const duplicate = acc.find((element) => element[key] === current[key]);
+    if (!duplicate) {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+}
+
+function doEdit(row) {
  infoVisible.value = true;
+  infoData = reactive({
+    ...row,
+  });
+  console.info('编辑', infoData);
 }

 function doDel() {
@ -306,8 +408,40 @@ const subMitInfo = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
-      infoHide();
-      console.log('submit!');
+      let parmer = {
+        ...infoData,
+        landId: selectIds.value || '',
+      };
+
+      console.info('新增种植计划', parmer);
+
+      if (parmer.id) {
+        editAlan(parmer)
+          .then((res) => {
+            if (res.code === 200) {
+              app.$message.success('编辑成功！');
+              getList();
+              infoHide();
+            }
+          })
+          .catch((err) => {
+            app.$message.error(err.msg);
+          })
+          .finally(() => {});
+      } else {
+        savePlan(parmer)
+          .then((res) => {
+            if (res.code === 200) {
+              getList();
+              infoHide();
+              app.$message.success('添加成功！');
+            }
+          })
+          .catch((err) => {
+            app.$message.error(err.msg);
+          })
+          .finally(() => {});
+      }
    } else {
      console.log('error submit!');
    }