遥感检测模版配置新增,修改,删除

src/api/supervise/pcsj.js

@@ -77,3 +77,26 @@ export function getYwlxList(query) {
     params: query
   })
 }
+// 新增模版数据
+export function addYwlx(data) {
+  return request({
+    url: '/apply/supervise/ywlx',
+    method: 'post',
+    data: data
+  })
+}
+// 删除模版数据
+export function delYwlx(id) {
+  return request({
+    url: '/apply/supervise/ywlx/' + id,
+    method: 'delete'
+  })
+}
+//修改模版数据
+export function updateYwlx(data) {
+  return request({
+    url: '/apply/supervise/ywlx',
+    method: 'put',
+    data: data
+  })
+}

src/views/remote/template/index.vue

@@ -47,7 +47,8 @@
           size="mini"
           >新增</el-button
         >
-      </el-col></el-row>
+      </el-col></el-row
+    >
     <el-table
       v-loading="loading"
       :data="ydlxList"
@@ -64,13 +65,13 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-view"
             @click="handleView(scope.row)"
             >查看</el-button
-          >
+          > -->
           <el-button
             size="mini"
             type="text"
@@ -95,11 +96,48 @@
       :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="110px">
+        <el-form-item label="业务类型" prop="ywlx">
+          <el-input v-model="form.ywlx"></el-input>
+        </el-form-item>
+        <el-form-item label="业务类型名称" prop="yelxmc">
+          <el-input v-model="form.yelxmc"></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"
+            @change="handleChange"
+            :min="1"
+            label="最小值为1"
+          ></el-input-number>
+        </el-form-item>
+        <el-form-item label="数据源" prop="sjy">
+          <el-input v-model="form.sjy"></el-input>
+        </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 { getYwlxList } from "@/api/supervise/pcsj";
+import {
+  getYwlxList,
+  addYwlx,
+  updateYwlx,
+  delYwlx,
+} from "@/api/supervise/pcsj";
+import { reset } from "ol/transform";
 export default {
   data() {
     return {
@@ -112,6 +150,23 @@ export default {
       total: 0,
       loading: false,
       ydlxList: [],
+      dialogVisible: false,
+      title: "新增",
+      form: {
+        ywlx: "",
+        yelxmc: "",
+        sort: 1,
+        sjy: "",
+      },
+      rules: {
+        // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ywlx: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
+        yelxmc: [
+          { required: true, message: "请输入业务类型名称", trigger: "blur" },
+        ],
+        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
+        sjy: [{ required: true, message: "请输入数据源", trigger: "blur" }],
+      },
     };
   },
   methods: {
@@ -135,17 +190,98 @@ export default {
       };
     },
     handleSelectionChange() {},
-    handleView(row) {},
-    handleEdit(row) {},
-    handleDelete(row) {},
+    // handleView(row) {},
+    handleEdit(row) {
+      this.title = "修改";
+      this.form = JSON.parse(JSON.stringify(row));
+      this.dialogVisible = true;
+    },
+    handleDelete(row) {
+      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delYwlx(row.ywlx).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
     //新增业务类型数据
-    addYwlx(){
-
-    }
+    addYwlx() {
+      this.dialogVisible = true;
+      this.reset();
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    //排序改变的方法
+    handleChange(value) {
+      console.log(value);
+    },
+    submitForm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addYwlx(this.form).then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  message: "添加成功!",
+                  type: "success",
+                });
+                this.dialogVisible = false;
+                this.getList();
+              }
+            });
+          } else {
+            updateYwlx(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;
+        }
+      });
+    },
+    reset() {
+      this.$refs.form.resetFields();
+      this.form = {
+        ywlx: "",
+        yelxmc: "",
+        sort: 1,
+        sjy: "",
+      };
+    },
   },
   mounted() {
     this.getList();
   },
+  watch: {
+    // dialogVisible(newVal, oldVal) {
+    //   this.$refs.form.resetFields();
+    // },
+  },
 };
 </script>