| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | 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: '', |
| | | }, |
| | | }); |
| | | // 下方导航与表格 |
| | |
| | | // 打开弹窗 |
| | | const Show = ref(); |
| | | const openD = (title: String, id: number) => { |
| | | Show.value.openDailog(title,id); |
| | | Show.value.openDailog(title, id); |
| | | }; |
| | | // 删除 |
| | | const onDelete = (id: number) => { |
| | |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | console.log(arr) |
| | | console.log(arr); |
| | | accidentManagementSystemApi() |
| | | .getaccidentCaseDelete(arr) |
| | | .then((res) => { |
| | |
| | | const add = () => { |
| | | listApi(); |
| | | }; |
| | | let router = useRouter(); |
| | | let jump = (id:any) => { |
| | | router.push({ |
| | | path: '/accidentCasesCop' , |
| | | query:{ |
| | | id:id, |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | return { |
| | | jump, |
| | | router, |
| | | listApi, |
| | | add, |
| | | resetForm, |
对比新文件 |
| | |
| | | <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> |
对比新文件 |
| | |
| | | <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> |