feat: bug修复,审批右侧表格高亮展示

pull/19/head
刘释隆 1 year ago
parent 05c518ec67
commit ac5aeb5c05

@ -1,103 +1,103 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from 'vue' import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from "vue";
import { chunk, clone } from 'lodash-es' import { chunk, clone } from "lodash-es";
import { useDialog, useMessage } from 'naive-ui' import { useDialog, useMessage } from "naive-ui";
import { useRoute } from 'vue-router' import { useRoute } from "vue-router";
import BatchModal from '../modal/BatchModal.vue' import BatchModal from "../modal/BatchModal.vue";
import CustomSettingModal from '../modal/CustomSettingModal.vue' import CustomSettingModal from "../modal/CustomSettingModal.vue";
import PictureTable from './PictureTable.vue' import PictureTable from "./PictureTable.vue";
import TaskTable from './TaskTable.vue' import TaskTable from "./TaskTable.vue";
import History from './History.vue' import History from "./History.vue";
import NotPassed from '@/components/Approval/NotPassed.vue' import NotPassed from "@/components/Approval/NotPassed.vue";
import { getAllfieldList, getfieldList } from '@/api/home/filter' import { getAllfieldList, getfieldList } from "@/api/home/filter";
import { TASK_STATUS_OBJ } from '@/enums/index' import { TASK_STATUS_OBJ } from "@/enums/index";
import { audit, dubiousfileyd, getSimilarityList, getTaskDetailInfo } from '@/api/task/task' import {
import { useTask } from '@/store/modules/task' audit,
import { useUser } from '@/store/modules/user' dubiousfileyd,
import { isEmpty } from '@/utils' getSimilarityList,
import { formatToDateHMS } from '@/utils/dateUtil' getTaskDetailInfo,
import { hideDownload } from '@/utils/image' } from "@/api/task/task";
import { useTask } from "@/store/modules/task";
const batch = ref(false) import { useUser } from "@/store/modules/user";
const selectItems = ref<any[]>([]) import { isEmpty } from "@/utils";
const message = useMessage() import { formatToDateHMS } from "@/utils/dateUtil";
const dialog = useDialog() import { hideDownload } from "@/utils/image";
const notPassModalRef = ref(null)
const batchModalRef = ref(null) const batch = ref(false);
const totalCount = ref(0) const selectItems = ref<any[]>([]);
const taskId: any = ref('') // id const message = useMessage();
const packageId: any = ref('') // id const dialog = useDialog();
const CustomSettingModalRef = ref(null) const notPassModalRef = ref(null);
const taskTableData = ref<any[]>([]) const batchModalRef = ref(null);
const route = useRoute() const totalCount = ref(0);
const taskId: any = ref(""); // id
const packageId: any = ref(""); // id
const CustomSettingModalRef = ref(null);
const taskTableData = ref<any[]>([]);
const route = useRoute();
const sortBy: any = { const sortBy: any = {
orderType: 'desc', orderType: "desc",
orderName: 'similarityScore', orderName: "similarityScore",
} };
function setBatch(value: boolean) { function setBatch(value: boolean) {
if (totalCount.value === 0) if (totalCount.value === 0) return;
return
batch.value = value batch.value = value;
if (value === false) { if (value === false) {
selectItems.value.forEach(item => (item.checked = false)) selectItems.value.forEach((item) => (item.checked = false));
selectItems.value.length = 0 selectItems.value.length = 0;
selectItems.value.length = 0 selectItems.value.length = 0;
} }
} }
function onCheckChange(checked: any, item: any) { function onCheckChange(checked: any, item: any) {
const index = selectItems.value.indexOf(item) const index = selectItems.value.indexOf(item);
item.checked = checked item.checked = checked;
if (index === -1 && checked) if (index === -1 && checked) selectItems.value.push(item);
selectItems.value.push(item) else selectItems.value.splice(index, 1);
else selectItems.value.splice(index, 1)
} }
const showActions = computed(() => { const showActions = computed(() => {
return selectItems.value.length > 0 && batch return selectItems.value.length > 0 && batch;
}) });
const taskpagination = reactive({ const taskpagination = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}) });
const taskStore = useTask() const taskStore = useTask();
const overTask = ref<any>(null) const overTask = ref<any>(null);
const taskDetailInfo = ref<any>({}) const taskDetailInfo = ref<any>({});
const taskDetailPictureList = ref<any[]>([]) const taskDetailPictureList = ref<any[]>([]);
const userStore = useUser() const userStore = useUser();
const imageRef = ref<ComponentElRef | null>() const imageRef = ref<ComponentElRef | null>();
let processItems: any[] = [] let processItems: any[] = [];
onMounted(() => { onMounted(() => {
window.addEventListener('keydown', handleKeydown) window.addEventListener("keydown", handleKeydown);
if (route.query.id) { if (route.query.id) {
taskId.value = route.query.id taskId.value = route.query.id;
packageId.value = route.query.packageid packageId.value = route.query.packageid;
getDetail() getDetail();
} }
}) });
// //
function handleKeydown(event) { function handleKeydown(event) {
if (event.key === 'ArrowLeft') if (event.key === "ArrowLeft") backHandler();
backHandler()
// //
else if (event.key === 'ArrowRight') else if (event.key === "ArrowRight") forwardHandler();
forwardHandler()
// //
} }
// states:1234 // states:1234
function validate(items: any[]) { function validate(items: any[]) {
if (items.length === 0) if (items.length === 0) return "至少选中一个任务";
return '至少选中一个任务'
// const useInfo = userStore.getUserInfo // const useInfo = userStore.getUserInfo
// const username = useInfo.loginname // const username = useInfo.loginname
@ -114,58 +114,56 @@ function validate(items: any[]) {
// return '' // return ''
// } // }
return null return null;
} }
function approvalHandler(items?: any) { function approvalHandler(items?: any) {
let cloneItem: any let cloneItem: any;
if (batch.value) { if (batch.value) {
processItems = selectItems.value processItems = selectItems.value;
} } else if (overTask.value) {
else if (overTask.value) { cloneItem = clone(overTask.value);
cloneItem = clone(overTask.value) processItems = [cloneItem];
processItems = [cloneItem]
} }
if (items !== undefined && !(items instanceof PointerEvent)) if (items !== undefined && !(items instanceof PointerEvent)) processItems = items;
processItems = items
const msg = validate(processItems) const msg = validate(processItems);
if (msg !== null) { if (msg !== null) {
message.error(msg) message.error(msg);
return return;
} }
const list: any = [] const list: any = [];
processItems.forEach((item) => { processItems.forEach((item) => {
list.push({ list.push({
formId: item.id, formId: item.id,
taskId: item.taskId, taskId: item.taskId,
taskName: item.fromTaskName, taskName: item.fromTaskName,
}) });
}) });
const param = { const param = {
result: true, result: true,
comment: '', comment: "",
disposeType: '', disposeType: "",
disposeTypeId: '', disposeTypeId: "",
failCauseId: '', failCauseId: "",
failCauseName: '', failCauseName: "",
flowTaskInfoList: list, flowTaskInfoList: list,
} };
dialog.info({ dialog.info({
title: '确认提示', title: "确认提示",
content: '确认给该任务审批为【通过】吗?', content: "确认给该任务审批为【通过】吗?",
positiveText: '确定', positiveText: "确定",
negativeText: '取消', negativeText: "取消",
onPositiveClick: () => { onPositiveClick: () => {
doAudit(param) doAudit(param);
}, },
onNegativeClick: () => {}, onNegativeClick: () => {},
}) });
} }
function rejectHandler(items?: any) { function rejectHandler(items?: any) {
@ -188,153 +186,157 @@ function rejectHandler(items?: any) {
// return // return
// } // }
const modal = unref(notPassModalRef)! as any const modal = unref(notPassModalRef)! as any;
modal.showModal(selectItems.value) modal.showModal(selectItems.value);
} }
function doAudit(param: any) { function doAudit(param: any) {
audit(param).then((res) => { audit(param).then((res) => {
const { code } = res const { code } = res;
setBatch(false) setBatch(false);
if (code === 'OK') { if (code === "OK") {
message.success('审核成功') message.success("审核成功");
reloadList() reloadList();
} else {
message.error(res.message);
} }
});
else { message.error(res.message) }
})
} }
function showModal(modalRef: any) { function showModal(modalRef: any) {
const modal = unref(modalRef)! as any const modal = unref(modalRef)! as any;
modal.showModal() modal.showModal();
} }
function forwardHandler() { function forwardHandler() {
taskStore.forward() taskStore.forward();
} }
function backHandler() { function backHandler() {
taskStore.back() taskStore.back();
} }
async function handleDragEnd(event, item) { async function handleDragEnd(event, item) {
// //
const flag = taskStore.getInFile const flag = taskStore.getInFile;
if (flag) { if (flag) {
const res = await dubiousfileyd({ pictureid: item.pictureid }) const res = await dubiousfileyd({ pictureid: item.pictureid });
if (res.code === 'OK') { if (res.code === "OK") {
message.success('加入成功') message.success("加入成功");
getTableData() getTableData();
} } else {
else { message.error(res.message);
message.error(res.message)
} }
taskStore.setInFile(false) taskStore.setInFile(false);
} }
} }
async function getTableData() { async function getTableData() {
const useInfo = userStore.getUserInfo const useInfo = userStore.getUserInfo;
const listData = [] const listData = [];
const reviewType = 3 // const reviewType = 3; //
let res = await getAllfieldList(reviewType) let res = await getAllfieldList(reviewType);
const fieldList = (res as any)?.data const fieldList = (res as any)?.data;
res = await getfieldList(reviewType, useInfo.id) res = await getfieldList(reviewType, useInfo.id);
const userFieldList = (res as any)?.data.userFieldFixed const userFieldList = (res as any)?.data.userFieldFixed;
const blueList = [
"拜访终端名称",
"定位信息",
"拜访日期",
"定位距离",
"拜访小结",
"拜访项目类别",
];
fieldList.map((v) => { fieldList.map((v) => {
if (userFieldList.includes(v.name)) { if (userFieldList.includes(v.name)) {
const item = { const item = {
label: v.fieldDesc, label: v.fieldDesc,
value: taskDetailInfo.value.ocrPicture[v.name], value: taskDetailInfo.value.ocrPicture[v.name],
key: v.name, key: v.name,
blue: blueList.includes(v.fieldDesc),
};
listData.push(item);
} }
listData.push(item) });
} taskTableData.value = chunk(listData, 2);
})
taskTableData.value = chunk(listData, 2)
} }
async function getImgList() { async function getImgList() {
if (!isEmpty(taskDetailInfo.value.ocrPicture.id)) { if (!isEmpty(taskDetailInfo.value.ocrPicture.id)) {
const { data, total } = await getSimilarityList( const { data, total } = await getSimilarityList({
{
...taskpagination, ...taskpagination,
...sortBy, ...sortBy,
pictureId: taskDetailInfo.value.ocrPicture.id, pictureId: taskDetailInfo.value.ocrPicture.id,
}, });
) taskDetailPictureList.value = data;
taskDetailPictureList.value = data totalCount.value = total;
totalCount.value = total } else {
} taskDetailPictureList.value.length = 0;
else { totalCount.value = 0;
taskDetailPictureList.value.length = 0
totalCount.value = 0
} }
} }
// storeid // storeid
const currentTaskId = computed(() => { const currentTaskId = computed(() => {
const index = taskStore.getCurrentIndex const index = taskStore.getCurrentIndex;
return taskStore.getApprovalList[index]?.id || '' return taskStore.getApprovalList[index]?.id || "";
}) });
function overTaskHandle() { function overTaskHandle() {
const item = taskDetailInfo.value const item = taskDetailInfo.value;
if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) { if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
overTask.value = null overTask.value = null;
return return;
} }
if (validate([item]) == null && batch.value === false) if (validate([item]) == null && batch.value === false) overTask.value = item;
overTask.value = item
} }
function leaveTaskHandler() { function leaveTaskHandler() {
overTask.value = null overTask.value = null;
} }
function showActionsModal() { function showActionsModal() {
const modal = unref(CustomSettingModalRef)! as any const modal = unref(CustomSettingModalRef)! as any;
modal.showModal() modal.showModal();
} }
onUnmounted(() => { onUnmounted(() => {
taskStore.reset() taskStore.reset();
window.removeEventListener('keydown', handleKeydown) window.removeEventListener("keydown", handleKeydown);
}) });
function immersionHandler() { function immersionHandler() {
taskStore.updateImmersion() taskStore.updateImmersion();
} }
function previewHandler(event: MouseEvent) { function previewHandler(event: MouseEvent) {
event.stopImmediatePropagation() event.stopImmediatePropagation();
event.stopPropagation() event.stopPropagation();
if (imageRef.value && (imageRef.value as any).src) if (imageRef.value && (imageRef.value as any).src)
(imageRef.value as any).mergedOnClick() (imageRef.value as any).mergedOnClick();
} }
watch( watch(
() => [taskStore.activeId], () => [taskStore.activeId],
() => { () => {
packageId.value = taskStore.getPackageid packageId.value = taskStore.getPackageid;
taskId.value = taskStore.getActiveId taskId.value = taskStore.getActiveId;
getDetail() getDetail();
}, }
) );
// //
async function getDetail() { async function getDetail() {
taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value) taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value);
setBatch(false) setBatch(false);
getTableData() getTableData();
getImgList() getImgList();
} }
function reloadList() { function reloadList() {
getDetail() getDetail();
} }
</script> </script>
@ -343,24 +345,11 @@ function reloadList() {
<div class="wrapper-header"> <div class="wrapper-header">
<div class="left"> <div class="left">
<span class="font">任务ID{{ taskDetailInfo.fromtaskname }}</span> <span class="font">任务ID{{ taskDetailInfo.fromtaskname }}</span>
<SvgIcon <SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
size="22" <SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
class="forward"
name="arrow-left"
@click="backHandler"
/>
<SvgIcon
size="22"
class="back"
name="arrow-right"
@click="forwardHandler"
/>
</div> </div>
<div class="right"> <div class="right">
<div <div v-show="!showActions" style="display: flex; align-items: center">
v-show="!showActions"
style="display: flex; align-items: center"
>
<div class="btn" @click="setBatch(true)"> <div class="btn" @click="setBatch(true)">
<SvgIcon style="margin-right: 6px" size="22" name="batch" /> <SvgIcon style="margin-right: 6px" size="22" name="batch" />
批量审批 批量审批
@ -391,11 +380,7 @@ function reloadList() {
</ul> </ul>
</n-popover> --> </n-popover> -->
<div class="icon-wrap"> <div class="icon-wrap">
<SvgIcon <SvgIcon size="20" name="immersion-model" @click="immersionHandler" />
size="20"
name="immersion-model"
@click="immersionHandler"
/>
</div> </div>
</div> </div>
<div v-show="showActions" class="batch"> <div v-show="showActions" class="batch">
@ -405,9 +390,19 @@ function reloadList() {
</template> </template>
返回 返回
</n-button> </n-button>
<img class="btn-approval btn-left" src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="rejectHandler"> <img
class="btn-approval btn-left"
src="@/assets/images/task/btn-not-pass.png"
alt=""
@click.stop="rejectHandler"
/>
<SvgIcon size="24" name="vs" /> <SvgIcon size="24" name="vs" />
<img class="btn-approval" src="@/assets/images/task/btn-pass.png" alt="" @click.stop="approvalHandler"> <img
class="btn-approval"
src="@/assets/images/task/btn-pass.png"
alt=""
@click.stop="approvalHandler"
/>
</div> </div>
</div> </div>
</div> </div>
@ -447,44 +442,50 @@ function reloadList() {
</div> </div>
<div class="status"> <div class="status">
<img v-show="taskDetailInfo?.userapprove?.statshis === 2" class="img-status" src="@/assets/images/task/pass.png" alt=""> <img
<img v-show="taskDetailInfo?.userapprove?.statshis === 3" class="img-status" src="@/assets/images/task/not_pass.png" alt=""> v-show="taskDetailInfo?.userapprove?.statshis === 2"
class="img-status"
src="@/assets/images/task/pass.png"
alt=""
/>
<img
v-show="taskDetailInfo?.userapprove?.statshis === 3"
class="img-status"
src="@/assets/images/task/not_pass.png"
alt=""
/>
</div> </div>
<div class="mark"> <div class="mark">
<SvgIcon <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
v-show="taskDetailInfo?.iztrueorfalse === 0"
size="128"
name="jia"
/>
</div> </div>
<div class="mark"> <div class="mark">
<SvgIcon <SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
v-show="taskDetailInfo?.iztrueorfalse === 1"
size="128"
name="zhen"
/>
</div> </div>
<div class="big-mark" /> <div class="big-mark" />
<div class="info img-info"> <div class="info img-info">
<n-grid x-gap="12" y-gap="10" :cols="12"> <n-grid x-gap="12" y-gap="10" :cols="12">
<n-gi span="4" class="gi1"> <n-gi span="4" class="gi1">
<span> <span>
<img class="icon-status" src="@/assets/images/task/status.png" alt=""> <img class="icon-status" src="@/assets/images/task/status.png" alt="" />
</span> </span>
</n-gi> </n-gi>
<n-gi span="8" class="gi2"> <n-gi span="8" class="gi2">
<span class="value">{{ TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis] }}</span> <span class="value">{{
TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis]
}}</span>
<span class="label">审批状态</span> <span class="label">审批状态</span>
</n-gi> </n-gi>
<n-gi span="4" class="gi1"> <n-gi span="4" class="gi1">
<span> <span>
<img class="icon-status" src="@/assets/images/task/similarity.png" alt=""> <img
class="icon-status"
src="@/assets/images/task/similarity.png"
alt=""
/>
</span> </span>
</n-gi> </n-gi>
<n-gi span="8" class="gi2"> <n-gi span="8" class="gi2">
<span class="value num">{{ <span class="value num">{{ totalCount }}<span class="unit"></span> </span>
totalCount
}}<span class="unit"></span> </span>
<span class="label">相似匹配</span> <span class="label">相似匹配</span>
</n-gi> </n-gi>
</n-grid> </n-grid>
@ -492,11 +493,18 @@ function reloadList() {
<div class="time"> <div class="time">
<div v-if="taskDetailInfo?.ocrPicture?.photoDateTimestamp" class="time-item"> <div v-if="taskDetailInfo?.ocrPicture?.photoDateTimestamp" class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" /> <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
<span>{{ formatToDateHMS(Number(taskDetailInfo.ocrPicture.photoDateTimestamp) || 0) }}</span> <span>{{
formatToDateHMS(Number(taskDetailInfo.ocrPicture.photoDateTimestamp) || 0)
}}</span>
</div> </div>
<div v-if="taskDetailInfo?.ocrPicture?.submitDateTimestamp" class="time-item time-item2"> <div
v-if="taskDetailInfo?.ocrPicture?.submitDateTimestamp"
class="time-item time-item2"
>
<SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" /> <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
<span>{{ formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp) || 0) }}</span> <span>{{
formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp) || 0)
}}</span>
</div> </div>
</div> </div>
<div style="display: none"> <div style="display: none">
@ -520,16 +528,16 @@ function reloadList() {
/> />
</div> </div>
<div class="list"> <div class="list">
<div <div v-for="item in taskDetailPictureList" :key="item.id" class="item">
v-for="(item) in taskDetailPictureList"
:key="item.id"
class="item"
>
<div <div
draggable="true" draggable="true"
class="img-wrapper" class="img-wrapper"
:style="{ 'background-image': `url(${item.imgUrl})` }" :style="{ 'background-image': `url(${item.imgUrl})` }"
@dragend="(event) => { handleDragEnd(event, item) }" @dragend="
(event) => {
handleDragEnd(event, item);
}
"
/> />
<div class="small-mark" /> <div class="small-mark" />
<div class="check"> <div class="check">
@ -541,19 +549,36 @@ function reloadList() {
/> />
</div> </div>
<img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt=""> <img
<img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt=""> v-if="item.historyStates === 2"
class="tag-status"
src="@/assets/images/task/tag-pass.png"
alt=""
/>
<img
v-if="item.historyStates === 3"
class="tag-status"
src="@/assets/images/task/tag-not-pass.png"
alt=""
/>
<div class="time"> <div class="time">
<div v-if="item.photoDateTimestamp" class="time-item"> <div v-if="item.photoDateTimestamp" class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" /> <SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
<span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span> <span>{{
formatToDateHMS(Number(item.photoDateTimestamp) || 0)
}}</span>
</div> </div>
<div v-if="item.submitDateTimestamp" class="time-item time-item2"> <div v-if="item.submitDateTimestamp" class="time-item time-item2">
<SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" /> <SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
<span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span> <span>{{
formatToDateHMS(Number(item.submitDateTimestamp) || 0)
}}</span>
</div> </div>
</div> </div>
<div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent"> <div
:class="{ 'percent-red': item.similarityScore === 100 }"
class="percent"
>
{{ item.similarityScore }}<span class="percent-unit">%</span> {{ item.similarityScore }}<span class="percent-unit">%</span>
</div> </div>
</div> </div>
@ -566,7 +591,11 @@ function reloadList() {
<n-tabs type="line" animated> <n-tabs type="line" animated>
<n-tab-pane name="task-info" tab="任务信息"> <n-tab-pane name="task-info" tab="任务信息">
<TaskTable :data="taskDetailInfo" :task-table-data="taskTableData" @show-modal="showActionsModal" /> <TaskTable
:data="taskDetailInfo"
:task-table-data="taskTableData"
@show-modal="showActionsModal"
/>
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="picture-info" tab="图片信息"> <n-tab-pane name="picture-info" tab="图片信息">
<PictureTable :data="taskDetailInfo" /> <PictureTable :data="taskDetailInfo" />
@ -576,12 +605,12 @@ function reloadList() {
</n-tab-pane> </n-tab-pane>
</n-tabs> </n-tabs>
<NotPassed ref="notPassModalRef" @success="reloadList" /> <NotPassed ref="notPassModalRef" @success="reloadList" />
<BatchModal <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
ref="batchModalRef" <CustomSettingModal
@reject="rejectHandler" ref="CustomSettingModalRef"
@approval="approvalHandler" :review-type="3"
@on-ok="getTableData"
/> />
<CustomSettingModal ref="CustomSettingModalRef" :review-type="3" @on-ok="getTableData" />
</div> </div>
</template> </template>
@ -593,7 +622,7 @@ function reloadList() {
color: #666666; color: #666666;
} }
::v-deep(.n-tabs-tab--active .n-tabs-tab__label) { ::v-deep(.n-tabs-tab--active .n-tabs-tab__label) {
color: #507AFD; color: #507afd;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
@ -618,7 +647,7 @@ function reloadList() {
justify-content: center; justify-content: center;
width: 30px; width: 30px;
height: 30px; height: 30px;
background: rgba(80,122,253,.1); background: rgba(80, 122, 253, 0.1);
border-radius: 8px; border-radius: 8px;
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
@ -654,7 +683,6 @@ function reloadList() {
.unit { .unit {
font-size: 11px; font-size: 11px;
} }
} }
.wrapper { .wrapper {
display: flex; display: flex;
@ -752,7 +780,12 @@ function reloadList() {
.big-mark { .big-mark {
width: 100%; width: 100%;
height: 151px; height: 151px;
background: linear-gradient(180deg,rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 29%, rgba(3,0,0,0.73)); background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 29%,
rgba(3, 0, 0, 0.73)
);
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -821,7 +854,7 @@ function reloadList() {
} }
.svg-time { .svg-time {
margin-right: 5px margin-right: 5px;
} }
} }
@ -859,7 +892,7 @@ function reloadList() {
.right { .right {
flex: 0.5; flex: 0.5;
background: #F6F9FD; background: #f6f9fd;
border-radius: 8px; border-radius: 8px;
margin-left: 20px; margin-left: 20px;
padding: 24px; padding: 24px;
@ -896,7 +929,11 @@ function reloadList() {
.small-mark { .small-mark {
width: 100%; width: 100%;
height: 36px; height: 36px;
background: linear-gradient(180deg,rgba(0,0,0,0.01), rgba(0,0,0,0.44) 88%); background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.01),
rgba(0, 0, 0, 0.44) 88%
);
border-radius: 0px 8px 8px 8px; border-radius: 0px 8px 8px 8px;
position: absolute; position: absolute;
left: 0; left: 0;
@ -933,7 +970,7 @@ function reloadList() {
} }
.svg-time { .svg-time {
margin-right: 5px margin-right: 5px;
} }
} }
@ -975,7 +1012,7 @@ function reloadList() {
.percent-unit { .percent-unit {
font-size: 8px; font-size: 8px;
margin-top: 4px margin-top: 4px;
} }
.percent-red { .percent-red {

@ -1,4 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue";
defineProps({ defineProps({
data: { data: {
type: Object as PropType<any>, type: Object as PropType<any>,
@ -8,19 +10,17 @@ defineProps({
type: Array as any, type: Array as any,
default: () => [[]], default: () => [[]],
}, },
}) });
const emit = defineEmits(['showModal']) const emit = defineEmits(["showModal"]);
function showActionsModal() { function showActionsModal() {
emit('showModal') emit("showModal");
} }
</script> </script>
<template> <template>
<div class="info-header"> <div class="info-header">
<div class="left_box"> <div class="left_box">
<div class="title"> <div class="title">填报信息</div>
填报信息
</div>
</div> </div>
<div class="right_box" @click="showActionsModal"> <div class="right_box" @click="showActionsModal">
自定义设置 自定义设置
@ -32,13 +32,13 @@ function showActionsModal() {
<th v-if="item && item[0]"> <th v-if="item && item[0]">
{{ item[0].label }} {{ item[0].label }}
</th> </th>
<td v-if="item && item[0]" :class="item.blue ? 'blue' : ''"> <td v-if="item && item[0]" :class="item[0].blue ? 'blue' : ''">
{{ item[0].value }} {{ item[0].value }}
</td> </td>
<th v-if="item && item.length > 1"> <th v-if="item && item.length > 1">
{{ item[1].label }} {{ item[1].label }}
</th> </th>
<td v-if="item && item.length > 1" :class="item.blue ? 'blue' : ''"> <td v-if="item && item.length > 1" :class="item[1].blue ? 'blue' : ''">
{{ item[1].value }} {{ item[1].value }}
</td> </td>
</tr> </tr>
@ -82,7 +82,7 @@ function showActionsModal() {
color: #666666; color: #666666;
.icon { .icon {
margin-left: 7px margin-left: 7px;
} }
} }
} }

@ -251,7 +251,10 @@ function removeHandler(id: string) {
let index = onList.value.findIndex((item) => { let index = onList.value.findIndex((item) => {
return item.id === id; return item.id === id;
}); });
if (index !== -1) onList.value.splice(index, 1); if (index !== -1) {
onList.value.splice(index, 1);
onShowList.value.splice(index, 1);
}
index = offList.value.findIndex((v) => v.id == id); index = offList.value.findIndex((v) => v.id == id);
offList.value[index].checked = false; offList.value[index].checked = false;

Loading…
Cancel
Save