widget.qw 1.0.83 → 1.0.85

package/src/components/data_selector.vue

@@ -1,304 +1,304 @@
-<template>
-  <div>
-    <!-- 显示已选数据 -->
-    <van-field v-if="!isGone" type="textarea" rows="1" autosize :modelValue="selectdItemsLabel" clearable
-      :required="isRequired" :label="label" :name="name" v-bind="$attrs" @click-right-icon="showPopup" @clear="onClear"
-      :right-icon="rightIcon" :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="props.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="props.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({
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  options: {
-    type: Array,
-    required: true,
-  },
-  modelValue: {
-    type: [Array, String, Number]
-  },
-  columnsFieldNames: {
-    type: Object,
-    default: {
-      text: 'text',
-      value: 'value'
-    }
-  },
-  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 rightIcon = computed(() => {
-  if (isReadonly.value || isDisabled.value)
-    return ''
-
-  return 'arrow'
-})
-
-const selectedItems = ref([]);
-const selectdItemsLabel = computed(() => {
-  if (!selectedItems.value)
-    return ''
-
-  return selectedItems.value.join(',')
-})
-const popupVisible = ref(false);
-const searchKeyword = ref(null);
-const checkboxRefs = ref([]);
-const checkedValue = ref([]);
-const isAllChecked = ref(false);
-const formatOptions = computed(() => {
-  if (!props.options)
-    return []
-
-  return props.options.map(item => {
-    return {
-      ...item,
-      text: item[props.columnsFieldNames.text],
-      value: item[props.columnsFieldNames.value]
-    }
-  })
-})
-
-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 || !formatOptions.value || formatOptions.value.length < 1)
-    return []
-
-  let res = formatOptions.value.filter(option => values.includes(option.value))
-  return res
-}
-
-const reShow = () => {
-  if (props.modelValue) {
-    if (Array.isArray(formatOptions.value)) {
-      if (props.multiple) {
-        selectedItems.value = findTextsByValues(props.modelValue, formatOptions.value);
-      } else {
-        const foundItem = formatOptions.value.find((item) => item.value === props.modelValue);
-        selectedItems.value = foundItem ? [foundItem.text] : [];
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  nextTick(() => {
-    reShow();
-  });
-});
-
-const onClear = () => {
-  console.log('11111111111111')
-  selectedItems.value = []
-  if (props.multiple) {
-    emit("update:modelValue", [])
-  }
-  else {
-    emit("update:modelValue", null)
-  }
-}
-
-const toggle = (index) => {
-  checkboxRefs.value[index].toggle();
-};
-
-onBeforeUpdate(() => {
-  checkboxRefs.value = [];
-});
-
-const showPopup = () => {
-  // 若状态为只读，则不弹出窗口
-  if (isReadonly.value) {
-    return;
-  }
-  if (props.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.multiple) {
-    selectedItems.value = findTextsByValues(checkedValue.value, formatOptions.value);
-    emit("update:modelValue", checkedValue.value);
-    emit("select", values2items(checkedValue.value))
-  } else {
-    const foundItem = formatOptions.value.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 formatOptions.value.filter((item) => {
-    return item.text.includes(searchKeyword.value) || item.value.includes(searchKeyword.value);
-  });
-});
-
-watch(checkedValue, () => {
-  if (props.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(() => formatOptions.value, () => {
-  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="selectdItemsLabel" clearable
+      :required="isRequired" :label="label" :name="name" v-bind="$attrs" @click-right-icon="showPopup" @clear="onClear"
+      :right-icon="rightIcon" :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="props.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="props.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({
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: [Array, String, Number]
+  },
+  columnsFieldNames: {
+    type: Object,
+    default: {
+      text: 'text',
+      value: 'value'
+    }
+  },
+  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 rightIcon = computed(() => {
+  if (isReadonly.value || isDisabled.value)
+    return ''
+
+  return 'arrow'
+})
+
+const selectedItems = ref([]);
+const selectdItemsLabel = computed(() => {
+  if (!selectedItems.value)
+    return ''
+
+  return selectedItems.value.join(',')
+})
+const popupVisible = ref(false);
+const searchKeyword = ref(null);
+const checkboxRefs = ref([]);
+const checkedValue = ref([]);
+const isAllChecked = ref(false);
+const formatOptions = computed(() => {
+  if (!props.options)
+    return []
+
+  return props.options.map(item => {
+    return {
+      ...item,
+      text: item[props.columnsFieldNames.text],
+      value: item[props.columnsFieldNames.value]
+    }
+  })
+})
+
+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 || !formatOptions.value || formatOptions.value.length < 1)
+    return []
+
+  let res = formatOptions.value.filter(option => values.includes(option.value))
+  return res
+}
+
+const reShow = () => {
+  if (props.modelValue) {
+    if (Array.isArray(formatOptions.value)) {
+      if (props.multiple) {
+        selectedItems.value = findTextsByValues(props.modelValue, formatOptions.value);
+      } else {
+        const foundItem = formatOptions.value.find((item) => item.value === props.modelValue);
+        selectedItems.value = foundItem ? [foundItem.text] : [];
+      }
+    }
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    reShow();
+  });
+});
+
+const onClear = () => {
+  console.log('11111111111111')
+  selectedItems.value = []
+  if (props.multiple) {
+    emit("update:modelValue", [])
+  }
+  else {
+    emit("update:modelValue", null)
+  }
+}
+
+const toggle = (index) => {
+  checkboxRefs.value[index].toggle();
+};
+
+onBeforeUpdate(() => {
+  checkboxRefs.value = [];
+});
+
+const showPopup = () => {
+  // 若状态为只读，则不弹出窗口
+  if (isReadonly.value) {
+    return;
+  }
+  if (props.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.multiple) {
+    selectedItems.value = findTextsByValues(checkedValue.value, formatOptions.value);
+    emit("update:modelValue", checkedValue.value);
+    emit("select", values2items(checkedValue.value))
+  } else {
+    const foundItem = formatOptions.value.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 formatOptions.value.filter((item) => {
+    return item.text.includes(searchKeyword.value) || item.value.includes(searchKeyword.value);
+  });
+});
+
+watch(checkedValue, () => {
+  if (props.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(() => formatOptions.value, () => {
+  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>