系统设置功能完善

src/main.ts

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "@/utils/rem";
-import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination } from 'element-ui';
+import { Message, Table, TableColumn, Button, Dialog, Form, FormItem, Input, InputNumber, Pagination, Loading } from 'element-ui';
 
 Vue.config.productionTip = false;
 
@@ -15,7 +15,10 @@ Vue.use(Form)
 Vue.use(FormItem)
 Vue.use(Input);
 Vue.use(InputNumber);
-Vue.use(Pagination)
+Vue.use(Pagination);
+Vue.use(Loading);
+
+Vue.prototype.$loading = Loading.service;
 Vue.prototype.$message = Message;
 
 router.beforeEach((to, from, next): void => {

src/views/sysSetting/components/search.vue

+<template>
+  <div :class="`${prefixCls}-search`">
+    <div class="item">摄像头名称</div>
+    <div class="item">
+      <el-input size="mini" v-model="queryData.name"></el-input>
+    </div>
+    <div class="item">分组</div>
+    <div class="item">
+      <el-input size="mini" v-model="queryData.groupName"></el-input>
+    </div>
+    <div class="item">
+      <el-button type="primary" class="btn" @click="handleQuery" :loading="isDisabled">搜索</el-button>
+    </div>
+    <div class="item">
+      <el-button type="info" class="btn btn-white" @click="handleClean">清空</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop } from "vue-property-decorator";
+import BaseVue from "@/types/baseVue";
+
+@Component({})
+export default class Search extends BaseVue {
+  @Prop() private isDisabled!: boolean;
+
+  queryData = {
+    name: "",
+    groupName: "",
+  };
+
+  handleQuery(): void {
+    this.$emit("queryevent", { ...this.queryData });
+  }
+  handleClean(): void {
+    this.queryData.name = "";
+    this.queryData.groupName = "";
+    this.$emit("queryevent", { ...this.queryData });
+  }
+}
+</script>
+
+<style lang="scss">
+.#{$prefixCls}-search {
+  display: flex;
+  padding-left: 24px;
+  background-color: $item-background-color;
+  border-bottom: $border-color;
+  .item {
+    padding-top: 5px;
+    padding-bottom: 3px;
+    height: 40px;
+    line-height: 40px;
+    padding-right: 15px;
+  }
+  .btn {
+    padding: 8px 15px;
+    font-size: 12px;
+    color: white;
+  }
+  .btn-white {
+    border: 1px solid #d7d7d7;
+  }
+}
+</style>

src/views/sysSetting/index.vue

@@ -2,22 +2,7 @@
   <div :class="`${prefixCls}-sys-setting`">
     <div class="title">摄像头维护</div>
     <div class="main-container">
-      <div class="search">
-        <div class="item">摄像头名称</div>
-        <div class="item">
-          <el-input size="mini" v-model="queryData.name"></el-input>
-        </div>
-        <div class="item">分组</div>
-        <div class="item">
-          <el-input size="mini" v-model="queryData.groupName"></el-input>
-        </div>
-        <div class="item">
-          <el-button type="primary" class="btn" @click="handleQuery" :loading="isDisabled">搜索</el-button>
-        </div>
-        <div class="item">
-          <el-button type="info" class="btn btn-white" @click="handleClean">清空</el-button>
-        </div>
-      </div>
+      <Search @queryevent="handleQuery" :isDisabled="isDisabled" />
       <div class="add">
         <el-button type="primary" class="btn" icon="el-icon-plus" @click="addCamera">新增</el-button>
       </div>
@@ -57,10 +42,10 @@
               <div>{{item.groupName}}</div>
             </td>
             <td>
-              <div>{{item.longitude}}</div>
+              <div>{{item.longitude}},{{item.latitude}}</div>
             </td>
             <td>
-              <div>{{item.latitude}}</div>
+              <div>{{""}}</div>
             </td>
             <td>
               <div>{{item.createTime}}</div>
@@ -92,14 +77,14 @@
         <el-form-item label="分组" prop="groupName">
           <el-input v-model="form.groupName"></el-input>
         </el-form-item>
-        <el-form-item label="经纬度" prop="longitude">
+        <el-form-item label="经度" prop="longitude">
           <el-input v-model="form.longitude"></el-input>
         </el-form-item>
-        <el-form-item label="视频路径" prop="latitude">
+        <el-form-item label="纬度" prop="latitude">
           <el-input v-model="form.latitude"></el-input>
         </el-form-item>
         <el-form-item class="form-footer">
-          <el-button class="btn" type="info" @click="dialogVisible = false">取消</el-button>
+          <el-button class="btn btn-white" type="info" @click="dialogVisible = false">取消</el-button>
           <el-button
             class="btn"
             type="primary"
@@ -110,7 +95,8 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-    <el-dialog title="提示信息" :visible.sync="dialogDelVisible" width="500px">
+    <div class="delDialog">
+      <el-dialog title="提示信息" :visible.sync="dialogDelVisible" width="450px">
         <div>
           <div class="confirm-del">
             <Icon name="jinggao" iconClass />
@@ -124,6 +110,7 @@
         </span>
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -137,8 +124,9 @@ import {
 import BaseVue from "@/types/baseVue";
 import { CameraData } from "./data";
 import Icon from "@/components/Icon/index.vue";
+import Search from "./components/search.vue";
 
-@Component({ components: { Icon } })
+@Component({ components: { Icon, Search } })
 export default class SysSetting extends BaseVue {
   cameraData = [];
   dialogVisible = false;
@@ -189,14 +177,25 @@ export default class SysSetting extends BaseVue {
     });
   }
 
-  async handleQuery(): Promise<void> {
+  async handleQuery(data: any): Promise<void> {
+    console.log("query", data);
     this.isDisabled = true;
+    this.queryData = { ...this.queryData, ...data };
     await this.queryCamera();
     this.isDisabled = false;
   }
 
   async queryCamera(): Promise<void> {
+    const loading = this.$loading({
+      lock: true,
+      text: "加载中",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)",
+    });
     const rp = await getCamera(this.queryData);
+    setTimeout(() => {
+      loading.close();
+    }, 200);
     if (rp.code !== 0) {
       this.$message(rp.msg);
       return;
@@ -206,7 +205,7 @@ export default class SysSetting extends BaseVue {
   }
 
   async addCamera(): Promise<void> {
-    this.form = {};
+    this.form = { id: "" };
     this.dialogVisible = true;
   }
 
@@ -266,17 +265,7 @@ export default class SysSetting extends BaseVue {
     max-width: 1905px;
     min-width: 1650px;
     padding: 10px;
-    .search {
-      display: flex;
-      padding-left: 24px;
-      background-color: $item-background-color;
-      border-bottom: $border-color;
-      .item {
-        height: 40px;
-        line-height: 40px;
-        padding-right: 15px;
-      }
-    }
+
     .add {
       height: 50px;
       line-height: 50px;
@@ -346,6 +335,9 @@ export default class SysSetting extends BaseVue {
     .el-dialog__body {
       padding-right: 70px;
     }
+    .el-form-item__content {
+      text-align: right;
+    }
   }
   .confirm-del {
     font-size: 16px;
@@ -356,5 +348,12 @@ export default class SysSetting extends BaseVue {
       color: red;
     }
   }
+  .delDialog {
+    ::v-deep {
+      .el-dialog__body {
+        padding: 20px 70px;
+      }
+    }
+  }
 }
 </style>