富文本回显

src/views/order/Detail.vue

@@ -130,7 +130,9 @@
             <span>{{ record.buyer_remark ? record.buyer_remark : '-' }}</span>
           </a-descriptions-item>
           <a-descriptions-item label="商家备注">
-            <span>{{ record.merchant_remark ? record.merchant_remark : '-' }}</span>
+            <!-- <div v-html="record.merchant_remark" v-if="record.merchant_remark"></div> -->
+            <!-- <Ueditor v-if="record.merchant_remark" v-decorator="['record.merchant_remark']" /> -->
+            <span style="color: #d6893b;cursor: pointer;" @click="handleMerchantRemark">查看备注</span>
           </a-descriptions-item>
           <a-descriptions-item v-if="record.trade" label="第三方支付订单号">
             <span>{{ record.trade ? record.trade.out_trade_no : '-' }}</span>
@@ -374,6 +376,7 @@ import { inArray } from '@/utils/util'
 import * as Api from '@/api/order'
 import { GoodsItem, UserItem } from '@/components/Table'
 import { DeliveryForm, ExtractForm, CancelForm, PrinterForm, PriceForm, RemarkForm } from './modules'
+import { Ueditor} from '@/components'
 import {
   OrderTypeEnum,
   DeliveryStatusEnum,
@@ -429,6 +432,7 @@ export default {
     PrinterForm,
     PriceForm,
     RemarkForm,
+    Ueditor
   },
   data() {
     return {

src/views/order/modules/RemarkForm.vue

@@ -17,7 +17,7 @@
           :wrapperCol="wrapperCol"
           extra="商家备注内容仅后台可见，用户端不可见"
         >
-              <Ueditor v-decorator="['content']" />
+          <Ueditor v-decorator="['content']" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -30,9 +30,9 @@ import * as Api from '@/api/order/event'
 import { Ueditor } from '@/components'
 export default {
   components: {
-    Ueditor
+    Ueditor,
   },
-  data () {
+  data() {
     return {
       // 对话框标题
       title: '商家备注',
@@ -47,15 +47,13 @@ export default {
       // 当前表单元素
       form: this.$form.createForm(this),
       // 当前记录
-      record: {}
+      record: {},
     }
   },
-  created () {
+  created() {},
-  },
   methods: {
-
     // 显示对话框
-    show (record) {
+    show(record) {
       // 显示窗口
       this.visible = true
       // 当前记录
@@ -65,18 +63,24 @@ export default {
     },
 
     // 设置默认值
-    setFieldsValue () {
+    setFieldsValue() {
-      const { record, $nextTick, form: { setFieldsValue } } = this
+      const {
+        record,
+        $nextTick,
+        form: { setFieldsValue },
+      } = this
       $nextTick(() => {
         setFieldsValue({ content: record.merchant_remark })
       })
     },
 
     // 确认按钮
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       // 表单验证
-      const { form: { validateFields } } = this
+      const {
+        form: { validateFields },
+      } = this
       validateFields((errors, values) => {
         // 提交到后端api
         !errors && this.onFormSubmit(values)
@@ -84,16 +88,16 @@ export default {
     },
 
     // 关闭对话框事件
-    handleCancel () {
+    handleCancel() {
       this.visible = false
       this.form.resetFields()
     },
 
     // 提交到后端api
-    onFormSubmit (values) {
+    onFormSubmit(values) {
       this.isLoading = true
       Api.updateRemark({ orderId: this.record.order_id, form: values })
-        .then(result => {
+        .then((result) => {
           // 显示成功
           this.$message.success(result.message, 1.5)
           // 关闭对话框事件
@@ -101,9 +105,8 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
-    }
+    },
-
+  },
-  }
 }
 </script>