评测进行更改

public/UEditor/ueditor.config.js

@@ -41,7 +41,8 @@
             'directionalityltr', 'directionalityrtl', 'indent', '|',
             'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
             'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
-            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
+            // 'simpleupload', 'insertimage',
+        'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
             'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
             'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
             'print', 'preview', 'searchreplace', 'drafts', 'help'
@@ -61,7 +62,7 @@
         //,theme:'default'
         //,themePath:URL +"themes/"
 
-        //,zIndex : 900     //编辑器层级的基数,默认是900
+        ,zIndex : 9999     //编辑器层级的基数,默认是900
 
         //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
         //,charset:"utf-8"

src/views/bxg/shop/storeBrand/index.vue

@@ -19,7 +19,7 @@
             <el-input v-model="form.brandName" style="width: 370px;" />
           </el-form-item>
           <el-form-item label="品牌描述" prop="brandDescription">
-            <el-input v-model="form.brandDescription" type="textarea" style="width: 370px;" />
+            <el-input v-model="form.brandDescription" type="textarea" maxlength="190" show-word-limit style="width: 370px;" />
           </el-form-item>
           <el-form-item label="图标">
             <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />
@@ -52,8 +52,8 @@
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
         <el-table-column type="selection" width="55" />
         <el-table-column v-if="columns.visible('id')" prop="id" label="品牌ID" width="150" />
-        <el-table-column v-if="columns.visible('brandName')" prop="brandName" label="品牌名称" />
+        <el-table-column v-if="columns.visible('brandName')" prop="brandName" label="品牌名称"  width="150" />
-        <el-table-column v-if="columns.visible('brandDescription')" prop="brandDescription" label="品牌描述" />
+        <el-table-column v-if="columns.visible('brandDescription')" prop="brandDescription" label="品牌描述"   width="300"/>
         <el-table-column v-if="columns.visible('sort')" prop="sort" label="排序" width="55" />
 <!--        <el-table-column v-if="columns.visible('pic')" prop="pic" label="图标" />-->
         <el-table-column v-if="columns.visible('isShow')" label="状态" align="center" prop="isShow">
@@ -100,7 +100,7 @@ import MaterialList from "@/components/material";
 
 // crud交由presenter持有
 const defaultCrud = CRUD({ title: '品牌', url: '/bxg/api/yxStoreBrand', sort: 'id,desc', crudMethod: { ...crudYxStoreBrand }})
-const defaultForm = { id: null, brandName: null, sort: 0, goodsNumber:'',sellNumber:'',
+const defaultForm = { id: null, brandName: null, sort: 0, goodsNumber:'',sellNumber:'',brandDescription:null,
   pic: null,backgroundImage:null,isShow: null, createTime: null, updateTime: null, isDel: null, tenantId: null }
 export default {
   name: 'YxStoreBrand',
@@ -118,7 +118,10 @@ export default {
       rules: {
         brandName: [
           { required: true, message: '品牌名称不能为空', trigger: 'blur' }
-        ]
+        ],
+        // brandDescription:[
+        //   {max:190, message: '品牌描述不能超过190个字符', trigger: 'blur'}
+        // ]
       }    }
   },
   watch: {

src/views/bxg/yxEvaluation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" style="z-index:9">
     <!--工具栏-->
     <div class="head-container">
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
@@ -10,7 +10,8 @@
       </div>
       <crudOperation :permission="permission" />
       <!--表单组件-->
-      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
+      <el-dialog :close-on-click-modal="false"
+                 :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1000px">
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="250px">
           <el-form-item label="关联商品:" prop="product">
             <el-cascader
@@ -26,41 +27,29 @@
           </el-form-item>
 
           <el-form-item label="评测视频" prop="videoInput">
-                    <video-upload v-model="video" @videoInput="videoInput"></video-upload>
+            <video-upload v-model="video" @input="videoInput"></video-upload>
-              </el-form-item>
-              <el-form-item label="评测总结">
-                <el-input v-model="form.summary" type="textarea" style="width: 370px;" />
           </el-form-item>
+<!--          <el-form-item label="评测总结">-->
+<!--            <el-input v-model="form.summary" type="textarea" style="width: 370px;" />-->
+<!--          </el-form-item>-->
           <el-form-item label="首页图" prop="homeImage">
             <!--            <el-input v-model="form.homeImage" style="width: 370px;" />-->
             <MaterialList v-model="picArr" type="image" :num="1" :width="250" :height="150" />
           </el-form-item>
-<!--          <el-form-item label="图文配置" >-->
+          <el-form-item label="图文配置" >
-          <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="padding-left:250px">
+
-            <el-tab-pane label="产品展示栏" name="first"></el-tab-pane>
+            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
-            <el-tab-pane label="实用感受栏" name="second"></el-tab-pane>
+              <el-tab-pane
-            <el-tab-pane label="易用感受栏" name="third"></el-tab-pane>
+                :key="item.name"
+                v-for="(item, index) in editableTabs"
+                :label="item.title"
+                :name="item.name"
+              >
+                <span style="display: flex;margin-bottom:10px">当前栏目标题：<el-input style="width:300px" v-model="item.content"></el-input></span>
+                <ueditor-wrap v-model="item.configuration" :config="myConfig"
+                              @beforeInit="addCustomDialog"  style="width: 90%;"></ueditor-wrap>
+              </el-tab-pane>
             </el-tabs>
-<!--          </el-form-item>-->
-          <el-form-item label="产品展示文字" v-if="activeName=='first'">
-                <el-input v-model="form.displaySynopsis"  type="textarea" style="width: 370px;" />
-              </el-form-item>
-          <el-form-item label="产品展示图集" v-if="activeName=='first'">
-<!--            <el-input v-model="form.displayImage" style="width: 370px;" />-->
-            <MaterialList v-model="picArr1" type="image" :num="4" :width="150" :height="150" />
-          </el-form-item>
-              <el-form-item label="实用感受文字" v-if="activeName=='second'">
-                <el-input v-model="form.feelSynopsis"  type="textarea" style="width: 370px;" />
-              </el-form-item>
-          <el-form-item label="实用感受图集" v-if="activeName=='second'">
-            <MaterialList v-model="picArr2" type="image" :num="4" :width="150" :height="150" />
-          </el-form-item>
-              <el-form-item label="易用感受文字" v-if="activeName=='third'">
-                <el-input v-model="form.accessibilitySynopsis"  type="textarea" style="width: 370px;" />
-              </el-form-item>
-          <el-form-item label="易用感受图集" v-if="activeName=='third'">
-<!--            <el-input v-model="form.accessibilityImage" style="width: 370px;" />-->
-            <MaterialList v-model="picArr3" type="image" :num="4" :width="150" :height="150" />
           </el-form-item>
           <el-form-item label="是否展示">
             <el-radio-group v-model="form.isShow" style="width: 178px">
@@ -89,15 +78,7 @@
           </template>
         </el-table-column>
         <!--        <el-table-column v-if="columns.visible('homeImage')" prop="homeImage" label="首页图" />-->
-        <el-table-column v-if="columns.visible('synopsis')" prop="synopsis" label="评测介绍" />
+<!--        <el-table-column v-if="columns.visible('synopsis')" prop="synopsis" label="评测介绍" />-->
-<!--        <el-table-column v-if="columns.visible('videoInput')" prop="videoInput" label="评测视频" />-->
-        <el-table-column v-if="columns.visible('summary')" prop="summary" label="评测总结" />
-<!--        <el-table-column v-if="columns.visible('displayImage')" prop="displayImage" label="产品展示图集" />-->
-        <el-table-column v-if="columns.visible('displaySynopsis')" prop="displaySynopsis" label="产品简介" />
-<!--        <el-table-column v-if="columns.visible('feelImage')" prop="feelImage" label="实用体验感受图" />-->
-        <el-table-column v-if="columns.visible('feelSynopsis')" prop="feelSynopsis" label="实用感受" />
-<!--        <el-table-column v-if="columns.visible('accessibilityImage')" prop="accessibilityImage" label="易用性体验图" />-->
-        <el-table-column v-if="columns.visible('accessibilitySynopsis')" prop="accessibilitySynopsis" label="易用感受" />
         <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="添加时间">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -147,20 +128,59 @@ import {getInfo} from "@/api/bxg/yxStoreProduct";
 import {initData} from "@/api/bxg/data";
 import FileUpload from "@comp/FileUpload";
 import VideoUpload from "@comp/VideoUpload";
+import UeditorWrap from "vue-ueditor-wrap";
 // crud交由presenter持有
 const defaultCrud = CRUD({ title: '评测', url: 'bxg/api/yxEvaluation', sort: 'id,desc', crudMethod: { ...crudYxEvaluation }})
 const defaultForm = { id: null, homeImage: null, synopsis: null,videoInput:null,
   product: null, summary: null, displayImage: null,displaySynopsis:null,feelImage: null,
   feelSynopsis: null, accessibilityImage: null, accessibilitySynopsis: null,createTime:null,
-  updateTime:null,isDel:null,isShow:1,sort:null,tenantId:Cookies.get('tenantId'),
+  updateTime:null,isDel:null,isShow:1,sort:0,tenantId:null,
+  editableTabs:[],
 }
 export default {
   name: 'YxEvaluation',
-  components: {FileUpload,VideoUpload,pagination, crudOperation, rrOperation, udOperation ,MaterialList},
+  components: {UeditorWrap,FileUpload,VideoUpload,pagination, crudOperation, rrOperation, udOperation ,MaterialList},
   mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   data() {
     return {
-      activeName:'first',
+      myConfig: {
+        autoHeightEnabled: false, // 编辑器不自动被内容撑高
+        initialFrameHeight: 500, // 初始容器高度
+        initialFrameWidth: '100%', // 初始容器宽度
+        UEDITOR_HOME_URL: '/UEditor/',
+        serverUrl: ''
+      },
+      editableTabsValue: '1',
+      editableTabs:[],
+      editableTabs1: [{
+        title: '第一栏',
+        name: '1',
+        content: '眼界甄选评测员总结',
+        configuration:''
+      }, {
+        title: '第二栏',
+        name: '2',
+        content: '品牌背景',
+        configuration:''
+      },{
+        title: '第三栏',
+        name: '3',
+        content: '甄选测评官点评',
+        configuration:''
+      },{
+        title: '第四栏',
+        name: '4',
+        content: '产品成分',
+        configuration:''
+      },{
+        title: '第五栏',
+        name: '5',
+        content: '产品细节',
+        configuration:''
+      },
+      ],
+      tabIndex: 5,
+      activeName:'1',
       product:[],
       //分类列表
       cateList:[],
@@ -199,9 +219,6 @@ export default {
       // },
       video:[],
       picArr:[],
-      picArr1:[],
-      picArr2:[],
-      picArr3:[],
       permission: {
         add: ['admin', 'yxEvaluation:add'],
         edit: ['admin', 'yxEvaluation:edit'],
@@ -238,31 +255,77 @@ export default {
     }
   },
   watch: {
-    // video:function(val) {
+    video:function(val) {
-    //   console.log(val,val);
+      console.log('val',val);
-    //   // this.form.homeImage = val.join(',')
+      this.form.videoInput = val
-    // },
-    picArr: function(val) {
-      console.log(val,'val');
-      this.form.homeImage = val.join(',')
     },
-    picArr1: function(val) {
+    editableTabs: {
-      console.log();
+      handler(newVal, oldVal) {
-      this.form.displayImage = val.join(',')
+        console.log(newVal, oldVal);
+        this.form.editableTabs=this.editableTabs
       },
-    picArr2: function(val) {
+      // 开启深度监听
-      console.log();
+      deep: true
-      this.form.feelImage = val.join(',')
     },
-    picArr3: function(val) {
-      console.log();
-      this.form.accessibilityImage = val.join(',')
-    }
   },
   mounted () {
     this.getInfo();
   },
   methods: {
+    addCustomDialog () {
+      window.UE.registerUI(
+        "yshop",
+        function (editor, uiName) {
+          let dialog = new window.UE.ui.Dialog({
+            iframeUrl: '#/yshop/materia/index',
+            editor: editor,
+            name: uiName,
+            title: '上传图片',
+            cssRules: 'width:1200px;height:500px;padding:20px'
+          });
+          this.dialog = dialog;
+
+          var btn = new window.UE.ui.Button({
+            name: 'dialog-button',
+            title: '上传图片',
+            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
+            onclick: function () {
+              dialog.render();
+              dialog.open();
+            }
+          });
+          return btn;
+        }, 37);
+    },
+    handleTabsEdit(targetName, action) {
+      if (action === 'add') {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content',
+          configuration:''
+        });
+        this.editableTabsValue = newTabName;
+      }
+      if (action === 'remove') {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+      }
+    },
     handleClick(tab, event) {
       console.log(tab, event);
     },
@@ -279,12 +342,11 @@ export default {
     //   return product
     // },
     videoInput(uploadList){
-      console.log(uploadList,'uploadList');
+      // console.log(uploadList,'uploadList');
-        this.form.videoInput =uploadList[0].url
+      // this.video =[]
+      this.form.videoInput=''
     },
     change(val){
-        // this.form.product=JSON.stringify(val)
-        //   initData('/bxg/api/yxStoreProduct/info/'+val[1]).then((data)=>{
       this.form.product=val[1]
       console.log('选的子级',this.form.product)
       // })
@@ -322,30 +384,29 @@ export default {
     }, // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
       this.picArr = []
-      this.picArr1 = []
-      this.picArr2 = []
-      this.picArr3 = []
       if (form.homeImage && form.id) {
         this.picArr = form.homeImage.split(',')
       }
-      if (form.displayImage && form.id) {
+      console.log('form',form,form.product!=null&& form.id!=null)
-        this.picArr1 = form.displayImage.split(',')
-      }
-      if (form.feelImage && form.id) {
-        this.picArr2= form.feelImage.split(',')
-      }
-      if (form.accessibilityImage && form.id) {
-        this.picArr3 = form.accessibilityImage.split(',')
-      }
       if (form.product && form.id) {
         let data=JSON.parse(this.form.product)
-        // console.log('data',data)
         this.product=[Number(data.cateId),Number(data.id)]
         // this.product=[50,105]
         this.form.product=this.product[1]
         console.log( '111',this.product,typeof(this.product));
+      }else {
+        this.product=[]
+      }
+      if (form.editableTabs && form.id) {
+        this.editableTabs=this.form.editableTabs
+      }else{
+        this.editableTabs=this.editableTabs1
+      }
+      if (form.videoInput && form.id) {
+        this.video.push(this.form.videoInput)
+      }else{
+        this.video=[]
       }
-
     },
   }
 }

src/views/bxg/yxStoreExpert/index.vue

@@ -60,11 +60,11 @@
       <!--表格渲染-->
       <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
         <el-table-column type="selection" width="55" />
-        <el-table-column v-if="columns.visible('id')" prop="id" label="专家id" />
+        <el-table-column v-if="columns.visible('id')" prop="id" label="专家id" width="100"/>
 <!--        <el-table-column v-if="columns.visible('merId')" prop="merId" label="商户Id(0为总后台管理员创建,不为0的时候是商户后台创建)" />-->
 <!--        <el-table-column v-if="columns.visible('image')" prop="image" label="人像大图" />-->
-        <el-table-column v-if="columns.visible('expertName')" prop="expertName" label="专家名称" />
+        <el-table-column v-if="columns.visible('expertName')" prop="expertName" label="专家名称" width="100"/>
-        <el-table-column v-if="columns.visible('expertInfo')" prop="expertInfo" label="专家简介" />
+        <el-table-column v-if="columns.visible('expertInfo')" prop="expertInfo" label="专家简介" width="300" />
         <el-table-column v-if="columns.visible('expertStatus')" prop="expertStatus" label="专家职级" />
         <el-table-column v-if="columns.visible('expertUnit')" prop="expertUnit" label="所属单位" />
         <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="添加时间">
@@ -114,7 +114,7 @@ import MaterialList from "@/components/material";
 // crud交由presenter持有
 const defaultCrud = CRUD({ title: '专家', url: 'bxg/api/yxStoreExpert', sort: 'id,desc', crudMethod: { ...crudYxStoreExpert }})
 const defaultForm = { id: null, image: null, expertName: null, expertInfo: null,
-  expertStatus: null, expertUnit: null, createTime: null, updateTime: null, isDel: null }
+  expertStatus: null, expertUnit: null, createTime: null, updateTime: null, isDel: null,sort:0 }
 export default {
   name: 'YxStoreExpert',
   components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList},