guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 样式修复

Browse Source
pull/218/head
刘释隆 2 years ago
parent 1e74d0ac80
commit e0a4bc292a
10 changed files with 915 additions and 763 deletions
Show Stats Download Patch File Download Diff File

137
src/components/DataHeader/index.vue
Unescape View File

@ -1,29 +1,68 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue' import { defineProps, onMounted, ref } from "vue";
import { gettaskToolsCount } from '@/api/home/main' import { gettaskToolsCount } from "@/api/home/main";
defineProps({ defineProps({
hasColor: { hasColor: {
type: Boolean, type: Boolean,
default: () => false, default: () => false,
}, },
}) });
const data = ref() const data = ref([
{
link: "count",
title: "任务总数",
count: 0,
},
{
link: "wait",
title: "待审批",
count: 0,
},
{
link: "done",
title: "已审批",
count: 0,
},
{
link: "resolve",
title: "通过",
count: 0,
color: "#03c984",
},
{
link: "reject",
title: "不通过",
count: 0,
color: "#ff8b8b",
},
{
link: "reimg",
title: "图片重复数",
count: 0,
},
{
link: "breakcount",
title: "小结重复数",
count: 0,
},
]);
function initRem() { function initRem() {
const designWidth = 1440 const designWidth = 1440;
const rempPx = 16 const rempPx = 16;
const scale = window.innerWidth / designWidth const scale = window.innerWidth / designWidth;
document.documentElement.style.fontSize = `${scale * rempPx}px` document.documentElement.style.fontSize = `${scale * rempPx}px`;
} }
onMounted(() => { onMounted(() => {
initRem() initRem();
getData() getData();
}) });
async function getData() { async function getData() {
const { data } = await gettaskToolsCount();
if (data) {
const { const {
data: {
total, total,
treat, treat,
alreadyApprove, alreadyApprove,
@ -31,54 +70,55 @@ async function getData() {
repeat, repeat,
approvedCount, approvedCount,
notGoCount, notGoCount,
}, } = data;
} = await gettaskToolsCount()
data.value = [ data.value = [
{ {
link: 'count', link: "count",
title: '任务总数', title: "任务总数",
count: total, count: total,
}, },
{ {
link: 'wait', link: "wait",
title: '待审批', title: "待审批",
count: treat, count: treat,
}, },
{ {
link: 'done', link: "done",
title: '已审批', title: "已审批",
count: alreadyApprove, count: alreadyApprove,
}, },
{ {
link: 'resolve', link: "resolve",
title: '通过', title: "通过",
count: approvedCount, count: approvedCount,
color: '#03c984', color: "#03c984",
}, },
{ {
link: 'reject', link: "reject",
title: '不通过', title: "不通过",
count: notGoCount, count: notGoCount,
color: '#ff8b8b', color: "#ff8b8b",
}, },
{ {
link: 'reimg', link: "reimg",
title: '图片重复数', title: "图片重复数",
count: repeat, count: repeat,
}, },
{ {
link: 'breakcount', link: "breakcount",
title: '小结重复数', title: "小结重复数",
count: repeatedNodules, count: repeatedNodules,
}, },
] ];
}
} }
</script> </script>
<template> <template>
<div class="header_wrap"> <div class="header_wrap" :style="hasColor ? '' : 'margin-top: 7.375rem;'">
<div v-for="(item, index) in data" :key="index" class="header_item"> <div v-for="(item, index) in data" :key="index" class="header_box">
<SvgIcon :name="item.link" /> <div class="header_item">
<SvgIcon :name="item.link" :style="index == 0 ? 'margin-left:0.5rem' : ''" />
<div class="data_wrap"> <div class="data_wrap">
<div class="data_title" :style="hasColor ? `color:${item.color || ''}` : ''"> <div class="data_title" :style="hasColor ? `color:${item.color || ''}` : ''">
{{ item.count }} {{ item.count }}
@ -88,6 +128,15 @@ async function getData() {
</div> </div>
</div> </div>
</div> </div>
<div
class="line"
:style="
hasColor
? 'margin-left:2.5rem;margin-right:2.0625rem'
: 'margin-left:1.25rem;margin-right:0.8125rem'
"
/>
</div>
<SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg" /> <SvgIcon size="14px" style="cursor: pointer" name="setting" class="settingSvg" />
</div> </div>
</template> </template>
@ -99,11 +148,17 @@ async function getData() {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1rem 1rem 1rem 3.125rem; padding: 1rem 1rem 1rem 3.125rem;
background: #fff; background: #f5f7f9;
margin-bottom: 1rem; margin-bottom: 1rem;
// 180-62 header
.header_item { padding-left: 2.125rem;
.header_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
min-width: 10%; min-width: 10%;
.header_item {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
@ -113,7 +168,7 @@ async function getData() {
height: 2.75rem !important; height: 2.75rem !important;
} }
.data_wrap { .data_wrap {
margin-left: 0.8125rem; margin-left: 0.75rem;
.data_title { .data_title {
font-size: 1.125rem; font-size: 1.125rem;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
@ -138,8 +193,14 @@ async function getData() {
} }
} }
} }
}
.settingSvg { .settingSvg {
width: 1rem !important; width: 1rem !important;
height: 1rem !important; height: 1rem !important;
} }
.line {
width: 0.0625rem;
height: 1.25rem;
background: #e8e8e8;
}
</style> </style>

50
src/components/RichEditor/Quill.vue
Unescape View File

@ -1,48 +1,48 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineEmits, reactive, ref } from 'vue' import { defineEmits, reactive, ref } from "vue";
import { QuillEditor } from '@vueup/vue-quill' import { QuillEditor } from "@vueup/vue-quill";
import '@vueup/vue-quill/dist/vue-quill.snow.css' import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { debounce } from 'lodash-es' import { debounce } from "lodash-es";
import { queryNote, saveNote } from '@/api/home/main' import { queryNote, saveNote } from "@/api/home/main";
const emit = defineEmits(['close']) const emit = defineEmits(["close"]);
const quillEditor = ref() const quillEditor = ref();
const cardStyle = { const cardStyle = {
'width': '500px', "width": "500px",
'--n-padding-bottom': '17px', "--n-padding-bottom": "17px",
'--n-padding-left': '24px', "--n-padding-left": "24px",
} };
const note = ref('<p>sss</p>') const note = ref("<p>sss</p>");
const options = reactive({ const options = reactive({
modules: { modules: {
toolbar: [ toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons ["bold", "italic", "underline", "strike"], // toggled buttons
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }], [{ align: "" }, { align: "center" }, { align: "right" }, { align: "justify" }],
], ],
}, },
theme: 'snow', theme: "snow",
placeholder: '', placeholder: "",
}) });
function initHandler() { function initHandler() {
queryNote() queryNote()
.then((res) => { .then((res) => {
if (res.data) if (res.data)
note.value = res.data.notecontent note.value = res.data.notecontent;
console.log('note:', note.value) console.log("note:", note.value);
}) })
.catch(e => console.log(e)) .catch(e => console.log(e));
} }
const saveHandler = debounce(() => { const saveHandler = debounce(() => {
const content = quillEditor.value.getHTML() const content = quillEditor.value.getHTML();
saveNote(content) saveNote(content);
}, 800) }, 800);
</script> </script>
<template> <template>
@ -53,7 +53,7 @@ const saveHandler = debounce(() => {
备注信息 备注信息
</div> </div>
<SvgIcon <SvgIcon
size="24" size="20"
name="close-none-border" name="close-none-border"
class="close_box" class="close_box"
@click="emit('close')" @click="emit('close')"
@ -87,9 +87,9 @@ const saveHandler = debounce(() => {
.title { .title {
font-size: 18px; font-size: 18px;
font-family: PingFang SC, PingFang SC-Medium; font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
color: #333333; color: #333333;
margin-bottom: 24px; margin-bottom: 24px;
font-weight: 500;
} }
.ql-toolbar.ql-snow { .ql-toolbar.ql-snow {

132
src/components/Search/Search.vue
Unescape View File

@ -1,99 +1,99 @@
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue' import { nextTick, onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { debounce } from 'lodash-es' import { debounce } from "lodash-es";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { deleteSearch, getSearchList, historySearch } from '@/api/search/search' import { deleteSearch, getSearchList, historySearch } from "@/api/search/search";
import { storage } from '@/utils/Storage' import { storage } from "@/utils/Storage";
const emit = defineEmits(['close']) const emit = defineEmits(["close"]);
const value = ref('') const value = ref("");
const showList = ref(false) const showList = ref(false);
const historyList: any = ref([]) const historyList: any = ref([]);
const handlerShowList = () => (showList.value = true) const handlerShowList = () => (showList.value = true);
const router = useRouter() const router = useRouter();
const route = useRoute() const route = useRoute();
const state = reactive({ const state = reactive({
resultList: [], resultList: [],
}) as any }) as any;
const { resultList } = toRefs(state) const { resultList } = toRefs(state);
const inputHandler = debounce((keyword) => { const inputHandler = debounce((keyword) => {
if (keyword) if (keyword)
handlerSearch(keyword) handlerSearch(keyword);
}, 500) }, 500);
// 搜索 // 搜索
async function handlerSearch(value) { async function handlerSearch(value) {
const res = await getSearchList({ const res = await getSearchList({
search: value, search: value,
}) });
if (res.code === 'OK') { if (res.code === "OK") {
state.resultList = [ state.resultList = [
{ {
title: '图检审批', title: "图检审批",
path: 'worksheet', path: "worksheet",
data: res.data.ai, data: res.data.ai,
}, },
{ {
title: '任务审批管理', title: "任务审批管理",
path: 'task', path: "task",
data: res.data.preliminary, data: res.data.preliminary,
}, },
{ {
title: '任务终审管理', title: "任务终审管理",
path: 'final', path: "final",
data: res.data.final, data: res.data.final,
}, },
] ];
} }
} }
function handlerHistory(name) { function handlerHistory(name) {
value.value = name value.value = name;
handlerSearch(name) handlerSearch(name);
} }
// 删除历史记录 // 删除历史记录
async function deleteHistory() { async function deleteHistory() {
const res = await deleteSearch({}) const res = await deleteSearch({});
if (res.code === 'OK') if (res.code === "OK")
historyList.value = [] historyList.value = [];
} }
// 获取历史搜索结果 // 获取历史搜索结果
async function getHistory() { async function getHistory() {
const res = await historySearch({}) const res = await historySearch({});
if (res.code === 'OK') if (res.code === "OK")
historyList.value = res.data historyList.value = res.data;
} }
getHistory() getHistory();
function goPath(item, id) { function goPath(item, id) {
const desiredObject = item.data.find((item) => { const desiredObject = item.data.find((item) => {
return item.id === id return item.id === id;
}) });
storage.set('isSearch', true) storage.set("isSearch", true);
router.push({ name: item.path, query: { id, searchContent: desiredObject.name } }) router.push({ name: item.path, query: { id, searchContent: desiredObject.name } });
emit('close') emit("close");
} }
function highlightText(text, query) { function highlightText(text, query) {
if (!query) if (!query)
return text return text;
const regex = new RegExp(query, 'gi') const regex = new RegExp(query, "gi");
const highlightedText = text.replace(regex, (match) => { const highlightedText = text.replace(regex, (match) => {
return `<span style="color:#507AFD" class="highlight">${match}</span>` return `<span style="color:#507AFD" class="highlight">${match}</span>`;
}) });
return highlightedText return highlightedText;
} }
onMounted(() => { onMounted(() => {
setTimeout(() => (value.value = '')) setTimeout(() => (value.value = ""));
handlerShowList() handlerShowList();
handlerSearch('') handlerSearch("");
}) });
</script> </script>
<template> <template>
@ -105,12 +105,19 @@ onMounted(() => {
<n-input <n-input
v-model:value="value" v-model:value="value"
placeholder="搜索任务ID、任务名称、提报人、拜访终端" placeholder="搜索任务ID、任务名称、提报人、拜访终端"
placeholder-style="width:304px;height:22px;margin:17px 0 17px 12px;"
style="font-size: 16px; font-weight: 500; color: #333333"
type="text" type="text"
@input="inputHandler" @input="inputHandler"
@mousedown="handlerShowList" @mousedown="handlerShowList"
> >
<template #prefix> <template #prefix>
<SvgIcon name="magnifying-1" size="18" /> <SvgIcon
name="magnifying-1"
width="21"
height="20"
style="margin: 10px 0 10px 4px"
/>
</template> </template>
</n-input> </n-input>
</div> </div>
@ -157,7 +164,7 @@ onMounted(() => {
class="list_item" class="list_item"
@click="goPath(item, sitem.id)" @click="goPath(item, sitem.id)"
> >
<SvgIcon name="task-icon" size="16" /> <SvgIcon name="task-icon" size="16" style="margin-left: 16px" />
<span class="name" v-html="highlightText(sitem.name, value)" /> <span class="name" v-html="highlightText(sitem.name, value)" />
</div> </div>
</div> </div>
@ -167,10 +174,11 @@ onMounted(() => {
<style lang="less" scoped> <style lang="less" scoped>
.input_wrap { .input_wrap {
width: 60%; // width: 60%;
width: 808px;
position: absolute; position: absolute;
top: 20%; top: 20%;
left: 20%; left: 30%;
box-shadow: none !important; box-shadow: none !important;
.ip_box { .ip_box {
@ -192,6 +200,8 @@ onMounted(() => {
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15), 0px 0px 0px 0.5px #d4e3fc; box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15), 0px 0px 0px 0.5px #d4e3fc;
// width: 808px;
// height: 56px;
} }
.list_box { .list_box {
@ -201,22 +211,25 @@ onMounted(() => {
box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15); box-shadow: 0px 12px 12px 0px rgba(80, 122, 253, 0.15);
margin-top: 15px; margin-top: 15px;
padding: 8px 16px; padding: 8px 16px;
width: 802px;
height: 400px;
.list_classfiy_item { .list_classfiy_item {
margin-bottom: -2px;
.list_title { .list_title {
font-size: 12px; font-size: 12px;
font-family: PingFang SC, PingFang SC-Regular; font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular; font-weight: Regular;
color: #999999; color: #999999;
line-height: 17px; line-height: 17px;
margin: 10px 0 10px 5px; margin: 6px 0 12px 0;
font-weight: 500;
} }
.list_item { .list_item {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
margin-bottom: 10px; margin: 16px 0;
} }
} }
} }
@ -228,12 +241,15 @@ onMounted(() => {
.history-list { .history-list {
align-items: center; align-items: center;
padding-bottom: 9px; // 上面有margin-bottom:12;12+26=38
padding: 26px 12px 12px 0;
} }
.name { .name {
margin-left: 5px; margin-left: 8px;
cursor: pointer; cursor: pointer;
font-weight: 500;
color: #333333;
} }
.tag-wrap { .tag-wrap {
@ -242,8 +258,10 @@ onMounted(() => {
flex: 1; flex: 1;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
margin: 9px 0 9px 29px;
.tag { .tag {
font-weight: 500;
padding: 0 12px; padding: 0 12px;
height: 22px; height: 22px;
border: 1px solid #e4e7ed; border: 1px solid #e4e7ed;

22
src/layout/components/Header/QuillModal.vue
Unescape View File

@ -1,29 +1,33 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineOptions, ref } from 'vue' import { defineOptions, ref } from "vue";
import Quill from '@/components/RichEditor/Quill.vue' import Quill from "@/components/RichEditor/Quill.vue";
defineOptions({ name: 'FilterModal' }) defineOptions({ name: "FilterModal" });
const emit = defineEmits(['showNewFilter']) const emit = defineEmits(["showNewFilter"]);
const show = ref(false) const show = ref(false);
function showModal() { function showModal() {
show.value = true show.value = true;
} }
function closeModal() { function closeModal() {
show.value = false show.value = false;
} }
defineExpose({ defineExpose({
showModal, showModal,
}) });
</script> </script>
<template> <template>
<div> <div>
<n-modal v-model:show="show" transform-origin="center"> <n-modal
v-model:show="show"
transform-origin="center"
style="margin: calc(13%-147px) auto 0 !important"
>
<Quill @close="show = false" /> <Quill @close="show = false" />
</n-modal> </n-modal>
</div> </div>

109
src/layout/components/Header/ShortcutModal.vue
Unescape View File

@ -1,49 +1,71 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineOptions, ref } from 'vue' import { defineOptions, ref } from "vue";
defineOptions({ name: 'ShortcutModal' }) defineOptions({ name: "ShortcutModal" });
const show = ref(false) const show = ref(false);
const cardStyle = { const cardStyle = {
'width': '800px', "width": "800px",
'--n-padding-bottom': '10px', "--n-padding-bottom": "10px",
'--n-padding-left': '10px', "--n-padding-left": "10px",
'padding-bottom':'100px' "padding-bottom": "100px",
} };
function showModal() { function showModal() {
show.value = true show.value = true;
} }
function closeModal() { function closeModal() {
show.value = false show.value = false;
} }
defineExpose({ defineExpose({
showModal, showModal,
}) });
</script> </script>
<template> <template>
<div> <div>
<n-modal v-model:show="show" transform-origin="center"> <n-modal
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true"> v-model:show="show"
transform-origin="center"
style="width: 808px; height: 606px; margin: -27px auto 0 !important"
>
<n-card
:style="cardStyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<div class="wrapper-header"> <div class="wrapper-header">
<span class="wrapper-left">全局快捷键</span> <span class="wrapper-left">全局快捷键</span>
<div class="wrapper-right"> <div class="wrapper-right">
按 <img class="img-question" src="@/assets/images/question.png" alt="">查看快捷键的信息 按
<img
class="img-question"
src="@/assets/images/question.png"
alt=""
style="width: 18px; height: 18px"
>查看快捷键的信息
<img class="img-close" src="@/assets/images/close.png" alt="" @click="closeModal"> <img
class="img-close"
src="@/assets/images/close.png"
alt=""
style="width: 20px; height: 20px"
@click="closeModal"
>
</div> </div>
</div> </div>
<n-divider /> <n-divider style="margin-bottom: 32px" />
<div class="title"> <div class="title">
全局快捷方式 全局快捷方式
</div> </div>
<div class="wrapper-global"> <div class="wrapper-global">
<table style="margin-left: 100px;"> <table style="margin-left: 47px; width: 180px">
<tr> <tr>
<td><div class="key" data-key="g h" /></td> <td><div class="key" data-key="g h" /></td>
<td>进入“一键查看”主页</td> <td>进入“一键查看”主页</td>
@ -73,7 +95,7 @@ defineExpose({
<td>打开可疑文件夹</td> <td>打开可疑文件夹</td>
</tr> </tr>
</table> </table>
<table style="height: 30%;margin-left: 180px;"> <table style="height: 30%; margin-left: 180px">
<tr> <tr>
<td><div class="key" data-key="[" /></td> <td><div class="key" data-key="[" /></td>
<td>隐藏/显示当前场景左侧筛选区</td> <td>隐藏/显示当前场景左侧筛选区</td>
@ -96,29 +118,36 @@ defineExpose({
</tr> </tr>
</table> </table>
</div> </div>
<n-divider /> <n-divider style="margin: 24px 24px 32px 24px; color: #d9d9d9" />
<div class="title"> <div class="title" style="margin-top: -16.5px">
任务审批/任务终审/AI工单明细动作 任务审批/任务终审/AI工单明细动作
</div> </div>
<div class="wrapper-request"> <div class="wrapper-request">
<table style="margin-left: 100px;"> <table style="margin-left: 47px; width: 180px">
<tr> <tr>
<td><div class="key" data-key="p p" /></td> <td style="text-align: left; width: 53px">
<div class="key" data-key="p p" />
</td>
<td>通过</td> <td>通过</td>
</tr> </tr>
<tr> <tr>
<td><div class="key" data-key="x x" /></td> <td style="text-align: left">
<div class="key" data-key="x x" />
</td>
<td>不通过</td> <td>不通过</td>
</tr> </tr>
</table> </table>
<table style="margin-left: 155px;"> <table style="margin-left: 180px">
<tr> <tr>
<td><div class="key" data-key="c" /></td> <td><div class="key" data-key="c" /></td>
<td>关闭（关闭当前场景弹窗）</td> <td>关闭（关闭当前场景弹窗）</td>
</tr> </tr>
<tr> <tr>
<td><div class="key" data-key="&larr;" /><span>/</span><div class="key" data-key="&rarr;" /></td> <td>
<div class="key" data-key="&larr;" />
<span>/</span>
<div class="key" data-key="&rarr;" />
</td>
<td>打开上一条/下一条信息切换</td> <td>打开上一条/下一条信息切换</td>
</tr> </tr>
</table> </table>
@ -146,9 +175,8 @@ defineExpose({
margin-top: -20px; margin-top: -20px;
} }
.wrapper { .wrapper {
.wrapper-header { .wrapper-header {
padding: 14px; padding: 14px 0 14px 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -168,12 +196,12 @@ defineExpose({
.wrapper-right { .wrapper-right {
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC-Regular; font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular; font-weight: 400;
text-align: left; text-align: left;
color: #666666; color: #666666;
line-height: 22px; line-height: 22px;
display: flex; display: flex;
align-items: center align-items: center;
} }
.wrapper-left { .wrapper-left {
@ -181,7 +209,7 @@ defineExpose({
font-family: PingFang SC, PingFang SC-Medium; font-family: PingFang SC, PingFang SC-Medium;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
color: #333333; color: #000000;
line-height: 25px; line-height: 25px;
} }
@ -189,7 +217,10 @@ defineExpose({
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 30px; padding-left: 47px;
color: #333333;
font-weight: 600;
// 分割线自带24px间距
} }
&-header { &-header {
display: flex; display: flex;
@ -220,7 +251,7 @@ defineExpose({
} }
&-icon { &-icon {
background: #FFF; background: #fff;
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 1px; height: 1px;
@ -228,19 +259,19 @@ defineExpose({
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
&:after { &:after {
content: ''; content: "";
display: block; display: block;
width: 18px; width: 18px;
height: 1px; height: 1px;
background: #FFF; background: #fff;
transform: rotate(-90deg); transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
} }
} }
} }
&-request,&-global{ &-request,
&-global {
display: flex; display: flex;
table { table {
@ -251,7 +282,6 @@ defineExpose({
} }
tr td { tr td {
color: #333333; color: #333333;
} }
tr span { tr span {
padding: 0 10px; padding: 0 10px;
@ -269,13 +299,14 @@ defineExpose({
display: inline-block; display: inline-block;
box-sizing: content-box; box-sizing: content-box;
font-size: 16px; font-size: 16px;
font-weight: bold;
text-align: center; text-align: center;
padding: 2px 6px; padding: 2px 6px;
border: 1px solid #d6d6d6; border: 1px solid #d6d6d6;
border-left: 3px solid #d6d6d6; border-left: 3px solid #d6d6d6;
border-bottom: 3px solid #d6d6d6; border-bottom: 3px solid #d6d6d6;
background-color: #fdfdfd; background-color: #fdfdfd;
// color: #333333;
font-weight: bold;
} }
.key[data-key]::after { .key[data-key]::after {

86
src/layout/components/Header/UserSettings.vue
Unescape View File

@ -1,92 +1,92 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, onMounted, ref } from 'vue' import { computed, inject, onMounted, ref } from "vue";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { useUser } from '@/store/modules/user' import { useUser } from "@/store/modules/user";
import { getImgUrl } from '@/utils/urlUtils' import { getImgUrl } from "@/utils/urlUtils";
import defaultAvatar from '@/assets/icons/avatar.svg' import defaultAvatar from "@/assets/icons/avatar.svg";
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'logout'): void (e: "logout"): void
}>() }>();
const router = useRouter() const router = useRouter();
const userStore = useUser() const userStore = useUser();
const useInfo = userStore.getUserInfo const useInfo = userStore.getUserInfo;
const aiDisabled = ref(false) const aiDisabled = ref(false);
function handleSelect(row) { function handleSelect(row) {
userStore.updateTenantId(row.key) userStore.updateTenantId(row.key);
location.reload() location.reload();
} }
function logIt(e) { function logIt(e) {
return false return false;
} }
// 一键查看 // 一键查看
function goHome(e) { function goHome(e) {
router.push({ name: 'home' }) router.push({ name: "home" });
} }
// 任务审批 // 任务审批
function goTask(e) { function goTask(e) {
router.push({ name: 'task-main' }) router.push({ name: "task-main" });
} }
// AI工单 // AI工单
function goWorksheet(e) { function goWorksheet(e) {
router.push({ name: 'worksheet-main' }) router.push({ name: "worksheet-main" });
} }
// 任务终审 // 任务终审
function goFinal(e) { function goFinal(e) {
router.push({ name: 'final-main' }) router.push({ name: "final-main" });
} }
const mousetrap = inject('mousetrap') as any const mousetrap = inject("mousetrap") as any;
onMounted(() => { onMounted(() => {
mousetrap.bind('g h', goHome) mousetrap.bind("g h", goHome);
mousetrap.bind('g t', goTask) mousetrap.bind("g t", goTask);
mousetrap.bind('g a', goWorksheet) mousetrap.bind("g a", goWorksheet);
mousetrap.bind('g e', goFinal) mousetrap.bind("g e", goFinal);
}) });
const showPopover = ref(false) const showPopover = ref(false);
const popRef = ref(null) const popRef = ref(null);
const changeFlag = ref(false) const changeFlag = ref(false);
const iconName = computed(() => { const iconName = computed(() => {
return showPopover.value ? 'expand' : 'collapse' return showPopover.value ? "expand" : "collapse";
}) });
function handleUpdateShow(show: boolean) { function handleUpdateShow(show: boolean) {
showPopover.value = show showPopover.value = show;
} }
function logOut() { function logOut() {
(popRef.value as any).setShow(false) (popRef.value as any).setShow(false);
emit('logout') emit("logout");
} }
const currentCompanyName = computed(() => { const currentCompanyName = computed(() => {
const deptlist = useInfo.deptlist const deptlist = useInfo.deptlist;
const currentId = userStore.getTenantId const currentId = userStore.getTenantId;
const current = deptlist.find(item => item.deptno === currentId) const current = deptlist.find(item => item.deptno === currentId);
return current?.departname || 'name' return current?.departname || "name";
}) });
const options = computed(() => { const options = computed(() => {
const deptlist = useInfo.deptlist const deptlist = useInfo.deptlist;
return deptlist.map((item) => { return deptlist.map((item) => {
return { return {
label: item.departname, label: item.departname,
key: item.deptno, key: item.deptno,
} };
}) });
}) });
</script> </script>
<template> <template>
@ -155,9 +155,11 @@ const options = computed(() => {
.header { .header {
.user-name { .user-name {
font-size: 16px; font-size: 16px;
font-weight: 600;
} }
.depart-name { .depart-name {
font-size: 12px; font-size: 12px;
font-weight: 600;
} }
} }
} }
@ -194,6 +196,8 @@ const options = computed(() => {
padding: 13px 20px; padding: 13px 20px;
cursor: pointer; cursor: pointer;
color: #333333; color: #333333;
font-size: 13px;
font-weight: 600;
} }
.trigger:hover { .trigger:hover {

223
src/views/home/aside/comp/AdvanceFilter.vue
Unescape View File

@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from "@vueuse/core";
import { debounce } from 'lodash-es' import { debounce } from "lodash-es";
import { onMounted, reactive, ref, watch } from 'vue' import { onMounted, reactive, ref, watch } from "vue";
import type { FilterSearchParam } from '/#/api' import type { FilterSearchParam } from "/#/api";
import type { Filter, FilterEntity } from '/#/home' import type { Filter, FilterEntity } from "/#/home";
import { VueDraggable } from 'vue-draggable-plus' import { VueDraggable } from "vue-draggable-plus";
import { asideMap } from '@/config/aside' import { asideMap } from "@/config/aside";
import { favorite, getConditionList, sort, unfavorite } from '@/api/home/filter' import { favorite, getConditionList, sort, unfavorite } from "@/api/home/filter";
defineOptions({ name: 'AdvanceFilter' }) defineOptions({ name: "AdvanceFilter" });
const props = defineProps({ const props = defineProps({
type: { type: {
@ -16,42 +16,42 @@ const props = defineProps({
default: 0, default: 0,
required: true, required: true,
}, },
}) });
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'show-filter'): void (e: "show-filter"): void
(e: 'show-custom'): void (e: "show-custom"): void
(e: 'update:search'): void (e: "update:search"): void
(e: 'select', id: string) (e: "select", id: string)
}>() }>();
const ruleForm = reactive({ const ruleForm = reactive({
keyword: '', keyword: "",
}) });
const ruleformRef = ref() const ruleformRef = ref();
const data = ref<FilterEntity[]>([]) const data = ref<FilterEntity[]>([]);
const unData = ref<FilterEntity[]>([]) const unData = ref<FilterEntity[]>([]);
const loading = ref(false) const loading = ref(false);
const canloadMore = true const canloadMore = true;
const el = ref<HTMLDivElement | null>(null) const el = ref<HTMLDivElement | null>(null);
const popover = ref<ComponentRef | null>(null) const popover = ref<ComponentRef | null>(null);
const pagination = reactive({ const pagination = reactive({
pageNo: 1, pageNo: 1,
pageSize: 300, pageSize: 300,
}) });
const keyword = ref('') const keyword = ref("");
const currentlySelectedAdvanced = ref('高级筛选') const currentlySelectedAdvanced = ref("高级筛选");
onMounted(() => { onMounted(() => {
// data.value = generateDefaultConfig() // data.value = generateDefaultConfig()
}) });
// 默认的过滤配置 // 默认的过滤配置
function generateDefaultConfig(): FilterEntity[] { function generateDefaultConfig(): FilterEntity[] {
return Object.keys(asideMap).reduce((acc, key) => { return Object.keys(asideMap).reduce((acc, key) => {
const { label, defaultValue, isDefaultFilter } = asideMap[key] const { label, defaultValue, isDefaultFilter } = asideMap[key];
if (isDefaultFilter === true) { if (isDefaultFilter === true) {
const config = { const config = {
id: '', id: "",
name: label, name: label,
favorite: false, favorite: false,
isDefaultFilter, isDefaultFilter,
@ -61,73 +61,73 @@ function generateDefaultConfig(): FilterEntity[] {
value: defaultValue, value: defaultValue,
}, },
], ],
} };
return [...acc, config] return [...acc, config];
} }
else { else {
return acc return acc;
} }
}, []) }, []);
} }
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore() loadMore();
}, },
{ distance: 10, interval: 300, canLoadMore: () => false }, { distance: 10, interval: 300, canLoadMore: () => false },
) );
async function showClick() { async function showClick() {
getSearchedList('') getSearchedList("");
} }
async function loadMore() { async function loadMore() {
if (loading.value || el.value == null) if (loading.value || el.value == null)
return return;
const more = await featchList() const more = await featchList();
if (more.length === 0) if (more.length === 0)
return return;
data.value.push(...more) data.value.push(...more);
} }
async function featchList() { async function featchList() {
loading.value = true loading.value = true;
try { try {
const searchParam: FilterSearchParam = { const searchParam: FilterSearchParam = {
search_searchname: { value: ruleForm.keyword, op: 'like', type: 'string' }, search_searchname: { value: ruleForm.keyword, op: "like", type: "string" },
} };
const result = await getConditionList(pagination, searchParam, props.type) const result = await getConditionList(pagination, searchParam, props.type);
const { data } = result const { data } = result;
// pagination.pageNo += 1 // pagination.pageNo += 1
// canloadMore = pageCount >= pagination.pageNo // canloadMore = pageCount >= pagination.pageNo
const entityList = generateFilterEntityList(data) const entityList = generateFilterEntityList(data);
return entityList return entityList;
} }
catch (error) { catch (error) {
return [] return [];
} }
finally { finally {
loading.value = false loading.value = false;
} }
} }
// 转换服务器数据格式 // 转换服务器数据格式
function generateFilterEntityList(data) { function generateFilterEntityList(data) {
const filterEntityList = data.map((item) => { const filterEntityList = data.map((item) => {
const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item const { searchname, iztop, ocrUsersearchchildList, id, reorder } = item;
const list = ocrUsersearchchildList.map((item) => { const list = ocrUsersearchchildList.map((item) => {
const { searchfield, searchvalue } = item const { searchfield, searchvalue } = item;
return { return {
key: searchfield, key: searchfield,
value: searchvalue, value: searchvalue,
} };
}) });
const reg = new RegExp(ruleForm.keyword, 'gi') const reg = new RegExp(ruleForm.keyword, "gi");
const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`) const hilightText = searchname.replace(reg, `<span>${ruleForm.keyword}</span>`);
return { return {
id, id,
@ -137,128 +137,128 @@ function generateFilterEntityList(data) {
filterList: list, filterList: list,
reorder, reorder,
searchname, searchname,
} };
}) });
return filterEntityList return filterEntityList;
} }
function selectHandler(item: FilterEntity) { function selectHandler(item: FilterEntity) {
(popover.value as any).setShow(false) (popover.value as any).setShow(false);
currentlySelectedAdvanced.value = item.searchname currentlySelectedAdvanced.value = item.searchname;
emit('select', item.id) emit("select", item.id);
} }
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
ruleForm.keyword = word ruleForm.keyword = word;
ruleformRef.value.validate() ruleformRef.value.validate();
if (word.length < 2 && word) if (word.length < 2 && word)
return return;
getSearchedList(word) getSearchedList(word);
}, 300) }, 300);
function getSearchedList(word, isScroll = false) { function getSearchedList(word, isScroll = false) {
if (word) if (word)
pagination.pageSize = 300 pagination.pageSize = 300;
if (!word) if (!word)
pagination.pageSize = 10 pagination.pageSize = 10;
if (isScroll) if (isScroll)
pagination.pageSize = 300 pagination.pageSize = 300;
ruleForm.keyword = word ruleForm.keyword = word;
featchList().then((list) => { featchList().then((list) => {
const dataArr: FilterEntity[] = [] const dataArr: FilterEntity[] = [];
const unDataArr: FilterEntity[] = [] const unDataArr: FilterEntity[] = [];
list.forEach((item) => { list.forEach((item) => {
if (item.favorite && !item.isDefaultFilter) if (item.favorite && !item.isDefaultFilter)
dataArr.push(item) dataArr.push(item);
if (!item.favorite && !item.isDefaultFilter) if (!item.favorite && !item.isDefaultFilter)
unDataArr.push(item) unDataArr.push(item);
}) });
data.value = dataArr.sort( data.value = dataArr.sort(
(a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime)), (a, b) => Number(new Date(a.createtime)) - Number(new Date(b.createtime)),
) );
unData.value = unDataArr.sort( unData.value = unDataArr.sort(
(a, b) => Number((a as any).reorder) - Number((b as any).reorder), (a, b) => Number((a as any).reorder) - Number((b as any).reorder),
) );
}) });
} }
function favoriteHandler(event: MouseEvent, item: any) { function favoriteHandler(event: MouseEvent, item: any) {
event.stopImmediatePropagation() event.stopImmediatePropagation();
event.stopPropagation() event.stopPropagation();
const { isDefaultFilter, id } = item const { isDefaultFilter, id } = item;
if (!isDefaultFilter) { if (!isDefaultFilter) {
item.favorite = true item.favorite = true;
favorite(id) favorite(id);
data.value.forEach((v, index) => { data.value.forEach((v, index) => {
if (v.id == id) if (v.id == id)
sort(v.id, 0) sort(v.id, 0);
else sort(v.id, index + 1) else sort(v.id, index + 1);
}) });
inputHandler(ruleForm.keyword) inputHandler(ruleForm.keyword);
} }
} }
const rules = { const rules = {
keyword: [ keyword: [
{ {
trigger: ['blur', 'input', 'change'], trigger: ["blur", "input", "change"],
level: 'error', level: "error",
validator(_rule, value) { validator(_rule, value) {
if (value.length >= 2) if (value.length >= 2)
return true return true;
else return new Error('搜索关键字最少为两个') else return new Error("搜索关键字最少为两个");
}, },
}, },
], ],
} };
function unFavoriteHandler(event: MouseEvent, item) { function unFavoriteHandler(event: MouseEvent, item) {
event.stopImmediatePropagation() event.stopImmediatePropagation();
event.stopPropagation() event.stopPropagation();
const { isDefaultFilter, id } = item const { isDefaultFilter, id } = item;
if (!isDefaultFilter) { if (!isDefaultFilter) {
item.favorite = false item.favorite = false;
unfavorite(id) unfavorite(id);
inputHandler(ruleForm.keyword) inputHandler(ruleForm.keyword);
} }
} }
function handleScroll(event) { function handleScroll(event) {
let timer let timer;
if (timer) { if (timer) {
clearTimeout(timer) clearTimeout(timer);
} }
else { else {
timer = setTimeout(() => { timer = setTimeout(() => {
getSearchedList('', true) getSearchedList("", true);
}, 2000) }, 2000);
} }
} }
function moveEnd() { function moveEnd() {
unData.value.forEach((v, index) => { unData.value.forEach((v, index) => {
sort(v.id, index) sort(v.id, index);
}) });
} }
function setCurrentlySelectedAdvanced(value: string) { function setCurrentlySelectedAdvanced(value: string) {
currentlySelectedAdvanced.value = value currentlySelectedAdvanced.value = value;
} }
defineExpose({ defineExpose({
setCurrentlySelectedAdvanced, setCurrentlySelectedAdvanced,
}) });
</script> </script>
<template> <template>
@ -422,13 +422,12 @@ defineExpose({
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: absolute; position: absolute;
left: 0;
top: -10px;
width: 100%; width: 100%;
padding: 17px 16px; padding: 17px 16px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
z-index: 10; z-index: 10;
background: #ffffff; background: #ffffff;
left: 0;
&-left { &-left {
display: flex; display: flex;
@ -487,6 +486,12 @@ defineExpose({
.wrapper-left-popover { .wrapper-left-popover {
width: 248px; width: 248px;
height: 288px; height: 288px;
position: absolute;
left: 0;
top: -10px;
border: 1px solid #f3f8ff;
z-index: 10000;
background: #fff;
} }
::v-deep(.wrapper-left-popover .n-form-item) { ::v-deep(.wrapper-left-popover .n-form-item) {
display: block !important; display: block !important;

398
src/views/home/aside/comp/modals/FilterModal.vue
Unescape View File

@ -8,132 +8,135 @@ import {
reactive, reactive,
ref, ref,
unref, unref,
} from "vue"; } from 'vue'
import { NDataTable } from "naive-ui"; import { NDataTable, useModal } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from "naive-ui"; import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import type { SortableEvent } from "sortablejs"; import type { SortableEvent } from 'sortablejs'
import Sortable from "sortablejs"; import Sortable from 'sortablejs'
import { debounce } from "lodash-es"; import { debounce } from 'lodash-es'
import Action from "../Action.vue"; import selection from 'naive-ui/es/_internal/selection'
import { deleteCondition, getConditionList, sort } from "@/api/home/filter"; import Action from '../Action.vue'
import type { FilterSearchParam } from "/#/api"; import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
import selection from "naive-ui/es/_internal/selection"; import type { FilterSearchParam } from '/#/api'
import SvgIcon from "@/components/Icon/SvgIcon.vue"; import SvgIcon from '@/components/Icon/SvgIcon.vue'
import { useModal } from "naive-ui"; defineOptions({ name: 'FilterModal' })
const modal = useModal();
defineOptions({ name: "FilterModal" });
const $message = window["$message"];
const props = defineProps({ const props = defineProps({
type: { type: {
type: Number, type: Number,
default: () => 0, default: () => 0,
}, },
}); })
const emit = defineEmits<{ const emit = defineEmits<{
(e: "showNewFilter"): void; (e: 'showNewFilter'): void
(e: "editFilter", filter: any): void; (e: 'editFilter', filter: any): void
(e: "handleOk", item: any): void; (e: 'handleOk', item: any): void
}>(); }>()
const modal = useModal()
const tableData = ref<Array<RowData>>([])
const keyword = ref('')
const $message = window.$message
const show = ref(false); const show = ref(false)
const cardStyle = { const cardStyle = {
width: "808px", "width": '808px',
height: "840px", "height": '840px',
"--n-padding-bottom": "10px", '--n-padding-bottom': '10px',
"--n-padding-left": "10px", '--n-padding-left': '10px',
}; }
interface RowData { interface RowData {
id: string; id: string
searchname: string; searchname: string
createby: string; createby: string
createtime: string; createtime: string
updateby: string; updateby: string
updatetime: string; updatetime: string
} }
function sortData(row) { function sortData(row) {
console.log("sortData", row); console.log('sortData', row)
if (row.order == "descend") { if (row.order == 'descend') {
tableData.value.sort( tableData.value.sort(
(a, b) => (a, b) =>
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime() new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime(),
); )
} else if (row.order == "ascend") { }
else if (row.order == 'ascend') {
tableData.value.sort( tableData.value.sort(
(a, b) => (a, b) =>
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime() new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime(),
); )
} else { }
else {
tableData.value.sort( tableData.value.sort(
(a, b) => Number((a as any).reorder) - Number((b as any).reorder) (a, b) => Number((a as any).reorder) - Number((b as any).reorder),
); )
} }
} }
const columns: DataTableColumns<RowData> = [ const columns: DataTableColumns<RowData> = [
{ {
type: "selection", type: 'selection',
}, },
{ {
title: "操作", title: '操作',
key: "action", key: 'action',
render(row) { render(row) {
return h(Action, { return h(Action, {
options: [ options: [
{ label: "编辑", key: 1 }, { label: '编辑', key: 1 },
{ label: "删除", key: 2 }, { label: '删除', key: 2 },
], ],
id: row.id, id: row.id,
select, select,
}); })
}, },
}, },
// j // j
{ {
title: "名称", title: '名称',
key: "searchname", key: 'searchname',
ellipsis: { ellipsis: {
tooltip: true, tooltip: true,
}, },
}, },
{ {
title: "创建者", title: '创建者',
key: "createby", key: 'createby',
}, },
{ {
title: "创建时间", title: '创建时间',
key: "createtime", key: 'createtime',
width: 180, width: 180,
renderSorterIcon: ({ order }) => { renderSorterIcon: ({ order }) => {
if (order === false) return h(SvgIcon, { name: "sort-2" }); if (order === false)
if (order === "ascend") return h(SvgIcon, { name: "sort-1" }); return h(SvgIcon, { name: 'sort-2' })
if (order === "descend") return h(SvgIcon, { name: "sort-3" }); if (order === 'ascend')
return h(SvgIcon, { name: 'sort-1' })
if (order === 'descend')
return h(SvgIcon, { name: 'sort-3' })
}, },
sorter: (row1, row2) => { sorter: (row1, row2) => {
// tableData.value.sort( // tableData.value.sort(
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime() // (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
// ); // )
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime(); return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime()
}, },
}, },
{ {
title: "更新者", title: '更新者',
key: "updateby", key: 'updateby',
}, },
{ {
title: "更新时间", title: '更新时间',
key: "updatetime", key: 'updatetime',
width: 180, width: 180,
}, },
]; ]
const total = ref(0); const total = ref(0)
const loading = ref(true); const loading = ref(true)
const pagination = reactive({ const pagination = reactive({
page: 1, page: 1,
pageCount: 1, pageCount: 1,
@ -141,231 +144,233 @@ const pagination = reactive({
showSizePicker: true, showSizePicker: true,
pageSizes: [ pageSizes: [
{ {
label: "10 每页", label: '10 每页',
value: 10, value: 10,
}, },
{ {
label: "15 每页", label: '15 每页',
value: 15, value: 15,
}, },
{ {
label: "30 每页", label: '30 每页',
value: 30, value: 30,
}, },
{ {
label: "50 每页", label: '50 每页',
value: 50, value: 50,
}, },
], ],
showQuickJumper: true, showQuickJumper: true,
prefix: () => `共 ${total.value} 条数据`, prefix: () => `共 ${total.value} 条数据`,
}); })
const tableData = ref<Array<RowData>>([]);
const keyword = ref("");
async function query(page: number, pageSize: number) { async function query(page: number, pageSize: number) {
const searchParam: FilterSearchParam = { const searchParam: FilterSearchParam = {
search_searchname: { value: keyword.value, op: "like", type: "string" }, search_searchname: { value: keyword.value, op: 'like', type: 'string' },
}; }
const result = await getConditionList( const result = await getConditionList(
{ pageNo: page, pageSize }, { pageNo: page, pageSize },
searchParam, searchParam,
props.type props.type,
); )
const { data, pageCount, total: totalCount } = result; const { data, pageCount, total: totalCount } = result
tableData.value = data; tableData.value = data
pagination.page = page; pagination.page = page
total.value = totalCount; total.value = totalCount
pagination.pageCount = pageCount; pagination.pageCount = pageCount
loading.value = false; loading.value = false
} }
function afterLeave() { function afterLeave() {
pagination.page = 1; pagination.page = 1
pagination.pageCount = 1; pagination.pageCount = 1
pagination.pageSize = 10; pagination.pageSize = 10
} }
const selectionIds = ref<DataTableRowKey[]>([]); const selectionIds = ref<DataTableRowKey[]>([])
const rowKey = (row: RowData) => row.id; const rowKey = (row: RowData) => row.id
function rowProps(row: RowData) { function rowProps(row: RowData) {
return { return {
"data-id": row.id, 'data-id': row.id,
}; }
} }
function handleCheck(rowKeys: DataTableRowKey[]) { function handleCheck(rowKeys: DataTableRowKey[]) {
selectionIds.value = rowKeys; selectionIds.value = rowKeys
} }
function select(key: number, id: string) { function select(key: number, id: string) {
switch (key) { switch (key) {
case 1: case 1:
editSelection(id); editSelection(id)
break; break
case 2: case 2:
const modalInst = modal.create({ const modalInst = modal.create({
title: "确认提示", title: '确认提示',
content: "确认删除该条过滤条件吗?", content: '确认删除该条过滤条件吗?',
positiveText: "确定", positiveText: '确定',
negativeText: "取消", negativeText: '取消',
preset: "dialog", preset: 'dialog',
onPositiveClick: () => deleteSelection(id), onPositiveClick: () => deleteSelection(id),
onNegativeClick: () => modalInst.destroy(), onNegativeClick: () => modalInst.destroy(),
}); })
break; break
default: default:
break; break
} }
} }
function editSelection(id) { function editSelection(id) {
// const $message = window["$message"]; // const $message = window['$message']
// if (selectionIds.value.length === 0 || selectionIds.value.length > 1) { // if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
// $message.error("请选中一条过滤"); // $message.error('请选中一条过滤')
// return; // return
// } // }
const selectedId = id; const selectedId = id
const selectedFilter = tableData.value.find((item: any) => { const selectedFilter = tableData.value.find((item: any) => {
return item.id === selectedId; return item.id === selectedId
}); })
emit("editFilter", selectedFilter); emit('editFilter', selectedFilter)
closeModal(); closeModal()
} }
function deleteSelection(id = "") { function deleteSelection(id = '') {
if (selectionIds.value.length === 0) { if (selectionIds.value.length === 0) {
deleteCondition({ ids: id }).then(() => { deleteCondition({ ids: id }).then(() => {
query(pagination.page, pagination.pageSize); query(pagination.page, pagination.pageSize)
}); })
return; return
} }
const modalInst = modal.create({ const modalInst = modal.create({
title: "确认提示", title: '确认提示',
content: "确认删除所选过滤条件吗?", content: '确认删除所选过滤条件吗?',
positiveText: "确定", positiveText: '确定',
negativeText: "取消", negativeText: '取消',
preset: "dialog", preset: 'dialog',
onPositiveClick: () => onPositiveClick: () =>
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => { deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
selectionIds.value = []; selectionIds.value = []
query(pagination.page, pagination.pageSize); query(pagination.page, pagination.pageSize)
}), }),
onNegativeClick: () => modalInst.destroy(), onNegativeClick: () => modalInst.destroy(),
}); })
} }
async function handlePageChange(currentPage) { async function handlePageChange(currentPage) {
if (loading.value) return; if (loading.value)
pagination.page = currentPage; return
const { pageSize } = pagination; pagination.page = currentPage
await query(currentPage, pageSize); const { pageSize } = pagination
await query(currentPage, pageSize)
} }
async function handlePageSizeChange(currentPageSize) { async function handlePageSizeChange(currentPageSize) {
if (loading.value) return; if (loading.value)
return
const { page } = pagination; const { page } = pagination
pagination.pageSize = currentPageSize; pagination.pageSize = currentPageSize
await query(page, currentPageSize); await query(page, currentPageSize)
} }
function handleClick() { function handleClick() {
emit("showNewFilter"); emit('showNewFilter')
closeModal(); closeModal()
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null
const tableRef = ref<InstanceType<typeof NDataTable>>(); const tableRef = ref<InstanceType<typeof NDataTable>>()
async function showModal() { async function showModal() {
show.value = true; show.value = true
const { page, pageSize } = pagination; const { page, pageSize } = pagination
await query(page, pageSize); await query(page, pageSize)
nextTick(() => { nextTick(() => {
if (sortTable !== null) destory(); if (sortTable !== null)
destory()
const el: HTMLDivElement = tableRef.value?.$el; const el: HTMLDivElement = tableRef.value?.$el
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!; const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove }); if (tbody)
}); sortTable = Sortable.create(tbody, { onEnd, onMove })
})
} }
let relatedId = ""; let relatedId = ''
let insertafter = false; let insertafter = false
// TODO: 有bug，需跟后端联调 // TODO: 有bug，需跟后端联调
function onEnd(event: SortableEvent) { function onEnd(event: SortableEvent) {
const data = unref(tableData); const data = unref(tableData)
const oldElem = data[event.oldIndex!]; const oldElem = data[event.oldIndex!]
data.splice(event.oldIndex!, 1); data.splice(event.oldIndex!, 1)
data.splice(event.newIndex!, 0, oldElem); data.splice(event.newIndex!, 0, oldElem)
const dragId = oldElem.id; const dragId = oldElem.id
const index = data.findIndex((item) => { const index = data.findIndex((item) => {
return item.id === relatedId; return item.id === relatedId
}); })
// 插入到元素后，索引-1；插入到元素前，索引+1 // 插入到元素后，索引-1；插入到元素前，索引+1
const order = insertafter ? index - 1 : index + 1; const order = insertafter ? index - 1 : index + 1
// console.log('dragid:', dragId, 'order:', order) // console.log('dragid:', dragId, 'order:', order)
sort(dragId, order); sort(dragId, order)
} }
function onMove(evt: any) { function onMove(evt: any) {
relatedId = evt.related?.dataset?.id; relatedId = evt.related?.dataset?.id
insertafter = evt.willInsertAfter; insertafter = evt.willInsertAfter
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter) // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
} }
function destory() { function destory() {
sortTable && sortTable.destroy(); sortTable && sortTable.destroy()
sortTable = null; sortTable = null
} }
onUnmounted(() => { onUnmounted(() => {
destory(); destory()
}); })
function closeModal() { function closeModal() {
selectionIds.value = []; selectionIds.value = []
show.value = false; show.value = false
} }
defineExpose({ defineExpose({
showModal, showModal,
query, query,
pagination, pagination,
}); })
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
keyword.value = word; keyword.value = word
query(1, 5); query(1, 5)
}, 300); }, 300)
const showSearch = computed(() => { const showSearch = computed(() => {
return selectionIds.value.length > 0; return selectionIds.value.length > 0
}); })
const handleOk = () => { function handleOk() {
if (selectionIds.value.length > 1) { if (selectionIds.value.length > 1) {
$message.error("只能选择一条筛选条件"); $message.error('只能选择一条筛选条件')
return; return
} }
if (selectionIds.value.length == 1) { if (selectionIds.value.length == 1) {
const selectedId = selectionIds.value[0]; const selectedId = selectionIds.value[0]
let item = tableData.value.find((v) => v.id == selectedId); const item = tableData.value.find(v => v.id == selectedId)
emit("handleOk", item); emit('handleOk', item)
} }
if (selectionIds.value.length == 0) { if (selectionIds.value.length == 0)
emit("handleOk", ""); emit('handleOk', '')
closeModal()
} }
closeModal();
};
</script> </script>
<template> <template>
@ -374,9 +379,9 @@ const handleOk = () => {
v-model:show="show" v-model:show="show"
transform-origin="center" transform-origin="center"
display-directive="if" display-directive="if"
@after-leave="afterLeave"
:mask-closable="false" :mask-closable="false"
class="modal_wrapper" class="modal_wrapper"
@after-leave="afterLeave"
> >
<n-card <n-card
:style="cardStyle" :style="cardStyle"
@ -396,8 +401,7 @@ const handleOk = () => {
'font-weight': '600', 'font-weight': '600',
}" }"
class="wrapper-info-title" class="wrapper-info-title"
>基本信息</span >基本信息</span>
>
</div> </div>
</div> </div>
@ -429,13 +433,11 @@ const handleOk = () => {
</n-button> </n-button>
</div> </div>
<div class="msg"> <div class="msg">
<span <span>已选中
>已选中
<span style="color: #507afd; font-size: 16px">{{ <span style="color: #507afd; font-size: 16px">{{
selectionIds.length selectionIds.length
}}</span> }}</span>
项</span 项</span>
>
<a @click="selectionIds = []">清空</a> <a @click="selectionIds = []">清空</a>
</div> </div>
</div> </div>
@ -482,8 +484,9 @@ const handleOk = () => {
padding: 14px; padding: 14px;
&-title { &-title {
font-weight: bold; font-weight: 600;
font-size: 20px; color: #333333;
font-size: 18px;
height: 24px; height: 24px;
} }
@ -521,7 +524,8 @@ const handleOk = () => {
} }
&-table { &-table {
margin-top: 17px; //17-> 34-24/2+x
margin-top: 12px;
} }
&-footer { &-footer {
@ -537,8 +541,9 @@ const handleOk = () => {
&:before { &:before {
background-color: #1980ff; background-color: #1980ff;
content: ""; content: "";
width: 5px; width: 4px;
border-radius: 2px; height: 18px;
border-radius: 3px;
top: 0; top: 0;
left: 3px; left: 3px;
bottom: 0; bottom: 0;
@ -555,7 +560,6 @@ const handleOk = () => {
} }
} }
.del_btn { .del_btn {
margin-left: 12px;
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
} }
@ -580,9 +584,7 @@ const handleOk = () => {
font-size: 14px !important; font-size: 14px !important;
color: #000000 !important; color: #000000 !important;
} }
::v-deep(.n-data-table ::v-deep(.n-data-table .n-data-table-td) {
.n-data-table-tr:not(.n-data-table-tr--summary):hover
> .n-data-table-td) {
color: #666666 !important; color: #666666 !important;
font-size: 14px !important; font-size: 14px !important;
} }
@ -590,8 +592,6 @@ const handleOk = () => {
position: relative; position: relative;
left: -80px; left: -80px;
} }
.modal_wrapper {
}
::v-deep(.n-input .n-input__input-el) { ::v-deep(.n-input .n-input__input-el) {
height: 24px; height: 24px;
} }

239
src/views/home/content/Content.vue
Unescape View File

@ -1,21 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import {
createPackage,
getCheckDuplicateStatus,
getLastCheckNo,
getPictureList,
oneClickCheckTaskPackage,
queryPageListByCheckNo,
removeCheckDuplicate,
} from "@/api/home/main";
import avatar from "@/assets/images/avatar.jpg";
import { timeOptions, viewOptions } from "@/config/home";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useConfig } from "@/store/modules/asideConfig";
import { getViewportOffset } from "@/utils/domUtils";
import { hideDownload } from "@/utils/image";
import emitter from "@/utils/mitt";
import { getImgUrl } from "@/utils/urlUtils";
import { EllipsisHorizontal, EyeOutline as EyeOutlineIcon } from "@vicons/ionicons5"; import { EllipsisHorizontal, EyeOutline as EyeOutlineIcon } from "@vicons/ionicons5";
import { Download as DownloadIcon, Upload as UploadIcon } from "@vicons/tabler"; import { Download as DownloadIcon, Upload as UploadIcon } from "@vicons/tabler";
import { Icon } from "@vicons/utils"; import { Icon } from "@vicons/utils";
@ -38,6 +21,7 @@ import {
unref, unref,
watch, watch,
} from "vue"; } from "vue";
import axios from "axios";
import CheckingTaskModal from "./modal/CheckingTaskModal.vue"; import CheckingTaskModal from "./modal/CheckingTaskModal.vue";
import FinishPackageModal from "./modal/FinishPackageModal.vue"; import FinishPackageModal from "./modal/FinishPackageModal.vue";
import GeneratePackageModal from "./modal/GeneratePackageModal.vue"; import GeneratePackageModal from "./modal/GeneratePackageModal.vue";
@ -47,8 +31,27 @@ import QueryRepeatedTasksModal from "./modal/QueryRepeatedTasksModal.vue";
import type { PictureSortParam } from "/#/api"; import type { PictureSortParam } from "/#/api";
import defaultAvatar from "@/assets/icons/avatar.svg"; import defaultAvatar from "@/assets/icons/avatar.svg";
import baseImg from "@/assets/images/baseImg.png"; import baseImg from "@/assets/images/baseImg.png";
import axios from "axios"; import { getImgUrl } from "@/utils/urlUtils";
import emitter from "@/utils/mitt";
import { hideDownload } from "@/utils/image";
import { getViewportOffset } from "@/utils/domUtils";
import { useConfig } from "@/store/modules/asideConfig";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { timeOptions, viewOptions } from "@/config/home";
import avatar from "@/assets/images/avatar.jpg";
import {
createPackage,
getCheckDuplicateStatus,
getLastCheckNo,
getPictureList,
oneClickCheckTaskPackage,
queryPageListByCheckNo,
removeCheckDuplicate,
} from "@/api/home/main";
const listData = ref<any[]>([]);
const timer = ref();
const showClose = ref(false);
const deviceHeight = ref(600); const deviceHeight = ref(600);
let _masonry: null | Masonry = null; let _masonry: null | Masonry = null;
let _imagesload: any; let _imagesload: any;
@ -97,9 +100,11 @@ const listStyle = computed(() => {
}); });
const layout = debounce(() => { const layout = debounce(() => {
if (masonryRef.value == null || el.value == null) return; if (masonryRef.value == null || el.value == null)
return;
if (_masonry !== null) (_masonry as any).addItems(); if (_masonry !== null)
(_masonry as any).addItems();
_masonry = new Masonry(masonryRef.value as any, { _masonry = new Masonry(masonryRef.value as any, {
itemSelector: ".grid-item", itemSelector: ".grid-item",
@ -113,7 +118,8 @@ const layout = debounce(() => {
_imagesload.on("done", (instance) => { _imagesload.on("done", (instance) => {
(_masonry as any).layout(); (_masonry as any).layout();
if (!el.value) return; if (!el.value)
return;
loading.value = false; loading.value = false;
}); });
@ -128,7 +134,7 @@ useInfiniteScroll(
() => { () => {
loadMore(); loadMore();
}, },
{ distance: 10, canLoadMore: () => canloadMore } { distance: 10, canLoadMore: () => canloadMore },
); );
onUpdated(() => { onUpdated(() => {
@ -152,8 +158,8 @@ const viewLabel = computed(() => {
return item?.label; return item?.label;
}); });
let isAllowDownload = ref(true); const isAllowDownload = ref(true);
let calNum = ref(0); const calNum = ref(0);
const searchValue = ref(""); const searchValue = ref("");
const isInitSeaerch = ref(false); // 是否初始化搜索 const isInitSeaerch = ref(false); // 是否初始化搜索
@ -176,18 +182,17 @@ watch(
listData.value = more; listData.value = more;
isInitSeaerch.value = false; isInitSeaerch.value = false;
// configStore.setSearchValue(""); // configStore.setSearchValue("");
} else { }
else {
isInitSeaerch.value = true; isInitSeaerch.value = true;
pagination.pageNo = 0; pagination.pageNo = 0;
const more = await featchList(); const more = await featchList();
listData.value = more; listData.value = more;
isInitSeaerch.value = false; isInitSeaerch.value = false;
} }
} },
); );
const listData = ref<any[]>([]);
async function featchList(userSearchId?: string) { async function featchList(userSearchId?: string) {
loading.value = true; loading.value = true;
try { try {
@ -206,15 +211,15 @@ async function featchList(userSearchId?: string) {
data: [], data: [],
total: 0, total: 0,
}; };
let sortObj: any = {}; // rao start const sortObj: any = {}; // rao start
if (sortBy.orderbyvalue == "pictureResult") { if (sortBy.orderbyvalue == "pictureResult")
sortObj.ordertype = sortBy.orderbyname; sortObj.ordertype = sortBy.orderbyname;
} else if (sortBy.orderbyvalue == "fromuptime") { else if (sortBy.orderbyvalue == "fromuptime")
sortObj.orderByTime = sortBy.orderbyname; sortObj.orderByTime = sortBy.orderbyname;
}
if (params["izsimilarity"] && typeof params["izsimilarity"] != "string") { if (params.izsimilarity && typeof params.izsimilarity != "string")
params["izsimilarity"] = params["izsimilarity"].join("-"); params.izsimilarity = params.izsimilarity.join("-");
}
// rao end // rao end
if (checkTaskStatus.value === 2 && isRefresh) { if (checkTaskStatus.value === 2 && isRefresh) {
@ -226,7 +231,8 @@ async function featchList(userSearchId?: string) {
checkDuplicateNo: checkDuplicateNo.value, checkDuplicateNo: checkDuplicateNo.value,
upUserName: searchValue, upUserName: searchValue,
}); });
} else { }
else {
result = await getPictureList({ result = await getPictureList({
...pagination, ...pagination,
...contentParams, ...contentParams,
@ -253,14 +259,16 @@ async function featchList(userSearchId?: string) {
}); });
return list; return list;
} catch (error) { }
catch (error) {
canloadMore = false; canloadMore = false;
return []; return [];
} }
} }
async function loadMore() { async function loadMore() {
if (loading.value || el.value == null) return; if (loading.value || el.value == null)
return;
const more = await featchList(); const more = await featchList();
// if(isInitSeaerch.value) { // if(isInitSeaerch.value) {
@ -272,15 +280,15 @@ async function loadMore() {
const gridHeight = computed(() => { const gridHeight = computed(() => {
let height = ""; let height = "";
if (viewMode.value === "masonry") { if (viewMode.value === "masonry")
height = ""; height = "";
} else if (viewMode.value === "horizontalVersion") { else if (viewMode.value === "horizontalVersion")
height = "145px"; height = "145px";
} else if (viewMode.value === "verticalVersion") { else if (viewMode.value === "verticalVersion")
height = "300px"; height = "300px";
} else if (viewMode.value === "3:4") { else if (viewMode.value === "3:4")
height = "240px"; height = "240px";
}
return height; return height;
}); });
@ -290,52 +298,53 @@ async function oneCheck() {
console.log("searchValue", asideVal, searchValue.value); console.log("searchValue", asideVal, searchValue.value);
if (asideVal.izyear && asideVal.izyear.length == 2) { if (asideVal.izyear && asideVal.izyear.length == 2) {
asideVal.izyear = asideVal.izyear
dayjs(asideVal.izyear[0]).format("YYYY/MM/DD") + = `${dayjs(asideVal.izyear[0]).format("YYYY/MM/DD")
"-" + }-${
dayjs(asideVal.izyear[1]).format("YYYY/MM/DD"); dayjs(asideVal.izyear[1]).format("YYYY/MM/DD")}`;
}
if (asideVal["izsimilarity"] && typeof asideVal["izsimilarity"] != "string") {
asideVal["izsimilarity"] = asideVal["izsimilarity"].join("-");
} }
if (asideVal.izsimilarity && typeof asideVal.izsimilarity != "string")
asideVal.izsimilarity = asideVal.izsimilarity.join("-");
const tasksLoadingModal = queryRepeatedTasksModalRef.value as any; const tasksLoadingModal = queryRepeatedTasksModalRef.value as any;
console.log("calNum.value111111111111111", calNum.value, checkTaskStatus.value); console.log("calNum.value111111111111111", calNum.value, checkTaskStatus.value);
if (calNum.value == 0 && isRefresh.value) { if (calNum.value == 0 && isRefresh.value) {
if (timer.value) { if (timer.value)
clearInterval(timer.value); clearInterval(timer.value);
}
timer.value = setInterval(() => { timer.value = setInterval(() => {
console.log("calNum.value2222222222222", calNum.value, checkTaskStatus.value); console.log("calNum.value2222222222222", calNum.value, checkTaskStatus.value);
if (checkDuplicateNo.value) { if (checkDuplicateNo.value) {
getCheckDuplicateStatus(checkDuplicateNo.value).then((res) => { getCheckDuplicateStatus(checkDuplicateNo.value).then((res) => {
if (res.code === "OK") { if (res.code === "OK") {
checkTaskStatus.value = res.data.status; checkTaskStatus.value = res.data.status;
if (calNum.value < 90) { if (calNum.value < 90)
calNum.value = calNum.value + 10; calNum.value = calNum.value + 10;
}
configStore.setTimeNum(calNum.value); configStore.setTimeNum(calNum.value);
if (checkTaskStatus.value === 2 || checkTaskStatus.value === 3) { if (checkTaskStatus.value === 2 || checkTaskStatus.value === 3) {
if (checkTaskStatus.value === 2) { if (checkTaskStatus.value === 2)
message.success("任务执行完毕，正在刷新数据..."); message.success("任务执行完毕，正在刷新数据...");
} else { else
message.error("查询异常"); message.error("查询异常");
}
tasksLoadingModal.closeOnlyModal(); tasksLoadingModal.closeOnlyModal();
configStore.setTimeNum(100); configStore.setTimeNum(100);
if (timer.value) { if (timer.value)
clearInterval(timer.value); clearInterval(timer.value);
}
setTimeout(() => { setTimeout(() => {
configStore.setTimeNum(0); configStore.setTimeNum(0);
}, 1000); }, 1000);
reset(); reset();
loadMore(); loadMore();
} }
} else {
if (timer.value) {
clearInterval(timer.value);
} }
else {
if (timer.value)
clearInterval(timer.value);
} }
}); });
} }
@ -353,7 +362,8 @@ async function oneCheck() {
checkDuplicateNo.value = res.data.checkDuplicateNo; checkDuplicateNo.value = res.data.checkDuplicateNo;
checkTaskStatus.value = res.data.status; checkTaskStatus.value = res.data.status;
tasksLoadingModal.showModal(); // 暂时rao tasksLoadingModal.showModal(); // 暂时rao
} else { }
else {
message.error(res.message || "查重失败"); message.error(res.message || "查重失败");
} }
}); });
@ -371,9 +381,9 @@ async function showAddPackage() {
async function tasksLoadingCloseCallback() { async function tasksLoadingCloseCallback() {
const checkingTaskModal = checkingTaskModalRef.value as any; const checkingTaskModal = checkingTaskModalRef.value as any;
checkingTaskModal.showModal(); checkingTaskModal.showModal();
if (isRefresh.value) { if (isRefresh.value)
refresh(true); refresh(true);
}
} }
async function showLoginSuccessModal() { async function showLoginSuccessModal() {
@ -418,9 +428,9 @@ onMounted(() => {
// }); // });
// 一件键重——获取任务编号 // 一件键重——获取任务编号
getLastCheckNo().then((res) => { getLastCheckNo().then((res) => {
if (res.code === "OK") { if (res.code === "OK")
checkDuplicateNo.value = res.data; checkDuplicateNo.value = res.data;
}
}); });
nextTick(() => { nextTick(() => {
computeListHeight(); computeListHeight();
@ -442,7 +452,7 @@ watch(
(newVal, oldVal) => { (newVal, oldVal) => {
refreshHandler(); refreshHandler();
}, },
{ deep: true } { deep: true },
); );
function reset() { function reset() {
@ -459,7 +469,8 @@ function reset() {
async function refreshHandler(filtersearchId?: any) { async function refreshHandler(filtersearchId?: any) {
reset(); reset();
if (filtersearchId) filterId = filtersearchId; if (filtersearchId)
filterId = filtersearchId;
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
@ -468,7 +479,7 @@ async function refreshHandler(filtersearchId?: any) {
() => { () => {
loadMore(); loadMore();
}, },
{ distance: 10, canLoadMore: () => canloadMore } { distance: 10, canLoadMore: () => canloadMore },
); );
}, 300); }, 300);
}); });
@ -497,9 +508,8 @@ async function downloadImage(item) {
cache: "default", cache: "default",
}); });
// 检查响应状态码，确保请求成功 // 检查响应状态码，确保请求成功
if (!response.ok) { if (!response.ok)
throw new Error(`HTTP error! Status: ${response.status}`); throw new Error(`HTTP error! Status: ${response.status}`);
}
// 读取 Blob 数据 // 读取 Blob 数据
const blob = await response.blob(); const blob = await response.blob();
@ -519,7 +529,8 @@ async function downloadImage(item) {
// 清理 // 清理
URL.revokeObjectURL(link.href); URL.revokeObjectURL(link.href);
document.body.removeChild(link); document.body.removeChild(link);
} catch (error) { }
catch (error) {
console.error("下载图片时发生错误:", error); console.error("下载图片时发生错误:", error);
} }
} }
@ -532,8 +543,6 @@ function previewHandler(index: number, event: MouseEvent) {
(imageRef.value?.[index] as any).click(); (imageRef.value?.[index] as any).click();
} }
const timer = ref();
/** /**
* 检查查重状态 * 检查查重状态
*/ */
@ -551,35 +560,36 @@ function refresh(val?: any) {
// } // }
if ( if (
(checkTaskStatus.value === 2 || checkTaskStatus.value === 3) && (checkTaskStatus.value === 2 || checkTaskStatus.value === 3)
isRefresh.value && isRefresh.value
) { ) {
configStore.setTimeNum(100); configStore.setTimeNum(100);
checkingTaskModal.closeModal(); checkingTaskModal.closeModal();
isRefresh.value = false; isRefresh.value = false;
if (checkTaskStatus.value === 2) { if (checkTaskStatus.value === 2)
message.success("任务执行完毕，正在刷新数据..."); message.success("任务执行完毕，正在刷新数据...");
} else { else
message.error("查询异常"); message.error("查询异常");
}
if (timer.value) { if (timer.value)
clearInterval(timer.value); clearInterval(timer.value);
}
reset(); reset();
loadMore(); loadMore();
configStore.setTimeNum(0); configStore.setTimeNum(0);
} else if (checkTaskStatus.value === 1) { }
return; else if (checkTaskStatus.value === 1) {
} }
} }
}); });
return;
} }
} }
/** /**
* 取消查重任务 * 取消查重任务
*/ */
function cancel(val) { function cancel() {
if (checkTaskStatus.value === 1) { if (checkTaskStatus.value === 1) {
removeCheckDuplicate(checkDuplicateNo.value).then((res) => { removeCheckDuplicate(checkDuplicateNo.value).then((res) => {
if (res.code === "OK") { if (res.code === "OK") {
@ -591,13 +601,13 @@ function cancel(val) {
} }
} }
const renderIcon = (icon: Component) => { function renderIcon(icon: Component) {
return () => { return () => {
return h(NIcon, null, { return h(NIcon, null, {
default: () => h(icon), default: () => h(icon),
}); });
}; };
}; }
const dropdownOptions = ref([ const dropdownOptions = ref([
{ {
@ -617,10 +627,10 @@ const dropdownOptions = ref([
}, },
]); ]);
const loadImgOver = (item) => { function loadImgOver(item) {
console.log("loadImgOver", item); console.log("loadImgOver", item);
setTimeout(() => (item.loadOver = true), 2000); setTimeout(() => (item.loadOver = true), 2000);
}; }
defineExpose({ defineExpose({
showLoginSuccessModal, showLoginSuccessModal,
@ -671,7 +681,7 @@ defineExpose({
<div class="dropdown"> <div class="dropdown">
<!-- <span>{{ viewLabel || '请选择' }}</span> --> <!-- <span>{{ viewLabel || '请选择' }}</span> -->
<span>视图</span> <span>视图</span>
<SvgIcon class="gap" name="arrow-botton" size="14" /> <SvgIcon class="gap" name="arrow-botton" size="16" />
</div> </div>
</n-popselect> </n-popselect>
<div <div
@ -679,21 +689,20 @@ defineExpose({
@click="sortHandler('fromuptime')" @click="sortHandler('fromuptime')"
> >
<span>时间排序</span> <span>时间排序</span>
<SvgIcon style="margin-left: 8px" name="sort" size="12" /> <SvgIcon style="margin-left: 8px" name="sort" size="16" />
</div> </div>
<div <div
style="margin-left: 15px; cursor: pointer; color: #323233" style="margin-left: 15px; cursor: pointer; color: #323233"
@click="sortHandler('pictureResult')" @click="sortHandler('pictureResult')"
> >
<span>相似度排序</span> <span>相似度排序</span>
<SvgIcon style="margin-left: 8px" name="sort" size="12" /> <SvgIcon style="margin-left: 8px" name="sort" size="16" />
</div> </div>
</div> </div>
<span style="font-size: 16px; color: #333" <span style="font-size: 16px; color: #333">共
>共 <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
<span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span
>
</div> </div>
<n-spin :show="loading"> <n-spin :show="loading">
<div ref="el" class="scroll" :style="listStyle"> <div ref="el" class="scroll" :style="listStyle">
<!-- <n-scrollbar :on-scroll="scrollHandler"> --> <!-- <n-scrollbar :on-scroll="scrollHandler"> -->
@ -709,16 +718,22 @@ defineExpose({
class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
:src="item.imgUrl" :src="item.imgUrl"
> --> > -->
<n-image <n-image
ref="imageRef"
class="img" class="img"
:img-props="{ onClick: hideDownload }" :img-props="{
onClick: ($event) => {
hideDownload($event);
showClose = true;
},
}"
:class="{ :class="{
'img-fit': viewMode === 'horizontalVersion', 'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}" }"
:preview-src="item.imgUrl" :preview-src="item.imgUrl"
:src="item.thumburl" :src="item.thumburl"
ref="imageRef"
/> />
<!-- @load="loadImgOver(item)" --> <!-- @load="loadImgOver(item)" -->
<!-- <n-image <!-- <n-image
@ -731,13 +746,13 @@ defineExpose({
v-show="!item.loadOver" v-show="!item.loadOver"
/> --> /> -->
<div class="percent" v-if="item.similar != -1"> <div v-if="item.similar != -1" class="percent">
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" /> <SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
<div class="val"> <div class="val">
{{ `${item.similar}%` }} {{ `${item.similar}%` }}
</div> </div>
</div> </div>
<div class="glass" v-if="isAllowDownload"> <div v-if="isAllowDownload" class="glass">
<SvgIcon <SvgIcon
size="16" size="16"
name="download" name="download"
@ -753,7 +768,9 @@ defineExpose({
<template #trigger> <template #trigger>
<span>{{ item.imgName }}</span> <span>{{ item.imgName }}</span>
</template> </template>
{{ item.imgName }} <span
style="font-size: 12px; margin-top: 4px; margin-bottom: 16px"
>{{ item.imgName }}</span>
</n-tooltip> </n-tooltip>
</div> </div>
<div class="icon-wrap" @click="previewHandler(index, $event)"> <div class="icon-wrap" @click="previewHandler(index, $event)">
@ -787,11 +804,14 @@ defineExpose({
<GeneratePackageModal ref="generateModalRef" /> <GeneratePackageModal ref="generateModalRef" />
<QueryRepeatedTasksModal <QueryRepeatedTasksModal
ref="queryRepeatedTasksModalRef" ref="queryRepeatedTasksModalRef"
@closeCallback="tasksLoadingCloseCallback" @close-callback="tasksLoadingCloseCallback"
/> />
<LoginSuccessModal ref="LoginSuccessModalRef" /> <LoginSuccessModal ref="LoginSuccessModalRef" />
<FinishPackageModal ref="finishPackageModal" :id="packageIdRef" /> <FinishPackageModal :id="packageIdRef" ref="finishPackageModal" />
<CheckingTaskModal ref="checkingTaskModalRef" @refresh="refresh" @cancel="cancel" /> <CheckingTaskModal ref="checkingTaskModalRef" @refresh="refresh" @cancel="cancel" />
<!-- <div class="close_box" v-show="showClose" @click="showClose = false">
<SvgIcon size="24" name="close-none-border" />
</div> -->
</div> </div>
</template> </template>
@ -914,6 +934,7 @@ defineExpose({
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: 0.5s; transition: 0.5s;
margin: 0 6px 10px 6px;
.glass { .glass {
position: absolute; position: absolute;
@ -940,7 +961,9 @@ defineExpose({
border-radius: 7px; border-radius: 7px;
.img-name { .img-name {
width: 70%; // width: 70%;
width: 15px;
height: 15px;
color: #fff; color: #fff;
/* 设置文本溢出时的样式为省略号 */ /* 设置文本溢出时的样式为省略号 */
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1026,4 +1049,10 @@ defineExpose({
text-align: center; text-align: center;
} }
} }
.close_box {
position: absolute;
right: 10%;
top: 20%;
z-index: 10000000000000000000;
}
</style> </style>

142
src/views/task/aside/TaskList.vue
Unescape View File

@ -1,101 +1,101 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useInfiniteScroll } from '@vueuse/core' import { useInfiniteScroll } from "@vueuse/core";
import { defineProps, onMounted, onUnmounted, reactive, ref, watch } from 'vue' import { defineProps, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import ListItem from './ListItem.vue' import ListItem from "./ListItem.vue";
import emitter from '@/utils/mitt' import emitter from "@/utils/mitt";
import { useTaskStore } from '@/store/modules/task' import { useTaskStore } from "@/store/modules/task";
defineProps({ defineProps({
showFieldList: { showFieldList: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}) });
const taskStore = useTaskStore() const taskStore = useTaskStore();
const data = ref<any[]>([]) const data = ref<any[]>([]);
const activeId = ref('') const activeId = ref("");
const el = ref<HTMLDivElement | null>(null) const el = ref<HTMLDivElement | null>(null);
const keyword = ref('') const keyword = ref("");
const canloadMore = ref(true) const canloadMore = ref(true);
const isLoading = ref(false) const isLoading = ref(false);
const searchId = ref('') const searchId = ref("");
const pagination = reactive({ const pagination = reactive({
pageNo: 0, pageNo: 0,
pageSize: 30, pageSize: 30,
}) });
function selectHandler(item, index: number) { function selectHandler(item, index: number) {
activeId.value = item.id activeId.value = item.id;
console.log(activeId.value, item.id) console.log(activeId.value, item.id);
console.log(index) console.log(index);
taskStore.setActive(index, item.id) taskStore.setActive(index, item.id);
} }
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore() loadMore();
}, },
{ distance: 10, interval: 1500, canLoadMore: () => canloadMore.value }, { distance: 10, interval: 1500, canLoadMore: () => canloadMore.value },
) );
async function loadMore() { async function loadMore() {
if (isLoading.value || el.value == null) if (isLoading.value || el.value == null)
return return;
isLoading.value = true isLoading.value = true;
try { try {
const more = await fetchList() const more = await fetchList();
data.value.push(...more) data.value.push(...more);
} }
finally { finally {
isLoading.value = false isLoading.value = false;
} }
} }
// 获取左侧列表 // 获取左侧列表
async function fetchList() { async function fetchList() {
try { try {
pagination.pageNo += 1 pagination.pageNo += 1;
const result = await taskStore.fetchApprovalList({ const result = await taskStore.fetchApprovalList({
...pagination, ...pagination,
keyword: keyword.value, keyword: keyword.value,
userSearchId: searchId.value, userSearchId: searchId.value,
}) });
const { data, pageCount } = result const { data, pageCount } = result;
canloadMore.value = pageCount >= pagination.pageNo canloadMore.value = pageCount >= pagination.pageNo;
return data || [] return data || [];
} }
catch (error) { catch (error) {
canloadMore.value = false canloadMore.value = false;
return [] return [];
} }
} }
watch( watch(
() => taskStore.activeId, () => taskStore.activeId,
(newVal) => { (newVal) => {
activeId.value = newVal activeId.value = newVal;
}, },
) );
watch( watch(
() => taskStore.inFileId, () => taskStore.inFileId,
async (newVal) => { async (newVal) => {
const newlist = [] const newlist = [];
const filterid = newVal.taskname const filterid = newVal.taskname;
console.log(filterid) console.log(filterid);
const index = data.value.findIndex(person => person.fromtaskname === filterid) const index = data.value.findIndex(person => person.fromtaskname === filterid);
const ovelist = data.value.filter(item => item.fromtaskname !== filterid) const ovelist = data.value.filter(item => item.fromtaskname !== filterid);
ovelist.map((item) => { ovelist.map((item) => {
newlist.push(item) newlist.push(item);
return item return item;
}) });
data.value = newlist data.value = newlist;
activeId.value = newlist[index].id activeId.value = newlist[index].id;
taskStore.setActive(index, newlist[index].id) taskStore.setActive(index, newlist[index].id);
// taskStore.setActive(index) // taskStore.setActive(index)
// activeId.value = data[index+1].id // activeId.value = data[index+1].id
// selectHandler(data[index].id, index) // selectHandler(data[index].id, index)
@ -108,55 +108,55 @@ watch(
taskStore.setActive(2) taskStore.setActive(2)
alert(1) */ alert(1) */
}, },
) );
function reset() { function reset() {
pagination.pageNo = 0 pagination.pageNo = 0;
pagination.pageSize = 30 pagination.pageSize = 30;
canloadMore.value = true canloadMore.value = true;
data.value.length = 0 data.value.length = 0;
taskStore.reset() taskStore.reset();
} }
async function search(word: string) { async function search(word: string) {
keyword.value = word keyword.value = word;
reset() reset();
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore() loadMore();
}, },
{ distance: 10, canLoadMore: () => canloadMore.value }, { distance: 10, canLoadMore: () => canloadMore.value },
) );
} }
onMounted(() => { onMounted(() => {
emitter.on('refresh', refreshHandler) emitter.on("refresh", refreshHandler);
emitter.on('filter', async (id) => { emitter.on("filter", async (id) => {
await reset() await reset();
searchId.value = id searchId.value = id;
data.value = await fetchList() data.value = await fetchList();
activeId.value = data.value[0].id activeId.value = data.value[0]?.id;
console.log(data.value) console.log(data.value);
}) });
}) });
onUnmounted(() => { onUnmounted(() => {
emitter.off('refresh', refreshHandler) emitter.off("refresh", refreshHandler);
}) });
async function refreshHandler() { async function refreshHandler() {
search('') search("");
} }
function setStatusName(text) { function setStatusName(text) {
const index = taskStore.getCurrentIndex const index = taskStore.getCurrentIndex;
data.value[index].statshisText = text data.value[index].statshisText = text;
} }
defineExpose({ defineExpose({
search, search,
setStatusName, setStatusName,
}) });
</script> </script>
<template> <template>

Write Preview
Loading…
Cancel
Save