You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
TcAssetVerificationPc/src/views/unitPages/myTask/auditList.vue

219 lines
7.5 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="audit-pages-box audit-pages-box-two" id="L-size-main">
<div class="content-info content-info-two" id="L-header">
<div class="info-title">任务信息</div>
<div class="top-info">
<el-row class="top-row">
<el-col :span="8">
任务编号<span>20240101001</span>
</el-col>
<el-col :span="8">
任务名称<span>XXXXX资产核查任务</span>
</el-col>
<el-col :span="8">
任务状态<span>待审核</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
任务期限<span>2024-11-11 09:00:00</span>
</el-col>
<el-col :span="8">
任务下发时间<span>2024-11-11 09:00:00</span>
</el-col>
</el-row>
</div>
</div>
<main class="renwuxiangqing">
<div class="info-cut-off-rule-my" id="L-tab">
<div class="info-title">资产核查</div>
</div>
<div class="info-bottom-box">
<el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
<el-row>
<el-col :span="7">
<el-form-item label="资产名称:">
<el-input v-model="formInline.name" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="核查单位:">
<el-select v-model="formInline.unit" placeholder="请选择">
<el-option label="item.label" value="item.value">
</el-option>
<!-- <el-option
v-for="dict in dict.type.bms_approval_status"
:key="dict.value"
:label="dict.label"
:value="dict.value">
</el-option> -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="审核状态:">
<el-select v-model="formInline.status" placeholder="请选择">
<el-option label="item.label" value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item>
<el-button size="mini" type="primary" @click="handleQuery()"></el-button>
<el-button size="mini" @click="resetQuery()"></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<section>
<el-table v-loading="loading" :data="tableData" :height="tabHeader" :max-height="tabHeader" :row-class-name="tableRowClassName">
<el-table-column type="index" width="50" label="序号" align="center"/>
<el-table-column label="资产编号" key="number" width="200px" prop="number" align="center" />
<el-table-column label="资产名称" key="name" prop="name" align="center" />
<el-table-column label="资产类型" key="type" prop="type" align="center">
<!-- <template slot-scope="scope">
<dict-tag :options="dict.type.project_middle_type" :value="scope.row.projectMiddleType"/>
</template> -->
</el-table-column>
<el-table-column label="核查单位" key="unit" prop="unit" align="center" />
<el-table-column label="审核状态" key="status" width="200px" prop="status" class-name="table-status" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status === 0" style="color: #a4c86c;">
已核查
</span>
<span v-if="scope.row.status === 1" style="color: #F43147;">
已报废
</span>
<span v-if="scope.row.status === 2" style="color: #F59A23;">
未核查
</span>
</template>
</el-table-column>
<el-table-column label="操作" prop="userId" class-name="table-operation" align="center">
<template slot-scope="scope">
<span class="look-info" @click="goAudit(scope.row)" style="color: #192A92;cursor: pointer;" v-if="scope.row.status == 2"></span>
<span class="look-info" @click="goInfo(scope.row)" style="color: #192A92;cursor: pointer;" v-else></span>
</template>
</el-table-column>
</el-table>
</section>
<my-pagination
id="L-pagination"
:total="total"
:page="pagination.current"
:limit="pagination.size"
@pagination="getPagination"
:current-page.sync="pagination.current"
></my-pagination>
</div>
</main>
</div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
export default {
components:{myPagination},
data() {
return {
formInline:{
unit:"",
type:"",
status:"",
},
total:0,
pagination:{
current:1,
size:10,
},
tableData:[
{
number:20230001,
name:"XXX资产",
type:"1类资产",
unit:"太仓市XXX局",
status:0,
},{
number:20230001,
name:"XXX资产",
type:"1类资产",
unit:"太仓市XXX局",
status:1,
},{
number:20230001,
name:"XXX资产",
type:"1类资产",
unit:"太仓市XXX局",
status:2,
},
],
loading:false,
tabHeader: undefined,
}
},
mounted(){
this.getList();
this.cancalDebounce();
window.addEventListener('resize', this.cancalDebounce);
},
destroyed() {
window.removeEventListener('resize', this.cancalDebounce);
},
methods:{
// 重置
resetQuery(){
this.pagination = {
current: 1,
size: 10,
}
this.formInline = {
unit:"",
type:"",
status:"",
}
this.getList();
},
// 查询
handleQuery(){
this.pagination = {
current: 1,
size: 10,
}
this.pagination = { ...this.pagination,...this.formInline };
this.getList();
},
// 获取页码
getPagination(){
this.pagination.current = pages.page;
this.pagination.size = pages.limit;
this.getList();
},
goAudit(){
this.$router.push({name: 'mytaskAuditInfo',query: {
pageType: "info",
}})
},
getList(){},
// 修改table背景色
tableRowClassName({row, rowIndex}){
if (rowIndex % 2 !== 0) {
return 'evenNumber-row';
}
return '';
},
// 屏幕尺寸变化
cancalDebounce(){
const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
const tab = document.getElementById('L-tab'); // 通过元素的 ID 获取元素
const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
const elementHeight = element.offsetHeight;
const headerHeight = header.offsetHeight;
const tabHeight = tab.offsetHeight;
const paginationtHeight = pagination.offsetHeight;
this.tabHeader = elementHeight - headerHeight - paginationtHeight - tabHeight - 140;
}
},
}
</script>