widget.qw 0.0.1

package/src/components/mult_list_selector.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- Tips section with corrected syntax -->
+  <div class="confirmation-tips" v-if="tips && tips.length > 0">
+    <van-icon name="info" color="#1989fa" />
+    <span>{{ tips }}</span>
+  </div>
+
+  <van-checkbox-group 
+    :model-value="modelValue" 
+    @update:model-value="$emit('update:modelValue', $event)"
+    class="confirmation-group" 
+    :required="required"
+    :disabled="props.disabled"
+    :rules="rules"
+  >
+    <div class="confirmation-item" v-for="item in options" :key="item.value">
+      <van-checkbox 
+        :name="item.value" 
+        shape="square" 
+        icon-size="18px" 
+        class="custom-checkbox" 
+      >
+        <span class="option-text">{{ item.label }}</span>
+      </van-checkbox>
+    </div>
+  </van-checkbox-group>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    default: true
+  },
+  tips: {
+    type: String,
+    default: ''
+  },
+  rules : {
+    type: Array,
+    default: () => []
+  }
+});
+
+defineEmits(['update:modelValue']);
+
+// watch(() => props.disabled, (newVal) => {
+//   console.log('disabled状态变化:', newVal);
+//   // 强制更新复选框状态
+//   nextTick(() => {
+//     const checkboxes = document.querySelectorAll('.van-checkbox');
+//     checkboxes.forEach(checkbox => {
+//       checkbox.style.pointerEvents = newVal ? 'none' : 'auto';
+//       checkbox.style.opacity = newVal ? '0.6' : '1';
+//     });
+//   });
+// });
+</script>
+
+<style scoped>
+/* // 修改 confirmation-group 和 confirmation-item 的样式 */
+.confirmation-group {
+  padding: 0 16px;
+  --van-checkbox-disabled-icon-color: black;
+}
+
+.confirmation-item {
+  padding: 12px 16px;
+  margin: 0 -16px;
+  border-bottom: 1px solid #f5f5f5;
+  /* 禁用状态样式 */
+  
+}
+
+/* // 在下方添加媒体查询适配小屏幕 */
+@media (max-width: 320px) {
+  .confirmation-item {
+    padding: 12px 8px;
+    margin: 0 -8px;
+  }
+}
+
+.confirmation-item:last-child {
+  border-bottom: none;
+}
+
+/* 新增样式 */
+.confirmation-tips {
+  padding: 12px 16px;
+  background: #f0faff;
+  border-radius: 8px;
+  margin: 10px 16px;
+  display: flex;
+  align-items: center;
+  color: #1989fa;
+  font-size: 13px;
+  border: 1px solid #d9efff;
+}
+
+.confirmation-tips .van-icon {
+  margin-right: 8px;
+}
+
+/* 新增字体继承样式 */
+.confirmation-group {
+  font-size: inherit;  /* 继承父级字体大小 */
+}
+
+.option-text {
+  font-size: 14px;  /* 明确指定字体大小 */
+  line-height: 1.5;  /* 保持行高一致 */
+  /* color:black; */
+}
+
+/* 适配移动端的字体调整 */
+@media (max-width: 375px) {
+  .option-text {
+    font-size: 13px;
+  }
+}
+
+/* 新增禁用状态样式 */
+.custom-checkbox:disabled :deep(.--van-checkbox__icon) {
+  background-color: #f5f5f5;
+  border-color: #ebedf0;
+  transition: all 0.3s;
+}
+
+.custom-checkbox:disabled :deep(.van-checkbox__icon--checked) {
+  background-color: #1989fa;
+  border-color: #1989fa;
+  opacity: 0.7;
+}
+
+.van-checkbox--disabled :deep(.option-text) {
+  color: #969799;
+}
+
+.van-checkbox--disabled.van-checkbox--checked :deep(.option-text) {
+  color: #1989fa;
+  opacity: 0.8;
+}
+</style>

package/src/components/product_selector.vue

@@ -0,0 +1,186 @@
+<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>