模版字段配置列表,新增,查询,分页,删除,编辑

src/api/supervise/pcsj.js

@@ -99,4 +99,44 @@ export function updateYwlx(data) {
     method: 'put',
     data: data
   })
+}
+
+//模版字段查询列表
+export function getYwlxFieldList(query) {
+  return request({
+    url: '/apply/supervise/ywlx/field/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 模版字段新增
+export function addYwlxField(data) {
+  return request({
+    url: '/apply/supervise/ywlx/field',
+    method: 'post',
+    data: data
+  })
+}
+// 删除模版数据
+export function delYwlxField(id) {
+  return request({
+    url: '/apply/supervise/ywlx/field/' + id,
+    method: 'delete'
+  })
+}
+//模版字段详情查询
+export function getYwlxField(id) {
+  return request({
+    url: '/apply/supervise/ywlx/field/' + id,
+    method: 'get'
+  })
+}
+//修改模版数据
+export function updateYwlxField(data) {
+  return request({
+    url: '/apply/supervise/ywlx/field',
+    method: 'put',
+    data: data
+  })
 }

src/views/remote/farmland/index.vue

@@ -201,6 +201,7 @@ export default {
       this.drawer = false;
     },
     test(item) {
+      console.log(item, "---------------------");
       window.map["mapCon1"].removeLayer(this.itemObj);
       window.map["mapCon2"].removeLayer(this.itemObj);
 
@@ -226,9 +227,14 @@ export default {
           zIndex: 9999,
         });
         let fullExtent = this.itemObj.getSource().getExtent();
-        window.map["mapCon1"].getView().fit(fullExtent, {
-          duration: 3, //动画的持续时间,
-          callback: null,
+        // window.map["mapCon1"].getView().fit(fullExtent, {
+        //   duration: 3, //动画的持续时间,
+        //   callback: null,
+        // });
+        window.map["mapCon1"].getView().animate({
+          center: [item.lzb, item.bzb],
+          zoom: 17,
+          duration: 2000, // 动画持续时间，单位毫秒
         });
         window.map["mapCon1"].addLayer(this.itemObj);
         window.map["mapCon2"].addLayer(this.itemObj);

src/views/remote/template-data/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="140px"
+    >
+      <el-form-item label="shp字段名称">
+        <el-input
+          v-model="queryParams.shpfield"
+          placeholder="请输入shp字段名称"
+          clearable
+          @keyup.enter.native="getList"
+        />
+      </el-form-item>
+      <el-form-item label="数据库字段中文名称">
+        <el-input
+          v-model="queryParams.fieldnamezw"
+          placeholder="请输入数据库字段中文名称"
+          clearable
+          @keyup.enter.native="getList"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="getList"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
+          @click="addMbyz"
+          size="mini"
+          >新增</el-button
+        >
+      </el-col></el-row
+    >
+    <el-table
+      v-loading="loading"
+      :data="mbzdList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="shp字段名称" align="center" prop="shpfield" />
+      <el-table-column label="数据库字段名称" align="center" prop="fieldname" />
+      <el-table-column
+        label="数据库字段中文名称"
+        align="center"
+        prop="fieldnamezw"
+      />
+      <el-table-column label="排序" align="center" prop="sort" />
+      <el-table-column label="业务类型" align="center" prop="ywlx" />
+      <el-table-column label="结果集显示" align="center" prop="listdisplay" />
+      <el-table-column label="详情集显示" align="center" prop="infodisplay" />
+      <el-table-column label="汇总面积" align="center" prop="sumdisplay" />
+      <el-table-column label="查询编号" align="center" prop="bhdisplay" />
+      <el-table-column label="排序方式" align="center" prop="orderfield" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            >查看</el-button
+          > -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
+        <el-form-item label="shp字段名称" prop="shpfield">
+          <el-input v-model="form.shpfield"></el-input>
+        </el-form-item>
+        <el-form-item label="数据库字段名称" prop="fieldname">
+          <el-input v-model="form.fieldname"></el-input>
+        </el-form-item>
+        <el-form-item label="数据库字段中文名称" prop="fieldnamezw">
+          <el-input v-model="form.fieldnamezw"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <!-- <el-input v-model="form.sort"></el-input> -->
+          <el-input-number
+            v-model="form.sort"
+            :min="1"
+            label="最小值为1"
+          ></el-input-number>
+        </el-form-item>
+        <el-form-item label="业务类型" prop="ywlx">
+          <el-input v-model="form.ywlx" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="结果集显示" prop="listdisplay">
+          <el-input v-model="form.listdisplay"></el-input>
+        </el-form-item>
+        <el-form-item label="详情集显示" prop="infodisplay">
+          <el-input v-model="form.infodisplay"></el-input>
+        </el-form-item>
+        <el-form-item label="汇总面积" prop="sumdisplay">
+          <el-input v-model="form.sumdisplay"></el-input>
+        </el-form-item>
+        <el-form-item label="查询编号" prop="bhdisplay">
+          <el-input v-model="form.bhdisplay"></el-input>
+        </el-form-item>
+        <el-form-item label="排序方式" prop="orderfield">
+          <!-- <el-input v-model="form.orderfield"></el-input> -->
+          <el-radio v-model="form.orderfield" label="asc">asc</el-radio>
+          <el-radio v-model="form.orderfield" label="desc">desc</el-radio>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getYwlxFieldList,
+  addYwlxField,
+  updateYwlxField,
+  delYwlxField,
+  getYwlxField,
+} from "@/api/supervise/pcsj";
+export default {
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        shpfield: "",
+        fieldnamezw: "",
+        ywlx: this.$route.query.id,
+      },
+      loading: false,
+      mbzdList: [],
+      total: 0,
+      title: "新增",
+      form: {
+        shpfield: "",
+        fieldname: "",
+        fieldnamezw: "",
+        sort: "",
+        ywlx: this.$route.query.id,
+        listdisplay: "",
+        infodisplay: "",
+        bhdisplay: "",
+        orderfield: "",
+      },
+      rules: {
+        shpfield: [
+          { required: true, message: "请输入shp字典名称", trigger: "blur" },
+        ],
+        fieldname: [
+          { required: true, message: "请输入数据库字段名称", trigger: "blur" },
+        ],
+        fieldnamezw: [
+          {
+            required: true,
+            message: "请输入数据库字段中文名称",
+            trigger: "blur",
+          },
+        ],
+        sort: [{ required: true, message: "请选择排序", trigger: "blur" }],
+        ywlx: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
+      },
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      getYwlxFieldList(this.queryParams).then((response) => {
+        this.mbzdList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    addMbyz() {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.reset();
+      });
+    },
+    handleEdit(row) {
+      this.title = "修改";
+      this.form = JSON.parse(JSON.stringify(row));
+      this.dialogVisible = true;
+    },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        shpfield: "",
+        fieldnamezw: "",
+        ywlx: this.$route.query.id,
+      };
+      this.getList();
+    },
+    reset() {
+      this.$refs.form.resetFields();
+      this.form = {
+        shpfield: "",
+        fieldname: "",
+        fieldnamezw: "",
+        sort: "",
+        ywlx: this.$route.query.id,
+        listdisplay: "",
+        infodisplay: "",
+        bhdisplay: "",
+        orderfield: "",
+      };
+    },
+    handleDelete(row) {
+      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delYwlxField(row.id).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    handleSelectionChange() {},
+    handleClose() {},
+    submitForm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addYwlxField(this.form).then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "添加成功!",
+                  type: "success",
+                });
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          } else {
+            updateYwlxField(this.form).then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "修改成功!",
+                  type: "success",
+                });
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getList();
+    // getYwlxField(this.$route.query.id).then((res) => {
+    //   if (res.code == 200) {
+    //     console.log(res,'//////');
+    //     // this.form.ywlx == res.data.ywlx;
+    //   }
+    // });
+  },
+};
+</script>
+
+<style>
+</style>

src/views/remote/template/index.vue

@@ -13,7 +13,7 @@
           v-model="queryParams.ywlx"
           placeholder="请输入业务类型"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter.native="getList"
         />
       </el-form-item>
       <el-form-item label="业务类型名称">
@@ -21,7 +21,7 @@
           v-model="queryParams.yelxmc"
           placeholder="请输入业务类型名称"
           clearable
-          @keyup.enter.native="handleQuery"
+          @keyup.enter.native="getList"
         />
       </el-form-item>
       <el-form-item>
@@ -29,7 +29,7 @@
           type="primary"
           icon="el-icon-search"
           size="mini"
-          @click="handleQuery"
+          @click="getList"
           >搜索</el-button
         >
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
@@ -55,7 +55,11 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="业务类型" align="center" prop="ywlx" />
+      <el-table-column label="业务类型" align="center">
+        <template slot-scope="scope">
+          <span style="color: #337ab7;cursor: pointer;" @click="goYzpz(scope.row)"> {{ scope.row.ywlx }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="业务类型名称" align="center" prop="yelxmc" />
       <el-table-column label="排序" align="center" prop="sort" />
       <el-table-column label="数据源" align="center" prop="sjy" />
@@ -179,6 +183,9 @@ export default {
         this.loading = false;
       });
     },
+    goYzpz(row){
+      this.$router.push({ path: "/remote/mbyz", query: { id: row.ywlx } });
+    },
     handleQuery() {},
     //重置
     resetQuery() {