af-mobile-client-vue3 1.3.11 → 1.3.13

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

@@ -1,124 +1,124 @@
-<script setup lang="ts">
-import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
-import {
-  Button as vanButton,
-  Uploader as vanUploader,
-} from 'vant'
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  imageList: Array<any>,
-  outerIndex: { default: undefined },
-  authority: { default: 'user' },
-  uploadMode: { default: 'server' },
-})
-const emit = defineEmits(['updateFileList'])
-
-const imageList = ref(props.imageList)
-
-// 监听 props.imageList 的变化
-watch(() => props.imageList, (newVal) => {
-  if (newVal?.length > 0) {
-    const existingIds = imageList.value ? imageList.value.map(item => item.id) : []
-    const newItems = newVal.filter(item => !item.id || !existingIds.includes(item.id)).map((item) => {
-      return { id: item.id, name: item.f_filename, url: item.f_downloadpath }
-    })
-    if (newItems.length > 0) {
-      if (!imageList.value) {
-        imageList.value = newItems
-      }
-      else {
-        imageList.value = [...imageList.value, ...newItems]
-      }
-    }
-  }
-}, { immediate: true, deep: true })
-// 上传图片
-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({ ids: [file.id], f_state: '删除' }).then((res: any) => {
-      if (res.msg !== undefined) {
-        let target = -1
-        for (let i = 0; i < imageList.value.length; i++) {
-          if (imageList.value[i].id === Number.parseInt(file.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'))
-      }
-    })
-  }
-}
-</script>
-
-<template>
-  <van-uploader
-    v-if="props.authority === 'user'"
-    v-model="imageList"
-    :after-read="fileUpload"
-    :show-upload="false"
-    :deletable="false"
-  >
-    <vanButton icon="photograph" type="primary">
-      上传
-    </vanButton>
-  </van-uploader>
-  <van-uploader
-    v-else-if="props.authority === 'admin'"
-    v-model="imageList"
-    multiple
-    :preview-image="true"
-    :after-read="fileUpload"
-    :before-delete="deleteFileFunction"
-  >
-    <vanButton icon="photograph" type="primary">
-      上传
-    </vanButton>
-  </van-uploader>
-</template>
-
-<style scoped lang="less">
-</style>
+<script setup lang="ts">
+import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
+import {
+  Button as vanButton,
+  Uploader as vanUploader,
+} from 'vant'
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  imageList: Array<any>,
+  outerIndex: { default: undefined },
+  authority: { default: 'user' },
+  uploadMode: { default: 'server' },
+})
+const emit = defineEmits(['updateFileList'])
+
+const imageList = ref(props.imageList)
+
+// 监听 props.imageList 的变化
+watch(() => props.imageList, (newVal) => {
+  if (newVal?.length > 0) {
+    const existingIds = imageList.value ? imageList.value.map(item => item.id) : []
+    const newItems = newVal.filter(item => !item.id || !existingIds.includes(item.id)).map((item) => {
+      return { id: item.id, name: item.f_filename, url: item.f_downloadpath }
+    })
+    if (newItems.length > 0) {
+      if (!imageList.value) {
+        imageList.value = newItems
+      }
+      else {
+        imageList.value = [...imageList.value, ...newItems]
+      }
+    }
+  }
+}, { immediate: true, deep: true })
+// 上传图片
+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({ ids: [file.id], f_state: '删除' }).then((res: any) => {
+      if (res.msg !== undefined) {
+        let target = -1
+        for (let i = 0; i < imageList.value.length; i++) {
+          if (imageList.value[i].id === Number.parseInt(file.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'))
+      }
+    })
+  }
+}
+</script>
+
+<template>
+  <van-uploader
+    v-if="props.authority === 'user'"
+    v-model="imageList"
+    :after-read="fileUpload"
+    :show-upload="false"
+    :deletable="false"
+  >
+    <vanButton icon="photograph" type="primary">
+      上传
+    </vanButton>
+  </van-uploader>
+  <van-uploader
+    v-else-if="props.authority === 'admin'"
+    v-model="imageList"
+    multiple
+    :preview-image="true"
+    :after-read="fileUpload"
+    :before-delete="deleteFileFunction"
+  >
+    <vanButton icon="photograph" type="primary">
+      上传
+    </vanButton>
+  </van-uploader>
+</template>
+
+<style scoped lang="less">
+</style>

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

@@ -1,156 +1,154 @@
-<script setup lang="ts">
-import {
-  Button as VanButton,
-  Checkbox as VanCheckbox,
-  CheckboxGroup as VanCheckboxGroup,
-  Grid as VanGrid,
-  GridItem as VanGridItem,
-  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>