基于廊坊系统为基础,国防科技大学系统演示Demo
lixuliang
2024-04-30 7f0f5bc0be05b8a9206bcff083442379504db009
src/views/comm/commScheme/commScheme.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');
@@ -224,4 +401,25 @@
};
</script>
<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>