editor

src/components/cu-editor.vue

@@ -0,0 +1,61 @@
+<template>
+    <u-modal
+        :show="show"
+        showCancelButton
+        @confirm="confirm"
+        @cancel="close"
+    >
+        <editor id="editor" :placeholder="placeholder" @ready="onEditorReady" />
+    </u-modal>
+</template>
+
+<script>
+export default {
+    name: 'CuEditor',
+    props: {
+        placeholder: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            value: '',
+            show: false,
+            editor: ''
+        }
+    },
+    methods: {
+        onEditorReady() {
+            uni.createSelectorQuery().in(this).select('#editor').context((res) => {
+                this.editor = res.context
+                if (this.value) {
+                    this.editor.setContents({ html: this.value })
+                }
+            }).exec()
+        },
+        open(value) {
+            this.value = value
+            this.show = true
+        },
+        close() {
+            this.show = false
+        },
+        confirm() {
+            if (this.editor) {
+                this.editor.getContents({
+                    success: (res) => {
+                        this.$emit('confirm', res)
+                        this.close()
+                    }
+                })
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+    #editor {
+        height: 50vh;
+    }
+</style>

src/pages/patient/detail.vue

@@ -53,11 +53,14 @@
             />
             <u-cell
                 title="病情描述"
-                :label="info.illness"
                 isLink
                 rightIcon="edit-pen"
-                @click="openModal('病情描述', 'illness', 'textarea')"
-            />
+                @click="openEditor"
+            >
+                <view slot="label">
+                    <rich-text :nodes="info.illness" />
+                </view>
+            </u-cell>
             <u-cell
                 title="录入时间"
                 :value="info.created_at"
@@ -78,8 +81,7 @@
             @cancel="closeModal"
             @close="closeModal"
         >
-            <u--input v-if="modal.type == 'text'" v-model="modal.value" border="surround" />
-            <u--textarea v-if="modal.type == 'textarea'" v-model="modal.value" :showConfirmBar="false" />
+            <u--input v-model="modal.value" border="surround" />
         </u-modal>
         <u-action-sheet
             title="性别"
@@ -100,15 +102,17 @@
             @confirm="selectBirthday"
         />
         <select-admin-user ref="select-admin-user" @select="selectDoctor" />
+        <cu-editor ref="editor" placeholder="请输入病情描述" @confirm="confirmEditor" />
     </view>
 </template>
 
 <script>
 import gender from '../../enums/gender'
 import SelectAdminUser from '../../components/select-admin-user'
+import CuEditor from '../../components/cu-editor'
 
 export default {
-    components: {SelectAdminUser},
+    components: {SelectAdminUser, CuEditor},
     data() {
         return {
             id: '',
@@ -152,8 +156,7 @@ export default {
                 }
             })
         },
-        openModal(title, name, type) {
-            this.modal.type = type ? type : 'text'
+        openModal(title, name) {
             this.modal.title = title
             this.modal.key = name
             this.modal.show = true
@@ -174,6 +177,16 @@ export default {
         closeModal() {
             this.modal.show = false
         },
+        openEditor() {
+            this.$refs['editor'].open(this.info.illness)
+        },
+        confirmEditor(e) {
+            this.$ajax.put(`/admin-api/patient/${this.id}`, { id: this.id, illness: e.html }).then(res => {
+                if (res.status == 0) {
+                    this.info.illness = e.html
+                }
+            })
+        },
         toggleGender() {
             this.genderSheet.show = !this.genderSheet.show
         },

src/pages/patient/form.vue

@@ -37,8 +37,12 @@
                     <u-icon name="arrow-right" />
                 </view>
             </u-form-item>
-            <u-form-item prop="illness">
-                <u--textarea v-model="form.illness" :showConfirmBar="false" placeholder="请输入病情描述" />
+            <u-form-item label="病情描述" prop="illness" @click="openEditor">
+                <view class="input-text">
+                    <rich-text v-if="form.illness" :nodes="form.illness" />
+                    <text v-else class="input-placeholder">点击填写病情描述</text>
+                    <u-icon name="arrow-right" />
+                </view>
             </u-form-item>
             <view class="button">
                 <u-button text="提交" type="primary" @click="submit"></u-button>
@@ -62,15 +66,17 @@
             @close="toggleGender"
             @select="selectGender"
         />
+        <cu-editor ref="editor" placeholder="请输入病情描述" @confirm="confirmEditor" />
     </view>
 </template>
 
 <script>
 import gender from '../../enums/gender'
 import SelectAdminUser from '../../components/select-admin-user'
+import CuEditor from '../../components/cu-editor'
 
 export default {
-    components: {SelectAdminUser},
+    components: {SelectAdminUser, CuEditor},
     data() {
         return {
             id: '',
@@ -175,6 +181,12 @@ export default {
             }
             this.closeDoctor()
         },
+        openEditor() {
+            this.$refs['editor'].open(this.form.illness)
+        },
+        confirmEditor(e) {
+            this.form.illness = e.html
+        },
         submit() {
             this.$refs['form'].validate().then(res => {
                 uni.showLoading()