<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="稅務(wù)組織" 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="指標(biāo)名稱" id="targetCss" required>
? ? ? ? ? ? <el-select
? ? ? ? ? ? ? v-model="form.target"
? ? ? ? ? ? ? size="small"
? ? ? ? ? ? ? filterable
? ? ? ? ? ? ? multiple
? ? ? ? ? ? ? :collapse-tags="true"
? ? ? ? ? ? ? placeholder="請(qǐng)選擇"
? ? ? ? ? ? ? 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="請(qǐng)選擇">
? ? ? ? ? ? ? ? <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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="請(qǐng)選擇"
? ? ? ? ? ? ? ? ? :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="指標(biāo)值區(qū)間" required>
? ? ? ? ? ? <el-col :span="6" style="padding-right:10px;">
? ? ? ? ? ? ? <el-select v-model="form.methodCode" size="small" placeholder="請(qǐng)選擇">
? ? ? ? ? ? ? ? <el-option label="年累計(jì)" value="Y"></el-option>
? ? ? ? ? ? ? ? <el-option label="當(dāng)期數(shù)" value="C"></el-option>
? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? </el-col>
? ? ? ? ? ? <el-col :span="18">
? ? ? ? ? ? ? <el-input v-model="form.amountMin" size="small" placeholder="請(qǐng)輸入" class="amount"></el-input>
? ? ? ? ? ? ? <span class="span-to">至</span>
? ? ? ? ? ? ? <el-input v-model="form.amountMax" size="small" placeholder="請(qǐng)輸入" class="amount"></el-input>
? ? ? ? ? ? </el-col>
? ? ? ? ? </el-form-item>
? ? ? ? </el-col>
? ? ? ? <el-col :span="6">
? ? ? ? ? <el-form-item label="導(dǎo)入人員">
? ? ? ? ? ? <el-input v-model="form.updatedBy" size="small" placeholder="請(qǐng)輸入"></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" >導(dǎo)出</el-button>
? ? ? ? ? </el-form-item>
? ? ? ? </el-col>
? ? ? </el-row>
? ? </el-form>
? ? <div class="tool">
? ? ? <span class="index-unit">指標(biāo)單元:元</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="序號(hào)" 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="稅務(wù)組織"
? ? ? ? ? align="center"
? ? ? ? ? min-width="60"
? ? ? ? ></itax-table-column>
? ? ? ? <itax-table-column
? ? ? ? ? prop="target"
? ? ? ? ? header-align="center"
? ? ? ? ? label="指標(biāo)名稱"
? ? ? ? ? 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="當(dāng)期數(shù)"
? ? ? ? ? align="center"
? ? ? ? ? min-width="60"
? ? ? ? ></itax-table-column>
? ? ? ? <itax-table-column
? ? ? ? ? prop="yearSum"
? ? ? ? ? header-align="center"
? ? ? ? ? label="年累計(jì)"
? ? ? ? ? align="center"
? ? ? ? ? min-width="60"
? ? ? ? ></itax-table-column>
? ? ? ? <itax-table-column
? ? ? ? ? prop="updatedBy"
? ? ? ? ? header-align="center"
? ? ? ? ? label="導(dǎo)入人員"
? ? ? ? ? align="center"
? ? ? ? ? min-width="90"
? ? ? ? ></itax-table-column>
? ? ? ? <itax-table-column
? ? ? ? ? prop="updatedDate"
? ? ? ? ? header-align="center"
? ? ? ? ? label="導(dǎo)入時(shí)間"
? ? ? ? ? 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", //默認(rèn)年累計(jì)
? ? ? ? amountMin: "",
? ? ? ? amountMax: "",
? ? ? ? updatedBy: ""
? ? ? },
? ? ? listData: [],
? ? ? targetOption: [], //指標(biāo)option.
? ? ? orgId: "",
? ? ? pageArr: [10, 20, 40, 100],
? ? ? defaultPageSize: 0,
? ? ? currentPage: 1,
? ? ? pageSize: 20,
? ? ? pageData: {},
? ? ? dialogFormVisible: false,
? ? ? amenddialogFormVisible: false,
? ? ? formLabelWidth: "80px"
? ? };
? },
? methods: {
? ? //導(dǎo)出文件
? ? 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(); //非置空的情況下調(diào)用獲取指標(biāo)名接口。
? ? ? // this.getListData();
? ? },
? ? searchListData() {
? ? ? if (typeof this.orgId !== "number") {
? ? ? ? this.notify("請(qǐng)選擇稅務(wù)組織名稱!", "warning");
? ? ? ? return;
? ? ? }
? ? ? if (this.form.target.length == 0) {
? ? ? ? this.notify("請(qǐng)選擇指標(biāo)名稱!", "warning");
? ? ? ? return;
? ? ? }
? ? ? // if (this.form.dataType == "") {
? ? ? //? this.notify("請(qǐng)選擇區(qū)間類型痘绎!", "warning");
? ? ? //? return;
? ? ? // }
? ? ? if (this.form.dataStart == "") {
? ? ? ? this.notify("請(qǐng)選擇開始時(shí)間!", "warning");
? ? ? ? return;
? ? ? }
? ? ? if (this.form.dataEnd == "") {
? ? ? ? this.notify("請(qǐng)選擇終止時(shí)間被廓!", "warning");
? ? ? ? return;
? ? ? }
? ? ? // if (this.form.methodCode == "") {
? ? ? //? this.notify("請(qǐng)選擇統(tǒng)計(jì)方式亭敢!", "warning");
? ? ? //? return;
? ? ? // }
? ? ? if (this.form.amountMin == "") {
? ? ? ? this.notify("請(qǐng)選擇金額最小值赌朋!", "warning");
? ? ? ? return;
? ? ? }
? ? ? if (this.form.amountMax == "") {
? ? ? ? this.notify("請(qǐng)選擇金額最大值!", "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"; //年累計(jì)豁陆,當(dāng)期數(shù)選擇
? ? ? this.form.amountMin= "";
? ? ? this.form.amountMax= "";
? ? ? this.form.person= "";
? ? ? this.$refs.resetOrg.clearInfo();
? ? },
? ? /* 獲取指標(biāo)名方法 */
? ? 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>