index.vue

<template>
  <div class="STBbase-wrapper height100">
    <div class="search-container">
      <el-form :inline="true" :model="form">
        <el-form-item>
          <el-select v-model="form.orgId" placeholder="请选择所属单位">
            <el-option
              v-for="item in orgOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择区域"
            v-model="form.areaId"
            :options="areaOptions"
            :props="defaultProps"
            change-on-select
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="form.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="btn-group">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="page-tip">
        <span class="page-tip-title">页面说明:</span>
        <span class="page-tips"
          >机顶盒账号为机顶盒所属单位名称，新建后生成6位数字及字母的随机密码，作为机顶盒的登录密码。</span
        >
      </div>
    </div>
    <div class="table-content">
      <div class="btn-group">
        <el-button type="primary" @click="addBox">新建机顶盒账号</el-button>
        <el-button class="export" type="primary" @click="handleExport"
          >导出</el-button
        >
      </div>
      <stb-table
        :currentPage="page._index"
        :feildList="feildList"
        :list="tableData"
        @action="handleAction"
      />
      <party-pagination :page="page" @changePage="handleCurrentChange" />
    </div>
    <add-dialog ref="formItem" @refreshFn="onSearch" />
    <edit-dialog ref="editform" @refreshFn="onSearch" />
  </div>
</template>
<script>
import { partyPagination } from "@/components/index";
import { addDialog, editDialog, stbTable } from "./components/index";
import { getAreas } from "@/config/area.js";
import { getOrgListWithOutPage } from "@/config/organ.js";
export default {
  components: { partyPagination, addDialog, editDialog, stbTable },
  data() {
    return {
      page: {
        _index: 1,
        _size: 10,
        total: 0,
      },
      feildList: [
        { prop: "mac", label: "MAC地址" },
        { prop: "organName", label: "所属单位" },
        { prop: "num", label: "展板播放次数" },
        { prop: "exiredDate", label: "到期时间" },
        { prop: "", label: "操作", isEdit: true, width: 180 },
      ],
      orgOptions: [], // 单位信息
      areaOptions: [], //区域信息
      defaultProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      form: {
        orgId: "",
        areaId: [],
      },
      tableData: [], // 表格信息
    };
  },

  mounted() {
    this.getAreas();
    this.onSearch();
    this.getOrgList();
  },
  methods: {
    // 获取单位信息
    async getOrgList() {
      this.orgOptions = await getOrgListWithOutPage();
    },
    // 获取区域信息
    async getAreas() {
      this.areaOptions = await getAreas();
    },
    // 查询
    onSearch() {
      this.page._index = 1;
      this.requestForm = JSON.parse(JSON.stringify(this.form));
      this.getTableData();
    },
    // 获得数据接口
    getTableData() {
      let vm = this;
      let dates = {};
      if (this.form.date) {
        dates.startDate = this.form.date[0];
        dates.endDate = this.form.date[1];
      }
      let param = {
        _index: this.page._index,
        _size: this.page._size,
        areaId: this.requestForm.areaId.length
          ? this.requestForm.areaId[this.requestForm.areaId.length - 1]
          : "",
        organId: this.requestForm.orgId,
        ...dates,
      };
      vm.$https(
        {
          url: "boxOperation/selectPageList",
          method: "post",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            let data = res.data.data;
            vm.page.total = data.total;
            vm.tableData = data.records;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 新增弹框打开
    addBox() {
      this.$refs.formItem.backFn(this.orgOptions);
    },
    // 重置
    handleReset() {
      this.form = {
        orgId: "",
        areaId: [],
      };
      this.onSearch();
    },
    // 分页
    handleCurrentChange(val) {
      this.page._index = val;
      this.getTableData();
    },
    handleAction(params) {
      this.activeRow = params.row;
      switch (params.type) {
        case "detail":
          this.handleDetail();
          break;
        case "edit":
          this.handleEdit();
          break;
        default:
          break;
      }
    },
    // 编辑
    handleEdit() {
      this.$refs.editform.backFn(this.activeRow);
    },
    // 导出
    handleExport() {
      let dates = {};
      if (this.form.date) {
        dates.startDate = this.requestForm.date[0];
        dates.endDate = this.requestForm.date[1];
      }
      let param = {
        areaId: this.requestForm.areaId.length
          ? this.requestForm.areaId[this.requestForm.areaId.length - 1]
          : "",
        organId: this.requestForm.orgId,
        ...dates,
      };
      this.$https(
        {
          url: "/boxOperation/export",
          method: "post",
          authType: this.backToken,
          responseType: "blob",
        },
        this.$qs.stringify(param)
      ).then((res) => {
        let blobUrl = window.URL.createObjectURL(res.data);
        const aElement = document.createElement("a");
        aElement.href = blobUrl;
        aElement.download = "机顶盒基础信息.xls";
        aElement.click();
        window.URL.revokeObjectURL(blobUrl);
      });
    },
  },
};
</script>
<style lang="less">
</style>