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

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.commit, sessionStorage.setItem, 和 localStorage.setItem 区别：

store.commit, sessionStorage.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