vue2中新增与修改在一个页面上操作

vue2中新增与修改在一个页面上操作

<template>
<el-dialog title="网桥分配管理"   :visible.sync="dialogVisible" @close="closeDilog('form')">
<template>
<el-button type="primary" @click="addOrEdit()">新 增</el-button>
<template>
<!-- <el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
style="width: 100%">
<!-- <el-table-column
:show-overflow-tooltip="true"
align="center"
label="ID"
width="80"
prop="id">
</el-table-column> -->
<!-- <el-table-column
:show-overflow-tooltip="true"
align="center"
label="名称"
width="120"
prop="name">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
label="工作模式"
width="80"
prop="mode">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
label="信道"
width="80"
prop="channel">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
label="杆名称"
width="80"
prop="main_name">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
align="center"
label="网桥种类名称"
width="100"
prop="dev_name">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
 v-model="search"
 size="medium"
 placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope"> -->
<!-- <el-button
 size="mini"
 @click="addOrEdit(scope.$index, scope.row)">编 辑</el-button> -->
<!-- <el-button
 size="mini"
 type="danger"
 @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
</template>
</el-table-column>
</el-table> -->
<!-- 两级展示效果start -->
<el-table
:data="tableDataa.filter(data => !search || data.main_name.toLowerCase().includes(search.toLowerCase()) )"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
style="width: 100%"
row-key="id"
lazy
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="main_name"
label="杆设备名称"
width="110">
</el-table-column>
<el-table-column
prop="dev_name"
label="网桥种类名称"
width="110">
</el-table-column>
<el-table-column
prop="name"
label="设备名称"
width="110">
</el-table-column>
<el-table-column
prop="mode"
label="工作模式"
width="80">
</el-table-column>
<el-table-column
prop="channel"
label="信道"
width="80">
</el-table-column>
<el-table-column align="center" label="操作">
<template slot="header" slot-scope="scope">
<el-input
 v-model="search"
 size="medium"
 placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
 size="mini"
 @click="addOrEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
 size="mini"
 type="danger"
 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 两级展示效果end -->
</template>
</template>

<el-dialog
width="30%"
title="新增"
:visible.sync="innerVisible"
:modal-append-to-body="false" :append-to-body="true"   @close ="hanndleCancdel('form')">

</el-form>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="杆名称 ：" prop="mainName" label-width="110px">
   <el-select v-model="form.mainName" @change="getMain" clearable placeholder="请选择" size="medium" >
       <el-option
       v-for="item in form.mainOption"
       :key="item.id"
       :label="item.name"
       :value="item.id">
       </el-option>
   </el-select>
</el-form-item>
<el-form-item label="网桥种类 ：" prop="sub" label-width="110px">
 <el-select v-model="form.sub" @change="getSub" clearable placeholder="请选择" size="medium" >
       <el-option
       v-for="item in this.form.suboptions"
       :key="item.dev_id"
       :label="item.name"
       :value="item.dev_id">
       </el-option>
   </el-select>
</el-form-item>
<el-form-item label="设备名称 ：" prop="subName" label-width="110px">
 <el-input v-model="form.subName"   placeholder="请输入设备名称" ></el-input>
</el-form-item>
<el-form-item label="工作模式 ：" prop="mode" label-width="110px">
   <el-select v-model="form.mode" @change="getRate" clearable placeholder="请选择" size="medium" >
       <el-option
       v-for="item in modeoptions"
       :key="item.value"
       :label="item.label"
       :value="item.value">
       </el-option>
   </el-select>
</el-form-item>
<el-form-item label="信道 ：" prop="channel" label-width="110px">
   <el-select v-model="form.channel" @change="getRate" clearable placeholder="请选择" size="medium" >
       <el-option
       v-for="item in this.form.channelOptions"
       :key="item.value"
       :label="item.label"
       :value="item.value">
       </el-option>
   </el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="hanndleCancdel('form')">取 消</el-button>
<el-button type="primary" @click="submitReport()">提 交</el-button>
</div>
</el-dialog>

</el-dialog>

</template>

<script>
import axios from 'axios'
export default {
data () {
   var validateName = (rules, value, callback) => {
       if (value === '') {
           callback(new Error('请输入设备名称'))
       }
   }
   var validateRate = (rules, value, callback) => {
       if (value === '') {
           callback(new Error('请选择设备频率'))
       }
   }

   return {
       dialogVisible: false,
       outerVisible: false,
       innerVisible: false,
       modeoptions: [{
           value: 'C',
           label: 'C'
       }, {
           value: 'B',
           label: 'B'
       }, {
           value: 'AP',
           label: 'AP'
       }],
       channellFirst: [ // 2.4GHz
           {value: '1', label: '1'},
           {value: '2', label: '2'},
           {value: '3', label: '3'},
           {value: '4', label: '4'},
           {value: '5', label: '5'},
           {value: '6', label: '6'},
           {value: '7', label: '7'},
           {value: '8', label: '8'},
           {value: '9', label: '9'},
           {value: '10', label: '10'},
           {value: '11', label: '11'},
           {value: '12', label: '12'},
           {value: '13', label: '13'}
       ],
       channelSecond: [ // 5.8GHZ
           {value: '36', label: '36'},
           {value: '40', label: '40'},
           {value: '44', label: '44'},
           {value: '48', label: '48'},
           {value: '52', label: '52'},
           {value: '56', label: '56'},
           {value: '60', label: '60'},
           {value: '64', label: '64'},
           {value: '149', label: '149'},
           {value: '153', label: '153'},
           {value: '157', label: '157'},
           {value: '161', label: '161'},
           {value: '165', label: '165'}
       ],
       value: '',
       tableData: [],
       tableDataa: [{
           id: 1,
           date: '竖杆1-1-1',
           // name: '竖杆1-1-1',
           address: '上海市普陀区金沙江路 1518 弄'
       }, {
           id: 2,
           date: '竖杆1-2-1',
           // name: '竖杆1-2-1',
           address: '上海市普陀区金沙江路 1517 弄'
       }, {
           id: 3,
           date: '竖杆2-1-1',
           children: [{
               id: 31,
               name: '300M室外无线CPE',
               address: '300M室外无线CPE'
           }, {
               id: 32,
               name: '监控专用无线网桥(15公里)',
               address: '监控专用无线网桥(15公里)'
           }]
       }, {
           id: 4,
           date: '竖杆3-1-1',
           children: [{
               id: 34,
               name: '300M室外无线CPE_V2',
               address: '300M室外无线CPE_V2'
           }, {
               id: 35,
               name: '监控专用无线网桥(15公里)',
               address: '监控专用无线网桥(15公里)'
           }]
       }],
       search: '',
       options: [{
           value: '2.4GHz',
           label: '2.4GHZ'
       }, {
           value: '5.8GHZ',
           label: '5.8GHZ'
       }],
       form: {
           mainName: '',
           sub: '',
           subName: '',
           mode: '',
           channel: '',
           mainOption: [{
               // value: '1',
               // label: '主设备AA'
           }],
           suboptions: [{
               value: '1',
               label: '子设备1'
           }],
           channelOptions: []
       },
       rules: {
           name: [{validator: validateName, trigger: 'blur'}],
           rate: [{validator: validateRate, trigger: 'blur'}]
       }
   }
},
components: {},
mounted () {
   let that = this
   // that.getMainList()
   that.getSubList()
   that.getSubAllocationList()
   this.getMainList()
},
methods: {
   init () {
       this.dialogVisible = true
   },
   // load (tree, treeNode, resolve) {
   //     setTimeout(() => {
   //         resolve([
   //             {
   //                 id: 31,
   //                 date: '2016-05-01',
   //                 name: '王小虎',
   //                 address: '上海市普陀区金沙江路 1519 弄'
   //             }, {
   //                 id: 32,
   //                 date: '2016-05-01',
   //                 name: '王小虎',
   //                 address: '上海市普陀区金沙江路 1519 弄'
   //             }
   //         ])
   //     }, 1000)
   // },
   handleDelete (index, row) {
       console.log(index, row.id)
       const baseUrl = this.GLOBAL.BASE_URL
       axios.post(baseUrl + 'deleteSubDeviceAllocation.php/', {// 与后端api一致
           id: JSON.stringify(row.id)
       })
           .then((successResponse) => {
               this.responseResult = JSON.stringify(successResponse.data)

               if (successResponse.data.resultCode === 200) { // 后端返回状态码
                   this.$message.success(successResponse.data.message)
                   this.innerVisible = false
               } else if (successResponse.data.resultCode === 204) {
                   this.$message.error(successResponse.data.message)
               } else {
                   this.$message.error('设备删除失败')
               }
           })
           .catch((failResponse) => {
               this.$message.error('设备删除异常')
           })
   },
   // 获取子设备分配列表
   getSubAllocationList () {
       const baseUrl = this.GLOBAL.BASE_URL
       axios.post(baseUrl + 'showSubDeviceAllocation.php/', {// 与后端api一致
       })
           .then((successResponse) => {
               // console.log('打印出数据展示的效果', successResponse.data)
               const children = []
               for (var i = 0; i < successResponse.data.length; i++) {
                   // 将两个数据放入到数组中
                   children.push({
                       id: successResponse.data[i]['id'],
                       name: successResponse.data[i]['name'],
                       dev_name: successResponse.data[i]['dev_name'],
                       mode: successResponse.data[i]['mode'],
                       channel: successResponse.data[i]['channel']
                       
                   })
                   // dataList[0]['children'] = children[i]
                   // dataList[i]['children'] = children // 将孩子数组存入列表中
               }

               // var arrayA = [
               //     {
               //         id: 1001,
               //         age: '20'
               //     },
               //     {
               //         id: 1002,
               //         age: '21'
               //     },
               //     {
               //         id: 1003,
               //         age: '22'
               //     }
               // ]

               // var arrayB = [
               //     {
               //         id: 1001,
               //         name: {
               //             id: 34,
               //             name: '300M室外无线CPE_V2',
               //             address: '300M室外无线CPE_V2'
               //         }
               //     },
               //     {
               //         id: 1002,
               //         name: '李四'
               //     },
               //     {
               //         id: 1003,
               //         name: '王五'
               //     }
               // ]

               var arrayA = successResponse.data
               var arrayB = children
               // 临时数组对象C
               var arrayC = {}
               // 遍历数组B，以id的值作为数组的key，name的值作为数组的value,存放到临时数组arrayC
               for (let i = 0; i < arrayB.length; i++) {
                   // 为arrayC添加名称为arrayB[i].id的属性字段，值等于arrayB[i].name
                   arrayC[arrayB[i].id] = arrayB[i]
                   // arrayC[arrayB[i].id] = arrayB[i].dev_name
               }
               // 遍历数组A，以name作为key，arrayC中对应当前id的key的值作为value
               for (let i = 0; i < arrayA.length; i++) {
                   // 为arrayA[i]添加名称为name的属性字段，值等于arrayC[arrayA[i].id]
                   arrayA[i]['children'] = arrayC[arrayA[i].id]
               }

               console.log('arraycarrayc', arrayA)

               console.log('全部的值', successResponse.data)
               console.log('孩子的值', children)
               // console.log('打印出合成的值', dataList)

               // var daTm1 = [{
               //                 'main_name': '海康产品',
               //                 'id': '4f5dfe941a2be67bce8bc9b75acf4c29',
               //                 'children': {
               //                     id: '4f5dfe941a2be67bce8bc9b75acf4c29',
               //                     name: '海康显示器'
               //                 }
               //             },
               //             {
               //                 'main_name': '海康产品',
               //                 'id': '4f5dfe941a2be67bce8bc9b75acf4c29',
               //                 'children': {
               //                     id: '4f5dfe941a2be67bce8bc9b75acf4c29',
               //                     name: '海康显示器01'
               //                 }
               //             },
               //             {
               //                 'main_name': '杆1-1-1',
               //                 'id': '240',
               //                 'children': {
               //                     id: '4f5dfe941a2be67bce8bc9b75acf4c29',
               //                     name: '网桥1'
               //                 }
               //             }
               // ]
               var daTm = arrayA
               var echararr = []
               for (var k = 0; k < daTm.length; k++) {
                   var arrindex = echararr.findIndex((item, index, arr) => { return item.main_name === daTm[k].main_name })// 获取下标
                   if (arrindex === -1) { // 不存在盘符数据的添加盘符数据
                       echararr.push({
                           'main_name': daTm[k].main_name,
                           'id': daTm[k].id,
                           'children': [daTm[k].children]
                       })
                   } else { // 有盘符则往盘符数据中添加
                       echararr[arrindex].children.push(daTm[k].children)
                   }
                   console.log(arrindex)
               }
               console.log('echararrechararr', echararr)
               this.tableDataa = echararr

               // 赋值测试
               // var arrayC = [{
               //     id: '1111',
               //     channel: '1',
               //     mode: 'AP',
               //     main_name: '海康产品'

               // }, {
               //     id: '1111',
               //     channel: '1',
               //     mode: 'AP',
               //     main_name: '海尔产品'

               // }, {
               //     id: '1111',
               //     channel: '1',
               //     mode: 'AP',
               //     main_name: '格力产品'

               // }]

               // var arrayD = []

               this.tableData = successResponse.data.data
           })
           .catch((failResponse) => {
               this.$message.error('节点新增异常')
           })
   },
   // 判断打开的是新增还是修改
   addOrEdit (index, row) {
       console.log(row)
       if (index === undefined) {
           this.innerVisible = true // 新增
           console.log('新增')
       }
       // else {
       //     this.innerVisible = true // 新增
       //     // this.form = {}
       //     // this.form.mainOption = [{value:'1',label:'11111'}]
       //     // this.getMainSubData(row)
       //     row['subName'] = row['name']
       //     row['mainName'] = '111'
       //     row['sub'] = '222'
       //     console.log('修改', JSON.parse(JSON.stringify(row)))
       //     this.form = JSON.parse(JSON.stringify(row))
       // }
   },
   // 子设备种类提交
   submitReport () {
       const baseUrl = this.GLOBAL.BASE_URL
       if (this.form.mainName === '') {
           this.$message.error('主设备名称未选择')
       } else if (this.form.sub === '') {
           this.$message.error('子设备未选择')
       } else if (this.form.subName === '') {
           this.$message.error('子设备名称不能为空')
       } else if (this.form.mode === '') {
           this.$message.error('工作模式未选择')
       } else if (this.form.channel === '') {
           this.$message.error('信道未选择')
       } else {
           // console.log('ccccc', this.form)
           axios.post(baseUrl + 'createSubEquipmentModule.php/', {// 与后端api一致
               name: this.form.subName,
               mode: this.form.mode,
               m_id: this.form.mainName,
               channel: this.form.channel,
               device_id: this.form.sub
           })
               .then((successResponse) => {
                   this.responseResult = JSON.stringify(successResponse.data)

                   // console.log('打印的数据展示', this.responseResult)
                   if (successResponse.data.resultCode === 200) { // 后端返回状态码
                       this.$message.success(successResponse.data.message)
                       this.dialogVisible = false
                   } else if (successResponse.data.resultCode === 205) {
                       this.$message.error(successResponse.data.message)
                   } else {
                       this.$message.error(successResponse.data.message)
                   }
               })
               .catch((failResponse) => {
                   this.$message.error('设备新增异常')
               })
       }
   },
   // 取消操作
   hanndleCancdel (form) {
       this.innerVisible = false
       this.$refs[form].resetFields()
   },
   closeDilog: function (form) {
       this.dialogVisible = false
       this.$refs[form].resetFields()// 将form表单重置
   },
   // 获取选中的频率的值
   getRate (value) {
       this.form.rate = value
   },
   getMain (value) {
       console.log(this.form.mainName)
       this.form.mainName = value
   },
   getSub (value) {
       const baseUrl = this.GLOBAL.BASE_URL
       console.log('子设备：', this.form.sub)
       // 信道的种类传递
       axios.post(baseUrl + 'seekRateEquipment.php/', {// 与后端api一致
           id: this.form.sub // 需要传给后端的参数
       })
           .then((successResponse) => {
               // console.log('数据加载====', successResponse.data['rate'].toString())
               this.responseResult = JSON.stringify(successResponse.data['rate'])
               var channelNumber = '2.4GHz'
               this.responseChannelNumner = JSON.stringify(channelNumber)
               // console.log('获取数据111', this.responseResult)
               if (this.responseResult === this.responseChannelNumner) {
                   this.form.channelOptions = []
                   this.form.channelOptions = this.channellFirst
               } else {
                   this.form.channelOptions = []
                   this.form.channelOptions = this.channelSecond
               }
           })
           .catch((failResponse) => {
               this.$message.error('设备获取异常,请刷新后重试！')
           })
   },
   // 获取主设备名称
   getMainList () {
       // 获取接口数据
       const baseUrl = this.GLOBAL.BASE_URL
       axios.get(baseUrl + 'seekMainEquipment.php/')
           .then(response => {
               console.log('获取到主设备的数据', response)
               this.form.mainOption = response.data
           })
           // 获取失败
           .catch(error => {
               console.log(error)
               alert('网络错误，不能访问')
           })
   },
   // 获取子设备名称
   getSubList: function () {
       // 获取接口数据
       const baseUrl = this.GLOBAL.BASE_URL
       axios.get(baseUrl + 'seekSubEquipment.php/')
           .then(response => {
               console.log('获取到主设备的数据', response)
               this.form.suboptions = response.data
           })
           // 获取失败
           .catch(error => {
               console.log(error)
               alert('网络错误，不能访问')
           })
   },
   // 获取主设备查询的条件，子设备查询条件，将数据打包传给后台
   // 获取主设备查询的条件，子设备查询条件，将数据打包传给后台
   getMainSubData (row) {
       console.log('打印输出的值', row)
   }
}
}
</script>

<style>
/* .mianEquipment {
height: 24%;
width: 30% !important;
} */
.dialog-footer {
margin-right: 24px;
}
.el-input {
width: 280px;
}
</style>