加植物管理相关接口

src/api/api.js

@@ -34,10 +34,6 @@ export const getLastPosition = (params) => {
   return axios.get(`positions`).then((res) => res.data);
 };
 
-export const getDevices = (params) => {
-  return axios.get(`devices`).then((res) => res.data);
-};
-
 // 历史轨迹
 export const getHistoryPosition = (params) => {
   return axios
@@ -283,6 +279,26 @@ export const getAllDevices = (params) => {
   return axios.get(`devices/all`, { params: params }).then((res) => res.data);
 };
 
+// 获取有害植物
+export const getDevices = (id) => {
+  return axios.get(`devices/${id}`).then((res) => res.data);
+};
+
+// 添加有害植物
+export const addDevices = (params) => {
+  return axios.post(`devices`, params).then((res) => res.data);
+};
+
+// 更新有害植物
+export const updateDevices = (params) => {
+  return axios.put(`devices/${params.id}`, params).then((res) => res.data);
+};
+
+// 删除有害植物
+export const deleteDevices = (id) => {
+  return axios.delete(`devices/${id}`).then((res) => res.data);
+};
+
 // 清理缓存
 export const cleanCache = (type) => {
   return axios.delete(`cache/clean/` + type).then((res) => res.data);

src/views/system/devices.vue

@@ -76,15 +76,11 @@
           highlight-current-row
         >
           <el-table-column type="selection" width="55"></el-table-column>
-          <!-- prop都改字段名 -->
-          <el-table-column label="重要有害植物名称" prop="name" width="200">
-          </el-table-column>
-          <el-table-column label="报关号222" width="160" prop="报关号">
-          </el-table-column>
-          <el-table-column label="来源国" width="100" prop="来源国">
-          </el-table-column>
-          <el-table-column label="携带有害生物" prop="typeName">
-          </el-table-column>
+          <el-table-column label="重要有害植物名称" prop="name" width="160" />
+          <el-table-column label="IMEI" prop="imei" width="150" />
+          <el-table-column label="报关号" prop="clearanceID" width="130" />
+          <el-table-column label="来源国" prop="countryOfOrigin" width="100" />
+          <el-table-column label="携带有害生物" prop="carryPestName" />
           <el-table-column width="160" label="添加时间">
             <template slot-scope="scope">
               {{ (scope.row.time / 1000) | moment("YYYY-MM-DD HH:mm:ss") }}
@@ -97,7 +93,7 @@
               }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center">
+          <el-table-column width="160" label="操作" align="center">
             <template slot-scope="scope">
               <!-- 带权限判断demo -->
               <!-- <el-button
@@ -152,71 +148,64 @@
     >
       <el-form
         :model="editForm"
-        ref="editValidateForm"
+        ref="editFormRef"
         label-width="100px"
         class="demo-ruleForm"
       >
-        <!-- TODO:改弹窗内容 -->
-        <el-form-item label="名称" prop="account">
-          <el-input
-            v-model.number="editForm.account"
-            auto-complete="off"
-            :disabled="true"
-          ></el-input>
-        </el-form-item>
+        <!-- 新增、编辑弹窗 -->
         <el-form-item
-          label="邮箱"
-          prop="email"
+          label="名称"
+          prop="name"
           :rules="[
             {
-              type: 'email',
-              message: '请输入正确的邮箱地址',
+              required: true,
+              message: '请输入有害植物名称',
               trigger: ['blur', 'change'],
             },
           ]"
         >
-          <el-input v-model="editForm.email" auto-complete="off"></el-input>
+          <el-input
+            v-model="editForm.name"
+            auto-complete="off"
+            :disabled="isEdit"
+          ></el-input>
         </el-form-item>
         <el-form-item
-          label="电话"
-          prop="phone"
+          label="IMEI"
+          prop="imei"
           :rules="[
             {
-              min: 11,
-              max: 11,
-              message: '请输入正确的手机号码',
-              trigger: 'blur',
+              required: true,
+              message: '请输入IMEI',
+              trigger: ['blur', 'change'],
             },
           ]"
         >
-          <el-input v-model="editForm.phone" auto-complete="off"></el-input>
+          <el-input v-model="editForm.imei" auto-complete="off"></el-input>
         </el-form-item>
-        <el-form-item label="角色" prop="parentId">
-          <el-checkbox-group v-model="editForm.roleIds">
-            <el-checkbox
-              v-for="(role, index) in roles"
-              :key="index"
-              :label="role.id"
-              :disabled="role.roleKey === 'root'"
-              >{{ role.name }}</el-checkbox
-            >
-          </el-checkbox-group>
+        <el-form-item label="报关号" prop="clearanceID">
+          <el-input
+            v-model="editForm.clearanceID"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="禁用" prop="disabled">
-          <el-switch
-            v-model="editForm.disabled"
-            active-color="#ff4949"
-            inactive-color="#13ce66"
-            active-text="是"
-            inactive-text="否"
-          >
-          </el-switch>
+        <el-form-item label="来源国" prop="countryOfOrigin">
+          <el-input
+            v-model="editForm.countryOfOrigin"
+            auto-complete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="携带有害生物" prop="carryPestName">
+          <el-input
+            v-model="editForm.carryPestName"
+            auto-complete="off"
+          ></el-input>
         </el-form-item>
       </el-form>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="editDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="editSubmit">确 定</el-button>
+        <el-button type="primary" @click="handlerSubmit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -226,7 +215,13 @@
 import util from "@/utils/util";
 import InDevice from "./components/InDevice";
 import TransferDevice from "./components/TransferDevice";
-import { getAllDevices } from "@/api/api";
+import {
+  getAllDevices,
+  getDevices,
+  addDevices,
+  updateDevices,
+  deleteDevices,
+} from "@/api/api";
 
 export default {
   data() {
@@ -238,18 +233,17 @@ export default {
         keyword: "",
         type: 0,
       },
-      // value改字段名
       options: [
         {
           value: "name",
           label: "重要有害植物名称",
         },
         {
-          value: "报关号",
+          value: "clearanceID",
           label: "报关号",
         },
         {
-          value: "来源国",
+          value: "countryOfOrigin",
           label: "来源国",
         },
         {
@@ -281,6 +275,7 @@ export default {
     this.init();
   },
   methods: {
+    // 请求list数据、查询
     init() {
       let para = {
         page: this.page,
@@ -293,30 +288,58 @@ export default {
         this.data = data;
       });
     },
+    // 弹窗提交
+    handlerSubmit() {
+      this.$refs["editFormRef"].validate((valid) => {
+        if (valid) {
+          if (!this.isEdit) {
+            addDevices(this.editForm).then((data) => {
+              console.log(12313123, data);
+              this.$message({
+                type: "success",
+                message: "保存成功!",
+              });
+              this.init();
+            });
+          } else {
+            updateDevices(this.editForm).then((data) => {
+              console.log(45565656, data);
+              this.$message({
+                type: "success",
+                message: "更新成功!",
+              });
+              this.init();
+            });
+          }
+        }
+      });
+    },
+    // 打开添加弹窗
     handlerAdd() {
       this.isEdit = false;
       this.editForm = {};
       this.editDialogVisible = true;
     },
+    // 打开编辑弹窗
     handleEdit(row) {
       this.isEdit = true;
       this.editForm = row;
       this.editDialogVisible = true;
     },
+    // 点删除
     handleDelete(row) {
       this.$confirm("是否确定删除该有害植物?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        // TODO:删除接口
-        // deleteUser(row.id).then((data) => {
-        //   this.$message({
-        //     type: "success",
-        //     message: "删除成功!",
-        //   });
-        //   this.init();
-        // });
+        deleteDevices(row.id).then((data) => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+          this.init();
+        });
       });
     },
 
@@ -367,11 +390,10 @@ export default {
           "分组",
           "添加时间",
         ];
-        // TODO:字段名
         const filterVal = [
-          "报关号",
+          "clearanceID",
           "name",
-          "来源国",
+          "countryOfOrigin",
           "remarks",
           "typeId",
           "groupId",