youxiw2000 / trash · Commits

Commit d5907155ea5bc7f242fd6a45a635a059cd575945

Authored by 2c
1 parent 19895dc8

文件资料

Inline Side-by-side
Showing 5 changed files with 412 additions and 135 deletions
trash-ui/src/components/2cEditor/index.vue 0 → 100644
  View file @d590715
  1 +<template>
  2 + <div>
  3 + <el-upload
  4 + :action="uploadUrl"
  5 + :before-upload="handleBeforeUpload"
  6 + :on-success="handleUploadSuccess"
  7 + :on-error="handleUploadError"
  8 + name="file"
  9 + :show-file-list="false"
  10 + :headers="headers"
  11 + style="display: none"
  12 + ref="upload"
  13 + v-if="this.type == 'url'"
  14 + >
  15 + </el-upload>
  16 + <div class="editor" ref="editor" :style="styles"></div>
  17 + </div>
  18 +</template>
  19 +
  20 +<script>
  21 +import Quill from "quill";
  22 +import "quill/dist/quill.core.css";
  23 +import "quill/dist/quill.snow.css";
  24 +import "quill/dist/quill.bubble.css";
  25 +import { getToken } from "@/utils/auth";
  26 +
  27 +export default {
  28 + name: "Editor",
  29 + props: {
  30 + /* 编辑器的内容 */
  31 + value: {
  32 + type: String,
  33 + default: "",
  34 + },
  35 + /* 高度 */
  36 + height: {
  37 + type: Number,
  38 + default: null,
  39 + },
  40 + /* 最小高度 */
  41 + minHeight: {
  42 + type: Number,
  43 + default: null,
  44 + },
  45 + /* 只读 */
  46 + readOnly: {
  47 + type: Boolean,
  48 + default: false,
  49 + },
  50 + /* 上传文件大小限制(MB) */
  51 + fileSize: {
  52 + type: Number,
  53 + default: 5,
  54 + },
  55 + /* 类型（base64格式、url格式） */
  56 + type: {
  57 + type: String,
  58 + default: "url",
  59 + }
  60 + },
  61 + data() {
  62 + return {
  63 + uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
  64 + headers: {
  65 + Authorization: "Bearer " + getToken()
  66 + },
  67 + Quill: null,
  68 + currentValue: "",
  69 + options: {
  70 + theme: "snow",
  71 + bounds: document.body,
  72 + debug: "warn",
  73 + modules: {
  74 + // 工具栏配置
  75 + toolbar: [
  76 + ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  77 + ["blockquote", "code-block"], // 引用 代码块
  78 + [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
  79 + [{indent: "-1"}, {indent: "+1"}], // 缩进
  80 + [{size: ["small", false, "large", "huge"]}], // 字体大小
  81 + [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
  82 + [{color: []}, {background: []}], // 字体颜色、字体背景颜色
  83 + [{align: []}], // 对齐方式
  84 + ["clean"], // 清除文本格式
  85 + ["link", "image"] // 链接、图片、视频
  86 + ],
  87 + },
  88 + placeholder: "请输入内容",
  89 + readOnly: this.readOnly,
  90 + },
  91 + };
  92 + },
  93 + computed: {
  94 + styles() {
  95 + let style = {};
  96 + if (this.minHeight) {
  97 + style.minHeight = `${this.minHeight}px`;
  98 + }
  99 + if (this.height) {
  100 + style.height = `${this.height}px`;
  101 + }
  102 + return style;
  103 + },
  104 + },
  105 + watch: {
  106 + value: {
  107 + handler(val) {
  108 + if (val !== this.currentValue) {
  109 + this.currentValue = val === null ? "" : val;
  110 + if (this.Quill) {
  111 + this.Quill.pasteHTML(this.currentValue);
  112 + }
  113 + }
  114 + },
  115 + immediate: true,
  116 + },
  117 + },
  118 + mounted() {
  119 + this.init();
  120 + },
  121 + beforeDestroy() {
  122 + this.Quill = null;
  123 + },
  124 + methods: {
  125 + init() {
  126 + const editor = this.$refs.editor;
  127 + this.Quill = new Quill(editor, this.options);
  128 + // 如果设置了上传地址则自定义图片上传事件
  129 + if (this.type == 'url') {
  130 + let toolbar = this.Quill.getModule("toolbar");
  131 + toolbar.addHandler("image", (value) => {
  132 + if (value) {
  133 + this.$refs.upload.$children[0].$refs.input.click();
  134 + } else {
  135 + this.quill.format("image", false);
  136 + }
  137 + });
  138 + }
  139 + this.Quill.pasteHTML(this.currentValue);
  140 + this.Quill.on("text-change", (delta, oldDelta, source) => {
  141 + const html = this.$refs.editor.children[0].innerHTML;
  142 + const text = this.Quill.getText();
  143 + const quill = this.Quill;
  144 + this.currentValue = html;
  145 + this.$emit("input", html);
  146 + this.$emit("on-change", {html, text, quill});
  147 + });
  148 + this.Quill.on("text-change", (delta, oldDelta, source) => {
  149 + this.$emit("on-text-change", delta, oldDelta, source);
  150 + });
  151 + this.Quill.on("selection-change", (range, oldRange, source) => {
  152 + this.$emit("on-selection-change", range, oldRange, source);
  153 + });
  154 + this.Quill.on("editor-change", (eventName, ...args) => {
  155 + this.$emit("on-editor-change", eventName, ...args);
  156 + });
  157 + },
  158 + // 上传前校检格式和大小
  159 + handleBeforeUpload(file) {
  160 + const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
  161 + const isJPG = type.includes(file.type);
  162 + // 检验文件格式
  163 + if (!isJPG) {
  164 + this.$message.error(`图片格式错误!`);
  165 + return false;
  166 + }
  167 + // 校检文件大小
  168 + if (this.fileSize) {
  169 + const isLt = file.size / 1024 / 1024 < this.fileSize;
  170 + if (!isLt) {
  171 + this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
  172 + return false;
  173 + }
  174 + }
  175 + return true;
  176 + },
  177 + handleUploadSuccess(res, file) {
  178 + // 如果上传成功
  179 + if (res.code == 200) {
  180 + // 获取富文本组件实例
  181 + let quill = this.Quill;
  182 + // 获取光标所在位置
  183 + let length = quill.getSelection().index;
  184 + // 插入图片 res.url为服务器返回的图片地址
  185 + quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
  186 + // 调整光标到最后
  187 + quill.setSelection(length + 1);
  188 + } else {
  189 + this.$message.error("图片插入失败");
  190 + }
  191 + },
  192 + handleUploadError() {
  193 + this.$message.error("图片插入失败");
  194 + },
  195 + },
  196 +};
  197 +</script>
  198 +
  199 +<style>
  200 +.editor, .ql-toolbar {
  201 + white-space: pre-wrap !important;
  202 + line-height: normal !important;
  203 +}
  204 +
  205 +.quill-img {
  206 + display: none;
  207 +}
  208 +
  209 +.ql-snow .ql-tooltip[data-mode="link"]::before {
  210 + content: "请输入链接地址:";
  211 +}
  212 +
  213 +.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  214 + border-right: 0px;
  215 + content: "保存";
  216 + padding-right: 0px;
  217 +}
  218 +
  219 +.ql-snow .ql-tooltip[data-mode="video"]::before {
  220 + content: "请输入视频地址:";
  221 +}
  222 +
  223 +.ql-snow .ql-picker.ql-size .ql-picker-label::before,
  224 +.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  225 + content: "14px";
  226 +}
  227 +
  228 +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  229 +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  230 + content: "10px";
  231 +}
  232 +
  233 +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  234 +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  235 + content: "18px";
  236 +}
  237 +
  238 +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  239 +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  240 + content: "32px";
  241 +}
  242 +
  243 +.ql-snow .ql-picker.ql-header .ql-picker-label::before,
  244 +.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  245 + content: "文本";
  246 +}
  247 +
  248 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  249 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  250 + content: "标题1";
  251 +}
  252 +
  253 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  254 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  255 + content: "标题2";
  256 +}
  257 +
  258 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  259 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  260 + content: "标题3";
  261 +}
  262 +
  263 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  264 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  265 + content: "标题4";
  266 +}
  267 +
  268 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  269 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  270 + content: "标题5";
  271 +}
  272 +
  273 +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  274 +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  275 + content: "标题6";
  276 +}
  277 +
  278 +.ql-snow .ql-picker.ql-font .ql-picker-label::before,
  279 +.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  280 + content: "标准字体";
  281 +}
  282 +
  283 +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  284 +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  285 + content: "衬线字体";
  286 +}
  287 +
  288 +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  289 +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  290 + content: "等宽字体";
  291 +}
  292 +</style>
... ...
trash-ui/src/router/index.js
  View file @d590715
... ... @@ -187,6 +187,13 @@ export const constantRoutes = [
187 187 hidden: true,
188 188 meta: { title: '修改驾驶员' }
189 189 },
  190 + {
  191 + path: '/documentData/info',
  192 + component: (resolve) => require(['@/views/other/documentData/info'], resolve),
  193 + name: '查看详情',
  194 + hidden: true,
  195 + meta: { title: '查看详情' }
  196 + },
190 197 ]
191 198 },
192 199 {
... ... @@ -205,12 +212,12 @@ export const constantRoutes = [
205 212 component: (resolve) => require(['@/views/business/track'], resolve),
206 213 name: '跟踪监督',
207 214 meta: { title: '跟踪监督' }
208   - },
209   - {
210   - path: 'trackTable',
211   - component: (resolve) => require(['@/views/business/track/trackTable'], resolve),
212   - name: '纪检报表',
213   - meta: { title: '纪检报表' }
  215 + },
  216 + {
  217 + path: 'trackTable',
  218 + component: (resolve) => require(['@/views/business/track/trackTable'], resolve),
  219 + name: '纪检报表',
  220 + meta: { title: '纪检报表' }
214 221 },
215 222 {
216 223 path: 'supervision/threestep',
... ...
trash-ui/src/views/other/documentData/index.vue
  View file @d590715
... ... @@ -64,8 +64,11 @@
64 64  
65 65 <el-table v-loading="loading" :data="documentDataList" @selection-change="handleSelectionChange">
66 66 <el-table-column type="selection" width="55" align="center"/>
67   - <el-table-column label="附件" align="center" prop="id"/>
68   - <el-table-column label="标题" align="center" prop="title"/>
  67 + <el-table-column label="标题" align="center" prop="title">
  68 + <template slot-scope="scope">
  69 + <a href="javascript:;" style="color:#0000EE;" @click="toInfo(scope.row)">{{scope.row.title}}</a>
  70 + </template>
  71 + </el-table-column>
69 72 <el-table-column label="时间" align="center" prop="createTime">
70 73 <template slot-scope="scope">
71 74 <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
... ... @@ -102,7 +105,7 @@
102 105 />
103 106  
104 107 <!-- 添加或修改文件资料对话框 -->
105   - <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
  108 + <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
106 109 <el-form ref="form" :model="form" :rules="rules" label-width="80px">
107 110 <el-form-item label="标题" prop="title">
108 111 <el-input v-model="form.title" placeholder="请输入标题"/>
... ... @@ -122,49 +125,7 @@
122 125 </el-form-item>
123 126 </el-col>
124 127 </el-row>
125   - <el-form-item label="附件预览">
126   - <el-image v-for="item in fileEntityList"
127   - v-if="!/\.(pjp|pdf|doc|docx|xls|xlsx)$/.test(item.name)"
128   - style="width: 150px; height: 100px; margin: 5px;"
129   - :src="createUrl(item)"
130   - :preview-src-list="[createUrl(item)]"
131   - :z-index="999">
132   - </el-image>
133   - </el-form-item>
134   - <el-form-item prop="fileEntityList" label="附件">
135   - <el-upload
136   - ref="upload"
137   - action=""
138   - accept=".jpg,.jpeg,.png,.gif,.jfif,.pjpeg,.pjp,.pdf,.doc,.docx,.xls,.xlsx"
139   - :on-change="fileChange"
140   - :auto-upload="false"
141   - :show-file-list="false"
142   - multiple
143   - :file-list="fileEntityList">
144   - <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
145   - </el-upload>
146   - </el-form-item>
147   - <el-table :data="fileEntityList">
148   - <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
149   - <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
150   - <template slot-scope="scope">
151   - <el-button
152   - size="small" type="success"
153   - icon="el-icon-download"
154   - @click="tempDownload(scope.row)"
155   - v-hasPermi="['other:documentData:edit']"
156   - round>下载
157   - </el-button>
158   - <el-button
159   - size="small" type="danger"
160   - icon="el-icon-delete"
161   - @click="handleDeleteFile(scope.$index)"
162   - v-hasPermi="['other:documentData:remove']"
163   - round>删除
164   - </el-button>
165   - </template>
166   - </el-table-column>
167   - </el-table>
  128 +
168 129 </el-form>
169 130 <div slot="footer" class="dialog-footer">
170 131 <el-button type="primary" @click="submitForm">确 定</el-button>
... ... @@ -183,7 +144,7 @@ import {
183 144 listDocumentData,
184 145 updateDocumentData
185 146 } from "@/api/other/documentData";
186   -import Editor from '@/components/ZcEditor';
  147 +import Editor from '@/components/2cEditor';
187 148 import {parseTime} from "../../../utils/trash";
188 149  
189 150 export default {
... ... @@ -240,6 +201,10 @@ export default {
240 201 this.getList();
241 202 },
242 203 methods: {
  204 + toInfo(row){
  205 + //打开当日报修页签
  206 + this.$tab.openPage("查看详情","/documentData/info",{"documentData":row})
  207 + },
243 208 /** 查询文件资料列表 */
244 209 getList() {
245 210 this.loading = true;
... ... @@ -320,18 +285,6 @@ export default {
320 285 let form = this.form;
321 286 //去掉params属性
322 287 delete form.params;
323   - //先清空原有的附件
324   - form.files = null;
325   -
326   -
327   - this.fileEntityList.forEach(item => {
328   - if (item.raw != null) {
329   - formData.append('fileList', item.raw)
330   - } else {
331   - //将原有的附件拼接到form中
332   - form.files = form.files !== null ? form.files + ";" + item.url : item.url;
333   - }
334   - })
335 288  
336 289 for (let key in form) {
337 290 formData.append(key, form[key] == null ? "" : form[key])
... ... @@ -380,75 +333,6 @@ export default {
380 333 this.download(response.msg);
381 334 })
382 335 },
383   - /**
384   - * 文件改变时,限制文件上传格式和大小
385   - * 文件格式只能为docx/doc/pdf/png/jpeg/png/jpg
386   - * 大小不超过20M
387   - * */
388   - fileChange(file, fileList) {
389   - let count = 0;
390   - for (let i = 0; i < fileList.length; i++) {
391   - // console.log(fileList.length)
392   - // console.log(this.fileEntityList[i].name+"111"+file.name)
393   - if (fileList[i].name == file.name) {
394   - count++;
395   - if (count == 2) {
396   - this.$message({
397   - message: '已存在此文件！',
398   - type: 'warning'
399   - });
400   - for (let j = fileList.length; j > 0; j--) {
401   - //如果存在此文件，去除新选择的重复文件
402   - if (fileList[j - 1].name == file.name) {
403   - fileList.splice(j - 1, 1);
404   - i--;
405   - return false;
406   - }
407   - }
408   - }
409   - }
410   - }
411   - let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
412   - //格式符合后判断大小
413   - if ("jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx".indexOf(fileType) != -1) {
414   - let max5M = file.size / 1024 / 1024 < 100;
415   - if (!max5M) {
416   - this.$message({
417   - message: '上传文件大小不得超过100M！',
418   - type: 'warning'
419   - });
420   - fileList = fileList.splice(fileList.length - 1, 1);
421   - } else {
422   - //符合条件后进行添加
423   - this.fileEntityList = fileList
424   - }
425   - } else {
426   - this.$message({
427   - message: '上传文件只能是 jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx格式!',
428   - type: 'warning'
429   - });
430   - fileList = fileList.splice(fileList.length - 1, 1);
431   - }
432   - },
433   - // 删除文件
434   - handleDeleteFile(index) {
435   - this.fileEntityList.splice(index, 1);
436   - },
437   - /** 文件下载 */
438   - tempDownload(row) {
439   - let name = row.name;
440   - let url = "";
441   - if (row.raw != null) {
442   - url = URL.createObjectURL(row.raw);
443   - } else {
444   - url = process.env.VUE_APP_BASE_API + row.url;
445   - }
446   - const a = document.createElement('a')
447   - a.setAttribute('download', name)
448   - a.setAttribute('target', '_blank')
449   - a.setAttribute('href', url);
450   - a.click()
451   - },
452 336 createUrl(file) {
453 337 if (file.raw != null) {
454 338 return URL.createObjectURL(file.raw);
... ...
trash-ui/src/views/other/documentData/info.vue 0 → 100644
  View file @d590715
  1 +<template>
  2 + <div class="app-container">
  3 + <el-row>
  4 + <el-col :offset="3" :span="18">
  5 + <h1 class="info_title">{{ info.title }}</h1>
  6 + </el-col>
  7 + </el-row>
  8 + <el-row>
  9 + <el-col :offset="3" :span="18">
  10 + <div class="info_author">
  11 + <span>作者：</span><span>{{ info.createBy }}</span>
  12 + <span>发表时间：</span><span>{{ info.createTime }}</span>
  13 + </div>
  14 + </el-col>
  15 + </el-row>
  16 + <el-row>
  17 + <el-col>
  18 + <div class="info_content" v-html="info.content"></div>
  19 + </el-col>
  20 + </el-row>
  21 + </div>
  22 +</template>
  23 +
  24 +<script>
  25 +import {
  26 + addDocumentData,
  27 + delDocumentData,
  28 + exportDocumentData,
  29 + getDocumentData,
  30 + listDocumentData,
  31 + updateDocumentData
  32 +} from "@/api/other/documentData";
  33 +import Editor from '@/components/ZcEditor';
  34 +import {parseTime} from "../../../utils/trash";
  35 +
  36 +export default {
  37 + name: "DocumentData",
  38 + components: {Editor},
  39 + data() {
  40 + return {
  41 + // 遮罩层
  42 + loading: true,
  43 + info: {
  44 + title:null,
  45 + createBy:null,
  46 + createTime:null,
  47 + content:null
  48 + },
  49 + };
  50 + },
  51 + created() {
  52 + this.initData();
  53 + },
  54 + watch:{
  55 + '$route.query.documentData':'initData'
  56 + },
  57 + methods: {
  58 + initData(){
  59 + if(this.$route.query.documentData){
  60 + this.info = this.$route.query.documentData;
  61 + }
  62 +
  63 + }
  64 + }
  65 +};
  66 +</script>
  67 +<style lang="scss" scoped>
  68 +.info_title{
  69 + display: flex;
  70 + justify-content: center;
  71 + align-items: center;
  72 + height: 100%;
  73 +}
  74 +.info_author{
  75 + display: flex;
  76 + justify-content: center;
  77 + align-items: center;
  78 + height: 26px;
  79 + font-size:14px;
  80 + color: #616977;
  81 + border-bottom: 1px solid #ddd;
  82 + box-shadow: 0px 20px 20px -20px #5E5E5E;
  83 +}
  84 +.info_author span:nth-child(2){
  85 + margin-right: 20px;
  86 +}
  87 +.info_content{
  88 + display: flex;
  89 + justify-content: center;
  90 + align-items: center;
  91 + height: 100%;
  92 +}
  93 +</style>
... ...
trash-workFlow/src/main/resources/mapper/other/DocumentDataMapper.xml
  View file @d590715
... ... @@ -26,8 +26,9 @@ PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
26 26 <if test="content != null and content != ''"> and content = #{content}</if>
27 27 <if test="files != null and files != ''"> and files = #{files}</if>
28 28 </where>
  29 + order by create_time desc
29 30 </select>
30   -
  31 +
31 32 <select id="selectDocumentDataById" parameterType="Long" resultMap="DocumentDataResult">
32 33 <include refid="selectDocumentDataVo"/>
33 34 where id = #{id}
... ...