页面添加

surprise

2024-04-29 8a90585f32ff7f0ceb807581db2d7b59e9820874

 src/views/comm/commResource/commResource.vue

@@ -20,15 +20,117 @@
          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="类型"
                               :formatter="formatter">
              </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-select v-model="editFrom.types"
                     style="width:calc(100% - 100px)"
                     placeholder="">
            <el-option v-for="item in options"
                       :key="item.val"
                       :label="item.name"
                       :value="item.val">
            </el-option>
          </el-select>
        </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 { selectMenuRecursive,queryMenuTree,sign_insertOpLog } from '@/api/api.js'
import MyBread from "@/components/MyBread.vue";
import customElMenu from "@/components/customElMenu.vue";
@@ -59,6 +161,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 +196,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: 't1',
        coord: "",
        bak: ""
      },{
        name: 'XXX枢纽2',
        types: 't2',
        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');
@@ -130,7 +314,7 @@
            return value.type==1;
          });
          this.menuList=this.treeData(menuList);
          console.log(this.menuList)

          this.m1=this.menuList[0].cnName;
          this.setViewController(this.menuList[0]);
          this.nodeName=this.m1
@@ -171,7 +355,7 @@
    treeData (source) {
      let cloneData=JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      var that=this;
      // console.log(cloneData);

      if(cloneData.length!=0) {
        return cloneData.filter((father) => {
          // 循环所有项
@@ -223,5 +407,27 @@
  },
};
</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>