大屏宁德烟草第二版总结,批量导入

news2024/11/13 9:26:45

toFixed

toFixed(x) 方法返回一个表示 numObj 的字符串,如果不该x,会进行四舍五入。

includes() 

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

批量导入

 <a-upload accept=".xlsx,.xls" :action="HttpAction" :headers="headers" :show-upload-list="false" @change="handleChange">
        <a-button type="primary" class="btn1">批量导入</a-button>
      </a-upload>
  data() {
    return {
      HttpAction: `/asset/assetrentcontract/importCheck`, // 上传请求连接
      headers: {
        // 请求头部
        Authorization: Cookie.get("Authorization"),
      },
   
    };
  },
  handleChange(event) {
      this.$refs.xlprogressModal.clickShowModal(3, event);
      // if (event.file.status === "done") {
      //   this.$message.success(event.file.response.msg);
      //   this.resetSearchForm();
      // } else if (event.file.status === "error") {
      //   this.$message.error(event.file.response.msg);
      // }
    },
<XLprogressModal ref="xlprogressModal" @close="oncloseXlPM"></XLprogressModal>
  oncloseXlPM() {
      this.resetSearchForm();
    },
   resetSearchForm() {
      this.queryParam = {};
      this.searchReset();
    },

XqoLdprogressModal.vue

<template>
  <div>
    <a-modal :visible="visible" @cancel="oncloseM" :maskClosable="false" width="45%" centered>
      <div v-if="expstatus == 0">
        <div v-show="prosta == 'exception'" style="font-weight: 600; margin-top: 15px">检查数据不通过,发现以下问题:</div>
        <div class="msger" :style="{ 'max-height': prosta == 'exception' ? '80px' : '' }">{{ msg }}</div>
        <a-progress :percent="percent" :status="prosta" />
      </div>
      <div v-else>
        <div style="text-align: center; margin-top: 20px; font-size: 14px">
          {{ expstatus == 1 ? "检查数据通过,是否开始导入?" : "数据导入成功,是否直接提交审核?" }}
        </div>
      </div>
      <div slot="footer">
        <a-button type="dashed" @click="oncloseM" v-if="expstatus != 0" :loading="loading">取消</a-button>
        <a-button type="primary" @click="onExpY" v-if="expstatus == 1" :loading="loading">确认导入</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { districtImport, buildingImport } from "@/api/operate";
import { contractImport } from "@/api/assetrentplan";
export default {
  components: {},
  data() {
    return {
      visible: false,
      loading: false,
      percent: 0,
      expstatus: 0,
      msg: "检查数据中",
      prosta: "active",
      file: {},
      type: 0,
      ImporList: [],
    };
  },
  methods: {
    handleEpx(event) {
      let self = this;
      self.expstatus = 0;
      self.visible = true;
      let intervalId = setInterval(() => {
        // 每100毫秒增加1%直到100%
        if (self.percent < 99) {
          self.percent += 1;
        } else {
          clearInterval(intervalId); // 达到100%时停止定时器
          self.oncheck(event);
        }
      }, 100); // 每50毫秒增加一次
    },
    oncheck(event) {
      let self = this;
      if (self.percent == 99) {
        if (event.file.response.code == 0) {
          self.percent = 100;
          this.prosta = "success";
          setTimeout(() => {
            self.expstatus = 1;
            this.$nextTick(() => {
              this.ImporList = event.file.response.data;
            });
          }, 200);
        } else {
          this.prosta = "exception";
          this.msg = event.file.response.msg;
        }
      }
    },

    onExpY() {
      let self = this;
      self.loading = true;
      let apiList = [districtImport, buildingImport, contractImport];
      apiList[self.type - 1](self.ImporList)
        .then((res) => {
          if (res.code == 0) {
            self.loading = false;
            this.$message.success(res.msg);
            this.oncloseM();
          }
        })
        .catch((err) => {
          self.loading = false;
        });
    },

    oncloseM() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 250);
    },
    clickShowModal(type, eRecod) {
      this.visible = true;
      this.type = type;
      this.prosta = "active";
      this.msg = "检查数据中";
      this.expstatus = 0;
      this.percent = 0;
      this.file = {};
      this.handleEpx(eRecod);
    },
  },
};
</script>
<style lang="scss" scoped>
.msger {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  overflow: auto;
}
.disflex {
  display: flex;
  justify-content: space-between;
  .ant-input {
    width: 120px;
  }
}
.mapico {
  font-size: 30px;
  margin: 0 0 0 10px;
}
.ant-progress {
  line-height: 2.5;
}
</style>

store.commitsessionStorage.setItem, 和 localStorage.setItem 区别:

store.commitsessionStorage.setItem, 和 localStorage.setItem 分别来自不同的领域和用途:

  1. store.commit

    • 来源: Vuex store,这是 Vue.js 的状态管理模式 + 库。
    • 用途: 用于提交 mutations,即改变 store 中的状态。Vuex 是一种集中式的状态管理方案,它允许你在一个中心位置管理所有共享状态,使得状态变更可预测且易于追踪。
    • 特点:
      • 遵循 Flux/Redux 的模式,提供了一种明确的状态变更方式。
      • 提交的是 mutation 名称,并可以传递额外的 payload 数据。
      • 可以配合 actions 使用,actions 可以异步地触发 mutations。
      • 通常用于响应组件中的事件或在某些条件下更新状态。
  2. sessionStorage.setItem

    • 来源: Web Storage API,是浏览器提供的本地存储机制之一。
    • 用途: 用于在用户的浏览器中存储键值对数据,这些数据在同一个会话(即浏览器窗口或标签页)中保持有效,直到会话结束(如浏览器窗口关闭)。
    • 特点:
      • 存储的数据是持久的,但仅限于当前会话。
      • 存储的数据量有限制,通常每个域名大约为5MB。
      • 数据以字符串形式存储,如果要存储复杂数据类型,需要先序列化再存储。
  3. localStorage.setItem

    • 来源: 同样来自 Web Storage API。
    • 用途: 类似于 sessionStorage,但是存储的数据在浏览器关闭后仍然存在,除非手动删除或达到存储限制。
    • 特点:
      • 存储的数据是持久性的,即使浏览器重启或计算机重启后数据依然存在。
      • 同样有存储量限制,每个域名大约5MB。
      • 数据同样以字符串形式存储,需要序列化复杂数据类型。

总结来说,store.commit 用于在 Vue.js 应用中管理状态,而 sessionStorage.setItem 和 localStorage.setItem 则用于在浏览器中存储数据,两者分别适用于会话级和持久性存储需求。

ipconfig   查看本机网络地址

v-auth

权限标识 :权限控制是中后台系统中常见的需求之一

当Vue组件加载时,v-auth指令会触发一个权限检查。这通常涉及调用一个全局注册的权限检查函数,比如 checkAuth,它会接收权限字符串作为参数,并返回一个布尔值。如果用户具有相应的权限,那么带有v-auth指令的元素将正常显示和工作;如果没有权限,则该元素可能会被隐藏或禁用。

我们在页面假设给了权限标识

 <a-button
        type="primary"
        @click="addView()"
        v-auth="'asset:assetmanagementsystem:add'"
        >新增资产管理制度</a-button
      >

这意味着所有的这个页面的这个按钮都会被禁用,我们的需求是有的页面是有可以,有的是不可以新增的,那么这个时候需要在后台给这个权限,如果后台没有这个权限 那么这个按钮就会被禁用。还有一步 我们在路由上需要配置给了权限。

如下路由配置,则表明 `验权页面` 需要准入权限(permission): `form`

```js {5}

const route = {

  name: '验权页面',

  path: 'auth/demo',

  meta: {

    authority: 'form',

  },

  component: () => import('@/pages/demo')

}

form就是权限id  一种抽象的概念

在config.js中我看到了  所以路由的时候写form

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1973683.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

饿了吗新版bxet

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 前言(…

【Linux】网络编程_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…

LLM大模型的书那么多,如何快速选到适合自己的那一本?来,我教你!

大模型的书这么多&#xff0c;该怎么选呢&#xff1f;今天就来教大家怎么快速地从众多大模型书中选到你想要的那一本&#xff01; 朋友们如果有需要这些大模型书 扫码获取~ &#x1f449;CSDN大礼包&#x1f381;&#xff1a;全网最全《LLM大模型书籍资源包》免费分享&#xf…

SpringBoot入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享

场景 作为一名Java开发者&#xff0c;SpringBoot已经成为日常开发所必须。 势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼&#xff0c;再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者…

程序工具_doxygen

doxygen是API文档生成工具 安装和使用&#xff1a; 下载地址&#xff1a;https://www.doxygen.nl/download.html 安装一直next就可以。 打开后的界面&#xff1a; 使用&#xff1a; 选择好文件夹&#xff0c;然后 “Run dexygen”&#xff0c;就在选择的文件夹下生成html和…

浏览器用户文件夹详解 - WebData(八)

1.WebData简介 1.1 什么是WebData文件&#xff1f; WebData文件是Chromium浏览器中用于存储用户表单数据、自动填充信息和支付信息的一个重要文件。每当用户在浏览器中填写表单或保存支付信息时&#xff0c;这些数据都会被记录在WebData文件中。通过这些记录&#xff0c;浏览…

[PM]面试题-综合问题

思维题 说说当前的科技行业 web3是我比较感兴趣的方向, 在国内还处于起步阶段, web3重要的特点是去中心化, 依赖的技术有以太坊, 区块链, 智能合约, 现在位置还没有特别成熟的产品形态, 发展的比较好的方向就是数字藏品和游戏方向 列举一个你认为比较好的APP, 说明其独特之处…

【从零搭建SpringBoot3.x 项目脚手架】- 1. 工程初始化

为什么会有这个系列文章 在项目开发中&#xff0c;大多项目依旧沿用的是 JDK 8 Spring Boot 2.x 系列的技术栈&#xff0c;没有Spring Boot 3.x 的上手实践机会。在个人学习探索 Spring Boot 3.x 的过程中&#xff0c;遇到多数第三方框架集成和问题排查的技术问题&#xff0c…

优秀的行为验证码的应用场景与行业案例

应用场景 登录注册 &#xff1a; 验证码适用于App、Web及小程序等用户注册场景&#xff0c;可以抵御自动机恶意注册&#xff0c;垃圾注册、抵御撞库登录、暴力破解、验证账号敏感信息的修改&#xff0c;同时可以有效阻止撞库攻击&#xff0c;从源头进行防护&#xff0c;保障正…

Spring Sharding 启动加载慢问题排查

问题复现&#xff1a; Spring服务在启动的时候经常发现会在一个地方停顿很久&#xff0c;通过日志看到Spring 在初始化 Druid 数据的时候进行了阻塞操作&#xff0c;导致耗时接近2s 耗时对服务本身未造成太大影响&#xff0c;主要在启动的时候浪费了太久的时间 问题排查&…

Python酷库之旅-第三方库Pandas(062)

目录 一、用法精讲 241、pandas.Series.view方法 241-1、语法 241-2、参数 241-3、功能 241-4、返回值 241-5、说明 241-6、用法 241-6-1、数据准备 241-6-2、代码示例 241-6-3、结果输出 242、pandas.Series.compare方法 242-1、语法 242-2、参数 242-3、功能 …

WEB前端15-Router路由

Vue2-router路由 在使用Vue.js构建现代单页面应用程序&#xff08;SPA&#xff09;时&#xff0c;路由管理是至关重要的一部分。Vue Router 是 Vue.js 官方的路由管理器&#xff0c;它允许你在应用程序中实现基于组件的页面导航。本文将介绍Vue Router的基本概念和用法&#x…

TypeScript 装饰器详解

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…

linux一些基础知识(未完待续)

ldd&#xff1a;输出程序或者库所依赖的共享库列表dmesg -c: 显示系统内核日志/dev/ttyS0: 串口com0/dev/tty: 当前控制台/dev/console&#xff1a;总控制台.local &#xff1a;本地文件 /home/ljg下有多个汉字命名的文件夹&#xff0c;.local不在其中&#xff1a; cat /var…

正则表达式 空格匹配

目录 一. 前提二. 半角空格 匹配半角空格三. ^ 匹配半角空格开头的半角空格四. ^ $ 匹配整行都是半角空格五. ^[ \t]$ 匹配整行都是半角或Tab空格六. \s 匹配所有空格七. [^\s]匹配除了空格之外的所有内容 一. 前提 &#x1f447;&#x1f447;&#x1f447;有如下所示的内容…

【2024蓝桥杯/C++/B组/传送阵】

题目 问题代码 #include<bits/stdc.h> using namespace std;const int N 1e610; int n; int porter[N]; int ans; int sign[N]; bool used;void dfs(int now, int cnt) {if(sign[now] && used){ans max(ans, cnt);return;}if(!sign[now]){cnt, sign[now] 1; …

大数据环境安装Elasticsearch Kibana可视化

1、用yum安装&#xff0c;配置仓库和镜像。 2、用离线软件包&#xff0c;rpm安装。 服务器环境CentOS7.9 因为云安装&#xff0c;配置镜像版本一直没有成功&#xff0c;改为直接下载软件安装。 官方网址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch 因为要…

提供三方API接口、调用第三方接口API接口、模拟API接口(二)通过token实现防止业务接口的重复调用

背景&#xff1a;紧接着上一篇&#xff0c;API中的签名认证&#xff0c;我通过signature签名机制保证了&#xff0c;参数不被修改&#xff0c;但是如果我们提供给外部的接口&#xff08;此时我们作为第三方&#xff09;&#xff0c;如果被外部恶意重复调用怎么办&#xff1f; 此…

并行编程实战——TBB中的图

一、graph 在TBB框架中&#xff0c;基础的运行框架就是图graph。简单的回顾一下什么是图&#xff1f;图是由顶点和边组成的数学结构&#xff0c;表示对象及其之间的关系。图分为有向图和无向图。在TBB中&#xff0c;其实它的图叫做流图&#xff08;Flow Graph&#xff09;&…

【leetcode详解】直角三角形:用空间换时间(O(m*n*(m+n))>O(m*n))(思路详解)

思路详解&#xff1a; 0. 遍历矩阵grid中每个点&#xff0c;若为“1”&#xff0c;则尝试将其视为直角三角形的直角顶点&#xff0c;关注该点所在横、纵轴&#xff0c;是否有其他点为“1”&#xff08;来与之构成直角边&#xff09; 1. 关于如何计算以该点为直角顶点的直角三…