tab切换与表格展示
<template>
<div class="container">
<div class="bei">
<!-- 头部 -->
<div class="header">
<span class="left">
<!-- 添加按钮 -->
<el-button
class="but"
size="medium"
type="primary"
this.uid="ContractUid"
@click="saveContractForm()"
>添加</el-button>
</span>
<!-- tab切换栏 -->
<ul>
<li
v-for="(item,index) in navList"
:class="index == activeNum ? 'active_calass' : '' "
:key="index"
@click="handleTab(index,item.value)">{{item.label}}</li>
</ul>
<!-- 搜索框 -->
<span class="fa">
<el-input v-model="para.Keywork" placeholder="请输入内容"></el-input>
<i class="font_family el-icon-search" @click="searchPut()"></i>
</span>
<!-- tab表格 -->
<avue-crud
:option="option"
:page="page"
:data="data"
:cell-style="cellStyle"
@cell-click="handleRowClick"
@size-change="sizeChange"
@current-change="currentChange"
ref="crud"
class="crud"
>
<template slot-scope="scope" slot="menu">
<!-- 下载按钮 -->
<el-button
type="text"
v-if="scope.row.State == 3 || scope.row.State == 5"
>
<a :href="scope.row.SignFileUrl">
<i class="font_family el-icon-download"></i>
</a>
</el-button>
<!-- 发起签署按钮 -->
<el-button
type="text"
v-if="scope.row.State == 1"
title="发起签署"
>
</el-button>
</template>
</avue-crud>
</div>
</div>
</div>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css';
import * as Api from "@/api/Project/project-management";
import { encryptionObject } from "@/util/util";
import Change from "../project/change";
export default {
name:"filecente",
components: {
"full-calendar": require("vue-fullcalendar"),
Change
},
data() {
return {
sourceType: 'disposeEnd',
activeName: 'second',
// 分页
page: {
total: 0,
pageSize: 20,
currentPage: 1
},
// 搜索框
putName: '',
// tab数据
data: [],
option: {
menu: true,
header: false,
showHeader:false,
columnBtn: false,
title: false,
addBtn: false,
refreshBtn: false,
editBtn: false,
delBtn: false,
menuType: "icon",
align: "center",
column: [
{
label: "文件名称",
prop: "FileName",
overHidden: true,
width: 300
},
{
label: "编号",
prop: "FileCode"
},
{
label: "申请人",
prop: "CreateName"
},
{
label: "时间",
prop: "CreateDate",
type: "date",
format: "yyyy/MM/dd",
valueFormat: "yyyy/MM/dd"
},
{
label: "状态",
prop: "State",
type: "select",
dicData: [
{
label: "全部文件",
},
{
label: "未发起",
value: 1
},
{
label: "待签署",
value: 2
},
{
label: "已签署",
value: 3
},
{
label: "已撤回",
value: 4
},
{
label: "已作废",
value: 5
},
]
}
]
},
formInline: {
Keywork: "",
Type: "",
date: ""
},
para: {
State: '',
Keywork: "",
pageNo: '',
pageSize: ''
},
navList: [
{
label: "全部文件",
},
{
label: "未发起",
value: 1
},
{
label: "待签署",
value: 2
},
{
label: "已签署",
value: 3
},
{
label: "已撤回",
value: 4
},
{
label: "已作废",
value: 5
},
],
activeNum:0
};
},
created(){
this.handleTab(0,0);
},
methods: {
// 切换nav
handleTab(index,value){
console.log(index)
this.activeNum = index;
// 请求传递参数
const pageData = {
pageNo: this.page.currentPage - 1,
pageSize: this.page.pageSize,
Keywork: this.para.Keywork,
State:value
};
// Base64数据加密
const result = encryptionObject({
data: pageData,
type: "Base64",
key: "avue"
});
// 加密后的参数
const param = {
param: result
};
Api.SignList(param).then((res )=> {
const resData = res.data;
// const count = resData.Count;
// this.data = resData.Items;
// this.page.total = count;
this.data = resData.Data.Items;
console.log(this.data, '999')
this.page.total = resData.Data.Count;
});
},
// 添加按钮
saveContractForm() {
console.log(btn)
},
// 搜索框
searchPut() {
console.log('kkkk')
},
// handleClick(tab, event) {
// console.log(tab, event);
// },
// 获取详情数据
handleRowClick(row, column, cell, event) {
if (column.property === "ProjectName") {
this.dialogVisible = true;
this.DetailsID = row.Id;
const param = {
id: row.Id
};
}
},
sizeChange(val) {
this.page.currentPage = 1;
this.page.pageSize = val;
this.ProjectPage();
},
currentChange(val) {
this.page.currentPage = val;
this.ProjectPage(this.page);
},
// 项目管理状态管理
cellStyle({ row, columnIndex }) {
if (columnIndex == 3) {
if (row.State === 0) {
return {
color: "#ff4d4d"
};
} else if (row.State === 1) {
return {
color: "#22ca6f"
};
} else if (row.State === 4) {
return {
color: "#7f8082"
};
} else if (row.State === 3) {
return {
color: "#e3a327"
};
} else {
return {
color: "#1aabef"
};
}
}else if(columnIndex == 0){
return {
cursor: "pointer"
};
}
},
}
};
</script>
<style scoped lang="scss">
.bei {
background-color: #fff;
width: 98%;
margin: 0 auto;
}
// tab类名样式
.active_calass{
color: blue;
font-family:Source Han Sans CN;
font-weight:bold;
}
ul li{
margin-top: 20px;
list-style-type:none;
float: left;
padding-left: 30px;
padding-top: 8px;
}
//添加按钮样式
.but {
margin-top: 20px;
float: left;
margin-left: 30px;
margin-bottom: 20px;
}
// 搜索框样式
.el-input {
margin-top: 20px;
width: 20%;
margin-left: 29%;
}
.fa {
position: relative;
i {
position: absolute;
top: 5px;
left: 93%;
}
}
// tab表格样式
.avue-crud {
border-collapse: collapse;
// /deep/.el-table__row {
// background:rgba(244,244,246,1);
// margin-top: 5px;
// border-radius:4px;
// border-bottom: 5px solid #fff
// }
}
/deep/.el-table .cell {
line-height: 60px;
}
</style>
