af-mobile-client-vue3 1.3.16 → 1.3.18

package/src/components/core/XMultiSelect/index.vue

@@ -1,183 +1,183 @@
-<script setup lang="ts">
-import {
-  Cell as VanCell,
-  CellGroup as VanCellGroup,
-  Checkbox as VanCheckbox,
-  CheckboxGroup as VanCheckboxGroup,
-  Field as VanField,
-  Popup as VanPopup,
-  Search as VanSearch,
-} from 'vant'
-import { computed, defineEmits, defineModel, defineProps, ref, watch } from 'vue'
-
-const props = defineProps({
-  columns: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  selectValue: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  option: {
-    type: Object,
-    default() {
-      return { text: 'label', value: 'value' }
-    },
-  },
-  // 是否支持搜索
-  isSearch: {
-    type: Boolean,
-    default: true,
-  },
-})
-const emits = defineEmits(['input', 'confirm', 'change', 'cancel'])
-const show = ref(false)
-const searchVal = ref('')
-const columnsData = ref([])
-const checkboxValue = ref(JSON.parse(JSON.stringify(props.selectValue)))
-const checkedAll = ref(false)
-const resultValue = defineModel()
-const checkboxGroup = ref()
-const checkboxes = ref()
-function search(val) {
-  if (val) {
-    columnsData.value = props.columns.filter((item) => {
-      return item[props.option.text].includes(val)
-    })
-  }
-  else {
-    columnsData.value = JSON.parse(JSON.stringify(props.columns))
-  }
-}
-function getData(val) {
-  const res = props.columns.filter((item) => {
-    return val.includes(item[props.option.value])
-  })
-  return res
-}
-function onConfirm() {
-  resultValue.value = checkboxValue.value
-  show.value = !show.value
-  emits('confirm', resultValue.value, getData(resultValue.value))
-}
-function change(val) {
-  emits('change', val, getData(resultValue.value))
-}
-function cancel() {
-  show.value = !show.value
-  emits('cancel', resultValue.value)
-}
-function toggle(item, _index) {
-  // 假设 checkboxValue 是一个对象，我们通过 index 来切换对应 checkbox 的值
-  const idx = checkboxValue.value.indexOf(item[props.option.value])
-  if (idx !== -1)
-    checkboxValue.value.splice(idx, 1)
-  else
-    checkboxValue.value.push(item[props.option.value])
-}
-function toggleAll() {
-  // 遍历 checkboxValue 并设置所有 checkbox 的值为 checkedAll 的值
-  if (checkedAll.value)
-    checkboxValue.value = columnsData.value.map(item => item[props.option.value])
-
-  else
-    checkboxValue.value = []
-}
-function showPopu(disabled) {
-  columnsData.value = JSON.parse(JSON.stringify(props.columns))
-  if (disabled !== undefined && disabled !== false)
-    return false
-  else
-    show.value = !show.value
-}
-watch(() => columnsData.value, (newVal, _oldVal) => {
-  checkedAll.value = newVal.length && newVal.length === checkboxValue.value.length
-})
-watch(() => checkboxValue.value.length, (newVal, _oldVal) => {
-  checkedAll.value = newVal && newVal === columnsData.value.length
-})
-const resultLabel = computed(() => {
-  const res = props.columns.filter((item) => {
-    return (resultValue.value as unknown as string[]).includes(item[props.option.value])
-  }).map(item => item[props.option.text])
-  return res.join(',')
-})
-</script>
-
-<template>
-  <div class="dh-field">
-    <VanField
-      v-model="resultLabel"
-      v-bind="$attrs"
-      readonly
-      :border="false"
-      :is-link="$attrs.disabled === undefined"
-      error-message-align="right"
-      @click="showPopu($attrs.readonly)"
-    />
-    <VanPopup v-model:show="show" position="bottom">
-      <div class="van-picker__toolbar">
-        <button type="button" class="van-picker__cancel" @click="cancel">
-          取消
-        </button>
-        <div class="van-ellipsis van-picker__title">
-          {{ $attrs.label }}
-        </div>
-        <button type="button" class="van-picker__confirm" @click="onConfirm">
-          确认
-        </button>
-      </div>
-      <div style="max-height:264px; overflow-y:auto;">
-        <VanSearch
-          v-if="props.isSearch"
-          v-model="searchVal"
-          placeholder="搜索"
-          @update:model-value="search"
-          @cancel="search"
-        />
-        <VanCell title="全选">
-          <template #right-icon>
-            <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
-          </template>
-        </VanCell>
-        <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
-          <VanCellGroup>
-            <VanCell
-              v-for="(item, index) in columnsData"
-              :key="item[props.option.value]"
-              :title="item[props.option.text]"
-              clickable
-              @click="toggle(item, index)"
-            >
-              <template #right-icon>
-                <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
-              </template>
-            </VanCell>
-          </VanCellGroup>
-        </VanCheckboxGroup>
-      </div>
-    </VanPopup>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.dh-field {
-  width: 100%;
-  padding: 0;
-  background: #fff;
-  .dh-cell.van-cell {
-    padding: 10px 0;
-  }
-  .dh-cell.van-cell--required::before {
-    left: -8px;
-  }
-  .van-popup {
-    border-radius: 20px 20px 0 0;
-  }
-}
-</style>
+<script setup lang="ts">
+import {
+  Cell as VanCell,
+  CellGroup as VanCellGroup,
+  Checkbox as VanCheckbox,
+  CheckboxGroup as VanCheckboxGroup,
+  Field as VanField,
+  Popup as VanPopup,
+  Search as VanSearch,
+} from 'vant'
+import { computed, defineEmits, defineModel, defineProps, ref, watch } from 'vue'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  selectValue: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  option: {
+    type: Object,
+    default() {
+      return { text: 'label', value: 'value' }
+    },
+  },
+  // 是否支持搜索
+  isSearch: {
+    type: Boolean,
+    default: true,
+  },
+})
+const emits = defineEmits(['input', 'confirm', 'change', 'cancel'])
+const show = ref(false)
+const searchVal = ref('')
+const columnsData = ref([])
+const checkboxValue = ref(JSON.parse(JSON.stringify(props.selectValue)))
+const checkedAll = ref(false)
+const resultValue = defineModel()
+const checkboxGroup = ref()
+const checkboxes = ref()
+function search(val) {
+  if (val) {
+    columnsData.value = props.columns.filter((item) => {
+      return item[props.option.text].includes(val)
+    })
+  }
+  else {
+    columnsData.value = JSON.parse(JSON.stringify(props.columns))
+  }
+}
+function getData(val) {
+  const res = props.columns.filter((item) => {
+    return val.includes(item[props.option.value])
+  })
+  return res
+}
+function onConfirm() {
+  resultValue.value = checkboxValue.value
+  show.value = !show.value
+  emits('confirm', resultValue.value, getData(resultValue.value))
+}
+function change(val) {
+  emits('change', val, getData(resultValue.value))
+}
+function cancel() {
+  show.value = !show.value
+  emits('cancel', resultValue.value)
+}
+function toggle(item, _index) {
+  // 假设 checkboxValue 是一个对象，我们通过 index 来切换对应 checkbox 的值
+  const idx = checkboxValue.value.indexOf(item[props.option.value])
+  if (idx !== -1)
+    checkboxValue.value.splice(idx, 1)
+  else
+    checkboxValue.value.push(item[props.option.value])
+}
+function toggleAll() {
+  // 遍历 checkboxValue 并设置所有 checkbox 的值为 checkedAll 的值
+  if (checkedAll.value)
+    checkboxValue.value = columnsData.value.map(item => item[props.option.value])
+
+  else
+    checkboxValue.value = []
+}
+function showPopu(disabled) {
+  columnsData.value = JSON.parse(JSON.stringify(props.columns))
+  if (disabled !== undefined && disabled !== false)
+    return false
+  else
+    show.value = !show.value
+}
+watch(() => columnsData.value, (newVal, _oldVal) => {
+  checkedAll.value = newVal.length && newVal.length === checkboxValue.value.length
+})
+watch(() => checkboxValue.value.length, (newVal, _oldVal) => {
+  checkedAll.value = newVal && newVal === columnsData.value.length
+})
+const resultLabel = computed(() => {
+  const res = props.columns.filter((item) => {
+    return (resultValue.value as unknown as string[]).includes(item[props.option.value])
+  }).map(item => item[props.option.text])
+  return res.join(',')
+})
+</script>
+
+<template>
+  <div class="dh-field">
+    <VanField
+      v-model="resultLabel"
+      v-bind="$attrs"
+      readonly
+      :border="false"
+      :is-link="$attrs.disabled === undefined"
+      error-message-align="right"
+      @click="showPopu($attrs.readonly)"
+    />
+    <VanPopup v-model:show="show" position="bottom">
+      <div class="van-picker__toolbar">
+        <button type="button" class="van-picker__cancel" @click="cancel">
+          取消
+        </button>
+        <div class="van-ellipsis van-picker__title">
+          {{ $attrs.label }}
+        </div>
+        <button type="button" class="van-picker__confirm" @click="onConfirm">
+          确认
+        </button>
+      </div>
+      <div style="max-height:264px; overflow-y:auto;">
+        <VanSearch
+          v-if="props.isSearch"
+          v-model="searchVal"
+          placeholder="搜索"
+          @update:model-value="search"
+          @cancel="search"
+        />
+        <VanCell title="全选">
+          <template #right-icon>
+            <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
+          </template>
+        </VanCell>
+        <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
+          <VanCellGroup>
+            <VanCell
+              v-for="(item, index) in columnsData"
+              :key="item[props.option.value]"
+              :title="item[props.option.text]"
+              clickable
+              @click="toggle(item, index)"
+            >
+              <template #right-icon>
+                <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
+              </template>
+            </VanCell>
+          </VanCellGroup>
+        </VanCheckboxGroup>
+      </div>
+    </VanPopup>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.dh-field {
+  width: 100%;
+  padding: 0;
+  background: #fff;
+  .dh-cell.van-cell {
+    padding: 10px 0;
+  }
+  .dh-cell.van-cell--required::before {
+    left: -8px;
+  }
+  .van-popup {
+    border-radius: 20px 20px 0 0;
+  }
+}
+</style>

package/src/components/core/XSelect/index.vue

@@ -1,149 +1,149 @@
-<script setup lang="ts">
-import {
-  Field as VanField,
-  Picker as VanPicker,
-  Popup as VanPopup,
-} from 'vant'
-import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
-
-const props = defineProps({
-  columns: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  option: {
-    type: Object,
-    default() {
-      return { text: 'label', value: 'value', children: 'children' }
-    },
-  },
-  isSearch: {
-    type: Boolean,
-    default: false,
-  },
-  offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
-    type: Boolean,
-    default: false,
-  },
-  border: { // 是否展示边框
-    type: Boolean,
-    default: false,
-  },
-})
-const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
-const show = ref(false)
-const searchVal = ref('')
-const resultValue = defineModel()
-const columnsData = ref([])
-const selectedOption = ref([])
-
-// 转换空children为空字符串
-function transformColumns(data) {
-  return data.map((item) => {
-    if (item.children && item.children.length === 0) {
-      return {
-        ...item,
-        children: '',
-      }
-    }
-    else if (item.children && item.children.length !== 0) {
-      return { ...item, children: transformColumns(item.children) }
-    }
-    else {
-      return { ...item }
-    }
-  })
-}
-
-onBeforeMount(() => {
-  columnsData.value = transformColumns(props.columns)
-})
-
-const resultLabel = computed({
-  get() {
-    if (!resultValue.value)
-      return ''
-    const res = props.columns.filter((item) => {
-      const data = props.offOption ? item : item[props.option.value]
-      return data === resultValue.value
-    })
-    return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
-  },
-  set() {
-
-  },
-})
-
-function search(val) {
-  if (val) {
-    columnsData.value = transformColumns(columnsData.value).filter((item) => {
-      const data = props.offOption ? item : item[props.option.text]
-      return data.includes(val)
-    })
-  }
-  else {
-    columnsData.value = transformColumns(props.columns)
-  }
-}
-
-function onConfirm(value, _index) {
-  resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
-  // resultValue.value = value.selectedValues
-  selectedOption.value = value.selectedOptions
-  show.value = !show.value
-  emits('confirm', value.selectedValues[0], value.selectedOptions)
-}
-
-function change(val, index) {
-  emits('change', val, index, resultValue.value)
-}
-
-function cancel(val, index) {
-  show.value = !show.value
-  emits('cancel', val, index, resultValue.value)
-}
-
-function showPopu(disabled) {
-  if (disabled !== undefined && disabled !== false)
-    return false
-  columnsData.value = transformColumns(props.columns)
-  show.value = !show.value
-}
-
-watch(() => resultValue, (newVal, _oldVal) => {
-  searchVal.value = ''
-  columnsData.value = transformColumns(props.columns)
-  emits('input', newVal)
-})
-</script>
-
-<template>
-  <VanField
-    v-model="resultLabel"
-    v-bind="$attrs"
-    readonly
-    :is-link="true"
-    :border="props.border"
-    error-message-align="right"
-    @click="showPopu($attrs.readonly)"
-  />
-  <VanPopup v-model:show="show" position="bottom">
-    <VanField v-if="props.isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
-    <VanPicker
-      v-bind="$attrs"
-      :columns="columnsData"
-      :columns-field-names="props.option"
-      show-toolbar
-      :value-key="props.option.text"
-      @cancel="cancel"
-      @confirm="onConfirm"
-      @change="change"
-    />
-  </VanPopup>
-</template>
-
-<style scoped>
-/* 样式定义 */
-</style>
+<script setup lang="ts">
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+} from 'vant'
+import { computed, defineEmits, defineModel, defineProps, onBeforeMount, ref, watch } from 'vue'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  option: {
+    type: Object,
+    default() {
+      return { text: 'label', value: 'value', children: 'children' }
+    },
+  },
+  isSearch: {
+    type: Boolean,
+    default: false,
+  },
+  offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
+    type: Boolean,
+    default: false,
+  },
+  border: { // 是否展示边框
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['confirm', 'change', 'cancel', 'input'])
+const show = ref(false)
+const searchVal = ref('')
+const resultValue = defineModel()
+const columnsData = ref([])
+const selectedOption = ref([])
+
+// 转换空children为空字符串
+function transformColumns(data) {
+  return data.map((item) => {
+    if (item.children && item.children.length === 0) {
+      return {
+        ...item,
+        children: '',
+      }
+    }
+    else if (item.children && item.children.length !== 0) {
+      return { ...item, children: transformColumns(item.children) }
+    }
+    else {
+      return { ...item }
+    }
+  })
+}
+
+onBeforeMount(() => {
+  columnsData.value = transformColumns(props.columns)
+})
+
+const resultLabel = computed({
+  get() {
+    if (!resultValue.value)
+      return ''
+    const res = props.columns.filter((item) => {
+      const data = props.offOption ? item : item[props.option.value]
+      return data === resultValue.value
+    })
+    return res.length ? (props.offOption ? res[0] : res[0][props.option.text]) : ''
+  },
+  set() {
+
+  },
+})
+
+function search(val) {
+  if (val) {
+    columnsData.value = transformColumns(columnsData.value).filter((item) => {
+      const data = props.offOption ? item : item[props.option.text]
+      return data.includes(val)
+    })
+  }
+  else {
+    columnsData.value = transformColumns(props.columns)
+  }
+}
+
+function onConfirm(value, _index) {
+  resultValue.value = props.offOption ? value.selectedValues : value.selectedValues[0]
+  // resultValue.value = value.selectedValues
+  selectedOption.value = value.selectedOptions
+  show.value = !show.value
+  emits('confirm', value.selectedValues[0], value.selectedOptions)
+}
+
+function change(val, index) {
+  emits('change', val, index, resultValue.value)
+}
+
+function cancel(val, index) {
+  show.value = !show.value
+  emits('cancel', val, index, resultValue.value)
+}
+
+function showPopu(disabled) {
+  if (disabled !== undefined && disabled !== false)
+    return false
+  columnsData.value = transformColumns(props.columns)
+  show.value = !show.value
+}
+
+watch(() => resultValue, (newVal, _oldVal) => {
+  searchVal.value = ''
+  columnsData.value = transformColumns(props.columns)
+  emits('input', newVal)
+})
+</script>
+
+<template>
+  <VanField
+    v-model="resultLabel"
+    v-bind="$attrs"
+    readonly
+    :is-link="true"
+    :border="props.border"
+    error-message-align="right"
+    @click="showPopu($attrs.readonly)"
+  />
+  <VanPopup v-model:show="show" position="bottom">
+    <VanField v-if="props.isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search" />
+    <VanPicker
+      v-bind="$attrs"
+      :columns="columnsData"
+      :columns-field-names="props.option"
+      show-toolbar
+      :value-key="props.option.text"
+      @cancel="cancel"
+      @confirm="onConfirm"
+      @change="change"
+    />
+  </VanPopup>
+</template>
+
+<style scoped>
+/* 样式定义 */
+</style>