index.vue

<template>
  <div class="content_div_main">
    <div class="head_condition_type">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="valueGg" clearable placeholder="查询类型" @change="changeSelect">
            <el-option label="未公告" value="0"></el-option>
            <el-option label="已公告" value="1"></el-option>

            <el-option label="车辆历史公告" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-show="!showHisty">
          <el-date-picker
            v-model="value2"
            type="datetime"
            class="commone_w"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item v-show="!showHisty">
          <el-date-picker
            v-model="value3"
            type="datetime"
            class="commone_w"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item v-show="showHisty">
          <el-select v-model="valueHpzl" placeholder="号牌种类">
            <el-option
              v-for="item in optionsHpzl"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="showHisty">
          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
        </el-form-item>
        <el-button size="small" type="primary" @click="searchQueryWzxxT">查询</el-button>
        <el-button size="small" type="success" :disabled="setGgFlag" @click="setIllegalGg">设置公告</el-button>
        <el-form-item v-show="!setGgFlag" label="设置公告时间">
          <el-date-picker
            v-model="value4"
            type="datetime"
            class="commone_w"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            align="right"
          ></el-date-picker>
        </el-form-item>

        <el-button
          @click="exportExcel"
          style="margin-top: 2px;"
          size="medium"
          v-show="!setGgFlag"
          type="warning"
        >导出</el-button>
      </el-form>
    </div>

    <div class="table_m_type">
      <el-table
        id="rebateSetTable"
        v-loading="loading_status"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        ref="multipleTable"
        :data="tableData"
        :height="tableHeight"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>

        <el-table-column label="号牌号码" align="center" prop="carNo" sortable>
          <template slot-scope="scope">{{ scope.row.carNo }}</template>
        </el-table-column>
        <el-table-column label="号牌种类" align="center" prop="carType" :formatter="formatHpzl"></el-table-column>

        <el-table-column label="违法时间" align="center" prop="dcmsg" sortable>
          <template slot-scope="scope">{{ scope.row.dcmsg }}</template>
        </el-table-column>

        <el-table-column label="公告时间" prop="checkValue" align="center" sortable>
          <template slot-scope="scope">{{ scope.row.checkValue }}</template>
        </el-table-column>
        <!-- <el-table-column prop="status" label="公告标记"></el-table-column> -->

        <el-table-column
          align="center"
          prop="status"
          label="公告标记"
          :filters="[{ text: '已公告', value: '已公告' }, { text: '未公告', value: '未公告' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '已公告' ? 'primary' : 'warning'"
              close-transition
            >{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block paa_fy">
      <div style="float:left;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="handlePagePrevClick"
          @next-click="handlePageNextclick"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :current-page.sync="pageNumber"
          layout="total, sizes, prev, pager, next"
          :total="pageTotal"
        ></el-pagination>
      </div>
      <div class="fy_number_class">
        <el-input
          v-model="mPageNumber"
          @keyup.enter.native="modifyFyNumber"
          style="width:80px;"
          placeholder="数量/页"
        ></el-input>
      </div>
    </div>
  </div>
</template>



<style scoped>
.demo-form-inline {
  margin-top: 5px;
  margin-left: 5px;
}
.head_condition_type {
  height: auto;
  color: #333;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
  -moz-box-shadow: 2px 2px 10px #909090;
  -webkit-box-shadow: 2px 2px 10px #909090;
  box-shadow: 2px 2px 4px #909090;
}
.commone_w {
  /* 设置时间框同其他框一样的宽度 */
  width: 215px;
}


/** ---------------------------------------  **/
</style>




<script>
export default {
  components: {
    //VuePhotoZoomPro
  },
  data() {
    return {
      setGgFlag: true,
      showHisty: false,
      whphm: "",
      mPageNumber: "",
      isDisable: true,
      loading_status: false,

      /**  -------分页组件-------- */
      pageSizes: [10, 20, 30, 40],
      pageTotal: 0,
      pageSize: 10,
      currentPage4: 2,
      pageNumber: 1,
      /**------------------------- */

      value2: "",
      value3: "",
      value4: "",
      tableData: [],
      multipleSelection: [],

      /** 初始化查询条件的下拉框 */

      optionsHpzl: [], //号牌种类
      valueHpzl: "",
      valueGg: ""
    };
  },

  methods: {
    exportExcel() {
      if (this.tableData.length == 0) {
        this.$message({
          type: "warning",
          message: "没有需导出的数据"
        });
        return;
      }
      this.GCOMMON.exportExcel("待公告车辆信息");
    },
    /**
     * 用于设置公告
     */
    setIllegalGg() {
      var dels = [];
      const arrs = this.$refs.multipleTable.selection;
      if (arrs == null || arrs.length == 0) {
        this.$message({
          type: "warning",
          message: "请先勾选需要公告的数据"
        });
        return;
      }

      if (this.value4 == null || this.value4 == "" || this.value4 == "null") {
        this.$message({
          type: "warning",
          message: "请勾选公告的时间"
        });
        return;
      }
      arrs.forEach(item => {
        dels.push(item.carNo + "," + item.carType);
      });

      this.loading_status = true;
      let requestParam = JSON.stringify({
        nids: dels,
        endtime:
          this.value4 != ""
            ? this.GCOMMON.formatDate(this.value4, "yyyy-MM-dd hh:mm:ss")
            : ""
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/illquery/setIllegalGg", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.searchQueryWzxx();
            this.loading_status = false;
          } else {
            this.loading_status = false;
            this.publicShowMessage("warning", "异常数据删除失败");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading_status = false;
        });
    },

    changeSelect(val) {
      this.tableData = [];
      this.value4 = "";
      this.whphm = "";
      if (val == "2") {
        this.showHisty = true;
        this.valueHpzl = "02";
      } else {
        this.showHisty = false;
      }
      this.setGgFlag = true;
      if (val == "0") {
        this.setGgFlag = false;
      }
    },

    formatHpzl(row, column, cellValue, index) {
      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
    },

    modifyFyNumber() {
      var numReg = /^[0-9]+$/;
      var numRe = new RegExp(numReg);
      if (!numRe.test(this.mPageNumber)) {
        this.$message({
          type: "warning",
          message: "请输入整数",
          duration: 10000,
          showClose: true
        });
        return false;
      }
      if (parseInt(this.mPageNumber) <= 0) {
        this.$message({
          type: "warning",
          message: "请输入大于0的整数",
          duration: 10000,
          showClose: true
        });
        return false;
      }
      this.mPageNumber = parseInt(this.mPageNumber);
      this.pageSize = this.mPageNumber;
      this.pageNumber = 1;
      this.searchQueryWzxx();
    },

    /** 分页组件方法 */
    //--改变每页显示的数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchQueryWzxx();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    handlePagePrevClick(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    handlePageNextClick(val) {
      this.pageNumber = val;
      this.searchQueryWzxx();
    },
    /** --------------*/

    searchQueryWzxxT() {
      this.pageNumber = 1;
      this.searchQueryWzxx();
    },
    filterTag(value, row) {
      return row.status === value;
    },
    /**
     * 公告查询
     */
    searchQueryWzxx() {
      this.loading_status = true;
      this.tableData = [];
      if (this.shzt == "2") {
        if (this.whphm == null || this.whphm == "") {
          this.$message({
            type: "warning",
            message: "请输入需要查询的车牌"
          });
          return;
        }
      }
      let requestParam = JSON.stringify({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        //------
        hpzl: this.valueHpzl,
        shzt: this.valueGg,
        starttime:
          this.value2 != ""
            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
            : "",
        endtime:
          this.value3 != ""
            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
            : "",
        hphm: this.whphm
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/illquery/getGglist", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.tableData = response.data.fsGgList;
            this.pageTotal = response.data.pageTotal;
            this.loading_status = false;
          } else {
            this.loading_status = false;
            //this.publicShowMessage("warning", "分配异常");
          }
        })
        .catch(error => {
          console.log(error);
          this.loading_status = false;
        });
    },
    //------------------
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 初始化加载界面枚举信息
     */
    initEnumType() {
      let requestParam = JSON.stringify({
        flag: "2",
        enumtypeids: [
          {
            170: "optionsHpzl"
          }
        ]
      });
      this.axios
        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
          headers: {
            "Content-Type": "application/json;charset=utf-8" //头部信息
          }
        })
        .then(response => {
          debugger;
          let flaga = response.data.res_flag;
          if (flaga == "1") {
            this.optionsHpzl = response.data.optionsHpzl;
          } else {
            this.$message({
              type: "warning",
              message: "初始化枚举信息异常"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    nextDetailInfo() {
      debugger;
      if (this.selectIndexDetail == this.tableData.length) {
        this.$message({ type: "waraing", message: "已经是最后一条了" });
      } else {
        this.selectIndexDetail++;
        this.showDetailInfoComm(this.selectIndexDetail);
      }
    },
    upDetailInfo() {
      if (this.selectIndexDetail == 0) {
        this.$message({ type: "waraing", message: "已经是第一条了" });
      } else {
        this.selectIndexDetail--;
        this.showDetailInfoComm(this.selectIndexDetail);
      }
    }
  },

  created() {
    const loading = this.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });

    this.value2 = new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate(),
      0,
      0,
      0
    );
    this.value3 = new Date();
    this.initEnumType();
    this.$nextTick(function() {
      this.ImgDTH = window.innerHeight - 510;
      this.tableHeight =
        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;

      // 监听窗口大小变化
      let self = this;
      window.onresize = function() {
        self.ImgDTH = window.innerHeight - 510;
        self.tableHeight =
          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
      };
    });

    //---关闭loading
    this.$nextTick(() => {
      // 以服务的方式调用的 Loading 需要异步关闭
      loading.close();
    });
  }
};
</script>