@netang/quasar 0.1.67 → 0.1.69

package/components/uploader-query/index.vue

@@ -12,16 +12,32 @@
             class="n-uploader-query__button--button"
             v-else-if="! noButton && currentButtonType === 'button'"
         >
-            <q-btn
-                class="n-button-icon"
-                :label="buttonText || '上传'"
-                @click="uploader.chooseUpload"
-                color="primary"
-                outline
-                :disable="disable || readonly"
-                unelevated
-                v-bind="buttonProps"
-            />
+            <!-- 按钮组-->
+            <q-btn-group outline>
+                <!-- 上传本地图片 -->
+                <q-btn
+                    class="n-button-icon"
+                    :label="buttonText || '上传'"
+                    @click="uploader.chooseUpload"
+                    color="primary"
+                    outline
+                    :disable="disable || readonly"
+                    unelevated
+                    v-bind="buttonProps"
+                />
+                <!-- 上传网络图片 -->
+                <q-btn
+                    class="n-button-icon q-px-sm"
+                    icon="cloud_upload"
+                    @click="uploader.chooseUploadNet"
+                    color="primary"
+                    outline
+                    :disable="disable || readonly"
+                    unelevated
+                    v-bind="buttonProps"
+                    v-if="showUploadNetButton"
+                />
+            </q-btn-group>
         </div>
 
         <!-- 拖拽器 -->
@@ -44,20 +60,38 @@
                         v-if="$slots['square-button']"
                     />
                     <div
-                        class="n-uploader-query__button--square cursor-pointer"
+                        class="n-uploader-query__button--square"
                         :style="{
                             width: toPx(currentSize),
                             height: toPx(currentSize),
                         }"
-                        @click="uploader.chooseUpload"
                         v-show="showSquareButton"
                         v-else-if="! noButton && currentButtonType === 'square'"
                     >
-                        <q-icon
-                            name="add"
-                            :size="toPx(currentSize / 2)"
-                        />
-                        <div class="n-uploader-query__button--square__text" v-if="buttonText">{{buttonText}}</div>
+                        <!-- 上传本地图片 -->
+                        <div
+                            class="n-uploader-query__button--square-button cursor-pointer"
+                            @click="uploader.chooseUpload"
+                        >
+                            <q-icon
+                                name="add"
+                                :size="toPx(currentSize / 2)"
+                            />
+                            <div class="n-uploader-query__button--square-button__text" v-if="buttonText">{{buttonText}}</div>
+                        </div>
+
+                        <!-- 上传网络图片 -->
+                        <div
+                            class="n-uploader-query__button--square-button q-mt-xs cursor-pointer"
+                            @click="uploader.chooseUploadNet"
+                            v-if="showUploadNetButton"
+                        >
+                            <q-icon
+                                name="cloud_upload"
+                                :size="toPx(currentSize / 3)"
+                            />
+                            <div class="n-uploader-query__button--square-button__text" v-if="buttonText">{{buttonText}}</div>
+                        </div>
                     </div>
                 </template>
 
@@ -81,6 +115,7 @@
                         :spinner-size="toPx(currentSize / 2)"
                         :width="toPx(currentSize)"
                         :height="toPx(currentSize)"
+                        @click="onFileItemClick(fileItem)"
                         fit="fill"
                     >
                         <!-- 如果是外链 -->
@@ -163,7 +198,6 @@
                             />
 
                         </div>
-
                     </n-img>
                 </div>
 
@@ -273,7 +307,7 @@
                     </div>
 
                     <!-- 信息 -->
-                    <div class="n-uploader-query__item__info">
+                    <div class="n-uploader-query__item__info" @click="onFileItemClick(fileItem)">
                         <!-- 标题 -->
                         <div class="n-uploader-query__item__info__title ellipsis">{{getFileName(fileItem)}}</div>
                         <!-- 错误提示 -->
@@ -434,6 +468,8 @@ export default {
         },
         // 设置图标传参
         settingsIconProps: Object,
+        // 是否显示上传网络外链按钮
+        showUploadNetButton: Boolean,
     },
 
     /**
@@ -441,12 +477,13 @@ export default {
      */
     emits: [
         'update:modelValue',
+        'itemClick',
     ],
 
     /**
      * 组合式
      */
-    setup(props) {
+    setup(props, { emit }) {
 
         // ==========【数据】============================================================================================
 
@@ -572,6 +609,12 @@ export default {
             return fileItem.title + ($n_get(fileItem, 'ext') ? '.' + fileItem.ext : '')
         }
 
+        /**
+         * 文件点击
+         */
+        function onFileItemClick(fileItem) {
+            emit('itemClick', fileItem)
+        }
 
         // ==========【返回】=============================================================================================
 
@@ -603,6 +646,8 @@ export default {
             previewImage,
             // 获取文件名称
             getFileName,
+            // 文件点击
+            onFileItemClick,
 
             toPx: $n_px,
         }
@@ -622,22 +667,29 @@ export default {
         // 方块
         &--square {
             display: inline-flex;
-            vertical-align: middle;
             overflow: hidden;
-            border: 1px dashed rgba(var(--n-reverse-color-rgb), 0.2);
             flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            color: rgba(var(--n-reverse-color-rgb), 0.4);
-            border-radius: 4px;
 
-            &:hover {
-                border-color: $primary;
-            }
+            &-button {
+                flex: 1;
+                display: flex;
+                vertical-align: middle;
+                border: 1px dashed rgba(var(--n-reverse-color-rgb), 0.2);
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                color: rgba(var(--n-reverse-color-rgb), 0.4);
+                border-radius: 4px;
+                overflow: hidden;
 
-            // 文字
-            &__text {
-                font-size: 12px;
+                &:hover {
+                    border-color: $primary;
+                }
+
+                // 文字
+                &__text {
+                    font-size: 12px;
+                }
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/utils/config.js

@@ -35,6 +35,8 @@ export const configs = {
     dialogComponents: {},
     // 格式化上传文件 hash
     formatUploadFileHash: null,
+    // 格式化上传网络链接
+    formatUploadNet: null,
     // 获取文件地址
     getFileUrl: null,
 }

package/utils/uploader.js

@@ -25,6 +25,7 @@ import $n_http from '@netang/utils/http'
 import $n_getThrowMessage from '@netang/utils/getThrowMessage'
 import $n_runAsync from '@netang/utils/runAsync'
 
+import $n_$ruleValid from './$ruleValid'
 import $n_toast from './toast'
 import $n_confirm from './confirm'
 import $n_alert from './alert'
@@ -399,38 +400,37 @@ function create(options) {
     /**
      * 上传网络外链文件
      */
-    async function uploadNet() {
+    async function uploadNet(submitUploadNet = false) {
 
         // 如果提交时禁止上传网络外链文件
-        if ($n_get(optionsProps, 'submitUploadNet') !== true) {
-            return
-        }
+        if (submitUploadNet === true || $n_get(optionsProps, 'submitUploadNet') === true) {
 
-        const promises = []
+            const promises = []
 
-        for (const fileItem of uploadFileLists.value) {
-            if (
-                fileItem.isNet
-                && fileItem.status === UPLOAD_STATUS.waiting
-            ) {
-                // 设置网络图片 file
-                promises.push(setNetFile(fileItem))
+            for (const fileItem of uploadFileLists.value) {
+                if (
+                    fileItem.isNet
+                    && fileItem.status === UPLOAD_STATUS.waiting
+                ) {
+                    // 设置网络图片 file
+                    promises.push(setNetFile(fileItem))
+                }
             }
-        }
 
-        if (! promises.length) {
-            return
-        }
-        await Promise.all(promises)
+            if (! promises.length) {
+                return
+            }
+            await Promise.all(promises)
 
-        // 检查待上传文件在服务器上是否存在
-        // --------------------------------------------------
-        if (! await checkWaitUploadFileExists()) {
-            return
-        }
+            // 检查待上传文件在服务器上是否存在
+            // --------------------------------------------------
+            if (! await checkWaitUploadFileExists()) {
+                return
+            }
 
-        // 上传
-        await upload()
+            // 上传
+            await upload()
+        }
     }
 
     /**
@@ -604,6 +604,141 @@ function create(options) {
         fileRef.value.click()
     }
 
+    /**
+     * 选择网络外链上传
+     */
+    function chooseUploadNet() {
+        $q.dialog({
+            title: `添加网络${FilE_NAME[FilE_TYPE[props.type]]}`,
+            style: 'min-width:600px;',
+            // message: `添加网络${FilE_NAME[FilE_TYPE[props.type]]}`,
+            prompt: {
+                model: '',
+                isValid: $n_$ruleValid('required'),
+                type: 'textarea',
+                placeholder: '多个链接，使用中英文逗号、空格、换行隔开',
+                outlined: true,
+            },
+            cancel: true,
+            persistent: true,
+        })
+            .onOk(async function(value) {
+
+                let files = $n_isValidString(value)
+                    ? $n_uniq($n_split(value.replace(/\n|,|，/g, ','), ','))
+                        .map(e => $n_trimString(e))
+                        .filter(
+                            val => val && /^(http(s)?:\/\/)/i.test(val)
+                        )
+                    : []
+
+                if (! files.length) {
+                    // 轻提示
+                    $n_toast({
+                        message: '请输入正确的链接'
+                    })
+                    return
+                }
+
+                // 格式化上传网络链接
+                // --------------------------------------------------
+                const {
+                    formatUploadNet,
+                } = configs
+                if ($n_isFunction(formatUploadNet)) {
+                    files = formatUploadNet(files, props.type === 'image')
+                }
+                // --------------------------------------------------
+
+                if (! $n_isValidArray(files)) {
+                    // 轻提示
+                    $n_toast({
+                        message: '请输入正确的链接'
+                    })
+                    return
+                }
+
+                // 添加上传网络外链至文件列表
+                function addFileNetItem(hash) {
+                    uploadFileLists.value.push(Object.assign(createRawFileItem(), {
+                        // id
+                        id: ++_fileNum,
+                        // 文件唯一 key
+                        key: hash,
+                        // hash
+                        hash,
+                        // 将文件状态修改为: 等待上传中
+                        status: UPLOAD_STATUS.waiting,
+                        // 进度
+                        progress: 100,
+                        // 信息
+                        msg: '',
+
+                        __img: hash,
+                        isNet: true,
+                        isNetUploaded: false,
+                    }))
+                }
+
+                // 遍历选择的文件列表
+                for (const file of files) {
+
+                    // 如果只能上传一个
+                    if (props.count === 1) {
+
+                        // 如果有上传文件列表
+                        if (uploadFileLists.value.length) {
+
+                            // 如果开启单文件上传提示
+                            if (props.confirm) {
+
+                                // 确认框
+                                $n_confirm({
+                                    message: '最多只能上传1个文件，确认上传并替换吗？',
+                                })
+                                    // 点击确认执行
+                                    .onOk(function () {
+
+                                        // 删除所有文件
+                                        deleteAll()
+
+                                        // 添加上传网络外链至文件列表
+                                        addFileNetItem(file)
+
+                                        // 上传网络外链文件
+                                        uploadNet(true)
+                                            .finally()
+                                    })
+                                return
+                            }
+
+                            // 删除所有文件
+                            deleteAll()
+                        }
+
+                    } else if (
+                        // 如果有上传数量限制
+                        props.count > 1
+                        // 上传文件列表数量 === 上传数量限制
+                        && uploadFileLists.value.length >= props.count
+                    ) {
+                        // 轻提示
+                        $n_toast({
+                            message: `最多只能上传${props.count}个文件，请先删除后再上传`,
+                        })
+                        return
+                    }
+
+                    // 添加上传网络外链至文件列表
+                    addFileNetItem(file)
+                }
+
+                // 上传网络外链文件
+                uploadNet(true)
+                    .finally()
+            })
+    }
+
     /**
      * 文件输入框更新
      */
@@ -1460,6 +1595,8 @@ function create(options) {
         checkUploading,
         // 选择文件上传
         chooseUpload,
+        // 选择网络外链上传
+        chooseUploadNet,
         // 文件输入框更新
         fileChange,
         // 删除所有文件