Skip to content

A
apaas-ui
Commit a7d67d5f authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-v3-ui into dev

parents 6e21c920 3cea5f69
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 11 deletions
src/components/wangE.vue 0 → 100644
View file @ a7d67d5f
<template>
<section class="wangeditor_class">
<div ref="toolbar" class="toolbar"></div>
</section>
</template>
<script>
import E from "wangeditor";
export default {
name: "editoritem",
data() {
return {
// uploadPath,
editor: null,
info_: null
};
},
model: {
prop: "value",
event: "change"
},
props: {
value: {
type: String,
default: ""
},
isClear: {
type: Boolean,
default: false
},
isDisabled: {
type: Boolean,
default: false
}
},
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {
this.editor.txt.clear();
this.info_ = null;
}
},
value: function(value) {
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value);
}
},
isDisabled(value){
console.log(value)
this.editor.$textElem.attr("contenteditable", !value);
},
info_(val){
console.log(val);
this.$emit("change", val)
},
//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
},
mounted() {
this.seteditor();
this.editor.txt.html(this.value);
},
methods: {
seteditor() {
// http://192.168.2.125:8080/admin/storage/create
this.editor = new E(this.$refs.toolbar);
this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
this.editor.config.uploadImgServer =
"/tp-jiwei-pcsvc/display/cigApi/common/uploadFile"; // 配置服务器端地址
this.editor.config.uploadImgHeaders = {}; // 自定义 header
this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
// this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
this.editor.config.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
this.editor.config.uploadImgParams = { category: "图片" };
this.editor.config.uploadImgHooks = {
fail: (xhr, editor, result) => {
// 插入图片失败回调
},
success: (xhr, editor, result) => {
// 图片上传成功回调
},
timeout: (xhr, editor) => {
// 网络超时的回调
},
error: (xhr, editor) => {
// 图片上传错误的回调
},
customInsert: (insertImg, result, editor) => {
// 图片上传成功，插入图片的回调
//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
// console.log(result.data[0].url)
//insertImg()为插入图片的函数
//循环插入图片
// for (let i = 0; i < 1; i++) {
console.log(result);
let imgUrl = "/tp-jiwei-pcsvc/display" + result.data.visitPath;
console.log(imgUrl);
insertImg(imgUrl);
// }
}
};
this.editor.config.onchange = html => {
this.info_ = html; // 绑定当前逐渐地值
this.$emit("change", this.info_); // 将内容同步到父组件中
};
// 创建富文本编辑器
this.editor.create();
}
}
};
</script>
<style>
.wangeditor_class{
width: 100%;
}
.editor {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 0;
}
.toolbar{
height: 100%;
}
.toolbar .w-e-toolbar {
border: none!important;
border-bottom: 1px solid #e3e5ef!important;
padding: 0;
}
.toolbar .w-e-toolbar .w-e-menu{
width: 48px;
height: 78px;
font-size: 16px;
}
.toolbar .w-e-text-container {
border: none!important;
height: calc(100% - 80px)!important;
}
.text {
width: 100%;
border: 1px solid #ccc;
overflow-y: auto;
}
</style>
src/pages/technical-support/doc-manage/detail.vue
View file @ a7d67d5f
......@@ -14,18 +14,30 @@
</el-breadcrumb>
</div>
<div class="main_container">
<!-- xxx -->
<div class="editpage">
<wang-e v-model="editstr"></wang-e>
<div class="apaas_button" style="overflow:hidden;padding-top:30px;border-top:1px solid #e3e5ef;box-sizing:border-box;">
<el-button style="float:right;margin:0 30px;" type="primary" >保存</el-button>
<el-button style="float:right" >取消</el-button>
</div>
</div>
</div>
</template>
<script>
import wangE from '@/components/wangE'
export default {
data() {
return {};
return {
editstr:'',
};
},
components:{
wangE
},
computed: {
},
computed: {},
created() {
if (this.$route.params.id) {
// 请求详情
......@@ -48,4 +60,17 @@ export default {
background-color: #fff;
border-radius: 10px;
}
.editpage{
background-color: #fff;
height: calc(100% - 45px);
margin-bottom: 20px;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
}
.editpage .wangeditor_class{
height: calc(100% - 100px);
padding: 0 20px;
box-sizing: border-box;
}
</style>
src/pages/workbench/fwgl/serviceDetail.vue
View file @ a7d67d5f
......@@ -106,12 +106,13 @@
:key="item.value"
:label="item.label"
:value="item.value+','+item.able">
<span :style="{display:'inline-block',marginRight:'8px',width:'8px',height:'8px',borderRadius:'4px',backgroundColor:item.able?'#25bdb1':'#e15260',}"></span>
<span v-if="!item.able" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
<span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
{{item.label}}
</el-option>
</el-select>
</div>
<div :style="process_in_up?{backgroundColor:'#f8f9fd',padding:'20px',marginBottom:'30px'}:''">
<div>
<div class="service_title_card">
<nor-card title="服务状态" class="service_card">
<template>
......@@ -252,6 +253,13 @@
</div>
</div>
</div>
<!-- <div class="editpage">
<wang-e v-model="editstr"></wang-e>
<div class="apaas_button" style="overflow:hidden;padding-top:30px;border-top:1px solid #e3e5ef;box-sizing:border-box;">
<el-button style="float:right;margin:0 30px;" type="primary" >保存</el-button>
<el-button style="float:right" >取消</el-button>
</div>
</div> -->
<dialog-action ref="myConfirm"></dialog-action>
</div>
</template>
......@@ -266,6 +274,7 @@ import Topology from "@/components/topology.vue";
import serviceHeader from "@/components/service-header";
import ListPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";
import wangE from '@/components/wangE'
import { getRole, formatDateTime_date } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
export default {
......@@ -279,13 +288,15 @@ export default {
serviceHeader,
dialogAction,
ListPagination,
wangE
},
data() {
return {
now_user: 0, //0：普通用户，1：组织管理员，2：超级管理员
process_in_up:false,//是否是服务注册产生的
process_in_up:true,//是否是服务注册产生的
perception_in:false,//是否是感知服务
buy_style: [1],
// editstr:'<h1>1221312</h1>wuqwyequ827812731731',
listTotal: 0,
currentPage: 1,
pageSize: 10,
......@@ -962,7 +973,7 @@ export default {
if (n == 2) {
this.getData();
}
},
}
},
created() {
if (this.userInfo) {
......@@ -997,15 +1008,15 @@ export default {
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
if(val.split(',')[1]=='true'){
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:8px;height:8px;border-radius:4px;background-color:rgb(37, 189, 177);"></span>';
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
}else{
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:8px;height:8px;border-radius:4px;background-color:rgb(225, 82, 96);"></span>';
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
}
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 30px;');
inputDom.setAttribute('style', 'padding-left: 60px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
},
......@@ -1313,6 +1324,19 @@ export default {
padding: 0 20px;
height: calc(100% - 55px);
}
/* .editpage{
background-color: #fff;
height: calc(100% - 20px);
margin-bottom: 20px;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
}
.editpage .wangeditor_class{
height: calc(100% - 100px);
padding: 0 20px;
box-sizing: border-box;
} */
.info_contain {
padding: 25px 20px;
background-color: #fff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment