审核UI

1 year ago · a3f9507700
parent b0b80ec70a
commit a3f9507700
3 changed files with 139 additions and 109 deletions
--- 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 { useTaskStore } from '@/store/modules/task'

-import emitter from "@/utils/mitt";
+import emitter from '@/utils/mitt'

-const CustomFieldModalRef = ref(null);
-const collapse = ref(false);
-const taskStore = useTaskStore();
-const taskListRef = ref<HTMLDivElement | null>(null);
+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);
        }
-    });
-  } else {
+        showFieldList.value.push(item)
+      }
+    })
+  }
+  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;
--- 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,25 +39,24 @@ 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 == '通过'
+              listItem.statshisText === '通过'
                ? 'list-item-success'
-              : listItem.statshisText == '不通过'
+                : listItem.statshisText === '不通过'
                  ? 'list-item-error'
                  : 'list-item-watting'
            "
-          >{{ listItem.statshisText }}</span
-        >
+          >{{ listItem.statshisText }}</span>
        </li>
-        <li v-else-if="item.id == 'createdate'">
+        <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] }}
+          <span class="label">{{ item.name }}：</span>{{ 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 {
--- 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 {