widget.qw 1.0.98 → 1.1.0

package/src/components/UsersPicker.vue

@@ -1,118 +0,0 @@
-<template>
-  <van-field v-if="!isGone"
-    :label="props.label" :required="isRequired" :rules="rules" :disabled="isDisabled" :modelValue="modelValue"
-    :placeholder="props.placeholder" :is-link="isReadonly ? false : true" @click="data.isShowPop = !isReadonly"
-    label-class="label">
-    <template #input>
-      <div class="user-list">
-        <van-tag class="user-item" :closeable="!isDisabled" type="primary" plain v-for="(item, i) in data.users"
-          :key="item" @close.stop="onDelete(item)">
-          {{ item.name }}
-        </van-tag>
-      </div>
-    </template>
-  </van-field>
-
-  <UserPop v-model:show="data.isShowPop" 
-    :rootDeptId="props.rootDeptId"
-    :deptRangeId="props.deptRangeId"
-    @select="onSelectUser" />
-
-</template>
-<script setup>
-import { reactive, onMounted, watch } from "vue";
-import util from "../util"
-import { useVModel } from '@vueuse/core'
-import UserPop from './widget/UserPop.vue'
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: [],
-  },
-  label: {
-    type: String,
-    default: "选择人员",
-  },
-  placeholder: {
-    type: String,
-    default: "请选择人员",
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Array,
-    default: () => [],
-  },
-  // 默认查询所有组织机构
-  rootDeptId: {
-    type: String,
-    default: "1", //组织机构id
-  },
-  // 二级部门取值范围字典id
-  // 取dictionary库.dict的配置id
-  deptRangeId: {
-    type: String,
-    default: ''
-  },
-  auth: {
-    type: String,
-    default: "",
-  },
-});
-
-// 弹出层
-const data = reactive({
-  isShowPop: false,
-  users: []
-})
-
-// 定义emit
-const emit = defineEmits(["update:modelValue", "select"]);
-const modelValue = useVModel(props, 'modelValue', emit)
-const { isRequired, isReadonly, isGone, isDisabled, rules } = util.props2auth(props);
-
-//首页加载
-onMounted(() => {
-})
-
-const onSelectUser = (userId) => {
-  let newAry = [...(modelValue.value || []), userId]
-  modelValue.value = util.uniq(newAry)
-}
-
-const onDelete=(user)=>{
-  modelValue.value = (modelValue.value || []).filter(item=>{
-    return item != user.userid
-  })
-}
-
-watch(() => modelValue.value, async(n, o) => {
-  if(!modelValue.value || modelValue.value.length<1){
-    data.users = []
-    return
-  }
-
-  let ary = []
-  for(var i=0;i<modelValue.value.length;i++){
-    let res = await util.get_wxuser_by_id({userId:modelValue.value[i]})
-    ary.push(res.data)
-  }
-  data.users = ary
-  emit('select', data.users)
-}, {
-  immediate: true
-})
-</script>
-
-<style scoped>
-.user-item{
-  margin:3px;
-}
-</style>

package/src/components/widget/UserPop.vue

@@ -1,346 +0,0 @@
-<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: 10 })
-  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)
-  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/views/userspicker/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="page">
-    <WidgetQwUsersPicker
-      :auth="formData.auth"
-      :deptRangeId="formData.deptRangeId"
-      v-model="formData.userIds"
-      @select="onSelect"
-    />
-  </div>
-</template>
-
-<script setup>
-import { reactive ,onMounted} from "vue";
-const formData = reactive({
-  deptRangeId: "production_dept_ids",
-  userIds: null,
-  auth: "require",
-});
-
-const onSelect=(e)=>{
-  console.log('onSelect', e)
-}
-
-onMounted(()=>{
-  // setTimeout(()=>{
-  //   formData.singleUser = '014391'
-  // },10000)
-})
-</script>
-
-<style lang="scss" scoped>
-.page {
-  height: 100vh;
-  background: #fff;
-  text-align: center;
-  background-size: cover;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 80px 15px 0 15px;
-  box-sizing: border-box;
-}
-</style>