widget.qw 0.0.1

package/src/components/data_selector.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <!-- 显示已选数据 -->
+    <van-field 
+      v-if="!isGone"
+      type="textarea"
+      rows="1"
+      autosize
+      :modelValue="selectedItems" 
+      readonly  
+      clearable 
+      :required="isRequired" 
+      :label="label" 
+      :name="name" 
+      v-bind="$attrs"
+      @click="showPopup" 
+      :right-icon="isReadonly ? '' : 'arrow'"
+      :rules="props.rules"
+      :class="{ 'disabled-field': isReadonly }" 
+    />
+    <!-- 数据选择弹出层 -->
+    <van-popup v-model:show="popupVisible" position="bottom" class="popup-style">
+      <div>
+        <div class="pad10 flex-between showMultipleButton">
+          <van-button plain size="normal" @click="cancelSelection">取消</van-button>
+          <div class="bold">{{ label }}</div>
+          <van-button plain type="primary" size="normal" @click="confirmSelection">确定</van-button>
+        </div>
+        <!-- 搜索框 -->
+        <van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入搜索关键字" />
+        <!-- 全选 -->
+        <div v-if="mode === 'multiple'" class="select-all-container">
+          <van-checkbox shape="square" v-model="isAllChecked" @click="toggleAllSelect" label-position="left">全选</van-checkbox>
+        </div>
+        <!-- 数据列表 -->
+        <div class="checkbox-style">
+          <van-checkbox-group v-model="checkedValue" v-if="mode === 'multiple'">
+            <van-cell-group>
+              <van-cell v-for="(item, index) in filteredColumns" :key="index" :title="item.text" clickable
+                @click="toggle(index)">
+                <template #right-icon>
+                  <!-- 修改点：添加 shape="square" -->
+                  <van-checkbox 
+                    :name="item.value" 
+                    :ref="(el) => (checkboxRefs[index] = el)" 
+                    shape="square"
+                    @click.stop 
+                  />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+          <van-radio-group v-model="checkedValue" v-else>
+            <van-cell-group>
+              <van-cell v-for="(item, index) in filteredColumns" :key="index" :title="item.text" clickable
+                @click="radioToggle(item.value)">
+                <template #right-icon>
+                  <!-- 单选保持圆形（默认样式） -->
+                  <van-radio :name="item.value" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-radio-group>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onBeforeUpdate, computed, nextTick, watch } from "vue"
+import util from '../util'
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'multiple', // 'single' | 'multiple'
+    validator: (v) => ['single', 'multiple'].includes(v)
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [Array, String, Number],
+    default: () => [],
+  },
+  rules: {
+    type: Array,
+    default: () => []
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  auth:{
+    type: String,
+    default:''
+  },
+  label: String,
+  name: String,
+});
+
+const {isRequired, isReadonly, isGone,isDisabled} = util.props2auth(props)
+const emit = defineEmits(["update:modelValue","select"]);
+
+const selectedItems = ref([]);
+const popupVisible = ref(false);
+const searchKeyword = ref(null);
+const checkboxRefs = ref([]);
+const checkedValue = ref([]);
+const isAllChecked = ref(false);
+
+const findTextsByValues = (valuesToFind, data) => {
+  return valuesToFind.map((value) => {
+    const foundItem = data.find((item) => item.value === value);
+    return foundItem ? foundItem.text : null;
+  });
+};
+
+const values2items = (values)=>{
+  if(!values || values.length<1 || !props.options || props.options.length<1)
+    return []
+
+  let res = props.options.filter(option=>values.includes(option.value))
+  return res
+}
+
+const reShow = () => {
+  if (props.modelValue) {
+    if (Array.isArray(props.options)) {
+      if (props.mode === 'multiple') {
+        selectedItems.value = findTextsByValues(props.modelValue, props.options);
+      } else {
+        const foundItem = props.options.find((item) => item.value === props.modelValue);
+        selectedItems.value = foundItem ? [foundItem.text] : [];
+      }
+    }
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    reShow();
+  });
+});
+
+const toggle = (index) => {
+  checkboxRefs.value[index].toggle();
+};
+
+onBeforeUpdate(() => {
+  checkboxRefs.value = [];
+});
+
+const showPopup = () => {
+  // 若状态为只读，则不弹出窗口
+  if (isReadonly.value) {
+    return;
+  }
+  if (props.mode === 'multiple') {
+    checkedValue.value = Array.isArray(props.modelValue) ? props.modelValue : [];
+  } else {
+    checkedValue.value = props.modelValue;
+  }
+  popupVisible.value = true;
+};
+
+const cancelSelection = () => {
+  popupVisible.value = false;
+};
+
+const confirmSelection = () => {
+  if (props.mode === 'multiple') {
+    selectedItems.value = findTextsByValues(checkedValue.value, props.options);
+    emit("update:modelValue", checkedValue.value);
+    emit("select",values2items(checkedValue.value))
+  } else {
+    const foundItem = props.options.find((item) => item.value === checkedValue.value);
+    selectedItems.value = foundItem ? [foundItem.text] : [];
+    emit("update:modelValue", checkedValue.value);
+    emit("select", foundItem)
+  }
+  popupVisible.value = false;
+};
+
+const toggleAllSelect = () => {
+  if (isAllChecked.value) {
+    checkedValue.value = filteredColumns.value.map(item => item.value);
+  } else {
+    checkedValue.value = [];
+  }
+};
+
+const radioToggle = (value) => {
+  checkedValue.value = value;
+};
+
+const filteredColumns = computed(() => {
+  return props.options.filter((item) => {
+    return item.text.includes(searchKeyword.value) || item.value.includes(searchKeyword.value);
+  });
+});
+
+watch(checkedValue, () => {
+  if (props.mode === 'multiple') {
+    if (filteredColumns.value.length === 0) {
+      isAllChecked.value = false;
+    } else {
+      isAllChecked.value = checkedValue.value.length === filteredColumns.value.length;
+    }
+  }
+}, { deep: true });
+
+// 在watch部分新增以下代码
+watch(() => props.modelValue, (newVal) => {
+  nextTick(() => {
+    reShow();
+  });
+}, { deep: true, immediate: true });
+
+// 在options变化时也需要更新显示
+watch(() => props.options, () => {
+  reShow();
+}, { deep: true });
+</script>
+
+<style scoped>
+.popup-style {
+  height: 21.25rem;
+}
+
+.showMultipleButton {
+  padding-bottom: 0;
+}
+
+.showMultipleButton .van-button {
+  border: 0;
+}
+
+.flex-between {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bold {
+  font-weight: bold;
+  color: #444;
+}
+
+.checkbox-style {
+  /* height: 220px; */
+  height: calc(220px - 30px); 
+  overflow-y: auto;
+}
+
+.select-all-container {
+  font-size: 14px;
+  padding: 0 16px;
+  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/image_picker.vue

@@ -0,0 +1,115 @@
+<template>
+    <van-field v-if="!isGone" name="image" :label="props.label" :required="isRequired" :rules="props.rules"
+        label-class="label" :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-model="files" :max-count="1" accept="image/jpeg,image/png" :afterRead="onAfterRead" :disabled="isDisabled" 
+                :deletable="!isDisabled"
+                    :before-delete="onBeforeDelete" />
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from '../util'
+import { useVModel } from "@vueuse/core"
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder:{
+        type:String,
+        default:''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+
+const files = ref([])
+
+onMounted(() => {
+
+})
+
+const onAfterRead = async (file) => {
+    console.log(file)
+
+    let compress_file = file.file
+    if (props.compress) {
+        compress_file = await util.compress_image(file.file)
+    }
+
+    let params = {
+        file: compress_file
+    }
+
+    return util.file_upload(params).then(res => {
+        modelValue.value = res.data.url
+        return Promise.resolve(file)
+    })
+}
+
+const onBeforeDelete = (e) => {
+    modelValue.value = ''
+    return Promise.resolve(e)
+}
+
+watch(() => props.modelValue,
+    (newVal, oldVal) => {
+        if (!props.modelValue) {
+            files.value = []
+            return
+        }
+
+        files.value = [{
+            url: props.modelValue
+        }]
+    },
+    {
+        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>

package/src/components/images_picker.vue

@@ -0,0 +1,140 @@
+<template>
+    <van-field name="image" :label="props.label" :required="isRequired" :rules="props.rules"
+        label-class="label" :placeholder="props.placeholder">
+        <template #input>
+            <div class="image-box">
+                <van-uploader v-model="files" :max-count="props.max" accept="image/jpeg,image/png" 
+                    :disabled="isDisabled" 
+                    :deletable="!isDisabled"
+                    :afterRead="onAfterRead" 
+                    :before-delete="onBeforeDelete" />
+            </div>
+        </template>
+    </van-field>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineProps, defineEmits, watch } from "vue"
+import util from "@/util"
+import { useVModel } from "@vueuse/core"
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: []
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    compress: {
+        type: Boolean,
+        default: true
+    },
+    max:{
+        type:Number,
+        default: 1000
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    }
+})
+const emit = defineEmits(['update:modelValue'])
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+const files = ref([])
+
+onMounted(() => {
+
+})
+
+const onAfterRead = async(file) => {
+    console.log(file)
+
+    let compress_file = file.file
+    if (props.compress) {
+        compress_file = await util.compress_image(file.file)
+    }
+
+    let params = {
+        file: compress_file
+    }
+
+    return util.file_upload(params).then(res => {
+        let newUrls = []
+        if (props.modelValue && props.modelValue.length > 0)
+            newUrls = [...props.modelValue, res.data.url]
+        else
+            newUrls = [res.data.url]
+
+        emit('update:modelValue', newUrls)
+        return Promise.resolve(file)
+    })
+}
+
+const onBeforeDelete = (e) => {
+    let newUrls = props.modelValue.filter(item => {
+        return item != e.url
+    })
+    emit('update:modelValue', newUrls)
+    return Promise.resolve(e)
+}
+
+watch(() => props.modelValue,
+    (newVal, oldVal) => {
+        if (!props.modelValue || props.modelValue.length < 1) {
+            files.value = []
+            return
+        }
+
+        files.value = props.modelValue.map(item => {
+            return {
+                url: item,
+                isImage: true
+            }
+        })
+    },
+    {
+        immediate: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.widget {
+    text-align: center;
+
+    .btn {
+        position: fixed;
+        bottom: 1rem;
+        left: 0;
+        right: 0;
+        margin: auto auto;
+        color: white;
+        font-size: 14px;
+        background: rgba(58, 136, 255, 1);
+        padding: 8px 35px;
+        width: 100px;
+        text-align: center;
+        display: inline-block;
+        border-radius: 2px;
+    }
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,157 @@
+// 引入封装好的组件
+import vm from "../vm";
+import AuditBar from "./AuditBar.vue";
+import Input from "./Input.vue";
+import SinglePicker from "./SinglePicker.vue";
+import MultiPicker from './MultiPicker.vue'
+import CheckGroup from "./CheckGroup.vue";
+import DatetimePicker from "./DatetimePicker/index.vue";
+import DataSelector from "./data_selector.vue";
+import MultListSelector from "./mult_list_selector.vue";
+import ProductSelector from "./product_selector.vue";
+import SubdepartmentSelector from "./subdepartment_selector.vue";
+import UserSelector from "./user_selector.vue";
+import ImagePicker from "./image_picker.vue";
+import ImagesPicker from "./images_picker.vue";
+import FilePicker from "./FilePicker.vue";
+import SingleUserSelector from "./SingleUserSelector.vue";
+import UsersPicker from "./UsersPicker.vue"
+import UserPicker from "./UserPicker.vue"
+import UserProfile from "./UserProfile.vue"
+import ProjectPicker from "./ProjectPicker.vue"
+import BillCard from './BillCard.vue'
+import YearDropdown from "./YearDropdown.vue";
+import MonthDropdown from "./MonthDropdown.vue";
+import DayDropdown from "./DayDropdown.vue";
+import ProjectDropdown from "./ProjectDropdown.vue";
+import Switch from './Switch.vue'
+import Sheet from './Sheet.vue'
+import TreePicker from './TreePicker.vue'
+
+const components = [
+  {
+    name: "UiqwAuditBar",
+    widget: AuditBar,
+  },
+  {
+    name: "UiqwInput",
+    widget: Input,
+  },
+  {
+    name: "UiqwSinglePicker",
+    widget: SinglePicker,
+  },
+  {
+    name: "UiqwMultiPicker",
+    widget: MultiPicker,
+  },
+  {
+    name: "UiqwCheckGroup",
+    widget: CheckGroup,
+  },
+  {
+    name: "UiqwDatetimePicker",
+    widget: DatetimePicker,
+  },
+  {
+    name: "UiqwDataSelector",
+    widget: DataSelector,
+  },
+  {
+    name: "UiqwMultListSelector",
+    widget: MultListSelector,
+  },
+  {
+    name: "UiqwProductSelector",
+    widget: ProductSelector,
+  },
+  {
+    name: "UiqwSubdepartmentSelector",
+    widget: SubdepartmentSelector,
+  },
+  {
+    name: "UiqwSingleUserSelector",
+    widget: SingleUserSelector,
+  },
+  {
+    name: "UiqwImagePicker",
+    widget: ImagePicker,
+  },
+  {
+    name: "UiqwImagesPicker",
+    widget: ImagesPicker,
+  },
+  {
+    name: "UiqwFilePicker",
+    widget: FilePicker,
+  },
+  {
+    name: 'UiqwBillCard',
+    widget: BillCard
+  },
+  {
+    name: 'UiqwUserSelector',
+    widget: UserSelector
+  },
+  {
+    name: 'UiqwUsersPicker',
+    widget: UsersPicker
+  },
+  {
+    name: 'UiqwUserPicker',
+    widget: UserPicker
+  },
+  {
+    name: 'UiqwProjectPicker',
+    widget: ProjectPicker
+  },
+  {
+    name: 'UiqwUserProfile',
+    widget: UserProfile
+  },
+  {
+    name: 'UiqwYearDropdown',
+    widget: YearDropdown
+  },
+  {
+    name: 'UiqwMonthDropdown',
+    widget: MonthDropdown
+  },
+  {
+    name: 'UiqwDayDropdown',
+    widget: DayDropdown
+  },
+  {
+    name: 'UiqwProjectDropdown',
+    widget: ProjectDropdown
+  },
+  {
+    name: 'UiqwSwitch',
+    widget: Switch
+  },
+  {
+    name: 'UiqwSheet',
+    widget: Sheet
+  },
+  {
+    name: 'UiqwTreePicker',
+    widget: TreePicker
+  }
+];
+// 导出组件
+export const UIQW = {
+  install(app) {
+    components.forEach((component) => {
+      app.component(component.name, component.widget);
+    });
+  },
+};
+
+// 导出初始化方法
+export function setup(params) {
+  vm.urlCallback = params.urlCallback;
+  (vm.tokenCallback = params.tokenCallback),
+    (vm.needLoginCallback = params.needLoginCallback);
+}
+
+export * from "./SecretNotify";