feature: asset界面开发
重新绘制侧滑窗口,添加相应的弹出框设置属性
This commit is contained in:
wanghaoyu
@@ -7,7 +7,8 @@
|
||||
<div class="sidebar-info-header">ALL</div>
|
||||
<div class="sidebar-info-footer">
|
||||
<el-checkbox-group v-model="checkList" size="small">
|
||||
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
|
||||
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id
|
||||
@change="getCheckedData(item)">{{item.name}}
|
||||
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
@@ -47,9 +48,12 @@
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop == 'option'" class="account-list-options">
|
||||
<span @click.stop="tagShow('showDel')" class="account-list-option"><i class="el-icon-delete"></i></span>
|
||||
<span @click.stop="tagShow('showEdit')" class="account-list-option"><i class="el-icon-view"></i></span>
|
||||
<span @click.stop="tagShow('showView')" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
|
||||
<span @click.stop="tagShow('showDel')" class="account-list-option"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
<span @click.stop="tagShow('showAdd')" class="account-list-option"><i
|
||||
class="el-icon-view"></i></span>
|
||||
<span @click.stop="tagShow('showEdit')" class="account-list-option"><i
|
||||
class="el-icon-edit-outline"></i></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -58,27 +62,28 @@
|
||||
<transition name="right-box" @click.stop>
|
||||
<div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
|
||||
<div v-if="this.tagType=='add'">
|
||||
<div class="right-box-top-btns">
|
||||
<div class="right-box-top-btn right-box-top-btn-full">
|
||||
<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">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</div>
|
||||
<div class="right-box-top-btn">
|
||||
<div class="right-box-btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box-title">111</div>
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<div class="right-box__top-btns">
|
||||
<div class="right-box__top-btn right-box__top-btn_full" @click="tagShow()">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>Esc</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="form.name"/>
|
||||
@@ -90,152 +95,336 @@
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<el-input v-model="form.name"/>
|
||||
<div class="tab-input-square">342</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<el-input v-model="form.name"/>
|
||||
<div class="tab-input-square">342</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="Cabinet">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Host">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="State">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="this.tagType=='edit'">
|
||||
<el-form ref="form" :model="form" label-width="120px" size="small" >
|
||||
<div class="right-box__top-btns">
|
||||
<div class="right-box__top-btn right-box__top-btn_full" @click="tagShow()">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-close"></i>
|
||||
</div>
|
||||
<span>Esc</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn right-box__top-btn_full">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<span>Save</span>
|
||||
</div>
|
||||
<div class="right-box__top-btn">
|
||||
<div class="right-box__btn-icon">
|
||||
<i class="el-icon-delete"></i>
|
||||
</div>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="IP">
|
||||
<span>192.168.100.255</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<span>服务器</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<span>No1</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<span>国内地区/北京市/1号</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Cabinet">
|
||||
<span>13排223机柜</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Host">
|
||||
<span>192.158.22.22</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="State">
|
||||
<span>在库</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="Alarm">
|
||||
<div>111</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<span>endPoint:</span>
|
||||
</div>
|
||||
<div class="tag-table">
|
||||
<el-table
|
||||
:data="tagTableData"
|
||||
:row-style="{height:'20px'}"
|
||||
:cell-style="{padding:'2px'}"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tagTableTitle"
|
||||
v-if="item.show"
|
||||
:key="`col_${index}`"
|
||||
:label="item.label"
|
||||
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop=='projectName'">
|
||||
<p>
|
||||
<span>{{scope.row['projectName']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop=='moduleName'">
|
||||
<p>
|
||||
<span>{{scope.row['moduleName']}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="item.prop=='endPoint'">
|
||||
<div class="tableSquare">342</div>
|
||||
</div>
|
||||
<div v-if="item.prop=='alarm'">
|
||||
<div class="tableSquare">{{11}}/{{111}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label=""
|
||||
width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
||||
<div style="font-size: 10px">资产信息</div>
|
||||
<el-divider></el-divider>
|
||||
<span>默认CLI账户</span>
|
||||
<div style="padding-top: 10px">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
|
||||
<el-option label="区域一" value="shanghai">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-form-style">
|
||||
<el-form-item label="资产类型">
|
||||
<div class="select-style">
|
||||
<el-select value-key="id" v-model="assetType">
|
||||
<el-option
|
||||
v-for="item in assetOptionData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||
@click.stop="editing">
|
||||
<el-input type="text" v-model="item.name" size="mini"/>
|
||||
</span>
|
||||
<span class="config-dropdown-btn"
|
||||
@click.stop="editOptionData(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
||||
@click.stop="delOptionData(item)"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="el-select-add-btn">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="pop-window-company">
|
||||
<span style="display: block;padding-bottom: 20px">资产类型</span>
|
||||
<span style="display: block;padding-bottom: 20px">新增资产类型</span>
|
||||
<input v-model="form.name"/><div>111</div>
|
||||
<span style="display: block;padding-bottom: 20px">已有资产类型</span>
|
||||
<div class="rm-c-list">
|
||||
<ul>
|
||||
<li style="cursor: pointer;">
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="el-icon-plus" slot="reference"></span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="厂商/型号">
|
||||
<div class="select-style">
|
||||
<el-select value-key="id" v-model="assetType">
|
||||
<el-option
|
||||
v-for="item in assetOptionData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||
@click.stop="editing">
|
||||
<el-input type="text" v-model="item.name" size="mini"/>
|
||||
</span>
|
||||
<span class="config-dropdown-btn"
|
||||
@click.stop="editOptionData(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
||||
@click.stop="delOptionData(item)"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="el-select-add-btn">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="pop-window-type">
|
||||
<span style="display: block;padding-bottom: 20px">商场/型号</span>
|
||||
<span style="display: block;padding-bottom: 20px">新厂商名称</span>
|
||||
<input v-model="form.name"/><div>111</div>
|
||||
<span style="display: block;padding-bottom: 20px">已有厂商</span>
|
||||
<div class="companyList">
|
||||
<ul>
|
||||
<li style="cursor: pointer;">
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span style="display: block;padding-bottom: 20px">已有型号</span>
|
||||
<input v-model="form.name"/><div>111</div>
|
||||
<div class="companyList">
|
||||
<ul>
|
||||
<li style="cursor: pointer;">
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span> 1111</span>
|
||||
<i class="el-icon-edit-outline"></i>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="el-icon-plus" slot="reference"></span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买日期">
|
||||
<div class="select-style">
|
||||
<el-select value-key="id" v-model="assetType">
|
||||
<el-option
|
||||
v-for="item in assetOptionData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||
@click.stop="editing">
|
||||
<el-input type="text" v-model="item.name" size="mini"/>
|
||||
</span>
|
||||
<span class="config-dropdown-btn"
|
||||
@click.stop="editOptionData(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
||||
@click.stop="delOptionData(item)"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div style="font-size: 10px">IDC</div>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="IDC Name">
|
||||
<div class="select-style">
|
||||
<el-select value-key="id" v-model="assetType">
|
||||
<el-option
|
||||
v-for="item in assetOptionData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||
@click.stop="editing">
|
||||
<el-input type="text" v-model="item.name" size="mini"/>
|
||||
</span>
|
||||
<span class="config-dropdown-btn"
|
||||
@click.stop="editOptionData(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
||||
@click.stop="delOptionData(item)"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="el-select-add-btn">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="pop-window">
|
||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<span class="el-icon-plus" slot="reference"></span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<span>192.168.100.255</span>
|
||||
<span></span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<span></span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<span></span>
|
||||
</el-form-item>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="机柜">
|
||||
<div class="select-style">
|
||||
<el-select value-key="id" v-model="assetType">
|
||||
<el-option
|
||||
v-for="item in assetOptionData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.name">
|
||||
<span v-if="!item.isEdit">{{ item.name }}</span>
|
||||
<span class="config-dropdown-label-input" v-if="item.isEdit"
|
||||
@click.stop="editing">
|
||||
<el-input type="text" v-model="item.name" size="mini"/>
|
||||
</span>
|
||||
<span class="config-dropdown-btn"
|
||||
@click.stop="editOptionData(item)">
|
||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||
</span>
|
||||
<span class="config-dropdown-btn config-dropdown-btn-delete"
|
||||
@click.stop="delOptionData(item)"><i
|
||||
class="el-icon-delete"></i></span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="el-select-add-btn">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="pop-window">
|
||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<div>{{value1}}</div><el-slider v-model="value1"></el-slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<el-input v-model="form.name" type="textarea" :rows="2"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<span class="el-icon-plus" slot="reference"></span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<span></span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<span></span>
|
||||
</el-form-item>
|
||||
<div style="font-size: 10px">IDC</div>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="IP">
|
||||
<el-radio-group>
|
||||
<el-radio-button label="Password"></el-radio-button>
|
||||
<el-radio-button label="SSH私钥"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN">
|
||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Asset Type">
|
||||
<span>服务器</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="ModelId">
|
||||
<span>No1</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="IDC">
|
||||
<span>国内地区/北京市/1号</span>
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -252,9 +441,9 @@ export default {
|
||||
name: "asset",
|
||||
data() {
|
||||
return {
|
||||
value1:100,
|
||||
checkList: [],
|
||||
checkListData: [],
|
||||
sidebarState:'',
|
||||
sidebarState: '',
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t("asset.tableTitle.id"),
|
||||
@@ -360,38 +549,63 @@ export default {
|
||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||
}
|
||||
],
|
||||
checkListData: [],
|
||||
assetOptionData: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'group1',
|
||||
}, {
|
||||
id: '2',
|
||||
name: 'group2',
|
||||
}, {
|
||||
id: '3',
|
||||
name: '小组3',
|
||||
}, {
|
||||
id: '4',
|
||||
name: '小组4',
|
||||
}, {
|
||||
id: '5',
|
||||
name: '小组啊小组5',
|
||||
}, {
|
||||
id: '6',
|
||||
name: '小组6',
|
||||
}],
|
||||
input: '',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
idcId: this.$store.state.assetData.selectedData
|
||||
},
|
||||
tableHeight:document.documentElement.clientHeight-200,
|
||||
tableHeight: document.documentElement.clientHeight - 200,
|
||||
tabShow: false,
|
||||
tagType: 'add',
|
||||
form: {
|
||||
name: ''
|
||||
},
|
||||
searchObj: {
|
||||
idcId: 7
|
||||
}
|
||||
rightBox: { //弹出框相关
|
||||
show: false,
|
||||
isEdit: false, //false查看，true编辑
|
||||
title: ''
|
||||
},
|
||||
assetType: {},
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getData(){
|
||||
computed: {
|
||||
getData() {
|
||||
return this.$store.state.assetData
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
getData:{
|
||||
handler(newVal,oldVal){
|
||||
this.checkList.splice(1,1,newVal.selectedData)
|
||||
if(newVal.moduleData=='asset'){
|
||||
this.sidebarState=true
|
||||
}else{
|
||||
this.sidebarState=false
|
||||
watch: {
|
||||
getData: {
|
||||
handler(newVal, oldVal) {
|
||||
this.checkList.splice(0, 0, newVal.selectedData)
|
||||
if (newVal.moduleData == 'asset') {
|
||||
this.sidebarState = true
|
||||
} else {
|
||||
this.sidebarState = false
|
||||
this.getAssetData();
|
||||
this.checkListData=[0]
|
||||
this.checkListData = [0]
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
@@ -412,6 +626,26 @@ export default {
|
||||
this.pageObj.total = response.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
markOptionData() {
|
||||
for (let i in this.assetOptionData) {
|
||||
this.$set(this.assetOptionData[i], 'isEdit', false);
|
||||
this.$set(this.assetOptionData[i], 'oldName', this.assetOptionData[i].name);
|
||||
}
|
||||
},
|
||||
editOptionData(item) {
|
||||
if (!item.isEdit) {
|
||||
item.isEdit = true;
|
||||
} else {
|
||||
if (item.name != item.oldName) {
|
||||
item.isEdit = false;
|
||||
} else {
|
||||
item.isEdit = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
delOptionData(data) {
|
||||
|
||||
},
|
||||
tagShow(t) {
|
||||
this.tabShow = false;
|
||||
@@ -423,6 +657,9 @@ export default {
|
||||
this.tabShow = true;
|
||||
this.tagType = 'edit'
|
||||
}
|
||||
},
|
||||
editing() {
|
||||
|
||||
},
|
||||
pageNo(val) {
|
||||
this.pageObj.pageNo = val;
|
||||
@@ -433,12 +670,12 @@ export default {
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.markOptionData();
|
||||
this.getListData();
|
||||
this.getAssetData();
|
||||
window.onresize = () => {
|
||||
this.tableHeight = document.documentElement.clientHeight-200;
|
||||
this.tableHeight = document.documentElement.clientHeight - 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -462,6 +699,10 @@ export default {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
padding-top: 10px;
|
||||
}
|
||||
@@ -469,15 +710,25 @@ export default {
|
||||
.el-checkbox {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.select-style .el-select .el-input .el-input__inner {
|
||||
width: 400px
|
||||
}
|
||||
|
||||
.el-scrollbar .el-input {
|
||||
width: 200px
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
|
||||
.content-left {
|
||||
float: left;
|
||||
width: 370px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
margin-left:370px;
|
||||
margin-left: 370px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
@@ -514,29 +765,10 @@ export default {
|
||||
left: 230px;
|
||||
}
|
||||
|
||||
.right-box__top-btn {
|
||||
border-radius: 0 0 9px 9px;
|
||||
float: right;
|
||||
color: #656565;
|
||||
height: 35px;
|
||||
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;
|
||||
}
|
||||
|
||||
.el-form-style {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
@@ -548,15 +780,18 @@ export default {
|
||||
padding: 0 20px;
|
||||
width: 580px;
|
||||
height: calc(90% - 60px);
|
||||
overflow-y:auto
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.tableSquare {
|
||||
border: 1px solid #000;
|
||||
.tab-input-square {
|
||||
border: 1px solid #aaaaaa;
|
||||
height: 25px;
|
||||
width: 90px;
|
||||
border-radius: 8px;
|
||||
width: 70px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
line-height: 23px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.account-list-search {
|
||||
@@ -565,17 +800,108 @@ export default {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.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: 300px;
|
||||
width: 400px;
|
||||
}
|
||||
.pop-window-company{
|
||||
height: 600px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.pop-window-type{
|
||||
height: 600px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.companyList{
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.rm-c-list li{
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.rm-c-list span:hover{
|
||||
background-color:#888;color:#fff;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slide-in-from-right {
|
||||
from {right: -800px}
|
||||
to {right: 0}
|
||||
from {
|
||||
right: -800px
|
||||
}
|
||||
to {
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-out-to-right {
|
||||
from {right: 0}
|
||||
to {right: -800px}
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user