税务查询

<template>

  <div>

    <el-form :inline="false" :model="form" ref="riskform" class="condition" label-width="105px">

      <el-row :gutter="0">

        <el-col :span="8">

          <el-form-item label="税务组织" required>

            <tax-org :getOrgParams="getOrgParams" @select="handleSelect" ref="resetOrg" style="width:calc(88% + 10px);"></tax-org>

          </el-form-item>

        </el-col>

        <el-col :span="6">

          <el-form-item label="指标名称" id="targetCss" required>

            <el-select

              v-model="form.target"

              size="small"

              filterable

              multiple

              :collapse-tags="true"

              placeholder="请选择"

              style="width:100%;"

            >

              <el-option

                :label="item.itemName"

                v-for="item in targetOption"

                :key="item.indexcode"

                :value="item.target"

              ></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="10">

          <el-form-item label="所属期间" required>

            <el-col :span="5" style="padding-right:10px;">

              <el-select v-model="form.dataType" size="small" placeholder="请选择">

                <el-option label="月" value="M"></el-option>

                <el-option label="季" value="Q"></el-option>

                <el-option label="半年" value="H"></el-option>

                <el-option label="年" value="Y"></el-option>

              </el-select>

            </el-col>

            <el-col :span="18">

              <!-- 月份 -->

              <template v-if="this.form.dataType==='M'">

                <i-date

                  type="month"

                  v-model="form.dataStart"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsStartM"

                  class="date-common"

                  format="yyyyMM"

                ></i-date>

                <span class="span-to">至</span>

                <i-date

                  type="month"

                  v-model="form.dataEnd"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsEnd"

                  class="date-common"

                  format="yyyyMM"

                ></i-date>

              </template>

              <!-- 季度 -->

              <template v-else-if="this.form.dataType==='Q'">

                <i-date

                  type="quarter"

                  v-model="form.dataStart"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsStartQH"

                  class="date-common"

                ></i-date>

                <span class="span-to">至</span>

                <i-date

                  type="quarter"

                  v-model="form.dataEnd"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsEnd"

                  class="date-common"

                ></i-date>

              </template>

              <!-- 半年 -->

              <template v-else-if="this.form.dataType==='H'">

                <i-date

                  type="half"

                  v-model="form.dataStart"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  class="time-picker-start date-common"

                  :picker-options="pickerOptionsStartQH"

                ></i-date>

                <span class="span-to">至</span>

                <i-date

                  type="half"

                  v-model="form.dataEnd"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  class="time-picker-end date-common"

                  :picker-options="pickerOptionsEnd"

                ></i-date>

              </template>

              <!-- 年 -->

              <template v-else-if="this.form.dataType==='Y'">

                <i-date

                  type="year"

                  v-model="form.dataStart"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsStartQH"

                  class="date-common"

                ></i-date>

                <span class="span-to">至</span>

                <i-date

                  type="year"

                  v-model="form.dataEnd"

                  placeholder="请选择"

                  :editable="false"

                  size="small"

                  :clearable="false"

                  :picker-options="pickerOptionsEnd"

                  class="date-common"

                ></i-date>

              </template>

            </el-col>

          </el-form-item>

        </el-col>

      </el-row>

      <el-row :gutter="0">

        <el-col :span="8">

          <el-form-item label="指标值区间" required>

            <el-col :span="6" style="padding-right:10px;">

              <el-select v-model="form.methodCode" size="small" placeholder="请选择">

                <el-option label="年累计" value="Y"></el-option>

                <el-option label="当期数" value="C"></el-option>

              </el-select>

            </el-col>

            <el-col :span="18">

              <el-input v-model="form.amountMin" size="small" placeholder="请输入" class="amount"></el-input>

              <span class="span-to">至</span>

              <el-input v-model="form.amountMax" size="small" placeholder="请输入" class="amount"></el-input>

            </el-col>

          </el-form-item>

        </el-col>

        <el-col :span="6">

          <el-form-item label="导入人员">

            <el-input v-model="form.updatedBy" size="small" placeholder="请输入"></el-input>

          </el-form-item>

        </el-col>

        <el-col :span="10">

          <el-form-item>

            <el-button type="primary" size="small" @click="searchListData">查询</el-button>

            <el-button size="small" @click="resetForm()">重置</el-button>

            <el-button type="primary" @click="downloadFileBtn" size="small" >导出</el-button>

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

    <div class="tool">

      <span class="index-unit">指标单元：元</span>

    </div>

    <div class="table-area">

      <itax-table

        :data="listData"

        class="my-table"

        height="0"

        border

        highlight-current-row

        style="width: 100%;min-height:640px"

      >

        <itax-table-column label="序号" align="center" type="index" min-width="35">

          <template scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize }}</template>

        </itax-table-column>

        <itax-table-column

          prop="orgName"

          header-align="center"

          label="税务组织"

          align="center"

          min-width="60"

        ></itax-table-column>

        <itax-table-column

          prop="target"

          header-align="center"

          label="指标名称"

          align="center"

          min-width="90"

        ></itax-table-column>

        <itax-table-column

          prop="dataType"

          header-align="center"

          label="所属期间"

          align="center"

          min-width="90"

        ></itax-table-column>

        <itax-table-column

          prop="partyAmount"

          header-align="center"

          label="当期数"

          align="center"

          min-width="60"

        ></itax-table-column>

        <itax-table-column

          prop="yearSum"

          header-align="center"

          label="年累计"

          align="center"

          min-width="60"

        ></itax-table-column>

        <itax-table-column

          prop="updatedBy"

          header-align="center"

          label="导入人员"

          align="center"

          min-width="90"

        ></itax-table-column>

        <itax-table-column

          prop="updatedDate"

          header-align="center"

          label="导入时间"

          align="center"

          min-width="90"

        ></itax-table-column>

      </itax-table>

    </div>

    <div class="page">

      <el-pagination

        class="fr"

        v-show="pageData.total>10"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

        :page-sizes="pageArr"

        :page-size="pageSize"

        layout="total, sizes, prev, pager, next,jumper"

        :total="pageData.total"

      ></el-pagination>

    </div>

  </div>

</template>

<script>

// import mock from "../mock/taxQuery.js";

import { listData, target,dataExport} from "./tax-query.js";

import taxOrg from "@/income-pro/common/taxorg/index";

import IDate from "../../common/date-picker/src/picker/date-picker";

export default {

  components: { taxOrg, IDate },

  data() {

    return {

      pickerOptionsStartM: {},

      pickerOptionsStart: {},

      pickerOptionsStartQH: {},

      pickerOptionsEnd: {},

      getOrgParams: {

        permissionType: "MENU",

        keyWord: "",

        permissionCode: "MU-INS-TASK-MAG",

        scope: "SELF",

        orgTypes: "",

        containVirtualFlag: ""

      },

      form: {

        org: "",

        target: [],

        dataType: "M",

        dataStart: "",

        dataEnd: "",

        methodCode: "Y", //默认年累计

        amountMin: "",

        amountMax: "",

        updatedBy: ""

      },

      listData: [],

      targetOption: [], //指标option.

      orgId: "",

      pageArr: [10, 20, 40, 100],

      defaultPageSize: 0,

      currentPage: 1,

      pageSize: 20,

      pageData: {},

      dialogFormVisible: false,

      amenddialogFormVisible: false,

      formLabelWidth: "80px"

    };

  },

  methods: {

    //导出文件

    downloadFileBtn() {

      var orgId = this.orgId;

      var target = this.form.target;

      var dataStart = this.form.dataStart;

      var dataEnd = this.form.dataEnd;

      var methodCode = this.form.methodCode;

      var amountMin = this.form.amountMin;

      var amountMax = this.form.amountMax;

      var updatedBy = this.form.updatedBy;

      var url =

        serverIpAddress +

        "/itax-core-analysis/taxation-impapply/export?orgId=" +

        orgId +

        "&target=" +

        target +

        "&dataStart=" +

        dataStart +

        "&dataEnd=" +

        dataEnd +

        "&amountMin=" +

        amountMin +

        "&methodCode=" +

        methodCode +

        "&amountMax=" +

        amountMax +

        "&updatedBy=" +

        updatedBy;

      var b = localStorage.getItem("chrome-low");

      if (b && JSON.parse(b)) {

        window.open(url);

      } else {

        var elemIF = document.createElement("iframe");

        elemIF.src = url;

        elemIF.style.display = "none";

        document.body.appendChild(elemIF);

      }

    },

    handleSelect(node) {

      this.orgId = node.orgId;

      typeof this.orgId !== "number"?'':this.targetType(); //非置空的情况下调用获取指标名接口。

      // this.getListData();

    },

    searchListData() {

      if (typeof this.orgId !== "number") {

        this.notify("请选择税务组织名称！", "warning");

        return;

      }

      if (this.form.target.length == 0) {

        this.notify("请选择指标名称！", "warning");

        return;

      }

      // if (this.form.dataType == "") {

      //  this.notify("请选择区间类型！", "warning");

      //  return;

      // }

      if (this.form.dataStart == "") {

        this.notify("请选择开始时间！", "warning");

        return;

      }

      if (this.form.dataEnd == "") {

        this.notify("请选择终止时间！", "warning");

        return;

      }

      // if (this.form.methodCode == "") {

      //  this.notify("请选择统计方式！", "warning");

      //  return;

      // }

      if (this.form.amountMin == "") {

        this.notify("请选择金额最小值！", "warning");

        return;

      }

      if (this.form.amountMax == "") {

        this.notify("请选择金额最大值！", "warning");

        return;

      }

      this.getListData();

    },

    handleSizeChange(val) {

      this.pageSize = val;

      this.getListData();

    },

    handleCurrentChange(val) {

      this.currentPage = val;

      this.getListData();

    },

    resetForm() {

      this.form.target= [];

      this.form.dataType= "M";

      this.form.dataStart= "";

      this.form.dataEnd= "";

      this.form.methodCode= "Y"; //年累计，当期数选择

      this.form.amountMin= "";

      this.form.amountMax= "";

      this.form.person= "";

      this.$refs.resetOrg.clearInfo();

    },

    /* 获取指标名方法 */

    async targetType(val) {

      let params = {

        orgIds: this.orgId //待改

      };

      const data = await target(params);

      if (data.responseCode === "0") {

        this.targetOption = data.result;

      }

    },

    async getListData() {

      let params = {

        orgId: 290409,

        target: this.form.target.join(","),

        dataStart: this.form.dataStart.format("yyyy-MM"),

        dataEnd: this.form.dataEnd.format("yyyy-MM"),

        methodCode: this.form.methodCode,

        amountMin: this.form.amountMin,

        amountMax: this.form.amountMax,

        updatedBy: this.form.updatedBy,

        currentPage: this.currentPage,

        pageSize: this.pageSize

      };

      try {

        const data = await listData(params);

        if (data.result) {

          this.listData = data.result;

          this.pageData = data.page;

        }

      } catch (err) {

        console.log(err);

      }

    },

    notify(msg, type) {

      var that = this;

      that.$message({

        duration: 2000,

        showClose: true,

        message: msg,

        type: type

      });

    }

  },

  created() {

  }

};

</script>

<style scoped lang='less'>

.condition {

  margin-top: 15px;

  // #targetCss {

  //  .el-select__tags {

  //    max-width: 1400px !important;

  //  }

  //  .el-input--small {

  //    width: 775px !important;

  //  }

  // }

}

// .common-sty {

//  width: 163px;

// }

.tool {

  margin-bottom: 5px;

  display: flex;

  flex-direction:row-reverse;

  align-items: center;

  margin-right: 20px;

  justify-content: space-between;

  .index-unit {

    font-size: 14px;

    color: #ff7000;

  }

}

.table-title {

  span:first-child {

    height: 20px;

    font-size: 18px;

    color: #ff7000;

    font-weight: bold;

    margin-left: 10px;

  }

  span:last-child {

    height: 20px;

    font-size: 14px;

    line-height: 20px;

    color: #ff7000;

    font-weight: bold;

    margin-left: 80%;

  }

}

.upload-btn {

  margin-left: 10px;

}

.date-common {

  width: 95px !important;

}

.amount{

  width: 40%

}

.el-select{

  /deep/ .el-select__tags{

        white-space: nowrap;

    overflow: hidden;

    display: block;

  }

  /deep/ .el-select__input {

    display:none;

  }

}

</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • pySpark 中文API (2)
    pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类： pyspark.sql...
    mpro阅读 9,504评论 0赞 13
  • rljs
    rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,438评论 0赞 10
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0赞 0
  • 恋桃园
    桃园澈夜锁寒风，星如雨。 朗月西窗斜照，意朦胧。茶盏半沉香 又听桃园长亭处，琴音袅。 满腔愁思若梦，几多情。独恋这方净土
    迷途舵手阅读 196评论 0赞 3
  • 【闲笔】趣事（05）空钩钓鱼
    初夏时节，黑紫色的桑葚果子熟了，小指头大小的桑葚果挂满了桑树枝，风儿一吹就往下掉。 如果桑树长在沟边上，那么，下面...
    空谷孤松阅读 691评论 8赞 13