fix: 处理图鉴管理布局样式

1 year ago · 878a81a355
parent b80d9edef4
commit 878a81a355
3 changed files with 122 additions and 110 deletions
--- a/src/views/worksheet/aside/ListItem.vue
+++ b/src/views/worksheet/aside/ListItem.vue
@ -132,7 +132,7 @@ onMounted(async () => {
    <template
      v-if="showFieldList?.length > 5"
    >
-      <div class="absolute bottom-0 py-[8px] pl-[36px] item-action">
+      <div class="absolute bottom-0 py-[8px] pl-[36px] text-[#666] item-action">
        <span class="cursor-pointer" @click.stop="showFull = !showFull">
          <SvgIcon style="margin-left: 6px" name="expand" size="16" />
          <SvgIcon style="margin-left: 6px" name="collapse" size="16" />
--- a/src/views/worksheet/aside/WorkSheetList.vue
+++ b/src/views/worksheet/aside/WorkSheetList.vue
@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { throttle } from "lodash-es";
-import { useInfiniteScroll } from "@vueuse/core";
-import { useMessage } from "naive-ui";
-import ApprovalModal from "../modal/ApprovalModal.vue";
-import ListItem from "./ListItem.vue";
-import { deletePackage } from "@/api/home/main";
-import { useWorkOrder } from "@/store/modules/workOrder";
-import { isEmpty } from "@/utils";
-import type { PackageListItem } from "/#/workorder";
-import NotPassed from "@/components/NotPassed.vue";
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { throttle } from 'lodash-es'
+import { useInfiniteScroll } from '@vueuse/core'
+import { useMessage } from 'naive-ui'
+import ApprovalModal from '../modal/ApprovalModal.vue'
+import ListItem from './ListItem.vue'
+import { deletePackage } from '@/api/home/main'
+import { useWorkOrder } from '@/store/modules/workOrder'
+import { isEmpty } from '@/utils'
+import type { PackageListItem } from '/#/workorder'
+import NotPassed from '@/components/NotPassed.vue'

 defineProps({
  showFieldList: {
@ -20,57 +20,59 @@ defineProps({
    type: Array,
    default: () => [],
  },
-});
+})

-const emit = defineEmits(["ApprovalOver"]);
+const emit = defineEmits(['ApprovalOver'])

-const workStore = useWorkOrder();
-const data = ref<PackageListItem[]>([]);
-const activeId = ref("");
-const el = ref<HTMLDivElement | null>(null);
-const keyword = ref("");
-const canloadMore = ref(true);
-const isLoading = ref(false);
+const workStore = useWorkOrder()
+const data = ref<PackageListItem[]>([])
+const activeId = ref('')
+const el = ref<HTMLDivElement | null>(null)
+const keyword = ref('')
+const canloadMore = ref(true)
+const isLoading = ref(false)

 const pagination = reactive({
  pageNo: 0,
  pageSize: 10,
-});
+})

-const approvalModalRef: any = ref(null);
-const notPassedRef: any = ref(null);
-const overTask = ref<any>(null);
+const approvalModalRef: any = ref(null)
+const notPassedRef: any = ref(null)
+const overTask = ref<any>(null)

 function selectHandler(id: string, index: number) {
  // console.log('selectHandler',id)
-  workStore.setActive(index);
+  workStore.setActive(index)
  // showModal(approvalModalRef, id)
 }

 useInfiniteScroll(
  el as any,
  () => {
-    loadMore();
+    loadMore()
  },
  {
    distance: 10,
    interval: 1500,
    canLoadMore: () => canloadMore.value,
-  }
-);
+  },
+)

 async function loadMore() {
-  if (isLoading.value || el.value == null) return;
-  isLoading.value = true;
+  if (isLoading.value || el.value == null)
+    return
+  isLoading.value = true
  try {
-    const more = await fetchList();
+    const more = await fetchList()
    more.forEach((ele) => {
-      ele.search = JSON.parse(ele.search);
+      ele.search = JSON.parse(ele.search)
      // ele.search.createTime = ele.search.submit_date_timestamp
-    });
-    data.value.push(...more);
-  } finally {
-    isLoading.value = false;
+    })
+    data.value.push(...more)
+  }
+  finally {
+    isLoading.value = false
  }
 }

@ -82,112 +84,117 @@ async function loadMore() {

 async function fetchList() {
  try {
-    pagination.pageNo += 1;
-    const result = await workStore.fetchOrderList(pagination, keyword.value);
-    const { data, pageCount } = result;
-    if (pageCount !== 0) canloadMore.value = pageCount >= pagination.pageNo;
-    else canloadMore.value = false;
-
-    return data || [];
-  } catch (error) {
-    canloadMore.value = false;
-    return [];
+    pagination.pageNo += 1
+    const result = await workStore.fetchOrderList(pagination, keyword.value)
+    const { data, pageCount } = result
+    if (pageCount !== 0)
+      canloadMore.value = pageCount >= pagination.pageNo
+    else canloadMore.value = false
+
+    return data || []
+  }
+  catch (error) {
+    canloadMore.value = false
+    return []
  }
 }

 watch(
  () => workStore.activeId,
  (newVal) => {
-    if (isEmpty(newVal)) return;
-    activeId.value = newVal;
-    approvalModalRef.value.showModal(workStore.dataId);
-  }
-);
+    if (isEmpty(newVal))
+      return
+    activeId.value = newVal
+    approvalModalRef.value.showModal(workStore.dataId)
+  },
+)

 function reset() {
-  pagination.pageNo = 0;
-  pagination.pageSize = 10;
-  canloadMore.value = true;
-  data.value.length = 0;
+  pagination.pageNo = 0
+  pagination.pageSize = 10
+  canloadMore.value = true
+  data.value.length = 0

-  workStore.reset();
+  workStore.reset()
 }

 function notPass(value) {
-  notPassedRef.value.showModal(value);
+  notPassedRef.value.showModal(value)
 }

 async function search(word: string) {
-  keyword.value = word;
-  reset();
+  keyword.value = word
+  reset()
  useInfiniteScroll(
    el as any,
    () => {
-      loadMore();
+      loadMore()
    },
-    { distance: 10, canLoadMore: () => canloadMore.value }
-  );
+    { distance: 10, canLoadMore: () => canloadMore.value },
+  )
 }
 function overTaskHandelr(item: any) {
-  overTask.value = item;
+  overTask.value = item
 }
 function leaveTaskHandler(event) {
-  if (event?.relatedTarget?.id !== "taskPopconfirmRef") overTask.value = null;
+  if (event?.relatedTarget?.id !== 'taskPopconfirmRef')
+    overTask.value = null
 }
-const message = useMessage();
+const message = useMessage()
 function dismisClick(packageId: string) {
  deletePackage({ packageId }).then((res) => {
-    if (res.code === "OK") {
-      message.success("解散任务包成功");
-      reset();
-      loadMore();
+    if (res.code === 'OK') {
+      message.success('解散任务包成功')
+      reset()
+      loadMore()
    }
-  });
+  })
 }
 function ApprovalOver(packageId) {
-  emit("ApprovalOver", packageId);
+  emit('ApprovalOver', packageId)
 }

 defineExpose({
  search,
-});
+})

 const onKeydown = throttle((event) => {
-  const eles = ["INPUT", "TEXTAREA"];
-  if (eles.includes(event.target.tagName)) return;
+  const eles = ['INPUT', 'TEXTAREA']
+  if (eles.includes(event.target.tagName))
+    return

-  if (event.defaultPrevented) return; // 如果已取消默认操作，则不应执行任何操作
+  if (event.defaultPrevented)
+    return // 如果已取消默认操作，则不应执行任何操作

-  const handled = false;
+  const handled = false
  if (event.key !== undefined) {
    // 使用 KeyboardEvent.key 处理事件，并将 handled 设置为 true。
-  } else if (event.keyCode !== undefined) {
+  }
+  else if (event.keyCode !== undefined) {
    // 使用 KeyboardEvent.keyCode 处理事件并将 handled 设置为 true。
  }

  if (handled) {
    // 如果事件已处理，则禁止“双重操作”
-    event.preventDefault();
-  }
-  if (event.key === "ArrowUp") {
-    const prev = data.value[workStore.currentIndex - 1]?.id;
-    if (prev) selectHandler(prev, workStore.currentIndex - 1);
+    event.preventDefault()
  }
-  if (event.key === "ArrowDown") {
-    const next = data.value[workStore.currentIndex + 1]?.id;
-    if (next) selectHandler(next, workStore.currentIndex + 1);
+  if (event.key === 'ArrowLeft') {
+    const prev = data.value[workStore.currentIndex - 1]?.id
+    if (prev)
+      selectHandler(prev, workStore.currentIndex - 1)
  }
-  if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-    if (activeId.value) activeId.value = "";
-    else activeId.value = data.value[workStore.currentIndex]?.checkDuplicateId;
+  if (event.key === 'ArrowRight') {
+    const next = data.value[workStore.currentIndex + 1]?.id
+    if (next)
+      selectHandler(next, workStore.currentIndex + 1)
  }
-}, 500);
+}, 500)
 onMounted(() => {
-  document.addEventListener("keydown", onKeydown, true);
-});
+  document.addEventListener('keydown', onKeydown, true)
+})
 onUnmounted(() => {
-  document.removeEventListener("keydown", onKeydown);
-});
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>

 <template>
--- a/src/views/worksheet/content/Content.vue
+++ b/src/views/worksheet/content/Content.vue
@ -109,7 +109,6 @@ function reset() {
  loading.value = false
  canloadMore = true
 }
-console.log(listData)
 async function refreshHandler() {
  reset()

@ -283,15 +282,16 @@ function immersionHandler() {

 function showAction() {
  const item = taskDetailInfo.value
-  if (item.historyStates === 2 || item.historyStates === 3)
-    return
+  // if (item.historyStates === 2 || item.historyStates === 3)
+  //   return

  if (batch.value === false)
    overTask.value = item
 }

-function hideAction() {
-  overTask.value = null
+function hideAction(event) {
+  // overTask.value = null
+  previewHandler(event)
 }

 function previewHandler(event: MouseEvent) {
@ -535,7 +535,8 @@ defineExpose({
          <div
            class="left"
            :style="{ 'background-image': `url(${taskDetailInfo?.imgurl})` }"
-            @click="showAction"
+            @click="previewHandler"
+            @mouseover="showAction"
            @mouseleave="leaveTaskHandler"
          >
            <div class="footer-times">
@ -598,7 +599,7 @@ defineExpose({
              </n-grid>
            </div>
            <!-- 右上点击大图 -->
-            <div class="preview" @click="previewHandler">
+            <div class="preview" style="z-index: 5;" @click="previewHandler">
              <SvgIcon size="16" name="zoom-out" />
            </div>
            <!-- 预览大图组件 -->
@ -710,7 +711,7 @@ defineExpose({
                @update:checked="onCheckChange($event, item)"
              />
            </div>
-            <div class="percent" :class="{ 'percent-red': item?.maxSimilarity >= 100 }">
+            <div class="percent">
              <SvgIcon size="42" :name="item.maxSimilarity == 100 ? 'error_tag' : 'tag'" />
              <div class="val">
                {{ item?.maxSimilarity && Number(item?.maxSimilarity).toFixed(0)
@ -727,7 +728,7 @@ defineExpose({
            <div v-show="overTask && overTask.id === item.id" class="action">
              <SvgIcon v-if="item.historyStates === 1" style="cursor: pointer" name="t1" @click.stop="approvalHandler" />
              <SvgIcon
-                v-if="[1, 3].includes(item.historyStates)"
+                v-if="[1].includes(item.historyStates)"
                style="cursor: pointer; margin-left: 40px"
                name="t2"
                @click.stop="singleRejectHandler(item)"
@ -735,17 +736,21 @@ defineExpose({
              <SvgIcon style="cursor: pointer; margin-left: 30px" name="t9" @click.stop="handleRejectdubiousfileyd" />
            </div>
          </div>
-          <n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10">
+          <n-back-top :listen-to="wrapperListRef" :bottom="220" :visibility-height="10" style="height: 64px; width: 64px;border-radius: 32px;">
            <div
              style="
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
+        width: 64px;
+        height: 64px;
+        /* line-height: 40px; */
        text-align: center;
        font-size: 14px;
+        position: relative
      "
            >
-              回到顶部
+              <svg-icon
+                name="top"
+                style="width:84px;height: 84px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"
+              />
            </div>
          </n-back-top>
        </div>
@ -942,7 +947,7 @@ defineExpose({
        border-radius: 8px;
        align-items: center;
        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.48);
+        background: linear-gradient(180deg,rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 29%, rgba(3,0,0,0.73))
      }

      .info {
@ -1248,7 +1253,7 @@ defineExpose({
        border-radius: 8px;
        align-items: center;
        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.48);
+        background: linear-gradient(180deg,rgba(0,0,0,0.01), rgba(0,0,0,0.44) 88%);
      }
    }
  }