购买原因用了wangeditor富文本框

package-lock.json

@@ -1233,7 +1233,6 @@
       "version": "7.15.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
       "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -1241,8 +1240,7 @@
         "regenerator-runtime": {
           "version": "0.13.9",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-          "dev": true
         }
       }
     },
@@ -1264,6 +1262,22 @@
         }
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.26.0.tgz",
+      "integrity": "sha512-YXHu5lN8kJCb1LOb9PgV6pvak43X2h4HvRApcN5SdWeaItQOzfn1hgP6jasD6KWQyJDBxrVmA9o9OivlnNJK/w==",
+      "requires": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
@@ -4855,6 +4869,11 @@
         }
       }
     },
+    "core-js-pure": {
+      "version": "3.39.0",
+      "resolved": "https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.39.0.tgz",
+      "integrity": "sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -17394,6 +17413,11 @@
         }
       }
     },
+    "tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -17973,6 +17997,16 @@
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
+    "wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -39,7 +39,8 @@
     "vue-axios": "^3.3.7",
     "vue-i18n": "^8.1.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.4",

src/views/modules/sys/stock/purchaseinfo-add-or-update.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeDialog">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
       <el-form-item label="股票代码" prop="stockCode">
           <el-input v-model="dataForm.stockCode" placeholder="股票代码"></el-input>
       </el-form-item>
@@ -44,7 +44,8 @@
           </el-select>
         </el-form-item>
           <el-form-item label="购买原因" prop="purchaseReason">
-          <el-input type="textarea" v-model="dataForm.purchaseReason" placeholder="购买原因"></el-input>
+          <div id="editor"></div>
+          <!-- <el-input type="textarea" v-model="dataForm.purchaseReason" placeholder="购买原因"></el-input> -->
       </el-form-item>
       </el-form>
     <template slot="footer">
@@ -58,6 +59,7 @@
 import debounce from 'lodash/debounce'
 import dict from '../../utils/dict'
 import moment from 'moment'
+import E from 'wangeditor'
 
 export default {
   data () {
@@ -66,6 +68,7 @@ export default {
       purchase_type_list: [],
       fundamental_analysis_list: [],
       capital_account_list: [],
+      editor: null,
       // 数据字典列表数组
       dataForm: {
         id: '',
@@ -117,8 +120,14 @@ export default {
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
+        // alert(this.dataForm.id)
         if (this.dataForm.id) {
           this.getInfo()
+        } else {
+          this.$nextTick(() => {
+            this.editor = new E('#editor')
+            this.editor.create()
+          })
         }
       })
     },
@@ -132,10 +141,18 @@ export default {
           ...this.dataForm,
           ...res.data
         }
+        this.$nextTick(() => {
+          this.editor = new E('#editor')
+          this.editor.create()
+          this.editor.txt.html(res.data.purchaseReason)
+        })
       }).catch(() => {})
     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
+      // 获得编辑框的内容
+      let content = this.editor.txt.html()
+      this.dataForm.purchaseReason = content
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return false
@@ -172,6 +189,11 @@ export default {
           this.capital_account_list = response.data.data
         }
       })
+    },
+    // 销毁编辑器
+    closeDialog () {
+      this.editor.destroy()
+      this.editor = null
     }
   }
 }

src/views/modules/sys/stock/purchaseinfo.vue

@@ -34,12 +34,16 @@
         <el-table-column prop="stockCode" label="股票代码" header-align="center" align="center" width="130"></el-table-column>
         <el-table-column prop="stockName" label="股票名称" header-align="center" align="center" width="130"></el-table-column>
         <el-table-column prop="purchaseDate" label="购买时间" header-align="center" align="center" width="180"></el-table-column>
-        <el-table-column prop="vcpPeriod" label="VCP周期" header-align="center" align="center" width="300"></el-table-column>
+        <el-table-column prop="vcpPeriod" label="VCP周期" header-align="center" align="center" width="600"></el-table-column>
-        <el-table-column prop="purchaseType" label="购买类型" header-align="center" align="center" width="130"></el-table-column>
+        <el-table-column prop="purchaseType" label="购买类型" header-align="center" align="center" width="230"></el-table-column>
         <el-table-column prop="fundamentalAnalysis" label="基本面分析" header-align="center" align="center" width="110px"></el-table-column>
         <el-table-column prop="capitalAccountName" label="资金账户名称" header-align="center" align="center" width="130"></el-table-column>
         <el-table-column prop="capitalAccount" label="资金账户" header-align="center" align="center" width="130" v-if="false"></el-table-column>
-        <el-table-column prop="purchaseReason" label="购买原因" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="purchaseReason" label="购买原因" header-align="center" align="center">
+          <template v-slot="scope">
+            <el-button @click="showPurchaseReason(scope.row.purchaseReason)" type="text">显示内容</el-button>
+          </template>
+        </el-table-column>
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="180">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.purchaseInfoId)">{{ $t('update') }}</el-button>
@@ -63,6 +67,19 @@
       <!-- <SentimentIndex v-if="sentimentIndexVisible" ref="sentimentIndex"></SentimentIndex> -->
       <!-- <el-button type="primary" @click="desHander()">销毁实例</el-button> -->
     </div>
+    <div>
+      <el-dialog
+          title="购买原因"
+          :visible.sync="detailVisible"
+          width="50%">
+          <div class="w-e-text">
+            <div v-html="purchaseReason" style="min-height:100px; font-size: 15px"></div>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" size="mini" @click="detailVisible = false">确 定</el-button>
+            </div>
+          </div>
+      </el-dialog>
+    </div>
   </el-card>
 </template>
 
@@ -85,12 +102,12 @@ export default {
         deleteIsBatch: true,
         deleteIsBatchKey: 'purchaseInfoId' // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
       },
-      close_position_list: [],
       stock_code_name_map: [],
       dataForm: {
         purchaseInfoId: ''
       },
-      purchaseDetailsVisible: false
+      purchaseDetailsVisible: false,
+      detailVisible: false
       // sentimentIndexVisible: false,
     }
   },
@@ -142,6 +159,10 @@ export default {
         this.stock_code_name_map = res.data
       }).catch(() => {})
     },
+    showPurchaseReason (purchaseReason) {
+      this.purchaseReason = purchaseReason
+      this.detailVisible = true
+    },
     // 销毁实例
     desHander () {
       var myChart = echarts.init(document.getElementById('main'))