widget.qw 0.0.1

package/src/components/TreePicker.vue

@@ -0,0 +1,113 @@
+<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>
+      <div class="select-list">
+        <van-tag class="select-item" :closeable="!isDisabled" type="primary" plain v-for="(item, i) in selectOptions"
+          :key="item" @close.stop="onDelete(item)">
+          {{ item.text }}
+        </van-tag>
+      </div>
+    </template>
+  </van-field>
+
+  <TreePop v-model:show="data.isShowPop" 
+    v-model="modelValue"
+    :options="data.options" />
+
+</template>
+<script setup>
+import { reactive, onMounted, watch, computed } from "vue";
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+import TreePop from './widget/TreePop.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: [],
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+  auth: {
+    type: String,
+    default: "",
+  },
+});
+
+// 弹出层
+const data = reactive({
+  isShowPop: false,
+  options: []
+})
+
+const selectOptions = computed(()=>{
+  return util.ids2nodes(modelValue.value, data.options)
+})
+
+// 定义emit
+const emit = defineEmits(["update:modelValue","select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+onMounted(async () => {
+    await query()
+})
+
+const query = async () => {
+    let params = {
+        id: props.id,
+    }
+    const res = await util.dictionary_dict(params)
+    console.log(res.data)
+
+    if (!res.data.parseValue) {
+        data.options = []
+        return
+    }
+
+    data.options = res.data.parseValue
+}
+
+const onDelete=(option)=>{
+  modelValue.value = (modelValue.value || []).filter(item=>{
+    return item != option.id
+  })
+}
+
+watch(() => modelValue.value, async(n, o) => {
+  emit('select', selectOptions.value)
+}, {
+  immediate: true
+})
+</script>
+
+<style scoped>
+.select-item{
+  margin:3px;
+}
+</style>

package/src/components/UserPicker.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="user" v-if="modelValue" :closeable="!isDisabled" type="primary" plain
+          @close.stop="onDelete">
+          {{ data.user.name }}
+        </van-tag>
+        </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: String,
+        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,
+    user: {}
+})
+
+// 定义emit
+const emit = defineEmits(["update:modelValue", "select"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
+
+//首页加载
+onMounted(() => {
+})
+
+const onSelectUser = (userId) => {
+    modelValue.value = userId
+}
+
+const onDelete=()=>{
+    data.user={}
+    modelValue.value = null
+}
+
+watch(() => modelValue.value, async (n, o) => {
+    if (!n) {
+        data.user = {}
+        return
+    }
+
+    let res = await util.get_wxuser_by_id({ userId: n })
+    data.user = res.data
+    emit('select', data.user)
+}, {
+    immediate: true
+})
+</script>
+
+<style scoped>
+.user{
+  padding:4px 8px;
+}
+</style>

package/src/components/UserProfile.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="widget">
+    <van-image round width="80px" height="80px" :src="data.userInfo?.wxUser?.avatar" class="user-avatar" />
+    <div class="user-info">
+      <span class="user-info-item">{{ data.userInfo?.wxUser?.userid }}</span>
+      <span class="user-info-item">{{ data.userInfo?.wxUser?.name }}</span>
+      <span class="user-info-item">{{ data.userInfo?.wxUser?.position }}</span>
+      <span class="user-info-item">{{ data.userInfo?.wxUser?.mobile }}</span>
+    </div>
+    <div class="user-jobs">
+      <span class="job-item" v-for="(item, i) in deptPaths" :key="i">{{ item.name }}</span>
+    </div>
+
+    <van-button block class="logout-button" @click="onLogout">
+      注销
+    </van-button>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, watch, defineEmits, computed } from "vue";
+import util from "../util"
+
+const data = reactive({
+  userInfo: {}
+})
+const emit = defineEmits(['logout'])
+
+const deptPaths = computed(() => {
+  //过滤掉公司
+  if (data.userInfo && data.userInfo.departments && data.userInfo.departments.length>1)
+    return data.userInfo.departments.filter(item => item.id != '1')
+
+  // 外部访客，返回公司名
+  if(data.userInfo && data.userInfo.wxUser)
+    return [{name: data.userInfo.wxUser.corp}]
+
+  return []
+})
+
+const onLogout = () => {
+  emit('logout')
+}
+
+const getUserInfo = async () => {
+  let res = await util.auth_get_user_info()
+  data.userInfo = res.data
+}
+
+onMounted(() => {
+  getUserInfo()
+})
+</script>
+
+<style scoped>
+.widget {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 20px;
+  background: linear-gradient(to right, #4a90e2, #87ceeb);
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+
+  .user-avatar {
+    margin-bottom: 15px;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-bottom: 15px;
+
+    .user-info-item {
+      font-size: 16px;
+      line-height: 22px;
+      color: #fff;
+      text-align: center;
+      padding: 0 3px;
+    }
+  }
+
+  .space {
+    min-height: 10px;
+    flex: 1;
+  }
+
+  /* 添加退出按钮样式 */
+  .logout-button {
+    width: 70px;
+    height: 30px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 5px 15px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.3s;
+  }
+
+  .logout-button:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+
+  .user-jobs {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    width: 100%;
+    max-width: 300px;
+
+    .job-item {
+      padding: 5px 10px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 20px;
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/UsersPicker.vue

@@ -0,0 +1,118 @@
+<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>
+      <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 } = 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/YearDropdown.vue

@@ -0,0 +1,60 @@
+<template>
+    <van-dropdown-item v-model="modelValue" :options="data.yearOptions" />
+</template>
+<script setup>
+import { reactive, onMounted, watch } from "vue";
+import util from "../util"
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        default: 0,
+    },
+    startYear: {
+        type: Number,
+        default: 2000,
+    },
+    endYear: {
+        type: Number,
+        default: new Date().getFullYear(),
+    },
+    label: {
+        type: String,
+        default: "选择年份",
+    },
+    placeholder: {
+        type: String,
+        default: "请选择年份",
+    },
+});
+
+// 弹出层
+const data = reactive({
+    yearOptions: []
+})
+
+// 定义emit
+const emit = defineEmits(["update:modelValue"]);
+const modelValue = useVModel(props, 'modelValue', emit)
+
+const setupYearOptions = () => {
+    data.yearOptions.push({
+        text: '年',
+        value: 0
+    })
+    for (var i = props.endYear; i >= props.startYear; i--) {
+        data.yearOptions.push({
+            text: i,
+            value: i,
+        });
+    }
+};
+
+//首页加载
+onMounted(() => {
+    setupYearOptions()
+})
+</script>
+
+<style scoped></style>