hycw-ui/src/views/index.vue

<template>
  <div class="content">
    <div v-if="$store.state.user.homeType === 1">
      <el-form
        :model="queryParams"
        class="demo-ruleForm"
        ref="queryForm"
        size="small"
        :inline="true"
      >
        <el-form-item label="单位名称">
          <el-select
            v-model="queryParams.homeOrgNo"
            placeholder="请选择..."
            @clear="delValue"
            clearable
            ref="select"
            style="width: 300px"
          >
            <el-option
              hidden
              key="id"
              :value="queryParams.homeOrgNo"
              :label="queryParams.selectName"
            ></el-option>
            <el-tree
              :data="options"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              ref="tree"
              node-key="id"
              :default-expand-all="true"
              :filter-node-method="filterNode"
            >
              <span slot-scope="{ data }">
                <span>{{ data.deptName }}</span>
                <el-tag
                  size="mini"
                  style="margin: 0 10px"
                  v-show="filterorgType(data.tag)"
                  >{{ filterorgType(data.tag) }}</el-tag
                >
              </span>
            </el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="queryParams.homeDate"
            :clearable="false"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getNum">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="container">
        <el-card
          style="position: relative"
          shadow="hover"
          class="border"
          v-for="(item, index) of list"
          :key="index"
          @click.native.self="route(item.path)"
        >
          <div
            style="width: 100%; display: flex; justify-content: space-between"
          >
            <span>{{ item.name }}</span>
            <el-upload
              style="margin-left: 10px"
              v-if="index < 2 || index === 5"
              class="upload-demo"
              action="#"
              multiple
              :show-file-list="false"
              :on-change="
                (file) => {
                  onChange(file, item.name);
                }
              "
              :auto-upload="false"
            >
              <el-button size="small" type="success">导入</el-button>
            </el-upload>
          </div>
          <el-link
            type="success"
            @click="route(item.path)"
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 20px;
            "
            >{{ item.title }} {{ item.number }} {{ item.titleEnd }}</el-link
          >
        </el-card>
      </div>
    </div>
    <div v-else>首页暂无数据...</div>
  </div>
</template>
<script>
import { listDept } from "@/api/system/dept";
import moment from "moment";
import mapHome from "@/views/home/index";
import {
  adsMatHyxtStampTaxContinvinvoiceImport,
  adsMatHyxtStampTaxContinvoiceImportCheck,
  adsMatHyxtStampTaxContractD,
  adsMatHyxtStampTaxContractDcontractImport,
  stampTaxC,
} from "@/api/utils";

export default {
  name: "Index",
  components: { mapHome },
  data() {
    return {
      list: [
        {
          name: "合同管理池",
          path: "stampDuty/contract",
          number: 0,
          title: "本期总数",
          titleEnd: "笔",
        },
        {
          name: "发票管理池",
          path: "stampDuty/invoiceTitle",
          number: 0,
          title: "本期收到",
          titleEnd: "张",
        },
        { name: "风险待办", path: "stampDuty/RiskDoubt", number: 0 },
        { name: "税基计算", path: "stampDuty/printing", number: 0 },
        {
          name: "税金计算",
          path: "stampDuty/StampDutyAalculationAheet",
          number: 0,
        },
        {
          name: "账票关联信息",
          path: "stampDuty/FinancialPlatformPnvoice",
          number: 0,
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 标签数组
      tagList: [],
      options: [],
      queryParams: {
        homeOrgNo: null,
        selectName: null,
        homeDate: null,
      },
    };
  },
  watch: {
    queryParams: {
      handler(newVal, oldVal) {
        console.log(newVal, "00999");
        window.sessionStorage.setItem(
          "queryParams",
          JSON.stringify(JSON.stringify(newVal))
        );
        this.getNum();
        // let data = JSON.parse(JSON.parse(window.sessionStorage.getItem('queryParams')))
      },
      immediate: false,
      deep: true,
    },
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val);
      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    },
  },
  created() {
    this.getListM();
    this.getQuery();
    this.getNum();
  },
  methods: {
    moment,
    onChange(file, name) {
      // console.log(file,'0---')
      // let formData = new FormData();
      // formData.append("file", file.raw);
      // console.log(formData,'formData')
      if (name === "合同管理池") {
        let formDataN = new FormData();
        formDataN.append("file", file.raw);
        adsMatHyxtStampTaxContractD(formDataN).then((res) => {
          if (res.data.isOk === 0) {
            this.$confirm(`${res.data.tips}`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              let formDataImport = new FormData();
              formDataImport.append("file", file.raw);
              adsMatHyxtStampTaxContractDcontractImport(formDataImport).then(
                (res) => {
                  if (res.code === 200) {
                    this.$message({
                      type: "success",
                      message: "导入成功!",
                    });
                    this.getNum();
                  }
                }
              );
            });
          } else {
            let formDataNG = new FormData();
            formDataNG.append("file", file.raw);
            adsMatHyxtStampTaxContractDcontractImport(formDataNG).then(
              (res) => {
                if (res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "导入成功!",
                  });
                  this.getNum();
                }
              }
            );
          }
        });
      }
      if (name === "发票管理池") {
        let formDataT = new FormData();
        formDataT.append("file", file.raw);
        adsMatHyxtStampTaxContinvoiceImportCheck(formDataT).then((res) => {
          if (res.data.isOk === 0) {
            this.$confirm(`${res.data.tips}`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              let formDataTE = new FormData();
              formDataTE.append("file", file.raw);
              adsMatHyxtStampTaxContinvinvoiceImport(formDataTE).then((res) => {
                if (res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "导入成功!",
                  });
                  this.getNum();
                }
              });
            });
          } else {
            let formDataTG = new FormData();
            formDataTG.append("file", file.raw);
            adsMatHyxtStampTaxContinvinvoiceImport(formDataTG).then((res) => {
              if (res.code === 200) {
                this.$message({
                  type: "success",
                  message: "导入成功!",
                });
                this.getNum();
              }
            });
          }
        });
      }
    },
    getNum() {
      stampTaxC(this.queryParams).then((res) => {
        if (res && res.data) {
          this.list[0].number = res.data.contractNum || 0;
          this.list[1].number = res.data.invoiceNum || 0;
          this.list[2].number = res.data.warningNum || 0;
          this.list[3].number = res.data.taxAmount || 0;
          this.list[4].number = res.data.payTaxAmount || 0;
          this.list[5].number = res.data.zhptInvoiceNum || 0;
        }
      });
    },
    getQuery() {
      console.log(this.$store.state);
      let data =
        JSON.parse(JSON.parse(window.sessionStorage.getItem("queryParams"))) ||
        {};
      if (data && (data.homeDate || data.homeOrgNo)) {
        console.log(data, "======dd====");
        this.queryParams = data;
      } else {
        this.queryParams = {
          homeOrgNo: this.$store.state.user.orgNo,
          selectName: this.$store.state.user.orgName,
          homeDate: moment().format("YYYY-MM"),
        };
      }
    },
    route(val) {
      this.$router.push(val);
    },
    handleUploadClick(event) {
      debugger;
      event.stopPropagation();
    },
    getListM() {
      listDept().then((response) => {
        this.options = this.handleTree(response.data, "deptId");
      });
    },
    delValue() {
      this.queryParams.homeOrgNo = "";
      this.queryParams.selectName = "";
    },
    // 结构树点击事件
    handleNodeClick(data) {
      console.log(data, "----");
      this.queryParams.homeOrgNo = data.deptId; // select绑定值为点击的选项的value
      this.queryParams.selectName = data.deptName; // input中显示值为label
      this.treeFilter = ""; // 点击后搜索框清空
      this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.label.indexOf(value) !== -1;
      return filterRes;
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      let arr = this.tagList.filter((item) => {
        return item.value == val;
      });
      return arr.length ? arr[0].label : "";
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  height: calc(100% - 40px);
  padding: 15px 15px;
}
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  //justify-content: center;
  .border {
    width: 30%;
    height: 200px;
    margin-left: 1%;
    margin-top: 1%;

    //padding: 10px 10px;
  }
  .border:hover {
    //background: linear-gradient(0deg, #80bfe6, #99c4e8);
    background: transparent;
    background-clip: content-box, padding-box;
    background-image: linear-gradient(135.03deg, #d5edeb, #fff),
      linear-gradient(to bottom right, rgba(163, 217, 214, 0.15), #189e95);
    box-shadow: 7px 7px 10px #eff1f5, 7px 7px 10px #fff,
      7px 7px 10px rgba(90, 136, 132, 0.32) inset;
    border: 2px solid #189e95;
  }
}
</style>