From c3f6f5906443df62ad462a5d098801afdab91cac Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期二, 06 九月 2022 16:27:57 +0800
Subject: [PATCH] 对接
---
src/views/accidentManagementSystem/accidentCases/component/DailogCases.vue | 2
src/views/accidentManagementSystem/accidentCasesCop/component/wangEditor/index.vue | 174 ++++++++++++++++++++++++++++++++++
src/views/accidentManagementSystem/accidentCasesCop/index.vue | 82 ++++++++++++++++
src/views/accidentManagementSystem/accidentCases/index.vue | 23 +++-
4 files changed, 275 insertions(+), 6 deletions(-)
diff --git a/src/views/accidentManagementSystem/accidentCases/component/DailogCases.vue b/src/views/accidentManagementSystem/accidentCases/component/DailogCases.vue
index 3f1ffb1..3bcf4a6 100644
--- a/src/views/accidentManagementSystem/accidentCases/component/DailogCases.vue
+++ b/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>
diff --git a/src/views/accidentManagementSystem/accidentCases/index.vue b/src/views/accidentManagementSystem/accidentCases/index.vue
index 8f7d01e..38728a1 100644
--- a/src/views/accidentManagementSystem/accidentCases/index.vue
+++ b/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,
diff --git a/src/views/accidentManagementSystem/accidentCasesCop/component/wangEditor/index.vue b/src/views/accidentManagementSystem/accidentCasesCop/component/wangEditor/index.vue
new file mode 100644
index 0000000..3953efc
--- /dev/null
+++ b/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>
diff --git a/src/views/accidentManagementSystem/accidentCasesCop/index.vue b/src/views/accidentManagementSystem/accidentCasesCop/index.vue
new file mode 100644
index 0000000..52831de
--- /dev/null
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.2