widget.qw 0.0.1

package/src/components/Sheet.vue

@@ -0,0 +1,93 @@
+<template>
+    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
+        :placeholder="props.placeholder">
+
+        <template #input>
+            <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
+                <van-button icon="plus" type="primary" size="mini" @click="onAdd(0)" />
+            </div>
+            <div class="item-box" v-for="(item, i) in modelValue" :key="i">
+                <slot name="item" :item="item" :auth="props.auth"></slot>
+                <div class="actionbar" v-if="!isGone && !isDisabled && !isReadonly">
+                    <van-button icon="plus" type="primary" size="mini" @click="onAdd(i+1)" />
+                    <van-button icon="cross" type="primary" size="mini" @click="onDelete(i)" />
+                </div>
+            </div>
+        </template>
+
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import { useVModel } from '@vueuse/core'
+import util from '../util'
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: []
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+onMounted(() => {
+})
+
+const onAdd = (idx) => {
+    modelValue.value.splice(idx, 0, {})
+}
+
+const onDelete = (idx) => {
+    modelValue.value.splice(idx, 1)
+}
+
+watch(() => props.modelValue, (o, n) => {
+    if (!props.modelValue)
+        modelValue.value = []
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+.item-box {
+    position: relative;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+.actionbar {
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+}
+
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control--custom) {
+    display: block;
+}
+</style>

package/src/components/SinglePicker.vue

@@ -0,0 +1,103 @@
+<template>
+    <van-field v-if="!isGone" v-model="modelValue" :is-link="!isDisabled" :disabled="isDisabled" readonly name="picker"
+        :label="label" label-class="label" :placeholder="props.placeholder" @click-input="onClick" :required="isRequired"
+        :rules="props.rules" />
+    <van-popup v-model:show="isShowPicker" position="bottom">
+        <van-picker :columns="totalOptions" @confirm="onConfirm" @cancel="isShowPicker = false" />
+    </van-popup>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+    id: String,
+    modelValue: String,
+    label: String,
+    placeholder:String,
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    auth: {
+        type: String,
+        default: ''
+    },
+    rules: {
+        type: Array,
+        default: null
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const totalOptions = computed(() => {
+    if (!modelValue.value)
+        return columns.value
+
+    let ary = columns.value.filter(item => item.value == modelValue.value)
+    if (ary.length < 1)
+        ary = [{ text: modelValue.value, value: modelValue.value }, ...columns.value]
+    else
+        ary = [...columns.value]
+    return ary
+})
+const { isRequired, isGone, isDisabled,isReadonly } = util.props2auth(props)
+
+const isShowPicker = ref(false)
+const columns = ref([])
+
+onMounted(() => {
+    query()
+})
+
+const query = async () => {
+    let params = {
+        id: props.id,
+    }
+    const res = await util.dictionary_dict(params)
+    console.log(res.data)
+    if (!res.data.parseValue) {
+        columns.value = []
+        return
+    }
+
+    columns.value = res.data.parseValue.map(item => {
+        return {
+            text: item.title,
+            value: item.code
+        }
+    })
+}
+
+const onClick = () => {
+    if (isDisabled.value)
+        return
+
+    isShowPicker.value = true
+}
+
+const onConfirm = ({ selectedOptions }) => {
+    console.log("selectedOptions: " + selectedOptions)
+    modelValue.value = selectedOptions[selectedOptions.length - 1].value
+    isShowPicker.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control:disabled) {
+    color: #000 !important;
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: #000;
+}
+</style>

package/src/components/SingleUserSelector.vue

@@ -0,0 +1,425 @@
+<template>
+  <van-field v-if="!isGone" :is-link="isReadonly ? false : true" readonly :label="props.label"
+    :placeholder="props.placeholder" @click="show = !isReadonly" :model-value="selectedUserInfo" :required="isRequired"
+    :rules="props.rules" input-align="center" />
+  <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="goBack" icon="arrow-left" size="small" v-show="currentPath !== '请选择部门'" />
+        </div>
+
+        <!-- 移除header-center包装，直接使用current-path -->
+        <div class="current-path">{{ currentPath }}</div>
+
+        <div class="header-right">
+          <van-button size="small" @click="handleClear" class="cancel-btn">清空</van-button>
+
+          <van-button type="primary" size="small" @click="confirmSelection" class="confirm-btn">确定</van-button>
+        </div>
+      </div>
+
+      <!-- 搜索框 -->
+      <van-search v-model="searchValue" placeholder="输入工号查询" @clear="clearSearch" @search="handleSearch"
+        @cancel="clearSearch" show-action>
+        <template #action>
+          <div @click="handleSearch">搜索</div>
+        </template>
+      </van-search>
+
+      <div class="scroll-container">
+        <!-- 遍历部门列表 -->
+        <van-cell-group>
+          <van-cell v-for="department in departments" :key="department.id" :title="department.name" is-link
+            @click="toggleDepartment(department)" />
+        </van-cell-group>
+
+        <!-- 遍历人员列表 -->
+        <van-radio-group v-model="tempSelectedUser">
+          <van-cell-group>
+            <van-cell v-for="user in userlist" :key="user.id" :title="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 } from "vue";
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+
+// 弹出层
+const show = ref(false);
+
+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: () => [],
+  },
+  // 默认查询所有组织机构
+  currentDeptId: {
+    type: String,
+    default: "1", //组织机构id
+  },
+  // 二级部门取值范围字典id
+  // 取dictionary库.dict的配置id
+  deptRangeId: {
+    type: String,
+    default: ''
+  },
+  auth: {
+    type: String,
+    default: "",
+  },
+});
+// 定义emit
+const emit = defineEmits(["update:modelValue", "select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+// 部门列表
+let departments = ref([]);
+let departmentFulls = ref([])
+const searchValue = ref("");
+const currentPath = ref("请选择部门");
+// 定义用户
+const userlist = ref([]);
+// 定义选择单选按钮的值
+const tempSelectedUser = ref(null);
+// 定义展示表单展示区的值
+const selectedUserInfo = ref([]);
+
+// 获得部门列表
+const fetchAllDepartments = async () => {
+  // 查询所有部门
+  const response = await util.get_subdepartments({ departmentId: props.currentDeptId })
+  let 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
+    }
+
+    // 当前用户所在二级部门列表
+    const user = await getUserInfoById(props.modelValue)
+    if (user && user.department.id) {
+      level2DeptIds = [...level2DeptIds, user.department.id]
+    }
+  }
+
+  // 只保留指定二级部门列表、当前用户的二级部门
+  if (props.deptRangeId) {
+    if (level2DeptIds && level2DeptIds.length > 0) {
+      level2Depts = level2Depts.filter(item => {
+        return level2DeptIds.includes(item.id)
+      })
+    }
+  }
+
+  //departments
+  departments.value = getCurrentDepartments(level2Depts || [])
+  departmentFulls.value = departments.value;
+};
+
+//嵌套处理获得树形结构
+const getCurrentDepartments = (data) => {
+  let result = data.map((item) => {
+    return {
+      id: item.id,
+      name: item.name,
+      subDepartments: getCurrentDepartments(item.subDepartments || []),
+    };
+  });
+  return result;
+};
+// 添加部门路径查找方法
+function findDeptPath(deptId, tree, path = []) {
+  for (const dept of tree) {
+    if (dept.id === deptId) {
+      return [...path, dept];
+    }
+    if (dept.subDepartments?.length) {
+      const found = findDeptPath(deptId, dept.subDepartments, [...path, dept]);
+      if (found && found.length>0) return found;
+    }
+  }
+  return [];
+}
+
+// 获得人员列表
+const fetchAllUsers = async (departmentId) => {
+  const response = await util.get_subdepartments_users({ departmentId });
+  return response.data.users || [];
+};
+
+// 通过id获得人员信息
+const getUserInfoById = async (userId) => {
+  const response = await util.get_wxuser_by_id({ userId });
+  return response.data;
+};
+
+// 清空搜索
+const clearSearch = () => {
+  searchValue.value = ""; // 清空搜索框
+  // 部门列表赋初始值
+  departments.value = departmentFulls.value;
+};
+
+// 搜索人员
+const handleSearch = () => {
+  // 在这里可以处理搜索逻辑
+  if (searchValue.value) {
+    departments.value = []; // 清空部门列表
+    // 搜索用户
+    getUserInfoById(searchValue.value).then((user) => {
+      if (user) {
+        userlist.value = [user];
+        //更新currentPath显示用户部门
+        const path = findDeptPath(user.mainDepartment, departmentFulls.value);
+        console.log("path", path);
+        currentPath.value = "";
+        path.forEach((dept) => {
+          currentPath.value += dept.name + "/";
+        });
+      } else {
+        userlist.value = []; // 清空人员列表
+      }
+    });
+  }
+};
+
+// 切换部门
+const toggleDepartment = (department) => {
+  console.log("选择了部门:", department.subDepartments);
+  departments.value = department.subDepartments;
+  // 在这里可以处理部门选择逻辑
+  console.log("选择的部门:", departments);
+  // 更新当前路径
+  if (currentPath.value === "请选择部门") {
+    currentPath.value = "";
+  }
+  currentPath.value += department.name + "/";
+  // 请求加载人员
+  fetchAllUsers(department.id).then((users) => {
+    // 在这里可以处理人员列表逻辑
+    userlist.value = users;
+  })
+};
+
+// 返回上一级部门
+const goBack = () => {
+  searchValue.value = ""; // 清空搜索框
+  if (currentPath.value === "请选择部门") return;
+  currentPath.value = currentPath.value.replace(/\/+$/, "");
+  currentPath.value = currentPath.value.substring(
+    0,
+    currentPath.value.lastIndexOf("/")
+  );
+
+  if (currentPath.value !== "") {
+    // 加载当前路径的部门列表
+    const departmentlist = departmentFulls.value.find(
+      (dept) => dept.name === currentPath.value.split("/")[0]
+    );
+    departments.value = departmentlist.subDepartments;
+    // 加载当前路径的人员列表
+    fetchAllUsers(departmentlist.id).then((users) => {
+      userlist.value = users;
+    });
+  } else {
+    currentPath.value = "请选择部门";
+    departments.value = departmentFulls.value;
+  }
+};
+
+// 确认按钮
+const confirmSelection = () => {
+  modelValue.value = tempSelectedUser.value
+  //对应的人员信息
+  const selectedUser = userlist.value.find(
+    (user) => user.userid === tempSelectedUser.value
+  );
+
+  selectedUserInfo.value = selectedUser.name;
+
+  emit('select', selectedUser)
+
+  show.value = false;
+};
+// 清空按钮
+const handleClear = () => {
+  tempSelectedUser.value = null;
+  selectedUserInfo.value = null;
+  // 清空人员列表
+  userlist.value = [];
+  show.value = false;
+  currentPath.value = "请选择部门";
+  departments.value = departmentFulls.value;
+  modelValue.value = tempSelectedUser.value
+};
+
+//首页加载
+onMounted(async () => {
+  await fetchAllDepartments();
+  await initDepartment();
+});
+
+// 人员初始化
+const initUser = async () => {
+  console.log('initUser', props.modelValue, departmentFulls.value)
+  if (!props.modelValue || !departmentFulls.value || departmentFulls.value.length < 1)
+    return
+
+  const user = await getUserInfoById(props.modelValue);
+  if (user) {
+    //更新currentPath显示用户部门
+    const path = findDeptPath(user.mainDepartment, departmentFulls.value);
+    currentPath.value = "";
+    path.forEach((dept) => {
+      currentPath.value += dept.name + "/";
+    });
+    // 清空部门列表
+    departments.value = []; // 清空部门列表
+    // 加载当前路径的人员列表
+    fetchAllUsers(user.mainDepartment).then((users) => {
+      userlist.value = users;
+      // 选中当前用户
+      tempSelectedUser.value = user.userid;
+      selectedUserInfo.value = user.name;
+    });
+  } else {
+    userlist.value = []; // 清空人员列表
+  }
+};
+// 部门初始化
+const initDepartment = async () => {
+      //更新currentPath显示用户部门
+      const path = findDeptPath(props.currentDeptId, departmentFulls.value);
+      currentPath.value = "";
+      path.forEach((dept) => {
+        currentPath.value += dept.name + "/";
+      });
+      // 更新部门列表
+      departments.value = departmentFulls.value; // 重置部门列表
+};
+
+//监听searchValue变化
+watch(searchValue, (newValue, oldValue) => {
+  if (newValue.length === 0) {
+    // 重新加载部门列表
+    departments.value = departmentFulls.value;
+    // 清空人员列表
+    userlist.value = [];
+  }
+});
+watch(() => modelValue.value, (n, o) => {
+  initUser()
+}, {
+  immediate: true
+})
+watch(() => departmentFulls.value, (n, o) => {
+  initUser()
+}, {
+  immediate: true
+})
+</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/components/Switch.vue

@@ -0,0 +1,65 @@
+<template>
+    <van-field :label="props.label" v-if="!isGone" :disabled="isDisabled" :required="isRequired"
+        :placeholder="props.placeholder">
+        <template #input>
+            <van-switch v-model="modelValue" :disabled="isDisabled" />
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import { useVModel } from '@vueuse/core'
+import util from '../util'
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    readonly: {
+        type: Boolean,
+        default: true
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+onMounted(() => {
+})
+
+watch(()=>props.modelValue,(o,n)=>{
+    if(!props.modelValue)
+        modelValue.value = false
+},{immediate:true})
+</script>
+
+<style lang="scss" scoped>
+:deep(.label) {
+    color: #000 !important;
+}
+
+:deep(.van-field__control:disabled) {
+    color: #000 !important;
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: #000;
+}
+</style>