af-mobile-client-vue3 1.3.35 → 1.3.37

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

@@ -1,154 +1,154 @@
-<script setup lang="ts">
-import {
-  Button as VanButton,
-  Checkbox as VanCheckbox,
-  CheckboxGroup as VanCheckboxGroup,
-  Radio as VanRadio,
-  RadioGroup as VanRadioGroup,
-} from 'vant'
-import { defineEmits, defineModel, defineProps } from 'vue'
-
-interface ColumnItem {
-  [key: string]: string | number
-}
-
-interface ColumnsFieldNames {
-  text: string
-  value: string
-}
-
-const props = defineProps({
-  columns: {
-    type: Array as () => ColumnItem[],
-    default: () => [] as ColumnItem[],
-  },
-  columnsFieldNames: {
-    type: Object as () => ColumnsFieldNames,
-    default: () => ({
-      text: 'label',
-      value: 'value',
-    }),
-  },
-  gutter: {
-    type: Number,
-    default: 8,
-  },
-  columnNum: {
-    type: Number,
-    default: 4,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits<{
-  change: [value: string | string[], list: ColumnItem[]]
-}>()
-
-const checked = defineModel<string | string[]>()
-
-function classSel(colRow: ColumnItem): boolean {
-  if (typeof checked.value === 'string' || Array.isArray(checked.value))
-    return checked.value.includes(String(colRow[props.columnsFieldNames.value]))
-  else if (typeof checked.value === 'undefined')
-    return false
-  else
-    return checked.value === String(colRow[props.columnsFieldNames.value])
-}
-
-function valueChange(value: string | string[]) {
-  const list = props.columns.filter((item) => {
-    if (props.multiple)
-      return value.includes(String(item[props.columnsFieldNames.value]))
-
-    else
-      return value === item[props.columnsFieldNames.value]
-  })
-  emit('change', value, list)
-}
-</script>
-
-<template>
-  <div id="XGridDropOption">
-    <template v-if="props.multiple">
-      <VanCheckboxGroup v-model="checked as string[]" direction="horizontal" @change="valueChange">
-        <div class="option-container">
-          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
-            <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
-              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
-                {{ colRow[props.columnsFieldNames.text] }}
-              </VanButton>
-            </VanCheckbox>
-          </div>
-        </div>
-      </VanCheckboxGroup>
-    </template>
-    <template v-else>
-      <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
-        <div class="option-container">
-          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
-            <VanRadio :name="colRow[props.columnsFieldNames.value]">
-              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
-                {{ colRow[props.columnsFieldNames.text] }}
-              </VanButton>
-            </VanRadio>
-          </div>
-        </div>
-      </VanRadioGroup>
-    </template>
-  </div>
-</template>
-
-<style scoped lang="less">
-#XGridDropOption {
-  width: 100%;
-  --van-grid-item-content-padding: 2px;
-  --van-padding-sm: 0px;
-  --van-checkbox-label-margin: 0px;
-  --van-radio-label-margin: 0px;
-  --van-button-default-border-color: 'rgb(247,248,250)';
-
-  .option-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    width: 100%;
-  }
-
-  .option-item {
-    flex: 0 1 auto;
-    min-width: fit-content;
-  }
-
-  .select-text-col {
-    color: blue;
-  }
-
-  :deep(.van-checkbox__icon) {
-    display: none;
-  }
-
-  :deep(.van-checkbox) {
-    width: 100%;
-  }
-  :deep(.van-radio__icon) {
-    display: none;
-  }
-  :deep(.van-radio) {
-    width: 100%;
-  }
-  :deep(.van-button) {
-    width: 100%;
-    background-color: rgb(247, 248, 250);
-    white-space: nowrap;
-  }
-  :deep(.van-checkbox__label) {
-    width: 100%;
-  }
-  :deep(.van-radio__label) {
-    width: 100%;
-  }
-}
-</style>
+<script setup lang="ts">
+import {
+  Button as VanButton,
+  Checkbox as VanCheckbox,
+  CheckboxGroup as VanCheckboxGroup,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+} from 'vant'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+interface ColumnItem {
+  [key: string]: string | number
+}
+
+interface ColumnsFieldNames {
+  text: string
+  value: string
+}
+
+const props = defineProps({
+  columns: {
+    type: Array as () => ColumnItem[],
+    default: () => [] as ColumnItem[],
+  },
+  columnsFieldNames: {
+    type: Object as () => ColumnsFieldNames,
+    default: () => ({
+      text: 'label',
+      value: 'value',
+    }),
+  },
+  gutter: {
+    type: Number,
+    default: 8,
+  },
+  columnNum: {
+    type: Number,
+    default: 4,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  change: [value: string | string[], list: ColumnItem[]]
+}>()
+
+const checked = defineModel<string | string[]>()
+
+function classSel(colRow: ColumnItem): boolean {
+  if (typeof checked.value === 'string' || Array.isArray(checked.value))
+    return checked.value.includes(String(colRow[props.columnsFieldNames.value]))
+  else if (typeof checked.value === 'undefined')
+    return false
+  else
+    return checked.value === String(colRow[props.columnsFieldNames.value])
+}
+
+function valueChange(value: string | string[]) {
+  const list = props.columns.filter((item) => {
+    if (props.multiple)
+      return value.includes(String(item[props.columnsFieldNames.value]))
+
+    else
+      return value === item[props.columnsFieldNames.value]
+  })
+  emit('change', value, list)
+}
+</script>
+
+<template>
+  <div id="XGridDropOption">
+    <template v-if="props.multiple">
+      <VanCheckboxGroup v-model="checked as string[]" direction="horizontal" @change="valueChange">
+        <div class="option-container">
+          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
+            <VanCheckbox :name="colRow[props.columnsFieldNames.value]">
+              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                {{ colRow[props.columnsFieldNames.text] }}
+              </VanButton>
+            </VanCheckbox>
+          </div>
+        </div>
+      </VanCheckboxGroup>
+    </template>
+    <template v-else>
+      <VanRadioGroup v-model="checked" direction="horizontal" @change="valueChange">
+        <div class="option-container">
+          <div v-for="colRow in props.columns" :key="colRow[props.columnsFieldNames.text]" class="option-item">
+            <VanRadio :name="colRow[props.columnsFieldNames.value]">
+              <VanButton type="default" size="small" :class="{ 'select-text-col': classSel(colRow) }">
+                {{ colRow[props.columnsFieldNames.text] }}
+              </VanButton>
+            </VanRadio>
+          </div>
+        </div>
+      </VanRadioGroup>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XGridDropOption {
+  width: 100%;
+  --van-grid-item-content-padding: 2px;
+  --van-padding-sm: 0px;
+  --van-checkbox-label-margin: 0px;
+  --van-radio-label-margin: 0px;
+  --van-button-default-border-color: 'rgb(247,248,250)';
+
+  .option-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .option-item {
+    flex: 0 1 auto;
+    min-width: fit-content;
+  }
+
+  .select-text-col {
+    color: blue;
+  }
+
+  :deep(.van-checkbox__icon) {
+    display: none;
+  }
+
+  :deep(.van-checkbox) {
+    width: 100%;
+  }
+  :deep(.van-radio__icon) {
+    display: none;
+  }
+  :deep(.van-radio) {
+    width: 100%;
+  }
+  :deep(.van-button) {
+    width: 100%;
+    background-color: rgb(247, 248, 250);
+    white-space: nowrap;
+  }
+  :deep(.van-checkbox__label) {
+    width: 100%;
+  }
+  :deep(.van-radio__label) {
+    width: 100%;
+  }
+}
+</style>

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>