widget.qw 1.0.7 → 1.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "widget.qw",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "marqstree Vue3组件库",
   "main": "build/widget.qw.es.js",
   "keywords": [

package/src/api/index.js

@@ -40,7 +40,7 @@ export const dictionary_dict = (data) => {
 // 获取产品列表
 export const project_list = (data) => {
   return request_json({
-    url: vm.urlCallback() + "/qw-api/server-crm/project/list",
+    url: vm.urlCallback() + "/ac-api/project/list",
     method: "POST",
     data,
   });

package/src/components/{ProjectPicker.vue → SingleApiPicker.vue}

@@ -1,16 +1,16 @@
 <template>
   <div class="widget">
-    <!-- 项目名称选择 -->
-    <DataSelector v-model="modelValue" v-if="!isGone" :label="props.label" :required="isRequired" :rules="props.rules"
-      :disabled="isDisabled" :readonly="isReadonly" mode="single" :options="data.options" class="selector-field"
-      @select="onSelect" />
+    <van-field v-model="formatLabel" is-link :label="props.label" :placeholder="props.placeholder" readonly
+      :required="isRequired" :disabled="isDisabled" @click="data.isShow = true" />
+    <van-popup v-model:show="data.isShow" destroy-on-close round position="bottom">
+      <van-picker :columns="data.options" @cancel="onCancel" @confirm="onConfirm" />
+    </van-popup>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, reactive } from 'vue'
+import { ref, onMounted, watch, reactive, computed } from 'vue'
 import util from '../util'
-import DataSelector from './data_selector.vue'
 import { useVModel } from '@vueuse/core'
 
 const props = defineProps({
@@ -18,63 +18,61 @@ const props = defineProps({
     type: String,
     default: null
   },
-  required: {
-    type: Boolean,
-    default: true
-  },
   label: {
     type: String,
-    default: "",
+    default: ''
   },
   placeholder: {
     type: String,
-    default: "请选择项目",
+    default: ''
   },
-  readonly: {
+  required: {
     type: Boolean,
     default: false,
   },
-  rules: {
-    type: Array,
-    default: () => []
+  readonly: {
+    type: Boolean,
+    default: true,
   },
   auth: {
     type: String,
     default: "",
   },
-  maxStage: {
-    type: String,
-    default: ''
+  query: {
+    type: Function,
+    default: () => { }
   }
 })
 
 const emit = defineEmits(['update:modelValue', 'select'])
-const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
+const modelValue = useVModel(props, 'modelValue', emit)
+const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props);
 const data = reactive({
+  isShow: false,
   options: []
 })
-const modelValue = useVModel(props, 'modelValue', emit)
+const formatLabel = computed(() => {
+  let one = data.options.find(item => item.value == modelValue.value)
+  return one ? one.text : ''
+})
 
-const query = async () => {
-  let params = { isBasic: true, limit: 99999, page: 1 }
-  if (props.maxStage)
-    params.maxStage = props.maxStage
+onMounted(async () => {
+  props.query((options) => {
+    data.options = options
+  })
+})
 
-  const res = await util.project_list(params)
-  data.options = res.data.list.map(item => ({
-    text: `${item.projectCode}/${item.name}`,
-    value: item.id
-  }))
+const onConfirm = ({ selectedOptions }) => {
+  console.log("selectedOptions: " + selectedOptions)
+  let selectOption = selectedOptions[selectedOptions.length - 1]
+  modelValue.value = selectOption.value
+  emit('select', selectOption)
+  data.isShow = false
 }
 
-const onSelect = (item) => {
-  emit('select', item)
+const onCancel = () => {
+  data.isShow = false
 }
-
-// 修改后的挂载逻辑
-onMounted(async () => {
-  query()
-})
 </script>
 
 <style lang="scss" scoped>

package/src/components/index.js

@@ -8,7 +8,6 @@ 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";
@@ -18,17 +17,16 @@ 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'
 import CascaderPop from './CascaderPop.vue'
 import CascaderPicker from './CascaderPicker.vue'
+import SingleApiPicker from "./SingleApiPicker.vue";
 
 const components = [
   {
@@ -63,10 +61,6 @@ const components = [
     name: "WidgetQwMultListSelector",
     widget: MultListSelector,
   },
-  {
-    name: "WidgetQwProductSelector",
-    widget: ProductSelector,
-  },
   {
     name: "WidgetQwSubdepartmentSelector",
     widget: SubdepartmentSelector,
@@ -103,10 +97,6 @@ const components = [
     name: 'WidgetQwUserPicker',
     widget: UserPicker
   },
-  {
-    name: 'WidgetQwProjectPicker',
-    widget: ProjectPicker
-  },
   {
     name: 'WidgetQwUserProfile',
     widget: UserProfile
@@ -123,10 +113,6 @@ const components = [
     name: 'WidgetQwDayDropdown',
     widget: DayDropdown
   },
-  {
-    name: 'WidgetQwProjectDropdown',
-    widget: ProjectDropdown
-  },
   {
     name: 'WidgetQwSwitch',
     widget: Switch
@@ -146,7 +132,11 @@ const components = [
   {
     name: 'WidgetQwCascaderPicker',
     widget: CascaderPicker
-  }
+  },
+  {
+    name: 'WidgetQwSingleApiPicker',
+    widget: SingleApiPicker
+  },
 ];
 // 导出组件
 export const WidgetQw = {

package/src/router/index.ts

@@ -45,11 +45,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "secretnotify",
     component: () => import("../views/secretnotify/index.vue"),
   },
-  {
-    path: "/productSelector",
-    name: "productSelector",
-    component: () => import("../views/productSelector/index.vue"),
-  },
   {
     path: "/dataSelector",
     name: "dataSelector",
@@ -105,11 +100,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "userpicker",
     component: () => import("../views/userpicker/index.vue"),
   },
-  {
-    path: "/projectpicker",
-    name: "projectpicker",
-    component: () => import("../views/projectpicker/index.vue"),
-  },
   {
     path: "/userprofile",
     name: "userprofile",
@@ -130,11 +120,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "daydropdown",
     component: () => import("../views/daydropdown/index.vue"),
   },
-  {
-    path: "/projectdropdown",
-    name: "projectdropdown",
-    component: () => import("../views/projectdropdown/index.vue"),
-  },
   {
     path: "/switch",
     name: "switch",
@@ -159,6 +144,11 @@ const routes: Array<RouteRecordRaw> = [
     path: "/cascaderpicker",
     name: "cascaderpicker",
     component: () => import("../views/cascaderpicker/index.vue"),
+  },
+  {
+    path: "/singleapipicker",
+    name: "singleapipicker",
+    component: () => import("../views/singleapipicker/index.vue"),
   }
 ]
 

package/vite.config.ts

@@ -40,8 +40,8 @@ export default {
       VUE_APP_NEED_LOGIN_CODE: 401,
       //注意：发布时 VUE_APP_IS_DEBUG必须配置为false
       // 本地开发时 VUE_APP_IS_DEBUG必须配置为true
-      // VUE_APP_IS_DEBUG: false,
-      VUE_APP_IS_DEBUG: true,
+      VUE_APP_IS_DEBUG: false,
+      // VUE_APP_IS_DEBUG: true,
       VUE_APP_DEBUG_TOKEN: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiIwMTQzOTEiLCJyblN0ciI6ImZ0ejhnaFpLMWR4ejhnOTFDZkJUMXQxVWNJajF3R3c1In0.tgI4iGOJ8OrjoqWIqC2pjH7J52l6H7wyuUwJATKIVns'
     },
   },

package/src/components/ProjectDropdown.vue

@@ -1,62 +0,0 @@
-<template>
-    <van-dropdown-item v-model="modelValue" :options="totalOptions" />
-</template>
-<script setup>
-import { reactive, onMounted, computed } from "vue";
-import util from "../util"
-import { useVModel } from '@vueuse/core'
-
-const props = defineProps({
-    modelValue: {
-        type: Number,
-        default: 0,
-    },
-    label: {
-        type: String,
-        default: "选择项目",
-    },
-    placeholder: {
-        type: String,
-        default: "请选择项目",
-    },
-    maxStage: {
-        type: String,
-        default: ''
-    }
-});
-
-// 弹出层
-const data = reactive({
-    options: []
-})
-
-// 定义emit
-const emit = defineEmits(["update:modelValue"]);
-const modelValue = useVModel(props, 'modelValue', emit)
-
-const totalOptions = computed(() => {
-    return [{
-        text: '工程编号',
-        value: ''
-    }, ...data.options]
-})
-
-//首页加载
-onMounted(() => {
-    query()
-})
-
-const query = async () => {
-    let params = { isBasic: true, limit: 99999, page: 1 }
-    if(props.maxStage)
-        params.maxStage = props.maxStage
-
-    const res = await util.project_list(params)
-    data.options = res.data.list.map(item => ({
-        text: `${item.projectCode}/${item.name}`,
-        value: item.id
-    }))
-}
-</script>
-
-<style scoped></style>

package/src/components/product_selector.vue

@@ -1,186 +0,0 @@
-<template>
-  <div class="project-selector">
-    <!-- 产品名称选择 -->
-    <data-selector v-model="selectedProjectCode" label="产品名称" placeholder="请选择产品" mode="single"
-      :options="productOptions" @update:modelValue="handleProjectChange" class="selector-field"
-      :required="props.required"  :rules="props.rules" :readonly="props.readonly" />
-
-    <!-- 产品编号显示 -->
-    <van-field v-model="projectCode" label="产品编号" placeholder="系统自动填入" readonly class="readonly-field"
-      :required="props.required" />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, nextTick } from 'vue'
-import util from '../util'
-import dataSelector from './data_selector.vue'
-
-// 缓存定义在组件内部（模块作用域）
-const productListCache = {
-  data: ref([]),
-  loading: ref(false),
-  error: ref(null)
-}
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({
-      productName: '',
-      productCode: ''
-    })
-  },
-  required: {
-    type: Boolean,
-    default: true
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-// 响应式数据
-const productOptions = ref([])
-const selectedProjectCode = ref('')
-const projectCode = ref('')
-
-// 获取产品列表
-// const fetchProducts = async () => {
-//   try {
-//     const params = {
-//       limit: 99999,
-//       page: 0
-//     }
-//     const response = await ApiUtil.project_list(params)
-
-//     console.log('获取产品列表成功:', response)
-
-//     if (response.code === 200) {
-//       productOptions.value = response.data.list.map(item => ({
-//         text: item.name,
-//         value: item.projectCode
-//       }))
-//     }
-//   } catch (error) {
-//     console.error('获取产品列表失败:', error)
-//   }
-// }
-
-// 修改后的获取产品列表方法
-const fetchProducts = async () => {
-  try {
-    if (productListCache.data.value.length > 0) return
-    if (productListCache.loading.value) return
-    
-    productListCache.loading.value = true
-    const response = await util.project_list({ limit: 999, page: 0 })
-    
-    if (response.code === 200) {
-      productListCache.data.value = response.data.list.map(item => ({
-        text: item.name,
-        value: item.projectCode
-      }))
-    }
-  } catch (error) {
-    productListCache.error.value = error
-    console.error('获取产品列表失败:', error)
-  } finally {
-    productListCache.loading.value = false
-  }
-}
-
-
-// 处理产品选择变化
-const handleProjectChange = (value) => {
-  const selectedProduct = productOptions.value.find(item => item.value === value)
-  if (selectedProduct) {
-    emit('update:modelValue', {
-      productName: selectedProduct.text,
-      productCode: value
-    })
-    projectCode.value = value
-  }
-}
-
-// 添加modelValue监听
-// 修改后的watch监听
-watch(() => props.modelValue, (newVal) => {
-  // 当productOptions加载完成后再更新选中状态
-  if (productOptions.value.length > 0 && newVal.productCode !== selectedProjectCode.value) {
-    selectedProjectCode.value = newVal.productCode
-    projectCode.value = newVal.productCode
-  }
-}, { deep: true, immediate: true })
-
-// 新增对productOptions的监听
-watch(productOptions, (newOptions) => {
-  // 当选项列表更新后检查外部传入的值是否有效
-  if (props.modelValue.productCode && newOptions.length > 0) {
-    const exists = newOptions.some(opt => opt.value === props.modelValue.productCode)
-    if (exists) {
-      selectedProjectCode.value = props.modelValue.productCode
-      projectCode.value = props.modelValue.productCode
-    }
-  }
-})
-
-// 修改后的挂载逻辑
-onMounted(async () => {
-  if (productListCache.data.value.length === 0) {
-    await fetchProducts()
-    // 确保赋值操作在数据加载后
-    productOptions.value = [...productListCache.data.value]
-  } else {
-    productOptions.value = [...productListCache.data.value]
-  }
-  
-  // 延迟执行确保选项已渲染
-  nextTick(() => {
-    if (props.modelValue.productCode) {
-      selectedProjectCode.value = props.modelValue.productCode
-      projectCode.value = props.modelValue.productCode
-    }
-  })
-})
-</script>
-
-<style scoped>
-.project-selector {
-  :deep(.van-cell) {
-    align-items: center;
-  }
-
-  :deep(.van-field__label) {
-    width: 90px;
-    flex: none;
-  }
-
-  .readonly-field {
-    :deep(.van-field__control) {
-      color: #323233;
-      /* 修改文字颜色与普通字段一致 */
-      padding-right: 16px;
-    }
-
-    /* 添加必填星号对齐 */
-    &.van-field--required {
-      :deep(.van-field__label::before) {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  /* 统一字段间距 */
-  .readonly-field {
-    margin: 4px 0;
-  }
-}
-</style>