js获取当前年份
const yearNow = new Date().getFullYear().toString() || "";js获取当前季度
getCurrQuarter() {
// 获取当前季度：
var currMonth = new Date().getMonth() + 1;
var currQuarter = Math.floor(
currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
);
switch (currQuarter) {
case 1:
this.queryList.riskQuarter = "第一季度";
break;
case 2:
this.queryList.riskQuarter = "第二季度";
break;
case 3:
this.queryList.riskQuarter = "第三季度";
break;
case 4:
this.queryList.riskQuarter = "第四季度";
break;
}
},js获取白屏时间与首屏时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
// 获取首屏时间
console.log(new Date().getTime() - performance.timing.navigationStart);
</script>
</head>
<body>
<div class="modal">
</div>
<script>
//获取白屏时间
console.log(new Date().getTime() - performance.timing.navigationStart);
</script>
</body>
</html>vue2的mixin制作复制方法，创建copyMisIn.js文件
let copyMisin = {
methods: {
copy(content) {
const result = this.getCopy(content);
if (result === false) {
this.$message.error("不支持");
} else {
this.$message.success("复制成功");
}
},
getCopy(content) {
let textarea = document.createElement("textarea");
textarea.value = content;
textarea.readOnly = "readOnly";
document.body.appendChild(textarea);
textarea.select(); // 选择对象
textarea.setSelectionRange(0, content.length); //核心
let result = document.execCommand("Copy"); // 执行浏览器复制命令
textarea.remove();
return result;
},
}
}
export default copyMisin;使用copy方法
<template>
<div>
<div class="logcontent" v-for="item in missionList" :key="item.id">
<span>{
{ item.content }}</span
><span class="copy" title="复制" @click="copy(item.content)"></span>
</div>
</div>
</cwDialog>
</template>
<script>
import copyMisin from "@/js/copyMisIn.js";
export default {
mixins: [copyMisin],
};
</script>
<style lang="less">
</style>前端打包部署浅析，使用winscp
我们使用npm run build 将前端项目打成dist包，然后把打好的包放到服务器指定文件夹下，配置一下nginx，确保相关站点能指向服务器的前端文件夹目录，然后重启服务就行了
在vue2中tab切换使用动态组件，是父传子子传父跟正常组件一样的使用方法
父组件
<style lang="less" scoped>
</style>
<template>
<div
class="extractCommont extractSearch extractDataMaintenanceSearch"
id="container"
>
<component :is="currentView" @infoChange="getInfo"></component>
</div>
</template>
<script>
import personalReport from "./personalReport.vue"; //声誉风险台账 个人上报
import subordinateUnit from "./subordinateUnit.vue"; //声誉风险台账 下属单位
import operatingDepartment from "./operatingDepartment.vue"; //声誉风险台账 业务部门
export default {
components: {
personalReport,
subordinateUnit,
operatingDepartment,
},
data() {
return {
query:{},
currentView: "",
tabnameList: [],
isActive: "",
statistics: {
typeCount: 0,
divided: 0,
office: 0,
apply: 0,
conclude: 0
},
statisticsType: 1,
};
},
methods: {
getInfo(val){
this.query=val;
console.log('val :>> ', val);
},
toggleTabs(url, id, ele) {
//需要写一个切换组件的方法，把组件components里注册的名字给到:is
this.currentView = url.split("/")[3];
}
},
}
};
</script>
子组件
<template>
<!-- 个人上报 -->
<div class="extractCommont extractSearch">
<div class="titleLabel col-9">
<label>时间范围</label>
<el-radio-group v-model="riskQuarter" size="mini">
<el-radio-button
v-for="lab in optionTime"
:key="lab.lable"
:label="lab.value"
>{
{ lab.label }}</el-radio-button
>
</el-radio-group>
<div class="titleLabel col-9">
<el-input
type="text"
placeholder="输入问题描述搜索关键词"
class="col-2"
clearable
v-model="questionRemark"
/>
<button class="blue" @click="searchBtn()">
<img src="../../../images/search.png" />查询
</button>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
const yearNow = new Date().getFullYear().toString() || "";
export default {
data() {
return {
uploadRiskYear: yearNow,
uploadRiskQuarter: "",
uploadDepartMent: "", //排查部门
riskQuarter: "",
riskYear: yearNow,
optionTime: [
{
value: "",
label: "全部"
},
{
value: "第一季度",
label: "第一季度"
},
{
value: "第二季度",
label: "第二季度"
},
{
value: "第三季度",
label: "第三季度"
},
{ value: "第四季度", label: "第四季度" }
],
};
},
created() {
this.getCurrQuarter();
},
mounted() {
},
methods: {
getCurrQuarter() {
// 获取当前季度：
var currMonth = new Date().getMonth() + 1;
var currQuarter = Math.floor(
currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
);
switch (currQuarter) {
case 1:
this.riskQuarter = "第一季度";
this.uploadRiskQuarter = "第一季度";
break;
case 2:
this.riskQuarter = "第二季度";
this.uploadRiskQuarter = "第二季度";
break;
case 3:
this.riskQuarter = "第三季度";
this.uploadRiskQuarter = "第三季度";
break;
case 4:
this.riskQuarter = "第四季度";
this.uploadRiskQuarter = "第四季度";
break;
}
const arr = [];
arr.push(
this.riskQuarter || ["第一季度", "第二季度", "第三季度", "第四季度"]
);
this.$emit("infoChange", {
riskYear: this.riskYear + "年",
riskQuarter: arr,
queryType: 1,
orgType: Number(this.orgType)
});
},
}
};
</script>
<style lang="scss" scoped>
</style>
当我们使用element-ui时，我们懒得在下面写方法写from格式参数调接口时，我们用到了auto-load属性，关了之后就不会出现上传完文件就立马提交的情况，把它关了之后使用ref点击保存再去执行下一步。
<el-upload
class="upload"
action="/cbrc/work/book/batchAddRisk"
:auto-upload="false"
:on-success="upsuccess"
:headers="header"
:on-remove="deletefile"
:before-upload="handleChange"
:file-list="fileList"
:limit="1"
:data="{
orgType: uploadDepartMent,
riskQuarter: uploadRiskQuarter,
riskYear: uploadRiskYear ? uploadRiskYear + '年' : ''
}"
ref="upload"
>
<el-button type="primary" class="blue"
>添加文件<i class="el-icon-upload el-icon--right"></i
></el-button>
<div class="upload__tip">
备注：只可上传一个文件，已有风险舆情隐患只更新状态，不覆盖原数据
</div>
</el-upload>js代码
this.$refs.upload.submit();