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.

698 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"
>返回</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="default"
class="demo-form-inline"
v-if="index === 1"
>
<el-row>
<el-col :span="7">
<el-form-item
label="系统名称:"
style="width: 95%"
>
<el-input
v-model="formInline.xtmc"
placeholder="请输入"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="审核状态:"
style="width: 95%"
>
<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="7">
<el-form-item>
<el-button
type="primary"
@click="handleQuery"
>查询</el-button
>
<el-button @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form
:inline="true"
:model="formInlineTwo"
size="default"
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-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button
type="primary"
@click="handleQuery"
>查询</el-button
>
<el-button @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
v-for="item in chanckListTow"
:key="item.lable"
:label="item.conent"
:name="item.lable"
:xtmcName="item.xtmcName"
></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="70"
label="序号"
align="center"
/>
<el-table-column
:label="xtmcName"
prop="xtmc"
align="center"
/>
<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 #default="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 #default="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>
<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
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"
v-model:current-page="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"
:key="index"
>
<div class="left-box">
<img
class="main-img"
:src="returnidimg(item.assetName)"
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 setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import myPagination from "@/views/components/Pagination/index.vue";
import myDialog from "@/views/components/myDialog/index.vue";
import {
getassetTaskid,
geassetTaskcHc,
assetLcpage,
} from "@/api/renwuApi/index.js";
const route = useRoute();
const router = useRouter();
const index = ref(1);
const formInline = reactive({});
const formInlineTwo = reactive({ unitName: "" });
const total = ref(0);
const pagination = ref({
current: 1,
size: 10,
});
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);
const timeLineData = ref([]);
const titleInfoObj = reactive({});
const chakanyuanyin = ref("");
const activeName = ref("0");
const xtmcName = ref("系统名称");
const chanckList = [
{ lable: "0", conent: "web资产", xtmcName: "系统名称" },
{ lable: "1", conent: "小程序资产", xtmcName: "小程序名称" },
{ lable: "2", conent: "公众号资产", xtmcName: "公众号名称" },
{ lable: "3", conent: "电子邮件资产", xtmcName: "电子邮箱后缀" },
{ lable: "4", conent: "移动应用程序资产", xtmcName: "移动应用程序名称" },
];
const chanckListTow = ref([]);
const listTow = ref([]);
function sendBack() {
if (localStorage.getItem("ismypagination")) {
let formInline = JSON.parse(localStorage.getItem("ismypagination"));
formInline.isfanhui = true;
localStorage.setItem("ismypagination", JSON.stringify(formInline));
}
router.go(-1);
}
function handleClick(tab) {
activeName.value = tab.props.name;
// 通过 activeName 查找 xtmcName
const current = chanckListTow.value.find(item => item.lable === activeName.value);
xtmcName.value = current ? current.xtmcName : "系统名称";
localStorage.setItem("activeName", activeName.value);
handleQuery();
}
const returnidimg = (iswenzi) => {
const listsna = [
{
name: "下发",
imgdata: new URL("@/assets/images/rwxf.png", import.meta.url).href,
},
{
name: "提交",
imgdata: new URL("@/assets/images/wctj.png", import.meta.url).href,
},
{
name: "不通过",
imgdata: new URL("@/assets/images/shbh.png", import.meta.url).href,
},
{
name: "审核通过",
imgdata: new URL("@/assets/images/shtg.png", import.meta.url).href,
},
{
name: "驳回",
imgdata: new URL("@/assets/images/shbh.png", import.meta.url).href,
},
];
const item = listsna.find((item) => iswenzi.includes(item.name));
return item
? item.imgdata
: new URL("@/assets/images/wctj.png", import.meta.url).href;
};
function assetLcpageList() {
let obj = {
taskId: route.query.id || route.meta.id,
};
assetLcpage(obj).then((res) => {
timeLineData.value = res.data;
});
}
function importClose() {}
const liebiaoDialog = ref();
function goInfo(type, row) {
if (type == 1) {
router.push({
name: "mytaskAuditInfo",
query: {
pageType: "look",
taskId: row.taskId,
assetId: row.id,
type: activeName.value,
},
});
}
if (type == 2) {
router.push({
name: "WebZC-info",
query: {
pageType: "change",
taskId: row.taskId,
assetId: row.id,
type: activeName.value,
},
});
}
if (type == 3) {
chakanyuanyin.value = row.btgyy;
liebiaoDialog.value.open();
}
}
function taskstatus(id) {
if (id !== undefined && id !== null) {
let obj = {
0: "已关闭",
1: "进行中",
2: "正常完成",
3: "超期完成",
4: "正常完成",
5: "审核驳回",
};
return obj[id];
} else {
return "-";
}
}
// 根据传入的类型,去分发状态
function titleInfoObjtype(type = "0,1") {
let list = type.split(",");
listTow.value = [];
chanckListTow.value = [];
chanckList.forEach((res) => {
list.forEach((element) => {
if (element == res.lable) {
listTow.value.push(res.conent);
chanckListTow.value.push(res);
}
});
});
activeName.value = chanckListTow.value[0]?.lable || "0";
if (localStorage.getItem("activeName")) {
activeName.value = localStorage.getItem("activeName");
localStorage.setItem("activeName", activeName.value);
}
let listname = chanckListTow.value.filter(
(item) => item.lable == activeName.value
);
if (listname.length) {
xtmcName.value = listname[0].xtmcName;
}
console.log('titleInfoObjtype:', {
activeName: activeName.value,
xtmcName: xtmcName.value,
chanckListTow: chanckListTow.value,
listname,
});
handleQuery();
}
function titleInfo() {
getassetTaskid(route.query.id || route.meta.id).then((res) => {
if (res.code == 200) {
Object.assign(titleInfoObj, res.data);
titleInfoObjtype(titleInfoObj.type);
}
});
}
// 重置
function resetQuery() {
activeName.value = chanckListTow.value[0]?.lable || "0";
xtmcName.value = "系统名称";
pagination.value = {
current: 1,
size: 10,
type: activeName.value,
};
if (index.value === 1) {
Object.assign(formInline, { type: activeName.value });
localStorage.removeItem("ismypaginationTow");
getList();
} else if (index.value === 2) {
Object.assign(formInlineTwo, { unitName: "" });
getListTwo();
}
}
// 查询
function handleQuery() {
pagination.value = {
current: 1,
size: 10,
type: activeName.value,
};
if (index.value === 1) {
Object.assign(pagination.value, formInline);
formInline.isfanhuiTow = false;
localStorage.setItem("ismypaginationTow", JSON.stringify(formInline));
getList();
} else if (index.value === 2) {
getListTwo();
}
}
// 获取页码
function getPagination(pages) {
pagination.value.current = pages.page;
pagination.value.size = pages.limit;
if (index.value === 1) {
getList();
} else if (index.value === 2) {
getListTwo();
}
}
// 切换tab
function activeTab(id) {
index.value = id;
if (id === 1) {
Object.assign(formInline, { unit: "", type: "", status: "" });
getList();
} else {
Object.assign(formInlineTwo, { unitName: "" });
getList();
}
}
function getList() {
loading.value = true;
pagination.value.taskId = route.query.id || route.meta.id;
pagination.value.type = activeName.value;
// 这里需要根据你的store实现方式调整
// if (store.state.user.roles.includes('unit')) {
// pagination.value.dwmc = store.state.user.useer.nickName
// }
geassetTaskcHc(pagination.value).then((res) => {
tableData.value = res.data.records;
loading.value = false;
total.value = res.data.total;
});
}
function getListTwo() {}
function tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "evenNumber-row";
}
return "";
}
// 屏幕尺寸变化
function cancalDebounce() {
nextTick(() => {
const element = document.getElementById("L-size-main");
const header = document.getElementById("L-header");
const tab = document.getElementById("L-tab");
const paginationEl = document.getElementById("L-pagination");
if (!element || !header || !tab || !paginationEl) return;
const elementHeight = element.offsetHeight;
const headerHeight = header.offsetHeight;
const paginationtHeight = paginationEl.offsetHeight;
const tabHeight = tab.offsetHeight;
tabHeader.value =
elementHeight - headerHeight - paginationtHeight - tabHeight - 160;
});
}
onMounted(() => {
cancalDebounce();
window.addEventListener("resize", cancalDebounce);
titleInfo();
assetLcpageList();
if (localStorage.getItem("ismypaginationTow")) {
const temp = JSON.parse(localStorage.getItem("ismypaginationTow"));
if (temp.isfanhuiTow) {
Object.assign(formInline, temp);
titleInfo();
} else {
localStorage.removeItem("ismypaginationTow");
}
}
});
onBeforeUnmount(() => {
window.removeEventListener("resize", cancalDebounce);
});
</script>
<style lang="scss" scoped>
:deep(.el-timeline) {
padding-left: 0;
font-size: 12px;
}
:deep(.el-form-item__label) {
padding-right: 3px;
}
:deep(.el-dialog) {
margin-top: 20vh !important;
}
.content-info {
position: relative;
}
.fanhuipiaofu {
position: absolute;
right: 20px;
top: 10px;
}
</style>