优化编辑器

2025-04-27 10:40:01 +08:00 · 2025-04-27 10:40:01 +08:00 · 91c0892850
commit 91c0892850
parent 4f254348b8
3 changed files with 91 additions and 25 deletions
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@ -24,13 +24,16 @@ import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import { getToken } from "@/utils/auth";
 import axios from 'axios';
+import { getQiniuToken } from '@/api/common'
+import { getFileNameWithTime } from '@/utils'
+import { Delta } from 'quill';

 // 自定义图片处理模块
 class ImageHandler {
  constructor(quill) {
    this.quill = quill;
    this.handlePaste = this.handlePaste.bind(this);
-    this.quill.root.addEventListener('paste', this.handlePaste);
+    this.quill.root.addEventListener('paste', this.handlePaste, true);
  }

  handlePaste(e) {
@ -42,13 +45,13 @@ class ImageHandler {
      if (items[i].type.indexOf('image') !== -1) {
        // 阻止默认粘贴行为
        e.preventDefault();
+        e.stopPropagation();
+        
        // 保存当前光标位置
        const range = this.quill.getSelection(true);
-        if (!range) return;
-
-        // 阻止Quill默认的粘贴处理
-        const currentHtml = this.quill.root.innerHTML;
-        this.quill.root.innerHTML = currentHtml;
+        if (!range) {
+          return;
+        }

        const file = items[i].getAsFile();
        this.upload(file, range, this);
@ -61,9 +64,20 @@ class ImageHandler {
    if (!range) {
      return;
    }
+    // 本地上传
+    if (vue.host === 'local') {
+      this.uploadLocal(file, range);
+    } 
+    // 七牛云上传
+    else {
+      this.uploadQiniu(file, range);
+    }
+  }
+  // 本地上传
+  uploadLocal(file, range) {
+    console.log("本地上传", file);
    const formData = new FormData();
    formData.append('file', file);
-
    axios.post(process.env.VUE_APP_BASE_API + "/common/upload", formData, {
      headers: {
        Authorization: "Bearer " + getToken(),
@ -72,10 +86,7 @@ class ImageHandler {
    }).then(response => {
      const res = response.data;
      if (res.code === 200) {
-        // 插入上传后的图片到光标位置
-        this.quill.insertEmbed(range.index, 'image', res.url);
-        // 将光标移动到图片后面
-        this.quill.setSelection(range.index + 1);
+        this.handleUploadSuccess(res.url, range);
      } else {
        this.$message.error('图片上传失败');
      }
@ -83,6 +94,37 @@ class ImageHandler {
      this.$message.error('图片上传失败');
    });
  }
+  // 七牛云上传
+  uploadQiniu(file, range) {
+    console.log("七牛云上传", file);
+    getQiniuToken().then(tokenRes => {
+      if (tokenRes.code === 200) {
+        const formData = new FormData();
+        let key = getFileNameWithTime(file.name);
+        let token = tokenRes.data;
+        
+        formData.append('file', file);
+        formData.append('key', key);
+        formData.append('token', token);
+        axios.post("https://up-z2.qiniup.com", formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        }).then(response => {
+          const res = response.data;
+          let url = process.env.VUE_APP_QINIU_DOMAIN + '/' + res.key;
+          this.handleUploadSuccess(url, range);
+        });
+
+      }
+    })
+  }
+  handleUploadSuccess(url, range) {    
+    // 插入上传后的图片到光标位置
+    this.quill.insertEmbed(range.index, 'image', url);
+    // 将光标移动到图片后面
+    this.quill.setSelection(range.index + 1);
+  }
 }

 // 注册自定义模块
@ -120,6 +162,11 @@ export default {
    type: {
      type: String,
      default: "url",
+    },
+    // 上传host，qiniu-七牛云，local-本地
+    host: {
+      type: String,
+      default: 'qiniu'
    }
  },
  data() {
@ -148,8 +195,15 @@ export default {
            ["link", "image", "video"]
          ],
          clipboard: {
-            matchVisual: false,
-            matchers: []
+            matchVisual: false, 
+            // 禁用默认的粘贴格式化
+            matchers: [],
+            // 自定义粘贴处理
+            customMatchers: [
+              ['img', (node, delta) => {
+                return new Delta();
+              }]
+            ]
          },
          imageHandler: true
        },
--- a/src/views/bst/realName/index.vue
+++ b/src/views/bst/realName/index.vue
@ -69,6 +69,9 @@
            <template v-else-if="column.key === 'status'">
              <dict-tag :options="dict.type.real_name_status" :value="d.row[column.key]" />
            </template>
+            <template v-else-if="column.key === 'type'">
+              <dict-tag :options="dict.type.real_name_type" :value="d.row[column.key]" />
+            </template>
            <template v-else-if="column.key === 'userName'">
              <user-link :id="d.row.userId" :text="d.row.userName" />
            </template>
@ -80,13 +83,6 @@
      </template>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-has-permi="['bst:realName:edit']"
-          >修改</el-button>
          <el-button
            size="mini"
            type="text"
@ -124,8 +120,14 @@ const defaultSort = {
 export default {
  name: "RealName",
  mixins: [$showColumns],
+  dicts: ['real_name_status', 'real_name_type'],
  components: {FormCol, UserLink},
-  dicts: ['real_name_status'],
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
  data() {
    return {
      span: 24,
@ -134,10 +136,12 @@ export default {
        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
        {key: 'userName', visible: true, label: '姓名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'idCard', visible: true, label: '身份证', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'mobile', visible: true, label: '手机号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'picture', visible: true, label: '人脸图像', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'score', visible: true, label: '对比分数', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'mobile', visible: true, label: '手机号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {key: 'result', visible: true, label: '结果', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
      ],
      // 排序方式
@ -191,6 +195,7 @@ export default {
    };
  },
  created() {
+    Object.assign(this.queryParams, this.query);
    this.getList();
  },
  methods: {
--- a/src/views/system/user/view/view.vue
+++ b/src/views/system/user/view/view.vue
@ -21,7 +21,8 @@
              {{ detail.point | fix2 | dv }} %
             </line-field>
            <line-field label="实名认证">
-              <boolean-tag :value="detail.isReal" size="small"/>
+              <boolean-tag :value="detail.isReal" size="mini" true-text="已认证" false-text="未认证"/>
+              {{ detail.realName | dv}}
             </line-field>
            <line-field label="所属代理" :value="detail.agentName" />
            <line-field label="最后登录IP" :value="detail.loginIp" />
@ -75,6 +76,9 @@
        <el-tab-pane label="账变记录" lazy v-if="checkPermi(['bst:balanceLog:list'])">
          <balance-log :query="{userId: detail.userId}" />
        </el-tab-pane>
+        <el-tab-pane label="实名认证" lazy v-if="checkPermi(['bst:realName:list'])">
+          <real-name :query="{userId: detail.userId}" />
+        </el-tab-pane>
        <el-tab-pane label="收款账户" lazy v-if="checkPermi(['bst:account:list'])">
          <account :query="{userId: detail.userId}" />
        </el-tab-pane>
@ -107,6 +111,8 @@ import Account from '@/views/bst/account/index.vue'
 import Model from '@/views/bst/model/index.vue'
 import OrderDevice from '@/views/bst/orderDevice/index.vue'
 import Withdraw from '@/views/bst/withdraw/index.vue'
+import RealName from '@/views/bst/realName/index.vue'
+
 export default {
  name: 'UserView',
  components: {
@ -126,7 +132,8 @@ export default {
    Account,
    Model,
    OrderDevice,
-    Withdraw
+    Withdraw,
+    RealName
  },
  data() {
    return {