From a3f9507700027575a102c1aa14e48b4c1fd92549 Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Tue, 26 Mar 2024 13:35:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E6=A0=B8UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/aside/Aside.vue     | 150 ++++++++++++++---------------
 src/views/task/aside/ListItem.vue  |  86 +++++++++++------
 src/views/task/content/Content.vue |  12 ++-
 3 files changed, 139 insertions(+), 109 deletions(-)

diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 8e276a7..dbf309e 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -1,87 +1,85 @@
 <script lang="ts" setup>
-import { useTaskStore } from "@/store/modules/task";
-import { debounce } from "lodash-es";
-import { computed, onMounted, ref, unref, watch, shallowRef } from "vue";
-import CustomFieldModal from "../modal/CustomFieldModal.vue";
-import type { AsideEntity } from "@/config/aside";
-
-import { useUser } from "@/store/modules/user";
-import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
-
-import TaskList from "./TaskList.vue";
-import AdvanceFilter from "../../home/aside/comp/AdvanceFilter.vue";
-
+import { debounce } from 'lodash-es'
+import { computed, onMounted, ref, shallowRef, unref, watch } from 'vue'
+import CustomFieldModal from '../modal/CustomFieldModal.vue'
+import AdvanceFilter from '../../home/aside/comp/AdvanceFilter.vue'
 import {
-  CustomFilterModalVue,
   FilterModalVue,
   NewFilterModalVue,
-} from "../../home/aside/comp/modals";
+} from '../../home/aside/comp/modals'
+import TaskList from './TaskList.vue'
+import type { AsideEntity } from '@/config/aside'
+
+import { useUser } from '@/store/modules/user'
+import { getAllfieldList, getfieldList } from '@/api/home/filter'
 
-import emitter from "@/utils/mitt";
+import { useTaskStore } from '@/store/modules/task'
 
-const CustomFieldModalRef = ref(null);
-const collapse = ref(false);
-const taskStore = useTaskStore();
-const taskListRef = ref<HTMLDivElement | null>(null);
+import emitter from '@/utils/mitt'
+
+const CustomFieldModalRef = ref(null)
+const collapse = ref(false)
+const taskStore = useTaskStore()
+const taskListRef = ref<HTMLDivElement | null>(null)
 // 展示字段
-const showFieldList = ref<any[]>([]);
+const showFieldList = ref<any[]>([])
 
 function collapseHandler() {
-  collapse.value = !collapse.value;
+  collapse.value = !collapse.value
 }
 
 const asideWidth = computed(() => {
-  return collapse.value ? 0 : 308;
-});
+  return collapse.value ? 0 : 308
+})
 
 const asideStyle = computed(() => {
   return {
     width: `${asideWidth.value}px`,
-  };
-});
+  }
+})
 
 const collapseIcon = computed(() => {
-  return collapse.value ? "expand-cir" : "collapse-cir";
-});
+  return collapse.value ? 'expand-cir' : 'collapse-cir'
+})
 
-const asideEnter = ref(false);
+const asideEnter = ref(false)
 
 const showCollapse = computed(() => {
-  return collapse.value ? true : asideEnter.value;
-});
+  return collapse.value ? true : asideEnter.value
+})
 
 watch(
   () => taskStore.immersion,
   () => {
-    collapse.value = true;
-  }
-);
+    collapse.value = true
+  },
+)
 
 function showFilter() {
-  const modal = unref(CustomFieldModalRef)! as any;
-  modal.showModal();
+  const modal = unref(CustomFieldModalRef)! as any
+  modal.showModal()
 }
 
-const showSearch = ref(false);
+const showSearch = ref(false)
 
 function setShowSearch(value: boolean) {
-  showSearch.value = value;
+  showSearch.value = value
 }
 
 const inputHandler = debounce((word) => {
-  (taskListRef.value as any).search(word);
-}, 500);
+  (taskListRef.value as any).search(word)
+}, 500)
 
-const reviewType = 2;
+const reviewType = 2
 async function getshowFieldList() {
-  showFieldList.value = [];
-  const userStore = useUser();
-  const userInfo = userStore.getUserInfo;
-  let res;
-  res = await getAllfieldList(reviewType); //所有筛选项目
-  const allList = res.data;
-  res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目
-  const useList = res.data;
+  showFieldList.value = []
+  const userStore = useUser()
+  const userInfo = userStore.getUserInfo
+  let res
+  res = await getAllfieldList(reviewType) // 所有筛选项目
+  const allList = res.data
+  res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
+  const useList = res.data
   /**
    * name 标题
    * id 键值
@@ -89,60 +87,61 @@ async function getshowFieldList() {
    * checked 是否选中
    */
   if (useList.userFieldFixed) {
-    useList.userFieldFixed?.split(",").map((v) => {
-      let item = allList.find((v2) => v2.name == v);
+    useList.userFieldFixed?.split(',').map((v) => {
+      let item = allList.find(v2 => v2.name == v)
       if (item) {
         item = {
           name: item.fieldDesc,
           id: item.name,
           fix: item.isrequired == 2,
           checked: true,
-        };
-        showFieldList.value.push(item);
+        }
+        showFieldList.value.push(item)
       }
-    });
-  } else {
+    })
+  }
+  else {
     // 若为首次获取 则赋默认值
     allList.map((v) => {
       if (v.isrequired == 2) {
-        let item = {
+        const item = {
           name: v.fieldDesc,
           id: v.name,
           fix: v.isrequired == 2,
           checked: true,
-        };
-        showFieldList.value.push(item);
+        }
+        showFieldList.value.push(item)
       }
-    });
+    })
   }
 }
 
 onMounted(() => {
-  getshowFieldList();
-});
+  getshowFieldList()
+})
 
 // 滚动容器，让key对应模块处于可视区域
 function scrollHandler(key: string) {
-  const element = document.querySelector(`#${key}`);
-  element?.scrollIntoView(true);
+  const element = document.querySelector(`#${key}`)
+  element?.scrollIntoView(true)
 }
 // 选择某个过滤配置，刷新图片墙
 function filterHandler(searchId: string) {
-  emitter.emit("filter", searchId);
+  emitter.emit('filter', searchId)
 }
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any;
-  modal.showModal();
+  const modal = unref(modalRef)! as any
+  modal.showModal()
 }
 // 当前显示的模块，按照数组顺序显示
-const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
-const filterModalRef = ref(null);
-const newFilterModalRef = ref(null);
-const customModalRef = ref(null);
+const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
+const filterModalRef = ref(null)
+const newFilterModalRef = ref(null)
+const customModalRef = ref(null)
 function editFilter(filter: any) {
-  const modal = unref(newFilterModalRef)! as any;
-  modal.showModal();
-  modal.edit(filter);
+  const modal = unref(newFilterModalRef)! as any
+  modal.showModal()
+  modal.edit(filter)
 }
 </script>
 
@@ -209,14 +208,14 @@ function editFilter(filter: any) {
     </div>
     <TaskList
       ref="taskListRef"
-      :showFieldList="showFieldList"
+      :show-field-list="showFieldList"
       style="height: calc(100vh - 146px)"
       class="work-sheet-list"
     />
     <CustomFieldModal
       ref="CustomFieldModalRef"
-      :reviewType="reviewType"
-      @onOk="getshowFieldList"
+      :review-type="reviewType"
+      @on-ok="getshowFieldList"
     />
     <!-- 过滤列表 -->
     <FilterModalVue
@@ -243,6 +242,7 @@ function editFilter(filter: any) {
     padding: 12px 16px;
     width: 100%;
     overflow: hidden;
+    border-bottom: 1px solid #e8e8e8;
 
     .warpper {
       display: flex;
diff --git a/src/views/task/aside/ListItem.vue b/src/views/task/aside/ListItem.vue
index 309b87b..c154f0e 100644
--- a/src/views/task/aside/ListItem.vue
+++ b/src/views/task/aside/ListItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { format } from "date-fns";
-import { computed } from "vue";
+import { format } from 'date-fns'
+import { computed } from 'vue'
 
-defineOptions({ name: "ListItem" });
+defineOptions({ name: 'ListItem' })
 
 const props = defineProps({
   selected: {
@@ -14,23 +14,21 @@ const props = defineProps({
     required: true,
   },
   showFieldList: {
-    type: Array,
+    type: Array as any,
     default: () => [],
   },
-});
+})
 
 const svgName = computed(() => {
-  return props.selected ? "task-select" : "task";
-});
-
-
+  return props.selected ? 'task-select' : 'task'
+})
 </script>
 
 <template>
   <div class="list-item" :class="{ 'list-item-selected': selected }">
     <div v-for="(item, index) in showFieldList" :key="index">
-      <div v-if="item.id == 'fromtaskname'" class="list-item-header">
-        <div style="display: flex">
+      <div v-if="item.id === 'fromsourceid'" class="list-item-header">
+        <div class="id-wrap">
           <SvgIcon :name="svgName" size="28" />
           <span
             class="list-item-header-name"
@@ -41,26 +39,25 @@ const svgName = computed(() => {
         </div>
         <!-- <SvgIcon v-show="selected" size="14" name="more-ver" /> -->
       </div>
-      <ul class="list-item-detail" v-else>
-        <li v-if="item.id == 'statshisText'">
+      <ul v-else class="list-item-detail">
+        <li v-if="item.id === 'statshisText'">
           审批状态：<span
-          class="list-item-status"
-          :class="
-            listItem.statshisText == '通过'
-              ? 'list-item-success'
-              : listItem.statshisText == '不通过'
-              ? 'list-item-error'
-              : 'list-item-watting'
-          "
-          >{{ listItem.statshisText }}</span
-        >
+            class="list-item-status"
+            :class="
+              listItem.statshisText === '通过'
+                ? 'list-item-success'
+                : listItem.statshisText === '不通过'
+                  ? 'list-item-error'
+                  : 'list-item-watting'
+            "
+          >{{ listItem.statshisText }}</span>
+        </li>
+        <li v-else-if="item.id === 'createdate'">
+          提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
+        </li>
+        <li v-else>
+          <span class="label">{{ item.name }}：</span>{{ listItem[item.id] }}
         </li>
-        <li v-else-if="item.id == 'createdate'">
-        提交时间：{{ format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
-      </li>
-      <li v-else>
-        {{ item.name }}：{{ listItem[item.id] }}
-      </li>
       </ul>
     </div>
 
@@ -109,6 +106,24 @@ const svgName = computed(() => {
     display: flex;
     align-items: center;
 
+    .id-wrap{
+      display: flex;
+      align-items: center;
+      margin-bottom: 6px
+    }
+
+    .list-item-header-name{
+      width: 226px;
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 500;
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 0;
+    }
+
     &-name {
       font-size: 16px;
       font-weight: bold;
@@ -118,12 +133,21 @@ const svgName = computed(() => {
     }
 
     &-selected {
-      color: #507afd;
+      color: #507afd!important;
     }
   }
 
+  .label{
+    font-size: 13px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #666666;
+    line-height: 18px;
+  }
+
   &-selected {
-    background-color: #f2f5fe;
+    background: rgba(68,113,232,0.07);
   }
 
   &-status {
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 9f6086b..a852405 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -249,7 +249,6 @@ function backHandler() {
 async function handleDragEnd(event, item) {
   // 可以在这里添加拖拽结束后的逻辑
   const flag = taskStore.getInFile
-  console.log(item)
   if (flag) {
     const res = await dubiousfileyd({ pictureid: item.pictureid })
     if (res.code === 'OK') {
@@ -522,7 +521,7 @@ function getPercent(pictureid: string) {
           </n-grid>
         </div>
         <div class="time">
-          <SvgIcon color="#FFF" size="16" name="time" />
+          <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
           <span>{{ formatToDateHMS(taskDetailInfo.createdate || 0) }}</span>
         </div>
         <div style="display: none">
@@ -734,9 +733,16 @@ function getPercent(pictureid: string) {
         z-index: 3;
         left: 2%;
         bottom: 2%;
-        color: #fff;
         display: flex;
         align-items: center;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: 500;
+        color: #ffffff;
+
+        .svg-time{
+          margin-right: 5px
+        }
       }
 
       .gi1 {