@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/dialog-select/{tree-multi-composition-api.vue → nest-tree-multi-composition-api.vue}

@@ -36,8 +36,8 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { DialogSelect as TinyDialogSelect, Button as TinyButton } from '@opentiny/vue'
+import { reactive } from 'vue'
+import { DialogSelect as TinyDialogSelect, Button as TinyButton, Modal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import Sortable from 'sortablejs'
 
@@ -54,7 +54,7 @@ const datas = [
   { id: 9, pid: 4, label: '三级 9', isLeaf: true, children: [] }
 ]
 
-const IconClose = iconClose()
+const tinyIconClose = iconClose()
 // 接口1：根据pid查询直接子节点
 const queryChildrenByPid = (pid) => datas.filter((record) => record.pid === pid)
 
@@ -95,15 +95,25 @@ const queryPidsBySearchFn = (search) => {
 
 // 接口3：根据一组节点id找到匹配节点的所有父级节点id
 // （使用了接口2只是为了简化示例代码，实现为批量接口可提高查询效率）
-const queryPidsByIdsFn = (ids, pids = []) => (
-  ids.forEach((id) => (pids = [...pids, ...queryPidsBySearchFn(id)])), dedup(pids)
-)
+const queryPidsByIdsFn = (ids, pids = []) => {
+  let allPids = [...pids]
+
+  ids.forEach((id) => {
+    allPids = allPids.concat(queryPidsBySearchFn(id))
+  })
+
+  return dedup(allPids)
+}
 
 // 接口4：根据一组节点id查询这组节点
 const queryNodesByIds = (ids) => datas.filter((row) => ~ids.indexOf(row.id))
 
 // 去重
-const dedup = (ids, tmp = []) => (ids.forEach((id) => !~tmp.indexOf(id) && tmp.push(id)), tmp)
+const dedup = (ids, tmp = []) => {
+  const res = [...tmp, ...ids]
+
+  return Array.from(new Set(res))
+}
 
 const remoteSearch = (node, callback) => {
   setTimeout(() => {
@@ -115,6 +125,7 @@ const remoteSearch = (node, callback) => {
 const queryPidsBySearch = (search, callback) => {
   setTimeout(() => {
     const res = queryPidsBySearchFn(search)
+
     callback(res)
   }, 300)
 }
@@ -136,7 +147,7 @@ const state = reactive({
     top: '20vh',
     width: '800px',
     title: '选择公司',
-    beforeClose: beforeClose,
+    beforeClose,
     dialogClass: 'custom-dialog-class'
   },
   selectedBoxOp: {
@@ -177,7 +188,9 @@ const lookupMethod = (values) => {
 }
 
 const onDialogSelectChange = (values, texts) => {
-  console.log(values, texts)
+  Modal.message({
+    message: `values:${values},texts:${texts}`
+  })
 }
 </script>
 

package/demos/pc/app/dialog-select/{tree-multi.vue → nest-tree-multi.vue}

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button } from '@opentiny/vue'
+import { DialogSelect, Button, Modal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import Sortable from 'sortablejs'
 
@@ -93,15 +93,25 @@ const queryPidsBySearchFn = (search) => {
 
 // 接口3：根据一组节点id找到匹配节点的所有父级节点id
 // （使用了接口2只是为了简化示例代码，实现为批量接口可提高查询效率）
-const queryPidsByIdsFn = (ids, pids = []) => (
-  ids.forEach((id) => (pids = [...pids, ...queryPidsBySearchFn(id)])), dedup(pids)
-)
+const queryPidsByIdsFn = (ids, pids = []) => {
+  let allPids = [...pids]
+
+  ids.forEach((id) => {
+    allPids = allPids.concat(queryPidsBySearchFn(id))
+  })
+
+  return dedup(allPids)
+}
 
 // 接口4：根据一组节点id查询这组节点
 const queryNodesByIds = (ids) => datas.filter((row) => ~ids.indexOf(row.id))
 
 // 去重
-const dedup = (ids, tmp = []) => (ids.forEach((id) => !~tmp.indexOf(id) && tmp.push(id)), tmp)
+const dedup = (ids, tmp = []) => {
+  const res = [...tmp, ...ids]
+
+  return Array.from(new Set(res))
+}
 
 export default {
   components: {
@@ -146,9 +156,8 @@ export default {
     },
     remoteSearch(node, callback) {
       setTimeout(() => {
-        
         const res = queryChildrenByPid(node.level === 0 ? null : node.data.id)
-        console.log(node.level,node.data?.id,res)
+
         callback(res)
       }, 300)
     },
@@ -180,7 +189,9 @@ export default {
       })
     },
     onDialogSelectChange(values, texts) {
-      console.log(values, texts)
+      Modal.message({
+        message: `values:${values},texts:${texts}`
+      })
     }
   }
 }

package/demos/pc/app/dialog-select/{tree-radio-composition-api.vue → nest-tree-single-composition-api.vue}

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { reactive } from 'vue'
-import { DialogSelect as TinyDialogSelect, Button as TinyButton } from '@opentiny/vue'
+import { DialogSelect as TinyDialogSelect, Button as TinyButton, Modal } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
@@ -76,15 +76,25 @@ const queryPidsBySearchFn = (search) => {
 
 // 接口3：根据一组节点id找到匹配节点的所有父级节点id
 // （使用了接口2只是为了简化示例代码，实现为批量接口可提高查询效率）
-const queryPidsByIdsFn = (ids, pids = []) => (
-  ids.forEach((id) => (pids = [...pids, ...queryPidsBySearchFn(id)])), dedup(pids)
-)
+const queryPidsByIdsFn = (ids, pids = []) => {
+  let allPids = [...pids]
+
+  ids.forEach((id) => {
+    allPids = allPids.concat(queryPidsBySearchFn(id))
+  })
+
+  return dedup(allPids)
+}
 
 // 接口4：根据一组节点id查询这组节点
 const queryNodesByIds = (ids) => datas.filter((row) => ~ids.indexOf(row.id))
 
 // 去重
-const dedup = (ids, tmp = []) => (ids.forEach((id) => !~tmp.indexOf(id) && tmp.push(id)), tmp)
+const dedup = (ids, tmp = []) => {
+  const res = [...tmp, ...ids]
+
+  return Array.from(new Set(res))
+}
 
 const beforeClose = () => {
   return true
@@ -117,7 +127,7 @@ const state = reactive({
     top: '20vh',
     width: '800px',
     title: '选择公司',
-    beforeClose: beforeClose,
+    beforeClose,
     dialogClass: 'custom-dialog-class'
   },
   treeOp: {
@@ -149,6 +159,8 @@ const lookupMethod = (values) => {
   })
 }
 const onDialogSelectChange = (values, texts) => {
-  console.log(values, texts)
+  Modal.message({
+    message: `values:${values},texts:${texts}`
+  })
 }
 </script>

package/demos/pc/app/dialog-select/{tree-radio.vue → nest-tree-single.vue}

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { DialogSelect, Button } from '@opentiny/vue'
+import { DialogSelect, Button, Modal } from '@opentiny/vue'
 
 // 模拟服务侧数据
 const datas = [
@@ -75,15 +75,25 @@ const queryPidsBySearchFn = (search) => {
 
 // 接口3：根据一组节点id找到匹配节点的所有父级节点id
 // （使用了接口2只是为了简化示例代码，实现为批量接口可提高查询效率）
-const queryPidsByIdsFn = (ids, pids = []) => (
-  ids.forEach((id) => (pids = [...pids, ...queryPidsBySearchFn(id)])), dedup(pids)
-)
+const queryPidsByIdsFn = (ids, pids = []) => {
+  let allPids = [...pids]
+
+  ids.forEach((id) => {
+    allPids = allPids.concat(queryPidsBySearchFn(id))
+  })
+
+  return dedup(allPids)
+}
 
 // 接口4：根据一组节点id查询这组节点
 const queryNodesByIds = (ids) => datas.filter((row) => ~ids.indexOf(row.id))
 
 // 去重
-const dedup = (ids, tmp = []) => (ids.forEach((id) => !~tmp.indexOf(id) && tmp.push(id)), tmp)
+const dedup = (ids, tmp = []) => {
+  const res = [...tmp, ...ids]
+
+  return Array.from(new Set(res))
+}
 
 export default {
   components: {
@@ -151,7 +161,9 @@ export default {
       })
     },
     onDialogSelectChange(values, texts) {
-      console.log(values, texts)
+      Modal.message({
+        message: `values:${values},texts:${texts}`
+      })
     }
   }
 }