From 30fc972ecac3f3258c6375261bd651721aac5563 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Wed, 20 Mar 2024 18:28:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/addIcon.png                 | Bin 0 -> 4427 bytes
 .../home/aside/comp/modals/FilterModal.vue    | 320 ++++++++++--------
 src/views/task/modal/ConfrimModal.vue         |  36 +-
 3 files changed, 202 insertions(+), 154 deletions(-)
 create mode 100644 src/assets/images/addIcon.png

diff --git a/src/assets/images/addIcon.png b/src/assets/images/addIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..753a259cf4d115d4ce6fc72fe076983d13e8321a
GIT binary patch
literal 4427
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

literal 0
HcmV?d00001

diff --git a/src/views/home/aside/comp/modals/FilterModal.vue b/src/views/home/aside/comp/modals/FilterModal.vue
index 30acf2a..1133223 100644
--- a/src/views/home/aside/comp/modals/FilterModal.vue
+++ b/src/views/home/aside/comp/modals/FilterModal.vue
@@ -1,289 +1,309 @@
 <script lang="ts" setup>
-import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from 'vue'
-import { NDataTable } from 'naive-ui'
-import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
-import type { SortableEvent } from 'sortablejs'
-import Sortable from 'sortablejs'
-import { debounce } from 'lodash-es'
-import Action from '../Action.vue'
-import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
-import type { FilterSearchParam } from '/#/api'
-
-defineOptions({ name: 'FilterModal' })
+import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from "vue";
+import { NDataTable } from "naive-ui";
+import type { DataTableColumns, DataTableRowKey } from "naive-ui";
+import type { SortableEvent } from "sortablejs";
+import Sortable from "sortablejs";
+import { debounce } from "lodash-es";
+import Action from "../Action.vue";
+import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
+import type { FilterSearchParam } from "/#/api";
+
+defineOptions({ name: "FilterModal" });
 
 const emit = defineEmits<{
-  (e: 'showNewFilter'): void
-  (e: 'editFilter', filter: any): void
-}>()
+  (e: "showNewFilter"): void;
+  (e: "editFilter", filter: any): void;
+}>();
 
-const show = ref(false)
+const show = ref(false);
 
 const cardStyle = {
-  'width': '800px',
-  'height': '800px',
-  '--n-padding-bottom': '10px',
-  '--n-padding-left': '10px',
-}
+  width: "800px",
+  height: "800px",
+  "--n-padding-bottom": "10px",
+  "--n-padding-left": "10px",
+};
 
 interface RowData {
-  id: string
-  searchname: string
-  createby: string
-  createtime: string
-  updateby: string
-  updatetime: string
+  id: string;
+  searchname: string;
+  createby: string;
+  createtime: string;
+  updateby: string;
+  updatetime: string;
 }
 
 const columns: DataTableColumns<RowData> = [
   {
-    type: 'selection',
+    type: "selection",
   },
   {
-    title: '操作',
-    key: 'action',
+    title: "操作",
+    key: "action",
     render(row) {
-      return h(
-        Action,
-        {
-          options: [
-            { label: '编辑', key: 1 },
-            { label: '删除', key: 2 },
-          ],
-          id: row.id,
-          select,
-        },
-      )
+      return h(Action, {
+        options: [
+          { label: "编辑", key: 1 },
+          { label: "删除", key: 2 },
+        ],
+        id: row.id,
+        select,
+      });
     },
   },
   {
-    title: '名称',
-    key: 'searchname',
+    title: "名称",
+    key: "searchname",
   },
   {
-    title: '创建者',
-    key: 'createby',
+    title: "创建者",
+    key: "createby",
   },
   {
-    title: '创建时间',
-    key: 'createtime',
+    title: "创建时间",
+    key: "createtime",
   },
   {
-    title: '更新者',
-    key: 'updateby',
+    title: "更新者",
+    key: "updateby",
   },
   {
-    title: '更新时间',
-    key: 'updatetime',
+    title: "更新时间",
+    key: "updatetime",
   },
-]
+];
 
-const loading = ref(true)
+const loading = ref(true);
 const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-})
-const tableData = ref<Array<RowData>>([])
-const keyword = ref('')
+});
+const tableData = ref<Array<RowData>>([]);
+const keyword = ref("");
 
 async function query(page: number, pageSize: number) {
-  const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
-  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0)
-  const { data, pageCount } = result
-  tableData.value = data
-  pagination.page = page
-  pagination.pageCount = pageCount
-  loading.value = false
+  const searchParam: FilterSearchParam = {
+    search_searchname: { value: keyword.value, op: "like", type: "string" },
+  };
+  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0);
+  const { data, pageCount } = result;
+  tableData.value = data;
+  pagination.page = page;
+  pagination.pageCount = pageCount;
+  loading.value = false;
 }
 
 function afterLeave() {
-  pagination.page = 1
-  pagination.pageCount = 1
-  pagination.pageSize = 10
+  pagination.page = 1;
+  pagination.pageCount = 1;
+  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) {
   return {
-    'data-id': row.id,
-  }
+    "data-id": row.id,
+  };
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys
+  selectionIds.value = rowKeys;
 }
 
 function select(key: number) {
   switch (key) {
     case 1:
-      editSelection()
-      break
+      editSelection();
+      break;
     case 2:
-      deleteSelection()
-      break
+      deleteSelection();
+      break;
     default:
-      break
+      break;
   }
 }
 
 function editSelection() {
   // eslint-disable-next-line dot-notation
-  const $message = window['$message']
+  const $message = window["$message"];
 
   if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
-    $message.error('请选中一条过滤')
-    return
+    $message.error("请选中一条过滤");
+    return;
   }
 
-  const selectedId = selectionIds.value[0]
+  const selectedId = selectionIds.value[0];
   const selectedFilter = tableData.value.find((item: any) => {
-    return item.id === selectedId
-  })
+    return item.id === selectedId;
+  });
 
-  emit('editFilter', selectedFilter)
-  closeModal()
+  emit("editFilter", selectedFilter);
+  closeModal();
 }
 
 function deleteSelection() {
   // eslint-disable-next-line dot-notation
-  const $message = window['$message']
+  const $message = window["$message"];
 
   if (selectionIds.value.length === 0) {
-    $message.error('至少选中一条过滤')
-    return
+    $message.error("至少选中一条过滤");
+    return;
   }
 
-  deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
-    query(pagination.page, pagination.pageSize)
-  })
+  deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
+    query(pagination.page, pagination.pageSize);
+  });
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value)
-    return
+  if (loading.value) return;
 
-  const { pageSize } = pagination
-  await query(currentPage, pageSize)
+  const { pageSize } = pagination;
+  await query(currentPage, pageSize);
 }
 
 function handleClick() {
-  emit('showNewFilter')
-  show.value = false
+  emit("showNewFilter");
+  show.value = false;
 }
 
-let sortTable: Sortable | null = null
-const tableRef = ref<InstanceType<typeof NDataTable>>()
+let sortTable: Sortable | null = null;
+const tableRef = ref<InstanceType<typeof NDataTable>>();
 
 async function showModal() {
-  show.value = true
+  show.value = true;
 
-  const { page, pageSize } = pagination
-  await query(page, pageSize)
+  const { page, pageSize } = pagination;
+  await query(page, pageSize);
 
   nextTick(() => {
-    if (sortTable !== null)
-      destory()
-
-    const el: HTMLDivElement = tableRef.value?.$el
-    const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
-    if (tbody)
-      sortTable = Sortable.create(tbody, { onEnd, onMove })
-  })
+    if (sortTable !== null) destory();
+
+    const el: HTMLDivElement = tableRef.value?.$el;
+    const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
+    if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
+  });
 }
-let relatedId = ''
-let insertafter = false
+let relatedId = "";
+let insertafter = false;
 
 // TODO: 有bug，需跟后端联调
 function onEnd(event: SortableEvent) {
-  const data = unref(tableData)
-  const oldElem = data[event.oldIndex!]
-  data.splice(event.oldIndex!, 1)
-  data.splice(event.newIndex!, 0, oldElem)
+  const data = unref(tableData);
+  const oldElem = data[event.oldIndex!];
+  data.splice(event.oldIndex!, 1);
+  data.splice(event.newIndex!, 0, oldElem);
 
-  const dragId = oldElem.id
+  const dragId = oldElem.id;
   const index = data.findIndex((item) => {
-    return item.id === relatedId
-  })
+    return item.id === relatedId;
+  });
 
   // 插入到元素后，索引-1；插入到元素前，索引+1
-  const order = insertafter ? index - 1 : index + 1
+  const order = insertafter ? index - 1 : index + 1;
   // console.log('dragid:', dragId, 'order:', order)
-  sort(dragId, order)
+  sort(dragId, order);
 }
 
 function onMove(evt: any) {
-  relatedId = evt.related?.dataset?.id
-  insertafter = evt.willInsertAfter
+  relatedId = evt.related?.dataset?.id;
+  insertafter = evt.willInsertAfter;
   // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
 }
 
 function destory() {
-  sortTable && sortTable.destroy()
-  sortTable = null
+  sortTable && sortTable.destroy();
+  sortTable = null;
 }
 
 onUnmounted(() => {
-  destory()
-})
+  destory();
+});
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 defineExpose({
   showModal,
-})
+});
 
 const inputHandler = debounce((word) => {
-  keyword.value = word
-  query(1, 5)
-}, 300)
+  keyword.value = word;
+  query(1, 5);
+}, 300);
 </script>
 
 <template>
   <div>
     <n-modal
-      v-model:show="show" transform-origin="center" display-directive="if"
+      v-model:show="show"
+      transform-origin="center"
+      display-directive="if"
       @after-leave="afterLeave"
     >
-      <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <n-card
+        :style="cardStyle"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
         <div class="wrapper">
           <span class="wrapper-title">全部过滤条件</span>
           <div class="wrapper-bar">
             <div class="wrapper-info">
-              <span :style="{ 'margin-left': '18px','font-size':'16px' }">基本信息</span>
+              <span
+                :style="{ 'margin-left': '18px', 'font-size': '16px' }"
+                class="wrapper-info-title"
+                >基本信息</span
+              >
             </div>
           </div>
           <div class="wrapper-form">
-            <n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索" @input="inputHandler">
+            <n-input
+              :style="{ width: '360px', border: '1px solid #cad2dd' }"
+              placeholder="请输入过滤条件名称搜索"
+              @input="inputHandler"
+            >
               <template #suffix>
-                <SvgIcon size="14px" name="magnifying-1" color="#fff"  />
+                <SvgIcon size="14px" name="magnifying-1" color="#fff" />
               </template>
             </n-input>
-            <n-button type="info" @click="handleClick">
+            <n-button type="info" style="background:#507AFD" @click="handleClick">
               创建
               <template #icon>
-                <SvgIcon size="14px" color="#fff" name="magnifying-1" />
+                <img
+                  src="../../../../../assets/images/addIcon.png"
+                  style="width: 16px; height: 16px"
+                />
               </template>
             </n-button>
           </div>
           <div class="wrapper-table">
             <NDataTable
-              ref="tableRef" remote :row-props="rowProps as any" :columns="columns" :data="tableData" :loading="loading"
-              :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
+              ref="tableRef"
+              remote
+              :row-props="rowProps as any"
+              :columns="columns"
+              :data="tableData"
+              :loading="loading"
+              :pagination="pagination"
+              :row-key="rowKey"
+              @update:page="handlePageChange"
               @update:checked-row-keys="handleCheck"
             />
           </div>
         </div>
         <template #footer>
           <div class="wrapper-footer">
-            <n-button type="info" @click="closeModal">
-              确认
-            </n-button>
-            <n-button secondary style="margin-left:15px" @click="closeModal">
+            <n-button type="info" @click="closeModal"> 确认 </n-button>
+            <n-button secondary style="margin-left: 15px" @click="closeModal">
               取消
             </n-button>
           </div>
@@ -317,7 +337,7 @@ const inputHandler = debounce((word) => {
 
     .n-input {
       width: 300px;
-      border: 1px solid gray
+      border: 1px solid gray;
     }
   }
 
@@ -335,15 +355,23 @@ const inputHandler = debounce((word) => {
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
       top: 0;
-      left:3px;
+      left: 3px;
       bottom: 0;
       position: absolute;
     }
+    &-title {
+      font-size: 16px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: Medium;
+      text-align: left;
+      color: #333333;
+      line-height: 22px;
+    }
   }
 }
 </style>
diff --git a/src/views/task/modal/ConfrimModal.vue b/src/views/task/modal/ConfrimModal.vue
index dc1378a..a60f02f 100644
--- a/src/views/task/modal/ConfrimModal.vue
+++ b/src/views/task/modal/ConfrimModal.vue
@@ -31,19 +31,21 @@ const backOptions = ref<any[]>([])
 const reasonOptions = ref<any[]>([])
 const selectBackId = ref(null)
 const selectRejectId = ref(null)
+const selectItem = ref(null)
 const otherValue = ref(null)
 const showOther = computed(() => {
-  return selectRejectId.value === 'other'
+  return (selectItem.value as any)?.label === '其他'
 })
 
 const comomitValue = computed(() => {
-  return selectRejectId.value === 'other' ? otherValue.value : selectRejectId.value
+  return (selectItem.value as any)?.label === '其他' ? otherValue.value : selectRejectId.value
 })
 
 async function handleSumbit(e: MouseEvent) {
   e.preventDefault()
   closeModal()
-  emit('commit', unref(comomitValue), unref(selectBackId), selectRejectId.value === 'other')
+  // selectRejectId.value === 'other'
+  emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
 }
 
 onBeforeMount(async () => {
@@ -53,12 +55,21 @@ onBeforeMount(async () => {
   reasonOptions.value = rejectList
   backOptions.value = backList
 
+  // TODO 删除此项 通过name=其他 判断
   // 添加其他选项
-  reasonOptions.value.push({
-    label: '其他',
-    value: 'other',
-  })
+  // reasonOptions.value.push({
+  //   label: '其他',
+  //   value: 'other',
+  // })
 })
+
+async function selectChange(id){
+  console.log(id,'selectChange')
+  selectItem.value = reasonOptions.value.find(v=>v.id == id);
+
+
+}
+
 </script>
 
 <template>
@@ -79,9 +90,18 @@ onBeforeMount(async () => {
         </div>
         <div class="wrapper-content">
           <span>不通过原因</span>
-          <n-select v-model:value="selectRejectId" style="margin-top: 10px;" :options="reasonOptions" />
+          <n-select v-model:value="selectRejectId" @change="selectChange" style="margin-top: 10px;" :options="reasonOptions" />
           <n-input v-show="showOther" v-model:value="otherValue" type="textarea" placeholder="备注内容" style="margin-top: 10px;" />
         </div>
+
+
+
+        <!-- <div class="wrapper-content">
+          <n-input
+          type="textarea"
+          placeholder="备注内容" v-model="showOther"></n-input>
+        </div> -->
+
       </div>
       <template #footer>
         <div class="wrapper-footer">