页面添加

surprise

2024-04-29 8a90585f32ff7f0ceb807581db2d7b59e9820874

 src/views/comm/planFormulation/planFormulation.vue

@@ -3,12 +3,105 @@
  <div class="dictionaryBox">
    <My-bread :list="[
        `通信方案筹划`,
        `方案拟制`,
        `通信方案拟制`,
      ]"></My-bread>
    <el-divider />
    <div class="mainBox">
    <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>

@@ -21,17 +114,96 @@
  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 () {

  },
  methods () {

    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>
@@ -45,4 +217,24 @@
  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>