feat: 工单审批弹窗逻辑修改暂存

pull/45/head
刘释隆 1 year ago
parent 9bd21216df
commit d2d4e9cf90

@ -33,7 +33,7 @@ const pagination = reactive({
pageSize: 10,
})
const approvalModalRef = ref(null)
const approvalModalRef: any = ref(null)
const notPassedRef: any = ref(null)
const overTask = ref<any>(null);
@ -94,8 +94,9 @@ watch(
(newVal) => {
if (isEmpty(newVal))
return
activeId.value = newVal
activeId.value = newVal;
approvalModalRef.value.showModal(activeId.value)
},
)

@ -2,9 +2,10 @@
import { onMounted, reactive, ref, toRefs } from "vue";
import { format } from "date-fns";
import { NButton, NDataTable, useDialog, useMessage } from "naive-ui";
import { aiApprovaltools, aiApprovaltoolsClearmark } from "@/api/work/work";
import { aiApprovaltools, aiApprovaltoolsClearmark, setTF } from "@/api/work/work";
import { getToolsCount } from "@/api/home/main";
import { storage } from "@/utils/Storage";
import { CURRENT_USER } from "@/store/mutation-types";
const emit = defineEmits<{
(e: "reject", params: any);
(e: "notPass", params: any);
@ -14,7 +15,7 @@ const dialog = useDialog();
const state: any = reactive({
detail: {},
taskId: "",
packageid: "",
});
const { detail } = toRefs(state);
const cardStyle = {
@ -26,23 +27,34 @@ const cardStyle = {
const show = ref(false);
function showModal(id) {
console.log(id);
state.taskId = id;
state.packageid = id;
getDetail(id);
}
async function getDetail(id) {
// const userInfo = storage.get(CURRENT_USER);
// const nodeType = userInfo.nodeType;
id = "264626184091111068";
const res = await aiApprovaltools({ taskid: id });
if (res.code === "OK") {
state.detail = res.data;
show.value = true;
}
console.log(res);
console.log(res, "getDetail");
}
const handleReject = async () => {
const res = await setTF({
taskchildpictureids: state.detail.taskIdList.join(","),
packageid: state.packageid,
iztrueorfalse: 0,
});
console.log(res, "handleReject");
};
async function clearMark() {
const res = await aiApprovaltoolsClearmark({ taskid: state.taskId });
const res = await aiApprovaltoolsClearmark({ taskid: state.packageid });
if (res.code === "OK") closeModal();
}
@ -69,7 +81,7 @@ async function reject() {
async function viewRepeat(e: MouseEvent) {
emit("notPass", {
id: state.taskId,
id: state.packageid,
detail: state.detail,
});
e.preventDefault();
@ -78,7 +90,7 @@ async function viewRepeat(e: MouseEvent) {
async function getShowStatus() {
const res = await getToolsCount();
if (res.code == 'OK') {
if (res.code == "OK") {
show.value = true;
}
}
@ -92,7 +104,7 @@ defineExpose({
</script>
<template>
<n-modal v-model:show="show" transform-origin="center" class="modal_wrap">
<n-modal :show="show" transform-origin="center" class="modal_wrap">
<div class="wrapper">
<div class="closed">
<SvgIcon style="cursor: pointer" name="cut-down" width="32" @click="closeModal" />
@ -100,31 +112,36 @@ defineExpose({
<div class="wrapper-hearder">
<div class="wrapper-title">智能AI审批工具</div>
<div class="wrapper-mark">
{{ detail.tenantusername }}
{{ detail.tenantUserName }}-{{ detail.packageName }}
</div>
</div>
<div class="wrapper-content">
<n-scrollbar style="height: 200px">
<div v-for="i in 1" :key="i" class="item">
<div class="imgwrapper" />
<div class="content">
<div class="task_id">任务ID{{ detail.taskid }}</div>
<div class="tag_box">
<div class="tag_item">基线任务</div>
<div class="tag_item error">相似图片({{ detail.similarcount }})</div>
</div>
<div class="time_box">
{{ format(detail.createtime, "yyyy-MM-dd HH:mm:ss") }}
<div class="item">
<div class="imgwrapper" />
<div class="content">
<div class="task_id">#AI任务包{{ detail.packageId }}</div>
<div class="tag_box">
<div class="tag_item error">
<span style="color: red">error</span> 重复图片({{
detail.similarComplete
}})
</div>
</div>
<div class="time_box">
任务包生成时间
{{ format(detail?.createtime || 0, "yyyy-MM-dd HH:mm:ss") }}
</div>
</div>
</n-scrollbar>
</div>
<div class="mark_text">
智能识别{{ detail.similarComplete }}张图片来源于网络建议将图片标记为假
快速审批不通过
智能提示{{detail?.similarComplete}} 张图片相似度为100%重复图片{{detail?.passCount}}张审批状态为<span
style="color: #02c984"
>通过</span
>剩余{{detail?.pendingApprovaCount}}张图片建议审批为不通过
</div>
<div class="footer">
<SvgIcon
<div class="footer" @click="handleReject">
立即审批
<!-- <SvgIcon
style="cursor: pointer"
name="r3"
width="162"
@ -137,7 +154,7 @@ defineExpose({
width="162"
height="54"
@click="viewRepeat"
/>
/> -->
</div>
</div>
</div>
@ -185,7 +202,7 @@ defineExpose({
.wrapper-content {
flex: 1;
border-radius: 8px;
margin: 35px 60px 35px 120px;
margin: 70px 60px 35px 120px;
.item {
display: flex;
flex-flow: row nowrap;
@ -249,11 +266,24 @@ defineExpose({
line-height: 16px;
}
.footer {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
margin: 20px 30px 0 0;
margin: 20px auto 0;
width: 132px;
height: 40px;
background: linear-gradient(135deg, #3258e8, #786efc);
border-image: linear-gradient(123deg, #d7dffe 2%, #d7d5ff 88%) 1 1;
border-radius: 23px;
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
font-size: 20px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
font-weight: Regular;
text-align: left;
color: #ffffff;
line-height: 26px;
}
}
}

@ -39,7 +39,7 @@ defineExpose({
</script>
<template>
<n-modal v-model:show="show" transform-origin="center" class="modal_wrap">
<n-modal :show="true" transform-origin="center" class="modal_wrap">
<div class="wrapper">
<div class="closed">
<SvgIcon style="cursor: pointer" name="cut-down" width="32" @click="closeModal"/>

@ -0,0 +1,260 @@
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import { format } from "date-fns";
import { NButton, NDataTable, useDialog, useMessage } from "naive-ui";
import { aiApprovaltools, aiApprovaltoolsClearmark } from "@/api/work/work";
import { getToolsCount } from "@/api/home/main";
const emit = defineEmits<{
(e: "reject", params: any);
(e: "notPass", params: any);
}>();
const dialog = useDialog();
const state: any = reactive({
detail: {},
taskId: "",
});
const { detail } = toRefs(state);
const cardStyle = {
width: "450px",
"--n-padding-bottom": "10px",
"--n-padding-left": "0px",
};
const show = ref(false);
function showModal(id) {
console.log(id);
state.taskId = id;
getDetail(id);
}
async function getDetail(id) {
const res = await aiApprovaltools({ taskid: id });
if (res.code === "OK") {
state.detail = res.data;
show.value = true;
}
console.log(res,'getDetail');
}
async function clearMark() {
const res = await aiApprovaltoolsClearmark({ taskid: state.taskId });
if (res.code === "OK") closeModal();
}
function closeModal() {
show.value = false;
}
async function reject() {
// emit('reject', { a: 'todo' })
// closeModal()
dialog.info({
title: "确认提示",
content: "确认设置成假吗?",
positiveText: "确定",
negativeText: "取消",
onPositiveClick: async () => {
// TODO
// const result = await resetApproval()
clearMark();
},
onNegativeClick: () => {},
});
}
async function viewRepeat(e: MouseEvent) {
emit("notPass", {
id: state.taskId,
detail: state.detail,
});
e.preventDefault();
closeModal();
}
async function getShowStatus() {
const res = await getToolsCount();
if (res.code == 'OK') {
show.value = true;
}
}
onMounted(() => {
getShowStatus();
});
defineExpose({
showModal,
});
</script>
<template>
<n-modal :show="show" transform-origin="center" class="modal_wrap">
<div class="wrapper">
<div class="closed">
<SvgIcon style="cursor: pointer" name="cut-down" width="32" @click="closeModal" />
</div>
<div class="wrapper-hearder">
<div class="wrapper-title">智能AI审批工具</div>
<div class="wrapper-mark">
{{ detail.tenantusername }}
</div>
</div>
<div class="wrapper-content">
<n-scrollbar style="height: 200px">
<div v-for="i in 1" :key="i" class="item">
<div class="imgwrapper" />
<div class="content">
<div class="task_id">任务ID{{ detail.taskid }}</div>
<div class="tag_box">
<div class="tag_item">基线任务</div>
<div class="tag_item error">相似图片({{ detail.similarcount }})</div>
</div>
<div class="time_box">
{{ format(detail?.createtime || 0, "yyyy-MM-dd HH:mm:ss") }}
</div>
</div>
</div>
</n-scrollbar>
<div class="mark_text">
智能识别{{ detail.similarComplete }}张图片来源于网络建议将图片标记为假
快速审批不通过
</div>
<div class="footer">
<SvgIcon
style="cursor: pointer"
name="r3"
width="162"
height="54"
@click="reject"
/>
<SvgIcon
style="cursor: pointer"
name="r2"
width="162"
height="54"
@click="viewRepeat"
/>
</div>
</div>
</div>
</n-modal>
</template>
<style lang="less" scoped>
.modal_wrap {
background-image: url(../../../assets/images/approval_modal_bg.png);
background-repeat: no-repeat;
background-size: 100%;
width: 700px;
height: 500px;
box-shadow: none !important;
}
.wrapper {
position: absolute;
left: calc(50% - 350px);
.closed {
position: relative;
top: 0px;
left: 90%;
}
.wrapper-hearder {
margin-top: 40px;
.wrapper-title {
text-align: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC-Semibold;
font-weight: Semibold;
text-align: center;
color: #333333;
line-height: 32px;
}
.wrapper-mark {
text-align: center;
font-size: 13px;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
font-weight: Regular;
text-align: center;
color: #666666;
line-height: 18px;
}
}
.wrapper-content {
flex: 1;
border-radius: 8px;
margin: 35px 60px 35px 120px;
.item {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin: 20px 0;
}
.imgwrapper {
width: 200px;
height: 120px;
margin-right: 20px;
border-radius: 8px;
background-image: url("../../../assets/images/test.png");
background-repeat: no-repeat;
background-size: cover;
}
.content {
.task_id {
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: left;
color: #333333;
line-height: 20px;
}
.tag_box {
display: flex;
flex-flow: row nowrap;
margin: 8px 0;
.tag_item {
background: rgba(80, 122, 253, 0.1);
border-radius: 2px;
font-size: 12px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: left;
color: #507afd;
line-height: 16px;
margin-right: 10px;
}
.error {
background: rgba(255, 78, 79, 0.1);
color: #ff4e4f;
}
}
.time_box {
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: left;
color: #333333;
line-height: 20px;
}
}
.mark_text {
font-size: 13px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: left;
color: #666666;
line-height: 16px;
}
.footer {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
margin: 20px 30px 0 0;
}
}
}
</style>
Loading…
Cancel
Save