对接

shj

2022-09-06 c3f6f5906443df62ad462a5d098801afdab91cac

对接

 src/views/accidentManagementSystem/accidentCases/component/DailogCases.vue

@@ -21,7 +21,7 @@
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
                    <el-form-item label="内容" size="default" prop="caseContent">
                    <el-form-item  label="内容" size="default" prop="caseContent">
                        <Wangeditor v-if="dialogVisible" style="width: 100%" :value="form.caseContent"
                                    @change="changeCaseContent" showTop=""></Wangeditor>
                    </el-form-item>

 src/views/accidentManagementSystem/accidentCases/index.vue

@@ -37,7 +37,7 @@
                <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip /> -->
                <el-table-column label="操作" align="center" sortable show-overflow-tooltip>
                    <template #default="scope">
                        <!-- <el-button link type="primary" size="small" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button> -->
                        <el-button link type="primary" size="small" :icon="View" @click="jump(scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="small" :icon="EditPen" @click="openD('修改', scope.row.id)">编辑</el-button>
                        <el-button link type="primary" size="small" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                    </template>
@@ -64,15 +64,16 @@
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
import { useRouter } from 'vue-router';
export default defineComponent({
    components: { ElButton, ElInput,DailogCases },
    components: { ElButton, ElInput, DailogCases },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pageSize: 10,
            pageIndex: 1,
            searchParams: {
                caseTitle: '', 
                caseTitle: '',
            },
        });
        // 下方导航与表格
@@ -116,7 +117,7 @@
        // 打开弹窗
        const Show = ref();
        const openD = (title: String, id: number) => {
            Show.value.openDailog(title,id);
            Show.value.openDailog(title, id);
        };
        // 删除
        const onDelete = (id: number) => {
@@ -128,7 +129,7 @@
                type: 'warning',
            })
                .then(() => {
                    console.log(arr)
                    console.log(arr);
                    accidentManagementSystemApi()
                        .getaccidentCaseDelete(arr)
                        .then((res) => {
@@ -203,7 +204,19 @@
        const add = () => {
            listApi();
        };
        let router = useRouter();
        let jump = (id:any) => {
            router.push({ 
                path: '/accidentCasesCop' ,
                query:{
                    id:id,
                }
            });
        };

        return {
            jump,
            router,
            listApi,
            add,
            resetForm,

 src/views/accidentManagementSystem/accidentCasesCop/component/wangEditor/index.vue

对比新文件
@@ -0,0 +1,174 @@
<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar"  :class="showTop">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  // import {uploadNew,downloadNew} from '@/api/upload';
  // import defaultUrl from "@/api/defaultUrl";
  export default {
    name: 'editoritem',
    data() {
      return {
        // uploadPath,
        editor: null,
        info_: null,
        // defaultUrl:defaultUrl,
        defaultUrl:'',
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      },
      showTop: {
        type: String,
        default: ''
      },
    },
    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)
        }
      }
      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
    },
    mounted() {
      var that =this
      that.setEditor()
      that.editor.txt.html(that.value)
    },
    methods: {
      setEditor() {
        var that =this
        this.editor = new E(this.$refs.toolbar, this.$refs.editor)
        // 配置菜单
        this.editor.config.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          // 'image',  // 插入图片
          'table',  // 表格
          // 'video',  // 插入视频
          'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ]

        //配置上传图片
        this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
        this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址
        this.editor.config.uploadImgHeaders = { }// 自定义 header
        this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
        this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片
        this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
        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 url = "http://otp.cdinfotech.top"+result.url
            insertImg(url)
            // }
          }
        }
        this.editor.config.customUploadImg  = function (files, insert) {
          let form = new FormData();
          form.append('file', files[0]);
          form.append('dir', 'temp1')
          // uploadNew(form).then(res=>{
          //   if(res.result){
          //     let url = that.defaultUrl+`/upload/downloadNew?path=`+encodeURI(res.data.fileUrl)
          //     insert(url)
          //     that.$message("上传成功", 'success');
          //   }else {
          //     that.$message.error("上传失败");
          //   }
          //
          // })
        }

        this.editor.config.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        // 创建富文本编辑器
        this.editor.create()
        //是否可编辑
        if (this.showTop=='hiddenClass'){
          this.editor.disable()
        }
      }
    }
  }
</script>

<style scoped>
  .editor {
    /*margin: 0 auto;*/
    position: relative;
    z-index: 100;
  }
  .toolbar {
    width: 100%;
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    min-height: 250px;
  }
  .hiddenClass{
    display: none;

  }
</style>

 src/views/accidentManagementSystem/accidentCasesCop/index.vue

对比新文件
@@ -0,0 +1,82 @@
<template>
    <div style="background-color:#fff;height: 800px;">
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="标题" size="default" prop="caseTitle">
                        <el-input v-model="form.caseTitle" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="11" :md="11" :lg="11" :xl="11" class="mb20">
                    <el-form-item label="发布时间" size="default" prop="caseTime">
                        <el-date-picker
                            v-model="form.caseTime"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime"
                            placeholder="请选择"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
                    <el-form-item  label="内容" size="default" prop="caseContent">
                        <Wangeditor style="width: 100%" :value="form.caseContent"
                                     showTop=""></Wangeditor>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { timeDate } from '/@/assets/index.ts';
import type { FormInstance, FormRules } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem';
import Wangeditor from './component/wangEditor/index.vue';
import {useRoute} from 'vue-router'
export default defineComponent({
    components: {Wangeditor},
    setup(props, { emit }) {
        const route = useRoute();
        const num = route.query.id;
        const dialogVisible = ref<boolean>(false);
        const form = ref({
            caseTitle: '',///案例标题
            caseContent: '',///案例内容
            caseTime: '',
        });
    onMounted(()=>{
        listApi(num)
    })
    const listApi=(id:any)=>{
        accidentManagementSystemApi()
                    .getaccidentCaseDetail(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            form.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
    }
				
        return {
            timeDate,
            form,
            dialogVisible,
            Search,
            route,
            num
        };
    },
});
</script>
<style scoped>
.el-col {
    padding: 20px 0 0 0;
}
</style>