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

1273 lines
49 KiB
Vue
Raw Normal View History

<template>
<transition name="right-box-580">
<div class="right-box right-box-add-asset" v-if="addUnitShow" @click="editQuit">
<div class="right-box-top-btns">
<button type="button" @click.stop="addNewData('asset')" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click.stop="sendStateData('close')"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<div class="right-box-title">{{$t('asset.createAssetTab.title')}}</div>
<el-scrollbar class="right-box-form-box">
<el-form :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules" ref="addAssetForm">
<el-form-item :label="this.$t('asset.createAssetTab.sn')" prop="sn">
<el-input size="mini" v-model="assetData.sn" maxlength="64" show-word-limit/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.host')" prop="host">
<el-input size="mini" v-model="assetData.host"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.state')" prop="state">
<el-select size="mini" v-model="assetData.state" placeholder="">
<el-option
v-for="item in assetStateOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<div class="asset-sub-title">{{$t('asset.createAssetTab.assetInfo')}}</div>
<div class="line-100 asset-line"></div>
<!------------------------------------------资产类型---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.assetType')" class="right-box-form-content" prop="assetType">
<el-select popper-class="asset-dropdown" size="mini" v-model="assetType" clearable @change="getAllModelOptionData" placeholder=""
@visible-change="cancelEdit" class="right-box-row-with-btn">
<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="right-box-row-btn right-box-row-btn-small">
<el-popover
placement="left"
v-model="popTypeVisible"
>
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<!--右上角按钮-->
<div class="pop-top-btns">
<button type="button" @click="popoverClose('type')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.assetTypeTab.assetType')}}</div>
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</div>
<el-input class="input-x-mini" v-model="assetTypeData.value"/>
<button type="button" @click="addNewData('assetType')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.existAssetType')}}</div>
<div class="pop-box pop-box-asset">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in assetTypeOptionData"
@click="clickState(index,item,'type')"
:class="{'pop-box-active': 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">
<el-input class="input-x-mini" v-model="item.value"/>
</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>
</el-scrollbar>
</div>
</div>
</div>
</div>
<div slot="reference"><i class="el-icon-plus"></i></div>
</el-popover>
</div>
</el-form-item>
<!------------------------------------------厂商/型号---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.vendor')" class="right-box-form-content" prop="modelId">
<el-cascader
:options="vendorTypeOptionData"
:key="isResourceShow"
v-model="assetData.modelId"
:disabled="this.assetType!=''?false:true"
clearable
size="mini"
placeholder=""
class="right-box-row-with-btn"
>
</el-cascader>
<div class="right-box-row-btn right-box-row-btn-small">
<el-popover
placement="left"
trigger="click"
width="255"
v-model="popCompVisible"
:disabled=popState
v-clickoutside="clickOutSide"
>
<div class="pop-window-assetType" @click="editQuit()">
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="popoverClose('vendor')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!--标题-->
<div class="pop-title">{{$t('asset.createAssetTab.vendorTab.vendor')}}</div>
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</div>
<el-input class="input-x-mini" v-model="addVendorData.value"/>
<button type="button" @click="addNewData('vendor')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</div>
<div class="pop-box pop-box-asset">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in vendorUlData"
@click="getLidata(index,item)"
:class="{'pop-box-active': 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">
<el-input class="input-x-mini" v-model="item.value"/>
</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>
</el-scrollbar>
</div>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.modelName')}}</div>
<el-input class="input-x-mini" v-model="addNewModelData.name"/>
<button type="button" @click="addNewData('model')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existModel')}}</div>
<div class="pop-box pop-box-asset">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
v-for="(item,index) in modelUlData"
@click="clickState(index,item,'model') "
:class="{'pop-box-active': modelCount === index}"
:key="index">
<div>
<span v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.name"/>
</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>
</div>
</li>
</ul>
</el-scrollbar>
</div>
</div>
</div>
</div>
<div slot="reference"><i class="el-icon-plus"></i></div>
</el-popover>
</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.purchaseDate')" class="right-box-form-content">
<el-date-picker
size="mini"
v-model="assetData.purchaseDate"
value-format="yyyy-MM-dd"
type="date"
style="width: 100%"
placeholder="">
</el-date-picker>
</el-form-item>
<div class="asset-sub-title">{{$t('asset.createAssetTab.dc')}}</div>
<div class="line-100 asset-line"></div>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
<el-option
v-for="item in IDCOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
<!--<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">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-form-item :label="$t('asset.createAssetTab.dcName')">
<el-input v-model="popIdcData.name"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.location')">
<el-input v-model="popIdcData.location"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.principal')">
<el-select v-model="popIdcData.principal" clearable size="mini">
<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="$t('asset.createAssetTab.editIdcTab.tel')">
<el-input size="mini" 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="right-box-row-btn right-box-row-btn-small">
<idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
<!--<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 size="mini" 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"><i class="el-icon-plus"></i></div>
</el-popover>-->
</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>
<div class="line-100 asset-line"></div>
<!------------------------------------------cabinet---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
<el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
:disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
@change="getSingleCabinetData">
<el-option
v-for="item in cabinetOptionData"
:key="item.key"
:label="item.name"
:value="item.id"
>
<span>{{ item.name }}</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="el-icon-edit-outline"></i>
</cabinet-config-box>
<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="right-box-row-btn right-box-row-btn-small">
<cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
</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>
<!--CLI-->
<div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
<div class="line-100 asset-line"></div>
<account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
</el-form>
</el-scrollbar>
</div>
</transition>
</template>
<script>
import accountConfig from './accountConfig';
export default {
name: "assetAddUnit",
props: {
addUnitShow: Boolean
},
components:{
'account-config-box': accountConfig,
},
data() {
return {
assetData: {
id: '',
sn: '',
host: '',
assetType: '',
state: 1,
purchaseDate: '',
idcId: '',
cabinetId: '',
modelId: '',
accounts: [{
authType: 1,
user: '',
pwd: '',
port: '',
uploadFile:null
}]
},
assetStateOption: [
{
value: 1,
label: this.$t('asset.createAssetTab.inStock')
}, {
value: 2,
label: this.$t('asset.createAssetTab.notInStock')
}],
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,
rules: {
sn: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
host: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
modelId: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
assetType: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
idcId: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
},
cabRules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
uSize: [
{required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
],
idcId: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
]
2020-01-08 18:02:41 +08:00
},
uploadFileList:[]
}
},
/*computed: {
getData() {
return this.$store.state.assetData
}
},*/
watch: {
allModelUlData(newVal) {
if (newVal) {
this.getConnectData()
}
},
assetType(newVal) {
this.assetData.assetType = newVal;
if (newVal == '') {
this.popState = true
} else {
this.popState = false
}
},
'assetData.idcId': function(n, o) {
this.addCabinetData.idcId = n;
}
},
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.commit('assetDcListChange');
this.$emit('refreshData');
}
})
},
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.assetData.assetType = this.assetType;
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.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getAssetTypeOptionData();
this.getIDCOptionData();
this.getAllModelOptionData();
if (data === 'cabinet') {
this.getCabinetOptionData(item.idcId);
}
this.$emit('refreshData', 'true');
} else {
this.$message.error(res.msg);
}
})
},
2020-01-08 18:02:41 +08:00
changeLoginType:function(loginType){
this.assetData.accounts[0].authType = loginType;
if(loginType == 1){//密码登录
this.clearFile();
}
if(loginType == 2){//公钥登录
this.assetData.accounts[0].pwd='';
}
},
addNewData(type) {
if (type === 'IDC') {
this.$post('idc', this.addIdcData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getIDCOptionData()
this.getAssetData()
} else {
this.$message.error(res.msg);
}
})
}
if (type === 'assetType') {
this.$post('sys/dict/save', this.assetTypeData).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.getAssetTypeOptionData()
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
} else {
this.$message.error(res.msg);
}
})
}
if (type === 'asset') {
this.$refs.accountConfigBox[0].validateAccount();
let accountValideResult=this.$refs.accountConfigBox[0].validateResult;
this.$refs.addAssetForm.validate((valid) => {
if (valid&&accountValideResult) {
let modelId = ''
let authType = ''
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);
2020-01-08 18:02:41 +08:00
form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", modelId);
for(let i in this.assetData.accounts){
let account=this.assetData.accounts[i];
if(account.user){
form.append("accounts["+i+"].authType",account.authType);
form.append("accounts["+i+"].user", account.user);
form.append("accounts["+i+"].port", account.port);
form.append("accounts["+i+"].pwd", account.pwd);
if(account.authType==2){
form.append('cert',account.uploadFile?account.uploadFile.raw:null);
}
}
2020-01-08 18:02:41 +08:00
}
this.$post('asset', form,{'Content-Type': 'multipart/form-data'}).then(res => {
const h = this.$createElement;
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
2020-01-08 18:02:41 +08:00
this.clearFile();
this.$emit('refreshData', 'true');
this.sendStateData('close');
} else {
this.$message.error(res.msg);
}
});
2020-01-08 18:02:41 +08:00
}
});
}
if (type === 'vendor') {
const h = this.$createElement;
this.$post('sys/dict/save', this.addVendorData).then(res => {
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getVendorOptionData()
} else {
this.$message.error(res.msg);
}
})
}
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.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getAllModelOptionData(this.assetType)
} else {
const h = this.$createElement;
this.$message.error(res.msg);
}
})
}
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.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getCabinetOptionData(this.addCabinetData.idcId)
this.popoverClose('cabinet');
this.editPopoverClose('cabinet');
} else {
this.$message.error(res.msg);
}
})
}
},
2020-01-08 18:02:41 +08:00
uploadFile:function(file){
this.assetData.accounts[0].file=file.file;
},
clearFile:function(){
if(this.$refs.upload){
this.$refs.upload.clearFiles();
}
this.uploadFileList=[];
this.assetData.accounts[0].privateKey='';
},
deleteData(data, item) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete(data + "?ids=" + item).then(response => {
const h = this.$createElement;
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
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.$message.error(response.msg);
}
})
});
},
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++) {
if (!modelData[i].vendor) {
continue;
}
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 (!modelData[y].vendor) {
continue;
}
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
}
}
}
},
2020-01-08 18:02:41 +08:00
handleChange(file,fileList) {
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]
}
this.assetData.accounts[0].file = this.uploadFileList[0];
},
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.id = item.id;
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) {
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>
.asset-sub-title {
padding: 8px 0;
}
.asset-line {
margin-bottom: 18px;
background-color: #DCDFE6;
}
2020-01-08 18:02:41 +08:00
/*去除上传文件动画start*/
/*.upload-demo {*/
/* display: flex;*/
/*}*/
/deep/ .el-list-enter-active,
/deep/ .el-list-leave-active {
transition: none;
}
/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
opacity: 0;
}
/deep/ .el-upload-list {
height: 40px;
}
/*去除上传文件动画end*/
</style>