af-mobile-client-vue3 1.1.5 → 1.1.7

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/data/XCellDetail/index.vue

@@ -1,106 +1,106 @@
-<script setup lang="ts">
-import {
-  Col as VanCol,
-  Icon as VanIcon,
-  Row as VanRow,
-  Skeleton as VanSkeleton,
-} from 'vant'
-import 'animate.css'
-
-const { title, describe, extra, loading, statusBar } = defineProps<{
-  title?: string
-  describe?: string
-  extra?: string
-  loading?: boolean
-  statusBar?: { icon: string, color: string }
-}>()
-</script>
-
-<template>
-  <div class="main">
-    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
-      <VanIcon
-        v-if="statusBar"
-        :color="statusBar.color"
-        :name="statusBar.icon"
-        class="status-icon animate__animated animate__rotateInDownRight"
-        size="70"
-      />
-      <VanRow class="detail-header">
-        <VanCol span="16">
-          <slot name="detailHeaderTitle">
-            <div class="detail-header-title">
-              {{ title }}
-            </div>
-          </slot>
-          <slot name="detailHeaderDescribe">
-            <div class="detail-header-describe">
-              {{ describe }}
-            </div>
-          </slot>
-        </VanCol>
-        <VanCol span="8">
-          <span class="detail-header-extra">
-            {{ extra }}
-          </span>
-        </VanCol>
-      </VanRow>
-      <div class="detail-content-box">
-        <slot name="detailContent" />
-      </div>
-      <slot name="extraAction" />
-    </VanSkeleton>
-  </div>
-</template>
-
-<style scoped lang="less">
-.main {
-  background-color: #f7f8fa;
-  overflow-y: auto;
-  height: 92vh;
-  .skeleton-box {
-    margin-top: 1vh;
-  }
-  .status-icon {
-    opacity: 0.5;
-    position: absolute;
-    top: 13vh;
-    right: 3vh;
-    transform: translate(-50%, -50%) rotate(-20deg);
-  }
-  .status-icon:before {
-    opacity: 0.5;
-    transform: rotate(-20deg);
-  }
-  .status-icon:after {
-    opacity: 0.5;
-    transform: rotate(-20deg);
-  }
-  .detail-header {
-    margin-top: 1vh;
-    padding: 1vh 2vh 1vh 2vh;
-    background-color: white;
-    .detail-header-title {
-      font-size: 15px;
-      margin-bottom: 5px;
-    }
-    .detail-header-describe {
-      font-size: 13px;
-      color: var(--van-text-color-2);
-    }
-    .detail-header-extra {
-      width: 100%;
-      display: inline-block;
-      text-align: right;
-      font-size: 28px;
-      color: #1989fa;
-      font-weight: bold;
-    }
-  }
-  .detail-content-box {
-    background-color: white;
-    margin-top: 1vh;
-    padding: 1vh 2vh 2vh 2vh;
-  }
-}
-</style>
+<script setup lang="ts">
+import {
+  Col as VanCol,
+  Icon as VanIcon,
+  Row as VanRow,
+  Skeleton as VanSkeleton,
+} from 'vant'
+import 'animate.css'
+
+const { title, describe, extra, loading, statusBar } = defineProps<{
+  title?: string
+  describe?: string
+  extra?: string
+  loading?: boolean
+  statusBar?: { icon: string, color: string }
+}>()
+</script>
+
+<template>
+  <div class="main">
+    <VanSkeleton title :row="20" :loading="loading" class="skeleton-box">
+      <VanIcon
+        v-if="statusBar"
+        :color="statusBar.color"
+        :name="statusBar.icon"
+        class="status-icon animate__animated animate__rotateInDownRight"
+        size="70"
+      />
+      <VanRow class="detail-header">
+        <VanCol span="16">
+          <slot name="detailHeaderTitle">
+            <div class="detail-header-title">
+              {{ title }}
+            </div>
+          </slot>
+          <slot name="detailHeaderDescribe">
+            <div class="detail-header-describe">
+              {{ describe }}
+            </div>
+          </slot>
+        </VanCol>
+        <VanCol span="8">
+          <span class="detail-header-extra">
+            {{ extra }}
+          </span>
+        </VanCol>
+      </VanRow>
+      <div class="detail-content-box">
+        <slot name="detailContent" />
+      </div>
+      <slot name="extraAction" />
+    </VanSkeleton>
+  </div>
+</template>
+
+<style scoped lang="less">
+.main {
+  background-color: #f7f8fa;
+  overflow-y: auto;
+  height: 92vh;
+  .skeleton-box {
+    margin-top: 1vh;
+  }
+  .status-icon {
+    opacity: 0.5;
+    position: absolute;
+    top: 13vh;
+    right: 3vh;
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  .status-icon:before {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .status-icon:after {
+    opacity: 0.5;
+    transform: rotate(-20deg);
+  }
+  .detail-header {
+    margin-top: 1vh;
+    padding: 1vh 2vh 1vh 2vh;
+    background-color: white;
+    .detail-header-title {
+      font-size: 15px;
+      margin-bottom: 5px;
+    }
+    .detail-header-describe {
+      font-size: 13px;
+      color: var(--van-text-color-2);
+    }
+    .detail-header-extra {
+      width: 100%;
+      display: inline-block;
+      text-align: right;
+      font-size: 28px;
+      color: #1989fa;
+      font-weight: bold;
+    }
+  }
+  .detail-content-box {
+    background-color: white;
+    margin-top: 1vh;
+    padding: 1vh 2vh 2vh 2vh;
+  }
+}
+</style>

package/src/components/data/XForm/index.vue

@@ -112,6 +112,10 @@ function setFormProps(form, item) {
   }
 }
 
+function setForm(obj) {
+  Object.assign(form.value, obj)
+}
+
 function onSubmit() {
   emits('onSubmit', form.value)
 }
@@ -137,6 +141,7 @@ defineExpose({ init, form, formGroupName, validate })
         :rules="rules"
         :service-name="myServiceName"
         :get-data-params="myGetDataParams"
+        @set-form="setForm"
       />
     </VanCellGroup>
     <div v-if="props.submitButton && props.mode !== '预览'" style="margin: 16px;">