核查图斑页面搭建

src/views/pageCode/checkLand/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['rsmonitoring:dkjbxx:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['rsmonitoring:dkjbxx:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['rsmonitoring:dkjbxx:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['rsmonitoring:dkjbxx:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dkjbxxList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="地块编号" align="center" prop="dkbh" />
+      <el-table-column label="监测面积(亩)" align="center" prop="dkmj" />
+      <el-table-column label="行政区名称" align="center" prop="xmc" />
+      <el-table-column label="前类型" align="center" prop="qlx" />
+      <el-table-column label="后类型" align="center" prop="hlx" />
+      <el-table-column label="前时相" align="center" prop="qsx" />
+      <el-table-column label="后时相" align="center" prop="hsx" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['rsmonitoring:dkjbxx:edit']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['rsmonitoring:dkjbxx:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page="queryParams.pageNum"
+      :limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改地块基本信息（DKJBXX）对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="dkjbxxRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="shp属性json" prop="shpJson">
+          <el-input
+            v-model="form.shpJson"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script setup name="Dkjbxx">
+import {
+  listDkjbxx,
+  getDkjbxx,
+  delDkjbxx,
+  addDkjbxx,
+  updateDkjbxx,
+} from "@/api/rsmonitoring/dkjbxx";
+import { listRole } from "@/api/system/role";
+const { proxy } = getCurrentInstance();
+
+const dkjbxxList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dkbh: null,
+    dkmj: null,
+    xzqdm: null,
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询地块基本信息（DKJBXX）列表 */
+function getList() {
+  loading.value = true;
+  listRole(queryParams.value).then((response) => {
+    dkjbxxList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    dkbh: null,
+    dkmj: null,
+    xzqdm: null,
+    xmc: null,
+    qlx: null,
+    hlx: null,
+    qsx: null,
+    hsx: null,
+    lzb: null,
+    bzb: null,
+    shpJson: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    auditflow: null,
+    pcsjid: null,
+    geom: null,
+    qsxtif: null,
+    hsxtif: null,
+  };
+  proxy.resetForm("dkjbxxRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加地块基本信息（DKJBXX）";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value;
+  getDkjbxx(_id).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改地块基本信息（DKJBXX）";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["dkjbxxRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateDkjbxx(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addDkjbxx(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除地块基本信息（DKJBXX）编号为"' + _ids + '"的数据项？')
+    .then(function () {
+      return delDkjbxx(_ids);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "rsmonitoring/dkjbxx/export",
+    {
+      ...queryParams.value,
+    },
+    `dkjbxx_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
+