添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

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

@@ -1,376 +1,368 @@
<template>
    <div class="userList">
        <header>
            <div class="header-content">
                <div class="search">
                    <span style="padding-right:20px">筛选条件:</span>
                    <el-select v-model="context" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- <el-input placeholder="请输入内容" v-model="context"></el-input> -->
                </div>
            </div>
        </header>
        <main>
            <div class="main-content">
                <div class="main-title">
                    <el-button class="el-icon-plus" type="primary" @click="dialogCreate = true">添加</el-button>
                    <el-button class="">导出卡口</el-button>
                </div>
                <!-- 数据展示 -->
                <el-table ref="multipleTable"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
                    @selection-change="tableChange">
                    <el-table-column type="selection" min-width="5">
                    </el-table-column>
                    <el-table-column prop="name" label="卡口名称" min-width="10">
                    </el-table-column>
                    <el-table-column prop="sort" label="经纬度位置" min-width="10">
                    </el-table-column>
                    <el-table-column prop="adminCount" label="所属区域" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="域名/IP" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="端口号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="前端类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="出入城类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="15">
                        <template slot-scope="scope">
                            <div class="operation">
                                <span>编辑</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- tools -->
                <!-- <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination background :current-page="currentPage" layout="prev, pager, next"
                            :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"
                            @prev-click="handlePrev" @next-click="handleNext">
                        </el-pagination>
                    </div>
                </div> -->
            </div>
        </main>
        <footer>
            <!-- 添加卡口 -->
            <el-dialog title="添加卡口" :visible.sync="dialogCreate" width="60%" :before-close="handleClose">
                <MyCreate></MyCreate>
            </el-dialog>
        </footer>
    </div>
  <div class="userList">
    <header>
      <div class="header-content">
        <div class="search">
          <span style="padding-right: 20px">筛选条件:</span>
          <el-input v-model="context" placeholder="请输入"></el-input>
        </div>

        <div class="main-title">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getBayonetListData"
            >查询
          </el-button>
          <el-button
            class="el-icon-plus button-addition"
            type="primary"
            @click="showDialog(false, null)"
            >添加</el-button
          >

          <el-button @click="handleExport" type="primary">导出卡口</el-button>
        </div>
      </div>
    </header>
    <main>
      <div class="main-content">
        <!-- 数据展示 -->
        <MyTable
          :tableOption="tableOption"
          :get-table-list="getBayonetListData"
          :tableData="list"
        >
          <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 class="tools">
          <div class="funs">
            <div class="funsItem funs-sp"></div>
            <div class="funsItem funs-sp"></div>
            <div class="funsItem"></div>
          </div>
          <div class="pagination">
            <el-pagination
              background
              :current-page="current"
              layout="prev, pager, next"
              :total="total"
              :page-size="size"
              @current-change="changeCurrentPage"
            >
            </el-pagination>
          </div>
        </div>
      </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 helper from "@/utils/mydate.js"
import MyCreate from './create'
export default {
    components: {
        MyCreate
    },
    data() {
        return {
            tableData: [],
            context: 0,
            dialogCreate: false,
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            preMyIdx: 0,
            options: [
                {
                    value: 0,
                    label: '离线',
                },
                {
                    value: 1,
                    label: '在线',
                }
            ],
            tempList: []
        }
    },
    created() {
    },
    methods: {
        async selectChange(list) {
            console.log(this.tempList);
            if (this.tempList.length !== 0) {
                this.preMyIdx = list;
                if (list === 3) {
                    await this.handleDelete(this.tempList);
                } else if (list === 2) {
                    await this.mulUpdateStatus(this.tempList, 0);
                } else {
                    await this.mulUpdateStatus(this.tempList, 1);
                }
                this.myIdx = 0;
            } else {
                this.myIdx = this.preMyIdx;
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        mulUpdateStatus(idArr, flag) {
            this.$confirm(flag === 1 ? "您确定要进行批量启用角色吗?" : '您确定要进行批量禁用角色吗?')
                .then(_ => {
                    this.$axios({
                        method: 'post',
                        url: 'sccg/role/updateStatusBatch?ids=' + idArr + '&status=' + flag,
                    })
                        .then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '更改用户状态成功',
                                })
                                this.getUserList();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            }
                            console.log(res);
                        })
                })
                .catch(err => { console.log(err) })
        },
        tableChange(list) {
            this.tempList = [];
            list.forEach(item => {
                this.tempList.push(item.id);
            })
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        changeTime({ createTime }) {
            return helper(createTime);
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        handleDelete(id) {
            const that = this;
            // let arr = [];
            // arr.push(id);
            this.$confirm('确认删除？')
                .then(_ => {
                    that.$axios({
                        method: 'post',
                        url: 'sccg/role/delete?ids=' + id,
                    })
                        .then(res => {
                            this.myIdx = 0;
                            this.preMyIdx = 0;
                            console.log(res);
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
import MyCreate from "./create";
import MyTable from "@/components/Table";
import bayonet from "@/api/system/bayonet";
import { downloadFile } from "@/utils/helper";

                            this.getUserList();
                        })
                })
                .catch(_ => { });
export default {
  components: {
    MyCreate,
    MyTable,
  },
  data() {
    return {
      isShowDialog: false,
      context: "",
      options: [
        {
          value: 0,
          label: "离线",
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        {
          value: 1,
          label: "在线",
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
        },
        // 关闭弹窗
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}
      ],
      list: [],
      current: 1,
      size: 10,
      total: 0,
      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 ? "编辑卡口" : "新建卡口";
    },
  },
  created() {
    this.getBayonetListData();
  },
  methods: {
    getBayonetListData() {
      bayonet
        .getBayonetList({
          bayonetName: this.context,
          current: this.current,
          size: this.size,
        })
        .then(({ records, total }) => {
          this.list = records;
          this.total = total;
        })
        .catch((err) => {
          this.$message({ type: "error", message: err });
        });
    },
     // 当前页改变触发事件
     changeCurrentPage(page) {
      this.current = page;
      this.getBayonetListData();
    },
    // 弹窗关闭
    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 });
        });
    },
    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;
  padding: 10px 20px;
  // color: #4b9bb7;
  border: 1px solid #ccc;
  header {
    // background-color: white;

    header {
        background-color: #09152f;
        border: 1pox solid #fff;
    .header-content {
      padding: 0;
      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-title {
        line-height: 60px;
        padding: 10px 0px;
      }
    }
  }

  main {
    // background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;

    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .funs {
        display: flex;

        .funsItem {
          line-height: 28px;
          display: flex;
          align-items: center;
          // border: 1px solid #17324c;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;

          .el-checkbox {
            width: 80px;
            padding: 0 10px;
          }

          .el-select {
            width: 120px;
          }

          // &::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;
          // }
        }
      }
    }

    main {
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;
    .el-table {
      // color: #4b9bb7;
      // font-size: 10px;

        .main-title {
            line-height: 60px;
            padding: 10px 20px;
      .cell {
        display: flex;

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

        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

            .funs {
                display: flex;

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    border-radius: 4px;
                    font-size: 12px;
                    margin-left: 10px;

                    .el-checkbox {
                        width: 80px;
                        padding: 0 10px;
                    }

                    .el-select {
                        width: 120px;
                    }

                    &::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;
                    }
                }
            }
        span:hover {
          cursor: pointer;
        }

        .el-table {
            color: #4b9bb7;
            font-size: 10px;

            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
        }
      }
    }
  }
}
</style>
.line {
  padding: 0 5px;
}
</style>