widget.qw 0.0.1

package/src/components/widget/DataPop.vue

@@ -0,0 +1,96 @@
+<template>
+    <!-- 数据选择弹出层 -->
+    <van-popup v-model:show="show" position="bottom" class="popup-box">
+        <!-- 全选 -->
+        <div class="select-all-container">
+            <van-checkbox shape="square" v-model="data.isAllChecked" @click="onToggleAll"
+                label-position="left">全选</van-checkbox>
+        </div>
+        <!-- 数据列表 -->
+        <div class="checkbox-list">
+            <van-checkbox-group v-model="modelValue" direction="vertical">
+                <van-checkbox style="padding:5px 0;" v-for="(option, i) in props.options" :key="i" :name="option.code"
+                    shape="square">{{ option.title }}</van-checkbox>
+            </van-checkbox-group>
+        </div>
+    </van-popup>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, onBeforeUpdate, computed, nextTick, watch } from "vue"
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array,
+        default: []
+    },
+    modelValue: {
+        type: Array,
+        default: []
+    }
+});
+
+const data = reactive({
+    isAllChecked: false,
+})
+// 定义emit
+const emit = defineEmits(["update:show", "update:modelValue"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+// 选中的code列表
+const modelValue = useVModel(props, 'modelValue', emit)
+
+onMounted(async () => {
+
+});
+
+const onToggleAll = () => {
+    if (data.isAllChecked) {
+        modelValue.value = props.options.map(item => {
+            return item.code
+        })
+    } else {
+        modelValue.value = [];
+    }
+};
+</script>
+
+<style scoped>
+.popup-box {
+    min-height: 20vh;
+    max-height: 40vh;
+    overflow-y: auto;
+
+    .checkbox-list {
+        padding: 15px 25px;
+
+        :deep(.van-checkbox__label) {
+            flex: 1;
+            text-align: right;
+        }
+    }
+}
+
+.select-all-container {
+    font-size: 14px;
+    padding: 15px 25px 0 15px;
+    margin: 10px 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.select-all-container .van-checkbox {
+    margin-left: auto;
+}
+
+/* 新增：调整方形复选框的边距 */
+.van-checkbox--square {
+    margin-left: 8px;
+}
+</style>

package/src/components/widget/TreePop.vue

@@ -0,0 +1,89 @@
+<template>
+    <!-- 数据选择弹出层 -->
+    <van-popup v-model:show="show" position="bottom" class="popup-box">
+        <van-tree-select
+            v-model:active-id="modelValue"
+            v-model:main-active-index="data.activeIndex"
+            :items="options"
+            />
+    </van-popup>
+</template>
+
+<script setup>
+import { onMounted, ref, reactive, onBeforeUpdate, computed, nextTick, watch } from "vue"
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array,
+        default: []
+    },
+    modelValue: {
+        type: Array,
+        default: []
+    }
+});
+
+const data = reactive({
+    activeIndex: 0,
+})
+// 定义emit
+const emit = defineEmits(["update:show", "update:modelValue"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+// 选中的code列表
+const modelValue = useVModel(props, 'modelValue', emit)
+
+onMounted(async () => {
+
+});
+
+const onToggleAll = () => {
+    if (data.isAllChecked) {
+        modelValue.value = props.options.map(item => {
+            return item.code
+        })
+    } else {
+        modelValue.value = [];
+    }
+};
+</script>
+
+<style scoped>
+.popup-box {
+    min-height: 20vh;
+    max-height: 40vh;
+    overflow-y: auto;
+
+    .checkbox-list {
+        padding: 15px 25px;
+
+        :deep(.van-checkbox__label) {
+            flex: 1;
+            text-align: right;
+        }
+    }
+}
+
+.select-all-container {
+    font-size: 14px;
+    padding: 15px 25px 0 15px;
+    margin: 10px 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.select-all-container .van-checkbox {
+    margin-left: auto;
+}
+
+/* 新增：调整方形复选框的边距 */
+.van-checkbox--square {
+    margin-left: 8px;
+}
+</style>

package/src/components/widget/UserPop.vue

@@ -0,0 +1,347 @@
+<template>
+  <van-popup v-model:show="show" round position="bottom" class="user-popup">
+    <div class="department-selector">
+      <div class="picker-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="输入工号查询" @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="dept in subDepts" :key="dept.id" :title="dept.name" is-link @click="onSelectDept(dept)" />
+        </van-cell-group>
+
+        <!-- 遍历人员列表 -->
+        <van-radio-group v-model="data.selectedUser">
+          <van-cell-group>
+            <van-cell v-for="user in subUsers" :key="user.id" :title="`${user.userid}  ${user.name}`">
+              <template #right-icon>
+                <van-radio :name="user.userid" />
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-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({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  // 默认查询所有组织机构
+  rootDeptId: {
+    type: String,
+    default: "1", //组织机构id
+  },
+  // 二级部门取值范围字典id
+  // 取dictionary库.dict的配置id
+  deptRangeId: {
+    type: String,
+    default: ''
+  }
+});
+// 定义emit
+const emit = defineEmits(["update:show", "select"]);
+// 弹出?
+const show = useVModel(props, 'show', emit)
+const data = reactive({
+  // 当前选中的机构
+  selectedDeptId: '',
+  // 所有的部门
+  totalDepts: [],
+  // 搜索关键字
+  keyword: "",
+  searchUsers: [],
+  selectedUser: null
+})
+
+
+// 查找部门路径列表
+function findDeptPaths(targetDept, tree, path = []) {
+  if (!tree || tree.length < 1 || !targetDept || !targetDept.id)
+    return []
+
+  for (const dept of tree) {
+    if (dept.id === targetDept.id) {
+      return [...path, dept];
+    }
+    if (dept.subDepartments?.length) {
+      const found = findDeptPaths(targetDept, dept.subDepartments, [...path, dept]);
+      if (found && found.length > 0) return found;
+    }
+  }
+
+  return []
+}
+
+// 选中的部门
+const selectedDept = computed(()=>{
+  if(!data.selectedDeptId)
+    return null
+
+  let targetDept = findDept(data.selectedDeptId,data.totalDepts)
+  return targetDept
+})
+
+//选中部门的路径:部门/科室
+const pathsLabel = computed(() => {
+  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
+  console.log("paths", paths);
+  let res = ''
+  paths.forEach((dept) => {
+    res += dept.name + "/";
+  })
+  return res
+})
+
+const subDepts = computed(() => {
+  if (data.keyword)
+    return []
+  else if (selectedDept.value)
+    return selectedDept.value.subDepartments
+  else
+    return data.totalDepts
+})
+
+const subUsers = computed(() => {
+  if (data.keyword)
+    return data.searchUsers
+  else if (selectedDept.value)
+    return selectedDept.value.users
+  else
+    return []
+})
+
+// 获得部门列表
+const queryTotalDepts = async () => {
+  // 查询所有部门
+  const response = await util.get_subdepartments_users({ departmentId: props.rootDeptId, hasGrandson:false })
+  let level2Depts = []
+  if(response.data)
+    level2Depts = response.data.subDepartments
+
+  // 取配置的二级部门取值范围
+  let level2DeptIds = []
+  if (props.deptRangeId) {
+    let res = await util.dictionary_dict({ id: props.deptRangeId })
+    if (res.data.parseValue && res.data.parseValue.length > 0) {
+      level2DeptIds = res.data.parseValue
+    }
+  }
+
+  // 只保留指定二级部门列表
+  if (props.deptRangeId) {
+    if (level2DeptIds && level2DeptIds.length > 0) {
+      level2Depts = level2Depts.filter(item => {
+        return level2DeptIds.includes(item.id)
+      })
+    }
+  }
+
+  data.totalDepts = level2Depts || []
+}
+
+// 查找机构
+function findDept(deptId, tree) {
+  if (!tree || tree.length < 1)
+    return null
+
+  for (const dept of tree) {
+    if (dept.id === deptId) {
+      return dept
+    }
+
+    const found = findDept(deptId, dept.subDepartments);
+    if (found) return found
+  }
+
+  return null
+}
+
+// 查找父机构
+function findParentDept(deptId, tree) {
+  if (!tree || tree.length < 1)
+    return null
+
+  for (const dept of tree) {
+    if (!dept.subDepartments || dept.subDepartments.length < 1)
+      continue
+
+    let ary = dept.subDepartments.filter(item => item.id == deptId)
+    if (ary && ary.length > 0)
+      return dept
+
+    const found = findParentDept(deptId, dept.subDepartments);
+    if (found) return found
+  }
+
+  return null
+}
+
+// 搜索人员
+const onSearch = async () => {
+  if (!data.keyword)
+    return
+
+  // 搜索用户
+  const res = await util.wx_user_list({ keyword: data.keyword, page: 1, limit: 10000 })
+  data.searchUsers = res.data.list
+}
+
+// 切换部门
+const onSelectDept = async(department) => {
+  const res = await util.get_subdepartments_users({ departmentId: department.id, hasGrandson:false })
+  let targetDept = findDept(department.id, data.totalDepts)
+  targetDept.subDepartments = res.data.subDepartments
+  targetDept.users = res.data.users
+  data.selectedDeptId = department.id
+}
+
+// 返回上一级部门
+const onBack = () => {
+  data.keyword = ""
+
+  let paths = findDeptPaths(selectedDept.value, data.totalDepts)
+  console.log('22222222', paths)
+  if (!paths || paths.length <= 1){
+    data.selectedDeptId = ''
+    return
+  }
+
+  data.selectedDeptId = paths[paths.length - 2].id
+}
+
+// 清除掉选中部门及人
+const reset = () => {
+  // 当前选中的机构
+  data.selectedDeptId = ''
+  // 搜索关键字
+  data.keyword = ""
+  data.searchUsers = []
+  data.selectedUser = {}
+}
+
+// 确认按钮
+const onSubmit = () => {
+  if (!data.selectedUser) {
+    util.warnToast("请选择用户")
+    return
+  }
+
+  emit('select', data.selectedUser)
+  show.value = false
+
+  reset()
+}
+
+// 取消按钮
+const onCancel = () => {
+  show.value = false
+  reset()
+};
+
+//首页加载
+onMounted(async () => {
+  await queryTotalDepts()
+  // 初始化当前父部门
+  data.selectedDept = findDept(props.rootDeptId, data.totalDepts)
+})
+</script>
+
+<style scoped>
+.user-popup {
+  width: 100%;
+  overflow: hidden;
+}
+
+.department-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;
+}
+
+.picker-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;
+}
+</style>

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/main.js

@@ -0,0 +1,111 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import util from "./util";
+import {
+  Icon,
+  Image,
+  Button,
+  Toast,
+  Calendar,
+  Popup,
+  Cell,
+  CellGroup,
+  NavBar,
+  Field,
+  List,
+  PullRefresh,
+  Divider,
+  Loading,
+  Picker,
+  DropdownMenu,
+  DropdownItem,
+  Stepper,
+  Grid,
+  GridItem,
+  Form,
+  CheckboxGroup,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  Uploader,
+  Notify,
+  Popover,
+  Tabbar,
+  TabbarItem,
+  Search,
+  Col,
+  Row,
+  Tab,
+  Tabs,
+  DatePicker,
+  TimePicker,
+  PickerGroup,
+  Step,
+  Steps,
+  Tag,
+  Switch,
+  TreeSelect 
+} from "vant";
+import "vant/lib/index.css";
+//本地测试 初始化组件
+import { UIQW, setup } from "@/components";
+setup({
+  urlCallback: () => {
+    return process.env.VUE_APP_DOMAIN;
+  },
+  tokenCallback: () => {
+    return util.getToken()
+  },
+  needLoginCallback: () => {
+    router.push({ path: "/login" });
+  },
+});
+
+createApp(App)
+  .use(router)
+  .use(Popover)
+  .use(Icon)
+  .use(Image)
+  .use(Button)
+  .use(Toast)
+  .use(Calendar)
+  .use(Popup)
+  .use(CellGroup)
+  .use(Cell)
+  .use(NavBar)
+  .use(Field)
+  .use(List)
+  .use(PullRefresh)
+  .use(Divider)
+  .use(Loading)
+  .use(Picker)
+  .use(DropdownMenu)
+  .use(DropdownItem)
+  .use(Stepper)
+  .use(Grid)
+  .use(GridItem)
+  .use(Form)
+  .use(CheckboxGroup)
+  .use(Checkbox)
+  .use(RadioGroup)
+  .use(Radio)
+  .use(Uploader)
+  .use(Notify)
+  .use(Tabbar)
+  .use(Col)
+  .use(Row)
+  .use(TabbarItem)
+  .use(Search)
+  .use(Tab)
+  .use(Tabs)
+  .use(DatePicker)
+  .use(TimePicker)
+  .use(PickerGroup)
+  .use(Step)
+  .use(Steps)
+  .use(Tag)
+  .use(Switch)
+  .use(TreeSelect)
+  .use(UIQW)
+  .mount("#app");