Commit a0b208a1 authored by 秦嘉's avatar 秦嘉

资产管理清理报废页面和资产盘点页面

parent a66c1937
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">资产清理报废</span>
<div class="cleanUpBtns">
<el-button class="headBtn" @click="addCleanUp">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="报废单号">
<template slot-scope="scope">
<el-link @click="queryCleanUp(scope.row)">{{scope.row.cleanUpId}}</el-link>
</template>
</el-table-column>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip />
<el-table-column label="资产分类" prop="assetType" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="登记时间" prop="registerTime" show-overflow-tooltip />
<el-table-column label="完成时间" prop="finishTime" show-overflow-tooltip />
<el-table-column label="变更说明" prop="changeIllustrate" show-overflow-tooltip />
<el-table-column label="处理人" prop="doPerson" show-overflow-tooltip width="80"/>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="finishRow(scope.row)">完成</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="cleanUpClass" width="50%" title="新增资产报废单" :visible.sync="addAssetDialog">
<el-form ref="cleanUpForm" label-width="auto" :model="cleanUpForm">
<span>基本信息</span>
<el-divider></el-divider>
<el-form-item label="报废单号:">
<el-input
v-model="cleanUpForm.inputCleanUpNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="登记时间:">
<div class="pickBody">
<el-date-picker
v-model="cleanUpForm.doTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人:">
<el-input
v-model="cleanUpForm.inputFinishPer">
</el-input>
</el-form-item>
<el-form-item label="提交人:">
<el-input
v-model="cleanUpForm.submitPer">
</el-input>
</el-form-item>
<el-form-item label="报废说明:">
<el-input
type="textarea"
:rows="2"
v-model="cleanUpForm.inputCleanUpMen">
</el-input>
</el-form-item>
<span>
<el-button type="primary" @click="chooseAssetDialog">选择资产</el-button>
<el-button @click="deleteAssetTab(tempTableData1.map(i => i.id))">删除</el-button>
</span>
<el-divider></el-divider>
<el-table
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange1">
<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>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">保存</el-button>
<el-button @click="closeAssetDialog">放弃</el-button>
</span>
</el-dialog>
<el-dialog class="cleanUpClass1" width="50%" title="基本信息" :visible.sync="nomalMessDialog">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="用户管理" name="first">
<el-form ref="cleanUpForm1" label-width="auto" :model="cleanUpForm1">
<el-form-item label="报废单号:">
{{cleanUpForm1.inputCleanUpNum}}
</el-form-item>
<el-form-item label="登记时间:">
{{cleanUpForm1.doTime}}
</el-form-item>
<el-form-item label="处理人:">
{{cleanUpForm1.inputFinishPer}}
</el-form-item>
<el-form-item label="提交人:">
{{cleanUpForm1.submitPer}}
</el-form-item>
<el-form-item label="报废说明:">
{{cleanUpForm1.inputCleanUpMen}}
</el-form-item>
<el-divider></el-divider>
<el-table
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%">
<el-table-column
prop="assetID"
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>
</el-form>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog1">确认</el-button>
<el-button @click="closeAssetDialog1">取消</el-button>
</span>
</el-dialog>
<el-dialog class="cleanUpClass2" width="50%" title="选择资产" :visible.sync="chooseAsset">
<el-row>
<el-col :span="7" style="border-right: 2px solid #DCDFE6">
<el-tabs >
<el-tab-pane label="资产类别">
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"></el-tree>
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="17">
<el-table
:data="tableData3"
border
style="width: 100%;padding-top: 20px"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="资产名称" prop="assetName" show-overflow-tooltip />
<el-table-column label="资产编号" prop="assetNum" show-overflow-tooltip />
<el-table-column label="状态" prop="assetType" show-overflow-tooltip width="50"/>
</el-table>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveAssetDialog2">保存</el-button>
<el-button @click="closeAssetDialog2">放弃</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
data: [
{
id: 1,
label: '服务器'
}, {
id: 2,
label: '网络'
}, {
id: 3,
label: '测试资产',
children: [
{
id: 31,
label: '二级3-1',
children: [
{
id: 311,
label: '三级3-1-1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
activeName: 'first',
tempAssetClassify: '',
tableData1: [
{
assetNum: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '空闲'
}
],
tableData2: [
{
assetID: '1',
assetName: '测试资产1',
assetClassify: '服务器',
assetType: '空闲'
}
],
tableData3: [
{
assetName: '',
assetNum: '',
assetClassify: '',
assetType: ''
}
],
tableData: [
{
cleanUpId: 'qj-123456',
name: '测试资产',
assetType: 'test',
type: '完成',
registerTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss'),
finishTime: '',
changeIllustrate: '',
doPerson: '张三'
}
],
tempData: [
{
assetName: 'test',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'acd',
assetNum: 'zxw-12345',
assetType: '在用'
}, {
assetName: 'dvb',
assetNum: 'zzz-12345',
assetType: '在用'
}
],
tempData1: [
{
assetName: 'test',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'acd',
assetNum: 'zxw-12345',
assetType: '空闲'
}, {
assetName: 'dvb',
assetNum: 'zzz-12345',
assetType: '在用'
}, {
assetName: 'ghj',
assetNum: 'ldw-12345',
assetType: '空闲'
}, {
assetName: 'vbn',
assetNum: 'zrt-12345',
assetType: '空闲'
}, {
assetName: 'ccv',
assetNum: 'zsz-123d5',
assetType: '在用'
}
],
tempData2: [
{
assetName: '4td',
assetNum: 'qj-12345',
assetType: '在用'
}, {
assetName: 'gds',
assetNum: 'zxw-12345',
assetType: '在用'
}, {
assetName: 'dvb',
assetNum: 'wqd-32522',
assetType: '在用'
}, {
assetName: '4td',
assetNum: 'qdf-467754',
assetType: '在用'
}
],
tempTableData: [],
tempTableData1: [],
addAssetDialog: false,
nomalMessDialog: false,
chooseAsset: false,
cleanUpForm: {
inputCleanUpNum: 'qj-1111111',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
},
cleanUpForm1: {
inputCleanUpNum: 'qj-1111111',
doTime: '',
inputFinishPer: '',
submitPer: '',
inputCleanUpMen: ''
}
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
addCleanUp() {
this.tableData1 = []
this.addAssetDialog = true
},
closeAssetDialog() {
this.addAssetDialog = false
},
closeAssetDialog1() {
this.nomalMessDialog = false
},
queryCleanUp() {
this.nomalMessDialog = true
},
finishRow() {
this.$confirm('是否处理完成该资产?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
chooseAssetDialog() {
this.tableData3 = [
{
assetName: '',
assetNum: '',
assetClassify: '',
assetType: ''
}
]
this.chooseAsset = true
},
closeAssetDialog2() {
this.chooseAsset = false
},
saveAssetDialog2() {
this.chooseAsset = false
this.tableData1 = this.tempTableData
},
deleteAssetTab(idArr) {
this.tableData1 = this.tableData1.filter(i => !idArr.includes(i.id))
},
handleNodeClick(val) {
console.log(val)
this.tempAssetClassify = val.label
if (val.id === 31) {
this.tableData3 = this.tempData
} else if (val.id === 1) {
this.tableData3 = this.tempData1
} else if (val.id === 2) {
this.tableData3 = this.tempData2
} else {
this.tableData3 = []
}
},
handleSelectionChange(val) {
console.log(val)
val.forEach((ele, index) => {
ele.assetClassify = this.tempAssetClassify
ele.id = index
})
this.tempTableData = val
},
handleSelectionChange1(val) {
console.log(val)
this.tempTableData1 = val
}
}
}
</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>
<template>
<div id="container_max" class="cleanUpModule">
<div class="cleanUpHead">
<span style="font-size:24px;margin-right: 10px ">资产盘点</span>
<div class="cleanUpBtns">
<el-button class="headBtn" @click="addCleanUp">新增</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="cleanUpBody">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="盘点单号">
<template slot-scope="scope">
<el-link @click="queryCleanUp(scope.row)">{{scope.row.propertyId}}</el-link>
</template>
</el-table-column>
<el-table-column label="盘点单名称" prop="propertyName" show-overflow-tooltip />
<el-table-column label="盘点数量" prop="propertyNum" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip width="50"/>
<el-table-column label="创建时间" prop="registerTime" show-overflow-tooltip />
<el-table-column label="完成时间" prop="finishTime" show-overflow-tooltip />
<el-table-column label="盘点说明" prop="propertyIllustrate" show-overflow-tooltip />
<el-table-column label="处理人" prop="doPerson" show-overflow-tooltip width="80"/>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="finishRow(scope.row)">完成</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="cleanUpClass" width="50%" title="新增资产盘点单" :visible.sync="addAssetDialog">
<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="propertyForm">
<el-form-item label="盘点单号:">
<el-input
v-model="propertyForm.inputPropertyNum"
:disabled="true">
</el-input>
</el-form-item>
<el-form-item label="盘点单名称:">
<el-input
v-model="propertyForm.inputPropertyName">
</el-input>
</el-form-item>
<el-form-item label="盘点说明:">
<el-input
type="textarea"
:rows="2"
v-model="propertyForm.inputPropertyMen">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm" label-width="auto" :model="propertyForm">
<el-form-item label="盘点时间:">
<div class="pickBody">
<el-date-picker
v-model="propertyForm.propertyTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="处理人:">
<el-input
v-model="propertyForm.inputFinishPer">
</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-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="采购日期:">
<div class="block">
<el-date-picker
v-model="propertyForm1.value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="报废日期:">
<div class="block">
<el-date-picker
v-model="propertyForm1.value2"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<el-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="资产分类:">
<el-select v-model="propertyForm1.classification" 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 v-model="propertyForm1.depart" 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="propertyForm1.usePer"
style="width: 83%">
</el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="cleanUpForm1" label-width="auto" :model="propertyForm1">
<el-form-item label="所属公司:">
<el-select v-model="propertyForm1.company" placeholder="请选择">
<el-option
v-for="item in assetList3"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="拥有者:">
<el-input
v-model="propertyForm1.ownPer"
style="width: 83%">
</el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAssetDialog">提交</el-button>
</span>
</el-dialog>
<el-dialog
title="资产盘点单"
:visible.sync="nomalMessDialog"
width="50%">
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">新增盘盈</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'Index',
data() {
return {
activeNames: ['1', '2'],
activeName: 'first',
tableData: [
{
propertyId: 'qj-123456',
propertyName: '测试资产',
propertyNum: 'test',
type: '完成',
registerTime: moment(new Date()).format('YYYY-MM-DD HH-mm-ss'),
finishTime: '',
propertyIllustrate: '',
doPerson: '张三'
}
],
addAssetDialog: false,
nomalMessDialog: false,
chooseAsset: false,
propertyForm: {
inputPropertyNum: 'qj-1111111',
inputPropertyName: '',
inputPropertyMen: '',
inputFinishPer: '',
propertyTime: ''
},
propertyForm1: {
value1: '',
value2: '',
usePer: '',
ownPer: '',
classification: 1,
depart: 1,
company: 1
},
assetList1: [
{
value: 1,
label: '全部'
},
{
value: 2,
label: '服务器'
},
{
value: 3,
label: '网络'
},
{
value: 4,
label: '摄影机'
}
],
assetList2: [
{
value: 1,
label: '默认部门'
}
],
assetList3: [
{
value: 1,
label: '默认公司'
}
]
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
addCleanUp() {
this.addAssetDialog = true
},
closeAssetDialog() {
this.addAssetDialog = false
},
closeAssetDialog1() {
this.nomalMessDialog = false
},
queryCleanUp() {
this.nomalMessDialog = true
},
finishRow() {
this.$confirm('是否处理完成该资产?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
chooseAssetDialog() {
this.chooseAsset = true
},
closeAssetDialog2() {
this.chooseAsset = false
},
saveAssetDialog2() {
this.chooseAsset = 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