Commit 37fb5bdc authored by 秦嘉's avatar 秦嘉

综合查询页面

parent 937b88c5
......@@ -181,7 +181,7 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.warnModule {
.strategyRow {
padding: 5px 0;
......@@ -190,17 +190,6 @@ export default {
.el-input__inner {
padding: 0 0 0 9px;
}
.lineInput {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 70px;
}
}
.warnHead {
height: 58px;
padding: 15px 20px 10px 20px;
......@@ -218,7 +207,17 @@ export default {
}
}
}
.lineInput {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 70px;
}
}
.warnBody {
padding: 15px;
}
......
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">综合查询</span>
<span>| 查询到<span style="color: #3db58d">{{182}}</span>个符合记录的数据 </span>
<div class="cleanUpBtns">
<el-button type="primary" @click="saveForExcel">保存为报表</el-button>
<el-dropdown>
<el-button type="primary">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>批量入库</el-dropdown-item>
<el-dropdown-item>打印标签</el-dropdown-item>
<el-dropdown-item>设为闲置</el-dropdown-item>
<el-dropdown-item>维修登记</el-dropdown-item>
<el-dropdown-item>清理报废</el-dropdown-item>
<el-dropdown-item>批量删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column
type="selection"
width="55"
/>
<el-table-column label="资产编号" prop="assetNum" show-overflow-tooltip />
<el-table-column label="资产名称" prop="assetName" show-overflow-tooltip />
<el-table-column label="资产分类" prop="assetClassify" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="保修到期日期" prop="editTime" show-overflow-tooltip />
<el-table-column label="操作">
<template slot-scope="scope">
<el-link type="primary" @click="updateRow(scope.row)">编辑</el-link>
<el-link type="primary" style="margin-left: 20px" @click="finishRow(scope.row)">报废</el-link>
<el-link type="primary" style="margin-left: 20px" @click="outTabRow(scope.row)">打印标签</el-link>
</template>
</el-table-column>
</el-table>
<el-pagination
align="center"
:current-page="currentPage"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-dialog class="propertyClass" width="50%" title="编辑资产" :visible.sync="updateAsset">
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<template slot="title">
<h3 style="color: #1cc2bc">基本信息</h3>
</template>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm">
<el-form-item label="资产名称:">
<el-input
v-model="assetForm.assetName">
</el-input>
</el-form-item>
<el-form-item label="状态:">
<el-select :disabled="true" v-model="assetForm.classify" placeholder="请选择">
<el-option
v-for="item in assetList1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属部门:">
<el-select :disabled="true" v-model="assetForm.ownDepartment" placeholder="请选择">
<el-option
v-for="item in assetList2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="使用者:">
<el-input
v-model="assetForm.usePer">
</el-input>
</el-form-item>
<el-form-item label="保修结束时间:">
<div class="block">
<el-date-picker
v-model="assetForm.editEndTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="配置:">
<el-input
v-model="assetForm.edit"
style="width: 60%">
</el-input>
<el-button type="primary" style="margin-left: 20px">配置</el-button>
</el-form-item>
<el-form-item label="二维码:">
<el-input
type="textarea"
:rows="2"
v-model="assetForm.QRCode">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm">
<el-form-item label="资产编号:">
<el-input
v-model="assetForm.assetNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="所属公司:">
<el-select :disabled="true" v-model="assetForm.ownCompany" placeholder="请选择">
<el-option
v-for="item in assetList2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拥有者:">
<el-input
v-model="assetForm.ownerPer">
</el-input>
</el-form-item>
<el-form-item label="保修开始时间:">
<div class="block">
<el-date-picker
v-model="assetForm.editStartTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="采购时间:">
<div class="block">
<el-date-picker
v-model="assetForm.buyTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="序列号:">
<el-input
v-model="assetForm.serialNumber">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="2">
<template slot="title">
<h3 style="color: #1cc2bc">资产属性</h3>
</template>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm1">
<el-form-item label="品牌:">
<el-input
v-model="assetForm1.brand">
</el-input>
</el-form-item>
<el-form-item label="设备名称:">
<el-input
v-model="assetForm1.devName">
</el-input>
</el-form-item>
<el-form-item label="出厂日期:">
<el-input
v-model="assetForm1.projectTime">
</el-input>
</el-form-item>
<el-form-item label="设备U位:">
<el-input
v-model="assetForm1.devUBit">
</el-input>
</el-form-item>
<el-form-item label="管理IP地址:">
<el-input
v-model="assetForm1.manIPAdderss">
</el-input>
</el-form-item>
<el-form-item label="MAC地址:">
<el-input
v-model="assetForm1.MACAdderss">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm1">
<el-form-item label="型号:">
<el-input
v-model="assetForm1.model">
</el-input>
</el-form-item>
<el-form-item label="设备用途:">
<el-input
v-model="assetForm1.devUse">
</el-input>
</el-form-item>
<el-form-item label="机房:">
<el-input
v-model="assetForm1.machineRoom">
</el-input>
</el-form-item>
<el-form-item label="业务IP地址:">
<el-input
v-model="assetForm1.thingIPAddress">
</el-input>
</el-form-item>
<el-form-item label="操作系统及版本:">
<el-input
v-model="assetForm1.oprSysLevel">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item name="3">
<template slot="title">
<h3 style="color: #1cc2bc">配置属性</h3>
</template>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">保存</el-button>
</span>
</el-dialog>
<el-dialog class="propertyClass" width="50%" title="新增报废" :visible.sync="addAsset">
<el-collapse v-model="activeNames1">
<el-collapse-item name="1">
<template slot="title">
<h3 style="color: #1cc2bc">基本信息</h3>
</template>
<el-form ref="cleanUpForm" label-width="auto" :model="assetForm2">
<el-form-item label="报废单号:">
<el-input
v-model="assetForm2.inputCleanUpNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="登记时间:">
<div class="pickBody">
<el-date-picker
v-model="assetForm2.doTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人:">
<el-input
v-model="assetForm2.inputFinishPer">
</el-input>
</el-form-item>
<el-form-item label="提交人:">
<el-input
v-model="assetForm2.submitPer">
</el-input>
</el-form-item>
<el-form-item label="报废说明:">
<el-input
type="textarea"
:rows="2"
v-model="assetForm2.inputCleanUpMen">
</el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
<el-table
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="assetNum"
label="资产编号"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetName"
label="资产名称"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetClassify"
label="资产分类"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="assetType"
label="资产状态"
show-overflow-tooltip>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog1">保存</el-button>
<el-button type="primary" @click="closeAssetDialog1">放弃</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
tableData: [
{
assetNum: 'cty-34324',
assetName: '测试资产1',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cry-67454',
assetName: '测试资产2',
assetClassify: '设备',
type: '禁用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: '4cty-3324',
assetName: '测试资产3',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'c343ty-24',
assetName: '测试资产5',
assetClassify: '网络',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cty24-343',
assetName: '测试资产1',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'zcf-34ss4',
assetName: '测试资产3',
assetClassify: '服务器',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'ctr-43324',
assetName: '测试资产2',
assetClassify: '设备',
type: '禁用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'crr-34244',
assetName: '测试资产5',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'ty4-34c324',
assetName: '测试资产5',
assetClassify: '测试',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'eey32-344',
assetName: '测试资产7',
assetClassify: '设备',
type: '空闲',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'wry43-324',
assetName: '测试资产2',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
},
{
assetNum: 'cto-34u24',
assetName: '测试资产2',
assetClassify: '服务器',
type: '在用',
editTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss')
}
],
tableData1: [
{
assetNum: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '在用'
},
{
assetNum: '2',
assetName: '测试资产2',
assetClassify: '设备',
assetType: '空闲'
},
{
assetNum: '3',
assetName: '测试资产3',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '4',
assetName: '测试资产4',
assetClassify: '服务器',
assetType: '空闲'
},
{
assetNum: '5',
assetName: '测试资产5',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '6',
assetName: '测试资产6',
assetClassify: '设备',
assetType: '在用'
},
{
assetNum: '7',
assetName: '测试资产7',
assetClassify: '摄像机',
assetType: '空闲'
},
{
assetNum: '8',
assetName: '测试资产8',
assetClassify: '摄像机',
assetType: '在用'
},
{
assetNum: '9',
assetName: '测试资产9',
assetClassify: '服务器',
assetType: '在用'
},
{
assetNum: '10',
assetName: '测试资产10',
assetClassify: '摄像机',
assetType: '空闲'
}
],
activeNames: ['1', '2', '3'],
activeNames1: ['1'],
currentPage: 1, // 当前页码
total: 20, // 总条数
pageSize: 10, // 每页的数据条数
updateAsset: false,
assetForm: {
assetName: '',
classify: 1,
ownDepartment: 1,
usePer: '',
ownerPer: '',
editEndTime: '',
edit: '',
QRCode: '',
assetNum: 'cty-34324',
ownCompany: 1,
editStartTime: '',
buyTime: '',
serialNumber: ''
},
assetForm1: {
brand: '',
devName: '',
projectTime: '',
devUBit: '',
manIPAdderss: '',
MACAdderss: '',
model: '',
devUse: '',
machineRoom: '',
thingIPAddress: '',
oprSysLevel: ''
},
assetForm2: {
inputCleanUpNum: '',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
},
assetList1: [
{
value: 1,
label: '在用'
}
],
assetList2: [
{
value: 1,
label: '默认公司'
}
],
addAsset: false
}
},
methods: {
saveForExcel() {},
moreMess() {},
updateRow() {
this.updateAsset = true
},
finishRow() {
this.addAsset = true
},
outTabRow() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.currentPage = 1
this.pageSize = val
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
this.currentPage = val
},
closeAssetDialog() {
this.updateAsset = false
},
closeAssetDialog1() {
this.addAsset = false
}
}
}
</script>
<style lang="scss">
.cleanUpModule {
.cleanUpHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.cleanUpBtns {
float: right;
.headBtn {
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.cleanUpBody {
padding: 15px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment