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
分别来自不同的领域和用途:
-
store.commit
- 来源: Vuex store,这是 Vue.js 的状态管理模式 + 库。
- 用途: 用于提交 mutations,即改变 store 中的状态。Vuex 是一种集中式的状态管理方案,它允许你在一个中心位置管理所有共享状态,使得状态变更可预测且易于追踪。
- 特点:
- 遵循 Flux/Redux 的模式,提供了一种明确的状态变更方式。
- 提交的是 mutation 名称,并可以传递额外的 payload 数据。
- 可以配合 actions 使用,actions 可以异步地触发 mutations。
- 通常用于响应组件中的事件或在某些条件下更新状态。
-
sessionStorage.setItem
- 来源: Web Storage API,是浏览器提供的本地存储机制之一。
- 用途: 用于在用户的浏览器中存储键值对数据,这些数据在同一个会话(即浏览器窗口或标签页)中保持有效,直到会话结束(如浏览器窗口关闭)。
- 特点:
- 存储的数据是持久的,但仅限于当前会话。
- 存储的数据量有限制,通常每个域名大约为5MB。
- 数据以字符串形式存储,如果要存储复杂数据类型,需要先序列化再存储。
-
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