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/info.vue

404 lines
14 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="L-task-info">
<div class="info-left info-left-two" id="L-size-main">
<div class="content-info content-info-two" id="L-header">
<div class="info-title">任务详情</div>
<div class="teshu-top-info">
<div class="top-info">
<el-row class="top-row">
<el-col :span="8">
任务编号<span>{{ titleInfoObj.id }}</span>
</el-col>
<el-col :span="8">
任务名称<span>{{ titleInfoObj.taskName }}</span>
</el-col>
<el-col :span="8">
任务状态<span>{{ taskstatus(titleInfoObj.taskStatus) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
任务期限<span>{{ titleInfoObj.taskDeadline }}</span>
</el-col>
<el-col :span="8">
任务下发时间<span>{{ titleInfoObj.taskTime }}</span>
</el-col>
</el-row>
</div>
</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" v-if="index == 1">
<el-row>
<el-col :span="8">
<el-form-item label="核查单位:">
<el-input v-model="formInline.dwmc" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="系统类型:">
<el-select v-model="formInline.xtlx" placeholder="请选择">
<el-option v-for="dict in dict.type.zc_xtlx" :key="dict.label" :label="dict.label"
:value="dict.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="审核状态:">
<el-select v-model="formInline.status" placeholder="请选择">
<el-option label="未核查" value="0">
</el-option>
<el-option label="已核查" value="1">
</el-option>
<el-option label="审核通过" value="3">
</el-option>
<el-option label="审核不通过" value="4">
</el-option>
<el-option label="已报废" value="5">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<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>
<el-form :inline="true" :model="formInlineTwo" size="small" class="demo-form-inline" v-if="index == 2">
<el-row>
<el-col :span="7">
<el-form-item label="单位名称:">
<el-input v-model="formInlineTwo.unitName" placeholder="请输入"></el-input>
<!-- <el-select v-model="formInline.unit" placeholder="请选择"> -->
<!-- <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="4">
<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 v-if="index == 1">
<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="id" width="200px" prop="id" align="center" /> -->
<el-table-column label="系统名称" key="xtmc" prop="xtmc" align="center" />
<el-table-column label="系统类型" key="xtlx" prop="xtlx" align="center">
<template slot-scope="scope">
<dict-tag :options="dict.type.zc_xtlx" :value="scope.row.xtlx" />
</template>
</el-table-column>
<el-table-column label="核查单位" key="zcdwmc" prop="zcdwmc" 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: #F59A23;">
未核查
</span>
<span v-if="scope.row.status == 1" style="color: #00FF00;">
已核查
</span>
<span v-if="scope.row.status == 3" style="color: #00FF00;">
审核通过
</span>
<span v-if="scope.row.status == 4" style="color: #C51717;">
审核不通过
</span>
<span v-if="scope.row.status == 5" style="color: #C51717;">
已报废
</span>
</template>
</el-table-column>
<el-table-column label="操作" prop="userId" class-name="table-operation" align="center">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: center;">
<div style="display: flex;align-items: center;cursor: pointer;" @click="goInfo(1,scope.row)">
<img src="@/assets/images/icon-ck@2x.png" alt="" style="width: 20px;margin-right: 5px;">
<span class="look-info"
style="color: #1485EF;">查看</span>
</div>
<!-- v-if="scope.row.taskStatus == 1" -->
<div v-if="($route.query.pageType == 'info' || $route.meta.pageType == 'info') && scope.row.status != 3&& scope.row.status != 5&&scope.row.status != 1" style="display: flex;align-items: center;cursor: pointer;margin-left: 10px;" @click="goInfo(2,scope.row)">
<img src="@/assets/images/icon-shenhe@2x.png" alt="" style="width: 15px;margin-right: 5px;">
<span class="del-info"
style="color: #1485EF;">核查</span>
</div>
</div>
</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>
<div class="info-right" v-if="$route.query.pageType == 'look' || $route.meta.pageType == 'look'">
<div class="info-title">任务流程节点</div>
<div class="timeline">
<div class="timeline-items" v-for="(item,index) in timeLineData">
<div class="left-box">
<img class="main-img" v-if="item.status == 1" src="@/assets/images/rwxf.png" alt="">
<img class="main-img" v-if="item.status == 2" src="@/assets/images/wctj.png" alt="">
<img class="main-img" v-if="item.status == 3" src="@/assets/images/shbh.png" alt="">
<img class="main-img" v-if="item.status == 4" src="@/assets/images/shtg.png" alt="">
<img class="icon-jt" v-if="(index + 1) != timeLineData.length" src="@/assets/images/icon-jt@2x.png" alt="">
</div>
<div class="right-box">
<span class="span-title" v-if="item.status == 1">管理员任务下发:</span>
<span class="span-title" v-if="item.status == 2">单位核查完成提交:</span>
<span class="span-title" v-if="item.status == 3">管理员审核驳回:</span>
<span class="span-title" v-if="item.status == 4">管理员审核通过:</span>
<span class="span-time">{{ item.timestamp }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
import { getassetTaskid, geassetTaskcHc } from "@/api/renwuApi/index.js"
export default {
dicts: ['zc_xtlx'],
components: { myPagination },
data() {
return {
index: 1,
formInline: {
},
formInlineTwo: {
unitName: "",
},
total: 0,
pagination: {
current: 1,
size: 10,
},
tableData: [
],
tableDataTwo: [
],
loading: false,
tabHeader: undefined,
timeLineData: [{
status: 1,
timestamp: '2024-11-11 17:00:00'
}, {
status: 2,
timestamp: '2024-11-11 17:00:00'
}, {
status: 3,
timestamp: '2024-11-11 17:00:00'
}, {
status: 2,
timestamp: '2024-11-11 17:00:00'
}, {
status: 4,
timestamp: '2024-11-11 17:00:00'
}, {
status: 2,
timestamp: '2024-11-11 17:00:00'
}, {
status: 4,
timestamp: '2024-11-11 17:00:00'
}, {
status: 2,
timestamp: '2024-11-11 17:00:00'
}, {
status: 4,
timestamp: '2024-11-11 17:00:00'
}, {
status: 2,
timestamp: '2024-11-11 17:00:00'
}, {
status: 4,
timestamp: '2024-11-11 17:00:00'
}],
titleInfoObj: {}
}
},
mounted() {
this.getList();
this.cancalDebounce();
window.addEventListener('resize', this.cancalDebounce);
this.titleInfo()
},
destroyed() {
window.removeEventListener('resize', this.cancalDebounce);
},
methods: {
goInfo(type, row) {
// 查看
if (type == 1) {
this.$router.push({
name: 'mytaskAuditInfo', query: {
pageType: "look",
taskId: row.taskId,
assetId:row.id
}
})
}
//审核
if (type == 2) {
this.$router.push({
name: 'mytaskAuditInfo', query: {
pageType: "change",
taskId: row.taskId,
assetId:row.id
}
})
}
// getassetTaskid(row.id)
},
taskstatus(id) {
if (id) {
let obj = {
1: "进行中",
2: "正常完成", 3: "超期完成", 4: "正常完成", 5: "审核驳回"
}
return obj[id]
} else {
return "-"
}
},
titleInfo() {
getassetTaskid(this.$route.query.id || this.$route.meta.id).then(res => {
if (res.code == 200) {
this.titleInfoObj = res.data
}
})
},
// 重置
resetQuery() {
this.pagination = {
current: 1,
size: 10,
}
if (this.index == 1) {
this.formInline = {
}
this.getList();
} else if (this.index == 2) {
this.formInlineTwo = {
unitName: "",
}
this.getListTwo();
}
},
// 查询
handleQuery() {
this.pagination = {
current: 1,
size: 10,
}
if (this.index == 1) {
this.pagination = { ...this.pagination, ...this.formInline };
this.getList();
} else if (this.index == 2) {
this.getListTwo();
}
},
// 获取页码
getPagination(pages) {
this.pagination.current = pages.page;
this.pagination.size = pages.limit;
if (this.index == 1) {
this.getList();
} else if (this.index == 2) {
this.getListTwo();
}
},
// 切换tab
activeTab(id) {
this.index = id
if (id == 1) {
this.formInline = {
unit: "",
type: "",
status: "",
}
this.getList();
} else {
this.formInlineTwo = {
unitName: "",
}
this.getList();
}
},
getList() {
this.loading = true
this.pagination.taskId = this.$route.query.id || this.$route.meta.id
geassetTaskcHc(this.pagination).then(res => {
this.tableData = res.data.records
this.loading = false
this.total = res.data.total
})
},
getListTwo() { },
// 修改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 paginationtHeight = pagination.offsetHeight;
const tabHeight = tab.offsetHeight;
this.tabHeader = elementHeight - headerHeight - paginationtHeight - tabHeight - 120;
}
},
beforeRouteEnter(to,from,next){
if(to.query.pageType == 'info') {
to.meta.title = '任务审核'
to.meta.pageType = to.query.pageType
to.meta.id = to.query.id
} else if(to.query.pageType == 'look') {
to.meta.title = '任务详情'
to.meta.pageType = to.query.pageType
to.meta.id = to.query.id
}
next();
},
}
</script>