From 759ed15af8f9d423dc882337f8536d4bb76e7f57 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 29 十一月 2022 11:06:18 +0800
Subject: [PATCH] 卡口管理还原
---
src/views/systemSetting/device/bayonet/index.vue | 563 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 307 insertions(+), 256 deletions(-)
diff --git a/src/views/systemSetting/device/bayonet/index.vue b/src/views/systemSetting/device/bayonet/index.vue
index 6781e1b..b2a50c0 100644
--- a/src/views/systemSetting/device/bayonet/index.vue
+++ b/src/views/systemSetting/device/bayonet/index.vue
@@ -1,291 +1,342 @@
<template>
- <div class="userList">
- <header>
- <div class="header-content">
- <div class="search">
- <span style="padding-right:20px">绛涢�夋潯浠�:</span>
- <el-select v-model="context" placeholder="璇烽�夋嫨" @change="getBayonetListData">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
- </el-option>
- </el-select>
- </div>
- </div>
- </header>
- <main>
- <div class="main-content">
- <div class="main-title">
- <el-button class="el-icon-plus" type="primary" @click="showDialog(false, null)">娣诲姞</el-button>
- <el-button @click="handleExport">瀵煎嚭鍗″彛</el-button>
- </div>
- <!-- 鏁版嵁灞曠ず -->
- <MyTable
- :tableOption="tableOption"
- :tableData="list"
- :pageShow="false">
- <template #operation="info">
- <el-link :underline="false" style="color:#4b9bb7" @click="showDialog(true, info)">缂栬緫</el-link>
- </template>
- </MyTable>
- </div>
- </main>
- <footer>
- <!-- 娣诲姞鍗″彛 -->
- <el-dialog :destroy-on-close="true" :title="getDialogTitle" :visible.sync="isShowDialog" width="60%" :before-close="handleClose">
- <MyCreate v-if="isShowDialog" @closeDialog="closeDialog" :originalBayonet="originalBayonet" :isEdit="isEdit"></MyCreate>
- </el-dialog>
- </footer>
- </div>
+ <div class="userList">
+ <header>
+ <div class="header-content">
+ <div class="search">
+ <span style="padding-right: 20px">绛涢�夋潯浠�:</span>
+ <el-select
+ v-model="context"
+ placeholder="璇烽�夋嫨"
+ @change="getBayonetListData"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+ </div>
+ </header>
+ <main>
+ <div class="main-content">
+ <div class="main-title">
+ <el-button
+ class="el-icon-plus"
+ type="primary"
+ @click="showDialog(false, null)"
+ >娣诲姞</el-button
+ >
+ <el-button @click="handleExport">瀵煎嚭鍗″彛</el-button>
+ </div>
+ <!-- 鏁版嵁灞曠ず -->
+ <MyTable :tableOption="tableOption" :tableData="list" :pageShow="false">
+ <template #operation="info">
+ <el-link
+ :underline="false"
+ style="color: #4b9bb7"
+ @click="showDialog(true, info)"
+ >缂栬緫</el-link
+ >
+
+ <span class="line">|</span>
+ <el-link
+ :underline="false"
+ style="color: #4b9bb7"
+ @click="handleDelete(info)"
+ >鍒犻櫎</el-link
+ >
+ </template>
+ </MyTable>
+ </div>
+ </main>
+ <footer>
+ <!-- 娣诲姞鍗″彛 -->
+ <el-dialog
+ :destroy-on-close="true"
+ :title="getDialogTitle"
+ :visible.sync="isShowDialog"
+ width="60%"
+ :before-close="handleClose"
+ >
+ <MyCreate
+ v-if="isShowDialog"
+ @closeDialog="closeDialog"
+ :originalBayonet="originalBayonet"
+ :isEdit="isEdit"
+ ></MyCreate>
+ </el-dialog>
+ </footer>
+ </div>
</template>
<script>
-import MyCreate from './create'
-import MyTable from '@/components/Table'
+import MyCreate from "./create";
+import MyTable from "@/components/Table";
import bayonet from "@/api/system/bayonet";
import { downloadFile } from "@/utils/helper";
export default {
- components: {
- MyCreate, MyTable,
+ components: {
+ MyCreate,
+ MyTable,
+ },
+ data() {
+ return {
+ isShowDialog: false,
+ context: 0,
+ options: [
+ {
+ value: 0,
+ label: "绂荤嚎",
+ },
+ {
+ value: 1,
+ label: "鍦ㄧ嚎",
+ },
+ ],
+ list: [],
+ current: 1,
+ size: 10,
+ tableOption: {
+ group: [
+ {
+ label: "鍗″彛鍚嶇О",
+ type: "text",
+ prop: "name",
+ },
+ {
+ label: "鍩熷悕/IP",
+ type: "text",
+ prop: "ipAddress",
+ },
+ {
+ label: "绔彛鍙�",
+ type: "text",
+ prop: "port",
+ },
+ {
+ label: "鍓嶇绫诲瀷",
+ type: "text",
+ prop: "frontEndTypeName",
+ },
+ {
+ label: "鍑哄叆鍩庣被鍨�",
+ type: "text",
+ prop: "inOutCityTypeName",
+ },
+ {
+ label: "鎿嶄綔",
+ type: "operation",
+ prop: "operation",
+ },
+ ],
+ },
+ originalBayonet: null,
+ isEdit: false,
+ };
+ },
+
+ computed: {
+ getDialogTitle() {
+ return this.isEdit ? "缂栬緫鍗″彛" : "鏂板缓鍗″彛";
},
- data() {
- return {
- isShowDialog: false,
- context: null,
- options: [
- {
- value: 0,
- label: '绂荤嚎',
- },
- {
- value: 1,
- label: '鍦ㄧ嚎',
- }
- ],
- list: [],
- current: 1,
- size: 10,
- tableOption: {
- group: [
- {
- label: '鍗″彛鍚嶇О',
- type: 'text',
- prop: 'bayonetName',
- },
- {
- label: '缁忕含搴︿綅缃�',
- type: 'text',
- prop: 'latitude',
- },
- {
- label: '鍩熷悕/IP',
- type: 'text',
- prop: 'ipAddress',
- },
- {
- label: '绔彛鍙�',
- type: 'text',
- prop: 'port',
- },
- {
- label: '鍓嶇绫诲瀷',
- type: 'text',
- prop: 'frontEndType',
- },
- {
- label: '鍑哄叆鍩庣被鍨�',
- type: 'text',
- prop: 'inOutCityType',
- },
- {
- label: '鎿嶄綔',
- type: 'operation',
- prop: 'operation',
- },
- ]
- },
- originalBayonet: null,
- isEdit: false
- }
+ },
+ created() {
+ this.getBayonetListData();
+ },
+ methods: {
+ getBayonetListData() {
+ bayonet
+ .getBayonetList({
+ bayonetName: "",
+ current: this.current,
+ size: this.size,
+ })
+ .then(({ records }) => {
+ this.list = records;
+ })
+ .catch((err) => {
+ this.$message({ type: "error", message: err });
+ });
+ },
+ // 寮圭獥鍏抽棴
+ handleClose(done) {
+ this.$confirm("纭鍏抽棴?").then((_) => {
+ done();
+ });
},
- computed: {
- getDialogTitle() {
- return this.isEdit ? '缂栬緫鍗″彛' : '鏂板缓鍗″彛';
- },
- },
- created() {
+ closeDialog() {
+ this.isShowDialog = false;
this.getBayonetListData();
},
- methods: {
- getBayonetListData() {
- bayonet.getBayonetList({ bayonetName: this.context, current: this.current, size: this.size })
- .then(({ records }) => {
- this.list = records;
- })
- .catch(err => {
- this.$message({ type: 'error', message: err });
- })
- },
- // 寮圭獥鍏抽棴
- handleClose(done) {
- this.$confirm('纭鍏抽棴?')
- .then(_ => {
- done();
- })
- },
- closeDialog() {
- this.isShowDialog = false;
- this.getBayonetListData();
- },
-
- handleExport() {
- bayonet.exportBayonetList({ bayonetName: this.context, current: this.current, size: this.size })
- .then(res => {
- downloadFile(res);
- this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' });
- })
- .catch(err => {
- this.$message({ type: 'error', message: err });
- })
- },
- showDialog(isEdit, data) {
- this.isShowDialog = true;
- this.isEdit = isEdit;
- this.originalBayonet = data.info.row;
- }
- }
-}
+ handleExport() {
+ bayonet
+ .exportBayonetList({
+ bayonetName: this.context,
+ current: this.current,
+ size: this.size,
+ })
+ .then((res) => {
+ downloadFile(res);
+ this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" });
+ })
+ .catch((err) => {
+ this.$message({ type: "error", message: err });
+ });
+ },
+ handleDelete(data) {
+ this.$confirm("纭鍒犻櫎锛�").then((_) => {
+ bayonet.deleteBayonet(data.info.row.id).then((res) => {
+ this.$message({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛锛�",
+ });
+ this.getBayonetListData();
+ });
+ });
+ },
+ showDialog(isEdit, data) {
+ this.isShowDialog = true;
+ this.isEdit = isEdit;
+ this.originalBayonet = data ? data.info.row : null;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.userList {
- text-align: left;
- margin: 10px 20px;
- color: #4b9bb7;
+ text-align: left;
+ margin: 10px 20px;
+ color: #4b9bb7;
- header {
- background-color: #09152f;
+ header {
+ background-color: #09152f;
- .header-content {
- padding: 0 40px;
- display: flex;
- line-height: 100px;
- justify-content: space-between;
- align-items: center;
+ .header-content {
+ padding: 0 40px;
+ display: flex;
+ line-height: 100px;
+ justify-content: space-between;
+ align-items: center;
- .search {
- display: flex;
- justify-content: flex-start;
+ .search {
+ display: flex;
+ justify-content: flex-start;
- span {
- flex: 1;
- }
-
- .el-input {
- flex: 2;
- color: #1d3f57;
-
- &::v-deep .el-input__inner {
- background-color: #09152f;
- border: 1px solid #17324c;
- }
- }
-
- }
+ span {
+ flex: 1;
}
+
+ .el-input {
+ flex: 2;
+ color: #1d3f57;
+
+ &::v-deep .el-input__inner {
+ background-color: #09152f;
+ border: 1px solid #17324c;
+ }
+ }
+ }
+ }
+ }
+
+ main {
+ background-color: #09152f;
+ margin-top: 20px;
+ padding-bottom: 50px;
+
+ .main-title {
+ line-height: 60px;
+ padding: 10px 20px;
}
- main {
- background-color: #09152f;
- margin-top: 20px;
- padding-bottom: 50px;
+ .tools {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
- .main-title {
- line-height: 60px;
- padding: 10px 20px;
- }
+ .funs {
+ display: flex;
- .tools {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 20px;
+ .funsItem {
+ line-height: 28px;
+ display: flex;
+ align-items: center;
+ border: 1px solid #17324c;
+ border-radius: 4px;
+ font-size: 12px;
+ margin-left: 10px;
- .funs {
- display: flex;
+ .el-checkbox {
+ width: 80px;
+ padding: 0 10px;
+ }
- .funsItem {
- line-height: 28px;
- display: flex;
- align-items: center;
- border: 1px solid #17324c;
- border-radius: 4px;
- font-size: 12px;
- margin-left: 10px;
+ .el-select {
+ width: 120px;
+ }
- .el-checkbox {
- width: 80px;
- padding: 0 10px;
- }
+ &::v-deep .el-input__inner {
+ border: none;
+ background-color: #09152f;
+ }
- .el-select {
- width: 120px;
- }
+ &:hover {
+ border: 1px solid #4b9bb7;
+ }
- &::v-deep .el-input__inner {
- border: none;
- background-color: #09152f;
- }
-
- &:hover {
- border: 1px solid #4b9bb7;
- }
-
- &:hover .el-checkbox {
- color: #4b9bb7;
- }
- }
-
- }
-
- .pagination {
- margin-top: 50px;
- display: flex;
- line-height: 50px;
- justify-content: center;
-
- .el-pagination {
-
- &::v-deep li,
- &::v-deep .btn-prev,
- &::v-deep .btn-next {
- background-color: #071f39;
- color: #4b9bb7;
- }
-
- &::v-deep .active {
- background-color: #409eff;
- color: #fff;
- }
- }
- }
- }
-
- .el-table {
+ &:hover .el-checkbox {
color: #4b9bb7;
- font-size: 10px;
-
- .operation {
- display: flex;
-
- .line {
- padding: 0 5px;
- }
-
- span:hover {
- cursor: pointer;
- }
- }
+ }
}
+ }
+
+ .pagination {
+ margin-top: 50px;
+ display: flex;
+ line-height: 50px;
+ justify-content: center;
+
+ .el-pagination {
+ &::v-deep li,
+ &::v-deep .btn-prev,
+ &::v-deep .btn-next {
+ background-color: #071f39;
+ color: #4b9bb7;
+ }
+
+ &::v-deep .active {
+ background-color: #409eff;
+ color: #fff;
+ }
+ }
+ }
}
+
+ .el-table {
+ color: #4b9bb7;
+ font-size: 10px;
+
+ .cell {
+ display: flex;
+
+ &::v-deep .line {
+ padding: 0 5px;
+ }
+
+ span:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
+.line {
+ padding: 0 5px;
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0