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

604 lines
20 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>
<el-button type="primary" @click="sendBack" class="fanhuipiaofu" size='mini'>返回</el-button>
<div class="teshu-top-info">
<div class="top-info">
<el-row class="top-row">
<el-col :span="8">
任务下发时间<span>{{ titleInfoObj.taskTime }}</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="16">
核查资产类型<span>{{ listTow.join(",") }}</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="7">
<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="7">
<el-form-item label="系统名称:">
<el-input v-model="formInline.xtmc" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<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-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="item.conent" :name="item.lable" :xtmcName="item.xtmcName"
v-for="item in chanckListTow"></el-tab-pane>
</el-tabs>
<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="xtmcName" 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="核查单位" prop="zcdwmc" align="center" />
<el-table-column label="单位核查时间" prop="updateTime" align="center" />
<el-table-column label="审核状态" width="200px" prop="status" class-name="table-status"
align="center">
<template slot-scope="scope">
<span v-if="scope.row.status == 0" style="color: #E6A23C;">
未核查
</span>
<span v-if="scope.row.status == 1" style="color: #67C23A;">
已核查
</span>
<span v-if="scope.row.status == 3" style="color: #67C23A;">
审核通过
</span>
<span v-if="scope.row.status == 4" style="color: #F56C6C;">
审核不通过
</span>
<span v-if="scope.row.status == 5" style="color: #F56C6C;">
已关停
</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)"
v-if="(scope.row.status != 4 && scope.row.status != 0) || ($route.query.pageType == 'look' || $route.meta.pageType == 'look')">
<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>
<!-- scope.row.status == 4 -->
<div style="display: flex;align-items: center;cursor: pointer;margin-left: 5px;"
@click="goInfo(3, scope.row)" v-show='scope.row.btgyy'>
<img src="@/assets/images/icon-ck@2x.png" alt="" style="width: 20px;margin-right: 5px;">
<span class="look-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" :src="returnidimg(item.assetName)" alt="">
<!-- <img class="main-img" v-if="item.status == 2" src="" alt="">
<img class="main-img" v-if="item.status == 3" src="" alt="">
<img class="main-img" v-if="item.status == 4" src="" 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">{{ item.assetName }}:</span>
<span class="span-time">{{ item.xfTime }}</span>
</div>
</div>
</div>
</div>
<my-dialog title="查看原因" ref="liebiaoDialog" @close="importClose" class="taskDialogBox" width="40%">
<el-descriptions>
<el-descriptions-item label="不通过原因">
{{ chakanyuanyin }}
</el-descriptions-item>
</el-descriptions>
</my-dialog>
</div>
</template>
<script>
import myPagination from "@/views/components/Pagination/index.vue"
import { getassetTaskid, geassetTaskcHc } from "@/api/renwuApi/index.js"
import { assetLcpage } from "@/api/renwuApi/index.js"
import myDialog from "@/views/components/myDialog/index.vue"
export default {
dicts: ['zc_xtlx'],
components: { myPagination, myDialog },
data() {
return {
index: 1,
formInline: {
},
formInlineTwo: {
unitName: "",
},
total: 0,
pagination: {
current: 1,
size: 10,
},
tableData: [
],
tableDataTwo: [
],
loading: false,
tabHeader: undefined,
timeLineData: [],
titleInfoObj: {},
chakanyuanyin: "",
activeName: "0",
xtmcName: "系统名称",
chanckList: [
{
lable: "0",
conent: "web资产",
xtmcName: "系统名称",
},
{
lable: "1",
conent: "小程序资产",
xtmcName: "小程序名称",
},
{
lable: "2",
conent: "公众号资产",
xtmcName: "公众号名称",
},
{
lable: "3",
conent: "电子邮件资产",
xtmcName: "电子邮箱后缀",
},
{
lable: "4",
conent: "移动应用程序资产",
xtmcName: "移动应用程序名称",
},
],
chanckListTow: [],
listTow: [],
}
},
mounted() {
this.cancalDebounce();
window.addEventListener('resize', this.cancalDebounce);
this.titleInfo()
this.assetLcpageList()
if (localStorage.getItem('ismypaginationTow')) {
console.log(JSON.parse(localStorage.getItem('ismypaginationTow')));
if (JSON.parse(localStorage.getItem('ismypaginationTow')).isfanhuiTow) {
this.formInline = JSON.parse(localStorage.getItem('ismypaginationTow'))
console.log(99999, this.formInline);
this.titleInfo()
} else {
console.log(99999, this.formInline);
localStorage.removeItem("ismypaginationTow")
}
}
},
destroyed() {
window.removeEventListener('resize', this.cancalDebounce);
},
methods: {
sendBack() {
if (localStorage.getItem('ismypagination')) {
let formInline = JSON.parse(localStorage.getItem('ismypagination'))
formInline.isfanhui = true
localStorage.setItem("ismypagination", JSON.stringify(formInline))
}
this.$router.go(-1);
},
handleClick(tab, event) {
console.log(tab.name);
// this.formInline = {
// }
this.activeName = tab.name
this.xtmcName = tab.$attrs.xtmcName
localStorage.setItem("activeName", this.activeName)
this.handleQuery()
},
//返回图片
returnidimg(iswenzi) {
// let obj = {
// '下发':require('@/assets/images/rwxf.png'),
// "提交":require('@/assets/images/wctj.png'),
// "驳回,不通过":require('@/assets/images/shbh.png'),
// "审核通过":require('@/assets/images/shtg.png'),
// }
let listsna = [
{
name: "下发",
imgdata: require('@/assets/images/rwxf.png'),
}, {
name: "提交",
imgdata: require('@/assets/images/wctj.png'),
}, {
name: "不通过",
imgdata: require('@/assets/images/shbh.png'),
}, {
name: "审核通过",
imgdata: require('@/assets/images/shtg.png'),
}, {
name: "驳回",
imgdata: require('@/assets/images/shbh.png'),
}
]
let item = listsna.find(item => iswenzi.includes(item.name))
if (item) {
return item.imgdata
} else {
return require('@/assets/images/wctj.png')
}
},
assetLcpageList() {
let obj = {
taskId: this.$route.query.id || this.$route.meta.id
}
assetLcpage(obj).then(res => {
this.timeLineData = res.data
})
},
importClose() { },
goInfo(type, row) {
// 查看
if (type == 1) {
this.$router.push({
name: 'mytaskAuditInfo', query: {
pageType: "look",
taskId: row.taskId,
assetId: row.id,
type: this.activeName,
}
})
}
//审核
if (type == 2) {
this.$router.push({
name: 'mytaskAuditInfo', query: {
pageType: "change",
taskId: row.taskId,
assetId: row.id,
type: this.activeName,
}
})
}
//查看不通过原因
if (type == 3) {
this.chakanyuanyin = row.btgyy
this.$refs.liebiaoDialog.open()
}
// getassetTaskid(row.id)
},
taskstatus(id) {
if (id) {
let obj = {
0: "已关闭",
1: "进行中",
2: "正常完成", 3: "超期完成", 4: "正常完成", 5: "审核驳回"
}
return obj[id]
} else {
return "-"
}
},
//根据传入的类型,去分发状态
titleInfoObjtype(type = "0,1") {
console.log(type);
let list = type.split(",")
//顶部展示
this.listTow = []
//tab的分页状态
this.chanckListTow = []
this.chanckList.forEach(res => {
list.forEach(element => {
if (element == res.lable) {
this.listTow.push(res.conent)
this.chanckListTow.push(res)
}
});
})
//tab的下标
this.activeName = this.chanckListTow[0].lable
if (localStorage.getItem("activeName")) {
this.activeName = localStorage.getItem("activeName")
localStorage.setItem("activeName", this.activeName)
}
//动态列表
let listname = this.chanckListTow.filter(item => item.lable == this.activeName)
if (listname) {
this.xtmcName = listname[0].xtmcName
}
this.handleQuery();
},
titleInfo() {
getassetTaskid(this.$route.query.id || this.$route.meta.id).then(res => {
if (res.code == 200) {
this.titleInfoObj = res.data
// this.$set(this.titleInfoObj,'type',"0,1")
this.titleInfoObjtype(this.titleInfoObj.type)
}
})
},
// 重置
resetQuery() {
this.activeName = this.chanckListTow[0].lable
this.pagination = {
current: 1,
size: 10,
type: this.activeName,
}
if (this.index == 1) {
this.formInline = {
type: this.activeName,
}
localStorage.removeItem("ismypaginationTow")
this.getList();
} else if (this.index == 2) {
this.formInlineTwo = {
unitName: "",
}
this.getListTwo();
}
},
// 查询
handleQuery() {
this.pagination = {
current: 1,
size: 10,
type: this.activeName,
}
if (this.index == 1) {
this.pagination = { ...this.pagination, ...this.formInline };
this.formInline.isfanhuiTow = false
console.log(77777, this.formInline);
console.log(88888, this.pagination);
localStorage.setItem("ismypaginationTow", JSON.stringify(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
// this.pagination.dwmc = this.$route.query.dwmc || this.$route.meta.dwmc
this.pagination.type = this.activeName
if (this.$store.state.user.roles.includes("unit")) {
this.pagination.dwmc = this.$store.state.user.useer.nickName
}
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 - 160;
}
},
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>
<style lang="scss" scoped>
::v-deep .el-timeline {
padding-left: 0;
font-size: 12px;
}
::v-deep .el-form-item__label {
padding-right: 3px;
}
.look-info {}
::v-deep .el-dialog {
margin-top: 20vh !important;
}
.content-info {
position: relative;
}
.fanhuipiaofu {
position: absolute;
right: 20px;
top: 10px;
}
</style>