cmc-web/webs/cmp-web/src/views/resource/switch/page/alias.vue

<template>
  <div>
    <el-card class="wrapper" v-if="!detailFlag">
      <table-search :configs="searchConfigs" :onSearch="handleSearch" ref="search">
        <template v-slot:operate>
          <el-button type="primary" @click="handleCreate()">新增</el-button>
        </template>
      </table-search>
      <cb-table :data="tableData" :params="params" :get-list="getList" :total="total">
        <el-table-column label="名称" show-overflow-tooltip prop="name"></el-table-column>
        <el-table-column label="所属交换机" show-overflow-tooltip prop="fabricName"></el-table-column>
        <el-table-column label="成员" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.members" :key="index">
              <span style="display: inline-block; width: 80px">类型：{{ item.type | switchType }}</span> 地址：{{ item.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </cb-table>
      <el-dialog title="新增" :visible.sync="addFlag" v-if="addFlag" width="60%">
        <el-row>
          <cb-form ref="addData" :model="addData" :cb-status-icon="true" label-width="110px">
            <el-col :span="24">
              <cb-form-item label="交换机：" prop="fabricId" :rules="[required]">
                <el-select clearable v-model="addData.fabricId" @change="changeFabric">
                  <el-option v-for="item in fabricData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </cb-form-item>
            </el-col>
            <el-col :span="24">
              <cb-form-item label="名称：" prop="name" :rules="[required]">
                <el-input v-model="addData.name"></el-input>
              </cb-form-item>
            </el-col>
            <el-col :span="24">
              <cb-form-item label="添加成员：">
                <el-card>
                  <cb-form ref="member" :model="member" :cb-status-icon="true" label-width="80px">
                    <el-col :span="10">
                      <cb-form-item label="类型：" prop="type">
                        <el-select v-model="member.type" @change="changeType">
                          <el-option label="wwn" value="wwn"></el-option>
                          <el-option label="端口号" value="switch_port"></el-option>
                        </el-select>
                      </cb-form-item>
                    </el-col>
                    <el-col :span="10">
                      <cb-form-item v-if="member.type == 'wwn'" :key="1" label="地址：" prop="name" :rules="[wwpn]">
                        <el-input v-model="member.name"></el-input>
                      </cb-form-item>
                      <cb-form-item v-else :key="2" label="地址：" prop="name">
                        <el-tooltip class="item" effect="dark" content="格式为domain id, port id" placement="top-start">
                          <el-input v-model="member.name" label="格式为domain id, port id"></el-input>
                        </el-tooltip>
                      </cb-form-item>
                    </el-col>
                    <el-col :span="3">
                      <el-button class="m-l" type="ghost" @click="addPort">添加</el-button>
                    </el-col>
                  </cb-form>
                </el-card>
              </cb-form-item>
            </el-col>
            <el-col :span="24">
              <cb-form-item>
                <cb-table :data="membersData">
                  <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                      {{ scope.row.type }}
                    </template>
                  </el-table-column>
                  <el-table-column label="地址" prop="name">
                    <template slot-scope="scope">
                      {{ scope.row.name }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="160px">
                    <template slot-scope="scope">
                      <el-button type="text" @click="deletePort(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                  <div slot="pagination"></div>
                </cb-table>
              </cb-form-item>
            </el-col>
          </cb-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="ghost" @click.native="addFlag = false">取 消</el-button>
          <el-button type="primary" @click.native="addSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import validate from '@/validate'
import { getZone, createZone, removeZone, getSwitches } from '../services/switch'
export default {
  props: {
    platformObject: {
      type: Object,
      default: function () {
        return {
          vendorId: -1,
          operate: -1
        }
      }
    }
  },
  data() {
    return {
      required: validate.required,
      wwpn: validate.wwpn,
      searchConfigs: [
        { type: 'Input', label: '名称', value: 'name' },
        { type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
        { type: 'Const', value: 'type', initValue: 'alias' }
      ],
      params: {
        page: 1,
        rows: 10
      },
      listQuery: {
        name: ''
      },
      tableData: [],
      total: 0,
      detailFlag: false,
      addFlag: false,
      addData: {},
      fabricData: [],
      portNum: 0,
      member: {},
      membersData: []
    }
  },
  methods: {
    changeFabric(value) {
      this.fabricData.forEach(item => {
        if (item.id == value) {
          this.portNum = item.portNum - 1
        }
      })
    },
    changeType(value) {
      if (!this.addData.fabricId) {
        this.member.type = ''
        return this.$message.error('请先选择交换机！')
      }
      this.member.name = ''
    },
    getList() {
      getZone(this.params).then(data => {
        if (data.success) {
          this.tableData = data.data.rows
          this.total = data.data.total
        }
      })
    },
    handleSearch(params) {
      this.params.page = 1
      this.params.params = params || this.params.params
      if (this.platformObject.vendorId > -1) {
        this.getList()
      }
    },
    handleCreate() {
      this.member = {
        type: '',
        name: ''
      }
      this.portNum = 0
      this.addData = {
        vendorId: this.platformObject.vendorId,
        fabricId: ''
      }
      this.membersData = []
      this.getFabricData()
      this.addFlag = true
    },
    addPort() {
      this.$refs.member.validate(valid => {
        if (valid) {
          if (this.member.type == '' || this.member.name == '') {
            return this.$message.error('成员信息输入不完整！')
          }
          const membersData = []
          for (let i = 0; i < this.membersData.length; i++) {
            const obj = this.membersData[i]
            membersData.push({
              type: obj.type,
              name: obj.name.toString().toLowerCase()
            })
          }
          const member = JSON.stringify({
            type: this.member.type,
            name: this.member.name.toString().toLowerCase()
          })
          if (JSON.stringify(membersData).indexOf(member) == -1) {
            this.membersData.push(this.member)
            this.member = {
              type: '',
              name: ''
            }
          } else {
            return this.$message.info('同一个成员不能添加多次，wwn不区分大小写')
          }
        }
      })
    },
    deletePort(index) {
      this.membersData.splice(index, 1)
    },
    addSubmit() {
      this.$refs.addData.validate(valid => {
        if (valid) {
          if (!this.membersData.length) {
            return this.$message.error('新增别名，至少需要一个成员')
          }
          const addData = [
            {
              vendorId: this.addData.vendorId,
              fabricId: this.addData.fabricId,
              type: 'alias',
              name: this.addData.name,
              members: this.membersData
            }
          ]
          createZone(addData).then(data => {
            if (data.success) {
              this.$notify({
                message: data.message,
                type: 'success'
              })
              this.addFlag = false
              this.getList()
            }
          })
        }
      })
    },
    getFabricData() {
      getSwitches({
        simple: true,
        params: JSON.stringify([{ param: { vendorId: this.platformObject.vendorId }, sign: 'EQ' }])
      }).then(data => {
        if (data.success) {
          this.fabricData = data.data.rows
        }
      })
    },
    handleDelete(id) {
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonClass: 'el-button--danger',
        type: 'warning'
      })
        .then(() => {
          removeZone(id).then(data => {
            if (data.success) {
              this.$message.success({
                message: data.message,
                type: 'success'
              })
              this.getList()
            }
          })
        })
        .catch(() => {})
    }
  },
  created() {},
  mounted() {},
  watch: {
    platformObject: {
      handler(newVal, oldVal) {
        this.searchConfigs = [
          { type: 'Input', label: '名称', value: 'name' },
          { type: 'Const', value: 'vendorId', initValue: newVal.vendorId },
          { type: 'Const', value: 'type', initValue: 'alias' }
        ]
      },
      deep: true
    }
  }
}
</script>