spfm-market-front/src/pages/main/demandDevelop/ywStanding.vue

<template>
  <fullscreen :fullscreen.sync="fullscreen" class="container">
    <div class="container-box">
      <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button
          class="btn-check"
          size="medium"
          type="primary"
          @click="outlist"
          >导出
        </el-button>
      </div>
      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column prop="demandName" label="需求名称">
          </el-table-column>
          <el-table-column prop="groupName" label="提出部门/地市">
          </el-table-column>
          <el-table-column prop="busiStartTime" label="时间段">
            <template slot-scope="scope">
              {{ scope.row.busiStartTime + "~" + scope.row.busiEndTime }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column prop="support" label="支撑方"> </el-table-column>
          <el-table-column prop="workload" label="工作量"> </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import toolList from "../../../components/toolList.vue";

export default {
  components: {
    mySearch,
    toolList,
  },
  data() {
    return {
      searchList: [
        {
          type: "input",
          tit: "需求名称",
          value: "",
          width: "23%",
        },
        {
          type: "input",
          tit: "部门或地市",
          value: "",
          width: "23%",
        },
        {
          type: "date",
          tit: "开始时间",
          value: "",
          width: "23%",
        },
        {
          type: "date",
          tit: "结束时间",
          value: "",
          width: "23%",
        },
      ],
      tooltit: "线上业务需求台账",
      fullscreen: false,
      total: 0,
      page: 1,
      pageSize: 10,
      tableData: [],
      dialogStatus: false,
      disableStatus: false,
      titname: "终端",
      infolist: {},
      typeOptions: [
        {
          dataCode: 1,
          dataName: 111,
        },
      ],
      userInfo: {},
      params: {},
      infoApply: [],
    };
  },
  methods: {
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.demandName = v[0]) : "";
      v[1] ? (this.params.deptOrCity = v[1]) : "";
      v[2]
        ? (this.params.startTime = this.$formatDate(v[2], "YYYY-MM-DD"))
        : "";
      v[3] ? (this.params.endTime = this.$formatDate(v[3], "YYYY-MM-DD")) : "";
      this.handleInit();
    },
    // 初始化列表
    handleInit() {
      this.$http({
        url: "/market/mkOnlineChannel/ledgerList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          ...this.params,
          page: this.page,
          pageSize: this.pageSize,
        },
      }).then(
        ({
          data: {
            body: { data, count },
          },
        }) => {
          this.total = count;
          this.tableData = data;
          this.total = count;
        }
      );
    },
    outlist() {
      // let data = {
      //   colStr:
      //     "demandName,deptName,busiStartTime,busiEndTime,factoryName,workLoad",
      //   fileName: "台账.xlsx",
      //   tital: [
      //     [
      //       {
      //         colNum: "0",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "需求名称",
      //       },
      //       {
      //         colNum: "1",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "提出部门",
      //       },
      //       {
      //         colNum: "2",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "开始时间",
      //       },
      //       {
      //         colNum: "3",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "结束时间",
      //       },
      //       {
      //         colNum: "4",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "支撑方",
      //       },
      //       {
      //         colNum: "5",
      //         colSpan: "0",
      //         rowSpan: "1",
      //         val: "工作量",
      //       },
      //     ],
      //   ],
      // };
      // // data.tital = JSON.stringify(data.tital)
      this.$http({
        url: "/market/mkOnlineChannel/exportLedger",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: this.params,
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            new Date().getTime() + ".xlsx"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = new Date().getTime() + ".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    // 分页
    currchange(v) {
      this.page = v;
      this.handleInit();
    },

    //获取列表
    getList(v, n) {
      v.sts = 1;
      this.pageSize = n;
      let _this = this;
      this.$http({
        url: "/market/cChannelDemand/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },

    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.handleInit();
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // =======================

    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
      this.infolist = {
        opNo: "",
        opName: "",
      };
      this.infolist.opNo = this.userInfo.loginNo;
      this.infolist.opName = this.userInfo.loginName;
    },
  },
  mounted() {
    // this.getList({}, 1);
    this.handleInit();
    this.getUser();
  },
  created() {},
};
</script>
<style scoped lang="scss">
.onetab {
  margin-bottom: 20px;
  padding: 0 20px;
}

.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
</style>