From e27b8239e9ef356b64ec8e74f370c28127eafa26 Mon Sep 17 00:00:00 2001
From: Dragon <>
Date: Mon, 25 Mar 2024 17:23:53 +0800
Subject: [PATCH] UI

---
 src/assets/icons/edit.svg                   |   1 +
 src/components/RichEditor/Quill.vue         |   2 +-
 src/views/task/content/Content.vue          |  45 +-----
 src/views/task/content/TaskTable.vue        |  88 ++++++++++--
 src/views/task/modal/CustomSettingModal.vue | 143 ++++++++++----------
 5 files changed, 153 insertions(+), 126 deletions(-)
 create mode 100644 src/assets/icons/edit.svg

diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..972995f
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711356174084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6298" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M608 112a16 16 0 0 1 16 16v48A16 16 0 0 1 608 192L192 192.064V832h640V416a16 16 0 0 1 16-16H896a16 16 0 0 1 16 16v464a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32H608z m236.16 11.328a16 16 0 0 1 22.592 0l33.92 33.92a16 16 0 0 1 0 22.656l-452.48 452.48a16 16 0 0 1-22.656 0l-33.92-33.92a16 16 0 0 1 0-22.592z" p-id="6299" fill="#666666"></path></svg>
\ No newline at end of file
diff --git a/src/components/RichEditor/Quill.vue b/src/components/RichEditor/Quill.vue
index 36a416f..471eeba 100644
--- a/src/components/RichEditor/Quill.vue
+++ b/src/components/RichEditor/Quill.vue
@@ -61,7 +61,7 @@ const saveHandler = debounce(() => {
   </div>
 </template>
 
-<style lang="less">
+<style lang="less" scoped>
   .title{
     font-size: 18px;
     font-family: PingFang SC, PingFang SC-Medium;
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index f4e434f..b445f99 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -560,21 +560,9 @@ function getPercent(pictureid: string) {
       </div>
     </div>
 
-    <div class="info-header">
-      <div class="left_box">
-        <div class="title">
-          填报信息
-        </div>
-        <SvgIcon size="12" name="collapse" />
-      </div>
-      <div class="right_box" @click="showActionsModal">
-        自定义设置
-        <SvgIcon size="16" name="pencil" />
-      </div>
-    </div>
     <n-tabs type="line" animated>
       <n-tab-pane name="task-info" tab="任务信息">
-        <TaskTable :data="taskDetailInfo" :task-table-data="taskTableData" />
+        <TaskTable :data="taskDetailInfo" :task-table-data="taskTableData" @show-modal="showActionsModal" />
       </n-tab-pane>
       <n-tab-pane name="picture-info" tab="图片信息">
         <PictureTable :data="taskDetailInfo" />
@@ -822,36 +810,5 @@ function getPercent(pictureid: string) {
       }
     }
   }
-
-  .info-header {
-    display: flex;
-    padding: 16px 0px;
-    align-items: center;
-    justify-content: space-between;
-    .left_box {
-      display: flex;
-      align-items: center;
-      .title {
-        display: flex;
-        align-items: center;
-        margin-right: 8px;
-
-        &:before {
-          content: "";
-          width: 4px;
-          height: 18px;
-          background: #507afd;
-          border-radius: 3px;
-          display: inline-block;
-          margin-right: 10px;
-        }
-      }
-    }
-    .right_box {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-    }
-  }
 }
 </style>
diff --git a/src/views/task/content/TaskTable.vue b/src/views/task/content/TaskTable.vue
index e4aaa29..a0d4a18 100644
--- a/src/views/task/content/TaskTable.vue
+++ b/src/views/task/content/TaskTable.vue
@@ -1,33 +1,91 @@
 <script lang="ts" setup>
-import { onMounted } from "vue";
-
-const props =  defineProps({
+defineProps({
   data: {
     type: Object as PropType<any>,
     required: true,
   },
   taskTableData: {
-    type: Array,
+    type: Array as any,
     default: () => [[]],
   },
-});
-onMounted(()=>{
-  console.log(props.taskTableData,'taskTableData')
 })
+const emit = defineEmits(['showModal'])
+function showActionsModal() {
+  emit('showModal')
+}
 </script>
 
 <template>
+  <div class="info-header">
+    <div class="left_box">
+      <div class="title">
+        填报信息
+      </div>
+    </div>
+    <div class="right_box" @click="showActionsModal">
+      自定义设置
+      <SvgIcon class="icon" size="16" name="edit" />
+    </div>
+  </div>
   <table class="description">
     <tr v-for="(item, index) in taskTableData" :key="index">
-      <th v-if="item&&item[0]">{{ item[0]["label"] }}</th>
-      <td v-if="item&&item[0]">{{ item[0]["value"] }}</td>
-      <th v-if="item&&item.length>1">{{ item[1]["label"] }}</th>
-      <td v-if="item&&item.length>1">{{ item[1]["value"] }}</td>
+      <th v-if="item && item[0]">
+        {{ item[0].label }}
+      </th>
+      <td v-if="item && item[0]" :class="item.blue ? 'blue' : ''">
+        {{ item[0].value }}
+      </td>
+      <th v-if="item && item.length > 1">
+        {{ item[1].label }}
+      </th>
+      <td v-if="item && item.length > 1" :class="item.blue ? 'blue' : ''">
+        {{ item[1].value }}
+      </td>
     </tr>
   </table>
 </template>
 
 <style lang="less" scoped>
+.info-header {
+  display: flex;
+  padding: 6px 0 15px 0;
+  align-items: center;
+  justify-content: space-between;
+  .left_box {
+    display: flex;
+    align-items: center;
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 500;
+      color: #333333;
+
+      &:before {
+        content: "";
+        width: 4px;
+        height: 12px;
+        background: #507afd;
+        border-radius: 3px;
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+  .right_box {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    color: #666666;
+
+    .icon{
+      margin-left: 7px
+    }
+  }
+}
 .description {
   width: 100%;
   font-size: 14px;
@@ -37,10 +95,18 @@ th {
   width: 20%;
   background-color: #fafafa;
   color: #666666;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  line-height: 22px;
 }
 
 td {
   width: 30%;
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #666666;
 }
 
 th,
diff --git a/src/views/task/modal/CustomSettingModal.vue b/src/views/task/modal/CustomSettingModal.vue
index 23f60c3..f7713a0 100644
--- a/src/views/task/modal/CustomSettingModal.vue
+++ b/src/views/task/modal/CustomSettingModal.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
-import { ReportInfoConfig } from "@/config/workorder";
-import { useUser } from "@/store/modules/user";
-import { defineEmits, defineProps, onMounted, ref } from "vue";
+import { defineEmits, defineProps, onMounted, ref } from 'vue'
+import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
+import { ReportInfoConfig } from '@/config/workorder'
+import { useUser } from '@/store/modules/user'
 
 const props = defineProps({
   reviewType: {
@@ -10,138 +10,139 @@ const props = defineProps({
     default: () => 3,
     require: true,
   },
-});
+})
+const emit = defineEmits(['onOk'])
+
 onMounted(async () => {
-  const userStore = useUser();
-  const userInfo = userStore.getUserInfo;
-  let res;
-  res = await getAllfieldList(props.reviewType); //所有筛选项目
-  const allList = res.data;
-  res = await getfieldList(props.reviewType, userInfo.id); //当前用户选择的项目
-  const useList = res.data;
+  const userStore = useUser()
+  const userInfo = userStore.getUserInfo
+  let res
+  res = await getAllfieldList(props.reviewType) // 所有筛选项目
+  const allList = res.data
+  res = await getfieldList(props.reviewType, userInfo.id) // 当前用户选择的项目
+  const useList = res.data
   /**
    * name 标题
    * id 键值
    * fix 是否默认
    * checked 是否选中
    */
-  const userFieldFixed = useList.userFieldFixed?.split(",");
-  const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
+  const userFieldFixed = useList.userFieldFixed?.split(',')
+  const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
   allList.map((v) => {
-    let item = {
+    const item = {
       name: v.fieldDesc,
       id: v.name,
       fix: v.isrequired == 2,
       checked:
-        v.isrequired == 2 ||
-        Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
-        Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
-    };
-    offList.value.push(item);
-  });
-});
-
-const offList = ref<any[]>([]);
+        v.isrequired == 2
+        || Boolean(userFieldFixed?.find(v2 => v2 == v.name))
+        || Boolean(userFieldUnFixed?.find(v2 => v2 == v.name)),
+    }
+    offList.value.push(item)
+  })
+})
+
+const offList = ref<any[]>([])
 function generatList() {
-  const keys = Object.keys(ReportInfoConfig);
-  const hideList: object[] = [];
+  const keys = Object.keys(ReportInfoConfig)
+  const hideList: object[] = []
   for (const key of keys) {
-    const name = ReportInfoConfig[key]?.label;
-    const isDefault = ReportInfoConfig[key]?.isDefault;
+    const name = ReportInfoConfig[key]?.label
+    const isDefault = ReportInfoConfig[key]?.isDefault
 
     // 系统配置为Y且不是默认配置
     if (!isDefault) {
       hideList.push({
         id: key,
-        name: name || "未配置",
+        name: name || '未配置',
         fix: isDefault,
         checked: ReportInfoConfig[key].isDefault,
-      });
+      })
     }
   }
 
-  const fixedList = generateDefaultList();
+  const fixedList = generateDefaultList()
 
-  hideList.unshift(...fixedList);
+  hideList.unshift(...fixedList)
 
-  offList.value = hideList;
-  return { hideList };
+  offList.value = hideList
+  return { hideList }
 }
 
 function generateDefaultList() {
   return Object.keys(ReportInfoConfig).reduce((acc, key) => {
-    const { label, isDefault } = ReportInfoConfig[key];
+    const { label, isDefault } = ReportInfoConfig[key]
 
     if (isDefault) {
       const config = {
         id: key,
-        name: label || "未配置",
+        name: label || '未配置',
         fix: true,
         checked: true,
-      };
-      return [...acc, config];
-    } else {
-      return acc;
+      }
+      return [...acc, config]
+    }
+    else {
+      return acc
     }
-  }, []);
+  }, [])
 }
 
-const show = ref(false);
-const checkAll = ref(false);
+const show = ref(false)
+const checkAll = ref(false)
 
 function showModal() {
-  show.value = true;
+  show.value = true
 }
 
 function closeModal() {
-  show.value = false;
+  show.value = false
 }
-const emit = defineEmits(["onOk"]);
-
 async function handleSumbit(e: MouseEvent) {
-  const userStore = useUser();
-  const userInfo = userStore.getUserInfo;
-  let userField = "";
+  const userStore = useUser()
+  const userInfo = userStore.getUserInfo
+  let userField = ''
   offList.value.map((v) => {
-    if (v.checked) {
-      userField += `${v.id},`;
-    }
-  });
-  userField = userField.slice(0, userField.length - 1);
-  savefield(props.reviewType, userInfo.id, userField);
-  e.preventDefault();
-  closeModal();
-  emit("onOk");
+    if (v.checked)
+      userField += `${v.id},`
+  })
+  userField = userField.slice(0, userField.length - 1)
+  savefield(props.reviewType, userInfo.id, userField)
+  e.preventDefault()
+  closeModal()
+  emit('onOk')
 }
 
 defineExpose({
   showModal,
-});
+})
 
 // generatList();
 
-const selectIds = ref<string[]>([]);
+const selectIds = ref<string[]>([])
 
 function onCheckAllChange(value) {
-  const ids: string[] = [];
+  const ids: string[] = []
 
   for (const item of offList.value) {
     if (!item.fix) {
-      item.checked = value;
-      ids.push(item.id);
+      item.checked = value
+      ids.push(item.id)
     }
   }
 
-  selectIds.value = value ? ids : [];
+  selectIds.value = value ? ids : []
 }
 
 function onCheckChange(checked: any, item: any) {
-  const index = selectIds.value.indexOf(item.id);
+  const index = selectIds.value.indexOf(item.id)
 
-  item.checked = checked;
+  item.checked = checked
 
-  if (index === -1 && checked) selectIds.value.push(item.id);
-  else selectIds.value.splice(index, 1);
+  if (index === -1 && checked)
+    selectIds.value.push(item.id)
+  else selectIds.value.splice(index, 1)
 }
 </script>
 
@@ -198,7 +199,9 @@ function onCheckChange(checked: any, item: any) {
       </div>
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit"> 确认 </n-button>
+          <n-button type="info" @click="handleSumbit">
+            确认
+          </n-button>
           <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>