|
<template>
|
<div class="dictionaryBox">
|
<My-bread :list="[
|
`通信方案筹划`,
|
`通信方案拟制`,
|
]"></My-bread>
|
<el-divider />
|
<div class="menuBox">
|
<div class="menuTitle">
|
<div>
|
<el-input size="small"
|
prefix-icon="el-icon-search"></el-input>
|
</div>
|
<div>
|
<el-button type="success"
|
size="small"
|
@click="handlerInsert">添加</el-button>
|
<el-button type="danger"
|
size="small"
|
@click="handlerDel">删除</el-button>
|
</div>
|
</div>
|
|
<div class="menuContent">
|
|
<el-table :data="tableData"
|
style="width: 100%;height:calc(100% - 1px); "
|
@selection-change="handleSelectionChange">
|
<el-table-column prop="name"
|
align="center"
|
label="名称">
|
</el-table-column>
|
<el-table-column prop="coord"
|
align="center"
|
label="链路">
|
</el-table-column>
|
<el-table-column prop="types"
|
align="center"
|
label="链接站点">
|
</el-table-column>
|
<el-table-column prop="bak"
|
align="center"
|
label="链路状态">
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button size="mini"
|
plain
|
type="warning"
|
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</div>
|
<div class="menupage">
|
<el-pagination @size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listData.pageIndex"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="listData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listData.count"></el-pagination>
|
|
</div>
|
</div>
|
<el-dialog :title="title"
|
:visible.sync="dialogVisible"
|
width="50%"
|
:before-close="handleClose">
|
<el-form :model="editFrom"
|
label-width="80px">
|
<el-form-item label="名称">
|
<el-input v-model="editFrom.name"
|
style="width:calc(100% - 100px);"
|
placeholder="请输入名称"></el-input>
|
</el-form-item>
|
<el-form-item label="链路">
|
<el-input v-model="editFrom.coord"
|
style="width:calc(100% - 100px);"
|
placeholder="请输入位置"></el-input>
|
</el-form-item>
|
<el-form-item label="链接站点">
|
<el-input v-model="editFrom.coord"
|
style="width:calc(100% - 100px);"
|
placeholder="请输入位置"></el-input>
|
</el-form-item>
|
<el-form-item label="链路状态">
|
<el-input v-model="editFrom.bak"
|
style="width:calc(100% - 100px);"
|
placeholder="请输入备注"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer"
|
class="dialog-footer">
|
<el-button size="small"
|
@click="setSubMite">取 消</el-button>
|
<el-button type="primary"
|
size="small"
|
@click="handleClose">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import MyBread from "@/components/MyBread.vue";
|
|
export default {
|
name: "multimedia",
|
components: { MyBread },
|
data () {
|
return {
|
listData: {
|
pageIndex: 1,
|
pageSize: 100,
|
count: 0,
|
},
|
tableData: [
|
|
],
|
options: [
|
{
|
name: '指挥所通信枢纽',
|
val: "t1"
|
},{
|
name: '干线通讯枢纽',
|
val: "t2"
|
},{
|
name: '辅助通讯枢纽',
|
val: "t3"
|
}
|
],
|
multipleSelection: [],
|
|
dialogVisible: false,
|
title: "",
|
editFrom: {
|
types: "",
|
}
|
};
|
},
|
watch: {
|
|
},
|
created () {
|
this.setTableDataStart();
|
},
|
methods: {
|
handleClose () {
|
this.title="";
|
this.dialogVisible=false;
|
this.editFrom.types=this.options[0].val
|
},
|
setSubMite () {
|
this.handleClose();
|
},
|
handlerInsert () {
|
this.title="新增";
|
this.dialogVisible=true;
|
},
|
handleEdit (index,row) {
|
this.editFrom=JSON.parse(JSON.stringify(row));
|
this.title="修改";
|
this.dialogVisible=true;
|
},
|
handlerDel () {
|
|
},
|
formatter (row,column) {
|
var obj=this.options.filter(res => {
|
if(row.types==res.val) {
|
return res;
|
}
|
});
|
return obj[0].name
|
},
|
setTableDataStart () {
|
this.tableData=[{
|
name: 'XXX链路1',
|
types: ' ',
|
coord: "",
|
bak: ""
|
},{
|
name: 'XXX链路2',
|
types: ' ',
|
coord: "",
|
bak: "",
|
}]
|
this.listData.count=this.tableData.length;
|
this.handleClose();
|
},
|
handleSelectionChange (res) {
|
this.multipleSelection=res;
|
},
|
handleSizeChange (val) {
|
console.log(`每页 ${val} 条`);
|
this.listData.pageSize.val;
|
},
|
handleCurrentChange (val) {
|
console.log(`当前页: ${val}`);
|
this.listData.pageIndex=val;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.dictionaryBox {
|
height: calc(100% - 40px);
|
width: calc(100% - 40px);
|
padding: 10px;
|
background: #f4f8ff;
|
margin: 10px;
|
border-radius: 5px;
|
}
|
.menuBox {
|
width: calc(100% - 20px);
|
height: calc(95% - 20px);
|
margin: 10px;
|
|
display: flex;
|
position: relative;
|
flex-direction: column;
|
.menuTitle {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
}
|
.menuContent {
|
flex: 1;
|
}
|
.menupage {
|
margin-top: 10px;
|
}
|
}
|
</style>
|
