From 25f7177ca8bbe0bbebc79252d04b7fe816166357 Mon Sep 17 00:00:00 2001 From: dusheng <582200563@qq.com> Date: Tue, 7 Nov 2023 16:48:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8B=E8=BD=BD=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/config/index.js | 1 + src/main.js | 4 +- src/store/tabledata/index.js | 138 ++++++++++++++++++ src/views/enterpriseMaterials/main/index.vue | 34 ++--- .../materiaDetail/index.vue | 39 +++-- .../enterpriseServiceData/detail/index.vue | 40 +++-- .../enterpriseServiceData/list/index.vue | 98 +++++++++---- src/views/feedback/index.vue | 2 +- src/views/login.vue | 4 +- src/views/serviceData/detail/index.vue | 43 ++++-- src/views/serviceData/list/index.vue | 105 ++++++++----- src/views/spaceIndex/main/index.vue | 34 ++--- src/views/spaceIndex/materiaDetail/index.vue | 39 +++-- webpack.config.js | 28 ++++ 15 files changed, 446 insertions(+), 165 deletions(-) create mode 100644 webpack.config.js diff --git a/package.json b/package.json index aef7b4f..0615bd8 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,11 @@ "dayjs": "^1.9.7", "echarts": "^5.4.3", "element-ui": "^2.14.0", + "file-saver": "^2.0.5", "gho-menu": "^1.0.1", "loadash": "^1.0.0", "mockjs": "^1.1.0", + "qrcode": "^1.5.3", "vue": "^2.6.11", "vue-functional-data-merge": "^3.1.0", "vue-router": "^3.2.0", diff --git a/src/config/index.js b/src/config/index.js index 8acf4b5..d54b20b 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -1 +1,2 @@ export const appName = ""; +export const downloadUrl = "http://172.16.0.113:8082"; \ No newline at end of file diff --git a/src/main.js b/src/main.js index 8622072..d7c37b7 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,8 @@ import plugins from "./plugins"; import * as utils from "./utils"; // import echarts from "./utils/echarts"; // npm install echarts --save +import * as config from "@/config"; + // require("./mock"); import dayjs from "dayjs"; @@ -31,7 +33,7 @@ dayjs.updateLocale("zh-cn", { "鏄熸湡鍏�", ], }); - +Vue.prototype.$config = config; Vue.prototype.$utils = utils; Vue.prototype.$echarts = echarts; Vue.use(plugins); diff --git a/src/store/tabledata/index.js b/src/store/tabledata/index.js index 725e359..5a2fbb7 100644 --- a/src/store/tabledata/index.js +++ b/src/store/tabledata/index.js @@ -1,5 +1,6 @@ import testCardPhoto from "@/assets/img/test-card-photo.png"; import testBusiness from "@/assets/img/test-business.png"; + export default { namespaced: true, state: { @@ -22,6 +23,143 @@ export default { time: "2023-01-13", }, ], + enterpriseServiceData: [ + { + id: 1, + theme: "鍏充簬浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鈥滀竴浠朵簨鈥濈殑鐢宠", + status: "姝e父", + time: "2023-07-13 17:14:43", + fileName: "1鍏徃鐧昏锛堝妗堬級鐢宠涔�.doc", + file: "/assets/1鍏徃鐧昏锛堝妗堬級鐢宠涔�.doc", + }, + { + id: 2, + theme: "鍏充簬鍏徃鍒涗笟鎷呬繚璐锋鐢宠", + status: "鍑嗕簣璁稿彲", + time: "2023-04-25 15:28:36", + fileName: "2鍒涗笟鎷呬繚璐锋鐢宠琛�.png", + file: "/assets/1璧勪骇璇勪及鍔炰簨娴佺▼.png", + }, + { + id: 3, + theme: "鍏充簬璐熻矗闄愰浠ヤ笅鏉戦晣寤鸿宸ョ▼鐨勮川閲忓畨鍏ㄧ洃绠$殑鐢宠", + status: "涓嶄簣璁稿彲", + time: "2023-03-15 14:22:16", + fileName: "3鏉戦晣寤鸿宸ョ▼鐨勮川閲忓畨鍏ㄧ洃绠℃祦绋�.png", + file: "/assets/3鏉戦晣寤鸿宸ョ▼鐨勮川閲忓畨鍏ㄧ洃绠℃祦绋�.png", + }, + ], + + serviceData: [ + { + id: 1, + theme: "鍏充簬鏉庝簯鍐滆嵂缁忚惀璁稿彲(鏍稿彂) 鐨勭敵璇�", + status: "姝e父", + time: "2023-07-13 17:14:43", + fileName: "1鍐滆嵂鐢熶骇鎯呭喌鎶ュ憡.doc", + file: "/assets/1鍐滆嵂鐢熶骇鎯呭喌鎶ュ憡.doc", + }, + { + id: 2, + theme: "鍏充簬鏉庝簯鐢熻偛鏈嶅姟璇佺櫥璁扮殑鐢宠", + status: "鍑嗕簣璁稿彲", + time: "2023-04-25 15:28:36", + fileName: "2閲嶅簡甯傜敓鑲茬櫥璁版湇鍔¤〃.png", + file: "/assets/2閲嶅簡甯傜敓鑲茬櫥璁版湇鍔¤〃.png", + }, + { + id: 3, + theme: "鍏充簬鏉庝簯涓嶅姩浜х櫥璁扮殑鐢宠", + status: "涓嶄簣璁稿彲", + time: "2023-03-15 14:22:16", + fileName: "3涓嶅姩浜х櫥璁扮敵璇蜂功.doc", + file: "/assets/3涓嶅姩浜х櫥璁扮敵璇蜂功.doc", + }, + { + id: 4, + theme: "鍏充簬鏉庝簯鍖哄幙澧冨唴姘磋矾瀹㈣繍缁忚惀璁稿彲", + status: "鍑嗕簣璁稿彲", + time: "2023-02-18 14:28:15", + fileName: "4鍙樻洿缁忚惀鑼冨洿涔﹂潰鐢宠.doc", + file: "/assets/4鍙樻洿缁忚惀鑼冨洿涔﹂潰鐢宠.doc", + }, + ], + + SpaceIndexMain: [ + { + id: 1, + materialName: "鐢宠鍦ㄦ牎姹傝亴鍒涗笟琛ヨ创鐩稿叧璧勬枡", + opdateTime: "2023-01-13 12:25:23", + fileName: "1鍒涗笟琛ヨ创鐩稿叧鏉愭枡.docx", + file: "/assets/1鍒涗笟琛ヨ创鐩稿叧鏉愭枡.docx", + }, + { + id: 2, + materialName: "楂樼瓑瀛︽牎绛夋瘯涓氱敓鎺ユ敹鎵嬬画鍔炵悊鐩稿叧璧勬枡", + opdateTime: "2023-01-08 09:23:46", + fileName: "2姣曚笟鐢熷拰鍏朵粬娴佸姩浜哄彛鎺ユ敹鎵嬬画.jpg", + file: "/assets/2姣曚笟鐢熷拰鍏朵粬娴佸姩浜哄彛鎺ユ敹鎵嬬画.jpg", + }, + { + id: 3, + materialName: "鍙楃悊鍏垂甯堣寖鐢熻法鐪佷换鏁欑敵璇风浉鍏宠祫鏂�", + opdateTime: "2023-01-07 09:15:42", + fileName: "3閲嶅簡甯傚叕璐瑰笀鑼冩瘯涓氱敓璺ㄧ渷灏变笟鐢宠琛�.doc", + file: "/assets/3閲嶅簡甯傚叕璐瑰笀鑼冩瘯涓氱敓璺ㄧ渷灏变笟鐢宠琛�.doc", + }, + { + id: 4, + materialName: "妗f鐨勬帴鏀跺拰杞€掔殑鐩稿叧璧勬枡", + opdateTime: "2023-01-06 14:28:13", + fileName: "4娴佸姩浜哄憳浜轰簨妗f绠$悊鐧昏琛ㄥ強鎵樼鐢宠鎴栬皟妗e嚱.doc", + file: "/assets/4娴佸姩浜哄憳浜轰簨妗f绠$悊鐧昏琛ㄥ強鎵樼鐢宠鎴栬皟妗e嚱.doc", + }, + { + id: 5, + materialName: "鑱屼笟鎸囧鐩稿叧璧勬枡", + opdateTime: "2023-01-04 11:18:23", + fileName: "5鑱屼笟鎸囧.png", + file: "/assets/5鑱屼笟鎸囧.png", + }, + ], + + enterpriseMaterials: [ + { + id: 1, + materialName: "瀵硅祫浜ц瘎浼拌涓氱殑鐩戠潱妫€鏌ョ浉鍏虫潗鏂�", + opdateTime: "2023-01-13 12:25:23", + fileName: "1璧勪骇璇勪及鍔炰簨娴佺▼.png", + file: "/assets/1璧勪骇璇勪及鍔炰簨娴佺▼.png", + }, + { + id: 2, + materialName: "浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鈥滀竴浠朵簨鈥濈殑鐩稿叧鏉愭枡", + opdateTime: "2023-01-08 09:23:46", + fileName: "2鍏徃鐧昏锛堝妗堬級鐢宠涔�.doc", + file: "/assets/2鍏徃鐧昏锛堝妗堬級鐢宠涔�.doc", + }, + { + id: 3, + materialName: "闈炵粡钀ユ€т簰鑱旂綉淇℃伅鏈嶅姟澶囨鏍稿噯鐩稿叧璧勬枡", + opdateTime: "2023-01-07 09:15:42", + fileName: "3闈炵粡钀ユ€т簰鑱旂綉淇℃伅鏈嶅姟澶囨鏍稿噯 .pdf", + file: "/assets/3闈炵粡钀ユ€т簰鑱旂綉淇℃伅鏈嶅姟澶囨鏍稿噯 .pdf", + }, + { + id: 4, + materialName: "鍖哄潡閾句俊鎭湇鍔″妗堢殑鐩稿叧璧勬枡", + opdateTime: "2023-01-06 14:28:13", + fileName: "4鍖哄潡閾句俊鎭湇鍔″妗�.png", + file: "/assets/4鍖哄潡閾句俊鎭湇鍔″妗�.png", + }, + { + id: 5, + materialName: "浜掕仈缃戞柊鎶€鏈柊搴旂敤瀹夊叏璇勪及鐨勭浉鍏宠祫鏂�", + opdateTime: "2023-01-04 11:18:23", + fileName: "5瀹夊叏鑷瘎浼版姤鍛�.pdf", + file: "/assets/5瀹夊叏鑷瘎浼版姤鍛�.pdf", + }, + ], }, actions: { //淇敼鍒楄〃鏁版嵁 diff --git a/src/views/enterpriseMaterials/main/index.vue b/src/views/enterpriseMaterials/main/index.vue index 00ae7f6..c7e1051 100644 --- a/src/views/enterpriseMaterials/main/index.vue +++ b/src/views/enterpriseMaterials/main/index.vue @@ -14,6 +14,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "enterpriseMaterialsMain", @@ -55,28 +56,6 @@ export default { placeholder: "璇疯緭鍏�", }, ], - testData: [ - { - materialName: "瀵硅祫浜ц瘎浼拌涓氱殑鐩戠潱妫€鏌ョ浉鍏虫潗鏂�", - opdateTime: "2023-01-13 12:25:23", - }, - { - materialName: "浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鈥滀竴浠朵簨鈥濈殑鐩稿叧鏉愭枡", - opdateTime: "2023-01-08 09:23:46", - }, - { - materialName: "闈炵粡钀ユ€т簰鑱旂綉淇℃伅鏈嶅姟澶囨鏍稿噯鐩稿叧璧勬枡", - opdateTime: "2023-01-07 09:15:42", - }, - { - materialName: "鍖哄潡閾句俊鎭湇鍔″妗堢殑鐩稿叧璧勬枡", - opdateTime: "2023-01-06 14:28:13", - }, - { - materialName: "浜掕仈缃戞柊鎶€鏈柊搴旂敤瀹夊叏璇勪及鐨勭浉鍏宠祫鏂�", - opdateTime: "2023-01-04 11:18:23", - }, - ], fetcher: async () => { // console.log(this); // console.log(params); @@ -89,6 +68,13 @@ export default { }, }; }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.enterpriseMaterials, + }), + }, + watch: {}, methods: { renderBtns(e) { @@ -106,8 +92,8 @@ export default { </div> ); }, - openDetail() { - this.$router.push("/enterpriseMaterials/materiaDetail"); + openDetail(row) { + this.$router.push(`/enterpriseMaterials/materiaDetail?id=${row.id}`); }, }, }; diff --git a/src/views/enterpriseMaterials/materiaDetail/index.vue b/src/views/enterpriseMaterials/materiaDetail/index.vue index 1363ddb..e08e5ac 100644 --- a/src/views/enterpriseMaterials/materiaDetail/index.vue +++ b/src/views/enterpriseMaterials/materiaDetail/index.vue @@ -5,19 +5,20 @@ <div class="content-title">鍩虹淇℃伅</div> <el-descriptions title="" :column="1" style="padding-left:30px"> - <el-descriptions-item label="鏉愭枡鍚嶇О" - >鏉愭枡鍚嶇О锛氬璧勪骇璇勪及琛屼笟鐨勭洃鐫f鏌ョ浉鍏虫潗鏂�</el-descriptions-item - > - <el-descriptions-item label="涓婁紶鏃堕棿" - >2023-01-13 12:25:23</el-descriptions-item - > + <el-descriptions-item label="鏉愭枡鍚嶇О">{{ + detail.materialName + }}</el-descriptions-item> + <el-descriptions-item label="涓婁紶鏃堕棿">{{ + detail.opdateTime + }}</el-descriptions-item> </el-descriptions> <div class="content-title">鏉愭枡鏂囦欢</div> + <div class="file-box flex-between"> - <span>瀵硅祫浜ц瘎浼拌涓氱殑鐩戠潱妫€鏌ユ剰瑙佽〃</span> + <span>{{ detail.fileName }}</span> <div class="flex download"> <i class="el-icon-download"></i> - <span>涓嬭浇</span> + <span @click="downliadFile(detail.file)">涓嬭浇</span> </div> </div> </ScrollView> @@ -25,6 +26,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "enterpriseMaterialsMateriaDetail", @@ -36,10 +38,27 @@ export default { }, components: {}, data() { - return {}; + return { + detail: {}, + }; + }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.enterpriseMaterials, + }), + }, + + mounted() { + let { id } = this.$route.query; + if (id) this.detail = this.testData.find((item) => item.id == id); }, watch: {}, - methods: {}, + methods: { + downliadFile(url) { + window.open(window.location.origin + url); + }, + }, }; </script> <style lang="scss" scoped> diff --git a/src/views/enterpriseServiceData/detail/index.vue b/src/views/enterpriseServiceData/detail/index.vue index 05c5248..e5110fe 100644 --- a/src/views/enterpriseServiceData/detail/index.vue +++ b/src/views/enterpriseServiceData/detail/index.vue @@ -4,7 +4,7 @@ <ScrollView style="overflow-x: hidden;"> <div class="block-title"> <div class="title">鐢宠淇℃伅</div> - <div class="status">鐘舵€�: 鍑嗕簣璁稿彲</div> + <div class="status">鐘舵€�: {{ detail.status }}</div> </div> <div class="content-title">鍩虹淇℃伅</div> <el-descriptions title="" :column="2"> @@ -16,9 +16,9 @@ >7cc3bc07-d86d-4701-ace..</el-descriptions-item > <el-descriptions-item label="鍙楃悊浜哄憳">璐烘鍕�</el-descriptions-item> - <el-descriptions-item label="浜嬮」鍚嶇О" - >浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鈥滀竴浠朵簨鈥�</el-descriptions-item - > + <el-descriptions-item label="浜嬮」鍚嶇О">{{ + detail.theme + }}</el-descriptions-item> <el-descriptions-item label="鐢宠浜虹被鍨�">浼佷笟</el-descriptions-item> @@ -43,9 +43,9 @@ <el-descriptions-item label="鎵€灞炴満鍏�">鍖虹◣鍔″眬</el-descriptions-item> <el-descriptions-item label="娉曞畾浠h〃浜�">椴嶅摬鏉�</el-descriptions-item> - <el-descriptions-item label="鐢宠鏃堕棿" - >2020-11-25 12:14:58</el-descriptions-item - > + <el-descriptions-item label="鐢宠鏃堕棿">{{ + detail.time + }}</el-descriptions-item> <el-descriptions-item label="鐢宠浜�/缁勭粐鏈烘瀯璇佷欢绫诲瀷" >钀ヤ笟鎵х収</el-descriptions-item > @@ -75,10 +75,10 @@ </el-descriptions> <div class="content-title">鐢宠鏉愭枡琛ㄦ牸</div> <div class="file-box flex-between"> - <span>浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鐢宠琛�</span> + <span>{{ detail.fileName }}</span> <div class="flex download"> <i class="el-icon-download"></i> - <span>涓嬭浇</span> + <span @click="downliadFile(detail.file)">涓嬭浇</span> </div> </div> @@ -113,6 +113,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "enterpriseServiceDataDetail", @@ -124,10 +125,27 @@ export default { }, components: {}, data() { - return {}; + return { + detail: {}, + }; + }, + + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.enterpriseServiceData, + }), + }, + mounted() { + let { id } = this.$route.query; + if (id) this.detail = this.testData.find((item) => item.id == id); }, watch: {}, - methods: {}, + methods: { + downliadFile(url) { + window.open(window.location.origin + url); + }, + }, }; </script> <style lang="scss" scoped> diff --git a/src/views/enterpriseServiceData/list/index.vue b/src/views/enterpriseServiceData/list/index.vue index 6101c8a..e1ae319 100644 --- a/src/views/enterpriseServiceData/list/index.vue +++ b/src/views/enterpriseServiceData/list/index.vue @@ -17,22 +17,27 @@ <div class="flex-col flex-center"> <div class="qrcode-box flex-col"> <div>鎵爜鎺堟潈鍔炰簨鏁版嵁</div> - <img src="@/assets/img/test-qrcode.png" alt="" /> - <div class="btns flex-between"> - <el-button type="text">涓嬭浇</el-button> - <el-button type="text">璐熻矗</el-button> + <canvas id="canvas" ref="canvas"></canvas> + <!-- <img src="@/assets/img/test-qrcode.png" alt="" /> --> + <div class="btns flex-center"> + <el-button type="text" @click="downloadImg">涓嬭浇</el-button> </div> </div> <div class="flex flex-center"> <el-input v-model="url" size="small" style="width:281px"></el-input> - <el-button type="primary" size="small">澶嶅埗</el-button> + <el-button type="primary" size="small" ref="url" @click="copyUrl" + >澶嶅埗</el-button + > </div> </div> </PubDialog> </InnerView> </template> <script> +import QRCode from "qrcode"; +import { saveAs } from "file-saver"; +import { mapState } from "vuex"; import PubDialog from "@/components/App/PubDialog"; export default { name: "enterpriseServiceDataList", @@ -46,13 +51,13 @@ export default { components: { PubDialog }, data() { return { - url: "http//锛歸ww.baidu.com", + url: "", dialogVisible: false, headers: [ { field: "theme", fieldName: "涓氬姟涓婚", - width: 300, + width: 350, }, { field: "status", @@ -70,23 +75,6 @@ export default { }, ], params: [], - testData: [ - { - theme: "鍏充簬浼佷笟鍙樻洿鐧昏锛堢◣鍔′俊鎭彉鏇达級鈥滀竴浠朵簨鈥濈殑鐢宠", - status: "姝e父", - time: "2023-07-13 17:14:43", - }, - { - theme: "鍏充簬鍏徃鍒涗笟鎷呬繚璐锋鐢宠", - status: "鍑嗕簣璁稿彲", - time: "2023-04-25 15:28:36", - }, - { - theme: "鍏充簬璐熻矗闄愰浠ヤ笅鏉戦晣寤鸿宸ョ▼鐨勮川閲忓畨鍏ㄧ洃绠$殑鐢宠", - status: "涓嶄簣璁稿彲", - time: "2023-03-15 14:22:16", - }, - ], fetcher: async () => { // console.log(this); // console.log(params); @@ -99,6 +87,12 @@ export default { }, }; }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.enterpriseServiceData, + }), + }, watch: {}, methods: { renderBtns(e) { @@ -124,11 +118,54 @@ export default { </div> ); }, - openDtail() { - this.$router.push("/enterpriseServiceData/detail"); + openDtail(row) { + this.$router.push(`/enterpriseServiceData/detail?id=${row.id}`); }, - dataAuth() { + dataAuth(row) { + let local = window.location; + let url = + local.host + + local.pathname + + "#" + + `/enterpriseServiceData/detail?id=${row.id}`; + // console.log(); + this.url = url; this.dialogVisible = true; + this.$nextTick(() => { + let canvas = this.$refs.canvas; + let opts = { + errorCorrectionLevel: "H", //瀹归敊绾у埆 + type: "image/png", //鐢熸垚鐨勪簩缁寸爜绫诲瀷 + quality: 0.3, //浜岀淮鐮佽川閲� + margin: 0, //浜岀淮鐮佺暀鐧借竟璺� + text: this.url, //浜岀淮鐮佸唴瀹� + color: { + dark: "#333333", //鍓嶆櫙鑹� + light: "#fff", //鑳屾櫙鑹� + }, + }; + + QRCode.toCanvas(canvas, this.url, opts, (err) => { + if (err) { + console.log(err); + } + }); + }); + }, + copyUrl() { + const dom = document.createElement("input"); + dom.value = this.url; + document.body.appendChild(dom); + dom.select(); + document.execCommand("copy"); + document.body.removeChild(dom); + this.$message.success("澶嶅埗鎴愬姛"); + }, + downloadImg() { + let canvas = this.$refs.canvas; + canvas.toBlob((blob) => { + saveAs(blob, "image.png"); + }); }, }, }; @@ -150,9 +187,10 @@ export default { padding-top: 31px; align-items: center; margin-bottom: 28px; - img { - width: 138px; - height: 141px; + img, + canvas { + width: 138px !important; + height: 141px !important; margin-top: 10px; margin-bottom: 3px; } diff --git a/src/views/feedback/index.vue b/src/views/feedback/index.vue index f32ceb4..546464e 100644 --- a/src/views/feedback/index.vue +++ b/src/views/feedback/index.vue @@ -5,7 +5,7 @@ <div> 涓轰簡缁欐偍鎻愪緵鏇村ソ鐨勬湇鍔★紝鎴戜滑甯屾湜鏀堕泦鎮ㄥ湪浣跨敤骞冲彴鏃剁殑鎰忚鎴栬€呭缓璁€� </div> - <div>瀵规偍鐨勯厤鍚堝拰鏀寔琛ㄧず琛峰績鎰熻阿锛佹柊澧炶瘉鐓�</div> + <div>瀵规偍鐨勯厤鍚堝拰鏀寔琛ㄧず琛峰績鎰熻阿锛�</div> </div> <el-form ref="form" diff --git a/src/views/login.vue b/src/views/login.vue index 5db3921..249c224 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -124,14 +124,14 @@ export default { if (["liyun", "user"].includes(this.ruleForm.user)) { this.$store.dispatch("user/setUserAuth", this.testAuthUser); this.$store.dispatch("user/setUserInfo", { - name: "鍒樹簯", + name: "鏉庝簯", type: 1, }); localStorage.setItem("userAuth", JSON.stringify(this.testAuthUser)); localStorage.setItem( "userInfo", JSON.stringify({ - name: "鍒樹簯", + name: "鏉庝簯", type: 1, }) ); diff --git a/src/views/serviceData/detail/index.vue b/src/views/serviceData/detail/index.vue index 68732b9..1044749 100644 --- a/src/views/serviceData/detail/index.vue +++ b/src/views/serviceData/detail/index.vue @@ -4,7 +4,7 @@ <ScrollView style="overflow-x: hidden;"> <div class="block-title"> <div class="title">鐢宠淇℃伅</div> - <div class="status">鐘舵€�: 鍑嗕簣璁稿彲</div> + <div class="status">鐘舵€�: {{ detail.status }}</div> </div> <div class="content-title">鍩虹淇℃伅</div> <el-descriptions title="" :column="2"> @@ -16,9 +16,9 @@ >7cc3bc07-d86d-4701-ace..</el-descriptions-item > <el-descriptions-item label="鍙楃悊浜哄憳">璐烘鍕�</el-descriptions-item> - <el-descriptions-item label="浜嬮」鍚嶇О" - >鍐滆嵂缁忚惀璁稿彲(鏍稿彂)</el-descriptions-item - > + <el-descriptions-item label="浜嬮」鍚嶇О">{{ + detail.theme + }}</el-descriptions-item> <el-descriptions-item label="鐢宠浜虹被鍨�">鑷劧浜�</el-descriptions-item> <el-descriptions-item label="绫诲瀷">XK锛堣鏀胯鍙級</el-descriptions-item> @@ -42,9 +42,9 @@ > <el-descriptions-item label="娉曞畾浠h〃浜�">鈥斺€�</el-descriptions-item> - <el-descriptions-item label="鐢宠鏃堕棿" - >2020-11-25 12:14:58</el-descriptions-item - > + <el-descriptions-item label="鐢宠鏃堕棿">{{ + detail.time + }}</el-descriptions-item> <el-descriptions-item label="鐢宠浜�/缁勭粐鏈烘瀯璇佷欢绫诲瀷" >韬唤璇�</el-descriptions-item > @@ -67,15 +67,15 @@ > <el-descriptions-item label="涓氬姟涓婚" - >鍏充簬鏉庤崳杈夊啘鑽粡钀ヨ鍙�(鏍稿彂) 鐨勭敵璇�</el-descriptions-item + >鍏充簬鏉庝簯鍐滆嵂缁忚惀璁稿彲(鏍稿彂) 鐨勭敵璇�</el-descriptions-item > </el-descriptions> <div class="content-title">鐢宠鏉愭枡琛ㄦ牸</div> <div class="file-box flex-between"> - <span>鐢宠鍦ㄦ牎姹傝亴鍒涗笟琛ヨ创鐩稿叧璧勬枡</span> + <span>{{ detail.fileName }}</span> <div class="flex download"> <i class="el-icon-download"></i> - <span>涓嬭浇</span> + <span @click="downliadFile(detail.file)">涓嬭浇</span> </div> </div> @@ -110,6 +110,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "serviceDataDetail", @@ -121,10 +122,28 @@ export default { }, components: {}, data() { - return {}; + return { + detail: {}, + }; + }, + + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.serviceData, + }), + }, + mounted() { + let { id } = this.$route.query; + if (id) this.detail = this.testData.find((item) => item.id == id); }, watch: {}, - methods: {}, + methods: { + + downliadFile(url) { + window.open(window.location.origin + url); + }, + }, }; </script> <style lang="scss" scoped> diff --git a/src/views/serviceData/list/index.vue b/src/views/serviceData/list/index.vue index 9f868a8..37cd79c 100644 --- a/src/views/serviceData/list/index.vue +++ b/src/views/serviceData/list/index.vue @@ -17,22 +17,27 @@ <div class="flex-col flex-center"> <div class="qrcode-box flex-col"> <div>鎵爜鎺堟潈鍔炰簨鏁版嵁</div> - <img src="@/assets/img/test-qrcode.png" alt="" /> - <div class="btns flex-between"> - <el-button type="text">涓嬭浇</el-button> - <el-button type="text">璐熻矗</el-button> + <canvas id="canvas" ref="canvas"></canvas> + <!-- <img src="@/assets/img/test-qrcode.png" alt="" /> --> + <div class="btns flex-center"> + <el-button type="text" @click="downloadImg">涓嬭浇</el-button> </div> </div> <div class="flex flex-center"> <el-input v-model="url" size="small" style="width:281px"></el-input> - <el-button type="primary" size="small">澶嶅埗</el-button> + <el-button type="primary" size="small" ref="url" @click="copyUrl" + >澶嶅埗</el-button + > </div> </div> </PubDialog> </InnerView> </template> <script> +import QRCode from "qrcode"; +import { saveAs } from "file-saver"; +import { mapState } from "vuex"; import PubDialog from "@/components/App/PubDialog"; export default { name: "serviceDataList", @@ -46,13 +51,13 @@ export default { components: { PubDialog }, data() { return { - url: "http//锛歸ww.baidu.com", + url: "", dialogVisible: false, headers: [ { field: "theme", fieldName: "涓氬姟涓婚", - width: 300, + width: 350, }, { field: "status", @@ -70,33 +75,6 @@ export default { }, ], params: [], - testData: [ - { - theme: "鍏充簬鏉庝簯鍐滆嵂缁忚惀璁稿彲(鏍稿彂) 鐨勭敵璇�", - status: "姝e父", - time: "2023-07-13 17:14:43", - }, - { - theme: "鍏充簬鏉庝簯鐢熻偛鏈嶅姟璇佺櫥璁扮殑鐢宠", - status: "鍑嗕簣璁稿彲", - time: "2023-04-25 15:28:36", - }, - { - theme: "鍏充簬鏉庝簯涓嶅姩浜х櫥璁扮殑鐢宠", - status: "涓嶄簣璁稿彲", - time: "2023-03-15 14:22:16", - }, - { - theme: "鍏充簬鏉庝簯鍖哄幙澧冨唴姘磋矾瀹㈣繍缁忚惀璁稿彲", - status: "鍑嗕簣璁稿彲", - time: "2023-02-18 14:28:15", - }, - { - theme: "鍏充簬鏉庝簯閲囪鍙瘉棰佸彂鐨勭敵璇�", - status: "鍑嗕簣璁稿彲", - time: "2023-02-14 12:22:33", - }, - ], fetcher: async () => { // console.log(this); // console.log(params); @@ -109,6 +87,12 @@ export default { }, }; }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.serviceData, + }), + }, watch: {}, methods: { renderBtns(e) { @@ -134,11 +118,51 @@ export default { </div> ); }, - openDtail() { - this.$router.push("/serviceData/detail"); + openDtail(row) { + this.$router.push(`/serviceData/detail?id=${row.id}`); }, - dataAuth() { + dataAuth(row) { + let local = window.location; + let url = + local.host + local.pathname + "#" + `/serviceData/detail?id=${row.id}`; + // console.log(); + this.url = url; this.dialogVisible = true; + this.$nextTick(() => { + let canvas = this.$refs.canvas; + let opts = { + errorCorrectionLevel: "H", //瀹归敊绾у埆 + type: "image/png", //鐢熸垚鐨勪簩缁寸爜绫诲瀷 + quality: 0.3, //浜岀淮鐮佽川閲� + margin: 0, //浜岀淮鐮佺暀鐧借竟璺� + text: this.url, //浜岀淮鐮佸唴瀹� + color: { + dark: "#333333", //鍓嶆櫙鑹� + light: "#fff", //鑳屾櫙鑹� + }, + }; + + QRCode.toCanvas(canvas, this.url, opts, (err) => { + if (err) { + console.log(err); + } + }); + }); + }, + copyUrl() { + const dom = document.createElement("input"); + dom.value = this.url; + document.body.appendChild(dom); + dom.select(); + document.execCommand("copy"); + document.body.removeChild(dom); + this.$message.success("澶嶅埗鎴愬姛"); + }, + downloadImg() { + let canvas = this.$refs.canvas; + canvas.toBlob((blob) => { + saveAs(blob, "image.png"); + }); }, }, }; @@ -160,9 +184,10 @@ export default { padding-top: 31px; align-items: center; margin-bottom: 28px; - img { - width: 138px; - height: 141px; + img, + canvas { + width: 138px !important; + height: 141px !important; margin-top: 10px; margin-bottom: 3px; } diff --git a/src/views/spaceIndex/main/index.vue b/src/views/spaceIndex/main/index.vue index 06a166a..eeb82f6 100644 --- a/src/views/spaceIndex/main/index.vue +++ b/src/views/spaceIndex/main/index.vue @@ -50,6 +50,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "SpaceIndexMain", @@ -92,28 +93,6 @@ export default { placeholder: "璇疯緭鍏�", }, ], - testData: [ - { - materialName: "鐢宠鍦ㄦ牎姹傝亴鍒涗笟琛ヨ创鐩稿叧璧勬枡", - opdateTime: "2023-01-13 12:25:23", - }, - { - materialName: "楂樼瓑瀛︽牎绛夋瘯涓氱敓鎺ユ敹鎵嬬画鍔炵悊鐩稿叧璧勬枡", - opdateTime: "2023-01-08 09:23:46", - }, - { - materialName: "鍙楃悊鍏垂甯堣寖鐢熻法鐪佷换鏁欑敵璇风浉鍏宠祫鏂�", - opdateTime: "2023-01-07 09:15:42", - }, - { - materialName: "妗f鐨勬帴鏀跺拰杞€掔殑鐩稿叧璧勬枡", - opdateTime: "2023-01-06 14:28:13", - }, - { - materialName: "鑱屼笟鎸囧鐩稿叧璧勬枡", - opdateTime: "2023-01-04 11:18:23", - }, - ], fetcher: async () => { // console.log(this); // console.log(params); @@ -126,6 +105,13 @@ export default { }, }; }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.SpaceIndexMain, + }), + }, + watch: {}, methods: { renderBtns(e) { @@ -143,8 +129,8 @@ export default { </div> ); }, - openDetail() { - this.$router.push("/spaceIndex/materiaDetail"); + openDetail(row) { + this.$router.push(`/spaceIndex/materiaDetail?id=${row.id}`); }, handleSelect(index) { // console.log(index); diff --git a/src/views/spaceIndex/materiaDetail/index.vue b/src/views/spaceIndex/materiaDetail/index.vue index ff467f8..517c54a 100644 --- a/src/views/spaceIndex/materiaDetail/index.vue +++ b/src/views/spaceIndex/materiaDetail/index.vue @@ -5,19 +5,20 @@ <div class="content-title">鍩虹淇℃伅</div> <el-descriptions title="" :column="1" style="padding-left:30px"> - <el-descriptions-item label="鏉愭枡鍚嶇О" - >鐢宠鍦ㄦ牎姹傝亴鍒涗笟琛ヨ创鐩稿叧璧勬枡</el-descriptions-item - > - <el-descriptions-item label="涓婁紶鏃堕棿" - >2023-01-13 12:25:23</el-descriptions-item - > + <el-descriptions-item label="鏉愭枡鍚嶇О">{{ + detail.materialName + }}</el-descriptions-item> + <el-descriptions-item label="涓婁紶鏃堕棿">{{ + detail.opdateTime + }}</el-descriptions-item> </el-descriptions> <div class="content-title">鏉愭枡鏂囦欢</div> + <div class="file-box flex-between"> - <span>鐢宠鍦ㄦ牎姹傝亴鍒涗笟琛ヨ创鐩稿叧璧勬枡</span> + <span>{{ detail.fileName }}</span> <div class="flex download"> <i class="el-icon-download"></i> - <span>涓嬭浇</span> + <span @click="downliadFile(detail.file)">涓嬭浇</span> </div> </div> </ScrollView> @@ -25,6 +26,7 @@ </template> <script> +import { mapState } from "vuex"; // import * as api from "@/api"; export default { name: "SpaceIndexMateriaDetail", @@ -36,10 +38,27 @@ export default { }, components: {}, data() { - return {}; + return { + detail: {}, + }; + }, + computed: { + // import { mapState } from "vuex"; + ...mapState({ + testData: (state) => state.tabledata.SpaceIndexMain, + }), + }, + + mounted() { + let { id } = this.$route.query; + if (id) this.detail = this.testData.find((item) => item.id == id); }, watch: {}, - methods: {}, + methods: { + downliadFile(url) { + window.open(window.location.origin + url); + }, + }, }; </script> <style lang="scss" scoped> diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..36e851c --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,28 @@ +module.exports = { + // 鍏ュ彛鏂囦欢 + entry: "./src/main.js", + output: { + // path: path.resolve(__dirname, "dist"), + // filename: "bundle.js", + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: "vue-loader", + }, + { + test: /\.css$/, + use: ["style-loader", "css-loader"], + }, + { + test: /\.(jpg|png|svg|ttf)$/, + use: "url-loader", + }, + { + test: /\.(docx|doc|pdf)$/, + use: "url-loader", + }, + ], + }, +}; -- GitLab