zhanghua
2024-03-12 a3b4eb017a0f948348ef7732267c7ed0d4bca8c0
src/views/operate/viewEvent/index.vue
@@ -1,7 +1,7 @@
<template>
  <div class="userList">
    <header>
      <div class="headerTitle">运营管理 >> 案卷查询</div>
      <!--      <div class="headerTitle">运营管理 >> 案卷查询</div>-->
      <div class="headerContent">
        <div class="contentItem">
          <div style="width: 80px">按编号:</div>
@@ -15,17 +15,31 @@
        <div class="contentItem">
          <div style="width: 80px">按类型:</div>
          <div class="search">
            <el-select clearable v-model="searchData.categories" placeholder=" 请选择类型">
              <el-option v-for="option in categoryOptions" :key="option.id" :label="option.label" :value="option.value"></el-option>
            <el-select
              clearable
              v-model="searchData.categories"
              placeholder=" 请选择类型"
            >
              <el-option
                v-for="option in categoryOptions"
                :key="option.id"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="contentItem">
          <div style="width: 80px">按社区:</div>
          <div class="search">
            <el-select clearable v-model="searchData.communityId" placeholder="请选择社区">
              <el-option v-for="option in communityOptions" :key="option.id" :value="option.id" :label="option.regionName"></el-option>
            </el-select>
            <el-cascader
              clearable
              v-model="searchData.community"
              :props="communityProps"
              :options="communityOptions"
              placeholder="请选择社区"
            >
            </el-cascader>
          </div>
        </div>
        <div class="contentItem">
@@ -38,7 +52,7 @@
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="primary" @click="getList">查询</el-button>
        </div>
      </div>
      <div class="headerContent">
@@ -64,21 +78,26 @@
      <div class="mainContent">
        <!-- 数据展示 -->
        <el-table
          border
          stripe
          ref="multipleTable"
          :header-cell-style="{
            background: '#06122c',
            'font-size': '12px',
            color: '#4b9bb7',
            background: '#F5F5F5',
            background: '#fff',
            '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="code" label="事件编号" min-width="18">
            <template slot-scope="scope">
              <el-link @click="handleView(scope.row)">{{ scope.row.code }}</el-link>
              <el-link @click="handleView(scope.row)">{{
                scope.row.code
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="问题类别" min-width="8">
@@ -89,7 +108,7 @@
          <el-table-column prop="eventSource" label="问题来源" min-width="8">
            <template v-if="scope.row.eventSource" slot-scope="scope">
              <span>{{
                scope.row.eventSource === 2 ? "人工上报" : "视频上传"
                scope.row.eventSource === 2 ? "网格巡查" : "视频巡查"
              }}</span>
            </template>
          </el-table-column>
@@ -158,6 +177,34 @@
        </el-dialog>
        <!-- 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
@@ -197,6 +244,28 @@
  },
  data() {
    return {
      all: false,
      unsame: false,
      myIdx: 0,
      options: [
        {
          value: 0,
          label: "批量操作",
          disabled: true,
        },
        {
          value: 1,
          label: "批量启用",
        },
        {
          value: 2,
          label: "批量禁用",
        },
        {
          value: 3,
          label: "批量删除",
        },
      ],
      datepick: null,
      tableData: [],
      dialogExamine: false,
@@ -208,12 +277,16 @@
      currentPage: 1,
      categoryOptions: CATEGOTY,
      communityOptions: [],
      communityProps: {
        label: "regionName",
        value: "id",
      },
      myproblem: 1,
      number: "",
      searchData: {
        categories: null,
        number: null,
        communityId: null,
        community: null,
        endTime: null,
        site: null,
        startTime: null,
@@ -225,13 +298,52 @@
    this.getCommunityOptions();
  },
  methods: {
    // 批量删除
    mulDelete(idArr) {},
    // 执行下拉框操作
    selectChange(val) {
      let ids = [];
      this.tempList.forEach((item) => {
        ids.push(item.number);
      });
      if (ids.length !== 0) {
        if (val === 3) {
          this.mulDelete(ids);
        }
      } else {
        this.$message({
          type: "warning",
          message: "您还没选中任何数据",
        });
      }
    },
    // 监听表格选中状态
    tableChange(list) {
      this.tempList = list;
      this.all = list.length === this.tableData.length;
    },
    // 全选
    selectAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 反选
    disSame(list) {
      list.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    },
    // 获取列表
    getList() {
      const searchData = Object.assign({}, this.searchData);
      if (this.searchData.community) {
        searchData.communityId = searchData.community[1];
      }
      delete searchData.community;
      casequery
        .baseCaseQuery({
          current: this.currentPage,
          pageSize: this.pageSize,
          ...this.searchData,
          ...searchData,
        })
        .then((res) => {
          this.tableData = res.records;
@@ -244,11 +356,12 @@
    // 获取社区和街道
    getCommunityOptions() {
      department.getDepartmentList()
          .then(res => {
            this.communityOptions = res;
          })
          .catch(err => this.$message.error(err))
      department
        .getDepartmentList()
        .then((res) => {
          this.communityOptions = res;
        })
        .catch((err) => this.$message.error(err));
    },
    // 设置表格斑马纹
@@ -266,11 +379,16 @@
    },
    datepickChange() {
      this.searchData.startTime = this.datepick[0];
      this.searchData.endTime = this.datepick[1].replace(
        "00:00:00",
        "23:59:59"
      );
      if (this.datepick) {
        this.searchData.startTime = this.datepick[0];
        this.searchData.endTime = this.datepick[1].replace(
          "00:00:00",
          "23:59:59"
        );
      } else {
        this.searchData.startTime = null;
        this.searchData.endTime = null;
      }
    },
    handleClose(done) {
@@ -311,14 +429,14 @@
<style lang="scss" scoped>
.userList {
  text-align: left;
  margin: 10px 20px;
  color: #4b9bb7;
  padding: 10px 20px;
  // color: #4b9bb7;
  border: 1px solid #ccc;
  header {
    display: flex;
    line-height: 60px;
    flex-direction: column;
    padding: 0 20px;
    padding: 0;
    color: #4b9bb7;
    .headerContent {
@@ -336,7 +454,7 @@
  }
  main {
    background-color: #09152f;
    //background-color: #fff;
    margin-top: 20px;
    padding-bottom: 50px;
@@ -361,6 +479,7 @@
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;
@@ -376,7 +495,7 @@
          &::v-deep .el-input__inner {
            border: none;
            background-color: #09152f;
            // background-color: #09152f;
          }
          &:hover {
@@ -399,7 +518,7 @@
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            // background-color: #071f39;
            color: #4b9bb7;
          }
@@ -412,8 +531,8 @@
    }
    .el-table {
      color: #4b9bb7;
      font-size: 10px;
      // color: #4b9bb7;
      // font-size: 10px;
      &::v-deep .cell {
        text-overflow: ellipsis;
@@ -422,7 +541,7 @@
      }
      &::v-deep .el-table__empty-block {
        background-color: #09152f;
        // background-color: #09152f;
      }
      &::v-deep .el-table__empty-block {
@@ -435,7 +554,7 @@
        .line {
          padding: 0 5px;
        }
        color: var(--operation-color);
        span:hover {
          cursor: pointer;
        }
@@ -443,11 +562,11 @@
    }
    .el-table::v-deep .warning-row {
      background: #06122c;
      // background: #06122c;
    }
    .el-table::v-deep .success-row {
      background: #071f39;
      // background: #071f39;
    }
    &::v-deep .switchStyle .el-switch__label {
@@ -486,7 +605,7 @@
  &::v-deep .el-dialog__header,
  &::v-deep .el-dialog__body {
    background-color: #06122c;
    // background-color: #06122c;
  }
  &::v-deep .el-dialog__header {
@@ -512,7 +631,7 @@
  }
  &::v-deep .el-range-input {
    background-color: #06122c;
    // background-color: #06122c;
  }
}
</style>
</style>