gitopn 保函文本

package.json

@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.27.0",
+    "quill": "^1.3.7",
     "vue": "^2.6.11",
     "vue-draggable-resizable": "^2.2.0",
     "vue-i18n": "^8.26.7",
@@ -41,4 +42,4 @@
     "script-ext-html-webpack-plugin": "2.1.3",
     "vue-template-compiler": "^2.6.11"
   }
-}
\ No newline at end of file
+}

src/components/FunctionBtn.vue

@@ -5,7 +5,7 @@
 <template>
   <div class="m-Btn-eContainer" v-if="!buttonHide && ((!isReview && !funcBtnHide) || showSetBtn)">
     <div class="m-funcBtn-eContainer" v-if="!isReview && !buttonHide && !funcBtnHide">
-      <el-button v-if="1==0" type="primary" v-show="root.judgeVisiableInfo('mtabut.usrcon')" size="small" @click="confirm" :loading="$store.state.Status.loading.confirm">{{ $t('buttons.confirm') }}</el-button>
+      <el-button type="primary" v-show="root.judgeVisiableInfo('mtabut.usrcon')" size="small" @click="confirm" :loading="$store.state.Status.loading.confirm">{{ $t('buttons.confirm') }}</el-button>
       <el-button type="primary" v-show="root.judgeVisiableInfo('mtabut.sav')" size="small" @click="start" :loading="$store.state.Status.loading.submit">{{ $t('buttons.submit') }}</el-button>
       <el-button size="small" v-show="root.judgeVisiableInfo('mtabut.chk')" @click="check" :loading="$store.state.Status.loading.check">{{ $t('buttons.check') }}</el-button>
       <el-button size="small" @click="save" :loading="$store.state.Status.loading.stash">{{ $t('buttons.stash') }}</el-button>

src/components/RichTextEditor.vue

+<template>
+  <div class="quill-editor">
+    <div ref="editor"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+
+const defaultOptions = {
+  theme: "snow",
+  boundary: document.body,
+  modules: {
+    toolbar: [
+      ["bold", "italic", "underline", "strike"],
+      ["blockquote", "code-block"],
+      // [{ 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"],
+      // ["link", "image", "video"],
+    ],
+  },
+  // placeholder: "Insert text here ...",
+  readOnly: false,
+};
+export default {
+  name: "RichTextEditor",
+  props: {
+    content: String,
+    value: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: "Insert text here ...",
+    },
+  },
+  data() {
+    return {
+      _options: {},
+      _content: "",
+      defaultOptions,
+    };
+  },
+  computed: {
+    mode() {
+      return this.$store.state.Status.mode;
+    },
+    isDisable: {
+      get() {
+        return this.mode === "display" || this.disabled;
+      },
+    },
+  },
+  mounted() {
+    this.initialize();
+  },
+  beforeDestroy() {
+    this.quill = null;
+    delete this.quill;
+  },
+  methods: {
+    initialize() {
+      if (this.$el) {
+        // Options
+        this._options = Object.assign(
+          { placeholder: this.placeholder },
+          this.defaultOptions,
+          this.options
+        );
+        this.quill = new Quill(this.$refs.editor, this._options);
+
+        this.quill.enable(false);
+        if (this.value || this.content) {
+          this.quill.pasteHTML(this.value || this.content);
+        }
+        if (!this.isDisable) {
+          this.quill.enable(true);
+        }
+        this.quill.on("selection-change", (range) => {
+          if (!range) {
+            this.$emit("blur", this.quill);
+          } else {
+            this.$emit("focus", this.quill);
+          }
+        });
+        // 更新
+        this.quill.on("text-change", (delta, oldDelta, source) => {
+          let html = this.$refs.editor.children[0].innerHTML;
+          const quill = this.quill;
+          const text = this.quill.getText();
+          if (html === "<p><br></p>") html = "";
+          this._content = html;
+          this.$emit("input", this._content);
+          this.$emit("change", { html, text, quill });
+        });
+        this.$emit("ready", this.quill);
+      }
+    },
+  },
+  watch: {
+    content(newVal, oldVal) {
+      if (this.quill) {
+        if (newVal && newVal !== this._content) {
+          this._content = newVal;
+          this.quill.pasteHTML(newVal);
+        } else if (!newVal) {
+          this.quill.setText("");
+        }
+      }
+    },
+    value(newVal, oldVal) {
+      if (this.quill) {
+        if (newVal && newVal !== this._content) {
+          this._content = newVal;
+          this.quill.pasteHTML(newVal);
+        } else if (!newVal) {
+          this.quill.setText("");
+        }
+      }
+    },
+    isDisable(newVal, oldVal) {
+      if (this.quill) {
+        this.quill.enable(!newVal);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.ql-toolbar.ql-snow .ql-formats {
+  line-height: 1;
+}
+.ql-editor {
+  min-height: 200px;
+  max-height: 500px;
+}
+</style>
\ No newline at end of file

src/components/XmlFormatEditor.vue

+<template>
+  <c-rich-text-editor
+    v-model="value"
+    v-bind="$attrs"
+    @blur="blurEvent"
+  ></c-rich-text-editor>
+</template>
+
+<script>
+// 保函文本
+export default {
+  name: "XmlFormatEditor",
+  props: ["model"],
+  data() {
+    return {
+      value: "",
+      isXml: false,
+    };
+  },
+  watch: {
+    model() {
+      let rows = this.model["rows"] || [];
+      this.value = this.show(rows);
+    },
+  },
+  methods: {
+    blurEvent(quill) {
+      if (this.model && this.model.rows) {
+        // const v = this.format(this.value);
+        const v = this.format(quill.getText());
+        this.model["rows"].length = 0;
+        this.model["rows"].unshift(v);
+        // this.$emit("change", v);
+        if (quill.isEnabled()) {
+          quill.disable();
+          this.$emit("blur", v, () => {
+            quill.blur();
+            setTimeout(() => {
+              quill.enable();
+            }, 0);
+          });
+        }
+      }
+    },
+    show: function (rows) {
+      let strs = rows.length > 0 ? rows[0] : "";
+      if (strs.startsWith("<?xml")) {
+        this.isXml = true;
+        var pattern = /<tdfmt\s[^>]*>([\s\S]*)<\/tdfmt>/;
+        var temp = pattern.exec(strs);
+        if (temp != null) {
+          strs = temp[1];
+        }
+      }
+      // return strs.replace(/<br\/>/g, "\n");
+      return strs;
+    },
+    format: function (value) {
+      if (this.isXml) {
+        var len = value.length;
+        value = value.replace(/\n/g, "<br/>");
+        var head = "<?xml version='1.0'?><tdfmt sel-start='" + len + "'>";
+        var tail = "</tdfmt>";
+        return head + value + tail;
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/components/index.js

@@ -55,6 +55,8 @@ import InputXml from "./InputXml.vue"
 
 import PagingTable from "./PagingTable.vue";
 import MulRowInput from "./MulRowInput.vue"
+import RichTextEditor from "./RichTextEditor.vue"
+import XmlFormatEditor from "./XmlFormatEditor.vue"
 
 export default {
     install(Vue) {
@@ -111,5 +113,7 @@ export default {
         Vue.component("c-input-xml", InputXml)
         Vue.component("c-paging-table", PagingTable)
         Vue.component("c-mul-row-input", MulRowInput)
+        Vue.component("c-rich-text-editor", RichTextEditor)
+        Vue.component("c-xml-format-editor", XmlFormatEditor)
     }
 }
\ No newline at end of file

src/main.js

@@ -5,6 +5,9 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import "es6-promise/auto";
 
+import 'quill/dist/quill.core.css' // import styles
+import 'quill/dist/quill.snow.css' // for snow theme
+
 import App from "./App.vue";
 import RootRouter from "./routers";
 import store from "./store";

src/views/Business/Gitopn/Gidtxtp.vue

@@ -9,7 +9,7 @@
               label="保函文本可变因素"
               prop="gidgrp.blk.gidtxt"
             >
-              <c-input-xml
+              <!-- <c-input-xml
                 :disabled="model.gitp.gidtxtmodflg == ''"
                 type="textarea"
                 :maxRows="15"
@@ -18,14 +18,20 @@
                 show-word-limit
                 @change="setTxt1"
                 placeholder="请输入保函文本可变因素"
-              ></c-input-xml>
+              ></c-input-xml> -->
+              <c-xml-format-editor 
+                :model="model.gidgrp.blk.gidtxt" 
+                :disabled="model.gitp.gidtxtmodflg == ''"
+                placeholder="请输入保函文本可变因素"
+                @blur="setTxt1"
+              ></c-xml-format-editor>
             </el-form-item>
             <el-form-item
               v-if="model.gitp.gidtxtmodflg == 'X'"
               label="保函文本可变因素"
               prop="gidgrp.blk.gtxgidtxt"
             >
-              <c-input-xml
+              <!-- <c-input-xml
                 type="textarea"
                 :model="model.gidgrp.blk.gtxgidtxt"
                 :maxRows="15"
@@ -33,7 +39,12 @@
                 show-word-limit
                 @change="setTxt2"
                 placeholder="请输入保函文本可变因素"
-              ></c-input-xml>
+              ></c-input-xml> -->
+              <c-xml-format-editor 
+                :model="model.gidgrp.blk.gtxgidtxt"
+                placeholder="请输入保函文本可变因素" 
+                @blur="setTxt2"
+              ></c-xml-format-editor>
             </el-form-item>
           </c-col>
         </c-col>
@@ -142,7 +153,7 @@ export default {
   data() {
     return {};
   },
-  methods: {async setTxt1(){
+  methods: {async setTxt1(val, fn){
       // this.executeDefault("gitp.gidgrp.blk.gidtxt").then((res) => {
       //   if ((res.respCode == SUCCESS)) {
       //     Utils.copyValueFromVO(this.model, res.data);
@@ -150,12 +161,13 @@ export default {
       // });
       this.executeRule("gitp.gidgrp.blk.gidtxt").then((res) => {
         if ((res.respCode == SUCCESS)) {
-          Utils.copyValueFromVO(this.model, res.data);
+          this.updateModel(res.data);
+          this.$nextTick(() => fn())
         }
       });
       
     },
-    async setTxt2(){
+    async setTxt2(val, fn){
       // this.executeDefault("gitp.gidgrp.blk.gtxgidtxt").then((res) => {
       //   if ((res.respCode == SUCCESS)) {
       //     Utils.copyValueFromVO(this.model, res.data);
@@ -163,7 +175,8 @@ export default {
       // });
       this.executeRule("gitp.gidgrp.blk.gtxgidtxt").then((res) => {
         if ((res.respCode == SUCCESS)) {
-          Utils.copyValueFromVO(this.model, res.data);
+          this.updateModel(res.data);
+          this.$nextTick(() => fn())
         }
       });
     },
@@ -171,7 +184,7 @@ export default {
     async modflgChange() {
       const rtnmsg = await this.executeRule("gitp.gidtxtmodflg");
       if (rtnmsg.respCode == SUCCESS) {
-        Utils.copyValueFromVO(this.model, rtnmsg.data);
+        this.updateModel(rtnmsg.data);
       }
     },},
   created: function () {},

src/views/Business/Letopn/index.vue

@@ -76,6 +76,7 @@
       >
       </c-grid-ety-prompt-dialog>
       <c-function-btn
+        :handleConfirm="handleConfirm"
         :handleSubmit="handleSubmit"
         :handleCheck="handleCheck"
         :handleStash="handleStash"

src/views/Business/Litopn/index.vue

@@ -107,6 +107,7 @@
       </c-grid-ety-prompt-dialog>
 
       <c-function-btn
+        :handleConfirm="handleConfirm"
         :handleSubmit="handleSubmit"
         :handleCheck="handleCheck"
         :handleStash="handleStash"