af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,47 @@
+<script setup>
+import SvgIcon from './components/core/SvgIcon/index.vue'
+</script>
+
+<template>
+  <div class="main">
+    <div class="bird-container">
+      <SvgIcon name="bird" class="bird" />
+    </div>
+    <div class="loading-text">
+      加载中，请稍候...
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.bird-container {
+  width: 60px;
+  height: 60px;
+  animation: fade 3s ease-out infinite;
+}
+
+.bird {
+  width: 60px;
+  height: 60px;
+}
+
+.loading-text {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #333;
+}
+
+@keyframes fade {
+  0% { opacity: 1; }
+  50% { opacity: 0.3; }
+  100% { opacity: 1; }
+}
+</style>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { NavBar as VanNavBar } from 'vant/es'
+
+// back
+const onClickLeft = () => history.back()
+</script>
+
+<template>
+  <VanNavBar placeholder left-arrow fixed @click-left="onClickLeft" />
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isExternal } from '@af-mobile-client-vue3/utils/validate'
+
+interface Props {
+  name: string
+  className?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  className: '',
+})
+
+const isExternalIcon = computed(() => isExternal(props.name))
+const iconName = computed(() => `#icon-${props.name}`)
+const svgClass = computed(() => {
+  if (props.className)
+    return `svg-icon ${props.className}`
+  else
+    return 'svg-icon'
+})
+// 外链 icon
+const styleExternalIcon = computed(() => {
+  return {
+    'mask': `url(${props.name}) no-repeat 50% 50%`,
+    '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`,
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="isExternalIcon"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-bind="$attrs"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+
+.svg-icon-active-blue {
+  color: #1989FA
+}
+</style>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from '@af-mobile-client-vue3/components/core/SvgIcon/index.vue'
+import { Icon as VanIcon, Tabbar as VanTabbar, TabbarItem as VanTabbarItem } from 'vant'
+import 'vant/lib/tabbar-item/index.css'
+import 'vant/lib/tabbar/index.css'
+
+const Props = defineProps<{
+  tabbarData: [
+    {
+      icon: string
+      title: string
+      to: {
+        name: string
+      }
+    },
+  ]
+}>()
+const active = ref(0)
+</script>
+
+<template>
+  <VanTabbar v-model="active" :placeholder="true" :route="true" fixed>
+    <VanTabbarItem
+      v-for="(item, index) in Props.tabbarData"
+      :key="index"
+      :to="item.to"
+    >
+      <template v-if="item.icon.startsWith('svg:')" #icon="props">
+        <SvgIcon :name="item.icon.split(':')[1]" :class-name="props.active ? 'svg-icon-active-blue' : ``" />
+      </template>
+      <template v-else #icon="props">
+        <VanIcon :name="item.icon" />
+      </template>
+      {{ item.title }}
+    </VanTabbarItem>
+  </VanTabbar>
+</template>

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

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import {
+  Uploader as vanUploader,
+} from 'vant'
+import { ref } from 'vue'
+import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
+
+const props = defineProps({
+  imageList: Array<any>,
+  outerIndex: { default: undefined },
+  authority: { default: 'user' },
+  uploadMode: { default: 'server' },
+})
+const emit = defineEmits(['updateFileList'])
+
+const imageList = ref([])
+
+// 上传图片
+function fileUpload(file: any): void {
+  const formData = new FormData()
+
+  formData.append('avatar', file.file)
+  formData.append('resUploadMode', props.uploadMode)
+  formData.append('pathKey', 'Default')
+
+  formData.append('formType', 'image')
+  formData.append('useType', 'Default')
+  formData.append('resUploadStock', '1')
+  formData.append('filename', file.file.name)
+  formData.append('filesize', (file.file.size / 1024 / 1024).toFixed(4))
+  formData.append('f_operator', '')
+
+  imageList.value[imageList.value.length - 1].message = '上传中...'
+  imageList.value[imageList.value.length - 1].status = 'uploading'
+  imageList.value[imageList.value.length - 1]!.name = file.file.name
+
+  upload(formData, 'af-system', { 'Content-Type': 'multipart/form-data' }).then((res: any) => {
+    if (res.success || res.id) {
+      imageList.value[imageList.value.length - 1].uid = res.data.id
+      imageList.value[imageList.value.length - 1].id = res.data.id
+      delete imageList.value[imageList.value.length - 1].message
+      imageList.value[imageList.value.length - 1].status = 'done'
+      imageList.value[imageList.value.length - 1].url = res.data.f_downloadpath
+    }
+    else {
+      imageList.value[imageList.value.length - 1].status = 'failed'
+      imageList.value[imageList.value.length - 1].message = '上传失败'
+    }
+    if (props.outerIndex !== undefined)
+      emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+    else
+      emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+  })
+}
+
+// 删除图片
+function deleteFileFunction(file: any) {
+  if (file.id) {
+    deleteFile({ id: file.id, f_state: '删除' }).then((res: any) => {
+      if (res.id) {
+        let target = -1
+        for (let i = 0; i < imageList.value.length; i++) {
+          if (imageList.value[i].id === Number.parseInt(res.id)) {
+            target = i
+            break
+          }
+        }
+        imageList.value.splice(target, 1)
+        if (props.outerIndex !== undefined)
+          emit('updateFileList', imageList.value.filter(item => item.status === 'done'), props.outerIndex)
+        else
+          emit('updateFileList', imageList.value.filter(item => item.status === 'done'))
+      }
+    })
+  }
+}
+
+// -------------------------  初始化  -------------------------
+initComponent()
+
+function initComponent() {
+  if (props.imageList.length > 0)
+    imageList.value = JSON.parse(JSON.stringify(props.imageList))
+}
+</script>
+
+<template>
+  <van-uploader
+    v-if="props.authority === 'user'"
+    v-model="imageList"
+    :after-read="fileUpload"
+    :show-upload="false"
+    :deletable="false"
+  />
+  <van-uploader
+    v-else-if="props.authority === 'admin'"
+    v-model="imageList"
+    :after-read="fileUpload"
+    :before-delete="deleteFileFunction"
+  />
+</template>
+
+<style scoped lang="less">
+</style>

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

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+  Cell as VanCell,
+  CellGroup as VanCellGroup,
+  Checkbox as VanCheckbox,
+  CheckboxGroup as VanCheckboxGroup,
+} from 'vant'
+import {ref,reactive,watch,computed} from 'vue'
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: function () {
+      return []
+    }
+  },
+  selectValue: {
+    type: Array,
+    default: function () {
+      return []
+    }
+  },
+  option: {
+    type: Object,
+    default: function () {
+      return { label: 'label', value: 'value' }
+    }
+  },
+  // 是否支持搜索
+  isSearch: {
+    type: Boolean,
+    default: true
+  }
+})
+let emits = defineEmits(['input','confirm','change','cancel'])
+let {columns,selectValue,option,isSearch} = props
+let show = ref(false)
+let searchVal = ref('')
+let columnsData = reactive(JSON.parse(JSON.stringify(columns)))
+let checkboxValue = reactive(JSON.parse(JSON.stringify(selectValue)))
+let checkedAll = ref(false)
+let resultValue = reactive(JSON.parse(JSON.stringify(selectValue)))
+let checkboxGroup = ref()
+let checkboxes = ref()
+function search (val) {
+  if (val) {
+    columnsData = columnsData.filter(item => {
+      return item[option.label].indexOf(val) > -1
+    })
+  } else {
+    columnsData = JSON.parse(JSON.stringify(columns))
+  }
+}
+function getData (val) {
+  const res = columnsData.filter(item => {
+    return val.indexOf(item[option.value]) > -1
+  })
+  return res
+}
+function onConfirm () {
+  resultValue = checkboxValue
+  show.value = !show.value
+  emits('confirm', resultValue, getData(resultValue))
+}
+function change (val) {
+  emits('change', val, getData(resultValue))
+}
+function cancel () {
+  show.value = !show.value
+  emits('cancel', resultValue)
+}
+const toggle = (index) => {
+  // 假设 checkboxValue 是一个对象，我们通过 index 来切换对应 checkbox 的值
+  checkboxValue.value[index] = !checkboxValue.value[index];
+}
+const toggleAll = () => {
+  // 遍历 checkboxValue 并设置所有 checkbox 的值为 checkedAll 的值
+  Object.keys(checkboxValue.value).forEach((key) => {
+    checkboxValue.value[key] = checkedAll.value;
+  });
+}
+function showPopu (disabled) {
+  columnsData = JSON.parse(JSON.stringify(columns))
+  checkboxValue = JSON.parse(JSON.stringify(selectValue))
+  resultValue = JSON.parse(JSON.stringify(selectValue))
+  if (disabled !== undefined && disabled !== false) {
+    return false
+  } else {
+    show.value = !show.value
+  }
+}
+watch(()=> selectValue,(newVal, oldVal)=>{
+  resultValue = newVal
+})
+watch(()=> resultValue,(newVal, oldVal)=>{
+  searchVal.value = ''
+  columnsData = JSON.parse(JSON.stringify(columns))
+  emits('input', newVal)
+})
+watch(()=> columnsData,(newVal, oldVal)=>{
+  if (newVal.length && newVal.length === checkboxValue.length) {
+    checkedAll.value = true
+  } else {
+    checkedAll.value = false
+  }
+})
+watch(()=> checkboxValue,(newVal, oldVal)=>{
+  if (newVal.length && newVal.length === columnsData.length) {
+    checkedAll.value = true
+  } else {
+    checkedAll.value = false
+  }
+})
+watch(checkedAll, (newVal) => {
+  toggleAll();
+})
+let resultLabel = computed({
+  get () {
+    const res = columns.filter(item => {
+      return resultValue.indexOf(item[this.option.value]) > -1
+    })
+    const resLabel = res.map(item => {
+      return item[this.option.label]
+    })
+    return resLabel.join(',')
+  },
+  set () {
+
+  }
+})
+</script>
+
+<template>
+  <div class="dh-field">
+    <div class="van-hairline--bottom">
+      <van-field
+        v-model="resultLabel"
+        v-bind="$attrs"
+        readonly
+        :is-link="$attrs.disabled === undefined"
+        error-message-align='right'
+        input-align="right"
+        class="dh-cell"
+        @click="showPopu($attrs.disabled)"
+      />
+      <van-popup v-model="show" position="bottom" class="" >
+        <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;">
+          <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search"/>
+          <van-cell title="全选">
+            <template #right-icon>
+              <van-checkbox v-model="checkedAll" name="all" @click="toggleAll"/>
+            </template>
+          </van-cell>
+          <van-checkbox-group ref="checkboxGroup" v-model="checkboxValue" @change="change">
+            <van-cell-group>
+              <van-cell
+                v-for="(item, index) in columnsData"
+                :key="item[option.value]"
+                :title="item[option.label]"
+                clickable
+                @click="toggle(index)"
+              >
+                <template #right-icon>
+                  <van-checkbox ref="checkboxes" :name="item[option.value]" />
+                </template>
+              </van-cell>
+            </van-cell-group>
+          </van-checkbox-group>
+        </div>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.dh-field {
+  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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+} from 'vant'
+import {watch,computed,ref,reactive} from 'vue'
+const emits = defineEmits(['confirm','change','cancel','input'])
+const props = defineProps({
+    columns: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    selectValue: {
+      type: [String, Number],
+      default: ''
+    },
+    option: {
+      type: Object,
+      default: function () {
+        return { label: 'label', value: 'value' }
+      }
+    },
+    isSearch: {
+      type: Boolean,
+      default: false
+    },
+    offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
+      type: Boolean,
+      default: false
+    }
+})
+let {columns,selectValue,option,isSearch,offOption} = props
+let show = ref(false)
+let searchVal = ref('')
+let resultValue = ref('')
+let columnsData = reactive([])
+
+
+let resultLabel = computed({
+  get () {
+    const res = columns.filter(item => {
+      const data = offOption ? item : item[option.value]
+      return data === resultValue.value
+    })
+    let label = ''
+    if (res.length) {
+      label = offOption ? res[0] : res[0][option.label]
+    }
+
+    return label
+  },
+  set () {
+
+  }
+})
+function search (val) {
+  if (val) {
+    columnsData = columnsData.filter(item => {
+      const data = offOption ? item : item[option.label]
+
+      return data.indexOf(val) > -1
+    })
+  } else {
+    columnsData = JSON.parse(JSON.stringify(columns))
+  }
+}
+function onConfirm (value, index) {
+  const data = offOption ? value : value[option.value]
+
+  resultValue.value = data
+  show.value = !show.value
+  emits('confirm', value, index, resultValue.value)
+}
+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) {
+  columnsData = JSON.parse(JSON.stringify(columns))
+  resultValue.value = selectValue + ''
+  if (disabled !== undefined && disabled !== false) {
+    return false
+  } else {
+    show.value = !show.value
+  }
+}
+
+watch(()=> selectValue,(newVal, oldVal)=>{
+  resultValue.value = newVal + ''
+})
+watch(()=> resultValue, (newVal, oldVal)=>{
+  searchVal.value = ''
+  columnsData = JSON.parse(JSON.stringify(columns))
+  emits('input', newVal)
+})
+</script>
+
+<template>
+  <van-field
+    v-model="resultLabel"
+    v-bind="$attrs"
+    readonly
+    :is-link="true"
+    error-message-align='right'
+    @click="showPopu($attrs.disabled)"
+  />
+  <van-popup v-model="show" position="bottom">
+    <van-field v-if="isSearch" v-model="searchVal" input-align="left" placeholder="搜索" @input="search"/>
+    <van-picker
+      v-bind="$attrs"
+      :columns="columnsData"
+      show-toolbar
+      @cancel="cancel"
+      @confirm="onConfirm"
+      @change="change"
+      :value-key="option.label"
+    />
+  </van-popup>
+</template>
+
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getDictItemByValue } from '@af-mobile-client-vue3/utils/dictUtil'
+
+const { dictName, dictValue } = withDefaults(defineProps<{
+  dictName?: string
+  dictValue: any
+  isColor?: boolean
+}>(), {
+  dictName: '',
+  isColor: true,
+})
+
+// 字面值
+const label = ref('')
+
+// 样式类名
+const className = ref('')
+
+initComponent()
+
+// 组件初始化
+function initComponent() {
+  if (!dictValue) {
+    label.value = '-'
+    return
+  }
+  if (!dictName || dictName === '') {
+    label.value = dictValue.toString()
+    return
+  }
+  getDictItemByValue(dictName, dictValue, (result) => {
+    if (result == null) {
+      label.value = dictValue.toString()
+    }
+    else {
+      label.value = result.label
+      className.value = `badge-${result.status}`
+    }
+  })
+}
+</script>
+
+<template>
+  <span :class="className !== '' ? className : undefined">{{ label }}</span>
+</template>
+
+<style scoped lang="less">
+.badge-blue {
+  color: #1890ff;
+}
+.badge-green {
+  color: #52c41a;
+}
+.badge-orange {
+  color: #fa8c16;
+}
+.badge-cyan {
+  color: #13c2c2;
+}
+.badge-yellow {
+  color: #fadb14;
+}
+.badge-red {
+  color: #f5222d;
+}
+.badge-pink {
+  color: #eb2f96;
+}
+.badge-purple {
+  color: #722ed1;
+}
+.badge-geekblue {
+  color: #2f54eb;
+}
+.badge-volcano {
+  color: #fa541c;
+}
+.badge-gold {
+  color: #faad14;
+}
+.badge-lime {
+  color: #a0d911;
+}
+</style>