1.架构部分代码优化 2.系统设置增删查改功能实现

src/assets/iconfont/iconfont.css

@@ -36,3 +36,7 @@
 .icon-bofang:before {
   content: "\e635";
 }
+
+.icon-jinggao:before {
+  content: "\e636";
+}

src/components/DogInfo/index.vue

@@ -114,6 +114,7 @@ export default class DogInfo extends BaseVue {
   }
 
   td {
+    vertical-align: middle;
     div {
       height: 20px;
       line-height: 20px;

src/configs/apiConfig.ts

 const API = {
   'development': {
-    skyNet: 'http://10.2.60.59:48021/'
+    skyNet: 'http://skynet-test.inajiu.com:7011/sn-web/'
   },
   'production': {
     skyNet: 'http://10.2.60.59:48021/'

src/main.ts

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

src/service/CameraService.ts

@@ -3,4 +3,16 @@ import NetUtil from '@/utils/http'
 
 export function getCamera(pageData: any): Promise<responseData> {
   return NetUtil.fetch_request('camera/paging', 'POST', pageData)
+}
+
+export function updCamera(data: any) {
+  return NetUtil.fetch_request('camera/updCamera', 'POST', data)
+}
+
+export function addCamera(data: any) {
+  return NetUtil.fetch_request('camera/addCamera', 'POST', data)
+}
+
+export function delCamera(id: string) {
+  return NetUtil.fetch_request('camera/delCamera/' + id, 'POST')
 }
\ No newline at end of file

src/views/sysSetting/data.d.ts

 export interface CameraData {
-  id: number;
-  name: string;
+  id?: string;
+  name?: string;
+  groupName?: string;
+  longitude?: string;
+  latitude?: string;
+  createTime?: string;
 }
\ No newline at end of file

src/views/sysSetting/index.vue

@@ -4,78 +4,250 @@
     <div class="main-container">
       <div class="search">
         <div class="item">摄像头名称</div>
-        <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">摄像头名称</div>
         <div class="item">
-          <el-button type="primary" class="btn">搜索</el-button>
+          <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">清空</el-button>
+          <el-button type="info" class="btn btn-white" @click="handleClean">清空</el-button>
         </div>
       </div>
       <div class="add">
-        <el-button type="primary" class="btn" icon="el-icon-plus">新增</el-button>
+        <el-button type="primary" class="btn" icon="el-icon-plus" @click="addCamera">新增</el-button>
+      </div>
+      <table>
+        <thead>
+          <tr class="odd-row">
+            <td>
+              <div>摄像头名称</div>
+            </td>
+            <td>
+              <div>分组</div>
+            </td>
+            <td>
+              <div>经纬度</div>
+            </td>
+            <td>
+              <div>视频路径</div>
+            </td>
+            <td>
+              <div>创建时间</div>
+            </td>
+            <td>
+              <div>操作</div>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item,i) in cameraData"
+            :key="item.id"
+            :class="{'odd-row':i % 2 === 1,'even-row':i % 2 === 0}"
+          >
+            <td>
+              <div>{{item.name}}</div>
+            </td>
+            <td>
+              <div>{{item.groupName}}</div>
+            </td>
+            <td>
+              <div>{{item.longitude}}</div>
+            </td>
+            <td>
+              <div>{{item.latitude}}</div>
+            </td>
+            <td>
+              <div>{{item.createTime}}</div>
+            </td>
+            <td>
+              <div>
+                <el-button type="text" @click="handleEdit(item)">编辑</el-button>
+                <el-button type="text" @click="handleDel(item.id)">删除</el-button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pageing">
+        <el-pagination
+          background
+          layout="total,prev, pager, next,jumper"
+          @current-change="handleCurrentChange"
+          :total="total"
+        ></el-pagination>
       </div>
-      <el-table
-        :data="cameraData"
-        style="width: 100%"
-        :header-cell-class-name="handleCellHeader"
-        :row-class-name="handleRow"
-        :cell-class-name="handleCell"
-      >
-        <el-table-column prop="name" label="摄像头名称"></el-table-column>
-        <el-table-column prop="groupName" label="分组"></el-table-column>
-        <el-table-column prop="longitude" label="经纬度"></el-table-column>
-        <el-table-column prop="latitude" label="视频路径"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间"></el-table-column>
-        <el-table-column fixed="right" label="操作" width="100">
-          <template slot-scope="scope">
-            <el-button type="text" size="small">编辑</el-button>
-            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
     </div>
+    <el-dialog title="新增/编辑摄像头" :visible.sync="dialogVisible" width="500px">
+      <el-form ref="form" :rules="formRules" :model="form" label-width="120px">
+        <el-form-item label="摄像头名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-form ref="form" :rules="formRules" :model="form" label-width="120px">
+        <el-form-item label="分组" prop="groupName">
+          <el-input v-model="form.groupName"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-form ref="form" :rules="formRules" :model="form" label-width="120px">
+        <el-form-item label="经纬度" prop="longitude">
+          <el-input v-model="form.longitude"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-form ref="form" :rules="formRules" :model="form" label-width="120px">
+        <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"
+            type="primary"
+            @click="submitForm('form')"
+            :disabled="isDisabled"
+            :loading="isDisabled"
+          >确 定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog title="提示信息" :visible.sync="dialogDelVisible" width="500px">
+      <div>
+        <div class="confirm-del">
+          <Icon name="jinggao" iconClass />
+          <span>确定删除接口吗？</span>
+        </div>
+        <div>确认后此接口将被彻底删除。</div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="btn" type="info" @click="dialogDelVisible = false">取 消</el-button>
+        <el-button class="btn" type="primary" @click="handleConfirmDel">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import { Component } from "vue-property-decorator";
-import { getCamera } from "@/service/CameraService";
+import {
+  getCamera,
+  updCamera,
+  addCamera,
+  delCamera,
+} from "@/service/CameraService";
 import BaseVue from "@/types/baseVue";
+import { CameraData } from "./data";
+import Icon from "@/components/Icon/index.vue";
 
-@Component({})
+@Component({ components: { Icon } })
 export default class SysSetting extends BaseVue {
   cameraData = [];
+  dialogVisible = false;
+  isDisabled = false;
+  dialogDelVisible = false;
+  currentId = "";
+  total = 0;
+  form: CameraData = {};
+  formRules = {
+    name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+    groupName: [{ required: true, message: "请输入分组", trigger: "blur" }],
+    longitude: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
+    latitude: [{ required: true, message: "请输入视频路径", trigger: "blur" }],
+  };
+  queryData = {
+    current: 1,
+    groupName: "",
+    name: "",
+    size: 10,
+  };
 
   created(): void {
-    getCamera({
-      current: 1,
-      groupName: "",
-      name: "",
-      size: 20,
-    }).then((rp) => {
+    this.queryCamera();
+  }
+
+  async submitForm(formName) {
+    this.isDisabled = true;
+    //@ts-ignore
+    this.$refs[formName].validate(async (valid) => {
+      if (!valid) {
+        this.$message.error("录入信息不正确");
+        this.isDisabled = false;
+        return false;
+      }
+      console.log("form", valid, this.form);
+      const rp = this.form.id
+        ? await updCamera(this.form)
+        : await addCamera(this.form);
       if (rp.code === 0) {
-        this.cameraData = rp.data.records;
+        this.isDisabled = false;
+        this.dialogVisible = false;
+        this.queryCamera();
+        return true;
+      } else {
+        this.$message.error("写入信息异常");
+        this.isDisabled = false;
+        return false;
       }
     });
   }
 
-  handleRow({ rowIndex }): string {
-    return rowIndex % 2 === 1 ? "odd-row" : "even-row";
+  async handleQuery(): Promise<void> {
+    this.isDisabled = true;
+    await this.queryCamera();
+    this.isDisabled = false;
   }
-  handleCellHeader(): string {
-    console.log("row header");
-    return "cell-header-border";
+
+  async queryCamera(): Promise<void> {
+    const rp = await getCamera(this.queryData);
+    if (rp.code !== 0) {
+      this.$message(rp.msg);
+      return;
+    }
+    this.cameraData = rp.data.records;
+    this.total = rp.data.total;
+  }
+
+  async addCamera(): Promise<void> {
+    this.form = {};
+    this.dialogVisible = true;
+  }
+
+  async handleDel(id: string): Promise<void> {
+    this.currentId = id;
+    this.dialogDelVisible = true;
   }
-  handleCell({ columnIndex, column }): string {
-    return "cell-border";
+  handleClean(): void {
+    this.queryData.groupName = "";
+    this.queryData.name = "";
+  }
+
+  async handleConfirmDel(): Promise<void> {
+    const rp = await delCamera(this.currentId);
+    if (rp.code !== 0) {
+      this.$message("删除数据失败");
+      return;
+    }
+    this.dialogDelVisible = false;
+    this.queryCamera();
+  }
+
+  handleEdit(row: CameraData): void {
+    this.dialogVisible = true;
+    this.form = { ...row };
+  }
+
+  handleCurrentChange(val) {
+    this.queryData.current = val;
+    this.queryCamera();
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .#{$prefixCls}-sys-setting {
   .title {
     height: 40px;
@@ -87,7 +259,7 @@ export default class SysSetting extends BaseVue {
     background-color: $item-background-color;
   }
   .btn {
-    padding: 5px 15px;
+    padding: 8px 15px;
     font-size: 12px;
     color: white;
   }
@@ -111,8 +283,8 @@ export default class SysSetting extends BaseVue {
       }
     }
     .add {
-      height: 40px;
-      line-height: 40px;
+      height: 50px;
+      line-height: 50px;
       padding-left: 24px;
       background-color: $item-background-color;
     }
@@ -122,17 +294,71 @@ export default class SysSetting extends BaseVue {
     .even-row {
       background-color: #000000;
     }
-    .cell-border {
-      border-bottom: $border-color;
-      border-right: $border-color;
+    table {
+      width: 100%;
+      border-collapse: collapse;
     }
-    .cell-header-border {
-      background-color: #2c3b52;
-      border-bottom: $border-color !important;
-      border-right: $border-color;
+
+    table,
+    th,
+    td {
+      border: $border-color;
+    }
+
+    tbody tr:hover {
+      background-color: #333333;
     }
-    .el-table__row .even-row .hover-row {
-      background-color: red !important;
+
+    td {
+      vertical-align: middle;
+      line-height: 50px;
+      div {
+        padding: 0 10px;
+      }
+    }
+    .confirm-del {
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .pageing {
+      display: flex;
+      justify-content: end;
+      align-items: flex-end;
+      height: 100px;
+      padding: 10px;
+      background-color: $item-background-color;
+    }
+  }
+  ::v-deep {
+    .el-dialog__header {
+      background-color: #333e5d;
+    }
+    .el-dialog__title {
+      color: #d7d7d7;
+    }
+    .el-dialog__close {
+      font-size: 20px;
+      color: #d7d7d7;
+    }
+    .el-dialog__body,
+    .el-dialog__footer {
+      background-color: $item-background-color;
+    }
+    .el-input__inner {
+      color: #d7d7d7;
+      background-color: $item-background-color;
+    }
+    .el-dialog__body {
+      padding-right: 70px;
+    }
+  }
+  .confirm-del {
+    font-size: 16px;
+    font-weight: 700;
+    .icon-jinggao {
+      font-size: 20px;
+      padding-right: 5px;
+      color: red;
     }
   }
 }