From e3e3b23a4e38472239c4d531d86ad6faabbd4a9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Mon, 21 Mar 2022 15:24:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +
 src/api/file.js                               |  10 ++
 src/components/ElEditor.vue                   | 165 ++++++++++++++++++
 src/components/TableList.vue                  |  11 +-
 .../{SortableTable.vue => extra/ElTable.vue}  |   0
 src/router/index.js                           |   2 +-
 src/views/demo/sortableTableDemo.vue          |  10 +-
 src/views/home/index.vue                      |   1 +
 vite.config.ts                                |   4 +-
 9 files changed, 193 insertions(+), 12 deletions(-)
 create mode 100644 src/api/file.js
 create mode 100644 src/components/ElEditor.vue
 rename src/components/{SortableTable.vue => extra/ElTable.vue} (100%)

diff --git a/package.json b/package.json
index 17219c4..b398134 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
+    "@vueup/vue-quill": "^1.0.0-beta.8",
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",
     "element-plus": "^2.1.2",
     "lodash": "^4.17.21",
     "qs": "^6.10.3",
+    "quill-image-uploader": "^1.2.2",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
diff --git a/src/api/file.js b/src/api/file.js
new file mode 100644
index 0000000..461be98
--- /dev/null
+++ b/src/api/file.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 上传文件
+export function upload(data) {
+    return request({
+        url: '/ks-admin/local/upload/file',
+        method: 'POST',
+        data,
+    });
+}
diff --git a/src/components/ElEditor.vue b/src/components/ElEditor.vue
new file mode 100644
index 0000000..19ceda2
--- /dev/null
+++ b/src/components/ElEditor.vue
@@ -0,0 +1,165 @@
+<template>
+    <component :is="render"></component>
+</template>
+<script lang="jsx">
+    export default defineComponent({
+        inheritAttrs: false,
+    });
+</script>
+<script setup lang="jsx">
+    import { upload } from '@/api/file';
+    import { Quill, QuillEditor } from '@vueup/vue-quill';
+    import '@vueup/vue-quill/dist/vue-quill.snow.css';
+    import ImageUploader from 'quill-image-uploader';
+    Quill.register('modules/imageUploader', ImageUploader);
+
+    const props = defineProps({
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        preview: {
+            type: [Boolean, String],
+            default: 'app',
+        },
+    });
+    const attrs = useAttrs();
+    const emits = defineEmits(['update:modelValue', 'change']);
+    const editor = ref(null);
+    const options = {
+        bounds: '.el-editor',
+        debug: 'warn',
+        modules: {
+            toolbar: [
+                ['bold', 'italic', 'underline', 'strike'],
+                ['blockquote', 'code-block'],
+                ['link', 'image'],
+                [{ header: 1 }, { header: 2 }],
+                [{ list: 'ordered' }, { list: 'bullet' }],
+                [{ script: 'sub' }, { script: 'super' }],
+                [{ indent: '-1' }, { indent: '+1' }],
+                [{ direction: 'rtl' }],
+                [{ size: ['small', false, 'large', 'huge'] }],
+                [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                [{ color: [] }, { background: [] }],
+                [{ font: [] }],
+                [{ align: [] }],
+                ['clean'],
+            ],
+            imageUploader: {
+                upload: (file) => {
+                    return new Promise(async (resolve, reject) => {
+                        const formdata = new FormData();
+                        formdata.append('file', file);
+                        const url = await upload(formdata);
+                        if (url) {
+                            resolve(url);
+                        } else {
+                            reject('上传失败');
+                        }
+                    });
+                },
+            },
+        },
+        placeholder: '请输入内容...',
+        readOnly: props.readonly,
+        theme: 'snow',
+    };
+    const content = ref(null);
+    watch(
+        () => content,
+        (value, old) => {
+            emits('update:modelValue', unref(value));
+            emits('change', unref(value), unref(old));
+        },
+        { deep: true }
+    );
+    const handleReady = (e) => {
+        unref(editor).setHTML(attrs.modelValue || '');
+    };
+    const handleUpdateContent = (value) => {
+        content.value = unref(editor).getHTML();
+    };
+
+    const preview = ref(props.preview === false ? false : typeof props.preview === 'string' ? props.preview : 'app');
+    const handlePreview = (mode) => {
+        preview.value = mode;
+    };
+
+    const render = () => (
+        <div class="el-editor">
+            <div class="editor">
+                <QuillEditor
+                    ref={editor}
+                    options={options}
+                    {...attrs}
+                    content={unref(content)}
+                    on={{
+                        'update:content': handleUpdateContent,
+                        ready: handleReady,
+                    }}
+                />
+            </div>
+            {unref(preview) ? (
+                <div class={{ preview: true, ['--' + unref(preview)]: true, 'ql-snow': true }}>
+                    <h3 class="header">
+                        <div
+                            class={{ btn: true, active: unref(preview) === 'app' }}
+                            onClick={() => handlePreview('app')}
+                        >
+                            APP预览
+                        </div>
+                        <div class={{ btn: true, active: unref(preview) === 'pc' }} onClick={() => handlePreview('pc')}>
+                            PC预览
+                        </div>
+                    </h3>
+                    <div class="content ql-editor" v-html={unref(content)}></div>
+                </div>
+            ) : (
+                ''
+            )}
+        </div>
+    );
+</script>
+
+<style lang="less" scoped>
+    .el-editor {
+        width: 100%;
+        height: 480px;
+        display: flex;
+        :deep(.editor) {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+        }
+        :deep(.preview) {
+            height: 100%;
+            margin-left: 20px;
+            border: 1px solid #d1d5db;
+            &.--app {
+                width: 320px;
+            }
+            &.--pc {
+                width: 640px;
+            }
+            .header {
+                padding: 10px;
+                border-bottom: 1px solid #d1d5db;
+                display: flex;
+                .btn {
+                    color: #d1d5db;
+                    cursor: pointer;
+                    &.active {
+                        color: #000;
+                    }
+                    + .btn {
+                        margin-left: 10px;
+                    }
+                }
+            }
+            .content {
+                padding: 10px;
+            }
+        }
+    }
+</style>
diff --git a/src/components/TableList.vue b/src/components/TableList.vue
index 64ca686..6a9c04f 100644
--- a/src/components/TableList.vue
+++ b/src/components/TableList.vue
@@ -2,9 +2,8 @@
     <component :is="render" />
 </template>
 <script setup lang="jsx">
-    import SortableTable from './SortableTable.vue';
-    import { ElTable, ElTableColumn } from 'element-plus/es/components/table/index';
-    import 'element-plus/es/components/table/style/css';
+    import ElTable from './extra/ElTable.vue';
+    import { ElTableColumn } from 'element-plus/es/components/table/index';
     const props = defineProps({
         code: {
             type: String,
@@ -321,7 +320,6 @@
         doLayout,
         sort,
     });
-    const Component = props.sortable ? SortableTable : ElTable;
     const render = () => (
         <div class="common-list">
             {slots.search ? <div class="search-box">{slots.search()}</div> : ''}
@@ -516,8 +514,9 @@
                 </ElDialog>
             </div>
             <div class="content-box">
-                <Component
+                <ElTable
                     ref={refTable}
+                    sortable={props.sortable}
                     border
                     stripe
                     highlightCurrentRow={false}
@@ -549,7 +548,7 @@
                             ''
                         )
                     )}
-                </Component>
+                </ElTable>
             </div>
             <div class="pagination-box">
                 {props.config.page === false ? (
diff --git a/src/components/SortableTable.vue b/src/components/extra/ElTable.vue
similarity index 100%
rename from src/components/SortableTable.vue
rename to src/components/extra/ElTable.vue
diff --git a/src/router/index.js b/src/router/index.js
index 2cba8e1..40941e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,7 +69,7 @@ import config from '@/configs';
 
 const router = createRouter({
     history: createWebHistory(),
-    routes: config.useLocalRouter ? routes : [],
+    routes: config.useLocalRouter ? routes : globalRoutes,
 });
 
 import store from '@/store';
diff --git a/src/views/demo/sortableTableDemo.vue b/src/views/demo/sortableTableDemo.vue
index 693e2c4..aa56505 100644
--- a/src/views/demo/sortableTableDemo.vue
+++ b/src/views/demo/sortableTableDemo.vue
@@ -11,8 +11,9 @@
         </ul>
         <p>{{ list.map((item) => item.id) }}</p>
         <p>{{ list.find((item) => item.id === '1').childList.map((item) => item.id) }}</p>
-        <SortableTable
+        <ElTable
             v-loading="listLoading"
+            sortable
             border
             code="parent"
             :data="list"
@@ -25,8 +26,9 @@
         >
             <el-table-column label="展开" type="expand" width="60">
                 <template #default="{ row }">
-                    <SortableTable
+                    <ElTable
                         v-loading="listLoading"
+                        sortable
                         border
                         code="child"
                         :data="row.childList || []"
@@ -47,7 +49,7 @@
                         <template #empty>
                             <el-empty class="vab-data-empty" description="暂无数据" />
                         </template>
-                    </SortableTable>
+                    </ElTable>
                 </template>
             </el-table-column>
             <el-table-column align="center" label="排序" prop="sort" width="60" />
@@ -60,7 +62,7 @@
             <template #empty>
                 <el-empty class="vab-data-empty" description="暂无数据" />
             </template>
-        </SortableTable>
+        </ElTable>
     </div>
 </template>
 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ac36386..852d0c6 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -15,6 +15,7 @@
         <el-date-picker></el-date-picker>
         {{ form }}
         <el-input v-model="form.msg" />
+        <el-editor preview="pc" v-model="form.msg"></el-editor>
     </div>
 </template>
 
diff --git a/vite.config.ts b/vite.config.ts
index 93095b0..1ccc096 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,7 +44,9 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
         },
         plugins: [
             vue(),
-            vueJsx(),
+            vueJsx({
+                transformOn: true,
+            }),
             createSvgIconsPlugin({
                 iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
                 symbolId: 'icon-[dir]-[name]',