widget.qw 0.0.1 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/api/index.js

@@ -123,4 +123,20 @@ export const auth_get_user_info = (data) => {
     method: "POST",
     data: data,
   })
+}
+
+export const part_children = (data) => {
+  return request_json({
+    url: vm.urlCallback() + "/ac-api/part/children",
+    method: "POST",
+    data: data,
+  })
+}
+
+export const part_detail = (data) => {
+  return request_json({
+    url: vm.urlCallback() + "/ac-api/part/detail",
+    method: "POST",
+    data: data,
+  })
 }

package/src/components/CascaderPicker.vue

@@ -0,0 +1,107 @@
+<template>
+    <van-field v-if="!isGone" :label="props.label" :required="isRequired" :rules="props.rules" :disabled="isDisabled"
+        :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
+        label-class="label">
+        <template #input>
+        <van-tag class="selected-node" v-if="modelValue" :closeable="!isDisabled" type="primary" size="medium"
+          @close.stop="onDelete">
+          {{ data.selectedNode.formatLabel }}
+        </van-tag>
+        </template>
+    </van-field>
+
+    <CascaderPop v-model:show="data.isShowPop"  
+        v-model="modelValue"
+        :placeholder="props.placeholder"
+        @select="onSelect" :queryNodes="props.queryNodes" :queryNode="props.queryNode" />
+
+</template>
+<script setup>
+import { reactive, onMounted, watch } from "vue";
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+import CascaderPop from './widget/CascaderPop.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: "",
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    rules: {
+        type: Array,
+        default: [],
+    },
+    auth: {
+        type: String,
+        default: "",
+    },
+    queryNodes:{
+        type:Function,
+        default:()=>{}
+    },
+    queryNode:{
+        type:Function,
+        default:()=>{}
+    }
+});
+
+// 弹出层
+const data = reactive({
+    isShowPop: false,
+    selectedNode: {}
+})
+
+// 定义emit
+const emit = defineEmits(["update:modelValue", "select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+//首页加载
+onMounted(() => {
+})
+
+const onSelect = (node) => {
+    data.selectedNode = node
+}
+
+const onDelete=()=>{
+    data.selectedNode={}
+    modelValue.value = null
+}
+
+watch(() => modelValue.value, async (n, o) => {
+    if (!n) {
+        data.selectedNode = {}
+        return
+    }
+
+    props.queryNode((node)=>{
+        data.selectedNode = node
+        emit('select', data.selectedNode)
+    })
+}, {
+    immediate: true
+})
+</script>
+
+<style scoped>
+.user{
+  padding:4px 8px;
+}
+</style>

package/src/components/index.js

@@ -27,119 +27,124 @@ import ProjectDropdown from "./ProjectDropdown.vue";
 import Switch from './Switch.vue'
 import Sheet from './Sheet.vue'
 import TreePicker from './TreePicker.vue'
+import CascaderPicker from './CascaderPicker.vue'
 
 const components = [
   {
-    name: "UiqwAuditBar",
+    name: "WidgetQwAuditBar",
     widget: AuditBar,
   },
   {
-    name: "UiqwInput",
+    name: "WidgetQwInput",
     widget: Input,
   },
   {
-    name: "UiqwSinglePicker",
+    name: "WidgetQwSinglePicker",
     widget: SinglePicker,
   },
   {
-    name: "UiqwMultiPicker",
+    name: "WidgetQwMultiPicker",
     widget: MultiPicker,
   },
   {
-    name: "UiqwCheckGroup",
+    name: "WidgetQwCheckGroup",
     widget: CheckGroup,
   },
   {
-    name: "UiqwDatetimePicker",
+    name: "WidgetQwDatetimePicker",
     widget: DatetimePicker,
   },
   {
-    name: "UiqwDataSelector",
+    name: "WidgetQwDataSelector",
     widget: DataSelector,
   },
   {
-    name: "UiqwMultListSelector",
+    name: "WidgetQwMultListSelector",
     widget: MultListSelector,
   },
   {
-    name: "UiqwProductSelector",
+    name: "WidgetQwProductSelector",
     widget: ProductSelector,
   },
   {
-    name: "UiqwSubdepartmentSelector",
+    name: "WidgetQwSubdepartmentSelector",
     widget: SubdepartmentSelector,
   },
   {
-    name: "UiqwSingleUserSelector",
+    name: "WidgetQwSingleUserSelector",
     widget: SingleUserSelector,
   },
   {
-    name: "UiqwImagePicker",
+    name: "WidgetQwImagePicker",
     widget: ImagePicker,
   },
   {
-    name: "UiqwImagesPicker",
+    name: "WidgetQwImagesPicker",
     widget: ImagesPicker,
   },
   {
-    name: "UiqwFilePicker",
+    name: "WidgetQwFilePicker",
     widget: FilePicker,
   },
   {
-    name: 'UiqwBillCard',
+    name: 'WidgetQwBillCard',
     widget: BillCard
   },
   {
-    name: 'UiqwUserSelector',
+    name: 'WidgetQwUserSelector',
     widget: UserSelector
   },
   {
-    name: 'UiqwUsersPicker',
+    name: 'WidgetQwUsersPicker',
     widget: UsersPicker
   },
   {
-    name: 'UiqwUserPicker',
+    name: 'WidgetQwUserPicker',
     widget: UserPicker
   },
   {
-    name: 'UiqwProjectPicker',
+    name: 'WidgetQwProjectPicker',
     widget: ProjectPicker
   },
   {
-    name: 'UiqwUserProfile',
+    name: 'WidgetQwUserProfile',
     widget: UserProfile
   },
   {
-    name: 'UiqwYearDropdown',
+    name: 'WidgetQwYearDropdown',
     widget: YearDropdown
   },
   {
-    name: 'UiqwMonthDropdown',
+    name: 'WidgetQwMonthDropdown',
     widget: MonthDropdown
   },
   {
-    name: 'UiqwDayDropdown',
+    name: 'WidgetQwDayDropdown',
     widget: DayDropdown
   },
   {
-    name: 'UiqwProjectDropdown',
+    name: 'WidgetQwProjectDropdown',
     widget: ProjectDropdown
   },
   {
-    name: 'UiqwSwitch',
+    name: 'WidgetQwSwitch',
     widget: Switch
   },
   {
-    name: 'UiqwSheet',
+    name: 'WidgetQwSheet',
     widget: Sheet
   },
   {
-    name: 'UiqwTreePicker',
+    name: 'WidgetQwTreePicker',
     widget: TreePicker
+  },
+  {
+    name: 'WidgetQwCascaderPicker',
+    widget: CascaderPicker
   }
 ];
 // 导出组件
-export const UIQW = {
+export const WidgetQw = {
   install(app) {
     components.forEach((component) => {
       app.component(component.name, component.widget);
@@ -150,8 +155,8 @@ export const UIQW = {
 // 导出初始化方法
 export function setup(params) {
   vm.urlCallback = params.urlCallback;
-  (vm.tokenCallback = params.tokenCallback),
-    (vm.needLoginCallback = params.needLoginCallback);
+  vm.tokenCallback = params.tokenCallback;
+  vm.needLoginCallback = params.needLoginCallback;
 }
 
 export * from "./SecretNotify";

package/src/components/widget/CascaderPop.vue

@@ -0,0 +1,313 @@
+<template>
+    <van-popup v-model:show="show" round position="bottom" class="cascader-pop">
+        <div class="cascader-selector">
+            <div class="cascader-header">
+                <div class="header-left">
+                    <van-button @click="onBack" icon="arrow-left" size="small" />
+                </div>
+
+                <!-- 移除header-center包装，直接使用current-path -->
+                <div class="current-path">{{ pathsLabel }}</div>
+
+                <div class="header-right">
+                    <van-button size="small" @click="onCancel" class="cancel-btn">取消</van-button>
+
+                    <van-button type="primary" size="small" @click="onSubmit" class="confirm-btn">确定</van-button>
+                </div>
+            </div>
+
+            <!-- 搜索框 -->
+            <van-search v-model="data.keyword" :placeholder="props.placeholder" @clear="onClear" @search="onSearch"
+                @cancel="onClear" show-action>
+                <template #action>
+                    <div @click="onSearch">搜索</div>
+                </template>
+            </van-search>
+
+            <div class="scroll-container">
+                <!-- 遍历子节点列表 -->
+                <van-cell-group>
+                    <van-cell v-for="(item, i) in optionNodes" :key="i" >
+                        <template #title>
+                            <div class="cell-content">
+                                <div class="circle-selector" @click.stop="onToggle(item)">
+                                    <van-icon v-if="data.selectedNodeId === item.id" name="success" size="20" color="#409eff"/>
+                                    <van-icon v-if="data.selectedNodeId != item.id" name="circle" size="20" color="#e0e0e0"/>
+                                </div>
+                                <span class="name">{{ item.label }}</span>
+                            </div>
+                        </template>
+                        <template #right-icon v-if="item.hasChildren" >
+                            <van-icon name="arrow" @click.stop="onNextLevel(item)"/>
+                        </template>
+                    </van-cell>
+                </van-cell-group>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, reactive, computed } from "vue";
+import util from "../../util"
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    queryNodes: {
+        type: Function,
+        default: () => { }
+    },
+    queryNode: {
+        type: Function,
+        default: () => { }
+    }
+});
+// 定义emit
+const emit = defineEmits(["update:show", "select"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+const modelValue = useVModel(props, 'modelValue', emit)
+const data = reactive({
+    // 所有节点
+    totalNodes: [],
+    // 搜索关键字
+    keyword: "",
+    //关键字搜索到的节点列表
+    searchNodes: [],
+    //当前节点
+    currentNode: null,
+    //勾选的节点id
+    selectedNodeId: ''
+})
+
+// 待选节点列表
+const optionNodes = computed(() => {
+    if (data.keyword)
+        return data.searchNodes
+    else if (data.currentNode)
+        return data.currentNode?.children ? data.currentNode.children : []
+    else
+        return data.totalNodes ? data.totalNodes : []
+})
+
+//选中节点的路径:父/子/孙
+const pathsLabel = computed(() => {
+    if (!data.currentNode || !data.currentNode.id)
+        return ''
+
+    let paths = util.findPaths(data.currentNode.id, data.totalNodes)
+    console.log("paths", paths);
+    let res = paths.map(item => item.label).join('/')
+    return res
+})
+
+// 查询树状节点列表
+const queryTotalNodes = async () => {
+    await props.queryNodes({keyword:data.keyword,parentId:''}, (nodes) => {
+        data.totalNodes = nodes
+    })
+}
+
+// 关键字查询
+const onSearch = async () => {
+    await util.queryNodes({keyword:data.keyword,parentId:''}, (nodes) => {
+        data.searchNodes = nodes
+    })
+}
+
+// 返回上一级
+const onBack = () => {
+    if (!data.currentNode || !data.currentNode.id)
+        return
+
+    data.keyword = ""
+    data.currentNode = util.findParent(data.currentNode.id, data.totalNodes)
+}
+
+const onClear=()=>{
+    data.keyword = ''
+    data.searchNodes = []
+}
+
+// 清除掉选中节点
+const reset = () => {
+    // 当前节点
+    data.currentNode = null
+    // 搜索关键字
+    data.keyword = ""
+}
+
+// 确认按钮
+const onSubmit = () => {
+    if (!data.selectedNodeId) {
+        util.warnToast("请选择")
+        return
+    }
+
+    let selectedNode = util.findNode(data.selectedNodeId, data.totalNodes)
+    modelValue.value = selectedNode.id
+    emit('select', selectedNode)
+    show.value = false
+
+    reset()
+}
+
+// 取消按钮
+const onCancel = () => {
+    show.value = false
+    reset()
+}
+
+const onToggle = (node) => {
+    if(data.selectedNodeId == node.id)
+        data.selectedNodeId = ''
+    else
+        data.selectedNodeId = node.id
+}   
+
+const onNextLevel = (node) => {
+    props.queryNodes({ keyword: data.keyword, parentId: node.id }, (nodes) => {
+        node.children = nodes
+        data.currentNode = node
+    })
+}
+
+//首页加载
+onMounted(async () => {
+    await queryTotalNodes()
+})
+
+watch(() => props.modelValue, () => {
+    // 初始化当前节点
+    data.currentNode = util.findParent(props.modelValue, data.totalNodes)
+}, { immediate: true })
+</script>
+
+<style scoped>
+.cascader-pop {
+    width: 100%;
+    overflow: hidden;
+}
+
+.cascader-selector {
+    padding: 10px;
+}
+
+.search-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.clear-btn {
+    background-color: #f2f3f5;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 14px;
+}
+
+.confirm-btn {
+    background-color: #1989fa;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 14px;
+}
+
+.no-results {
+    text-align: center;
+    padding: 20px;
+    color: #969799;
+}
+
+.cascader-header {
+    padding: 10px;
+    border-bottom: 1px solid #ebedf0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.current-path {
+    flex: 1;
+    font-size: 14px;
+    color: #323233;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.header-right {
+    display: flex;
+    gap: 8px;
+    margin-left: auto;
+}
+
+.cancel-btn {
+    color: #969799;
+    margin-right: 5px;
+}
+
+.scroll-container {
+    height: calc(80vh - 150px);
+    overflow-y: auto;
+}
+
+
+.cell-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.circle-selector {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.circle-selector.selected {
+    background-color: #1989fa;
+    border-color: #1989fa;
+}
+
+.circle-selector.selected .van-icon {
+    color: white;
+    font-size: 14px;
+}
+
+.van-cell__right-icon {
+    color: #969799;
+    font-size: 16px;
+    margin-left: 8px;
+}
+
+.name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cancel-btn {
+    color: #969799;
+}
+</style>

package/src/main.js

@@ -49,7 +49,7 @@ import {
 } from "vant";
 import "vant/lib/index.css";
 //本地测试 初始化组件
-import { UIQW, setup } from "@/components";
+import { WidgetQw, setup } from "@/components";
 setup({
   urlCallback: () => {
     return process.env.VUE_APP_DOMAIN;
@@ -107,5 +107,5 @@ createApp(App)
   .use(Tag)
   .use(Switch)
   .use(TreeSelect)
-  .use(UIQW)
+  .use(WidgetQw)
   .mount("#app");

package/src/router/index.ts

@@ -149,6 +149,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/treepicker",
     name: "treepicker",
     component: () => import("../views/treepicker/index.vue"),
+  },
+  {
+    path: "/cascaderpicker",
+    name: "cascaderpicker",
+    component: () => import("../views/cascaderpicker/index.vue"),
   }
 ];
 

package/src/util/tree_util.js

@@ -41,6 +41,40 @@ export const findNode = (id, nodes) => {
     return res[res.length - 1]
 }
 
+// 查找节点路径列表
+// 返回:[父,子，孙]
+export const findPaths =(targetId, nodes, path = [])=> {
+    if (!nodes || nodes.length < 1 || !targetId)
+        return []
+
+    for (const node of nodes) {
+        if (node.id === targetId) {
+            return [...path, node];
+        }
+        if (node.children?.length) {
+            const founds = findPaths(targetId, node.children, [...path, node]);
+            if (founds && founds.length > 0) return founds;
+        }
+    }
+
+    return []
+}
+
+//查找父节点
+export const findParent = (id, nodes) => {
+    if (!nodes || !id) {
+        return null
+    }
+
+    let paths = findPaths(id, nodes)
+
+    if (!paths || paths.length < 2) {
+        return null
+    }
+
+    return paths[paths.length-2]
+}
+
 // id列表转为节点对象列表
 export const ids2nodes=(ids,totalNodes)=>{
     if(!totalNodes || totalNodes.length<1 || !ids || ids.length<1)

package/src/views/auditbar/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page">
-        <uiqw-audit-bar v-if="data.userId" :processId="data.processId" :mouldId="data.mouldId" :userId="data.userId" :form="data.form"    
+        <widget-qw-audit-bar v-if="data.userId" :processId="data.processId" :mouldId="data.mouldId" :userId="data.userId" :form="data.form"    
             @apply="onApply" @pass="onPass" @refuse="onRefuse" @auth="onAuth" />
     </div>
 </template>

package/src/views/billcard/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page">
-        <uiqw-bill-card
+        <widget-qw-bill-card
             :category="data.category"
             :no="data.no"
             :userState="data.loginUserState"