widget.qw 1.0.24 → 1.0.26

package/src/components/data_selector.vue

@@ -1,281 +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;
-}
- 
+<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>