clay commit : bug基本修复完成

ebts-ui/package.json

@@ -41,7 +41,7 @@
     "axios": "0.18.1",
     "ckeditor4-vue": "^1.4.0",
     "clipboard": "2.0.4",
-    "codemirror": "^5.59.2",
+    "codemirror": "^5.65.9",
     "core-js": "3.6.5",
     "diff-match-patch": "^1.0.5",
     "echarts": "4.2.1",

ebts-ui/src/components/Editor/index.vue

@@ -55,7 +55,6 @@ export default {
   },
   data () {
     return {
-
       // 默认有这么多菜单，meanArray有值以meanArray为准
       defaultMeanus: [
         'head',

ebts-ui/src/components/Editor/index_back.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="editor" :style="styles" ref="editor"></div>
+</template>
+
+<script>
+import Editor from 'wangeditor'
+export default {
+  name: "Editor",
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: ''
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    meanArray: {
+      // 自定义菜单
+      type: Array,
+      default: null
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height+50}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: function (value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value)
+      }
+    }
+    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  data () {
+    return {
+
+      // 默认有这么多菜单，meanArray有值以meanArray为准
+      defaultMeanus: [
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'indent',
+        'lineHeight',
+        'foreColor',
+        'backColor',
+        'link',
+        'list',
+        'justify',
+        'quote',
+        'emoticon',
+        'image',
+        'video',
+        'table',
+        'code',
+        'splitLine',
+        'undo',
+        'redo'
+      ],
+      editor: ''
+    }
+  },
+  methods: {
+    init () {
+      const _this = this
+      this.editor = new Editor(this.$refs.editor)
+      this.editor.config.uploadImgAccept = ['doc', 'docx', 'png', 'gif', 'bmp', 'webp']
+      this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
+      this.editor.config.height = this.height
+      this.editor.config.pasteFilterStyle = false
+      this.editor.config.zIndex = 10
+      this.setMenus() // 设置菜单
+      this.editor.config.onchange = (html) => {
+        _this.$emit('change', html) // 将内容同步到父组件中
+      }
+      this.editor.create() // 创建编辑器
+    },
+    setMenus () {
+      // 设置菜单
+      if (this.meanArray) {
+        this.editor.config.menus = this.meanArray
+      } else {
+        this.editor.config.menus = this.defaultMeanus
+      }
+    },
+    getHtml () {
+      // 得到文本内容
+      return this.editor.txt.html()
+    },
+    setHtml (txt) {
+      // 设置富文本里面的值
+      this.editor.txt.html(txt)
+    }
+  },
+  mounted () {
+    const that = this
+    that.$nextTick(function () {
+      that.init()
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.editor{
+  z-index: 1!important;
+  white-space: pre-wrap!important;
+  line-height: normal !important;
+}
+
+</style>

ebts-ui/src/views/cas-login.vue

@@ -6,7 +6,6 @@ import {setToken} from "@/utils/auth";
 export default {
   name: "cas-login",
   mounted() {
-    debugger
     let search = window.location.search;
     let token = search.slice(search.indexOf("=") + 1)
     setToken(token)

ebts-ui/src/views/sist/banner/index.vue

@@ -83,6 +83,7 @@
       <el-table-column label="标题" align="left" prop="title" />
       <el-table-column label="英文标题" align="left" prop="enTitle" />
       <el-table-column label="站点类型" align="center" prop="sitetype" :formatter="sitetypeFormat"/>
+      <el-table-column label="排序" align="center" prop="sort"/>
       <el-table-column label="轮播类型" align="center" prop="type":formatter="bannerStyleFormat" />
       <el-table-column label="图表路径" align="center">
         <template  slot-scope="scope">
@@ -146,6 +147,9 @@
         <el-form-item label="英文标题" prop="enTitle">
           <el-input v-model="form.enTitle"  placeholder="请输入英文标题" />
         </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" placeholder="请输入排序序号" />
+        </el-form-item>
         <el-form-item prop="imgurl">
           <UploadFile v-model="form.imgurl"
                       file-type="image"

ebts-ui/src/views/sist/dire/direData.vue

@@ -77,10 +77,10 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="上级" prop="pid">
-          <treeselect v-model="form.pid" :options="empleeOptions" :normalizer="normalizer" placeholder="请选择父id"/>
+          <treeselect v-model="form.pid" :options="empleeOptions" :normalizer="normalizer" @select="handleNodeSelect" placeholder="请选择父id"/>
         </el-form-item>
         <el-form-item label="层" prop="level">
-          <el-input-number type="number" :min="1" :max="3" v-model="form.level" placeholder="请输入层"/>
+          <el-input disabled v-model="form.level" placeholder="请输入层"/>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" placeholder="排序"/>
@@ -88,9 +88,9 @@
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入名称"/>
         </el-form-item>
-        <el-form-item v-if="form.level === 3" label="跳转链接" prop="link">
+        <el-form-item v-if="form.level === 3 || form.level === 2" label="跳转链接" prop="link">
           <el-input v-model="form.link" placeholder="请输跳转链接">
-            <template slot="prepend">Http://</template>
+            <template slot="prepend"></template>
           </el-input>
         </el-form-item>
       </el-form>
@@ -144,6 +144,13 @@ export default {
     this.getList()
   },
   methods: {
+    handleNodeSelect(data){
+      let level = data.level + 1
+      if (level > 3){
+        this.msgError("最多为3层结构")
+      }
+      this.form.level = level
+    },
     /** 查询层级结构列表 */
     getList() {
       this.loading = true
@@ -162,6 +169,7 @@ export default {
       return {
         id: node.id,
         label: node.name,
+        level:node.level,
         children: node.children
       }
     },
@@ -170,7 +178,7 @@ export default {
       listEmplee({ type: this.direId, siteType: this.siteType }).then(response => {
         console.log(response)
         this.empleeOptions = []
-        const data = { id: 0, name: '顶级节点', children: [] }
+        const data = { id: 0, level:0, name: '顶级节点', children: [] }
         if (response.code == 200) {
           data.children = this.handleTree(response.data, 'id', 'pid')
         }
@@ -267,30 +275,3 @@ export default {
   }
 }
 </script>
-
-
-<!--<template>-->
-<!--  <div>-->
-<!--    {{ direId }}-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--export default {-->
-<!--  name: "direData",-->
-<!--  data() {-->
-<!--    return {-->
-<!--      direId: this.$route.params && this.$route.params.direId,-->
-<!--    }-->
-<!--  },-->
-<!--  created() {-->
-<!--    let direId = this.$route.params && this.$route.params.direId;-->
-<!--    console.log(direId)-->
-
-<!--  }-->
-<!--}-->
-<!--</script>-->
-
-<!--<style scoped>-->
-
-<!--</style>-->

ebts-ui/src/views/sist/dire/index.vue

@@ -35,7 +35,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['sist:dire:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -46,7 +47,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['sist:dire:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -57,7 +59,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['sist:dire:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -67,23 +70,25 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['sist:dire:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="55" align="center"/>
-<!--      <el-table-column label="层级数据编码" align="center" prop="dictCode" />-->
+      <!--      <el-table-column label="层级数据编码" align="center" prop="dictCode" />-->
-      <el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format" />
+      <el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format"/>
-      <el-table-column label="层级数据" align="center" prop="dictLabel" >
+      <el-table-column label="层级数据" align="center" prop="dictLabel">
         <template slot-scope="scope">
           <router-link :to="'/dire/data/' + scope.row.dictValue+'/'+scope.row.cssClass" class="link-type">
             <span>{{ scope.row.dictLabel }}</span>
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="使用模板" align="center" prop="attribute1" :formatter="templateFormatter"/>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -98,7 +103,8 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['sist:dire:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -106,7 +112,8 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['sist:dire:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -123,18 +130,29 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="层级数据" prop="dictLabel">
-          <el-input v-model="form.dictLabel" placeholder="请输入数据" />
+          <el-input v-model="form.dictLabel" placeholder="请输入数据"/>
         </el-form-item>
         <el-form-item label="显示排序" prop="dictSort">
-          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+          <el-input-number v-model="form.dictSort" controls-position="right" :min="0"/>
+        </el-form-item>
+        <el-form-item label="模板类型" prop="attribute1">
+          <el-radio-group v-model="form.attribute1">
+            <el-radio-button
+              v-for="item in templateOptions"
+              :key="item.key"
+              :label="item.key"
+            >{{ item.label }}
+            </el-radio-button>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="网站类型" prop="attribute2">
           <el-radio-group v-model="form.attribute2">
-            <el-radio
+            <el-radio-button
               v-for="dict in attribute2Options"
               :key="dict.dictValue"
               :label="dict.dictValue"
-            >{{dict.dictLabel}}</el-radio>
+            >{{ dict.dictLabel }}
+            </el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -150,10 +168,10 @@
 </template>
 
 <script>
-import { listData, getData, delData, addData, updateData, exportData } from "@/api/sist/dire";
+import { listData, getData, delData, addData, updateData, exportData } from '@/api/sist/dire'
 
 export default {
-  name: "Data",
+  name: 'Data',
   data() {
     return {
       // 遮罩层
@@ -171,13 +189,23 @@ export default {
       // 字典表格数据
       dataList: [],
       // 默认字典类型
-      defaultDictType: "",
+      defaultDictType: '',
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 状态数据字典
       attribute2Options: [],
+      templateOptions: [
+        {
+          key: '2',
+          label: '二层模板'
+        },
+        {
+          key: '1',
+          label: '三层模板'
+        },
+      ],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -190,41 +218,56 @@ export default {
       // 表单校验
       rules: {
         dictLabel: [
-          { required: true, message: "层级数据不能为空", trigger: "blur" }
+          { required: true, message: '层级数据不能为空', trigger: 'blur' }
+        ],
+        attribute1: [
+          { required: true, message: '模板类型不能为空', trigger: 'blur' }
         ],
         attribute2: [
-          { required: true, message: "网站类型不能为空", trigger: "blur" }
+          { required: true, message: '网站类型不能为空', trigger: 'blur' }
         ],
         dictSort: [
-          { required: true, message: "数据顺序不能为空", trigger: "blur" }
+          { required: true, message: '数据顺序不能为空', trigger: 'blur' }
         ]
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
-    this.getDicts("unencrypted_site_type").then(response => {
+    this.getDicts('unencrypted_site_type').then(response => {
-      this.attribute2Options = response.data;
+      this.attribute2Options = response.data
-    });
+    })
   },
   methods: {
+    /** 模板转换器 */
+    templateFormatter(row){
+      let attribute1 = row.attribute1
+      if (null == attribute1){
+        return
+      }
+      for (let templateOption of this.templateOptions) {
+        if (templateOption.key == attribute1){
+          return templateOption.label
+        }
+      }
+    },
     /** 查询字典数据列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listData(this.queryParams).then(response => {
-        this.dataList = response.rows;
+        this.dataList = response.rows
-        this.total = response.total;
+        this.total = response.total
-        this.loading = false;
+        this.loading = false
-      });
+      })
     },
     // 数据状态字典翻译
     attribute2Format(row, column) {
-      return this.selectDictLabel(this.attribute2Options, row.attribute2);
+      return this.selectDictLabel(this.attribute2Options, row.attribute2)
     },
     // 取消按钮
     cancel() {
-      this.open = false;
+      this.open = false
-      this.reset();
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -233,94 +276,99 @@ export default {
         dictLabel: undefined,
         dictValue: undefined,
         dictSort: 0,
-        status: "0",
+        status: '0',
-        attribute2: "1",
+        attribute2: '1',
         remark: undefined
-      };
+      }
-      this.resetForm("form");
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
+      this.queryParams.pageNum = 1
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      this.resetForm('queryForm')
-      this.queryParams.dictType = this.defaultDictType;
+      this.queryParams.dictType = this.defaultDictType
-      this.handleQuery();
+      this.handleQuery()
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.reset()
-      this.open = true;
+      this.open = true
-      this.title = "添加层级数据";
+      this.title = '添加层级数据'
-      this.form.dictType = this.queryParams.dictType;
+      this.form.dictType = this.queryParams.dictType
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.dictCode)
-      this.single = selection.length!=1
+      this.single = selection.length != 1
       this.multiple = !selection.length
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const dictCode = row.dictCode || this.ids
       getData(dictCode).then(response => {
-        this.form = response.data;
+        this.form = response.data
-        this.open = true;
+        if (this.form.attribute2 == 1) {
-        this.title = "修改层级数据";
+          this.form.attribute2 = '1'
-      });
+        } else {
+          this.form.attribute2 = '2'
+        }
+        this.open = true
+        this.title = '修改层级数据'
+      })
     },
     /** 提交按钮 */
     submitForm: function() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           this.form.dictType = 'dire_type'
           if (this.form.dictCode != undefined) {
             updateData(this.form).then(response => {
-              this.msgSuccess("修改成功");
+              this.msgSuccess('修改成功')
-              this.open = false;
+              this.open = false
-              this.getList();
+              this.getList()
-            });
+            })
           } else {
             addData(this.form).then(response => {
-              this.msgSuccess("新增成功");
+              this.msgSuccess('新增成功')
-              this.open = false;
+              this.open = false
-              this.getList();
+              this.getList()
-            });
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const dictCodes = row.dictCode || this.ids;
+      const dictCodes = row.dictCode || this.ids
-      this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', "警告", {
+      this.$confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?', '警告', {
-        confirmButtonText: "确定",
+        confirmButtonText: '确定',
-        cancelButtonText: "取消",
+        cancelButtonText: '取消',
-        type: "warning"
+        type: 'warning'
       }).then(function() {
-        return delData(dictCodes);
+        return delData(dictCodes)
       }).then(() => {
-        this.getList();
+        this.getList()
-        this.msgSuccess("删除成功");
+        this.msgSuccess('删除成功')
       })
     },
     /** 导出按钮操作 */
     handleExport() {
-      const queryParams = this.queryParams;
+      const queryParams = this.queryParams
-      this.$confirm('是否确认导出所有数据项?', "警告", {
+      this.$confirm('是否确认导出所有数据项?', '警告', {
-        confirmButtonText: "确定",
+        confirmButtonText: '确定',
-        cancelButtonText: "取消",
+        cancelButtonText: '取消',
-        type: "warning"
+        type: 'warning'
       }).then(function() {
-        return exportData(queryParams);
+        return exportData(queryParams)
       }).then(response => {
-        this.download(response.msg);
+        this.download(response.msg)
       })
     }
   }
-};
+}
 </script>

ebts-ui/src/views/sist/navigation/index.vue

@@ -137,7 +137,7 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="缩略图" prop="isThumbnail" v-show="articleSelShow">
+        <el-form-item label="缩略图" prop="isThumbnail" v-show="isThumbnailShow">
           <el-radio-group v-model="form.isThumbnail">
             <el-radio-button
               v-for="dict in thumbnailOptions"
@@ -147,6 +147,16 @@
             </el-radio-button>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="模板" prop="isSimple" v-show="isThumbnailShow">
+          <el-radio-group v-model="form.isSimple">
+            <el-radio-button
+              v-for="dict in simpleOptions"
+              :key="dict.key"
+              :label="dict.key"
+            >{{ dict.label }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-form-item>
         <!--        <el-form-item label="内容类型" prop="refId" v-show="articleSelShow">-->
         <!--          <el-select v-model="form.refId" placeholder="请选择内容类型" clearable :style="{width: '100%'}">-->
         <!--            <el-option-->
@@ -192,6 +202,9 @@
       </div>
     </el-dialog>
 
+
+
+
     <el-dialog title="编辑详情" :visible="detailsShow" width="1100px" :close-on-click-modal="false" @close="detailsClose()"
                append-to-body
     >
@@ -207,7 +220,9 @@
         </el-row>
         <el-row>
           <el-col :offset="1" :span="22">
-            <Editor v-model="formData.content" :height="500"/>
+            <Editor ref="editor" v-model="formData.content" :height="500"/>
+<!--            <CodeEdit ref="codeEdit" v-model="formData.content" :height="500"/>-->
+<!--            <CustomEditor v-model="formData.content" :height="500"/>-->
           </el-col>
         </el-row>
         <el-row>
@@ -235,7 +250,8 @@ import {
 } from '@/api/sist/navigation'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import Editor from '@/components/Editor'
+import Editor from '@/views/utils/Editor'
+import CodeEdit from '@/views/utils/CodeEdit'
 import UploadFile from '@/views/utils/uploadFile'
 import { getArticleNav } from '../../../api/sist/article'
 
@@ -243,6 +259,7 @@ export default {
   name: 'Navigation',
   components: {
     Treeselect,
+    CodeEdit,
     Editor,
     UploadFile
   },
@@ -258,6 +275,7 @@ export default {
       // 显示搜索条件
       showSearch: true,
       articleSelShow: false,
+      isThumbnailShow:false,
       empleeSelShow: false,
       imageShow: false,
       // 导航表格数据
@@ -272,6 +290,16 @@ export default {
           label: '有'
         }
       ],
+      simpleOptions:[
+        {
+          key: 0,
+          label: '正常列表'
+        },
+        {
+          key: 1,
+          label: '简单列表'
+        }
+      ],
       // 导航树选项
       navigationList: [],
       articleTypeOptions: [],
@@ -408,6 +436,7 @@ export default {
     },
     // 表单重置
     reset() {
+      this.isThumbnailShow = false
       this.articleSelShow = false
       this.imageShow = false
       this.empleeSelShow = false
@@ -455,6 +484,11 @@ export default {
         this.formData = res.data
       })
     },
+    code(){
+      let html = this.$refs.editor.getHtml()
+      this.$refs.editor.setHtml(html)
+      console.log(this.$refs.editor.getHtml())
+    },
     save() {
       updateDetails(this.formData).then(res => {
         this.msgSuccess('修改成功')
@@ -468,7 +502,8 @@ export default {
       // }
       this.articleTypeOptions = []
       this.direTypeOptions = []
-      if (type == 2) {
+      if (type == "2") {
+        this.isThumbnailShow = true
         this.articleSelShow = true
         this.empleeSelShow = false
         if (this.form.sitetype == 1) {
@@ -476,9 +511,10 @@ export default {
         } else if (this.form.sitetype == 2) {
           this.articleTypeOptions = this.labArticleTypeOption
         }
-      } else if (type == 3) {
+      } else if (type == "3") {
         this.articleSelShow = false
         this.empleeSelShow = true
+        this.isThumbnailShow = false
         if (this.form.sitetype == 1) {
           this.direTypeOptions = this.sistDireTypeOptions
         } else if (this.form.sitetype == 2) {
@@ -489,7 +525,7 @@ export default {
         this.empleeSelShow = false
       }
 
-      if (this.form.type == 0) {
+      if (this.form.type == "0") {
         this.imageShow = false
       } else {
         this.imageShow = true
@@ -529,6 +565,7 @@ export default {
         } else {
           this.imageShow = true
         }
+        this.navigationTypeChang(this.form.type)
         this.open = true
         this.title = '修改导航'
       })

ebts-ui/src/views/utils/CodeEdit.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="in-coder-panel">
+    <textarea ref="textarea"></textarea>
+  </div>
+</template>
+
+<script>
+// 引入全局实例
+import _CodeMirror from 'codemirror'
+
+// 核心样式
+import 'codemirror/lib/codemirror.css'
+// 引入主题后还需要在 options 中指定主题才会生效
+import 'codemirror/theme/cobalt.css'
+
+// 需要引入具体的语法高亮库才会有对应的语法高亮效果
+// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
+// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/xml/xml.js'
+import 'codemirror/mode/vue/vue.js'
+
+// 尝试获取全局实例
+const CodeMirror = window.CodeMirror || _CodeMirror
+
+export default {
+  name: 'codeEdit.vue',
+  props: {
+    // 外部传入的内容，用于实现双向绑定
+    value: String,
+    // 外部传入的语法类型
+    language: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 内部真实的内容
+      code: this.value,
+      // 默认的语法类型
+      mode: 'javascript',
+      // 编辑器实例
+      coder: null,
+      // 默认配置
+      options: {
+        // 缩进格式
+        tabSize: 2,
+        // 主题，对应主题库 JS 需要提前引入
+        theme: 'cobalt',
+        // 显示行号
+        lineNumbers: true,
+        line: true
+      },
+      // 支持切换的语法高亮类型，对应 JS 已经提前引入
+      // 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
+    }
+  },
+  watch : {
+    value(val){
+      this.code = val
+    }
+  },
+  created(){
+
+    this._initialize()
+  },
+  // mounted() {
+  //   // 初始化
+  //   this._initialize()
+  // },
+  methods: {
+    // 初始化
+    _initialize() {
+      console.log(this.value)
+      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
+      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
+      // 编辑器赋值
+      this.coder.setValue(this.value || this.code)
+
+      // 支持双向绑定
+      this.coder.on('change', (coder) => {
+        this.code = coder.getValue()
+        if (this.$emit) {
+          this.$emit('input', this.code)
+        }
+      })
+
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.in-coder-panel {
+
+  flex-grow: 1;
+  display: flex;
+  position: relative;
+
+  .CodeMirror {
+
+    flex-grow: 1;
+    z-index: 1;
+
+    .CodeMirror-code {
+
+      line-height: 19px;
+
+      .code-mode-select {
+
+        position: absolute;
+        z-index: 2;
+        righ: 10px;
+        top: 10px;
+        max-width: 130px;
+      }
+    }
+  }
+
+}
+</style>

ebts-ui/src/views/utils/Editor.vue

@@ -40,7 +40,7 @@ export default {
         style.minHeight = `${this.minHeight}px`;
       }
       if (this.height) {
-        style.height = `${this.height}px`;
+        style.height = `${this.height+50}px`;
       }
       return style;
     },
@@ -89,7 +89,11 @@ export default {
     init () {
       const _this = this
       this.editor = new Editor(this.$refs.editor)
+      this.editor.config.uploadImgAccept = ['doc', 'docx', 'png', 'gif', 'bmp', 'webp']
       this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
+      this.editor.config.height = this.height
+      this.editor.config.pasteFilterStyle = false
+      this.editor.config.zIndex = 10
       this.setMenus() // 设置菜单
       this.editor.config.onchange = (html) => {
         _this.$emit('change', html) // 将内容同步到父组件中
@@ -123,9 +127,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .editor{
   z-index: 1!important;
   white-space: pre-wrap!important;
   line-height: normal !important;
 }
+
 </style>

ebts-ui/src/views/utils/Editor_back.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="editor" :style="styles" ref="editor"></div>
+</template>
+
+<script>
+import Editor from 'wangeditor'
+export default {
+  name: "Editor",
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: ''
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    meanArray: {
+      // 自定义菜单
+      type: Array,
+      default: null
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: function (value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(this.value)
+      }
+    }
+    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  data () {
+    return {
+
+      // 默认有这么多菜单，meanArray有值以meanArray为准
+      defaultMeanus: [
+        'head',
+        'bold',
+        'fontSize',
+        'fontName',
+        'italic',
+        'underline',
+        'strikeThrough',
+        'indent',
+        'lineHeight',
+        'foreColor',
+        'backColor',
+        'link',
+        'list',
+        'justify',
+        'quote',
+        'emoticon',
+        'image',
+        'video',
+        'table',
+        'code',
+        'splitLine',
+        'undo',
+        'redo'
+      ],
+      editor: ''
+    }
+  },
+  methods: {
+    init () {
+      const _this = this
+      this.editor = new Editor(this.$refs.editor)
+      this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
+      this.setMenus() // 设置菜单
+      this.editor.config.onchange = (html) => {
+        _this.$emit('change', html) // 将内容同步到父组件中
+      }
+      this.editor.create() // 创建编辑器
+    },
+    setMenus () {
+      // 设置菜单
+      if (this.meanArray) {
+        this.editor.config.menus = this.meanArray
+      } else {
+        this.editor.config.menus = this.defaultMeanus
+      }
+    },
+    getHtml () {
+      // 得到文本内容
+      return this.editor.txt.html()
+    },
+    setHtml (txt) {
+      // 设置富文本里面的值
+      this.editor.txt.html(txt)
+    }
+  },
+  mounted () {
+    const that = this
+    that.$nextTick(function () {
+      that.init()
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.editor{
+  z-index: 1!important;
+  white-space: pre-wrap!important;
+  line-height: normal !important;
+}
+</style>