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

<template>
  <CustCard>
    <el-radio-group v-model="searchCondition.draftsSaveType" 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">
      <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="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" show-overflow-tooltip>
        <template #default="{ row }">
          {{ !row.landTransfer ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="产权编号" prop="" show-overflow-tooltip />
      <el-table-column label="土壤类型" prop="soilType" show-overflow-tooltip />
      <el-table-column label="是否上传附件" prop="isUpload" show-overflow-tooltip>
        <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" />
  </CustCard>
  <CreateLand />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Pagina from '@/components/pagina.vue';
import CustCard from '@/components/CustCard.vue';
import { getLandsList } from '@/apis/land.js';
import CreateLand from './common/CreateLand.vue';

onMounted(() => {
  getList();
});

/* --------------- data --------------- */
// #region
const landsType = ref([
  {
    value: '0',
    label: '农用地',
  },
  {
    value: '1',
    label: '住宅用地',
  },
  {
    value: '2',
    label: '园林',
  },
]);
const searchCondition = reactive({
  draftsSaveType: '0',
  landName: '',
  gridName: '',
  owner: '',
});
const searchRef = ref();
const pageData = reactive({
  page: 1,
  size: 10,
  total: 0,
});

const list = ref([]);
const btns = reactive([
  {
    label: '新增土地',
    method: function () {
      console.log('add');
    },
  },
  {
    label: '审核',
    disabled: true,
    method: function () {
      console.log('examine');
    },
  },
  {
    label: '导入',
    disabled: false,
    method: function () {
      console.log('import');
    },
  },
  {
    label: '导出',
    disabled: true,
    method: function () {
      console.log('export');
    },
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region

async function getList() {
  const params = {
    current: pageData.page,
    size: pageData.size,
    ...searchCondition,
  };
  let res = await getLandsList(params);
  console.log('res ---------', res);
}
function handleResetSearch() {
  console.log('searchRef', searchRef.value);
  searchRef.value && searchRef.value.resetFields();
  getLandsList();
}
// #endregion
</script>

<style lang="scss" scoped>
.lands_types {
  width: 100%;
  justify-content: center;
  > label {
    width: 12%;
    ::v-deep() {
      .el-radio-button__inner {
        width: 100%;
      }
    }
  }
}
.options_btns {
  margin-bottom: 12px;
  .el-button {
    width: 120px;
  }
}
</style>