卡口管理

zhanghua

2022-11-25 f0341c48295cfc2b7a8aa0f0f0942b22e1152019

 src/views/systemSetting/device/bayonet/index.vue

@@ -4,8 +4,17 @@
            <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-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>
@@ -14,37 +23,64 @@
        <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
            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">
        <MyTable :tableOption="tableOption" :tableData="list" :pageShow="false">
                    <template #operation="info">
                        <el-link :underline="false" style="color:#4b9bb7" @click="showDialog(true, info)">编辑</el-link>
            <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
        :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,
    MyCreate,
    MyTable,
    },
    data() {
        return {
@@ -53,12 +89,12 @@
            options: [
                {
                    value: 0,
                    label: '离线',
          label: "离线",
                },
                {
                    value: 1,
                    label: '在线',
                }
          label: "在线",
        },
            ],
            list: [],
            current: 1,
@@ -66,50 +102,45 @@
            tableOption: {
                group: [
                    {
                        label: '卡口名称',
                        type: 'text',
                        prop: 'bayonetName',
            label: "卡口名称",
            type: "text",
            prop: "name",
                    },
                    {
                        label: '经纬度位置',
                        type: 'text',
                        prop: 'latitude',
            label: "域名/IP",
            type: "text",
            prop: "ipAddress",
                    },
                    {
                        label: '域名/IP',
                        type: 'text',
                        prop: 'ipAddress',
            label: "端口号",
            type: "text",
            prop: "port",
                    },
                    {
                        label: '端口号',
                        type: 'text',
                        prop: 'port',
            label: "前端类型",
            type: "text",
            prop: "frontEndTypeName",
                    },
                    {
                        label: '前端类型',
                        type: 'text',
                        prop: 'frontEndType',
            label: "出入城类型",
            type: "text",
            prop: "inOutCityTypeName",
                    },
                    {
                        label: '出入城类型',
                        type: 'text',
                        prop: 'inOutCityType',
            label: "操作",
            type: "operation",
            prop: "operation",
                    },
                    {
                        label: '操作',
                        type: 'operation',
                        prop: 'operation',
                    },
                ]
        ],
            },
          originalBayonet: null,
          isEdit: false
        }
      isEdit: false,
    };
    },

    computed: {
      getDialogTitle() {
        return this.isEdit ? '编辑卡口' : '新建卡口';
      return this.isEdit ? "编辑卡口" : "新建卡口";
      },
    },
    created() {
@@ -117,43 +148,64 @@
    },
    methods: {
      getBayonetListData() {
        bayonet.getBayonetList({ bayonetName: '', current: this.current, size: this.size })
      bayonet
        .getBayonetList({
          bayonetName: "",
          current: this.current,
          size: this.size,
        })
            .then(({ records }) => {
              this.list = records;
            })
            .catch(err => {
              this.$message({ type: 'error', message: err });
            })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
      },
      // 弹窗关闭
      handleClose(done) {
          this.$confirm('确认关闭?')
              .then(_ => {
      this.$confirm("确认关闭?").then((_) => {
                  done();
              })
      });
      },

      closeDialog() {
        this.isShowDialog = false;
      this.getBayonetListData();
      },

      handleExport() {
        bayonet.exportBayonetList({ bayonetName: this.context, current: this.current, size: this.size })
            .then(res => {
      bayonet
        .exportBayonetList({
          bayonetName: this.context,
          current: this.current,
          size: this.size,
        })
        .then((res) => {
              downloadFile(res);
              this.$message({ type: 'success', message: '操作成功' });
          this.$message({ type: "success", message: "操作成功" });
            })
            .catch(err => {
              this.$message({ type: 'error', message: err });
            })
        .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;
      }
    }
}
      this.originalBayonet = data.info.row;
    },
  },
};
</script>
<style lang="scss" scoped>
.userList {
@@ -188,7 +240,6 @@
                        border: 1px solid #17324c;
                    }
                }

            }
        }
    }
@@ -243,7 +294,6 @@
                        color: #4b9bb7;
                    }
                }

            }

            .pagination {
@@ -253,7 +303,6 @@
                justify-content: center;

                .el-pagination {

                    &::v-deep li,
                    &::v-deep .btn-prev,
                    &::v-deep .btn-next {
@@ -273,10 +322,10 @@
            color: #4b9bb7;
            font-size: 10px;

            .operation {
      .cell {
                display: flex;

                .line {
        &::v-deep .line {
                    padding: 0 5px;
                }

@@ -287,4 +336,7 @@
        }
    }
}
.line {
  padding: 0 5px;
}
</style>