From 8a90585f32ff7f0ceb807581db2d7b59e9820874 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 29 四月 2024 17:31:51 +0800
Subject: [PATCH] 页面添加
---
src/views/comm/commNetwork/commNetwork.vue | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 200 insertions(+), 2 deletions(-)
diff --git a/src/views/comm/commNetwork/commNetwork.vue b/src/views/comm/commNetwork/commNetwork.vue
index 27f85bc..9b8e83f 100644
--- a/src/views/comm/commNetwork/commNetwork.vue
+++ b/src/views/comm/commNetwork/commNetwork.vue
@@ -20,9 +20,104 @@
nodeName,
]"></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>
</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>
@@ -59,6 +154,33 @@
formLabelWidth: '70px',
pid: null,
nodeName: null,
+ listData: {
+ pageIndex: 1,
+ pageSize: 100,
+ count: 0,
+ },
+ tableData: [
+
+ ],
+ options: [
+ {
+ name: '鎸囨尌鎵�閫氫俊鏋㈢航',
+ val: "t1"
+ },{
+ name: '骞茬嚎閫氳鏋㈢航',
+ val: "t2"
+ },{
+ name: '杈呭姪閫氳鏋㈢航',
+ val: "t3"
+ }
+ ],
+ multipleSelection: [],
+
+ dialogVisible: false,
+ title: "",
+ editFrom: {
+ types: "",
+ }
};
},
created () { },
@@ -67,8 +189,63 @@
this.getTreeData();
//宸﹀彸鎷栧嫊
this.dragControllerDiv();
+ 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;
+ },
//宸﹀彸鎷栧嫊
dragControllerDiv: function() {
var resize=document.getElementsByClassName('resize');
@@ -226,4 +403,25 @@
};
</script>
-
\ No newline at end of file
+<style lang="less" scoped>
+.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>
\ No newline at end of file
--
Gitblit v1.9.3