文章目录 零碎知识点总结1、跳转页面写法2、重置表单3、默认列表序号4、列表 *** 作render6、下载文件7、iview ui表格中标签颜色8、iview ui表单中(单选框)不同标签颜色9、element ui表格中不同标签颜色10、字典code码转换11、动态添加 删除 按钮12、下载文件（blob）13、上传图片13、上传文件13、上传文件13、上传文件13、上传文件13、上传文件13、上传文件13、上传文件13、上传文件 1、跳转页面写法记录相关功能写法，以供以后参考
（1）this.$router.resolve 新窗口跳转页面
checkProcessInfo(row) {
const design = this.$router.resolve({
name: 'form-render-db', //跳转到的路由name
query: {
evaluationtInformationId: row.evaluationtInformationId,
formUrl: row.processStatusDesc,
evaluationId: row.evaluationId
}
})
window.open(design.href, '_blank');//打开空白页面
}
（2）this.$router.push 该方法的参数可以是一个字符串路径，或者一个描述地址的对象
showDetail (id) {
this.$router.push({
name: "alarmStrategyAdd", //跳转到的路由name
params: {oper: "modify", id: id}//带查询参数
})
},
showDetail (id) {
this.$router.push({
name: 'role-edit',
query: { id }
})
},
//或者
this.$router.push({path: '/login?url=' + this.$route.path});
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 或者
this.$router.push('/home').catch(err => {})
注意： 由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。
2、重置表单/*重置*/
handleReset(name){
this.$refs[name].resetFields()
}
{ title: '序号', type: 'index', align: 'center'},
{
key: 'fileName',
title: '文件名称',
align: 'center',
render: (h, params) => {
return h('div', {
style: {
color: "#488CF0",
cursor: 'pointer',
},
on: {
'click': () => {
this.downLoad(params.row);
}
},
}, params.row.fileName);
}
},
{
title: ' *** 作',
align: 'center',
key: 'handle',
render: (h, params) => {
return h('Upload',
{
props: {
action: this.uploadUrl,
beforeUpload: this.beforeUpload,
onSuccess: this.successUpload,
onFormatError: this.formatError,
showUploadList: false,
format: this.format
},
},
[
h( 'Button', {
style: {
marginRight: '5px',
},
on: {
'click': () => {
this.upload(this.evaluationTypeId);
}
},
props: {
placement: 'top',
}
}, '文件上传'
),
]);
}
},
{
title: ' *** 作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
let btn_delete =
h('Tooltip', {
props: {
placement: 'top',
content: "删除",
transfer: true
}
},
[
h('Button',
{
props: {
type: "text",
icon: "md-close",
disabled: (localStorage.roleNames === 'Control-people' || localStorage.roleNames === 'ld') || this.processInfo.processFlag === 'done'
},
on: {
click: () => {
this.deleteLine(params.row.id)
}
}
},
)
]);
let btn_edit =
h('Tooltip', {
props: {
placement: 'top',
content: "编辑",
transfer: true
}
},[
h('Button',
{
props: {
type: "text",
icon: "ios-paper",
disabled: (localStorage.roleNames === 'Control-people' || localStorage.roleNames === 'ld') || this.processInfo.processFlag === 'done'
},
on: {
click: () => {
this.editLine(params.row)
}
}
},
)
]);
let btn_remark =
h('Tooltip', {
props: {
placement: 'top',
content: "添加批注",
transfer: true
}
},[
h('Button',
{
props: {
type: "text",
icon: "md-create",
disabled: (localStorage.roleNames === 'xmjl' || localStorage.roleNames === 'ld') || this.processInfo.processFlag === 'done'
},
on: {
click: () => {
this.editRemark(params.row.id)
}
}
},
)
]);
return h("div",[btn_delete,btn_edit,btn_remark]);
}
}
download(name) {
let self = this;
let filename = ''
if(name == 'html'){
filename = this.formDownload.taskName + '.zip'
} else {
filename = this.formDownload.taskName + '.' + name
}
const BaseUrl = this.$util.getAjaxUrl('type_8')
const url = BaseUrl + '/api/download'
var params = {
taskId: this.formDownload.id,
suffix: name
}
Util.http.post(url, params, {responseType: 'blob'}).then(response => {
let res = response.data
const blob = res
if('msSaveOrOpenBlob' in navigator){
window.navigator.msSaveOrOpenBlob(blob, filename);
} else {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = filename
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
this.init()
}).catch(e => {
self.$Message.error(e)
})
},
ajax.downloadDoc = function (data, fileName) {
var blob = new Blob([data])
if (window.navigator.msSaveBlob) {
try {
// window.navigator.msSaveBlob(blob, fileName+'.doc')
window.navigator.msSaveBlob(blob, fileName)
} catch (e) {
console.log(e);
}
} else {
let url = window.URL.createObjectURL(blob)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
}
}
{
title: '符合情况',
key: 'complianceDesc',
align:"center",
width: 120,
render: (h, params) => {
return h("div", [
h(
"Tag",
{
props: {
color: this.getColor(params.row.compliance)
}
},
(params.row.complianceDesc === "" || params.row.complianceDesc == null)? "未填写" : params.row.complianceDesc
)
]);
}
},
//不同颜色
getColor(value){
if(value === '0'){
return 'blue'
} else if(value === '1') {
return 'green'
} else if(value === '2') {
return 'yellow'
} else if(value === '3') {
return 'red'
} else {
return 'blue'
}
},
<FormItem style="width: 100%" label="符合情况:">
<Radio-group v-model="temp.compliance" @on-change="getComplianceDesc">
<Radio label="1">
<Tag color="green">符合</Tag>
</Radio>
<Radio label="2">
<Tag color="yellow">部分符合</Tag>
</Radio>
<Radio label="3">
<Tag color="red">不符合</Tag>
</Radio>
<Radio label="4">
<Tag color="black">不适用</Tag>
</Radio>
</Radio-group>
</FormItem>
<el-table-column
prop="status"
label="安全任务状态"
width="150"
align="center">
<template slot-scope="scope">
<el-tag :type="changeStatus(scope.row.status)" disable-transitions>{{ statusText(scope.row) }}</el-tag>
</template>
</el-table-column>
// 改变状态颜色
changeStatus(newStatus) {
if (newStatus == 1) {
return 'primary'
} else if (newStatus == 2) {
return 'warning'
} else if (newStatus == 3) {
return 'success'
} else if (newStatus == 4) {
return 'info'
} else if (newStatus == 5) {
return 'danger'
}
},
//标签文字
statusText(newStatu) {
const newStatus = newStatu.status
if (newStatus == '1') {
return '新建指派'
} else if (newStatus == '2') {
return '校验通过'
} else if (newStatus == '3') {
return '任务完成'
} else if (newStatus == '4') {
return '已废弃'
} else if (newStatus == '5') {
return '超时'
}
},
//展示字典code码对应的name值
getCategoryName(id,arr) { // id：传进来的code码，arr：传进来的字典数组列表
if (!id) {
return null;
}
for(let i=0;i<arr.length;i++){
if(arr[i].code==id){
return arr[i].name
}
}
return null
},
//动态添加 删除 按钮
var deleteButton = function (vm, h, currentRow, index) {
return h('Poptip', {
props: {
confirm: true,
title: currentRow.WRAPDATASTATUS != '删除' ? '您确定要删除这条数据吗?' : '您确定要对条数据撤销删除吗?',
transfer: true,
placement: 'left'
},
on: {
'on-ok': function () {
vm.deleteData(currentRow, index)
}
}
},
[
h('Button', {
domProps: {
title: '删除'
},
style: {
marginLeft: '5px'
},
props: {
size: 'small',
type: 'error',
}
}, '删除')
]);
};
Blob对象表示一个不可变、原始数据的类文件对象
this.showExportModal = false
const dom = document.createElement('a') // 隐藏的a标签，href为输出流
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
const url = window.URL.createObjectURL(blob) // 生成一个Blob对象
dom.style.display = 'none'
dom.href = url
document.body.appendChild(dom)
dom.setAttribute('download', '模板检查项.xls') // 指示浏览器下载url,而不是导航到它
dom.click()
document.body.removeChild(dom)
URL.revokeObjectURL(url)
this.templateId = ''
//基于axios的写法。
axios.get(`url`, {
responseType: 'arraybuffer',
}).then(res => {
if (res.status == 200) {
let blob = new Blob([res.data], {
type: 'application/vnd.ms-excel;charset=utf-8'
});
let fileName = `yourfile.xls`;
// for IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//兼容ie
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
// for Non-IE
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
link.href = objectUrl;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
}
} else {
// error handler
}
});
<Upload
multiple
type="drag"
:max-size="10240"
:format="['jpg','jpeg','png']"
:show-upload-list="false"
:before-upload="beforeUpload"
:on-exceeded-size="handleMaxSize"
:on-success="handleSuccess"
:on-format-error="uploadError"
:action="192.168.44.103:9031/api/upload">
<div style="display: flex;justify-content: center;align-items: center;padding: 10px 0" v-if="info.tEvaluationTopology.itemValue.length>0">
<img class="img" style="max-width: 380px" v-for="item in info.tEvaluationTopology.itemValue" :src="item.imgPath"
:id="info.tEvaluationTopology.itemKey"
alt="" >
</div>
<div style="padding: 20px 0" v-else>
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>不存在拓扑图</p>
<p>Click or drag files here to upload</p>
</div>
</Upload>
//methods
beforeUpload(file) {
this.file = file
},
handleSuccess() {
let reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = async e => {
this.topology.imgPath = await e.target.result
for(let i=0;i<this.info.tEvaluationTopology.itemValue.length;i++){
this.info.tEvaluationTopology.itemValue[i].imgPath=this.topology.imgPath
}
}
},
uploadError(error, file, fileList) {
this.$Message.error('文件格式不正确，请上传图片')
},
handleMaxSize(file) {
this.$Message.error('文件大小不要超过10M')
},
a
a
a
a
a
a
a
a
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）