This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
nezha-nezha-fronted/nezha-fronted/src/components/page/asset/assetAddUnit.vue

1692 lines
80 KiB
Vue
Raw Normal View History

<template>
<transition name="right-box">
<div class="right-menu" v-if="addUnitShow" @click="editQuit">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click.stop="sendStateData('close')">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click.stop="addNewData('asset')">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span>{{$t('overall.save')}}</span>
</div>
</div>
<div class="right-box-title">{{$t('asset.createAssetTab.title')}}</div>
<el-form :model="assetData" label-width="120px">
<div class="el-form-style">
<el-form-item :label="this.$t('asset.createAssetTab.title')" >
<el-input v-model="assetData.sn"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.host')" >
<el-input v-model="assetData.host"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.state')" >
<div class="select-style">
<el-select v-model="assetData.state" :placeholder="this.$t('asset.createAssetTab.selectTip')">
<el-option
v-for="item in assetStateOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<div style="font-size: 10px">{{$t('asset.createAssetTab.assetInfo')}}</div>
<el-divider></el-divider>
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.assetType')" prop="assetType">
<div class="select-style">
<el-select v-model="assetType" clearable @change="getAllModelOptionData" @visible-change="cancelEdit">
<el-option
v-for="(item) in assetTypeOptionData"
:key="item.id"
:value="item.code"
:label="item.value"
>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn">
<el-popover
placement="left"
v-model="popTypeVisible"
>
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="popoverClose('type')">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.assetType')}}</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</span>
<input v-model="assetTypeData.value"/>
<input type="button" value="+Add" @click="addNewData('assetType')"></input>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.assetTypeTab.existAssetType')}}</span>
<div class="li-list">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in assetTypeOptionData"
@click="clickState(index,item,'type')"
:class="{activeColor:modelCount === index}"
:key="index">
<div>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)">
<i class="el-icon-delete"></i>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel" @click="popoverClose('type')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50" @click="transferData('type')">
{{$t('overall.save')}}
</div>
</div>
<div slot="reference" style="font-size: 18px">+</div>
</el-popover>
</div>
</div>
</el-form-item>
<!------------------------------------------厂商/型号---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.vendor')">
<div class="select-style">
<el-cascader
:options="vendorTypeOptionData"
:key="isResourceShow"
v-model="assetData.modelId"
:disabled="this.assetType!=''?false:true"
clearable
>
</el-cascader>
<div class="el-select-add-btn">
<el-popover
placement="left"
trigger="click"
v-model="popCompVisible"
:disabled=popState
v-clickoutside="clickOutSide"
>
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="popoverClose('vendor')">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window-assetType">
<span style="display: block;padding-bottom: 15px">{{$t('asset.createAssetTab.vendorTab.vendor')}}</span>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</span>
<input v-model="addVendorData.value"/>
<input type="button" value="+Add"
@click="addNewData('vendor')"></input>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</span>
<div class="li-list-part">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in vendorUlData"
@click="getLidata(index,item)"
:class="{activeColor:vendorCount === index}"
:key="index">
<div>
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn" @click.stop="editVendorOptionData(item,'vendor',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i></span>
</div>
</li>
</ul>
</div>
<span style="display: block;padding-bottom: 15px">{{$t('asset.createAssetTab.vendorTab.modelName')}}</span>
<input v-model="addNewModelData.name"/>
<input type="button" value="+Add"
@click="addNewData('model')"></input>
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.vendorTab.existModel')}}</span>
<div class="li-list-part">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in modelUlData"
@click="clickState(index,item,'model') "
:class="{activeColor:modelCount === index}"
:key="index">
<span v-if="!item.isEdit">{{ item.name }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<input type="text" v-model="item.name" size="mini"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'model',index)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('model',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('model',item.id)"><i
class="el-icon-delete"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click="popoverClose('vendor')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="transferData('model')">
{{$t('overall.save')}}
</div>
</div>
<div slot="reference" style="font-size: 18px">+</div>
</el-popover>
</div>
</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.purchaseDate')" prop="purchaseDate">
<div class="select-style">
<el-date-picker
v-model="assetData.purchaseDate"
value-format="yyyy-MM-dd"
type="date"
:placeholder="this.$t('asset.createAssetTab.dataSelectTip')">
</el-date-picker>
</div>
</el-form-item>
<div style="font-size: 10px">{{$t('asset.createAssetTab.dc')}}</div>
<el-divider></el-divider>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.dcName')">
<div class="select-style">
<el-select v-model="assetData.idcId" clearable @change="getSingleIDCData">
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<el-popover
placement="left"
v-model="item[item.name]"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">{{vm.$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="vm.$t('asset.createAssetTab.dcName')">
<el-input v-model="popIdcData.name"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.location')">
<el-input v-model="popIdcData.location"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.principal')">
<el-select v-model="popIdcData.principal" clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.tel')">
<el-input v-model="popIdcData.tel"/>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item)">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn">
<el-popover
placement="left"
trigger="click"
v-model="popIDCVisible"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="popoverClose('idc')">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddIdcTab.title')}}</span>
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.dcName')">
<el-input v-model="addIdcData.name"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.location')">
<el-input v-model="addIdcData.location"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.principal')">
<el-select v-model="addIdcData.principal" clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddIdcTab.tel')">
<el-input v-model="addIdcData.tel"/>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click="popoverClose('idc')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('IDC')">
{{$t('overall.save')}}
</div>
</div>
<div slot="reference" style="font-size: 18px">+</div>
</el-popover>
</div>
</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.location')">
<span>{{idcSelectedData.location}}</span>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.principal')">
<span>{{this.getPrincipalName(idcSelectedData.principal)}}</span>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.tel')">
<span>{{idcSelectedData.tel}}</span>
</el-form-item>
<el-divider></el-divider>
<!------------------------------------------cabinet---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.cabinet')">
<div class="select-style">
<el-select v-model="assetData.cabinetId" clearable
:disabled="assetData.idcId==''?true:false"
@change="getSingleCabinetData">
<el-option
v-for="item in cabinetOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<el-popover
placement="left"
trigger="manual"
v-model="item[item.name]"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">{{vm.$t('asset.createAssetTab.editCabinetTab.title')}}</span>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.name')">
<el-input v-model="popCabinetData.name"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.uSize')">
<div>{{popCabinetData.uSize}}</div>
<el-slider v-model="popCabinetData.uSize"
:max="47"></el-slider>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.remark')">
<el-input v-model="popCabinetData.remark"
type="textarea"
:rows="2"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editCabinetTab.DC')">
<el-select v-model="popCabinetData.idcId" clearable>
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<!-- <el-popover-->
<!-- placement="top"-->
<!-- v-model="item[item.name+item.id]"-->
<!-- >-->
<!-- <div class="pop-window-assetType-content">-->
<!-- <div class="right-box-top-btns">-->
<!-- <div class="right-box-top-btn right-box-top-btn-full"-->
<!-- @click="item[item.name+item.id] = false">-->
<!-- <div class="right-box-btn-icon">-->
<!-- <i class="el-icon-close"></i>-->
<!-- </div>-->
<!-- <span>{{$t('overall.esc')}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="pop-window">-->
<!-- <span style="display: block;padding-bottom: 20px">标题</span>-->
<!-- <el-form-item label="DC Name">-->
<!-- <el-input v-model="addCabIDCData.name"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="Location">-->
<!-- <el-input v-model="addCabIDCData.location"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="负责人">-->
<!-- <el-select v-model="addCabIDCData.principal"-->
<!-- clearable>-->
<!-- <el-option-->
<!-- v-for="item in idcUserData"-->
<!-- :key="item.key"-->
<!-- :label="item.username"-->
<!-- :value="item.userId"-->
<!-- >-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="Tel">-->
<!-- <el-input v-model="addCabIDCData.tel"/>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right-box-bottom-btns">-->
<!-- <div class="right-box-bottom-btn right-box-bottom-btn-cancel"-->
<!-- @click.stop="item[item.name+item.id]= false">-->
<!-- {{$t('overall.cancel')}}-->
<!-- </div>-->
<!-- <div class="right-box-bottom-btn right-box-bottom-btn-50"-->
<!-- @click="editData('idc',item,'CabIDC')">-->
<!-- {{$t('overall.save')}}-->
<!-- </div>-->
<!-- </div>-->
<!-- <span class="config-dropdown-btn" slot="reference"-->
<!-- @click="getSingleIDCData(item.id,'edit')"><i-->
<!-- class="el-icon-edit-outline"></i></span>-->
<!-- </el-popover>-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('idc',item.id)"><i-->
<!-- class="el-icon-delete"></i></span>-->
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('cabinet',item)">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleCabinetData(item.id,'edit',item)">
<i class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('cabinet',item.id)"><i
class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn">
<el-popover
placement="left"
trigger="click"
v-model="popCabinetVisible"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="popoverClose('cabinet')">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</span>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')">
<el-input v-model="addCabinetData.name"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')">
<div>{{addCabinetData.uSize}}</div>
<el-slider v-model="addCabinetData.uSize" :max="47"></el-slider>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
<el-input v-model="addCabinetData.remark" type="textarea" :rows="2"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')">
<el-select v-model="addCabinetData.idcId" clearable>
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<el-popover
placement="left"
v-model="item[item.id+item.name]"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.id+item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.dcName')">
<el-input v-model="addCabIDCData.name"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.location')">
<el-input v-model="addCabIDCData.location"/>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.principal')">
<el-select v-model="addCabIDCData.principal"
clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="vm.$t('asset.createAssetTab.editIdcTab.tel')">
<el-input v-model="addCabIDCData.tel"/>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.id+item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc',item,'CabIDC')">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)"><i
class="el-icon-delete"></i></span>
</el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click="popoverClose('cabinet')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('cabinet')">
{{$t('overall.save')}}
</div>
</div>
<div slot="reference" style="font-size: 18px">+</div>
</el-popover>
</div>
</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.uSize')">
<span>{{cabinetSelectedData.uSize}}</span>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.remark')">
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>
<div style="font-size: 10px">{{$t('asset.createAssetTab.cli')}}</div>
<el-divider></el-divider>
<el-form-item :label="this.$t('asset.createAssetTab.loginType')">
<el-radio-group size="mini" v-model="assetData.accounts[0].authType">
<el-radio-button label='1'>{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label='2'>{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item >
<el-form-item :label="this.$t('asset.createAssetTab.account')" label-position="top">
<el-input v-model="assetData.accounts[0].user"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.password')" v-if="assetData.accounts[0].authType==1">
<el-input type="password" v-model="assetData.accounts[0].pwd"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.port')">
<el-input v-model="assetData.accounts[0].port"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-if="assetData.accounts[0].authType==2">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handleChange"
:auto-upload="false"
>
<el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<div class="">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="sendStateData('close')">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('asset')">
{{$t('overall.save')}}
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "assetAddUnit",
props: {
addUnitShow: Boolean
},
data() {
const vm = window.vm;
return {
vm:vm,
assetData: {
id: '',
sn: '',
host: '',
state: '',
purchaseDate: '',
idcId: '',
cabinetId: '',
modelId: '',
accounts: [{
authType: 1,
user: '',
pwd: '',
cert: '',
port: '',
}]
},
assetStateOption: [
{
value: 1,
label: '在库'
}, {
value: 2,
label: '出库'
}],
cabinetModelData: '',
assetTypeOptionData: [],
vendorTypeData: '',
vendorTypeOptionData: [],
vendorUlData: '',
modelUlData: '',
vendorCode: '',
IDCData: '',
IDCOptionData: [],
cabinetData: '',
cabinetOptionData: [],
input: '',
assetType: '',
assetTypeData: {
type: 'assetType',
value: '',
},
addVendorData: {
type: 'vendor',
value: '',
},
addNewModelData: {
name: '',
vendorCode: '',
typeCode: ''
},
accountType: '',
idcSelectedData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
addIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
popIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
idcUserData: '',
cabinetSelectedData: {
name: '',
uSize: 0,
remark: '',
idcId: '',
},
addCabinetData: {
name: '',
uSize: 0,
remark: '',
idcId: '',
},
popCabinetData: {
name: '',
uSize: 0,
remark: '',
idcId: '',
},
addCabIDCData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
editCabIDCData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
popTypeVisible: false,
popCompVisible: false,
popIDCVisible: false,
popCabinetVisible: false,
editPopTypeVisible: false,
editPopVendorVisible: false,
editPopIDCVisible: false,
editPopCabinetVisible: false,
vendorCount: '',
modelCount: '',
allModelUlData: '',
addForm: {
sn: '',
host: '',
state: '',
},
tempData: '',
isResourceShow: 0,
modelClickData: '',
popState: true,
}
},
computed: {
getData() {
return this.$store.state.assetData
}
},
watch: {
allModelUlData(newVal) {
if (newVal) {
this.getConnectData()
}
},
assetType(newVal) {
if (newVal == '') {
this.popState = true
} else {
this.popState = false
}
},
},
methods: {
cancelEdit(data){
if(data===false){
this.getAssetTypeOptionData()
}
},
clickOutSide(data) {
if (data) {
this.editQuit()
this.modelCount = ''
this.assetTypeData.value = ''
this.addVendorData.value = ''
this.addNewModelData.value = ''
this.vendorCount = ''
this.modelCount = ''
}
},
editQuit() {
for (let i of this.assetTypeOptionData) {
if (i.isEdit === true) {
i.isEdit = false
this.getAssetTypeOptionData()
}
}
for (let i of this.vendorUlData) {
if (i.isEdit === true) {
i.isEdit = false
this.getVendorOptionData()
}
}
for (let i of this.modelUlData) {
if (i.isEdit === true) {
i.isEdit = false
this.getModelOptionData(this.assetType, this.vendorCode)
}
}
},
getIDCOptionData() {
this.$get('idc').then(response => {
if (response.code === 200) {
this.IDCOptionData = response.data.list;
this.markOptionData(this.IDCOptionData)
this.$store.state.assetData.idcData = this.IDCOptionData
}
})
},
getUserData() {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.idcUserData = response.data.list
}
})
},
getCabinetOptionData(data) {
this.$get('cabinet?idcId=' + data).then(response => {
if (response.code === 200) {
this.cabinetOptionData = response.data.list;
this.markOptionData(this.cabinetOptionData)
}
})
},
getAssetTypeOptionData() {
this.$get('sys/dict/all?type=assetType').then(response => {
if (response.code === 200) {
this.assetTypeOptionData = response.data
this.markOptionData(this.assetTypeOptionData)
}
})
},
getVendorOptionData() {
this.$get('sys/dict/all?type=vendor').then(response => {
if (response.code === 200) {
this.vendorUlData = response.data
this.markOptionData(this.vendorUlData)
}
})
},
getModelOptionData(assetType, vendorCode) {
this.$get('model?typeCode=' + assetType + '&vendorCode=' + vendorCode).then(response => {
if (response.code === 200) {
this.modelUlData = response.data.list
this.markOptionData(this.modelUlData)
}
})
},
getAllModelOptionData(data) {
this.$get('model?typeCode=' + this.assetType).then(response => {
if (response.code === 200) {
this.allModelUlData = response.data.list
}
})
},
editData(data, item, mark) {
let obj = {
id: '',
type: '',
value: '',
code: ''
}
let idcData = {
id: '',
name: '',
location: '',
principal: '',
tel: ''
}
if (data === 'model') {
item.vendorCode = this.vendorCode
item.typeCode = this.assetType
}
if (data === 'vendor') {
obj.id = item.id
obj.code = item.code
obj.type = item.type
obj.value = item.label
data = 'sys/dict/update'
item = obj
}
if (data === 'cabinet') {
item.name = this.popCabinetData.name
item.uSize = this.popCabinetData.uSize
item.remark = this.popCabinetData.remark
item.idcId = this.popCabinetData.idcId
}
if (data === 'idc') {
idcData.id = item.id
idcData.name = this.popIdcData.name
idcData.location = this.popIdcData.location
idcData.principal = this.popIdcData.principal
idcData.tel = this.popIdcData.tel
item = idcData
}
if (mark === 'CabIDC') {
idcData.id = item.id
idcData.name = this.addCabIDCData.name
idcData.location = this.addCabIDCData.location
idcData.principal = this.addCabIDCData.principal
idcData.tel = this.addCabIDCData.tel
item = idcData
}
this.$put(data, item).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
})
this.getIDCOptionData()
this.getAllModelOptionData();
this.getCabinetOptionData('')
this.$emit('refreshData', 'true')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
},
addNewData(type) {
if (type === 'IDC') {
this.$post('idc', this.addIdcData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getIDCOptionData()
this.getAssetData()
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'assetType') {
this.$post('sys/dict/save', this.assetTypeData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.getAssetTypeOptionData()
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'asset') {
let modelId = ''
let authType = ''
console.log(this.assetData.modelId)
if(this.assetData.modelId !== ''){
modelId = this.assetData.modelId.join(',').split(',')[1]
}else{
this.assetData.modelId=''
}
if(this.assetData.accounts[0].user === ''){
authType = ''
}else{
authType = this.assetData.accounts[0].authType
}
let form = new FormData();
form.append("sn", this.assetData.sn);
form.append("host", this.assetData.host);
form.append("state", this.assetData.state);
form.append("purchaseDate", this.assetData.purchaseDate);
form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", modelId);
form.append("accounts[0].authType", authType);
form.append("accounts[0].user", this.assetData.accounts[0].user);
form.append("accounts[0].pwd", this.assetData.accounts[0].pwd);
form.append("accounts[0].port", this.assetData.accounts[0].port);
this.$post('asset', form).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.sendStateData('close')
}else{
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
this.$emit('refreshData', 'true')
}
if (type === 'vendor') {
const h = this.$createElement;
this.$post('sys/dict/save', this.addVendorData).then(res => {
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getVendorOptionData()
}else{
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'model') {
this.addNewModelData.typeCode = this.assetType
this.addNewModelData.vendorCode = this.vendorCode
this.$post('model', this.addNewModelData).then(res => {
if (res.code === 200) {
this.getModelOptionData(this.assetType, this.vendorCode)
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getAllModelOptionData(this.assetType)
} else {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
if (type === 'cabinet') {
if (this.assetData.idcId != '') {
this.addCabinetData.idcId = this.assetData.idcId
}
this.$post('cabinet', this.addCabinetData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getCabinetOptionData(this.addCabinetData.idcId)
this.popoverClose('cabinet')
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
},
deleteData(data, item) {
this.$delete(data + "?ids=" + item).then(response => {
const h = this.$createElement;
if (response.code === 200) {
this.$notify({
message: h('i', {style: 'color: teal'}, '删除成功'),
duration: 2000
});
this.$emit('refreshData', 'true')
this.getIDCOptionData()
this.getVendorOptionData()
this.getCabinetOptionData(this.assetData.idcId)
this.getAllModelOptionData(this.assetType)
this.getModelOptionData(this.assetType, this.vendorCode)
} else {
this.$notify({
message: h('i', {style: 'color: teal'}, response.msg),
duration: 2000
});
}
})
},
markOptionData(data) {
data.forEach(item => {
this.$set(item, 'isEdit', false);
this.$set(item, 'oldName', item.value);
this.$set(item, 'modelOldName', item.name);
this.$set(item, item.name, false)
this.$set(item, item.id, false)
this.$set(item, item.id + item.name, false)
this.$set(item, item.name + item.id, false)
})
},
getConnectData() {
this.isResourceShow += 1
let resultData = []
let modelData = this.allModelUlData
for (let i = 0; i < modelData.length; i++) {
let obj = {}
obj.id = modelData[i].vendor.id
obj.code = modelData[i].vendor.code
obj.value = modelData[i].vendor.code
obj.label = modelData[i].vendor.value
obj.children = []
resultData.push(obj)
}
var result = [];
var obj1 = {};
for (let i = 0; i < resultData.length; i++) {
if (!obj1[resultData[i].id]) {
result.push(resultData[i]);
obj1[resultData[i].id] = true;
}
}
for (let x = 0; x < result.length; x++) {
for (let y = 0; y < modelData.length; y++) {
if (result[x].code === modelData[y].vendor.code) {
let obj2 = {}
obj2.value = modelData[y].id
obj2.label = modelData[y].name
result[x].children.push(obj2)
}
}
}
this.vendorTypeOptionData = result
},
editVendorOptionData(item,data,index){
this.vendorCount = index
if (!item.isEdit) {
item.isEdit = true;
} else {
if (item.name !== item.oldName) {
item.isEdit = false;
} else {
item.isEdit = false;
}
}
if(data==='vendor') {
for (let i = 0; i < this.vendorUlData.length; i++) {
const element = this.vendorUlData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
},
editOptionData(item,data,index) {
this.modelCount = index;
if (!item.isEdit) {
item.isEdit = true;
} else {
if (item.name !== item.oldName) {
item.isEdit = false;
} else {
item.isEdit = false;
}
}
if(data==='type') {
for (let i = 0; i < this.assetTypeOptionData.length; i++) {
const element = this.assetTypeOptionData[i];
if (item.id !== element.id) {
element.isEdit = false
element.value = element.oldName
}
}
}
if(data==='model') {
for (let i = 0; i < this.modelUlData.length; i++) {
const element2 = this.modelUlData[i];
if (item.id !== element2.id) {
element2.isEdit = false
element2.name = element2.modelOldName
}
}
}
},
handleChange(file) {
this.assetData.accounts[0].file = file.raw
},
delOptionData(data) {
},
sendStateData(data) {
this.$emit('sendStateData', 'close')
this.initAdd()
},
initAdd() {
this.assetType = ''
this.assetData.sn = ''
this.assetData.host = ''
this.assetData.state = ''
this.assetData.purchaseDate = ''
this.assetData.idcId = ''
this.assetData.cabinetId = ''
this.assetData.modelId = ''
this.assetData.accounts[0].authType =1
this.assetData.accounts[0].user = ''
this.assetData.accounts[0].pwd = ''
this.assetData.accounts[0].port = ''
this.assetData.accounts[0].file = ''
this.idcSelectedData.location = ''
this.idcSelectedData.principal = ''
this.idcSelectedData.tel = ''
this.cabinetSelectedData.uSize = 0
this.cabinetSelectedData.remark = ''
},
editing(item) {
console.log(item)
},
getSingleIDCData(data, item, itemData) {
if (item !== 'edit') {
this.idcSelectedData = '';
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.idcSelectedData = item
}
});
this.getCabinetOptionData(this.assetData.idcId);
this.assetData.cabinetId = ''
this.cabinetSelectedData.uSize = ''
this.cabinetSelectedData.remark = null
} else {
this.clickFlush('idc', itemData)
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.popIdcData.name = item.name
this.popIdcData.location = item.location
this.popIdcData.principal = item.principal
this.popIdcData.tel = item.tel
this.addCabIDCData.name = item.name
this.addCabIDCData.location = item.location
this.addCabIDCData.principal = item.principal
this.addCabIDCData.tel = item.tel
}
});
}
},
getSingleCabinetData(data, type, item) {
if (type !== 'edit') {
this.cabinetSelectedData.uSize = 0;
this.cabinetSelectedData.remark = null
this.cabinetOptionData.forEach(items => {
if (items.id === data) {
this.cabinetSelectedData.uSize = items.uSize
this.cabinetSelectedData.remark = items.remark
}
})
} else {
this.clickFlush('cabinet', item)
item[item.name] = !item[item.name]
this.cabinetOptionData.forEach(items => {
if (items.id === data) {
console.log(items)
this.popCabinetData.name = items.name
this.popCabinetData.uSize = items.uSize
this.popCabinetData.remark = items.remark
this.popCabinetData.idcId = items.idcId
}
})
}
},
getLidata(index, item) {
this.vendorCount = index;
this.vendorCode = item.code;
this.getModelOptionData(this.assetType, this.vendorCode)
},
clickState(index, item, data) {
if (data === 'type') {
this.modelCount = index;
this.tempData = item;
}
if (data === 'model') {
this.modelCount = index;
this.modelClickData = item.id
}
},
transferData(data) {
if (data === 'type') {
this.assetType = this.tempData.code
this.popTypeVisible = false
this.tempData = ''
}
if (data === 'model') {
this.assetData.modelId = [this.vendorCode, this.modelClickData]
this.popCompVisible = false
this.tempData = ''
}
},
popoverClose(data) {
if (data === 'type') {
this.modelCount = ''
this.popTypeVisible = false
}
if (data === 'vendor') {
this.popCompVisible = false;
this.modelUlData = '';
this.vendorCount = ''
}
if (data === 'idc') {
this.popIDCVisible = false
this.addIdcData.name= '',
this.addIdcData.location= '',
this.addIdcData.principal= '',
this.addIdcData.tel= ''
}
if (data === 'cabinet') {
this.popCabinetVisible = false
this.addCabinetData.name = ''
this.addCabinetData.uSize = 0
this.addCabinetData.remark = ''
this.addCabinetData.idcId = ''
}
},
editPopoverClose(data) {
if (data === 'type') {
this.modelCount = ''
this.editPopTypeVisible = !this.editPopTypeVisible
}
if (data === 'vendor') {
this.vendorCount = ''
this.modelCount = ''
this.editPopVendorVisible = !this.editPopVendorVisible
}
if (data === 'idc') {
this.editPopIDCVisible = !this.editPopIDCVisible
}
if (data === 'cabinet') {
this.editPopCabinetVisible = !this.editPopCabinetVisible
}
},
getPrincipalName(data) {
for (let item in this.idcUserData) {
if (this.idcUserData[item].userId === data) {
return this.idcUserData[item].username
}
}
},
returnData(data) {
if (data && data !== '--') {
return data.name;
} else if (data === '--') {
return '-';
} else {
return "-";
}
},
clickFlush(type, itemData) {
if (type === 'idc') {
for (let i = 0; i < this.IDCOptionData.length; i++) {
const element = this.IDCOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
if (type === 'cabinet') {
for (let i = 0; i < this.cabinetOptionData.length; i++) {
const element = this.cabinetOptionData[i];
if (element.id === itemData.id) {
setTimeout(() => {
element[element.name] = true;
}, 100)
} else {
element[element.name] = false
}
}
}
},
},
mounted() {
this.getUserData()
this.getIDCOptionData();
this.getVendorOptionData();
this.getCabinetOptionData('')
this.getAssetTypeOptionData();
window.onresize = () => {
this.tableHeight = document.documentElement.clientHeight - 200;
}
}
}
</script>
<style scoped>
.sidebar-pop-input {
position: absolute;
right: 50px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
.sidebar-pop-input-select {
position: absolute;
right: 83px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
.content-left {
float: left;
width: 370px;
height: 100%;
}
.content-right {
margin-left: 370px;
}
.sidebar-title {
padding-left: 30px;
padding-top: 20px;
}
.sidebar-info {
margin-top: 20px;
border: 1px solid #acacac;
border-radius: 8px;
height: calc(90vh - 55px);
width: calc(100% - 8px);
}
.sidebar-info-header {
background: #acacac;
text-align: center;
line-height: 50px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 60px;
width: 100%;
}
.sidebar-info-footer {
padding-top: 15px;
padding-left: 15px;
}
.checkbox-edit {
position: absolute;
top: 8px;
left: 230px;
}
.el-form-style {
padding-top: 40px;
}
.right-menu {
position: fixed;
top: 60px;
right: 0;
z-index: 500;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
width: 580px;
height: calc(90% - 60px);
overflow-y: auto
}
.tab-input-square {
border: 1px solid #aaaaaa;
height: 25px;
width: 65px;
border-radius: 3px;
text-align: center;
margin-top: 6px;
line-height: 23px;
color: #aaaaaa;
}
.account-list-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
.right-box-title {
height: 30px;
line-height: 40px;
}
.el-select-add-btn {
display: inline-block;
width: 26px;
height: 26px;
float: right;
margin-top: 7px;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
line-height: 22px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
.pop-window {
height: 370px;
width: 400px;
}
.pop-window-assetType {
height: 550px;
width: 400px;
}
.pop-window-assetType-content {
padding: 1px 15px 15px 20px;
}
.li-list {
width: 97%;
height: 300px;
border: 1px solid #cfcfcf;
overflow-y: auto;
}
.li-list-part {
width: 90%;
height: 130px;
border: 1px solid #cfcfcf;
overflow-y: auto;
}
.rm-c-list span:hover {
background-color: #888;
color: #fff;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
line-height: 35px;
cursor: pointer;
text-align: center;
}
.right-box-bottom-btns {
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
width: 50%;
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn-50 {
width: 50%;
float: right;
border-bottom-right-radius: 8px;
}
.activeColor {
background-color: #409EFF;
}
@keyframes slide-in-from-right {
from {
right: -800px
}
to {
right: 0
}
}
@keyframes slide-out-to-right {
from {
right: 0
}
to {
right: -800px
}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
</style>