From 37d2ba3d2c1902202c8c7ee9485267b5a1945742 Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期三, 11 六月 2025 10:26:36 +0800 Subject: [PATCH] 测试完成 --- src/views/patient/propaganda/index.vue | 109 +++++++++--- src/assets/styles/global.css | 64 +++++++ package.json | 2 src/components/WangEditor/index.vue | 57 ++++++ src/views/knowledge/education/compilequer/index.vue | 268 +++++++++++++++-------------- 5 files changed, 339 insertions(+), 161 deletions(-) diff --git a/package.json b/package.json index 4c219ff..2994555 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "@riophae/vue-treeselect": "0.4.0", "@vue/babel-plugin-jsx": "^1.1.5", "@vue/composition-api": "^1.0.0-rc.6", + "@wangeditor/editor": "^5.1.23", + "@wangeditor/editor-for-vue": "^1.0.2", "axios": "0.24.0", "clipboard": "2.0.8", "codemirror": "^5.65.13", diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css new file mode 100644 index 0000000..61f9bf1 --- /dev/null +++ b/src/assets/styles/global.css @@ -0,0 +1,64 @@ +/* 瀹氫箟娣¤摑鑹蹭富鑹茶皟 */ +:root { + --editor-primary-color: #007bff; /* 涓昏壊璋� */ + --editor-background-color: #f8f9fa; /* 鑳屾櫙棰滆壊 */ + --editor-border-color: #dee2e6; /* 杈规棰滆壊 */ + --editor-text-color: #343a40; /* 鏂囧瓧棰滆壊 */ +} + +/* 瑕嗙洊缂栬緫鍣ㄧ殑榛樿鏍峰紡 */ +.w-e-toolbar { + background-color: var(--editor-background-color); + border-bottom: 1px solid var(--editor-border-color); + color: var(--editor-text-color); +} + +.w-e-toolbar .w-e-menu { + background-color: transparent; + color: var(--editor-text-color); +} + +.w-e-toolbar .w-e-menu:hover { + background-color: var(--editor-primary-color); + color: white; +} + +.w-e-toolbar .w-e-menu.w-e-active { + background-color: var(--editor-primary-color); + color: white; +} + +.w-e-toolbar .w-e-menu .w-e-icon { + fill: var(--editor-text-color); +} + +.w-e-toolbar .w-e-menu:hover .w-e-icon { + fill: white; +} + +.w-e-toolbar .w-e-menu.w-e-active .w-e-icon { + fill: white; +} + +.w-e-text-container { + background-color: white; + border: 1px solid var(--editor-border-color); + color: var(--editor-text-color); +} + +.w-e-text-container .w-e-text { + color: var(--editor-text-color); +} + +.w-e-text-container .w-e-text img { + border: 1px solid var(--editor-border-color); +} + +.w-e-text-container .w-e-text a { + color: var(--editor-primary-color); + text-decoration: underline; +} + +.w-e-text-container .w-e-text a:hover { + color: #0056b3; +} diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue new file mode 100644 index 0000000..f4b9aa5 --- /dev/null +++ b/src/components/WangEditor/index.vue @@ -0,0 +1,57 @@ +<template> + <div> + <div ref="editor" style="text-align: left;"></div> + </div> +</template> + +<script> +import E from 'wangeditor'; + +export default { + name: 'WangEditor', + data() { + return { + editor: null, // WangEditor 瀹炰緥 + }; + }, + props: { + content: { + type: String, + default: '' + } + }, + watch: { + // 褰撶埗缁勪欢浼犲叆鐨� content 鍙樺寲鏃讹紝鏇存柊缂栬緫鍣ㄥ唴瀹� + content(newContent) { + if (this.editor && newContent !== this.editor.txt.html()) { + this.editor.txt.html(newContent); + } + } + }, + mounted() { + // 鍒濆鍖� WangEditor + this.editor = new E(this.$refs.editor); + this.editor.config.onchange = () => { + // 缂栬緫鍣ㄥ唴瀹瑰彉鍖栨椂锛岃Е鍙� input 浜嬩欢浼犻�掔粰鐖剁粍浠� + this.$emit('input', this.editor.txt.html()); + }; + // 閰嶇疆鑿滃崟鍜屽叾浠栬缃� + this.editor.config.menus = [ + 'head', 'bold', 'italic', 'underline', 'image', 'link', 'list', 'undo', 'redo' + ]; + this.editor.config.zIndex = 1000; + // 鍒涘缓缂栬緫鍣� + this.editor.create(); + // 璁剧疆鍒濆鍐呭 + if (this.content) { + this.editor.txt.html(this.content); + } + }, + beforeDestroy() { + // 閿�姣佺紪杈戝櫒瀹炰緥锛岄噴鏀捐祫婧� + if (this.editor) { + this.editor.destroy(); + } + } +}; +</script> diff --git a/src/views/knowledge/education/compilequer/index.vue b/src/views/knowledge/education/compilequer/index.vue index be12c5b..1060bfa 100644 --- a/src/views/knowledge/education/compilequer/index.vue +++ b/src/views/knowledge/education/compilequer/index.vue @@ -24,6 +24,7 @@ <!-- 鍩烘湰淇℃伅 --> <div v-if="Editprogress == 1"> <div class="leftvlue-jbxx">鍩烘湰淇℃伅</div> + <el-divider></el-divider> <el-form :model="ruleForm" :rules="rules" @@ -258,6 +259,18 @@ <el-col :span="4"> <div class="leftvlue-jbxx">瀹f暀鍐呭</div> </el-col> + <el-col :offset="16" :span="4"> + <el-upload + class="upload-demo" + :action="uploadImgUrlword" + :on-success="uploadEditorSuccessword" + :on-error="uploadEditorErrorword" + :before-upload="beforeEditorUploadword" + :headers="headers" + > + <el-button size="small" type="primary">word鏂囦欢涓婁紶</el-button> + </el-upload> + </el-col> </el-row> <div> @@ -268,7 +281,7 @@ label-width="100px" class="demo-ruleForm" > - <el-row :gutter="20"> + <!-- <el-row :gutter="20"> <el-col :span="12"> <el-form-item label="璧勬枡褰㈠紡" prop="region"> <el-select @@ -285,40 +298,14 @@ </el-select> </el-form-item> </el-col> - <el-col :span="12"> - <div> - <el-button @click="laststep('ruleForm')">涓婁竴姝�</el-button> - <el-button - type="success" - @click="Departmenttreatment('ruleForm')" - >淇濆瓨</el-button - > - <el-button - type="warning" - @click="Departmenttreatment('ruleForm')" - >鍙﹀瓨鏂扮増鏈�</el-button - > - <el-button type="info" @click="closeFm('ruleForm')" - >鍏抽棴</el-button - > - </div> - </el-col> - </el-row> + <el-col :span="12"> --> + + <!-- </el-col> + </el-row> --> </el-form> </div> - <div> - <el-upload - class="upload-demo" - :action="uploadImgUrlword" - :on-success="uploadEditorSuccessword" - :on-error="uploadEditorErrorword" - :before-upload="beforeEditorUploadword" - :headers="headers" - > - <el-button size="small" type="primary">word鏂囦欢涓婁紶</el-button> - </el-upload> + <!-- <div> <div id="quillEditorQiniu"> - <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload begin--> <el-upload class="avatar-uploader" :action="uploadImgUrl" @@ -330,7 +317,6 @@ :headers="headers" > </el-upload> - <!-- 鍩轰簬elementUi鐨勪笂浼犵粍浠� el-upload end--> <quill-editor class="editor" v-model="content" @@ -342,6 +328,32 @@ > </quill-editor> </div> + </div> --> + <!-- 鏂扮粍浠� --> + <div style="border: 1px solid #ccc; margin: 10px"> + <Toolbar + style="border-bottom: 1px solid #ccc" + :editor="editor" + :defaultConfig="toolbarConfig" + :mode="modes" + /> + <Editor + style="height: 500px; overflow-y: hidden" + v-model="content" + :defaultConfig="editorConfig" + :mode="modes" + @onCreated="onCreated" + /> + </div> + <div> + <el-button @click="laststep('ruleForm')">涓婁竴姝�</el-button> + <el-button type="success" @click="Departmenttreatment('ruleForm')" + >淇濆瓨</el-button + > + <el-button type="warning" @click="Departmenttreatment('ruleForm')" + >鍙﹀瓨鏂扮増鏈�</el-button + > + <el-button type="info" @click="closeFm('ruleForm')">鍏抽棴</el-button> </div> </div> </div> @@ -358,6 +370,7 @@ <script> import { quillEditor } from "vue-quill-editor"; +import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import axios from "axios"; import { @@ -411,9 +424,80 @@ export default { name: "aEducationinfo", - components: { OptionalForm }, + components: { OptionalForm, Editor, Toolbar }, data() { return { + editor: null, + content: "<p>hello</p>", + toolbarConfig: {}, + editorConfig: { + placeholder: "璇疯緭鍏ュ唴瀹�...", + menus: [ + "head", + "bold", + "italic", + "underline", + "image", + "link", + "list", + "undo", + "redo", + "file", // 娣诲姞鑷畾涔夋枃浠朵笂浼犺彍鍗� + ], + uploadImgServer: process.env.VUE_APP_BASE_API + "/common/uploadSort", // 鍥剧墖涓婁紶鎺ュ彛 + uploadImgHeaders: { + Authorization: "Bearer " + getToken(), + }, // 鑷畾涔変笂浼犵殑 headers + uploadImgParams: { key: "value" }, // 鑷畾涔変笂浼犵殑鍙傛暟 + uploadImgMaxSize: 2 * 1024 * 1024, // 鍥剧墖鏈�澶уぇ灏忥紝鍗曚綅 Byte + uploadImgMaxLength: 1, // 涓�娆℃渶澶氫笂浼犲浘鐗囨暟閲� + uploadImgTimeout: 3 * 60 * 1000, // 瓒呮椂鏃堕棿锛屽崟浣� ms + uploadImgHooks: { + customInsert: (insertImgFn, result) => { + const url = result.url; // 鑾峰彇鍥剧墖鍦板潃 + insertImgFn(url); // 鎻掑叆鍥剧墖 + }, + }, + customMenus: { + file: { + tip: "涓婁紶鏂囦欢", + click: (editor) => { + const input = document.createElement("input"); + input.type = "file"; + input.accept = + "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"; // 鏀寔鐨勬枃浠剁被鍨� + input.onchange = (e) => { + const file = e.target.files[0]; + if (!file) return; + const formData = new FormData(); + formData.append("file", file); + + // 纭繚 process.env.VUE_APP_BASE_API 鏄纭殑 + const uploadUrl = + process.env.VUE_APP_BASE_API + "/common/uploadSort"; + axios + .post(uploadUrl, formData, { + headers: { + Authorization: "Bearer " + getToken(), + }, + }) + .then((res) => { + const url = res.data.url; // 鑾峰彇鏂囦欢鍦板潃 + // 鎻掑叆鏂囦欢閾炬帴浣滀负鏅�氭枃鏈� + editor.txt.append(url + " "); + // 鎴栬�呮彃鍏ユ枃浠堕摼鎺ヤ綔涓鸿秴閾炬帴 + // editor.cmd.do('insertLink', { name: '鏂囦欢閾炬帴', url: url }); + }) + .catch((err) => { + console.error("鏂囦欢涓婁紶澶辫触", err); + }); + }; + input.click(); + }, + }, + }, + }, + modes: "default", // or 'simple' headers: { Authorization: "Bearer " + getToken(), }, @@ -577,8 +661,17 @@ console.log(oldVal, "B"); }, }, - + beforeDestroy() { + const editor = this.editor; + if (editor == null) return; + editor.destroy(); // 缁勪欢閿�姣佹椂锛屽強鏃堕攢姣佺紪杈戝櫒 + }, methods: { + onCreated(editor) { + this.editor = Object.seal(editor); // 涓�瀹氳鐢� Object.seal()锛屽惁鍒欎細鎶ラ敊 + }, + + // --------------------------------- processElement(element) { return { ...element, isoperation: null }; }, @@ -943,7 +1036,7 @@ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃� let length = quill.getSelection().index; // 鎻掑叆鍥剧墖||瑙嗛 res.info涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧� - if (type == "mp4" || type == "MP4"|| type == "avi"|| type == "AVI") { + if (type == "mp4" || type == "MP4" || type == "avi" || type == "AVI") { window.jsValue = imgUrl; quill.insertEmbed(length, "video", imgUrl); } else { @@ -1034,12 +1127,9 @@ }, }; </script> - +<style src="@wangeditor/editor/dist/css/style.css"></style> +<style src="@/assets/styles/global.css"></style> <style lang="scss" scoped> -.Questionnairemanagement { - // display: flex; -} - .sidecolumn { // width: 300px; // min-height: 100vh; @@ -1070,8 +1160,10 @@ } .leftvlue-jbxx { - margin-bottom: 50px; - font-size: 20px; + font-size: 24px; + height: 30px; + border-left: 3px solid #41a1be; + padding-left: 3px; span { position: absolute; @@ -1225,95 +1317,5 @@ span { font-size: 24px; } -} - -.editor { - line-height: normal !important; - height: 600px; - margin-bottom: 80px; -} - -.ql-snow .ql-tooltip[data-mode="link"]::before { - content: "璇疯緭鍏ラ摼鎺ュ湴鍧�:"; -} - -.ql-snow .ql-tooltip.ql-editing a.ql-action::after { - border-right: 0px; - content: "淇濆瓨"; - padding-right: 0px; -} - -.ql-snow .ql-tooltip[data-mode="video"]::before { - content: "璇疯緭鍏ヨ棰戝湴鍧�:"; -} - -.ql-snow .ql-picker.ql-size .ql-picker-label::before, -.ql-snow .ql-picker.ql-size .ql-picker-item::before { - content: "14px"; -} - -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { - content: "10px"; -} - -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { - content: "18px"; -} - -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { - content: "32px"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label::before, -.ql-snow .ql-picker.ql-header .ql-picker-item::before { - content: "鏂囨湰"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { - content: "鏍囬1"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { - content: "鏍囬2"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { - content: "鏍囬3"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { - content: "鏍囬4"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { - content: "鏍囬5"; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { - content: "鏍囬6"; -} - -.ql-snow .ql-picker.ql-font .ql-picker-label::before, -.ql-snow .ql-picker.ql-font .ql-picker-item::before { - content: "鏍囧噯瀛椾綋"; -} - -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { - content: "琛嚎瀛椾綋"; -} - -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { - content: "绛夊瀛椾綋"; } </style> diff --git a/src/views/patient/propaganda/index.vue b/src/views/patient/propaganda/index.vue index 8b7a8cf..46575a2 100644 --- a/src/views/patient/propaganda/index.vue +++ b/src/views/patient/propaganda/index.vue @@ -51,6 +51,15 @@ </el-option> </el-select> </el-form-item> + <el-form-item label="鎮h�呰寖鍥�" prop="status"> + <el-cascader + v-model="topqueryParams.scopetype" + placeholder="榛樿鍏ㄩ儴" + :options="sourcetype" + :props="{ expandTrigger: 'hover' }" + @change="handleChange" + ></el-cascader> + </el-form-item> <el-form-item label="瀹f暀鐘舵��" prop="status"> <el-select v-model="topqueryParams.sendstate" placeholder="璇烽�夋嫨"> @@ -266,9 +275,7 @@ prop="endDay" > <template slot-scope="scope"> - <span>{{ - scope.row.endDay ? scope.row.endDay + "澶�" : "" - }}</span> + <span>{{ scope.row.endDay ? scope.row.endDay + "澶�" : "" }}</span> </template> </el-table-column> <el-table-column @@ -292,7 +299,6 @@ key="drname" prop="drname" /> - <!-- <el-table-column label="鐥呭巻鍙�" @@ -366,20 +372,28 @@ </template> </el-table-column> --> <el-table-column - fixed="right" + fixed="right" label="浠诲姟缁撴灉璁板綍" width="120" align="center" key="remark" prop="remark" > - <template slot-scope="scope" v-if="scope.row.remark"> - <el-tag type="success" v-if="scope.row.sendstate!=5&&scope.row.sendstate!=4&&scope.row.remark">{{ scope.row.remark }}</el-tag> - <el-tag type="warning" v-else>{{ scope.row.remark }}</el-tag> - </template> - </el-table-column> + <template slot-scope="scope" v-if="scope.row.remark"> + <el-tag + type="success" + v-if=" + scope.row.sendstate != 5 && + scope.row.sendstate != 4 && + scope.row.remark + " + >{{ scope.row.remark }}</el-tag + > + <el-tag type="warning" v-else>{{ scope.row.remark }}</el-tag> + </template> + </el-table-column> <el-table-column - fixed="right" + fixed="right" label="瀹f暀鏃堕棿" sortable align="center" @@ -597,6 +611,22 @@ ruleForm: { type: [], }, + sourcetype: [ + { + value: 1, + label: "绉戝", + children: [], + }, + { + value: 2, + label: "鐥呭尯", + children: [], + }, + { + value: 3, + label: "鍏ㄩ儴", + }, + ], dynamicTags: ["閫夐」涓�", "閫夐」浜�", "閫夐」涓�"], //閫夐」 inputVisible: false, inputValue: "", @@ -723,7 +753,7 @@ pageSize: 10, serviceType: 4, searchscope: 2, - sendstate:2, + sendstate: 2, }, propss: { multiple: true }, options: [], @@ -772,7 +802,18 @@ watch: {}, created() { this.serviceState = store.getters.serviceState; - console.log(this.serviceState,'this.serviceState'); + this.sourcetype[0].children = store.getters.belongDepts.map((dept) => { + return { + label: dept.deptName, + value: dept.deptCode, + }; + }); + this.sourcetype[1].children = store.getters.belongWards.map((dept) => { + return { + label: dept.districtName, + value: dept.districtCode, + }; + }); this.getList(); this.getConfigKey("sys.user.initPassword").then((response) => { @@ -791,16 +832,7 @@ methods: { /** 鏌ヨ闂ㄨ瘖瀹f暀鏈嶅姟鍒楄〃 */ getList() { - if (this.topqueryParams.searchscope == 1) { - this.topqueryParams.leaveldeptcodes = store.getters.belongDepts.map( - (obj) => obj.deptCode - ); - this.topqueryParams.leavehospitaldistrictcodes = []; - } else if (this.topqueryParams.searchscope == 2) { - this.topqueryParams.leavehospitaldistrictcodes = - store.getters.belongWards.map((obj) => obj.districtCode); - this.topqueryParams.leaveldeptcodes = []; - } else { + if (this.topqueryParams.searchscope == 3) { this.topqueryParams.leaveldeptcodes = store.getters.belongDepts.map( (obj) => obj.deptCode ); @@ -809,10 +841,13 @@ } this.loading = true; - if (this.topqueryParams.leavehospitaldistrictcodes[0]&&this.topqueryParams.leaveldeptcodes[0]) { - this.topqueryParams.deptOrDistrict=2; - }else{ - this.topqueryParams.deptOrDistrict=1; + if ( + this.topqueryParams.leavehospitaldistrictcodes[0] && + this.topqueryParams.leaveldeptcodes[0] + ) { + this.topqueryParams.deptOrDistrict = 2; + } else { + this.topqueryParams.deptOrDistrict = 1; } getTaskservelist(this.topqueryParams).then((response) => { this.userList = response.rows[0].serviceSubtaskList; @@ -841,6 +876,24 @@ }, 200); } else { this.options = []; + } + }, + // 鎮h�呰寖鍥村鐞� + handleChange(value) { + let type = value[0]; + let code = value.slice(-1)[0]; + this.topqueryParams.leavehospitaldistrictcodes = []; + this.topqueryParams.leaveldeptcodes = []; + if (type == 1) { + this.topqueryParams.leaveldeptcodes.push(code); + this.topqueryParams.leavehospitaldistrictcodes = []; + this.topqueryParams.searchscope = 1; + } else if (type == 2) { + this.topqueryParams.leavehospitaldistrictcodes.push(code); + this.topqueryParams.leaveldeptcodes = []; + this.topqueryParams.searchscope = 2; + } else { + this.topqueryParams.searchscope = 3; } }, // 闂ㄨ瘖瀹f暀鐘舵�佷慨鏀� @@ -912,7 +965,7 @@ pageNum: 1, pageSize: 10, serviceType: 4, - sendstate:2, + sendstate: 2, }; this.handleQuery(); }, -- Gitblit v1.9.3