| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang=""> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|---|
| | | <!-- vue3ææ°çæ¬ --> |
|---|
| | | <script src="vue3.js"></script> |
|---|
| | | <!-- å¼å
¥Element Plus UI ç»ä»¶åº --> |
|---|
| | | <link rel="stylesheet" href="element-index.css" /> |
|---|
| | | <script src="element-plus.js"></script> |
|---|
| | | <!-- è¯è¨å
--> |
|---|
| | | <!-- <script src="https://unpkg.com/browse/element-plus@1.2.0-beta.4/es/locale/lang/zh-cn.mjs"></script> --> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <title>奥çé MESS 管çå¹³å°</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-config-provider :locale="locale"> |
|---|
| | | <router-view /> |
|---|
| | | </el-config-provider> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import zhCn from 'element-plus/lib/locale/lang/zh-cn' |
|---|
| | | export default { |
|---|
| | | name: "App", |
|---|
| | | setup() { |
|---|
| | | // åæ¢ä¸ºä¸æ |
|---|
| | | let locale = zhCn |
|---|
| | | return { |
|---|
| | | locale |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss"> |
|---|
| | | #app{} |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function bainxkVoList(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "bianxk/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "bianxk1/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function dabaoVoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "dabaoVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "dabaoVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function fanbianVoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "fanbianVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "fanbianVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function ShengchanVoList(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "ShengchanVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "ShengchanVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function hanjiVoLest(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "hanjiVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "hanjiVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function jianbjVoLast(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jianbjVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jianbjVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function jiguanVoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jiguanVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jiguanVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function jianguanVoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jianguanVo/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "jianguanVo/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function last(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "shengchan-tj/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "shengchan-tj/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; // å¼å
¥æ¦æªå¨ |
|---|
| | | // ç¨æ·å表 |
|---|
| | | export function userList(data = {}) { |
|---|
| | | return instance.get("/sys/user/list", { params: data }) |
|---|
| | | } |
|---|
| | | //æ¥è¯¢è§è²ä¸çuser |
|---|
| | | export function userRoleList(data = {}) { |
|---|
| | | return instance.get("/sys/user/userRoleList", { params: data }) |
|---|
| | | } |
|---|
| | | //æ·»å ç¨æ·è§è² |
|---|
| | | export function addSysUserRole(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/user/addSysUserRole", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // å é¤ç¨æ·è§è² |
|---|
| | | export function deleteUserRole(params = {}) { |
|---|
| | | return instance.delete("/sys/user/deleteUserRole", { params: params }) |
|---|
| | | } |
|---|
| | | // æ·»å ç¨æ· |
|---|
| | | export function add(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/user/add", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // éªè¯ |
|---|
| | | export function duplicateUser(data = {}) { |
|---|
| | | return instance.get("/sys/duplicate/check", { params: data }) |
|---|
| | | } |
|---|
| | | // å»ç» |
|---|
| | | export function frozenBatch(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "put", |
|---|
| | | url: "/sys/user/frozenBatch", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // éªè¯ç¨æ·å |
|---|
| | | // export function selectByUserid(params) { |
|---|
| | | // return instance.get('/sys/user/checkOnlyUser', { params: params }); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | export function edit(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/user/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // ä¿®æ¹å¯ç |
|---|
| | | export function modifyPassword(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "put", |
|---|
| | | url: "/sys/user/changePassword", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function deleteUser(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "delete", |
|---|
| | | url: "/sys/user/delete?id=" + data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // |
|---|
| | | /** ç»å½ */ |
|---|
| | | export function Login(data = {}) { |
|---|
| | | // console.log("login1 ...", data); |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/login/", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // éªè¯ç |
|---|
| | | export function yzm(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: "/sys/randomImage/" + data, |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** ç»åº */ |
|---|
| | | export function Logout(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/logout/", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** è·¯ç±æé */ |
|---|
| | | export function GetPermission(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: "sys/permission/getUserPermissionByToken", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function b1VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/b/scjh/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b2VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/b/sbjx/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b1Save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/b/scjh/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b3VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: "/b/pplan/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b3Save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "b/pplan/add", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b4VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/b/zhxx/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function b4Save(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "b/zhxx/add", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; // å¼å
¥æ¦æªå¨ |
|---|
| | | /** æ°å¢é¨é¨ */ |
|---|
| | | export function addDepart(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/sysDepart/add", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** é¨é¨èåæéä¿®æ¹ */ |
|---|
| | | export function saveDepartPermission(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/permission/saveDepartPermission", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** é¨é¨ä¿¡æ¯ä¿®æ¹ */ |
|---|
| | | export function edit(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/sysDepart/edit", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å é¤é¨é¨ |
|---|
| | | export function deleteBatch(params = {}) { |
|---|
| | | return instance.delete("/sys/sysDepart/deleteBatch", { params: params }) |
|---|
| | | } |
|---|
| | | /** é¨é¨å表 */ |
|---|
| | | export function DepartListAll(params = {}) { |
|---|
| | | return instance.get("/sys/sysDepart/queryTreeList", { params: params }) |
|---|
| | | } |
|---|
| | | // æå®IDæ¥è¯¢é¨é¨ |
|---|
| | | export function queryUserDepart(params = {}) { |
|---|
| | | return instance.get("/sys/user/userDepartList", { params: params }) |
|---|
| | | } |
|---|
| | | // æ¥è¯¢é¨é¨èåæé |
|---|
| | | export function queryDepartPermission(params = {}) { |
|---|
| | | return instance.get("/sys/permission/queryDepartPermission", { params: params }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å
³é®åæ¥è¯¢é¨é¨ |
|---|
| | | export function searchBy(params = {}) { |
|---|
| | | return instance.get("/sys/sysDepart/searchBy", { params: params }) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function chongVoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chongVoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g02 |
|---|
| | | export function chong02VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongDayCheckVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong02VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongDayCheckVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g03 |
|---|
| | | export function chong03VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongWeekVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong03VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongWeekVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g04 |
|---|
| | | //g03 |
|---|
| | | export function chong04VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongCleanVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong04VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/chongCleanVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //g05 |
|---|
| | | export function chong05VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong05VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //g06 |
|---|
| | | export function chong06VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoDayCheckVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong06VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoDayCheckVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g07 |
|---|
| | | export function chong07VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoWeekVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong07VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoWeekVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g08 |
|---|
| | | export function chong08VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoWeekVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong08VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/zhujiaoWeekVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //g09 |
|---|
| | | export function chong09VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jiGaiVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong09VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jiGaiVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g10 |
|---|
| | | export function chong10VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jg10XkVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong10VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jg10XkVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g11 |
|---|
| | | export function chong11VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jg11QjVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong11VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/jg11QjVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g12 |
|---|
| | | export function chong12VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/sm12SmVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong12VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/sm12SmVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g13 |
|---|
| | | export function chong13VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/c13CtsyVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong13VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/c13CtsyVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g14 |
|---|
| | | export function chong14VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/diGaiShengChanVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong14VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/diGaiShengChanVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g15 |
|---|
| | | export function chong15VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/gaiXianTJVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong15VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/gaiXianTJVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g16 |
|---|
| | | export function chong16VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/gyj16VoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong16VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/gyj16VoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g17 |
|---|
| | | export function chong17VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/c17FzjtVoController/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong17VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/c17FzjtVoController/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | //g18 |
|---|
| | | export function chong18VoLast(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: "g/g18-chanliangtongji/last", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function chong18VoSave(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "g/g18-chanliangtongji/edit", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; |
|---|
| | | // å表å
容è·å |
|---|
| | | export function headPage(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "head/all", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | export function headAll(data) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "head/all", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function leixList() { |
|---|
| | | console.log(".......leixing"); |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: "sys/permission/getUserMenu", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function pageSearch(data) { |
|---|
| | | console.log(".......search", data); |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "head/shijian", |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | export function getDate(data) { |
|---|
| | | return data.substr(0, 10); |
|---|
| | | } |
|---|
| | | export function getTime(data) { |
|---|
| | | return data.substr(11, 5); |
|---|
| | | } |
|---|
| | | export function headReport(data) { |
|---|
| | | console.log("report........", data.leixing); |
|---|
| | | let chanxian = { |
|---|
| | | A0: "bianxk/id?id=", |
|---|
| | | A1: "jianbjVo/id?id=", |
|---|
| | | A2: "hanjiVo/id?id=", |
|---|
| | | A3: "fanbianVo/id?id=", |
|---|
| | | A4: "jianguanVo/id?id=", |
|---|
| | | A5: "jiguanVo/id?id=", |
|---|
| | | A6: "dabaoVo/id?id=", |
|---|
| | | A7: "ShengchanVo/id?id=", |
|---|
| | | }; |
|---|
| | | let gaixian = { |
|---|
| | | g01: "g/chongVoController/id?id=", |
|---|
| | | g02: "g/chongDayCheckVoController/id?id=", |
|---|
| | | g03: "g/chongWeekVoController/id?id=", |
|---|
| | | g04: "g/chongCleanVoController/id?id=", |
|---|
| | | g05: "g/zhujiaoVoController/id?id=", |
|---|
| | | g06: "g/zhujiaoDayCheckVoController/id?id=", |
|---|
| | | g07: "g/zhujiaoWeekVoController/id?id=", |
|---|
| | | g08: "g/zhujiaoCleanVoController/id?id=", |
|---|
| | | g09: "g/jiGaiVoController/id?id=", |
|---|
| | | g10: "g/jg10XkVoController/id?id=", |
|---|
| | | g11: "jianbjVo/id?id=", |
|---|
| | | g12: "jianbjVo/id?id=", |
|---|
| | | g13: "g/c13CtsyVoController/id?id=", |
|---|
| | | g14: "g/diGaiShengChanVoController/id?id=", |
|---|
| | | g15: "g/gaiXianTJVoController/gid?id=", |
|---|
| | | g16: "g/gyj16VoController/id?id=", |
|---|
| | | g17: "g/c17FzjtVoController/id?id=", |
|---|
| | | g18: "g/g18-chanliangtongji/id?id=", |
|---|
| | | }; |
|---|
| | | if (data.leixing.indexOf("A") == 0) { |
|---|
| | | console.log("aaaaaaaaaaaaaa"); |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: chanxian[data.leixing] + data.head_id, |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } else if (data.leixing.indexOf("g") == 0) { |
|---|
| | | console.log("bbbbbbbbbbbbbb"); |
|---|
| | | console.log( |
|---|
| | | data.leixing.length == 2 |
|---|
| | | ? data.leixing.substr(0, 1) + "0" + data.leixing.substr(1, 1) |
|---|
| | | : data.leixing |
|---|
| | | ); |
|---|
| | | return instance.request({ |
|---|
| | | method: "get", |
|---|
| | | url: |
|---|
| | | gaixian[ |
|---|
| | | data.leixing.length == 2 |
|---|
| | | ? data.leixing.substr(0, 1) + "0" + data.leixing.substr(1, 1) |
|---|
| | | : data.leixing |
|---|
| | | ] + data.head_id, |
|---|
| | | data, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; // å¼å
¥æ¦æªå¨ |
|---|
| | | |
|---|
| | | // æ·»å èå |
|---|
| | | export function MenuAdd(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/permission/add", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /** èåç¼è¾ */ |
|---|
| | | export function MenuUpdate(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/permission/edit", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** èåå表æ ç¶æ°æ® */ |
|---|
| | | export function MenuListTree(params = {}) { |
|---|
| | | return instance.get("/sys/permission/list", { params: params }) |
|---|
| | | } |
|---|
| | | //ç¨æ·èå |
|---|
| | | export function getUserPermissionByToken(params = {}) { |
|---|
| | | return instance.get("/sys/permission/getUserPermissionByToken", { params: params }) |
|---|
| | | } |
|---|
| | | // æ¥è¯¢urlæ¯å¦å¯ç¨ |
|---|
| | | export function checkPermDuplication(params = {}) { |
|---|
| | | return instance.get("/sys/permission/checkPermDuplication", { params: params }) |
|---|
| | | } |
|---|
| | | // å é¤èå |
|---|
| | | export function deleteMenu(params = {}) { |
|---|
| | | return instance.delete("/sys/permission/delete", { params: params }) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import instance from "@/utils/request"; // å¼å
¥æ¦æªå¨ |
|---|
| | | /** å建è§è² */ |
|---|
| | | export function RoleCreate(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/role/add", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /** è§è²è¯¦æ
*/ |
|---|
| | | export function RoleDetailed(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/role/detailed", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /** è§è²ä¿®æ¹ */ |
|---|
| | | export function RoleUpdate(data = {}) { |
|---|
| | | return instance.request({ |
|---|
| | | method: "post", |
|---|
| | | url: "/sys/role/edit", |
|---|
| | | data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // å é¤è§è² |
|---|
| | | export function deleteRole(params = {}) { |
|---|
| | | return instance.delete("/sys/role/delete", { params: params }) |
|---|
| | | } |
|---|
| | | /** è§è²å表 */ |
|---|
| | | export function RoleListAll(params = {}) { |
|---|
| | | return instance.get("/sys/role/list", { params: params }) |
|---|
| | | } |
|---|
| | | // æ¥è¯¢æå®idè§è² |
|---|
| | | export function queryUserRole(params = {}) { |
|---|
| | | return instance.get("/sys/user/queryUserRole", { params: params }) |
|---|
| | | } |
|---|
| | | // æ¥è¯¢è§è²ç¼ç æ¯å¦å ç¨ |
|---|
| | | export function checkRoleCode(params = {}) { |
|---|
| | | return instance.get("/sys/role/checkRoleCode", { params: params }) |
|---|
| | | } |
|---|
| | | // |
|---|
| | | export function queryTreeList(params = {}) { |
|---|
| | | return instance.get("/sys/role/queryTreeList", { params: params }) |
|---|
| | | } |
|---|
| | | export function queryRolePermission(params = {}) { |
|---|
| | | return instance.get("/sys/permission/queryRolePermission", { params: params }) |
|---|
| | | } |
|---|
| | | export function saveRolePermission(params = {}) { |
|---|
| | | return instance.post("/sys/permission/saveRolePermission", params) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Print from "./packages/print.js"; |
|---|
| | | Print.install = function (Vue) { |
|---|
| | | // Vue.directive("print", Print); |
|---|
| | | Vue.directive("print", { |
|---|
| | | // å½è¢«ç»å®çå
ç´ æè½½å°DOMä¸æ¶ |
|---|
| | | mounted(el) { |
|---|
| | | // èç¦å
ç´ |
|---|
| | | // el.print(); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default Print; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /* |
|---|
| | | * @Author: lee |
|---|
| | | * @Date: 2021-05-10 11:45:50 |
|---|
| | | * @LastEditors: lee |
|---|
| | | * @LastEditTime: 2021-05-20 15:39:43 |
|---|
| | | * @Description: file content |
|---|
| | | */ |
|---|
| | | import Print from "./printarea.js"; |
|---|
| | | /** |
|---|
| | | * @file æå° |
|---|
| | | * æ令`v-print`,é»è®¤æå°æ´ä¸ªçªå£ |
|---|
| | | * ä¼ å
¥åæ°`v-print="'#id'"` , åæ°ä¸ºéè¦æå°å±é¨ççåæ è¯. |
|---|
| | | */ |
|---|
| | | const addEvent = (element, type, callback) => { |
|---|
| | | if (element.addEventListener) { |
|---|
| | | element.addEventListener(type, callback, false); |
|---|
| | | } else if (element.attachEvent) { |
|---|
| | | element.attachEvent("on" + type, callback); |
|---|
| | | } else { |
|---|
| | | element["on" + type] = callback; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | export default { |
|---|
| | | directiveName: "print", |
|---|
| | | bind(el, binding, vnode) { |
|---|
| | | let vue = vnode.context; |
|---|
| | | let id = ""; |
|---|
| | | addEvent(el, "click", () => { |
|---|
| | | vue.$nextTick(() => { |
|---|
| | | if (binding?.value?.clickMounted) { |
|---|
| | | binding.value.clickMounted(vue); |
|---|
| | | } |
|---|
| | | if (typeof binding.value === "string") { |
|---|
| | | // å
¨å±æå° |
|---|
| | | id = binding.value; |
|---|
| | | localPrint(); |
|---|
| | | } else if (typeof binding.value === "object" && !!binding.value.id) { |
|---|
| | | // å±é¨æå° |
|---|
| | | id = binding.value.id; |
|---|
| | | let ids = id.replace(new RegExp("#", "g"), ""); |
|---|
| | | let elsdom = document.getElementById(ids); |
|---|
| | | if (!elsdom) console.log("id in Error"), (id = ""); |
|---|
| | | localPrint(); |
|---|
| | | } else if (binding?.value?.preview) { |
|---|
| | | localPrint(); |
|---|
| | | } else { |
|---|
| | | window.print(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const localPrint = () => { |
|---|
| | | new Print({ |
|---|
| | | ids: id, // * å±é¨æå°å¿
ä¼ å
¥id |
|---|
| | | vue, |
|---|
| | | url: binding.value.url, // æå°æå®çç½åï¼è¿éä¸è½è·idå
±å å¦æå
±åidçä¼å
级ä¼æ¯è¾é« |
|---|
| | | standard: "", // æ档类åï¼é»è®¤æ¯html5ï¼å¯é html5ï¼looseï¼strict |
|---|
| | | extraHead: binding.value.extraHead, // éå å¨headæ ç¾ä¸çé¢å¤æ ç¾,使ç¨éå·åé |
|---|
| | | extraCss: binding.value.extraCss, // é¢å¤çcssè¿æ¥ï¼å¤ä¸ªéå·åå¼ |
|---|
| | | previewTitle: binding.value.previewTitle || "æå°é¢è§", // æå°é¢è§çæ é¢ |
|---|
| | | zIndex: binding.value.zIndex || 20002, // é¢è§çªå£çz-index |
|---|
| | | previewPrintBtnLabel: binding.value.previewPrintBtnLabel || "æå°", // æå°é¢è§çæ é¢ |
|---|
| | | popTitle: binding.value.popTitle, // titleçæ é¢ |
|---|
| | | preview: binding.value.preview || false, // æ¯å¦å¯å¨é¢è§æ¨¡å¼ |
|---|
| | | asyncUrl: binding.value.asyncUrl, |
|---|
| | | beforeEntryIframe() { |
|---|
| | | binding.value.beforeEntryIframe && |
|---|
| | | binding.value.beforeEntryIframe(vue); |
|---|
| | | }, |
|---|
| | | previewBeforeOpenCallback() { |
|---|
| | | // é¢è§çªå£æå¼ä¹åçcallback |
|---|
| | | binding.value.previewBeforeOpenCallback && |
|---|
| | | binding.value.previewBeforeOpenCallback(vue); |
|---|
| | | }, |
|---|
| | | previewOpenCallback() { |
|---|
| | | // é¢è§çªå£æå¼ä¹åçcallback |
|---|
| | | binding.value.previewOpenCallback && |
|---|
| | | binding.value.previewOpenCallback(vue); |
|---|
| | | }, |
|---|
| | | openCallback() { |
|---|
| | | // è°ç¨æå°ä¹åçåè°äºä»¶ |
|---|
| | | binding.value.openCallback && binding.value.openCallback(vue); |
|---|
| | | }, |
|---|
| | | closeCallback() { |
|---|
| | | binding.value.closeCallback && binding.value.closeCallback(vue); |
|---|
| | | }, |
|---|
| | | beforeOpenCallback() { |
|---|
| | | binding.value.beforeOpenCallback && |
|---|
| | | binding.value.beforeOpenCallback(vue); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const isIE = () => { |
|---|
| | | if (!!window.ActiveXobject || "ActiveXObject" in window) { |
|---|
| | | return true; |
|---|
| | | } else { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * å¤ææ¯å¦æ¯IE11 |
|---|
| | | * @returns boolean |
|---|
| | | */ |
|---|
| | | const isIE11 = () => { |
|---|
| | | if (/Trident\/7\./.test(navigator.userAgent)) { |
|---|
| | | return true; |
|---|
| | | } else { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | const isRemove = (dom) => { |
|---|
| | | if (isIE() || isIE11()) { |
|---|
| | | dom.removeNode(true); |
|---|
| | | } else { |
|---|
| | | dom.remove(); |
|---|
| | | } |
|---|
| | | return dom; |
|---|
| | | }; |
|---|
| | | export default class { |
|---|
| | | constructor(option) { |
|---|
| | | this.standards = { |
|---|
| | | strict: "strict", |
|---|
| | | loose: "loose", |
|---|
| | | html5: "html5", |
|---|
| | | }; |
|---|
| | | this.previewBody = null; |
|---|
| | | this.close = null; |
|---|
| | | this.previewBodyUtilPrintBtn = null; |
|---|
| | | this.selectArray = []; // åå¨selectç |
|---|
| | | this.counter = 0; |
|---|
| | | this.settings = { |
|---|
| | | standard: this.standards.html5, |
|---|
| | | }; |
|---|
| | | Object.assign(this.settings, option); |
|---|
| | | this.init(); |
|---|
| | | } |
|---|
| | | init() { |
|---|
| | | this.counter++; |
|---|
| | | this.settings.id = `printArea_${this.counter}`; |
|---|
| | | let url = ""; |
|---|
| | | if (this.settings.url && !this.settings.asyncUrl) { |
|---|
| | | url = this.settings.url; |
|---|
| | | } |
|---|
| | | let _this = this; |
|---|
| | | // å¦ææ¯å¼æ¥ç |
|---|
| | | if (this.settings.asyncUrl) { |
|---|
| | | _this.settings.asyncUrl(function (url) { |
|---|
| | | let PrintAreaWindow = _this.getPrintWindow(url); // å建iframe |
|---|
| | | if (_this.settings.preview) { |
|---|
| | | // æå¼é¢è§å¼¹çª |
|---|
| | | _this.previewIfrmaeLoad(); |
|---|
| | | } else { |
|---|
| | | // ç´æ¥æå° |
|---|
| | | _this.print(PrintAreaWindow); |
|---|
| | | } |
|---|
| | | }, _this.settings.vue); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | let PrintAreaWindow = this.getPrintWindow(url); // å建iframe |
|---|
| | | |
|---|
| | | if (!this.settings.url) { |
|---|
| | | this.write(PrintAreaWindow.doc); // åå
¥å
容 |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.settings.preview) { |
|---|
| | | // æå¼é¢è§å¼¹çª |
|---|
| | | this.previewIfrmaeLoad(); |
|---|
| | | } else { |
|---|
| | | // ç´æ¥æå° |
|---|
| | | this.print(PrintAreaWindow); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | addEvent(element, type, callback) { |
|---|
| | | if (element.addEventListener) { |
|---|
| | | element.addEventListener(type, callback, false); |
|---|
| | | } else if (element.attachEvent) { |
|---|
| | | element.attachEvent("on" + type, callback); |
|---|
| | | } else { |
|---|
| | | element["on" + type] = callback; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | previewIfrmaeLoad() { |
|---|
| | | let box = document.getElementById("vue-pirnt-nb-previewBox"); |
|---|
| | | |
|---|
| | | if (box) { |
|---|
| | | let _this = this; |
|---|
| | | let iframe = box.querySelector("iframe"); |
|---|
| | | this.settings.previewBeforeOpenCallback(); |
|---|
| | | this.addEvent(iframe, "load", function () { |
|---|
| | | _this.previewBoxShow(); |
|---|
| | | _this.removeCanvasImg(); |
|---|
| | | _this.settings.previewOpenCallback(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.addEvent( |
|---|
| | | box.querySelector(".previewBodyUtilPrintBtn"), |
|---|
| | | "click", |
|---|
| | | function () { |
|---|
| | | _this.settings.beforeOpenCallback(); |
|---|
| | | _this.settings.openCallback(); |
|---|
| | | iframe.contentWindow.print(); |
|---|
| | | _this.settings.closeCallback(); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // å é¤ææcanva转æ¢çå¾ç |
|---|
| | | removeCanvasImg() { |
|---|
| | | let _this = this; |
|---|
| | | try { |
|---|
| | | if (_this.elsdom) { |
|---|
| | | // å é¤canva转åå¾ççdomèç¹ |
|---|
| | | let canvasList = _this.elsdom.querySelectorAll(".canvasImg"); |
|---|
| | | for (let i = 0; i < canvasList.length; i++) { |
|---|
| | | isRemove(canvasList[i]); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } catch (e) { |
|---|
| | | console.log(e); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | print(ifrmae) { |
|---|
| | | var _this = this; |
|---|
| | | let iframe = document.getElementById(this.settings.id) || ifrmae.f; |
|---|
| | | let iframeWin = |
|---|
| | | document.getElementById(this.settings.id).contentWindow || |
|---|
| | | ifrmae.f.contentWindow; |
|---|
| | | var _loaded = function () { |
|---|
| | | iframeWin.focus(); |
|---|
| | | _this.settings.openCallback(); |
|---|
| | | iframeWin.print(); |
|---|
| | | isRemove(iframe); |
|---|
| | | _this.settings.closeCallback(); |
|---|
| | | _this.removeCanvasImg(); |
|---|
| | | }; |
|---|
| | | _this.settings.beforeOpenCallback(); |
|---|
| | | _this.addEvent(iframe, "load", function () { |
|---|
| | | _loaded(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | write(PADocument) { |
|---|
| | | PADocument.open(); |
|---|
| | | PADocument.write( |
|---|
| | | `${this.docType()}<html>${this.getHead()}${this.getBody()}</html>` |
|---|
| | | ); |
|---|
| | | PADocument.close(); |
|---|
| | | } |
|---|
| | | docType() { |
|---|
| | | if (this.settings.standard === this.standards.html5) { |
|---|
| | | return "<!DOCTYPE html>"; |
|---|
| | | } |
|---|
| | | var transitional = |
|---|
| | | this.settings.standard === this.standards.loose ? " Transitional" : ""; |
|---|
| | | var dtd = |
|---|
| | | this.settings.standard === this.standards.loose ? "loose" : "strict"; |
|---|
| | | |
|---|
| | | return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01${transitional}//EN" "http://www.w3.org/TR/html4/${dtd}.dtd">`; |
|---|
| | | } |
|---|
| | | getHead() { |
|---|
| | | let extraHead = ""; |
|---|
| | | let links = ""; |
|---|
| | | let style = ""; |
|---|
| | | if (this.settings.extraHead) { |
|---|
| | | this.settings.extraHead.replace(/([^,]+)/g, (m) => { |
|---|
| | | extraHead += m; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // å¤å¶æælinkæ ç¾ |
|---|
| | | [].forEach.call(document.querySelectorAll("link"), function (item) { |
|---|
| | | if (item.href.indexOf(".css") >= 0) { |
|---|
| | | links += `<link type="text/css" rel="stylesheet" href="${item.href}" >`; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // 循ç¯è·åstyleæ ç¾çæ ·å¼ |
|---|
| | | let domStyle = document.styleSheets; |
|---|
| | | if (domStyle && domStyle.length > 0) { |
|---|
| | | for (let i = 0; i < domStyle.length; i++) { |
|---|
| | | try { |
|---|
| | | if (domStyle[i].cssRules || domStyle[i].rules) { |
|---|
| | | let rules = domStyle[i].cssRules || domStyle[i].rules; |
|---|
| | | for (let b = 0; b < rules.length; b++) { |
|---|
| | | style += rules[b].cssText; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } catch (e) { |
|---|
| | | console.log(domStyle[i].href + e); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.settings.extraCss) { |
|---|
| | | this.settings.extraCss.replace(/([^,\s]+)/g, (m) => { |
|---|
| | | links += `<link type="text/css" rel="stylesheet" href="${m}">`; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return `<head><title>${this.settings.popTitle}</title>${extraHead}${links}<style type="text/css">${style}</style></head>`; |
|---|
| | | } |
|---|
| | | |
|---|
| | | getBody() { |
|---|
| | | let ids = this.settings.ids; |
|---|
| | | ids = ids.replace(new RegExp("#", "g"), ""); |
|---|
| | | this.settings.beforeEntryIframe(); |
|---|
| | | this.elsdom = this.beforeHanler(document.getElementById(ids)); |
|---|
| | | let ele = this.getFormData(this.elsdom); |
|---|
| | | let htm = ele.outerHTML; |
|---|
| | | return "<body>" + htm + "</body>"; |
|---|
| | | } |
|---|
| | | // å¤çcanva转æå¾ç |
|---|
| | | beforeHanler(elsdom) { |
|---|
| | | let canvasList = elsdom.querySelectorAll("canvas"); |
|---|
| | | // canvas转æ¢pngå¾ç |
|---|
| | | for (let i = 0; i < canvasList.length; i++) { |
|---|
| | | if (!canvasList[i].style.display) { |
|---|
| | | let _parent = canvasList[i].parentNode; |
|---|
| | | let _canvasUrl = canvasList[i].toDataURL("image/png"); |
|---|
| | | let _img = new Image(); |
|---|
| | | _img.className = "canvasImg"; |
|---|
| | | _img.style.display = "none"; |
|---|
| | | _img.src = _canvasUrl; |
|---|
| | | _parent.appendChild(_img); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return elsdom; |
|---|
| | | } |
|---|
| | | // æ ¹æ®typeå»å¤çform表å |
|---|
| | | getFormData(ele) { |
|---|
| | | let copy = ele.cloneNode(true); |
|---|
| | | let copiedInputs = copy.querySelectorAll("input,select,textarea"); |
|---|
| | | let canvasImgList = copy.querySelectorAll(".canvasImg,canvas"); |
|---|
| | | let selectCount = -1; |
|---|
| | | // å¤çææcanvas |
|---|
| | | for (let i = 0; i < canvasImgList.length; i++) { |
|---|
| | | let _parent = canvasImgList[i].parentNode; |
|---|
| | | let item = canvasImgList[i]; |
|---|
| | | // å é¤å
éåçcanvasèç¹ |
|---|
| | | if (item.tagName.toLowerCase() === "canvas") { |
|---|
| | | _parent.removeChild(item); |
|---|
| | | } else { |
|---|
| | | item.style.display = "block"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // å¤çææè¾å
¥æ¡ |
|---|
| | | for (let i = 0; i < copiedInputs.length; i++) { |
|---|
| | | let item = copiedInputs[i]; |
|---|
| | | let typeInput = item.getAttribute("type"); |
|---|
| | | let copiedInput = copiedInputs[i]; |
|---|
| | | // è·åselectæ ç¾ |
|---|
| | | if (!typeInput) { |
|---|
| | | typeInput = |
|---|
| | | item.tagName === "SELECT" |
|---|
| | | ? "select" |
|---|
| | | : item.tagName === "TEXTAREA" |
|---|
| | | ? "textarea" |
|---|
| | | : ""; |
|---|
| | | } |
|---|
| | | // å¤çinputæ¡ |
|---|
| | | if (item.tagName === "INPUT") { |
|---|
| | | // é¤äºåéæ¡ å¤éæ¡æ¯è¾ç¹å« |
|---|
| | | if (typeInput === "radio" || typeInput === "checkbox") { |
|---|
| | | if (item.checked) { |
|---|
| | | copiedInput.setAttribute("checked", item.checked); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | copiedInput.value = item.value; |
|---|
| | | copiedInput.setAttribute("value", item.value); |
|---|
| | | } |
|---|
| | | // å¤çselect |
|---|
| | | } else if (typeInput === "select") { |
|---|
| | | selectCount++; |
|---|
| | | for (let b = 0; b < ele.querySelectorAll("select").length; b++) { |
|---|
| | | let select = ele.querySelectorAll("select")[b]; // è·ååå§å±æ¯ä¸ä¸ªselect |
|---|
| | | !select.getAttribute("newbs") && select.setAttribute("newbs", b); // æ·»å æ è¯ |
|---|
| | | if (select.getAttribute("newbs") == selectCount) { |
|---|
| | | let opSelectedIndex = |
|---|
| | | ele.querySelectorAll("select")[selectCount].selectedIndex; |
|---|
| | | item.options[opSelectedIndex].setAttribute("selected", true); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // å¤çtextarea |
|---|
| | | } else { |
|---|
| | | copiedInput.innerHTML = item.value; |
|---|
| | | copiedInput.setAttribute("html", item.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return copy; |
|---|
| | | } |
|---|
| | | getPrintWindow(url) { |
|---|
| | | var f = this.Iframe(url); |
|---|
| | | return { |
|---|
| | | f: f, |
|---|
| | | win: f.contentWindow || f, |
|---|
| | | doc: f.doc, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | previewBoxShow() { |
|---|
| | | let box = document.getElementById("vue-pirnt-nb-previewBox"); |
|---|
| | | if (box) { |
|---|
| | | document.querySelector("html").setAttribute("style", "overflow: hidden"); |
|---|
| | | box.style.display = "block"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | previewBoxHide() { |
|---|
| | | let box = document.getElementById("vue-pirnt-nb-previewBox"); |
|---|
| | | if (box) { |
|---|
| | | document |
|---|
| | | .querySelector("html") |
|---|
| | | .setAttribute("style", "overflow: visible;"); |
|---|
| | | |
|---|
| | | box.querySelector("iframe") && isRemove(box.querySelector("iframe")); |
|---|
| | | box.style.display = "none"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | previewBox() { |
|---|
| | | let box = document.getElementById("vue-pirnt-nb-previewBox"); |
|---|
| | | let previewBodyClass = "previewBody"; |
|---|
| | | if (box) { |
|---|
| | | box.querySelector("iframe") && isRemove(box.querySelector("iframe")); |
|---|
| | | return { |
|---|
| | | close: box.querySelector(".previewClose"), |
|---|
| | | previewBody: box.querySelector(`.${previewBodyClass}`), |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | let previewContent = document.createElement("div"); |
|---|
| | | previewContent.setAttribute("id", "vue-pirnt-nb-previewBox"); |
|---|
| | | previewContent.setAttribute( |
|---|
| | | "style", |
|---|
| | | "position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: white;display:none" |
|---|
| | | ); |
|---|
| | | previewContent.style.zIndex = this.settings.zIndex; |
|---|
| | | // æå°é¢è§å¼¹çªçheader |
|---|
| | | let previewHeader = document.createElement("div"); |
|---|
| | | previewHeader.setAttribute("class", "previewHeader"); |
|---|
| | | previewHeader.setAttribute("style", "padding: 5px 20px;"); |
|---|
| | | previewHeader.innerHTML = this.settings.previewTitle; |
|---|
| | | previewContent.appendChild(previewHeader); |
|---|
| | | // closeå
³éæé® |
|---|
| | | this.close = document.createElement("div"); |
|---|
| | | let close = this.close; |
|---|
| | | close.setAttribute("class", "previewClose"); |
|---|
| | | close.setAttribute( |
|---|
| | | "style", |
|---|
| | | "position: absolute;top: 5px;right: 20px;width: 25px;height: 20px;cursor: pointer;" |
|---|
| | | ); |
|---|
| | | let closeBefore = document.createElement("div"); |
|---|
| | | let closeAfter = document.createElement("div"); |
|---|
| | | closeBefore.setAttribute("class", "closeBefore"); |
|---|
| | | closeBefore.setAttribute( |
|---|
| | | "style", |
|---|
| | | "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(45deg); top: 0px;left: 50%;" |
|---|
| | | ); |
|---|
| | | closeAfter.setAttribute("class", "closeAfter"); |
|---|
| | | closeAfter.setAttribute( |
|---|
| | | "style", |
|---|
| | | "position: absolute;width: 3px;height: 100%;background: #040404;transform: rotate(-45deg); top: 0px;left: 50%;" |
|---|
| | | ); |
|---|
| | | close.appendChild(closeBefore); |
|---|
| | | close.appendChild(closeAfter); |
|---|
| | | previewHeader.appendChild(close); |
|---|
| | | |
|---|
| | | // æå°é¢è§å¼¹çªçbody |
|---|
| | | this.previewBody = document.createElement("div"); |
|---|
| | | let previewBody = this.previewBody; |
|---|
| | | previewBody.setAttribute("class", previewBodyClass); |
|---|
| | | previewBody.setAttribute( |
|---|
| | | "style", |
|---|
| | | "display: flex;flex-direction: column; height: 100%;" |
|---|
| | | ); |
|---|
| | | previewContent.appendChild(previewBody); |
|---|
| | | // æå°é¢è§å¼¹çªçbodyçå·¥å
·æ |
|---|
| | | let previewBodyUtil = document.createElement("div"); |
|---|
| | | previewBodyUtil.setAttribute("class", "previewBodyUtil"); |
|---|
| | | previewBodyUtil.setAttribute( |
|---|
| | | "style", |
|---|
| | | "height: 32px;background: #474747;position: relative;" |
|---|
| | | ); |
|---|
| | | previewBody.appendChild(previewBodyUtil); |
|---|
| | | // æå°çæé® |
|---|
| | | this.previewBodyUtilPrintBtn = document.createElement("div"); |
|---|
| | | let previewBodyUtilPrintBtn = this.previewBodyUtilPrintBtn; |
|---|
| | | previewBodyUtilPrintBtn.setAttribute("class", "previewBodyUtilPrintBtn"); |
|---|
| | | previewBodyUtilPrintBtn.innerHTML = this.settings.previewPrintBtnLabel; |
|---|
| | | previewBodyUtilPrintBtn.setAttribute( |
|---|
| | | "style", |
|---|
| | | "position: absolute;padding: 2px 10px;margin-top: 3px;left: 24px;font-size: 14px;color: white;cursor: pointer;background-color: rgba(0,0,0,.12);background-image: linear-gradient(hsla(0,0%,100%,.05),hsla(0,0%,100%,0));background-clip: padding-box;border: 1px solid rgba(0,0,0,.35);border-color: rgba(0,0,0,.32) rgba(0,0,0,.38) rgba(0,0,0,.42);box-shadow: inset 0 1px 0 hsla(0,0%,100%,.05), inset 0 0 1px hsla(0,0%,100%,.15), 0 1px 0 hsla(0,0%,100%,.05);" |
|---|
| | | ); |
|---|
| | | previewBodyUtil.appendChild(previewBodyUtilPrintBtn); |
|---|
| | | |
|---|
| | | // æ·»å æ´ä¸ªé¢è§å°body |
|---|
| | | document.body.appendChild(previewContent); |
|---|
| | | |
|---|
| | | return { |
|---|
| | | close: this.close, |
|---|
| | | previewBody: this.previewBody, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | iframeBox(frameId, url) { |
|---|
| | | let iframe = document.createElement("iframe"); |
|---|
| | | iframe.style.border = "0px"; |
|---|
| | | iframe.style.position = "absolute"; |
|---|
| | | iframe.style.width = "0px"; |
|---|
| | | iframe.style.height = "0px"; |
|---|
| | | iframe.style.right = "0px"; |
|---|
| | | iframe.style.top = "0px"; |
|---|
| | | iframe.setAttribute("id", frameId); |
|---|
| | | iframe.setAttribute("src", url); |
|---|
| | | |
|---|
| | | return iframe; |
|---|
| | | } |
|---|
| | | Iframe(url) { |
|---|
| | | let frameId = this.settings.id; |
|---|
| | | // å±é¨æå° ç¨å½åçæ¶é´åifrmaeçurl |
|---|
| | | url = !url ? new Date().getTime() : url; |
|---|
| | | let _this = this; |
|---|
| | | |
|---|
| | | let iframe = this.iframeBox(frameId, url); |
|---|
| | | |
|---|
| | | // let that = this |
|---|
| | | try { |
|---|
| | | // ç´æ¥æå° ä¸é¢è§ |
|---|
| | | if (!this.settings.preview) { |
|---|
| | | document.body.appendChild(iframe); |
|---|
| | | } else { |
|---|
| | | iframe.setAttribute("style", "border: 0px;flex: 1;"); |
|---|
| | | // é¢è§æå° |
|---|
| | | let previewBox = this.previewBox(); |
|---|
| | | let previewBody = previewBox.previewBody; |
|---|
| | | let close = previewBox.close; |
|---|
| | | // æ·»å ifrmaeå°é¢è§å¼¹çª |
|---|
| | | previewBody.appendChild(iframe); |
|---|
| | | this.addEvent(close, "click", function () { |
|---|
| | | _this.previewBoxHide(); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | iframe.doc = null; |
|---|
| | | iframe.doc = iframe.contentDocument |
|---|
| | | ? iframe.contentDocument |
|---|
| | | : iframe.contentWindow |
|---|
| | | ? iframe.contentWindow.document |
|---|
| | | : iframe.document; |
|---|
| | | } catch (e) { |
|---|
| | | throw new Error(e + ". iframes may not be supported in this browser."); |
|---|
| | | } |
|---|
| | | if (iframe.doc == null) { |
|---|
| | | throw new Error("Cannot find document."); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return iframe; |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | var zhCn = { |
|---|
| | | name: "zh-cn", |
|---|
| | | el: { |
|---|
| | | colorpicker: { |
|---|
| | | confirm: "\u786E\u5B9A", |
|---|
| | | clear: "\u6E05\u7A7A" |
|---|
| | | }, |
|---|
| | | datepicker: { |
|---|
| | | now: "\u6B64\u523B", |
|---|
| | | today: "\u4ECA\u5929", |
|---|
| | | cancel: "\u53D6\u6D88", |
|---|
| | | clear: "\u6E05\u7A7A", |
|---|
| | | confirm: "\u786E\u5B9A", |
|---|
| | | selectDate: "\u9009\u62E9\u65E5\u671F", |
|---|
| | | selectTime: "\u9009\u62E9\u65F6\u95F4", |
|---|
| | | startDate: "\u5F00\u59CB\u65E5\u671F", |
|---|
| | | startTime: "\u5F00\u59CB\u65F6\u95F4", |
|---|
| | | endDate: "\u7ED3\u675F\u65E5\u671F", |
|---|
| | | endTime: "\u7ED3\u675F\u65F6\u95F4", |
|---|
| | | prevYear: "\u524D\u4E00\u5E74", |
|---|
| | | nextYear: "\u540E\u4E00\u5E74", |
|---|
| | | prevMonth: "\u4E0A\u4E2A\u6708", |
|---|
| | | nextMonth: "\u4E0B\u4E2A\u6708", |
|---|
| | | year: "\u5E74", |
|---|
| | | month1: "1 \u6708", |
|---|
| | | month2: "2 \u6708", |
|---|
| | | month3: "3 \u6708", |
|---|
| | | month4: "4 \u6708", |
|---|
| | | month5: "5 \u6708", |
|---|
| | | month6: "6 \u6708", |
|---|
| | | month7: "7 \u6708", |
|---|
| | | month8: "8 \u6708", |
|---|
| | | month9: "9 \u6708", |
|---|
| | | month10: "10 \u6708", |
|---|
| | | month11: "11 \u6708", |
|---|
| | | month12: "12 \u6708", |
|---|
| | | weeks: { |
|---|
| | | sun: "\u65E5", |
|---|
| | | mon: "\u4E00", |
|---|
| | | tue: "\u4E8C", |
|---|
| | | wed: "\u4E09", |
|---|
| | | thu: "\u56DB", |
|---|
| | | fri: "\u4E94", |
|---|
| | | sat: "\u516D" |
|---|
| | | }, |
|---|
| | | months: { |
|---|
| | | jan: "\u4E00\u6708", |
|---|
| | | feb: "\u4E8C\u6708", |
|---|
| | | mar: "\u4E09\u6708", |
|---|
| | | apr: "\u56DB\u6708", |
|---|
| | | may: "\u4E94\u6708", |
|---|
| | | jun: "\u516D\u6708", |
|---|
| | | jul: "\u4E03\u6708", |
|---|
| | | aug: "\u516B\u6708", |
|---|
| | | sep: "\u4E5D\u6708", |
|---|
| | | oct: "\u5341\u6708", |
|---|
| | | nov: "\u5341\u4E00\u6708", |
|---|
| | | dec: "\u5341\u4E8C\u6708" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | select: { |
|---|
| | | loading: "\u52A0\u8F7D\u4E2D", |
|---|
| | | noMatch: "\u65E0\u5339\u914D\u6570\u636E", |
|---|
| | | noData: "\u65E0\u6570\u636E", |
|---|
| | | placeholder: "\u8BF7\u9009\u62E9" |
|---|
| | | }, |
|---|
| | | cascader: { |
|---|
| | | noMatch: "\u65E0\u5339\u914D\u6570\u636E", |
|---|
| | | loading: "\u52A0\u8F7D\u4E2D", |
|---|
| | | placeholder: "\u8BF7\u9009\u62E9", |
|---|
| | | noData: "\u6682\u65E0\u6570\u636E" |
|---|
| | | }, |
|---|
| | | pagination: { |
|---|
| | | goto: "\u524D\u5F80", |
|---|
| | | pagesize: "\u6761/\u9875", |
|---|
| | | total: "\u5171 {total} \u6761", |
|---|
| | | pageClassifier: "\u9875", |
|---|
| | | deprecationWarning: "\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863" |
|---|
| | | }, |
|---|
| | | messagebox: { |
|---|
| | | title: "\u63D0\u793A", |
|---|
| | | confirm: "\u786E\u5B9A", |
|---|
| | | cancel: "\u53D6\u6D88", |
|---|
| | | error: "\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!" |
|---|
| | | }, |
|---|
| | | upload: { |
|---|
| | | deleteTip: "\u6309 delete \u952E\u53EF\u5220\u9664", |
|---|
| | | delete: "\u5220\u9664", |
|---|
| | | preview: "\u67E5\u770B\u56FE\u7247", |
|---|
| | | continue: "\u7EE7\u7EED\u4E0A\u4F20" |
|---|
| | | }, |
|---|
| | | table: { |
|---|
| | | emptyText: "\u6682\u65E0\u6570\u636E", |
|---|
| | | confirmFilter: "\u7B5B\u9009", |
|---|
| | | resetFilter: "\u91CD\u7F6E", |
|---|
| | | clearFilter: "\u5168\u90E8", |
|---|
| | | sumText: "\u5408\u8BA1" |
|---|
| | | }, |
|---|
| | | tree: { |
|---|
| | | emptyText: "\u6682\u65E0\u6570\u636E" |
|---|
| | | }, |
|---|
| | | transfer: { |
|---|
| | | noMatch: "\u65E0\u5339\u914D\u6570\u636E", |
|---|
| | | noData: "\u65E0\u6570\u636E", |
|---|
| | | titles: ["\u5217\u8868 1", "\u5217\u8868 2"], |
|---|
| | | filterPlaceholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9", |
|---|
| | | noCheckedFormat: "\u5171 {total} \u9879", |
|---|
| | | hasCheckedFormat: "\u5DF2\u9009 {checked}/{total} \u9879" |
|---|
| | | }, |
|---|
| | | image: { |
|---|
| | | error: "\u52A0\u8F7D\u5931\u8D25" |
|---|
| | | }, |
|---|
| | | pageHeader: { |
|---|
| | | title: "\u8FD4\u56DE" |
|---|
| | | }, |
|---|
| | | popconfirm: { |
|---|
| | | confirmButtonText: "\u786E\u5B9A", |
|---|
| | | cancelButtonText: "\u53D6\u6D88" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export { zhCn as default }; |
|---|
| | | //# sourceMappingURL=zh-cn.mjs.map |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="home"> |
|---|
| | | <h1>è¿éæ¯æµè¯æå</h1> |
|---|
| | | <ul> |
|---|
| | | <li>æ åºå表LI</li> |
|---|
| | | <li>æ åºå表LI</li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "HelloWorld", |
|---|
| | | props: { |
|---|
| | | msg: String, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
|---|
| | | <style scoped lang="scss"></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-table |
|---|
| | | :data="SClist" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{ |
|---|
| | | 'text-align': 'left', |
|---|
| | | |
|---|
| | | fontSize: '20px', |
|---|
| | | }" |
|---|
| | | > |
|---|
| | | <el-table-column :label="labelName"> |
|---|
| | | <!-- <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > --> |
|---|
| | | <template v-for="(item, index) in tableHeader"> |
|---|
| | | <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > |
|---|
| | | <template #default="scope"> |
|---|
| | | <div v-show="editable || scope.row.editable" class="editable-row"> |
|---|
| | | <template v-if="item.type === 'input' || item.type === 'text'"> |
|---|
| | | <el-input |
|---|
| | | size="small" |
|---|
| | | v-model="scope.row[item.prop]" |
|---|
| | | :placeholder="`请è¾å
¥${item.label}`" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div v-show="!editable && !scope.row.editable" class="editable-row"> |
|---|
| | | <span class="editable-row-span">{{ scope.row[item.prop] }}</span> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ["SClist", "tableHeader", "labelName", "editable"], |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-cascader |
|---|
| | | :style="{ width }" |
|---|
| | | :disabled="disabled" |
|---|
| | | v-model="data.value" |
|---|
| | | :options="data.options" |
|---|
| | | :props="data.props" |
|---|
| | | @change="handlerChange" |
|---|
| | | ></el-cascader> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, onBeforeMount, watch } from "vue"; |
|---|
| | | // API |
|---|
| | | // import { CommonApi } from "@/api/common"; |
|---|
| | | // requestUrl |
|---|
| | | // import ApiUrl from "@/api/requestUrl"; |
|---|
| | | export default { |
|---|
| | | name: "BasisCascader", |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | cascaderProps: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | url: { |
|---|
| | | type: String, |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | method: { |
|---|
| | | type: String, |
|---|
| | | default: "post", |
|---|
| | | }, |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: 0, |
|---|
| | | }, |
|---|
| | | width: { |
|---|
| | | type: String, |
|---|
| | | default: "100%", |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emits: ["update:value", "callback"], |
|---|
| | | setup(props, { emit }) { |
|---|
| | | const data = reactive({ |
|---|
| | | props: props.data.props, |
|---|
| | | options: [], |
|---|
| | | value: 0, |
|---|
| | | }); |
|---|
| | | const handlerChange = (value) => { |
|---|
| | | // è·åæåä¸é¡¹ |
|---|
| | | const val = value[value.length - 1]; |
|---|
| | | // è¿å |
|---|
| | | emit("update:value", val); |
|---|
| | | }; |
|---|
| | | /** è·åå表 */ |
|---|
| | | const getData = () => { |
|---|
| | | const url = ApiUrl?.cascader?.[props.url || props?.data?.url]?.url; |
|---|
| | | const method = ApiUrl?.cascader?.[props.url]?.method || "post"; |
|---|
| | | if (!url) { |
|---|
| | | throw new Error("urlå°åä¸åå¨"); |
|---|
| | | } |
|---|
| | | // åæ° |
|---|
| | | const request_data = { |
|---|
| | | url, |
|---|
| | | method, |
|---|
| | | data: props.data, |
|---|
| | | }; |
|---|
| | | // CommonApi(request_data).then((response) => { |
|---|
| | | // data.options = response.data; |
|---|
| | | // }); |
|---|
| | | }; |
|---|
| | | /** çå½å¨ææè½½ä¹å */ |
|---|
| | | onBeforeMount(() => { |
|---|
| | | getData(); |
|---|
| | | }); |
|---|
| | | /** çå¬ */ |
|---|
| | | watch( |
|---|
| | | () => props.value, |
|---|
| | | (newValue) => { |
|---|
| | | data.value = newValue; |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | return { data, handlerChange }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-checkbox-group v-model="value" :disabled="form_disabled[data.prop]" @change="handlerChange"> |
|---|
| | | <el-checkbox v-for="checkbox in data.options" :label="checkbox.value" :key="checkbox.value">{{ checkbox.label }}</el-checkbox> |
|---|
| | | </el-checkbox-group> |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "CheckboxComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handlerChange = (val) => { |
|---|
| | | emit("update:value", val) |
|---|
| | | emit("callback", { |
|---|
| | | type: 'checkbox', |
|---|
| | | value: val, |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-date-picker :style="`width: ${data.width}`" |
|---|
| | | v-model="value" |
|---|
| | | :disabled="disabled" |
|---|
| | | :type="data.date_type || 'datetime'" |
|---|
| | | :format="data.date_format || 'YYYY-MM-DD HH:mm:ss'" |
|---|
| | | :placeholder="data.placeholder || 'éæ©æ¥ææ¶é´'" |
|---|
| | | :start-placeholder="data.start_placeholder || '请éæ©å¼å§æ¥æ'" |
|---|
| | | :end-placeholder="data.end_placeholder || '请éæ©ç»ææ¥æ'" |
|---|
| | | :range-separator="data.range_placeholder || '-'" |
|---|
| | | @change="handlerChange" |
|---|
| | | > |
|---|
| | | </el-date-picker> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "DateComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Array, String], |
|---|
| | | default: '' |
|---|
| | | }, |
|---|
| | | disabled: Boolean |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handlerChange = (val) => { |
|---|
| | | emit("update:value", val) |
|---|
| | | emit("callback", { |
|---|
| | | type: 'date', |
|---|
| | | value: val, |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-input |
|---|
| | | v-model="value" |
|---|
| | | :type="data.value_type || 'text'" |
|---|
| | | v-on:input="handlerEnter" |
|---|
| | | debounce |
|---|
| | | :placeholder="placeholder" |
|---|
| | | :maxlength="prop.maxlength" |
|---|
| | | :minlength="prop.minlength || 0" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs, watchEffect } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "InputComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | prop: props.data, |
|---|
| | | placeholder: props.data.placeholder |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handlerEnter = (val) => { |
|---|
| | | emit("update:value", val) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerEnter |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-input-number v-model="value" :min="data.min || 0" :max="data.max || 99999999" @change="handleChange" /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs, watchEffect } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "InputComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handleChange = (val) => { |
|---|
| | | console.log(val) |
|---|
| | | emit("update:value", val) |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handleChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-select v-model="key" placeholder="请éæ©" class="key-word-select" @change="handlerChange"> |
|---|
| | | <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option> |
|---|
| | | </el-select> |
|---|
| | | <el-input v-model="value" class="width-200" :placeholder="placeholder" v-on:input="callback"></el-input> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs, watch } from "vue"; |
|---|
| | | export default { |
|---|
| | | name: "KeyWord", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emits: ["callback"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | key: "", |
|---|
| | | value: "", |
|---|
| | | placeholder: "请è¾å
¥æç´¢çå
³é®å", |
|---|
| | | options: props.data.options |
|---|
| | | }) |
|---|
| | | |
|---|
| | | /** ä¸æäºä»¶ */ |
|---|
| | | const handlerChange = (value) => { |
|---|
| | | // æ¸
é¤inputè¾å
¥æ¡ææ¬ |
|---|
| | | data.value = ""; |
|---|
| | | // æ´æ°inputè¾å
¥æ¡å ä½ææ¬ |
|---|
| | | updatePlaceholder(); |
|---|
| | | // åè° |
|---|
| | | callback() |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** äºä»¶åè° */ |
|---|
| | | const callback = () => { |
|---|
| | | emit("callback", { |
|---|
| | | type: 'keyword', |
|---|
| | | value: { key: data.key, value: data.value }, |
|---|
| | | formItem: props.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** update Placeholder */ |
|---|
| | | const updatePlaceholder =() => { |
|---|
| | | const item = data.options.filter(item => item.value === data.key)[0]; |
|---|
| | | data.placeholder = `请è¾å
¥${item.label}`; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** æ¸
é¤ */ |
|---|
| | | const handlerClear = () => { |
|---|
| | | data.key = ""; |
|---|
| | | data.value = ""; |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerChange, |
|---|
| | | handlerClear, |
|---|
| | | callback |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .key-word-select { |
|---|
| | | width: 100px; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | .width-200 { width: 200px; } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <template |
|---|
| | | v-if="!data.options && data.callback && data.callback(data)" |
|---|
| | | ></template> |
|---|
| | | <el-radio-group |
|---|
| | | v-else |
|---|
| | | v-model="value" |
|---|
| | | :disabled="disabled" |
|---|
| | | @change="handlerChange" |
|---|
| | | > |
|---|
| | | <el-radio |
|---|
| | | v-for="radio in data.options" |
|---|
| | | :key="radio[data.key_value] || radio.value" |
|---|
| | | :label="radio[data.key_value] || radio.value" |
|---|
| | | > |
|---|
| | | {{ radio[data.key_label] || radio.label }} |
|---|
| | | </el-radio> |
|---|
| | | </el-radio-group> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs, watch } from "vue"; |
|---|
| | | // API |
|---|
| | | // import { RoleListAll } from "@/api/role"; |
|---|
| | | export default { |
|---|
| | | name: "DateComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | disabled: Boolean, |
|---|
| | | }, |
|---|
| | | emits: ["update:value", "callback"], |
|---|
| | | setup(props, { emit }) { |
|---|
| | | const dataa = reactive({ |
|---|
| | | value: "", |
|---|
| | | data: props.data, |
|---|
| | | }); |
|---|
| | | watch( |
|---|
| | | () => props.data, |
|---|
| | | () => { |
|---|
| | | RoleListAll().then( |
|---|
| | | (response) => { |
|---|
| | | console.log(111); |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | deep: true, |
|---|
| | | immediate: true, |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | const handlerChange = (val) => { |
|---|
| | | emit("update:value", val); |
|---|
| | | emit("callback", { |
|---|
| | | type: "radio", |
|---|
| | | value: val, |
|---|
| | | formItem: props.data, |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | handlerChange, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-select v-model="value" :disabled="disabled" :style="`width: ${data.width || '100%'}`" @change="handlerChange"> |
|---|
| | | <el-option v-for="select in data.options" :key="select.value" :label="select.label" :value="select.value"></el-option> |
|---|
| | | </el-select> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "SelectComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handlerChange = (val) => { |
|---|
| | | emit("update:value", val) |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-switch |
|---|
| | | v-model="init_data.value" |
|---|
| | | :loading="init_data.loading" |
|---|
| | | :before-change="handlerSwitch" |
|---|
| | | > |
|---|
| | | </el-switch> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, getCurrentInstance, watch } from "vue"; |
|---|
| | | // requestUrl |
|---|
| | | // import ApiUrl from "@/api/requestUrl"; |
|---|
| | | //API |
|---|
| | | // import { SwitchStatus } from "@/api/common"; |
|---|
| | | export default { |
|---|
| | | name: "SwitchComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | config: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emits: ["update:value", "callback"], |
|---|
| | | setup(props) { |
|---|
| | | // é
ç½®ä¿¡æ¯ |
|---|
| | | const config = reactive(props.config); |
|---|
| | | // æ°æ® |
|---|
| | | const data = reactive(props.data); |
|---|
| | | // åå§å¼ |
|---|
| | | const init_data = reactive({ |
|---|
| | | value: data[config.prop], |
|---|
| | | loading: false, |
|---|
| | | }); |
|---|
| | | // çå¬æ°æ® |
|---|
| | | watch( |
|---|
| | | () => props.data, |
|---|
| | | (newValue, oldValue) => { |
|---|
| | | init_data.value = newValue[config.prop]; |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | // äºä»¶ |
|---|
| | | const handlerSwitch = (value) => { |
|---|
| | | init_data.loading = true; |
|---|
| | | // 请æ±åæ° |
|---|
| | | const url = |
|---|
| | | config.api_url || ApiUrl?.[config.api_module]?.[config.api_key]?.url; |
|---|
| | | const method = |
|---|
| | | config.method || |
|---|
| | | ApiUrl?.[config.api_module]?.[config.api_key]?.method || |
|---|
| | | "post"; |
|---|
| | | if (!url) { |
|---|
| | | console.log("请æ±æ¥å£ä¸åå¨"); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // 请æ±åæ° |
|---|
| | | const key_id = config.key_id || "id"; |
|---|
| | | const request_data = { |
|---|
| | | url, |
|---|
| | | method, |
|---|
| | | data: { |
|---|
| | | [key_id]: data[key_id], // çä»·äº["id"]: data["id"] |
|---|
| | | [config.prop]: !init_data.value, // çä»·äº["status"]: value |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | // SwitchStatus(request_data) |
|---|
| | | // .then((response) => { |
|---|
| | | // proxy.$message.success(response.message); |
|---|
| | | // data.status = value; |
|---|
| | | // init_data.loading = false; |
|---|
| | | // resolve(true); |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // init_data.loading = false; |
|---|
| | | // reject(false); |
|---|
| | | // }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | return { config, init_data, handlerSwitch }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-input |
|---|
| | | v-model="value" |
|---|
| | | type="textarea" |
|---|
| | | debounce |
|---|
| | | :rows="data.rows || 5" |
|---|
| | | :disabled="form_disabled[data.prop]" |
|---|
| | | :style="`width: ${data.width || '100%'}`" |
|---|
| | | :placeholder="data.placeholder" |
|---|
| | | @change="handlerChange" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, toRefs } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: "TextareaComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ['update:value', 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ |
|---|
| | | value: '', |
|---|
| | | data: props.data |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const handlerChange = (val) => { |
|---|
| | | emit("update:value", val) |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | handlerChange |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-upload |
|---|
| | | class="avatar-uploader" |
|---|
| | | action="#" |
|---|
| | | :http-request="handlerUpload" |
|---|
| | | :before-upload="handlerBeforeOnUpload" |
|---|
| | | :on-error="handlerOnError" |
|---|
| | | :show-file-list="false" |
|---|
| | | :disabled="disabled" |
|---|
| | | > |
|---|
| | | <img v-if="data.image_url" :src="data.image_url" class="avatar" /> |
|---|
| | | <span v-else>+</span> |
|---|
| | | </el-upload> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, getCurrentInstance, watch } from "vue"; |
|---|
| | | // import { UploadFile } from "@/api/common"; |
|---|
| | | export default { |
|---|
| | | name: "BasisUpload", |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | value: { |
|---|
| | | type: String, |
|---|
| | | default: "", |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emits: ["update:value", "callback"], |
|---|
| | | setup(props, { emit }) { |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | const data = reactive({ |
|---|
| | | image_url: "", |
|---|
| | | }); |
|---|
| | | const handlerOnError = (res, file) => {}; |
|---|
| | | const handlerBeforeOnUpload = async (file) => { |
|---|
| | | const isLt2M = file.size / 1024 / 1024 < 2; // éå¶æ件大å°ä¸è½å¤§äº 2M |
|---|
| | | if (!isLt2M) { |
|---|
| | | proxy.$message.error("ä¸ä¼ å¾ç大å°ä¸è½è¶
è¿ 2MB!"); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | return isJPG && isLt2M; |
|---|
| | | }; |
|---|
| | | const handlerUpload = async (params) => { |
|---|
| | | const file = params.file; |
|---|
| | | // å®ä¾å表å对象 |
|---|
| | | const form = new FormData(); |
|---|
| | | // 表åæ·»å files å段 |
|---|
| | | form.append("files", file); |
|---|
| | | // ä¸ä¼ æ¥å£ |
|---|
| | | try { |
|---|
| | | const url = await startUpload(form); |
|---|
| | | data.image_url = url; |
|---|
| | | emit("update:imageUrl", url); |
|---|
| | | } catch { |
|---|
| | | console.log("ä¸ä¼ 失败"); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * å¼å§æ件ä¸ä¼ |
|---|
| | | */ |
|---|
| | | const startUpload = (form) => { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | // UploadFile(form).then(response => { |
|---|
| | | // resolve(response.data.files_path); |
|---|
| | | // }) |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | watch( |
|---|
| | | () => props.value, |
|---|
| | | (newValue, oldValue) => { |
|---|
| | | data.image_url = newValue; |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | return { |
|---|
| | | data, |
|---|
| | | handlerUpload, |
|---|
| | | handlerOnError, |
|---|
| | | handlerBeforeOnUpload, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div ref="editor"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, onMounted, watch, nextTick } from 'vue'; |
|---|
| | | import WangEditor from 'wangeditor'; |
|---|
| | | // cookies |
|---|
| | | import { getToken } from "@/utils/cookies"; // è¿æ¯å°è£
好çæ¹æ³ |
|---|
| | | export default { |
|---|
| | | name: 'Wangeditor', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | value: { |
|---|
| | | type: String, |
|---|
| | | default: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ["update:value", 'callback'], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | let html = ref(null) |
|---|
| | | // å
容 |
|---|
| | | let content = ref(''); |
|---|
| | | // å¯ææ¬DOMå
ç´ |
|---|
| | | const editor = ref(null); |
|---|
| | | // å¯ææ¬å¯¹è±¡ |
|---|
| | | let editor_instance = null; |
|---|
| | | // çå½å¨æ |
|---|
| | | onMounted(() => { |
|---|
| | | nextTick(() => { |
|---|
| | | // å建å¯ææ¬å¯¹è±¡ |
|---|
| | | editor_instance = new WangEditor(editor.value); |
|---|
| | | // å¾çä¸ä¼ é
ç½® |
|---|
| | | editor_instance.config.uploadImgServer = process.env.VUE_APP_DEV_TARGET + '/upload' // ä¸ä¼ å¾ççæ¥å£å°å |
|---|
| | | editor_instance.config.uploadFileName = 'files' // formdataä¸çnameå±æ§ |
|---|
| | | editor_instance.config.uploadImgHeaders = { |
|---|
| | | Token: getToken() // 设置请æ±å¤´ |
|---|
| | | } |
|---|
| | | editor_instance.config.uploadImgHooks = { |
|---|
| | | // å¾çä¸ä¼ 并è¿åç»æï¼ä½å¾çæå
¥é误æ¶è§¦å |
|---|
| | | fail: function (xhr, editor, result) { |
|---|
| | | console.log(result) |
|---|
| | | }, |
|---|
| | | // ä¾å¦æå¡å¨ç«¯è¿åçä¸æ¯ { errno: 0, data: [...] } è¿ç§æ ¼å¼ï¼å¯ä½¿ç¨ customInsert |
|---|
| | | customInsert: function(insertImgFn, result) { |
|---|
| | | // insertImgFn å¯æå¾çæå
¥å°ç¼è¾å¨ï¼ä¼ å
¥å¾ç src ï¼æ§è¡å½æ°å³å¯ |
|---|
| | | insertImgFn(result.data.files_path) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // é
ç½®changeäºä»¶ |
|---|
| | | Object.assign(editor_instance.config, { |
|---|
| | | onchange(value) { |
|---|
| | | content.value = value; |
|---|
| | | emit("update:value", value); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // å建 |
|---|
| | | editor_instance.create(); |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | watch(() => props.value, (newContent, oldContent) => { |
|---|
| | | editor_instance.txt.html(newContent); |
|---|
| | | }) |
|---|
| | | return { editor } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang='scss' scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export function relationHook(){ |
|---|
| | | /** |
|---|
| | | * @param { String } value æ§å¶æ¹çé项 value |
|---|
| | | * @param { Array } data å
³èå
³ç³»çæ°æ®é
ç½® relation_hidden |
|---|
| | | * @param { Object } props æ¾ç¤º/éè对象éä¿ |
|---|
| | | */ |
|---|
| | | const HiddenItem = (value, data, props) => { |
|---|
| | | if(data && Array.isArray(data) && data.length > 0) { |
|---|
| | | data.forEach(item => { |
|---|
| | | const field = item[0]; |
|---|
| | | const objValue = item[1]; |
|---|
| | | props[field] = objValue[value] |
|---|
| | | // é项为 1 æ¶ |
|---|
| | | // props["title"] = objValue["1"] => true |
|---|
| | | // props["iamge_url"] = objValue["1"] => true |
|---|
| | | // é项为 0 æ¶ |
|---|
| | | // props["title"] = objValue["0"] => true |
|---|
| | | // props["iamge_url"] = objValue["0"] => undefined |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const DisabledItem = (value, data, props) => { |
|---|
| | | if(data && Array.isArray(data) && data.length > 0) { |
|---|
| | | data.forEach(item => { |
|---|
| | | const field = item[0]; |
|---|
| | | const objValue = item[1]; |
|---|
| | | props[field] = objValue[value] |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { HiddenItem, DisabledItem }; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { reactive } from "vue"; |
|---|
| | | // éªè¯ |
|---|
| | | import { validate_email, validate_password } from "@/utils/validate"; |
|---|
| | | /** |
|---|
| | | * @returns BasisFormç»ä»¶åå»ºæ ¡éªè§å |
|---|
| | | */ |
|---|
| | | export function rulesHook(){ |
|---|
| | | /** |
|---|
| | | * @param {*} data é
ç½®é¢å¤ç»ä»¶ |
|---|
| | | */ |
|---|
| | | const InitRules = (data = []) => { |
|---|
| | | if(data.length === 0) { return false; } |
|---|
| | | // å¤ææ¯å¦ærequiredå±æ§ |
|---|
| | | data.forEach(item => { |
|---|
| | | //åå§åè§åæ°ç» |
|---|
| | | let rulesArr = []; |
|---|
| | | if(item.required) { |
|---|
| | | let json = { required: true, message: item.message || messageType(item), trigger: 'change' } |
|---|
| | | rulesArr.push(json) |
|---|
| | | } |
|---|
| | | // æ¯å¦æå
¶ä»çæ ¡éªè§å |
|---|
| | | const rule = item.rule; |
|---|
| | | if(rule && Array.isArray(rule) && rule.length > 0) { |
|---|
| | | rulesArr = rulesArr.concat(rule); |
|---|
| | | } |
|---|
| | | // ç¨æ·å |
|---|
| | | if(item.value_type === 'username') { |
|---|
| | | const rule = { |
|---|
| | | validator(rule, value, callback, source, options) { |
|---|
| | | if(!value || value === ""){ |
|---|
| | | callback(new Error("请è¾å
¥ç¨æ·å")); |
|---|
| | | }else if(!validate_email(value)) { |
|---|
| | | callback(new Error("é®ç®±æ ¼å¼ä¸æ£ç¡®")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | rulesArr = rulesArr.concat(rule); |
|---|
| | | } |
|---|
| | | // å¯ç |
|---|
| | | if(item.value_type === 'password') { |
|---|
| | | const rule = { |
|---|
| | | validator(rule, value, callback, source, options) { |
|---|
| | | if(!value || value === ""){ |
|---|
| | | callback(new Error("请è¾å
¥ç¨å¯ç ")); |
|---|
| | | }else if(!validate_password(value)) { |
|---|
| | | callback(new Error("请è¾å
¥>=6并ä¸<=20ä½çå¯ç ï¼å
å«æ°åãåæ¯")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | rulesArr = rulesArr.concat(rule); |
|---|
| | | } |
|---|
| | | // å®ä¹ruleså±æ§èµå¼ |
|---|
| | | item.rules = rulesArr; |
|---|
| | | }); |
|---|
| | | return data; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @description æ示ææ¬ |
|---|
| | | */ |
|---|
| | | const messageType = (data) => { |
|---|
| | | let msg = ""; |
|---|
| | | switch(data.type){ |
|---|
| | | case "input": |
|---|
| | | case "wangeditor": |
|---|
| | | msg = "请è¾å
¥"; |
|---|
| | | break; |
|---|
| | | case "upload": |
|---|
| | | msg = "请ä¸ä¼ "; |
|---|
| | | break; |
|---|
| | | case "radio": |
|---|
| | | case "checkbox": |
|---|
| | | case "select": |
|---|
| | | case "date": |
|---|
| | | case "cascader": |
|---|
| | | msg = "请éæ©"; |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | msg = "æªå®ä¹"; |
|---|
| | | } |
|---|
| | | return `${msg}${data.label}`; |
|---|
| | | } |
|---|
| | | return { InitRules }; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-form ref="formDom" v-loading="loading" element-loading-text="å è½½ä¸ï¼è¯·ç¨å" :label-width="label_width" :model="field"> |
|---|
| | | <el-row> |
|---|
| | | <template v-for="item in form_item" :key="item.prop"> |
|---|
| | | <el-col v-if="!form_hidden[item.prop]" :span="item.col || 24"> |
|---|
| | | <el-form-item v-if="item.type !== 'slot'" :label="item.label" :prop="item.prop" :rules="item.rules"> |
|---|
| | | <component |
|---|
| | | v-model:value="field[item.prop]" |
|---|
| | | :is="item.type + 'Component'" |
|---|
| | | :data="item" |
|---|
| | | :disabled="disabled[item.prop]" |
|---|
| | | @callback="componentCallback" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item v-else :label="item.label" :prop="item.prop" :rules="item.rules"> |
|---|
| | | <slot :name="item.slot_name"></slot> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </template> |
|---|
| | | </el-row> |
|---|
| | | <!-- button --> |
|---|
| | | <el-form-item v-if="form_button && form_button.length > 0"> |
|---|
| | | <el-button |
|---|
| | | v-for="item in form_button" |
|---|
| | | :key="item.key" |
|---|
| | | :type="item.type" |
|---|
| | | @click="item.callback ? item.callback() : handlerFormActive(item)" |
|---|
| | | > |
|---|
| | | {{ item.label }} |
|---|
| | | </el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, ref } from 'vue'; |
|---|
| | | // hook |
|---|
| | | import { rulesHook } from "./hook/rulesHook"; |
|---|
| | | import { relationHook } from "./hook/relationHook"; |
|---|
| | | // require import components |
|---|
| | | const files = require.context('@c/control', true, /\index.vue$/); |
|---|
| | | const modules = {} |
|---|
| | | files.keys().forEach(key => { |
|---|
| | | const name = key.split("/") |
|---|
| | | modules[name[1]+'Component'] = files(key).default || files(key) |
|---|
| | | }) |
|---|
| | | export default { |
|---|
| | | name: 'BasisForm', |
|---|
| | | components: modules, |
|---|
| | | props: { |
|---|
| | | item: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | }, |
|---|
| | | button: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | }, |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: "100px" |
|---|
| | | }, |
|---|
| | | field: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | hidden: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | loading: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | hidden: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | disabled: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ["callback"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const { InitRules } = rulesHook(); |
|---|
| | | const { HiddenItem, DisabledItem } = relationHook(); |
|---|
| | | // æ ¡éªè§åå¤ç |
|---|
| | | const form_item = reactive(InitRules(props.item)); |
|---|
| | | const label_width = ref(props.labelWidth); |
|---|
| | | const form_button = reactive(props.button); |
|---|
| | | const form_hidden = reactive(props.hidden); |
|---|
| | | const form_disabled = reactive(props.disabled); |
|---|
| | | // 表åæ交éªè¯ |
|---|
| | | const formDom = ref(null); |
|---|
| | | // form表åå¨ä½ |
|---|
| | | const handlerFormActive = (data) => { |
|---|
| | | // æ交表åäºä»¶ |
|---|
| | | if(data.key === 'submit') { |
|---|
| | | formDom.value.validate((valid) => valid && emit("callback")); |
|---|
| | | } |
|---|
| | | // é置表åäºä»¶ |
|---|
| | | if(data.key === 'reset') { handlerFormReset(); } |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * é置表å |
|---|
| | | */ |
|---|
| | | const handlerFormReset = () => { |
|---|
| | | formDom.value.resetFields(); |
|---|
| | | } |
|---|
| | | // change äºä»¶ |
|---|
| | | const componentCallback = (params) => { |
|---|
| | | if(params.formItem.relation_hidden) { |
|---|
| | | HiddenItem(params.value, params.formItem.relation_hidden, form_hidden) |
|---|
| | | } |
|---|
| | | if(params.formItem.relation_disabled) { |
|---|
| | | DisabledItem(params.value, params.formItem.relation_hidden, form_disabled) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { formDom, form_item, label_width, form_button, form_hidden, form_disabled, formDom, handlerFormActive, componentCallback, handlerFormReset } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-pagination |
|---|
| | | class="pull-right" |
|---|
| | | sizs="small" |
|---|
| | | background |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | v-model:current-page="current_page" |
|---|
| | | :page-size="10" |
|---|
| | | :page-sizes="[10, 20, 50, 100]" |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :total="total"> |
|---|
| | | </el-pagination> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, watchEffect, watch } from 'vue'; |
|---|
| | | export default { |
|---|
| | | name: 'Pagination', |
|---|
| | | props: { |
|---|
| | | total: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | current: { |
|---|
| | | type: [Number, String], |
|---|
| | | default: 0 |
|---|
| | | }, |
|---|
| | | flag: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | emits: ["sizeChange", "currentChange", "update:flag"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | // å½å页ç |
|---|
| | | const current_page = ref(1); |
|---|
| | | // æ»æ¡æ°ç»è®¡ |
|---|
| | | const total = ref(props.total); |
|---|
| | | const page_status = ref(false); |
|---|
| | | // çå¬props.totalåçååæ¶æ´æ°total |
|---|
| | | watchEffect(() => { |
|---|
| | | total.value = props.total; |
|---|
| | | current_page.value = props.current; |
|---|
| | | }) |
|---|
| | | watch(() => props.flag, (newValue) => { |
|---|
| | | page_status.value = newValue |
|---|
| | | }) |
|---|
| | | // 页ç äºä»¶ |
|---|
| | | const handleSizeChange = (val) => { |
|---|
| | | page_status.value = true |
|---|
| | | emit("update:flag", true) |
|---|
| | | const params = { |
|---|
| | | pageNumber: 1, |
|---|
| | | pageSize: val |
|---|
| | | } |
|---|
| | | emit("sizeChange", params, 'page') |
|---|
| | | } |
|---|
| | | const handleCurrentChange = (val) => { |
|---|
| | | if(page_status.value) { return false } |
|---|
| | | const params = { |
|---|
| | | pageNumber: val |
|---|
| | | } |
|---|
| | | emit("currentChange", params, 'page') |
|---|
| | | } |
|---|
| | | return { total, current_page, handleSizeChange, handleCurrentChange } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div v-if="button_group.length > 0" class="form-search-button-group"> |
|---|
| | | <el-button v-for="item in button_group" :key="item.id" :type="item.type" @click="item.callback && item.callback()">{{ item.label }}</el-button> |
|---|
| | | </div> |
|---|
| | | <el-form ref="searchForm" inline :label-width="label_width" :model="field"> |
|---|
| | | <template v-if="form_item && form_item.length > 0"> |
|---|
| | | <el-form-item v-for="item in form_item" :key="item.prop" :label="item.label" :prop="item.prop" :label-width="item.label_width || label_width"> |
|---|
| | | <component :ref="componentDom" :key="item.type" v-model:value="field[item.prop]" :is="item.type + 'Component'" :data="item" @callback="componentCallback" /> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- button --> |
|---|
| | | <el-form-item> |
|---|
| | | <div class="pull-right"> |
|---|
| | | <el-button type="danger" @click="handlerSearch">æç´¢</el-button> |
|---|
| | | <el-button v-if="button.reset_button" @click="handlerReset">éç½®</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | </template> |
|---|
| | | </el-form> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, ref, inject, toRefs, nextTick } from 'vue'; |
|---|
| | | // require import components |
|---|
| | | const files = require.context('@c/control', true, /\index.vue$/); |
|---|
| | | const modules = {} |
|---|
| | | files.keys().forEach(key => { |
|---|
| | | const name = key.split("/") |
|---|
| | | modules[name[1]+'Component'] = files(key).default || files(key) |
|---|
| | | }) |
|---|
| | | export default { |
|---|
| | | name: 'BasisForm', |
|---|
| | | components: modules, |
|---|
| | | props: { |
|---|
| | | item: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | }, |
|---|
| | | labelWidth: { |
|---|
| | | type: [String, Number], |
|---|
| | | default: "100px" |
|---|
| | | }, |
|---|
| | | field: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | button: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | button_group: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | }, |
|---|
| | | button_col: { |
|---|
| | | type: Number, |
|---|
| | | default: 24 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ["callbackSearch"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | const data = reactive({ key: "", value: "" }); |
|---|
| | | // è·åç¶ç»ä»¶provideæ°æ® |
|---|
| | | const search_config = inject("search_config"); |
|---|
| | | // labelå ä½å®½åº¦ |
|---|
| | | const label_width = ref(search_config?.label_width || props.labelWidth); |
|---|
| | | // ç»ä»¶å
ç´ é
ç½® |
|---|
| | | const form_item = reactive(search_config?.form_item || props.item); |
|---|
| | | // å段é
ç½® |
|---|
| | | const field = reactive(search_config?.form_data || props.field); |
|---|
| | | // æé®é
ç½® |
|---|
| | | const button = reactive(search_config?.form_button || props.button); |
|---|
| | | // æé®ç»é
ç½® |
|---|
| | | const button_group = reactive(search_config?.form_button_group || props.button_group); |
|---|
| | | // æé®å ä½ col |
|---|
| | | const button_col = reactive(search_config?.button_col || props.button_col); |
|---|
| | | /** |
|---|
| | | * è·åå¨æç»ä»¶çdom |
|---|
| | | */ |
|---|
| | | const keyword = ref(null) |
|---|
| | | const componentDom = el => { |
|---|
| | | console.log(el) |
|---|
| | | if(el && el.data.type === 'keyword') { |
|---|
| | | keyword.value = el |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // æç´¢ |
|---|
| | | const handlerSearch = () => { |
|---|
| | | const data = formatRequest(); |
|---|
| | | // åè°ç¶ç»ä»¶æ¹æ³ |
|---|
| | | emit("callbackSearch", data, "search"); |
|---|
| | | } |
|---|
| | | // éç½® |
|---|
| | | const searchForm = ref(null); |
|---|
| | | const handlerReset = () => { |
|---|
| | | searchForm.value.resetFields(); |
|---|
| | | // è°ç¨å
³é®åç»ä»¶çclearæ¹æ³ |
|---|
| | | keyword.value && keyword.value.handlerClear() |
|---|
| | | emit("callbackSearch", {}, "search"); |
|---|
| | | } |
|---|
| | | /** åæ°æ ¼å¼å */ |
|---|
| | | const formatRequest = () => { |
|---|
| | | // 声æ空çJSON对象临æ¶åå¨æ°æ® |
|---|
| | | const request_data = {}; |
|---|
| | | // è¿æ»¤å¨å¼åå¨çæ°æ® |
|---|
| | | for(let key in field) { |
|---|
| | | if(field[key] !== "") { request_data[key] = field[key]; } |
|---|
| | | } |
|---|
| | | // å¤æå
³é®åä¸æéæ©æ¯å¦æå¼åå¨ |
|---|
| | | if(data.key && data.value) { request_data[data.key] = data.value; } |
|---|
| | | // è¿ååæ° |
|---|
| | | return request_data; |
|---|
| | | } |
|---|
| | | // åè° |
|---|
| | | const componentCallback = (params) => { |
|---|
| | | if(params.type === 'keyword') { |
|---|
| | | data.key = params.value.key |
|---|
| | | data.value = params.value.value |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | form_item, field, label_width, button, componentCallback, handlerSearch, handlerReset, componentDom, searchForm, button_group, button_col |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .form-search-button-group { margin-bottom: 20px; } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <svg class="svg-class" :class="svgClassName"> |
|---|
| | | <use :href="svgIcon"></use> |
|---|
| | | </svg> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import { ref, computed } from "vue"; |
|---|
| | | export default { |
|---|
| | | name: "SvgIcon", |
|---|
| | | props: { |
|---|
| | | iconName: { |
|---|
| | | type: String, |
|---|
| | | default: "" |
|---|
| | | }, |
|---|
| | | className: { |
|---|
| | | type: String, |
|---|
| | | default: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setup(props){ |
|---|
| | | // className |
|---|
| | | const svgClassName = ref(props.className); |
|---|
| | | // svg å¾æ |
|---|
| | | const svgIcon = computed(() => `#icon-${props.iconName}`); |
|---|
| | | return { |
|---|
| | | svgClassName, |
|---|
| | | svgIcon |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss"> |
|---|
| | | .svg-class { |
|---|
| | | width: 1em; |
|---|
| | | height: 1em; |
|---|
| | | fill: currentColor; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608734152787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1160" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.390493 527.761985c0 23.127743-18.419512 41.87369-41.138956 41.87369-12.335956 0-23.276123-5.640464-30.817889-14.393825L541.089525 202.729238c-16.065907-16.353456-42.113143-16.353456-58.179051 0L237.802034 452.204126c2.877537 5.636371 4.653997 11.926634 4.653997 18.690688l0 165.475775c0 0.328481-0.089028 0.635473-0.097214 0.961908l0.297782 0 0 163.003468c0 23.125697 18.506493 41.871643 41.337477 41.871643l82.568531 0L366.562607 677.738765c0-22.850427 18.520819-41.3692 41.3692-41.3692L614.775758 636.369565c22.848381 0 41.3692 18.518772 41.3692 41.3692 0 22.846334-18.520819 41.3692-41.3692 41.3692L449.299983 719.107965l0 165.473729c0 22.427802-17.875113 40.583301-40.142256 41.246403l0 0.121773L263.148305 925.94987c-57.115835 0-103.418394-46.864354-103.418394-104.678084L159.729911 637.331473l0.084934 0c-0.00614-0.326435-0.097214-0.633427-0.097214-0.961908L159.717631 531.680225l-23.162536 23.575952c-7.541767 8.745175-18.475793 14.379499-30.807656 14.379499-22.719444 0-41.138956-18.745946-41.138956-41.87369 0-11.862165 4.895497-22.520923 12.687974-30.141484l-0.237407-0.2415 362.215602-368.668571c40.164768-40.881083 105.285928-40.881083 145.450696 0l361.569896 368.010585-0.299829 0.305969C954.175725 504.680291 959.390493 515.563152 959.390493 527.761985zM614.733802 842.206584c0.443092 0 0.854461 0.119727 1.294482 0.132006l0-0.132006 122.683157 0c22.828938 0 41.337477-18.745946 41.337477-41.871643L780.048919 637.331473l0.534166 0c-0.016373-0.496304-0.145309-0.961908-0.145309-1.464351 0-23.125697 18.417465-41.87369 41.138956-41.87369 22.719444 0 41.136909 18.747993 41.136909 41.87369 0 0.502443-0.125867 0.968048-0.145309 1.464351l0.405229 0 0 183.940312c0 57.812707-46.299489 104.678084-103.418394 104.678084l-143.528927 0 0-0.132006c-0.441045 0.014326-0.852414 0.132006-1.294482 0.132006-22.719444 0-41.138956-18.7439-41.138956-41.869596C573.594847 860.9556 592.014358 842.206584 614.733802 842.206584z" p-id="1161"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608736466130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="791" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M782.27531852 936.77037037H241.72468148c-60.19602963 0-109.22666667-49.03063703-109.22666666-109.22666667V196.4562963c0-60.19602963 49.03063703-109.22666667 109.22666666-109.22666667h540.55063704c60.19602963 0 109.22666667 49.03063703 109.22666666 109.22666667v631.0874074c0 60.19602963-49.03063703 109.22666667-109.22666666 109.22666667zM241.72468148 160.04740741c-20.02488889 0-36.40888889 16.384-36.40888889 36.40888889v631.0874074c0 20.02488889 16.384 36.40888889 36.40888889 36.40888889h540.55063704c20.02488889 0 36.40888889-16.384 36.40888889-36.40888889V196.4562963c0-20.02488889-16.384-36.40888889-36.40888889-36.40888889H241.72468148z" p-id="792"></path><path d="M747.44414815 343.30548148H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.40888889s16.26263703-36.40888889 36.40888888-36.40888889h475.74281482c20.14625185 0 36.40888889 16.26263703 36.40888888 36.40888889s-16.26263703 36.40888889-36.40888888 36.40888889zM747.44414815 497.43644445H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.4088889s16.26263703-36.40888889 36.40888888-36.40888888h475.74281482c20.14625185 0 36.40888889 16.26263703 36.40888888 36.40888888s-16.26263703 36.40888889-36.40888888 36.4088889zM554.47703703 653.99466667H271.70133333c-20.14625185 0-36.40888889-16.26263703-36.40888888-36.40888889s16.26263703-36.40888889 36.40888888-36.40888889h282.7757037c20.14625185 0 36.40888889 16.26263703 36.40888889 36.40888889s-16.26263703 36.40888889-36.40888889 36.40888889z" p-id="793"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621589152962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2857" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M706.432 195.136c-14.656-9.536-34.56-5.44-44.224 9.408-9.536 14.848-5.376 34.688 9.472 44.288C772.032 314.048 832 424.448 832 544.192c0 193.92-157.504 351.68-351.04 351.68s-351.04-157.76-351.04-351.68c0-119.68 60.032-230.144 160.448-295.296 14.848-9.6 19.072-29.504 9.472-44.352C290.112 189.632 270.336 185.408 255.552 195.072 136.768 272.192 65.856 402.688 65.856 544.192 65.856 773.504 252.032 960 480.96 960S896 773.504 896 544.192C896 402.624 825.152 272.128 706.432 195.136zM480.96 572.16c17.664 0 32-14.656 32-32.832l0-380.8c0-18.112-14.336-32.768-32-32.768s-32 14.656-32 32.768l0 380.8C448.96 557.504 463.232 572.16 480.96 572.16z" p-id="2858"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621586114074" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2473" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><defs><style type="text/css"></style></defs><path d="M980.8 468.8H43.2C17.6 468.8 0 486.4 0 512s17.6 43.2 43.2 43.2h939.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM980.8 768H43.2C17.6 768 0 785.6 0 811.2s17.6 43.2 43.2 43.2h939.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM43.2 256h939.2c25.6 0 43.2-17.6 43.2-43.2s-17.6-43.2-43.2-43.2H43.2c-25.6 0-43.2 17.6-43.2 43.2S17.6 256 43.2 256z" p-id="2474"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627108347577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4935" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); } |
|---|
| | | </style></defs><path d="M660.750044 997.266537c-14.811783 0-29.804198-5.418945-40.461457-15.173046-15.714941-14.45052-69.181866-55.995766-107.114482-55.995767-38.293879 0-91.580173 41.545246-107.114482 55.995767-16.256835 15.173046-42.809667 19.688834-63.221027 10.657259l-3.070736-1.445052-153.898042-89.231964c-17.701887-13.1861-27.094726-38.47451-22.217675-59.969659 4.696419-20.772623 13.908626-87.786911-5.057682-120.661845-18.966308-32.874934-81.64544-58.343976-102.0568-64.846711-20.41136-6.322103-37.932616-26.191568-41.545246-47.325454-0.361263-2.167578-9.212207-54.370083-9.212207-92.663962 0-38.293879 8.850944-90.315752 9.212207-92.663962 3.61263-21.133886 21.133886-41.003352 41.545246-47.325454s83.090492-31.791145 102.0568-64.84671c19.146939-33.055565 9.934733-99.889222 5.057682-120.661845-4.877051-21.675781 4.335156-46.78356 22.217675-59.96966l2.890104-1.986946 153.898042-88.8707c20.41136-9.031575 46.964191-4.515788 63.221027 10.657258 15.714941 14.45052 69.181866 55.995766 107.114482 55.995767 38.293879 0 91.580173-41.545246 107.114483-55.995767 16.256835-15.173046 42.809667-19.688834 63.221026-10.657258l3.070736 1.445052 153.898042 89.231963c17.701887 13.1861 27.094726 38.47451 22.217675 59.969659-4.696419 20.772623-13.908626 87.786911 5.057682 120.661846 18.966308 32.874934 81.64544 58.343976 102.0568 64.84671 20.41136 6.322103 37.932616 26.191568 41.545246 47.325454 0.361263 2.167578 9.212207 54.370083 9.212207 92.663962 0 38.293879-8.850944 90.315752-9.212207 92.663962-3.61263 21.133886-21.133886 41.003352-41.545246 47.325454s-83.090492 31.791145-102.0568 64.84671c-19.146939 33.055565-9.934733 99.889222-5.057682 120.661845 4.877051 21.495149-4.335156 46.78356-22.217675 59.96966l-2.890104 1.986946-153.898042 88.870701c-7.22526 2.890104-14.992415 4.515788-22.75957 4.515787zM225.247486 852.580702l140.531311 81.284177c15.353678-13.727994 82.548598-70.626918 147.214676-70.626918s131.860998 56.718292 147.214677 70.626918l140.53131-81.284177c-4.154525-19.869466-19.869466-106.572588 12.644206-162.748986 33.416828-57.982713 120.661845-87.786911 136.376786-92.844593 1.445052-8.489681 8.128418-50.938084 8.128417-80.561651 0-29.623567-6.683366-72.07197-8.128417-80.561651-15.714941-5.057682-102.959958-34.86188-136.376786-92.844594-32.333039-56.176398-16.79873-142.87952-12.644206-162.748985l-140.53131-81.284177c-15.353678 13.727994-82.548598 70.626918-147.214677 70.626918-64.84671 0-131.860998-56.718292-147.214676-70.626918l-140.531311 81.284177c4.154525 19.869466 19.869466 106.572588-12.644205 162.748985-33.416828 57.982713-120.661845 87.786911-136.376786 92.844594-1.445052 8.489681-8.128418 50.938084-8.128418 80.561651 0 29.623567 6.683366 72.07197 8.128418 80.561651 15.714941 5.057682 102.959958 34.86188 136.376786 92.844593 32.333039 56.176398 16.79873 142.87952 12.644205 162.748986z" p-id="4936"></path><path d="M512.993473 729.751279c-117.59111 0-213.145176-95.734697-213.145175-213.325807s95.734697-213.325807 213.325807-213.325807 213.145176 95.734697 213.145175 213.325807S630.584583 729.751279 512.993473 729.751279z m0-363.972482c-83.090492 0-150.646675 67.556183-150.646675 150.646675s67.556183 150.646675 150.646675 150.646675c83.090492 0 150.646675-67.556183 150.646675-150.646675S596.083965 365.778797 512.993473 365.778797z" p-id="4937"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1608814595533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="809" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 962C263.4875 962 62 760.5125 62 512S263.4875 62 512 62s450 201.4875 450 450-201.4875 450-450 450z m0-825.00000029C304.8875 136.99999971 136.99999971 304.8875 136.99999971 512s167.88750029 375.00000029 375.00000029 375.00000029 375.00000029-167.88750029 375.00000029-375.00000029S719.1125 136.99999971 512 136.99999971z m0 675a299.40000029 299.40000029 0 0 1-234-112.5A299.40000029 299.40000029 0 0 1 512 586.99999971a299.25 299.25 0 0 1 233.96249971 112.5A299.25 299.25 0 0 1 512 811.99999971z m0-262.49999942a150.00000029 150.00000029 0 1 1 0-300.00000058 150.00000029 150.00000029 0 0 1 0 300.00000058z" p-id="810"></path></svg> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // è·åå½åsvgç®å½ææ为.svgç»å°¾çæ件 |
|---|
| | | const context = require.context('./icon', false, /\.svg$/); |
|---|
| | | // 解æè·åç.svgæ件çæ件å称ï¼å¹¶è¿å |
|---|
| | | const requireAll = (requireContext) => { |
|---|
| | | return requireContext.keys().map(requireContext);Â Â |
|---|
| | | }; |
|---|
| | | requireAll(context); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-switch |
|---|
| | | v-model="init_data.value" |
|---|
| | | :loading="init_data.loading" |
|---|
| | | @change="handlerSwitch($event)" |
|---|
| | | > |
|---|
| | | </el-switch> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, getCurrentInstance } from "vue"; |
|---|
| | | // requestUrl |
|---|
| | | // import ApiUrl from "@/api/requestUrl"; |
|---|
| | | //API |
|---|
| | | // import { SwitchStatus } from "@/api/common"; |
|---|
| | | export default { |
|---|
| | | name: "SwitchComponent", |
|---|
| | | props: { |
|---|
| | | data: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | config: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | setup(props) { |
|---|
| | | // é
ç½®ä¿¡æ¯ |
|---|
| | | const config = reactive(props.config); |
|---|
| | | // æ°æ® |
|---|
| | | const data = reactive(props.data); |
|---|
| | | // åå§å¼ |
|---|
| | | const init_data = reactive({ |
|---|
| | | value: data[config.prop], |
|---|
| | | loading: false, |
|---|
| | | }); |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | // äºä»¶ |
|---|
| | | const handlerSwitch = (value) => { |
|---|
| | | // 请æ±åæ° |
|---|
| | | const key_id = config.key_id; |
|---|
| | | if (!key_id) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | init_data.loading = true; |
|---|
| | | // åæ° |
|---|
| | | const request_data = { |
|---|
| | | url: config.api_url || ApiUrl[config.api_module][config.api_module_key], |
|---|
| | | method: config.method || "post", |
|---|
| | | data: { |
|---|
| | | [key_id]: data[key_id], // çä»·äº["id"]: data["id"] |
|---|
| | | [config.prop]: value, // çä»·äº["status"]: value |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | // æ¥å£è¯·æ± |
|---|
| | | // SwitchStatus(request_data) |
|---|
| | | // .then((response) => { |
|---|
| | | // proxy.$message.success(response.message); |
|---|
| | | // init_data.value = value; |
|---|
| | | // init_data.loading = false; |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // init_data.loading = false; |
|---|
| | | // }); |
|---|
| | | }; |
|---|
| | | return { config, init_data, handlerSwitch }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { reactive } from "vue"; |
|---|
| | | /** |
|---|
| | | * BasisTableç»ä»¶é»è®¤é
ç½® |
|---|
| | | * @param { Boolean } selection å¤é项é
ç½® |
|---|
| | | * @param { Boolean } batch_delete æéå é¤æé® |
|---|
| | | * @param { Boolean } pagination å页 |
|---|
| | | */ |
|---|
| | | export function configHook(){ |
|---|
| | | const config = reactive({ |
|---|
| | | selection: true, |
|---|
| | | batch_delete: true, |
|---|
| | | pagination: true, |
|---|
| | | request: true, |
|---|
| | | search: true, |
|---|
| | | action_request: false, |
|---|
| | | row_key: "id", |
|---|
| | | expand_all: true, |
|---|
| | | has_button_delete: "", |
|---|
| | | has_button_batch_delete: "" |
|---|
| | | }) |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @param {*} data é
ç½®é¢å¤ç»ä»¶ï¼trueæ¾ç¤ºï¼falseä¸æ¾ç¤º |
|---|
| | | */ |
|---|
| | | const configInit = (data = {}) => { |
|---|
| | | // æ æ°æ®æ¶ä¸æ§è¡ |
|---|
| | | if(JSON.stringify(data) === "{}") { return false; } |
|---|
| | | // è·åé»è®¤é
置项çæækey |
|---|
| | | const keys = Object.keys(config); |
|---|
| | | // 循ç¯ä¼ å
¥çé
置项 |
|---|
| | | for(let key in data) { |
|---|
| | | // è¿æ»¤ååé¾ç对象 |
|---|
| | | if (!data.hasOwnProperty(key)) { continue; } |
|---|
| | | // ES6è¯æ³å¤æä¼ å
¥çkeyåé»è®¤é
ç½®çkeyç¸åæ¶ï¼åç´æ¥æ´æ°é»è®¤é
置项çå¼ |
|---|
| | | if(keys.includes(key)) { config[key] = data[key]; } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return { config, configInit }; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <SearchForm v-if="config.search" @callbackSearch="getList" /> |
|---|
| | | <el-table :row-key="config.row_key" :default-expand-all="config.expand_all" :data="table_data.data" v-loading="table_data.loading" element-loading-text="å è½½ä¸ï¼è¯·ç¨å" border style="width: 100%" @selection-change="handleSelectionChange"> |
|---|
| | | <el-table-column v-if="config.selection" type="selection" width="40"></el-table-column> |
|---|
| | | <template v-for="header in data.render_header" :key="header.prop"> |
|---|
| | | <!-- switch --> |
|---|
| | | <el-table-column v-if="header.type === 'switch'" :label="header.label" :width="header.width"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <Switch :data="scope.row" :config="header" /> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- function --> |
|---|
| | | <el-table-column v-else-if="header.type === 'function'" :label="header.label" :width="header.width"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <div v-html="header.callback && header.callback(scope.row)"></div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- slot --> |
|---|
| | | <el-table-column v-else-if="header.type === 'slot'" :label="header.label" :width="header.width"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <slot :name="header.slot_name" :data="scope.row"></slot> |
|---|
| | | <el-button v-if="header.delete_elem" @click="handlerDelete('delete', scope.row)" v-has-button="config.has_button_delete">å é¤</el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <!-- text --> |
|---|
| | | <el-table-column v-else :prop="header.prop" :label="header.label" :width="header.width"></el-table-column> |
|---|
| | | </template> |
|---|
| | | </el-table> |
|---|
| | | <el-row class="margin-top-20"> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <el-button v-if="config.batch_delete" :disabled="!table_data.data_id" @click="handlerDelete('batch')" v-has-button="config.has_button_batch_delete">æ¹éå é¤</el-button> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="18"> |
|---|
| | | <Pagination |
|---|
| | | v-if="config.pagination" |
|---|
| | | @sizeChange="getList" |
|---|
| | | @currentChange="getList" |
|---|
| | | :total="table_data.total" |
|---|
| | | :current="table_data.current_page" /> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { reactive, getCurrentInstance, onBeforeMount, watch } from 'vue'; |
|---|
| | | // store |
|---|
| | | import { useStore } from "vuex"; |
|---|
| | | // components |
|---|
| | | import SearchForm from "@c/search"; |
|---|
| | | import Pagination from "@c/pagination"; |
|---|
| | | import Switch from "@c/control/switch"; |
|---|
| | | // hook |
|---|
| | | import { configHook } from "./configHook"; |
|---|
| | | import { requestHook } from "./requestHook"; |
|---|
| | | export default { |
|---|
| | | name: 'TableComponents', |
|---|
| | | components: { Pagination, Switch, SearchForm }, |
|---|
| | | props: { |
|---|
| | | columns: { |
|---|
| | | type: Array, |
|---|
| | | default: () => ([]) |
|---|
| | | }, |
|---|
| | | config: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | request: { |
|---|
| | | type: Object, |
|---|
| | | default: () => ({}) |
|---|
| | | }, |
|---|
| | | search: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ["onload"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | // store |
|---|
| | | const store = useStore(); |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | const { config, configInit } = configHook(); |
|---|
| | | const { requestData, table_data, handlerDeleteComfirm, saveDataId } = requestHook(); |
|---|
| | | const data = reactive({ |
|---|
| | | table_data: [], |
|---|
| | | render_header: props.columns, |
|---|
| | | row_data_id: [], |
|---|
| | | currentPage: 0, |
|---|
| | | total: 0 |
|---|
| | | }) |
|---|
| | | onBeforeMount(() => { |
|---|
| | | // é»è®¤é
置项å¤ç |
|---|
| | | configInit(props.config); |
|---|
| | | // 请æ±æ°æ® |
|---|
| | | getList(props.request) |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const getList = (params, type) => { |
|---|
| | | requestData(params, type).then(response => { |
|---|
| | | emit("onload", table_data); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | /** å é¤å¨ä½ */ |
|---|
| | | const handlerDelete = (type, val) => { |
|---|
| | | if(type === "delete") { saveDataId(val); } |
|---|
| | | handlerDeleteComfirm(); |
|---|
| | | } |
|---|
| | | /** å¤éæ¡äºä»¶ */ |
|---|
| | | const handleSelectionChange = (val) => { |
|---|
| | | saveDataId(val); |
|---|
| | | } |
|---|
| | | watch(() => store.state.app.table_action_request, () => { |
|---|
| | | config.action_request && getList(); |
|---|
| | | }) |
|---|
| | | return { data, config, table_data, requestData, getList, handlerDelete, handleSelectionChange } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang='scss' scoped> |
|---|
| | | .margin-top-20 { margin-top: 20px; } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { reactive, getCurrentInstance } from "vue"; |
|---|
| | | // requestUrl |
|---|
| | | // import ApiUrl from "@/api/requestUrl"; |
|---|
| | | // API |
|---|
| | | // import { TableData, CommonApi } from "@/api/common"; |
|---|
| | | import { configHook } from "./configHook"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | export function requestHook() { |
|---|
| | | const { config, configInit } = configHook(); |
|---|
| | | |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | let request_config = { |
|---|
| | | has: true, // æ¯å¦è¯·æ± |
|---|
| | | url: "", // 请æ±æ¨¡å |
|---|
| | | method: "post", // 请æ±ç±»å |
|---|
| | | data: {}, // 请æ±åæ° |
|---|
| | | delete_key: "", // å é¤æ¥å£çKEY |
|---|
| | | search_params: {}, |
|---|
| | | }; |
|---|
| | | const table_data = reactive({ |
|---|
| | | data: [], |
|---|
| | | data_id: "", |
|---|
| | | current_page: 0, |
|---|
| | | total: 0, |
|---|
| | | loading: false, |
|---|
| | | }); |
|---|
| | | /** |
|---|
| | | * @returns å表æ°æ®è¯·æ± |
|---|
| | | */ |
|---|
| | | const loadData = () => { |
|---|
| | | // å¤ææ¡ä»¶æ¯å¦è¯·æ±æ¥å£ |
|---|
| | | if (!request_config.has) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | if (!request_config.url) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // åæ° |
|---|
| | | const url = ApiUrl[request_config.url]?.list?.url; |
|---|
| | | const method = ApiUrl[request_config.url]?.list?.method || "post"; |
|---|
| | | const data = { ...request_config.data, ...request_config.search_params }; |
|---|
| | | if (!url) { |
|---|
| | | console.log("请æ±å°åä¸åå¨"); |
|---|
| | | return Promise.reject(); |
|---|
| | | } |
|---|
| | | const request_data = { |
|---|
| | | url, |
|---|
| | | method, |
|---|
| | | data, |
|---|
| | | }; |
|---|
| | | // å è½½ç¶æ |
|---|
| | | table_data.loading = true; |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | // TableData(request_data) |
|---|
| | | // .then((response) => { |
|---|
| | | // let response_data = response.data.data; |
|---|
| | | // // æ¯å¦æ ¼å¼åæ°æ® |
|---|
| | | // if ( |
|---|
| | | // request_config.format_data && |
|---|
| | | // Object.prototype.toString.call(request_config.format_data) === |
|---|
| | | // "[object Function]" |
|---|
| | | // ) { |
|---|
| | | // response_data = request_config.format_data(response.data.data); |
|---|
| | | // } |
|---|
| | | // console.log(response_data); |
|---|
| | | // table_data.data = response_data; |
|---|
| | | // table_data.total = response.data.total; |
|---|
| | | // table_data.current_page = response.data.current_page; |
|---|
| | | // // åæ¶å è½½ç¶æ |
|---|
| | | // table_data.loading = false; |
|---|
| | | // resolve(response.data); |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // reject(); |
|---|
| | | // // åæ¶å è½½ç¶æ |
|---|
| | | // table_data.loading = false; |
|---|
| | | // }); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const requestData = (data = {}, type = "init") => { |
|---|
| | | // åå§åé»è¾ |
|---|
| | | if (type === "init") { |
|---|
| | | request_config = { ...request_config, ...data }; |
|---|
| | | } |
|---|
| | | // å页é»è¾ |
|---|
| | | if (type === "page") { |
|---|
| | | request_config.data = { ...request_config.data, ...data }; |
|---|
| | | } |
|---|
| | | // æç´¢ |
|---|
| | | if (type === "search") { |
|---|
| | | request_config.data.pageNumber = 1; |
|---|
| | | request_config.data.pageSize = 10; |
|---|
| | | request_config.search_params = data; |
|---|
| | | } |
|---|
| | | // 请æ±æ°æ® |
|---|
| | | return loadData(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @param {Object} data |
|---|
| | | * @description æå¨è¯·æ± |
|---|
| | | */ |
|---|
| | | const handlerRequestData = (data = {}) => { |
|---|
| | | table_data.params_data = data; |
|---|
| | | loadData(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @param { StringãArray } value |
|---|
| | | * @description åå¨æ°æ®IDï¼ä½ç¨äºå é¤æ¥å£ä½¿ç¨ |
|---|
| | | * å é¤æ¥å£ |
|---|
| | | */ |
|---|
| | | const saveDataId = (value) => { |
|---|
| | | const isArray = Array.isArray(value); |
|---|
| | | if (!isArray) { |
|---|
| | | table_data.data_id = value[request_config.delete_key]; |
|---|
| | | } else { |
|---|
| | | table_data.data_id = |
|---|
| | | value.length > 0 |
|---|
| | | ? value.map((item) => item[request_config.delete_key]).join() |
|---|
| | | : ""; |
|---|
| | | } |
|---|
| | | console.log(table_data.data_id); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @description å é¤å¨ä½çç¡®è®¤å¼¹çª |
|---|
| | | */ |
|---|
| | | const handlerDeleteComfirm = () => { |
|---|
| | | proxy.deleteConfirm({ |
|---|
| | | title: "å é¤", |
|---|
| | | message: "确认å é¤å½åæ°æ®åï¼", |
|---|
| | | thenFun: () => { |
|---|
| | | handlerDelete(); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | const handlerDelete = () => { |
|---|
| | | const url = ApiUrl?.[request_config.url]?.delete?.url; |
|---|
| | | const method = ApiUrl?.[request_config.url]?.delete?.method || "post"; |
|---|
| | | if (!url) { |
|---|
| | | console.log("æªé
ç½®å é¤æ¥å£åæ°"); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // åæ° |
|---|
| | | const request_data = { |
|---|
| | | url, |
|---|
| | | method: method, |
|---|
| | | data: { [request_config.delete_key]: table_data.data_id }, |
|---|
| | | }; |
|---|
| | | // CommonApi(request_data) |
|---|
| | | // .then((response) => { |
|---|
| | | // // æåæ示 |
|---|
| | | // proxy.$message({ |
|---|
| | | // message: response.message, |
|---|
| | | // type: "success", |
|---|
| | | // }); |
|---|
| | | // loadData(); |
|---|
| | | // table_data.data_id = ""; |
|---|
| | | // proxy.deleteConfirmClose(); |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // proxy.confirmButtonLoading(false); |
|---|
| | | // }); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | table_data, |
|---|
| | | requestData, |
|---|
| | | handlerDelete, |
|---|
| | | saveDataId, |
|---|
| | | handlerDeleteComfirm, |
|---|
| | | }; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div ref="editor"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, onMounted, watch } from 'vue'; |
|---|
| | | import WangEditor from 'wangeditor'; |
|---|
| | | // cookies |
|---|
| | | import { getToken } from "@/utils/cookies"; // è¿æ¯å°è£
好çæ¹æ³ |
|---|
| | | export default { |
|---|
| | | name: 'Wangeditor', |
|---|
| | | components: {}, |
|---|
| | | props: { |
|---|
| | | content: { |
|---|
| | | type: String, |
|---|
| | | default: "" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | emits: ["update:content"], |
|---|
| | | setup(props, { emit }){ |
|---|
| | | let html = ref(null) |
|---|
| | | // å
容 |
|---|
| | | let content = ref(); |
|---|
| | | // å¯ææ¬DOMå
ç´ |
|---|
| | | const editor = ref(); |
|---|
| | | // å¯ææ¬å¯¹è±¡ |
|---|
| | | let editor_instance = null; |
|---|
| | | // çå½å¨æ |
|---|
| | | onMounted(() => { |
|---|
| | | // å建å¯ææ¬å¯¹è±¡ |
|---|
| | | editor_instance = new WangEditor(editor.value); |
|---|
| | | // å¾çä¸ä¼ é
ç½® |
|---|
| | | editor_instance.config.uploadImgServer = process.env.VUE_APP_DEV_TARGET + '/upload' // ä¸ä¼ å¾ççæ¥å£å°å |
|---|
| | | editor_instance.config.uploadFileName = 'files' // formdataä¸çnameå±æ§ |
|---|
| | | editor_instance.config.uploadImgHeaders = { |
|---|
| | | Token: getToken() // 设置请æ±å¤´ |
|---|
| | | } |
|---|
| | | editor_instance.config.uploadImgHooks = { |
|---|
| | | // å¾çä¸ä¼ 并è¿åç»æï¼ä½å¾çæå
¥é误æ¶è§¦å |
|---|
| | | fail: function (xhr, editor, result) { |
|---|
| | | console.log(result) |
|---|
| | | }, |
|---|
| | | // ä¾å¦æå¡å¨ç«¯è¿åçä¸æ¯ { errno: 0, data: [...] } è¿ç§æ ¼å¼ï¼å¯ä½¿ç¨ customInsert |
|---|
| | | customInsert: function(insertImgFn, result) { |
|---|
| | | // insertImgFn å¯æå¾çæå
¥å°ç¼è¾å¨ï¼ä¼ å
¥å¾ç src ï¼æ§è¡å½æ°å³å¯ |
|---|
| | | insertImgFn(result.data.files_path) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // é
ç½®changeäºä»¶ |
|---|
| | | Object.assign(editor_instance.config, { |
|---|
| | | onchange(value) { |
|---|
| | | content.value = value; |
|---|
| | | emit("update:content", value); |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // å建 |
|---|
| | | editor_instance.create(); |
|---|
| | | }) |
|---|
| | | watch(() => props.content, (newContent, oldContent) => { |
|---|
| | | editor_instance.txt.html(newContent); |
|---|
| | | }) |
|---|
| | | return { editor } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang='scss' scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** props */ |
|---|
| | | export const propsType = { |
|---|
| | | flag: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | width: { |
|---|
| | | type: String, |
|---|
| | | default: "30%" |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: "æ¶æ¯" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /** èªå®ä¹hook */ |
|---|
| | | export function dialogHook(emit){ |
|---|
| | | /** dialogå
³é */ |
|---|
| | | const close = (form) => { |
|---|
| | | emit("update:flag", false) |
|---|
| | | // é置表å |
|---|
| | | form && form.value.handlerFormReset(); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | close |
|---|
| | | }; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // import { reactive } from "vue"; |
|---|
| | | // // import { GetCategory } from "@/api/info"; |
|---|
| | | // /** èªå®ä¹hook */ |
|---|
| | | // export function categoryHook() { |
|---|
| | | // const infoData = reactive({ |
|---|
| | | // category_options: [], |
|---|
| | | // }); |
|---|
| | | // /** è·ååç±» */ |
|---|
| | | // const handlerGetCategory = () => { |
|---|
| | | // return GetCategory().then((response) => { |
|---|
| | | // // return response.data; |
|---|
| | | // infoData.category_options = response.data; |
|---|
| | | // }); |
|---|
| | | // }; |
|---|
| | | // return { |
|---|
| | | // infoData, |
|---|
| | | // handlerGetCategory, |
|---|
| | | // }; |
|---|
| | | // } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // api |
|---|
| | | // import { GetPermission } from "@a/account"; |
|---|
| | | // // store |
|---|
| | | // import { useStore } from "vuex"; |
|---|
| | | // /** èªå®ä¹hook */ |
|---|
| | | // export function permissionHook(){ |
|---|
| | | |
|---|
| | | // console.log(store) |
|---|
| | | // /** è·ååç±» */ |
|---|
| | | // const getPermission = () => { |
|---|
| | | |
|---|
| | | // GetPermission().then(response => { |
|---|
| | | // store.dispatch("permission/getPermissionAction") |
|---|
| | | // }) |
|---|
| | | // }; |
|---|
| | | // return { getPermission } |
|---|
| | | // } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const globalData = { |
|---|
| | | whether: [ |
|---|
| | | { value: "1", label: "æ¯" }, |
|---|
| | | { value: "0", label: "å¦" }, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | export default globalData; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const elemCode = { |
|---|
| | | // ä¿¡æ¯æ¨¡å |
|---|
| | | "init:add": 'M001F001E001', // ä¿¡æ¯ - æ·»å æé® |
|---|
| | | "init:edit": 'M001F001E002', // ä¿¡æ¯ -ç¼è¾æé® |
|---|
| | | "init:del": 'M001F001E003', // ä¿¡æ¯ -å é¤æé® |
|---|
| | | // èå模å |
|---|
| | | "menu:add": 'M002F001E001', // èå - æ·»å æé® |
|---|
| | | "menu:edit": 'M002F001E002', // èå -ç¼è¾æé® |
|---|
| | | "menu:del": 'M002F001E003', // èå -å é¤æé® |
|---|
| | | // è§è²æ¨¡å |
|---|
| | | "role:add": 'M003F001E001', // è§è² - æ·»å æé® |
|---|
| | | "role:edit": 'M003F001E002', // è§è² -ç¼è¾æé® |
|---|
| | | "role:del": 'M003F001E003', // è§è² -å é¤æé® |
|---|
| | | } |
|---|
| | | export default elemCode; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-container id="layout-container"> |
|---|
| | | <el-aside id="layout-aside" :width="collapse === true ? '60px' : '250px'"><layout-aside /></el-aside> |
|---|
| | | <el-container> |
|---|
| | | <el-header id="layout-header" height="75px"><layout-header /></el-header> |
|---|
| | | <el-main id="layout-main"><layout-main /></el-main> |
|---|
| | | </el-container> |
|---|
| | | </el-container> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import LayoutAside from "./components/Aside"; |
|---|
| | | import LayoutHeader from "./components/Header"; |
|---|
| | | import LayoutMain from "./components/Main"; |
|---|
| | | import { useStore } from "vuex"; |
|---|
| | | import { computed } from "vue"; |
|---|
| | | export default { |
|---|
| | | name: "Layout", |
|---|
| | | components: { LayoutAside, LayoutHeader, LayoutMain }, |
|---|
| | | props: {}, |
|---|
| | | setup(props){ |
|---|
| | | const store = useStore(); |
|---|
| | | const collapse = computed(() => store.state.app.collapse); |
|---|
| | | return { |
|---|
| | | collapse |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scpoed> |
|---|
| | | #layout-container { height: 100vh; } |
|---|
| | | #layout-aside { |
|---|
| | | background-color: #344a5f; |
|---|
| | | @include webkit(transition, all .3s ease 0s); |
|---|
| | | } |
|---|
| | | #layout-header { |
|---|
| | | position: relative; |
|---|
| | | z-index: 10; |
|---|
| | | background-color: $color_main; |
|---|
| | | @include webkit(box-shadow, 0 0 10px 0 rgba(0, 0, 0, .1)); |
|---|
| | | } |
|---|
| | | #layout-main { background-color: #f7f7f7; } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <h1 class="logo">奥çé MESS 管çå¹³å°</h1> |
|---|
| | | <el-menu |
|---|
| | | :collapse="collapse" |
|---|
| | | :default-active="currentPath" |
|---|
| | | background-color="#344a5f" |
|---|
| | | text-color="#fff" |
|---|
| | | active-text-color="#ffffff" |
|---|
| | | router |
|---|
| | | > |
|---|
| | | <template v-for="item in routers" :key="item.path"> |
|---|
| | | <template v-if="!item.hidden"> |
|---|
| | | <!-- ä¸çº§èå --> |
|---|
| | | <template v-if="hasOnlyChild(item.children)"> |
|---|
| | | <el-menu-item :index="item.children[0].path"> |
|---|
| | | <!-- <img class="menu-icon" :src="item.meta.icon" alt="" /> --> |
|---|
| | | <template #title>{{ |
|---|
| | | item.children[0].meta && item.children[0].meta.title |
|---|
| | | }}</template> |
|---|
| | | </el-menu-item> |
|---|
| | | </template> |
|---|
| | | <!-- å级èå --> |
|---|
| | | <template v-else> |
|---|
| | | <el-sub-menu |
|---|
| | | v-if="item.children && item.children.length > 0" |
|---|
| | | :index="item.path" |
|---|
| | | > |
|---|
| | | <template #title> |
|---|
| | | <span>{{ item.meta && item.meta.title }}</span> |
|---|
| | | </template> |
|---|
| | | <template v-for="child in item.children" :key="child.path"> |
|---|
| | | <el-menu-item v-if="!child.hidden" :index="child.path">{{ |
|---|
| | | child.meta && child.meta.title |
|---|
| | | }}</el-menu-item> |
|---|
| | | </template> |
|---|
| | | </el-sub-menu> |
|---|
| | | </template> |
|---|
| | | </template> |
|---|
| | | </template> |
|---|
| | | </el-menu> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { useRouter, useRoute } from "vue-router"; |
|---|
| | | import { reactive, computed, toRefs } from "vue"; |
|---|
| | | import { useStore } from "vuex"; |
|---|
| | | export default { |
|---|
| | | name: "Aside", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup() { |
|---|
| | | const { options } = useRouter(); |
|---|
| | | const { path } = useRoute(); |
|---|
| | | const store = useStore(); |
|---|
| | | const routers = options.routes; |
|---|
| | | console.log(routers); |
|---|
| | | /** |
|---|
| | | * æ°æ® |
|---|
| | | */ |
|---|
| | | const data = reactive({ |
|---|
| | | logo: computed(() => { |
|---|
| | | return store.state.app.collapse |
|---|
| | | ? require("@/assets/images/logo-min.png") |
|---|
| | | : require("@/assets/images/logo.png"); |
|---|
| | | }), |
|---|
| | | collapse: computed(() => store.state.app.collapse), |
|---|
| | | }); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * å¤ææ¯å¦åªæä¸ä¸ªå级èå |
|---|
| | | */ |
|---|
| | | const hasOnlyChild = (children) => { |
|---|
| | | if (!children) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // åå¨è·¯ç± |
|---|
| | | if (!children) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | const childRouter = children.filter((item) => { |
|---|
| | | return item.hidden ? false : true; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // åªæä¸ä¸ªåçº§è·¯ç± |
|---|
| | | if (childRouter.length === 1) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | // å¦å |
|---|
| | | return false; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * è·åå½åè·¯ç±è·¯å¾ |
|---|
| | | */ |
|---|
| | | const currentPath = computed(() => path); |
|---|
| | | // console.log(currentPath); |
|---|
| | | return { |
|---|
| | | ...toRefs(data), |
|---|
| | | routers, |
|---|
| | | hasOnlyChild, |
|---|
| | | currentPath, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .logo { |
|---|
| | | padding: 20px 0; |
|---|
| | | border-bottom: 1px solid #2d4153; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 600; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .menu-icon { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | display: inline-block; |
|---|
| | | margin: 0 5px 0 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header-wrap"> |
|---|
| | | <div class="wrap"> |
|---|
| | | <span class="menu-btn" @click="switchAside"> |
|---|
| | | <svg-icon iconName="menuBtn" className="icon-menu-svg"></svg-icon> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | <div class="wrap"> |
|---|
| | | <div class="user-info"> |
|---|
| | | <div class="face-info"> |
|---|
| | | <!-- <img src="../../assets/images/logo-min.png" alt="409019683@qq.com" /> --> |
|---|
| | | <span class="name">{{ username }}</span> |
|---|
| | | </div> |
|---|
| | | <span class="logout" @click="handlerLogout"> |
|---|
| | | <svg-icon iconName="logout" className="icon-logout"></svg-icon> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, getCurrentInstance } from "vue"; |
|---|
| | | import { useStore } from "vuex"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | export default { |
|---|
| | | name: "Header", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup() { |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | // Vuex |
|---|
| | | const store = useStore(); |
|---|
| | | // å¼å
¥router |
|---|
| | | const { replace } = useRouter(); |
|---|
| | | // èåæé® |
|---|
| | | const switchAside = () => { |
|---|
| | | store.commit("app/SET_COLLAPSE"); |
|---|
| | | }; |
|---|
| | | // ç¨æ·å |
|---|
| | | const username = ref(store.state.app.username); |
|---|
| | | // ç»åº |
|---|
| | | const handlerLogout = () => { |
|---|
| | | proxy |
|---|
| | | .$confirm("确认éåºç®¡çåå°", "æ示", { |
|---|
| | | confirmButtonText: "ç¡®å®", |
|---|
| | | cancelButtonText: "åæ¶", |
|---|
| | | type: "warning", |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | replace({ |
|---|
| | | name: "Login", |
|---|
| | | }); |
|---|
| | | }) |
|---|
| | | .catch((error) => {}); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | return { |
|---|
| | | switchAside, |
|---|
| | | handlerLogout, |
|---|
| | | username, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header-wrap { |
|---|
| | | height: 100%; |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .user-info { |
|---|
| | | float: right; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .face-info { |
|---|
| | | span, |
|---|
| | | img { |
|---|
| | | display: inline-block; |
|---|
| | | vertical-align: middle; |
|---|
| | | } |
|---|
| | | span { |
|---|
| | | margin-left: 15px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .logout { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | width: 75px; |
|---|
| | | height: 75px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .menu-btn { |
|---|
| | | cursor: pointer; |
|---|
| | | } // æå¿ |
|---|
| | | .icon-menu-svg { |
|---|
| | | font-size: 24px; |
|---|
| | | } |
|---|
| | | .icon-logout { |
|---|
| | | font-size: 24px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="main-content"> |
|---|
| | | <router-view /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "Main", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(){ |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | #main-content { |
|---|
| | | background-color: #fff; // èæ¯è² |
|---|
| | | padding: 20px; // å
è¾¹è·ï¼4个边é½ä¸º20pxï¼ |
|---|
| | | min-height: 100%; // é«åº¦ |
|---|
| | | @include webkit(box-sizing, border-box); // css3é´å½± |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { createApp } from "vue"; |
|---|
| | | import App from "./App.vue"; |
|---|
| | | import router from "./router"; |
|---|
| | | import store from "./store"; |
|---|
| | | // å®å«è·¯ç± |
|---|
| | | import "./router/permit"; |
|---|
| | | // elementui |
|---|
| | | // import ElementUI from "./plugins/elementui"; |
|---|
| | | import ElementPlus from "element-plus"; |
|---|
| | | import "element-plus/dist/index.css"; |
|---|
| | | // æ¹é导å
¥svgæ件 |
|---|
| | | import "@/components/svgIcon/svg"; |
|---|
| | | // svgicon |
|---|
| | | import SvgIcon from "@/components/svgIcon/Index.vue"; |
|---|
| | | // å
¨å±æ¹æ³ |
|---|
| | | import Global from "@/utils/global"; |
|---|
| | | // èªå®ä¹æ令 |
|---|
| | | import directive from "./plugins/directive"; |
|---|
| | | import VForm3 from "vform3-builds"; //å¼å
¥VForm3åº |
|---|
| | | import "vform3-builds/dist/designer.style.css"; //å¼å
¥VForm3æ ·å¼ |
|---|
| | | import * as ElementPlusIconsVue from "@element-plus/icons-vue"; |
|---|
| | | const app = createApp(App); |
|---|
| | | |
|---|
| | | for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|---|
| | | app.component(key, component); |
|---|
| | | } |
|---|
| | | |
|---|
| | | app |
|---|
| | | .use(store) |
|---|
| | | .use(router) |
|---|
| | | .use(ElementPlus) |
|---|
| | | .use(VForm3) |
|---|
| | | .use(directive) |
|---|
| | | .use(Global) |
|---|
| | | .component("svg-icon", SvgIcon) |
|---|
| | | .mount("#app"); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import store from "../store"; |
|---|
| | | // å
ç´ ç¼ç |
|---|
| | | import elemCode from "../js/elemCode"; |
|---|
| | | // å¯¼åº |
|---|
| | | export default (app) => { |
|---|
| | | app.directive('has-button', { |
|---|
| | | // å建å®æï¼å¨ç»å®å
ç´ ç attribute æäºä»¶çå¬å¨è¢«åºç¨ä¹åè°ç¨ |
|---|
| | | created() {}, |
|---|
| | | // æè½½ä¹åï¼å¨ç»å®å
ç´ çç¶ç»ä»¶æè½½ä¹åè°ç¨ |
|---|
| | | beforeMount(el, binding, vnode, prevVnode) {}, |
|---|
| | | // æè½½å®æï¼ç»å®å
ç´ çç¶ç»ä»¶è¢«æè½½æ¶è°ç¨ |
|---|
| | | mounted(el, binding, vnode, prevVnode) { |
|---|
| | | // è·åå
ç´ æé |
|---|
| | | const elem_data = store.getters["permission/elem"]; |
|---|
| | | const user_type = store.getters["permission/user_type"]; |
|---|
| | | // å¦åæ¯éè¶
管 |
|---|
| | | if(!elem_data) { return false } |
|---|
| | | const elems = elem_data.split(",") |
|---|
| | | const code = elemCode[binding.value] // çä»·äºelemCode['init:edit'] |
|---|
| | | if(!user_type && !elems.includes(code)) { |
|---|
| | | el.parentNode.removeChild(el); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ´æ°ä¹åï¼å¨å
å«ç»ä»¶ç VNode æ´æ°ä¹åè°ç¨ |
|---|
| | | beforeUpdate() {}, |
|---|
| | | // æ´æ°å®æï¼å¨å
å«ç»ä»¶ç VNode åå
¶åç»ä»¶ç VNode æ´æ°ä¹åè°ç¨ |
|---|
| | | updated() {}, |
|---|
| | | // éæ¯ä¹åï¼å¨ç»å®å
ç´ çç¶ç»ä»¶å¸è½½ä¹åè°ç¨ |
|---|
| | | beforeUnmount() {}, |
|---|
| | | // éæ¯å®æï¼å¸è½½ç»å®å
ç´ çç¶ç»ä»¶æ¶è°ç¨ |
|---|
| | | unmounted() {} |
|---|
| | | }) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { ElConfigProvider, ElSlider, ElButton, ElSwitch, ElTree, ElForm, ElFormItem, ElInput, ElSelect, ElCol , ElRow, ElMessage, ElMessageBox, ElContainer, ElAside, ElHeader,ElMain, ElMenu, ElMenuItem, ElSubMenu, ElTable, ElPagination, ElUpload, ElDatePicker, ElCascader, ElRadio, ElLoading, ElTimePicker, ElCheckbox, ElDialog, ElInputNumber } from 'element-plus'; |
|---|
| | | // å¯¼åº |
|---|
| | | export default (app) => { |
|---|
| | | app.use(ElConfigProvider); |
|---|
| | | app.use(ElButton); |
|---|
| | | app.use(ElSwitch); |
|---|
| | | app.use(ElForm); |
|---|
| | | app.use(ElFormItem); |
|---|
| | | app.use(ElInput); |
|---|
| | | app.use(ElCol); |
|---|
| | | app.use(ElRow); |
|---|
| | | app.use(ElMessage); |
|---|
| | | app.use(ElMessageBox); |
|---|
| | | app.use(ElContainer); |
|---|
| | | app.use(ElAside); |
|---|
| | | app.use(ElHeader); |
|---|
| | | app.use(ElMain); |
|---|
| | | app.use(ElMenu); |
|---|
| | | app.use(ElMenuItem); |
|---|
| | | app.use(ElSubMenu); |
|---|
| | | app.use(ElSlider); |
|---|
| | | app.use(ElSelect); |
|---|
| | | app.use(ElTable); |
|---|
| | | app.use(ElPagination); |
|---|
| | | app.use(ElTree); |
|---|
| | | app.use(ElUpload); |
|---|
| | | app.use(ElDatePicker); |
|---|
| | | app.use(ElRadio); |
|---|
| | | app.use(ElLoading); |
|---|
| | | app.use(ElTimePicker); |
|---|
| | | app.use(ElCascader); |
|---|
| | | app.use(ElCheckbox); |
|---|
| | | app.use(ElDialog); |
|---|
| | | app.use(ElInputNumber); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { |
|---|
| | | createRouter, |
|---|
| | | createWebHashHistory, |
|---|
| | | createWebHistory, |
|---|
| | | } from "vue-router"; |
|---|
| | | export const routes = [ |
|---|
| | | { |
|---|
| | | path: "/", |
|---|
| | | redirect: "HJtable", |
|---|
| | | hidden: true, |
|---|
| | | aaa: "", |
|---|
| | | bbb: "", |
|---|
| | | }, |
|---|
| | | // ç»å½ |
|---|
| | | { |
|---|
| | | path: "/login", |
|---|
| | | name: "Login", |
|---|
| | | hidden: true, |
|---|
| | | component: () => import("../views/account/Login.vue"), |
|---|
| | | }, |
|---|
| | | // åå°é¦é¡µ |
|---|
| | | { |
|---|
| | | path: "/GXtable", |
|---|
| | | name: "GXtable", |
|---|
| | | meta: { |
|---|
| | | title: "ç½çº¿ç产æ
åµæ¥è¡¨", |
|---|
| | | icon: "GXtable", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/GXtable", |
|---|
| | | name: "GXtable", |
|---|
| | | meta: { |
|---|
| | | title: "ç½çº¿ç产æ
åµæ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/GXtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // path: "/system", |
|---|
| | | // name: "System", |
|---|
| | | // meta: { |
|---|
| | | // title: "(å¶ç½å线)ç产åæºè®°å½è¡¨", |
|---|
| | | // icon: "system", |
|---|
| | | // }, |
|---|
| | | // component: () => import("../layout/Index.vue"), |
|---|
| | | // children: [ |
|---|
| | | // { |
|---|
| | | // path: "/SCTJtable", |
|---|
| | | // name: "SCTJtable", |
|---|
| | | // meta: { |
|---|
| | | // title: "(å¶ç½å线)ç产åæºè®°å½è¡¨", |
|---|
| | | // }, |
|---|
| | | // component: () => import("../views/SCTJtable/Index.vue"), |
|---|
| | | // }, |
|---|
| | | |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // path: "/ZJBGtable", |
|---|
| | | // name: "ZJBGtable", |
|---|
| | | // meta: { |
|---|
| | | // title: "ç»æ£æ¥å", |
|---|
| | | // icon: "information", |
|---|
| | | // }, |
|---|
| | | // component: () => import("../layout/Index.vue"), |
|---|
| | | // children: [ |
|---|
| | | // { |
|---|
| | | // path: "/ZJBGtable", |
|---|
| | | // name: "ZJBGtable", |
|---|
| | | // meta: { |
|---|
| | | // title: "ç»æ£æ¥å", |
|---|
| | | // }, |
|---|
| | | // component: () => import("../views/ZJBGtable/Index.vue"), |
|---|
| | | // }, |
|---|
| | | // // { |
|---|
| | | // // path: "/newsCategory", |
|---|
| | | // // name: "NewsCategory", |
|---|
| | | // // meta: { |
|---|
| | | // // title: "ä¿¡æ¯åç±»", |
|---|
| | | // // }, |
|---|
| | | // // component: () => import("../views/info/Category.vue"), |
|---|
| | | // // }, |
|---|
| | | // // { |
|---|
| | | // // path: "/newsDetailed", |
|---|
| | | // // name: "NewsDetailed", |
|---|
| | | // // hidden: true, |
|---|
| | | // // meta: { |
|---|
| | | // // title: "ä¿¡æ¯è¯¦æ
", |
|---|
| | | // // }, |
|---|
| | | // // component: () => import("../views/info/Detailed.vue"), |
|---|
| | | // // }, |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | { |
|---|
| | | path: "/JBJtable", |
|---|
| | | name: "JBJtable", |
|---|
| | | meta: { |
|---|
| | | title: "åªæ¿æºå·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/JBJtable", |
|---|
| | | name: "JBJtable", |
|---|
| | | meta: { |
|---|
| | | title: "åªæ¿æºå·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/JBJtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: "/HJtable", |
|---|
| | | name: "HJtable", |
|---|
| | | meta: { |
|---|
| | | title: "çæº/åéå·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/HJtable", |
|---|
| | | name: "HJtable", |
|---|
| | | meta: { |
|---|
| | | title: "çæº/åéå·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/HJtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: "/FBtable", |
|---|
| | | name: "FBtable", |
|---|
| | | meta: { |
|---|
| | | title: "翻边ãæ»ç/å°å£å·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/FBtable", |
|---|
| | | name: "FBtable", |
|---|
| | | meta: { |
|---|
| | | title: "翻边ãæ»ç/å°å£å·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/FBtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: "/JGGXtable", |
|---|
| | | name: "JGGXtable", |
|---|
| | | meta: { |
|---|
| | | title: "æ£ç½å·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/JGGXtable", |
|---|
| | | name: "JGGXtable", |
|---|
| | | meta: { |
|---|
| | | title: "æ£ç½å·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/JGGXtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: "/JGJtable", |
|---|
| | | name: "JGJtable", |
|---|
| | | meta: { |
|---|
| | | title: "éç½æºå·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/JGJtable", |
|---|
| | | name: "JGJtable", |
|---|
| | | meta: { |
|---|
| | | title: "éç½æºå·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/JGJtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: "/DBtable", |
|---|
| | | name: "DBtable", |
|---|
| | | meta: { |
|---|
| | | title: "æå
å·¥åºç产æ¥è¡¨", |
|---|
| | | icon: "information", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/DBtable", |
|---|
| | | name: "DBtable", |
|---|
| | | meta: { |
|---|
| | | title: "æå
å·¥åºç产æ¥è¡¨", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/DBtable/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | const router = createRouter({ |
|---|
| | | history: createWebHashHistory(), |
|---|
| | | routes, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | export default router; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { |
|---|
| | | createRouter, |
|---|
| | | createWebHashHistory, |
|---|
| | | createWebHistory, |
|---|
| | | } from "vue-router"; |
|---|
| | | export const routes = [ |
|---|
| | | // æ ¹è·¯ç± |
|---|
| | | { |
|---|
| | | path: "/", |
|---|
| | | redirect: "Login", |
|---|
| | | hidden: true, |
|---|
| | | }, |
|---|
| | | // ç»å½ |
|---|
| | | { |
|---|
| | | path: "/login", |
|---|
| | | name: "Login", |
|---|
| | | hidden: true, |
|---|
| | | |
|---|
| | | component: () => import("../views/account/Login.vue"), |
|---|
| | | }, |
|---|
| | | // è·¯ç±ä¸è½¬ |
|---|
| | | { |
|---|
| | | path: "/history", |
|---|
| | | name: "history", |
|---|
| | | meta: { |
|---|
| | | title: "æ°æ®ç®¡ç", |
|---|
| | | }, |
|---|
| | | component: () => import("../layout/Index.vue"), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: "/history", |
|---|
| | | name: "history", |
|---|
| | | meta: { |
|---|
| | | title: "æ°æ®ç®¡ç", |
|---|
| | | }, |
|---|
| | | component: () => import("../views/history/Index.vue"), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | const router = createRouter({ |
|---|
| | | history: createWebHashHistory(), |
|---|
| | | routes, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | export default router; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"; |
|---|
| | | export const routes = [ |
|---|
| | | // æ ¹è·¯ç± |
|---|
| | | { |
|---|
| | | path: "/", |
|---|
| | | redirect: "Login", |
|---|
| | | hidden: true |
|---|
| | | }, |
|---|
| | | // ç»å½ |
|---|
| | | { |
|---|
| | | path: "/login", |
|---|
| | | name: "Login", |
|---|
| | | hidden: true, |
|---|
| | | component: () => import("../views/account/Login.vue") |
|---|
| | | }, |
|---|
| | | // è·¯ç±ä¸è½¬ |
|---|
| | | { |
|---|
| | | path: "/admin", |
|---|
| | | name: "Admin", |
|---|
| | | hidden: true |
|---|
| | | } |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | const router = createRouter({ |
|---|
| | | history: createWebHashHistory(), |
|---|
| | | routes |
|---|
| | | }); |
|---|
| | | |
|---|
| | | export default router; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import router from "./index"; |
|---|
| | | import store from "../store"; |
|---|
| | | // cookie |
|---|
| | | import { getToken } from "@u/cookies"; |
|---|
| | | // å
¨å±åç½®å®å« |
|---|
| | | router.beforeEach((to, from, next) => { |
|---|
| | | if (!getToken()) { |
|---|
| | | if (to.name !== "Login") { |
|---|
| | | next("Login"); |
|---|
| | | } else { |
|---|
| | | next(); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | if (store.state.permission.async_router.length === 0) { |
|---|
| | | store.dispatch("permission/getRouterAction").then((response) => { |
|---|
| | | // è·åå¨æè·¯ç± |
|---|
| | | const async_router_data = store.getters["permission/async_router"]; |
|---|
| | | console.log(async_router_data); |
|---|
| | | // è·åéæè·¯ç± |
|---|
| | | const default_router_data = router.options.routes; |
|---|
| | | // æ´æ°éæè·¯ç± |
|---|
| | | router.options.routes = default_router_data.concat(async_router_data); |
|---|
| | | // æ´æ°å¨æè·¯ç± |
|---|
| | | async_router_data.forEach((item) => { |
|---|
| | | router.addRoute(item); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | if (to.name === "dataManager") { |
|---|
| | | const first_router = |
|---|
| | | async_router_data[0]?.children[0] || async_router_data[0]; |
|---|
| | | next({ ...first_router, replace: true }); |
|---|
| | | } else { |
|---|
| | | // 确认è¿å
¥ä¸ä¸ä¸ªè·¯ç± |
|---|
| | | next({ ...to, replace: true }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | next(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // å
¨å±åç½®å®å« |
|---|
| | | router.afterEach((to, from) => { }); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { createStore } from "vuex"; |
|---|
| | | // å¼ç¨æ¨¡åæ件 |
|---|
| | | import app from "./modules/app"; |
|---|
| | | // import info from "./modules/info"; |
|---|
| | | import permission from "./modules/permission"; |
|---|
| | | // å建Vuex |
|---|
| | | export default createStore({ |
|---|
| | | modules: { |
|---|
| | | // 模åå |
|---|
| | | app, // è½½å
¥ app 模å |
|---|
| | | // info, |
|---|
| | | permission, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | //cookies |
|---|
| | | import { |
|---|
| | | setToken, |
|---|
| | | setUsername, |
|---|
| | | getUsername, |
|---|
| | | getToken, |
|---|
| | | removeToken, |
|---|
| | | removeUsername, |
|---|
| | | } from "@u/cookies"; |
|---|
| | | // api |
|---|
| | | import { Login, Logout } from "@a/account"; |
|---|
| | | const state = { |
|---|
| | | collapse: JSON.parse(sessionStorage.getItem("collapse")) || false, |
|---|
| | | token: "" || getToken(), |
|---|
| | | username: "" || getUsername(), |
|---|
| | | table_action_request: false, |
|---|
| | | }; |
|---|
| | | const getters = {}; |
|---|
| | | const mutations = { |
|---|
| | | SET_COLLAPSE(state) { |
|---|
| | | state.collapse = !state.collapse; |
|---|
| | | sessionStorage.setItem("collapse", JSON.stringify(state.collapse)); |
|---|
| | | }, |
|---|
| | | SET_TOKEN(state, value) { |
|---|
| | | // 设置 token |
|---|
| | | state.token = value; |
|---|
| | | value && setToken(value); |
|---|
| | | }, |
|---|
| | | SET_USERNAME(state, value) { |
|---|
| | | // 设置ç¨æ·å |
|---|
| | | state.username = value; |
|---|
| | | value && setUsername(value); |
|---|
| | | }, |
|---|
| | | SET_TABLE_REQUEST(state) { |
|---|
| | | state.table_action_request = !state.table_action_request; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | const actions = { |
|---|
| | | loginAction(context, repuestData) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | Login(repuestData) |
|---|
| | | .then((response) => { |
|---|
| | | let data = response.result; |
|---|
| | | console.log(data); |
|---|
| | | context.commit("SET_TOKEN", data.token); |
|---|
| | | // context.commit("SET_USERNAME", data.name); |
|---|
| | | resolve(response); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | reject(error); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // ç»åº |
|---|
| | | logoutAction({ commit }) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | Logout().then((response) => { |
|---|
| | | commit("SET_TOKEN", ""); |
|---|
| | | removeUsername(); |
|---|
| | | commit("SET_USERNAME", ""); |
|---|
| | | removeToken(); |
|---|
| | | resolve(response); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | export default { |
|---|
| | | namespaced: true, |
|---|
| | | state, |
|---|
| | | getters, |
|---|
| | | mutations, |
|---|
| | | actions, |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // api |
|---|
| | | // import { GetCategory } from "@/api/info";; |
|---|
| | | // const state = {}; |
|---|
| | | // const getters = {} |
|---|
| | | // const mutations = {} |
|---|
| | | // const actions = { |
|---|
| | | // categoryAction() { |
|---|
| | | // return new Promise((resolve, reject) => { |
|---|
| | | // GetCategory().then(response => { |
|---|
| | | // resolve(response.data) |
|---|
| | | // }) |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // export default { |
|---|
| | | // namespaced: true, |
|---|
| | | // state, |
|---|
| | | // getters, |
|---|
| | | // mutations, |
|---|
| | | // actions |
|---|
| | | // }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import { shallowRef } from 'vue' |
|---|
| | | // API |
|---|
| | | import { GetPermission } from "@a/account"; |
|---|
| | | // utils |
|---|
| | | import { formatTree } from "@/utils/format"; |
|---|
| | | import axios from "axios"; |
|---|
| | | /** æ ¼å¼åèåæ°æ®çæè·¯ç± */ |
|---|
| | | const formatRouterMenu = (data) => { |
|---|
| | | // æ£æµæ°æ®æ¯å¦åå¨ |
|---|
| | | if (data && (!Array.isArray(data) || data.length === 0)) { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | data.map((item) => { |
|---|
| | | if (item.component) { |
|---|
| | | item.component = shallowRef(require(`@/views/${item.component}`).default) |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (item.children) { |
|---|
| | | formatRouterMenu(item.children) |
|---|
| | | } |
|---|
| | | return item |
|---|
| | | }) |
|---|
| | | return data |
|---|
| | | // çå¬åå¨æ°æ® |
|---|
| | | // const router = []; |
|---|
| | | // éåèå |
|---|
| | | // data.forEach((item) => { |
|---|
| | | // const router_obj = {}; |
|---|
| | | // // id |
|---|
| | | // router_obj.id = item.id; |
|---|
| | | |
|---|
| | | // // path |
|---|
| | | // router_obj.path = item.path; |
|---|
| | | // // name |
|---|
| | | // router_obj.name = item.router; |
|---|
| | | // // hidden |
|---|
| | | // if (item.hidden === "1") { |
|---|
| | | // router_obj.hidden = true; |
|---|
| | | // } |
|---|
| | | // // redirect |
|---|
| | | // if (item.redirect) { |
|---|
| | | // router_obj.redirect = item.redirect; |
|---|
| | | // } |
|---|
| | | // router_obj.parent_id = item.parent_id; |
|---|
| | | // if (item.children) { |
|---|
| | | // router_obj.children = item.children; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // // meta |
|---|
| | | // router_obj.meta = { |
|---|
| | | // // èåå称 |
|---|
| | | // title: item.name, |
|---|
| | | // // èåå¾æ |
|---|
| | | // icon: item.icon, |
|---|
| | | // // æ¯å¦ç¼åé¡µé¢ |
|---|
| | | // keepAlive: item.keep === "1" ? true : false, |
|---|
| | | // }; |
|---|
| | | // // component |
|---|
| | | // router_obj.component = shallowRef(require(`@/${item.component}`).default); |
|---|
| | | |
|---|
| | | // æ·»å è³routeræ°ç» |
|---|
| | | // router.push(router_obj); |
|---|
| | | // }); |
|---|
| | | // æ ç¶æ ¼å¼å |
|---|
| | | // const tree_data = formatTree(router, "id", "parent_id", "children", 0); |
|---|
| | | // è¿åæ°æ® |
|---|
| | | // return tree_data; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const state = { |
|---|
| | | async_router: [], |
|---|
| | | elem: "", |
|---|
| | | user_type: "", |
|---|
| | | }; |
|---|
| | | const getters = { |
|---|
| | | async_router: (state) => state.async_router, |
|---|
| | | elem: (state) => state.elem, |
|---|
| | | user_type: (state) => state.user_type, |
|---|
| | | }; |
|---|
| | | const mutations = { |
|---|
| | | SET_ROUTER(state, value) { |
|---|
| | | state.async_router = value; |
|---|
| | | }, |
|---|
| | | SET_ELEM(state, value) { |
|---|
| | | state.elem = value; |
|---|
| | | }, |
|---|
| | | SET_USERTYPE(state, value) { |
|---|
| | | state.user_type = value; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | const actions = { |
|---|
| | | getRouterAction(context) { |
|---|
| | | return new Promise((resolve, reject) => { |
|---|
| | | GetPermission() |
|---|
| | | .then((response) => { |
|---|
| | | const data = response.result.menu; |
|---|
| | | let menuData = data.filter(item => { |
|---|
| | | return item.route === '1' |
|---|
| | | }); |
|---|
| | | // æ ¼å¼åèåæ°æ®çæè·¯ç± |
|---|
| | | const menu = formatRouterMenu(menuData); |
|---|
| | | // åå¨è·¯ç± |
|---|
| | | context.commit("SET_ROUTER", menu); |
|---|
| | | // åå¨å
ç´ æé |
|---|
| | | // context.commit("SET_ELEM", response.data.elem_data); |
|---|
| | | // æ´æ°ç¨æ·ç±»å |
|---|
| | | // context.commit("SET_USERTYPE", response.data.user); |
|---|
| | | resolve(response); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | reject(error); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | export default { |
|---|
| | | namespaced: true, |
|---|
| | | state, |
|---|
| | | getters, |
|---|
| | | mutations, |
|---|
| | | actions, |
|---|
| | | }; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .el-button-block { |
|---|
| | | display: block; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | #layout-aside .el-menu { |
|---|
| | | border-right: none; |
|---|
| | | } |
|---|
| | | /* 导èªèåé«äº® */ |
|---|
| | | .is-active { background-color: rgba(254, 108, 108, .2) !important; } |
|---|
| | | .is-opened { |
|---|
| | | // .el-sub-menu__title { background-color: #f56c6c !important; } |
|---|
| | | } |
|---|
| | | .el-form-item__content { display: block; } |
|---|
| | | /*ä¸ä¼ ç»ä»¶*/ |
|---|
| | | .avatar-uploader { |
|---|
| | | overflow: hidden; |
|---|
| | | img { width: 100%; } |
|---|
| | | .el-upload { |
|---|
| | | border: 1px dashed #d9d9d9; |
|---|
| | | border-radius: 6px; |
|---|
| | | cursor: pointer; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | width: 150px; |
|---|
| | | height: 150px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 30px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /* æ¥æç»ä»¶ z-index */ |
|---|
| | | .el-popper { z-index: 10002 !important; } |
|---|
| | | .va-top { vertical-align: top; } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .aside-menu-svg { |
|---|
| | | margin-right: 5px; |
|---|
| | | margin-top: -2px; |
|---|
| | | font-size: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-logo { |
|---|
| | | background: url("~@/assets/images/logo.png") no-repeat; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | @import "./sassConfig.scss"; |
|---|
| | | @import "./normalize.scss"; |
|---|
| | | @import "./elementui.scss"; |
|---|
| | | @import "./icon.scss"; |
|---|
| | | |
|---|
| | | /* float */ |
|---|
| | | .pull-right { float: right; } |
|---|
| | | |
|---|
| | | /* margin */ |
|---|
| | | .margin-top-20 { margin-top: 20px; } |
|---|
| | | .margin-top-10 { margin-top: 10px; } |
|---|
| | | /* text-color */ |
|---|
| | | .text-white { color: white; } |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ |
|---|
| | | |
|---|
| | | /* Document |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the line height in all browsers. |
|---|
| | | * 2. Prevent adjustments of font size after orientation changes in iOS. |
|---|
| | | */ |
|---|
| | | /* divçé»è®¤æ ·å¼ä¸åå¨paddingåmargin为0çæ
åµ*/ |
|---|
| | | html, body, span, applet, object, iframe, |
|---|
| | | h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|---|
| | | a, abbr, acronym, address, big, cite, code, |
|---|
| | | del, dfn, em, img, ins, kbd, q, s, samp, |
|---|
| | | small, strike, strong, sub, sup, tt, var, |
|---|
| | | b, u, i, center, |
|---|
| | | dl, dt, dd, ol, ul, |
|---|
| | | fieldset, form, legend, |
|---|
| | | table, caption, tbody, tfoot, thead, tr, th, td, |
|---|
| | | article, aside, canvas, details, embed, |
|---|
| | | figure, figcaption, footer, header, hgroup, |
|---|
| | | menu, nav, output, ruby, section, summary, |
|---|
| | | time, mark, audio, video { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | font-size: 100%; |
|---|
| | | font: inherit; |
|---|
| | | vertical-align: baseline; |
|---|
| | | } |
|---|
| | | /* HTML5 display-role reset for older browsers */ |
|---|
| | | article, aside, details, figcaption, figure, |
|---|
| | | footer, header, hgroup, menu, nav, section { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | html { |
|---|
| | | line-height: 1.15; /* 1 */ |
|---|
| | | -webkit-text-size-adjust: 100%; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Sections |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the margin in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | font-family: 'Microsoft YaHei'; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Render the `main` element consistently in IE. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | main { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Correct the font size and margin on `h1` elements within `section` and |
|---|
| | | * `article` contexts in Chrome, Firefox, and Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | |
|---|
| | | /* Grouping content |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Add the correct box sizing in Firefox. |
|---|
| | | * 2. Show the overflow in Edge and IE. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | hr { |
|---|
| | | box-sizing: content-box; /* 1 */ |
|---|
| | | height: 0; /* 1 */ |
|---|
| | | overflow: visible; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the inheritance and scaling of font size in all browsers. |
|---|
| | | * 2. Correct the odd `em` font sizing in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | pre { |
|---|
| | | font-family: monospace, monospace; /* 1 */ |
|---|
| | | font-size: 1em; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Text-level semantics |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the gray background on active links in IE 10. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | a { |
|---|
| | | background-color: transparent; |
|---|
| | | text-decoration: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Remove the bottom border in Chrome 57- |
|---|
| | | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | abbr[title] { |
|---|
| | | border-bottom: none; /* 1 */ |
|---|
| | | text-decoration: underline; /* 2 */ |
|---|
| | | text-decoration: underline dotted; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Add the correct font weight in Chrome, Edge, and Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | b, |
|---|
| | | strong { |
|---|
| | | font-weight: bolder; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the inheritance and scaling of font size in all browsers. |
|---|
| | | * 2. Correct the odd `em` font sizing in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | code, |
|---|
| | | kbd, |
|---|
| | | samp { |
|---|
| | | font-family: monospace, monospace; /* 1 */ |
|---|
| | | font-size: 1em; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Add the correct font size in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | small { |
|---|
| | | font-size: 80%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Prevent `sub` and `sup` elements from affecting the line height in |
|---|
| | | * all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | sub, |
|---|
| | | sup { |
|---|
| | | font-size: 75%; |
|---|
| | | line-height: 0; |
|---|
| | | position: relative; |
|---|
| | | vertical-align: baseline; |
|---|
| | | } |
|---|
| | | |
|---|
| | | sub { |
|---|
| | | bottom: -0.25em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | sup { |
|---|
| | | top: -0.5em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Embedded content |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the border on images inside links in IE 10. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | img { |
|---|
| | | display: block; |
|---|
| | | border-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Forms |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Change the font styles in all browsers. |
|---|
| | | * 2. Remove the margin in Firefox and Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button, |
|---|
| | | input, |
|---|
| | | optgroup, |
|---|
| | | select, |
|---|
| | | textarea { |
|---|
| | | font-family: inherit; /* 1 */ |
|---|
| | | font-size: 100%; /* 1 */ |
|---|
| | | margin: 0; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Show the overflow in IE. |
|---|
| | | * 1. Show the overflow in Edge. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button, |
|---|
| | | input { /* 1 */ |
|---|
| | | overflow: visible; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the inheritance of text transform in Edge, Firefox, and IE. |
|---|
| | | * 1. Remove the inheritance of text transform in Firefox. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button, |
|---|
| | | select { /* 1 */ |
|---|
| | | text-transform: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Correct the inability to style clickable types in iOS and Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button, |
|---|
| | | [type="button"], |
|---|
| | | [type="reset"], |
|---|
| | | [type="submit"] { |
|---|
| | | -webkit-appearance: button; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the inner border and padding in Firefox. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button::-moz-focus-inner, |
|---|
| | | [type="button"]::-moz-focus-inner, |
|---|
| | | [type="reset"]::-moz-focus-inner, |
|---|
| | | [type="submit"]::-moz-focus-inner { |
|---|
| | | border-style: none; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Restore the focus styles unset by the previous rule. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | button:-moz-focusring, |
|---|
| | | [type="button"]:-moz-focusring, |
|---|
| | | [type="reset"]:-moz-focusring, |
|---|
| | | [type="submit"]:-moz-focusring { |
|---|
| | | outline: 1px dotted ButtonText; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Correct the padding in Firefox. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | fieldset { |
|---|
| | | padding: 0.35em 0.75em 0.625em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the text wrapping in Edge and IE. |
|---|
| | | * 2. Correct the color inheritance from `fieldset` elements in IE. |
|---|
| | | * 3. Remove the padding so developers are not caught out when they zero out |
|---|
| | | * `fieldset` elements in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | legend { |
|---|
| | | box-sizing: border-box; /* 1 */ |
|---|
| | | color: inherit; /* 2 */ |
|---|
| | | display: table; /* 1 */ |
|---|
| | | max-width: 100%; /* 1 */ |
|---|
| | | padding: 0; /* 3 */ |
|---|
| | | white-space: normal; /* 1 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Add the correct vertical alignment in Chrome, Firefox, and Opera. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | progress { |
|---|
| | | vertical-align: baseline; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the default vertical scrollbar in IE 10+. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | textarea { |
|---|
| | | overflow: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Add the correct box sizing in IE 10. |
|---|
| | | * 2. Remove the padding in IE 10. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | [type="checkbox"], |
|---|
| | | [type="radio"] { |
|---|
| | | box-sizing: border-box; /* 1 */ |
|---|
| | | padding: 0; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Correct the cursor style of increment and decrement buttons in Chrome. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | [type="number"]::-webkit-inner-spin-button, |
|---|
| | | [type="number"]::-webkit-outer-spin-button { |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the odd appearance in Chrome and Safari. |
|---|
| | | * 2. Correct the outline style in Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | [type="search"] { |
|---|
| | | -webkit-appearance: textfield; /* 1 */ |
|---|
| | | outline-offset: -2px; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Remove the inner padding in Chrome and Safari on macOS. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | [type="search"]::-webkit-search-decoration { |
|---|
| | | -webkit-appearance: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 1. Correct the inability to style clickable types in iOS and Safari. |
|---|
| | | * 2. Change font properties to `inherit` in Safari. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | ::-webkit-file-upload-button { |
|---|
| | | -webkit-appearance: button; /* 1 */ |
|---|
| | | font: inherit; /* 2 */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Interactive |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /* |
|---|
| | | * Add the correct display in Edge, IE 10+, and Firefox. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | details { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* |
|---|
| | | * Add the correct display in all browsers. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | summary { |
|---|
| | | display: list-item; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Misc |
|---|
| | | ========================================================================== */ |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Add the correct display in IE 10+. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | template { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * Add the correct display in IE 10. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | [hidden] { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ul, li { list-style: none; } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | $color_main: white; // å®ä¹ |
|---|
| | | |
|---|
| | | @mixin webkit($attr, $value){ |
|---|
| | | -webkit-#{$attr}: $value; |
|---|
| | | -moz-#{$attr}: $value; |
|---|
| | | -o-#{$attr}: $value; |
|---|
| | | -ms-#{$attr}: $value; |
|---|
| | | #{$attr}: $value; |
|---|
| | | } |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * @param { String } value æ¶é´çå¼ |
|---|
| | | * @param { String } type |
|---|
| | | * @param { Boolean } br trueæ¢è¡ãfalseé»è®¤ |
|---|
| | | * @param { String } conn ä»»æå符 |
|---|
| | | * @returns æ¥ææ ¼å¼å |
|---|
| | | */ |
|---|
| | | export function getDate(params){ |
|---|
| | | const new_date = params.value ? new Date(params.value) : new Date(); |
|---|
| | | let year = new_date.getFullYear(); //å¹´ |
|---|
| | | let month = new_date.getMonth() + 1; //æ |
|---|
| | | let day = new_date.getDate(); //æ¥ |
|---|
| | | let hh = new_date.getHours(); //æ¶ |
|---|
| | | let mm = new_date.getMinutes(); //å |
|---|
| | | let ss = new_date.getSeconds(); //å |
|---|
| | | if(month < 10) { month = `0${month}`; } |
|---|
| | | if(day < 10) { day = `0${day}`; } |
|---|
| | | if(hh < 10) { hh = `0${hh}`; } |
|---|
| | | if(mm < 10) { mm = `0${mm}`; } |
|---|
| | | if(ss < 10) { ss = `0${ss}`; } |
|---|
| | | // è¿æ¥ç¬¦ |
|---|
| | | const conn = params.connDate || "-"; |
|---|
| | | // æ ¼å¼å |
|---|
| | | const br = params.br ? "<br />" : " "; |
|---|
| | | const date = `${year}${conn}${month}${conn}${day}`; |
|---|
| | | const time = `${hh}:${mm}:${ss}`; |
|---|
| | | // ä»
æ¥æ |
|---|
| | | if(params.type === "date") { return date; } |
|---|
| | | // ä»
æ¶é´ |
|---|
| | | if(params.type === "time") { return time; } |
|---|
| | | // æ´ä½ |
|---|
| | | return `${date}${br}${time}`; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @param { Function } fun æ§è¡çå½æ° |
|---|
| | | * @param { Number } time 延æ¶æ§è¡æ¶é´ï¼é»è®¤500æ¯«ç§ |
|---|
| | | * @returns é²æå½æ° |
|---|
| | | */ |
|---|
| | | export function debounce(fun, time = 500) { |
|---|
| | | let timer; |
|---|
| | | return function() { |
|---|
| | | let args = arguments; |
|---|
| | | if (timer) clearTimeout(timer); |
|---|
| | | timer = setTimeout(() => { |
|---|
| | | fun.apply(this, args) |
|---|
| | | }, time) |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Cookies from "js-cookie"; |
|---|
| | | // åé |
|---|
| | | const tokenKey = "tokenAdmin"; |
|---|
| | | const userNameKey = "username"; |
|---|
| | | |
|---|
| | | // è·åtoken |
|---|
| | | export function getToken(){ return Cookies.get(tokenKey); } |
|---|
| | | // åå
¥token |
|---|
| | | export function setToken(value){ Cookies.set(tokenKey, value); } |
|---|
| | | // å é¤token |
|---|
| | | export function removeToken(){ Cookies.remove(tokenKey); } |
|---|
| | | |
|---|
| | | // è·åuserName |
|---|
| | | export function getUsername(){ return Cookies.get(userNameKey); } |
|---|
| | | // åå
¥userName |
|---|
| | | export function setUsername(value){ Cookies.set(userNameKey, value); } |
|---|
| | | // å é¤userName |
|---|
| | | export function removeUsername(){ Cookies.remove(userNameKey); } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /** |
|---|
| | | * @param { responseData } Object 请æ±åæ°æ°æ® |
|---|
| | | * @param { formData } Object Form表åå段 |
|---|
| | | * @returns æ举å¹é
key |
|---|
| | | */ |
|---|
| | | export function formatRequestData(responseData, formData){ |
|---|
| | | // å¤ææ¯å¦æå¼åå¨ |
|---|
| | | if(JSON.stringify(responseData) === "{}") { return false; } |
|---|
| | | // è·åform表åå段çæækey |
|---|
| | | const keys = Object.keys(responseData); |
|---|
| | | // 空JSON对象ï¼åå¨è¿æ»¤åºæ¥çæ°æ® |
|---|
| | | const data_json = {}; |
|---|
| | | // æ§è¡å段å¹é
|
|---|
| | | for(let key in formData) { |
|---|
| | | if(keys.includes(key) && formData.hasOwnProperty(key)) { |
|---|
| | | data_json[key]= responseData[key]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // è¿åå¤çåçæ°æ® |
|---|
| | | return data_json; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * |
|---|
| | | * @returns éå½å½æ°æ ¼å¼åæ ç¶èå |
|---|
| | | */ |
|---|
| | | export function formatTree(data, id = "id", pid = "parent_id", child = "children", root){ |
|---|
| | | const tree = []; |
|---|
| | | if(data && data.length > 0) { |
|---|
| | | data.forEach(item => { |
|---|
| | | // è·å顶å±èåï¼parent_id === 0 |
|---|
| | | if(item[pid] === root) { |
|---|
| | | const children = formatTree(data, id, pid, child, item[id]); |
|---|
| | | if(children) { |
|---|
| | | item[child] = children; |
|---|
| | | } |
|---|
| | | tree.push(item); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | return tree; |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // Element Plus |
|---|
| | | import { ElMessageBox } from 'element-plus'; |
|---|
| | | // å½åç©ºé´ |
|---|
| | | const globalFunction = {} |
|---|
| | | /** |
|---|
| | | * @param { message } String å
容ï¼å¯é |
|---|
| | | * @param { title } String æ é¢ï¼å¯é |
|---|
| | | * @param { thenFun } Function åè°å½æ°ï¼å¯é |
|---|
| | | * @description ç¡®è®¤å¼¹çª |
|---|
| | | */ |
|---|
| | | globalFunction.deleteConfirm = (params) => { |
|---|
| | | ElMessageBox.confirm(params.message || '确认å é¤å½åæ°æ®åï¼å é¤åå°æ æ³æ¢å¤', params.title || 'æ示', { |
|---|
| | | confirmButtonText: 'ç¡®å®', |
|---|
| | | cancelButtonText: 'åæ¶', |
|---|
| | | showClose: false, // åæ¶å³ä¸è§å
³éæé® |
|---|
| | | closeOnClickModal: false, // åæ¶ç¹å»é®ç½©å
³é MessageBox |
|---|
| | | closeOnPressEscape: false, // åæ¶æä¸ESCé®å
³éMessageBox |
|---|
| | | type: 'warning', |
|---|
| | | beforeClose: (action, instance, done) => { |
|---|
| | | globalFunction.deleteConfirmObj = { instance, done }; |
|---|
| | | if(action === "confirm") { |
|---|
| | | // æé®å è½½ç¶æ |
|---|
| | | globalFunction.confirmButtonLoading(true); |
|---|
| | | // å¤æthenFunåå¨å¹¶ä¸æ¯Functionç±»åï¼æ¯åèªå¨æ§è¡å½æ° |
|---|
| | | params.thenFun && Object.prototype.toString.call(params.thenFun) === "[object Function]" && params.thenFun(); |
|---|
| | | }else{ |
|---|
| | | globalFunction.deleteConfirmClose(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }).then(()=>{}).catch(()=>{}) |
|---|
| | | |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * @param { bool } Boolean å è½½ç¶æï¼å¯é |
|---|
| | | * @description å¼¹çªç¡®è®¤æé®å è½½ç¶æ |
|---|
| | | */ |
|---|
| | | globalFunction.confirmButtonLoading = (bool) => { |
|---|
| | | globalFunction.deleteConfirmObj.instance.confirmButtonLoading = bool; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * @param {*} params |
|---|
| | | */ |
|---|
| | | globalFunction.deleteConfirmClose = () => { |
|---|
| | | globalFunction.deleteConfirmObj.done(); |
|---|
| | | globalFunction.deleteConfirmObj = null; |
|---|
| | | } |
|---|
| | | /** å½æ°2 */ |
|---|
| | | globalFunction.message = (params) => { |
|---|
| | | console.log(params) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | install(app){ |
|---|
| | | app.config.globalProperties["deleteConfirm"] = globalFunction.deleteConfirm; |
|---|
| | | app.config.globalProperties["deleteConfirmClose"] = globalFunction.deleteConfirmClose; |
|---|
| | | app.config.globalProperties["confirmButtonLoading"] = globalFunction.confirmButtonLoading; |
|---|
| | | app.config.globalProperties["message"] = globalFunction.message; |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | //id æ¯ä½ è¦æå°çæ个domå
ç´ çidå |
|---|
| | | export function printExcel(id) { |
|---|
| | | // ç©ºé¡µé¢ |
|---|
| | | let printStr = |
|---|
| | | "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head>"; |
|---|
| | | // å®ä¹element-ui tableç»ä»¶çæ ·å¼ |
|---|
| | | const tabStyle = `<style> |
|---|
| | | table{width:100%;display:table-cell!important;box-sizing:border-box;} |
|---|
| | | .el-table__header,.el-table__body,.el-table__footer{width:100%!important;border-collapse: collapse;text-align:center;} |
|---|
| | | table,table tr th, table tr td { border:1px solid #ddd;color:#606266;word-wrap:break-word} |
|---|
| | | table tr th,table tr td{padding:4mm 0mm;word-wrap:break-word } |
|---|
| | | .el-table__body, tr td .cell{width:100%!important} |
|---|
| | | .el-table th.gutter{display: none;} |
|---|
| | | .el-table colgroup.gutter{display: none;} |
|---|
| | | .CZtd{display: none;} |
|---|
| | | </style><body>`; |
|---|
| | | let content = ""; |
|---|
| | | // è·ååä¸ºä¼ å
¥idç domå
ç´ å
çå
容 |
|---|
| | | let str = document.getElementById(id).innerHTML; |
|---|
| | | // æ¼æ¥ç©ºé¡µé¢+styleæ ·å¼+domå
容 |
|---|
| | | content = content + str; |
|---|
| | | printStr = printStr + tabStyle + content + "</body></html>"; |
|---|
| | | // æå¼æ°é¡µé¢ |
|---|
| | | let pwin = window.open("_blank"); |
|---|
| | | // å°å
容èµå¼å°æ°é¡µé¢ |
|---|
| | | pwin.document.write(printStr); |
|---|
| | | pwin.document.close(); |
|---|
| | | // èç¦-ä¸å focuseï¼å¨æäºæ
åµä¸ï¼æå°é¡µé¢ä¼æé®é¢ã |
|---|
| | | pwin.focus(); |
|---|
| | | // 使ç¨setTimeoutï¼ç页é¢domå
ç´ æ¸²æå®æååæå°ã |
|---|
| | | setTimeout(() => { |
|---|
| | | pwin.print(); // æå°åè½ã ä¾å¦ window.print() ç´æ¥æå°å½åæ´ä¸ªé¡µé¢ã |
|---|
| | | pwin.close(); // å
³é æå°å建çå½åé¡µé¢ |
|---|
| | | }, 500); |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import axios from "axios"; |
|---|
| | | // cookies |
|---|
| | | import { |
|---|
| | | getToken, |
|---|
| | | getUsername, |
|---|
| | | removeToken, |
|---|
| | | removeUsername, |
|---|
| | | } from "@/utils/cookies"; // è¿æ¯å°è£
好çæ¹æ³ |
|---|
| | | // ElementUI åç¬å¼å
¥ |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | // vue-router |
|---|
| | | import router from "@/router"; |
|---|
| | | // å建å®ä¾ |
|---|
| | | const instance = axios.create({ |
|---|
| | | baseURL: process.env.VUE_APP_API, // 请æ±å°å |
|---|
| | | timeout: 5000, // è¶
æ¶ |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // æ¦æªå¨ |
|---|
| | | // æ·»å 请æ±æ¦æªå¨ |
|---|
| | | instance.interceptors.request.use( |
|---|
| | | function (config) { |
|---|
| | | // å¨åé请æ±ä¹ååäºä»ä¹ |
|---|
| | | // if (getToken()) { |
|---|
| | | config.headers["Authorization"] = getToken(); // æºå¸¦token |
|---|
| | | config.headers["X-Access-Token"] = getToken(); // æºå¸¦token |
|---|
| | | // } |
|---|
| | | // if (getUsername()) { |
|---|
| | | // config.headers["Username"] = getUsername(); // æºå¸¦ç¨æ·å |
|---|
| | | // } |
|---|
| | | return config; |
|---|
| | | }, |
|---|
| | | function (error) { |
|---|
| | | // 对请æ±é误åäºä»ä¹ |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | // æ·»å ååºæ¦æªå¨ |
|---|
| | | instance.interceptors.response.use( |
|---|
| | | function (response) { |
|---|
| | | // 对ååºæ°æ®åç¹ä»ä¹ |
|---|
| | | const data = response.data; |
|---|
| | | if (data.message == null && data.msg == null) data.message = "æä½å¤±è´¥"; |
|---|
| | | if (data.code !== 0 && data.code !== 200) { |
|---|
| | | ElMessage({ |
|---|
| | | message: data.message, |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | return [];//Promise.reject(data); |
|---|
| | | } else { |
|---|
| | | return data; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | function (error) { |
|---|
| | | console.log("err response", error.request.response); |
|---|
| | | const errorData = error.request.response; |
|---|
| | | if (errorData.message) { |
|---|
| | | ElMessage({ |
|---|
| | | message: errorData.message, |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // token失æèªå¨éåº |
|---|
| | | if (error.request.status ==401) { |
|---|
| | | router.replace({ |
|---|
| | | name: "Login", |
|---|
| | | }); |
|---|
| | | removeToken(); |
|---|
| | | removeUsername(); |
|---|
| | | } |
|---|
| | | // 对ååºé误åç¹ä»ä¹ |
|---|
| | | return Promise.reject(errorData); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | // æ´é²instance |
|---|
| | | export default instance; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | // æ ¡éªé®ç®± |
|---|
| | | export function validate_email(value){ |
|---|
| | | let regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; |
|---|
| | | return regEmail.test(value); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ ¡éªå¯ç |
|---|
| | | export function validate_password(value){ |
|---|
| | | let regPassword = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/; |
|---|
| | | return regPassword.test(value); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // æ ¡éªéªè¯ç |
|---|
| | | export function validate_code(value){ |
|---|
| | | let regCode = /^[a-z0-9]{6}$/; |
|---|
| | | return regCode.test(value); |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | // å¯ç æ ¡éª |
|---|
| | | export function checkPassword(rule, value, callback, source, options) { |
|---|
| | | if(!value || value === ""){ |
|---|
| | | callback(new Error("请è¾å
¥ç¨å¯ç ")); |
|---|
| | | }else if(!validate_password(value)) { |
|---|
| | | callback(new Error("请è¾å
¥>=6并ä¸<=20ä½çå¯ç ï¼å
å«æ°åãåæ¯")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¨æ·åæ ¡éª |
|---|
| | | export function checkUser(rule, value, callback, source, options) { |
|---|
| | | if(!value || value === ""){ |
|---|
| | | callback(new Error("请è¾å
¥ç¨æ·å")); |
|---|
| | | }else if(!validate_email(value)) { |
|---|
| | | callback(new Error("é®ç®±æ ¼å¼ä¸æ£ç¡®")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="about"> |
|---|
| | | <h1>This is an about page</h1> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>线边åºè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <el-table |
|---|
| | | :data="SClist" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" |
|---|
| | | > |
|---|
| | | <el-table-column label="线边åºè®°å½"> |
|---|
| | | <!-- <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > --> |
|---|
| | | <template v-for="(item, index) in tableHeader"> |
|---|
| | | <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <el-table-column label="æä½" class-name="CZtd"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <el-button |
|---|
| | | v-show="!scope.row.editable" |
|---|
| | | size="small" |
|---|
| | | @click="scope.row.editable = true" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button |
|---|
| | | v-show="scope.row.editable" |
|---|
| | | size="small" |
|---|
| | | type="success" |
|---|
| | | @click="scope.row.editable = false" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | <!-- <el-button |
|---|
| | | size="small" |
|---|
| | | type="danger" |
|---|
| | | @click="handleDelete(scope.$index)" |
|---|
| | | >å é¤</el-button |
|---|
| | | > --> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { bainxkVoList, save } from "@/api/BXKapi"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "chanxian", |
|---|
| | | label: "产线", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "chanxianName", |
|---|
| | | label: "产线å称", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "pihao", |
|---|
| | | label: "æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "ææ", |
|---|
| | | label: "ææ", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cailiaoNum", |
|---|
| | | label: "æææ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cailiaoNum2", |
|---|
| | | label: "æææ°é2", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cailiaoNum3", |
|---|
| | | label: "æææ°é3", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | bainxkVoList: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ssList = ref([]); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await bainxkVoList(); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | hanjiRdData.bainxkVoList = data.data.bainxkVoList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...hanjiRdData.bainxkVoList, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.bainxkVoList; |
|---|
| | | |
|---|
| | | // console.log(SClist); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | bainxkVoList: SClist.value, |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | // console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | // console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ssList, |
|---|
| | | exportWord, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>æå
å·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ssList" |
|---|
| | | :tableHeader="scHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ssList" |
|---|
| | | :tableHeader="sc2Header" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ssList" |
|---|
| | | :tableHeader="sc3Header" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { dabaoVoLast, save } from "@/api/DBapi"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "rdTime1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "pihao", |
|---|
| | | label: "æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "baohao", |
|---|
| | | label: "å
å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waiguan", |
|---|
| | | label: "å¤è§ï¼åé¢ï¼", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chanraomoSj", |
|---|
| | | label: "ç¼ ç»èæ¾ç´§åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dabaoSj", |
|---|
| | | label: "æå
带æ¾ç´§åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const scHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "kongqiYl", |
|---|
| | | label: "空æ°åå", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dabaodai", |
|---|
| | | label: "æå
带å家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dabaodaiGg", |
|---|
| | | label: "è§æ ¼", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dabaodaiNum", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const sc2Header = reactive([ |
|---|
| | | { |
|---|
| | | prop: "chengpinBh", |
|---|
| | | label: "æåå
æ°", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chanraomo", |
|---|
| | | label: "æå
带å家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chanraomoGg", |
|---|
| | | label: "è§æ ¼", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chanraomoNum", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const sc3Header = reactive([ |
|---|
| | | { |
|---|
| | | prop: "feipinTj", |
|---|
| | | label: "åºåç»è®¡", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | dabaoZhiliangRdList: {}, |
|---|
| | | dabaoRd: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ssList = ref([]); |
|---|
| | | let sc35 = []; |
|---|
| | | let sc70 = []; |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | |
|---|
| | | b2: "è´¨éè®°å½", |
|---|
| | | b3: "åºåç»è®¡", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await dabaoVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); |
|---|
| | | |
|---|
| | | SClist.value = data.data.dabaoZhiliangRdList; |
|---|
| | | |
|---|
| | | SClist.value.filter((item) => { |
|---|
| | | if (item != null && item.rdTime != null) |
|---|
| | | //è¿éç¨ä¸´æ¶å称ï¼ä¸ä¿®æ¹åå§å¼ï¼é¿å
æ´æ°æ¶ï¼å段å¼å¸¸ |
|---|
| | | item.rdTime1 = item.rdTime.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | ssList.value = [data.data.dabaoRd]; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...data.data.dabaoRd, |
|---|
| | | t1: sc35.value, |
|---|
| | | t2: sc70.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | //æªå¾ |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | dabaoZhiliangRdList: SClist.value, |
|---|
| | | dabaoRd: ssList.value[0], |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "æå
å·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("db.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "æå
å·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | getRouterData, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | scHeader, |
|---|
| | | sc2Header, |
|---|
| | | sc3Header, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ssList, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>翻边ãæ»ç/å°å£å·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ytfpData" |
|---|
| | | :tableHeader="ytfpHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="fbfpData" |
|---|
| | | :tableHeader="fbfpHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zlList" |
|---|
| | | :tableHeader="zlHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zl2List" |
|---|
| | | :tableHeader="zl2Header" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zl2List" |
|---|
| | | :tableHeader="zl2Header" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="clList" |
|---|
| | | :tableHeader="clHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { fanbianVoLast, save } from "@/api/FBapi"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport, getDate, getTime } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const clHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shijian1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jitou", |
|---|
| | | label: "æºå¤´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kuandu", |
|---|
| | | label: "翻边宽度", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fengkouGg", |
|---|
| | | label: "å°å£åç½é«", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "juanbianHd", |
|---|
| | | label: "å·è¾¹å度", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "juanbianKd", |
|---|
| | | label: "å·è¾¹å®½åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "guangouCd", |
|---|
| | | label: "ç½é©é¿åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gaigouCd", |
|---|
| | | label: "çé©é¿åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jinmidu", |
|---|
| | | label: "ç´§å¯åº¦æ å", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const zlHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jitouDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jitou", |
|---|
| | | label: "æ»çæºå¤´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waiguan", |
|---|
| | | label: "å¤è§", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const zl2Header = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jitouDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jitou", |
|---|
| | | label: "å°å£æºå¤´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waiguan", |
|---|
| | | label: "å·å°å¤è§è´¨é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const ytfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "å°éåºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chongyingNum", |
|---|
| | | label: "éå°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zazhidianNum", |
|---|
| | | label: "æè´¨ç¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "moranNum", |
|---|
| | | label: "墨æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sechaNum", |
|---|
| | | label: "è²å·®", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiyinseNum", |
|---|
| | | label: "å
å°è²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "waituzouweiNum", |
|---|
| | | label: "å¤æ¶èµ°ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "neiwaitucashangNum", |
|---|
| | | label: "å
å¤æ¶æ¦ä¼¤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const fbfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaguanNum", |
|---|
| | | label: "å¡ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yahenNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "huashangNum", |
|---|
| | | label: "å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "youguanNum", |
|---|
| | | label: "æ²¹ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shuanggaiNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianNum", |
|---|
| | | label: "æ½æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guanjinblNum", |
|---|
| | | label: "æ»çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fengkoublNum", |
|---|
| | | label: "å°å£ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "gaichang", |
|---|
| | | label: "çå家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "riqi", |
|---|
| | | label: "æ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shengchanphBh", |
|---|
| | | label: "ç产æ¹å·-æ¿å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shuliang", |
|---|
| | | label: "æ°é(ç/æ¿)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shijishuliang", |
|---|
| | | label: "å®é
使ç¨æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chashu", |
|---|
| | | label: "å·®æ°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | , |
|---|
| | | { |
|---|
| | | prop: "shiyong", |
|---|
| | | label: "使ç¨æ
åµ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | fanbianRdList: {}, |
|---|
| | | feipinYintie: {}, |
|---|
| | | feipinFanbian: {}, |
|---|
| | | fanbianZhiliangRdList: {}, |
|---|
| | | fanbianZhiliangRd2List: {}, |
|---|
| | | fanbianClList: {}, |
|---|
| | | fanbianClFw: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "åºåç»è®¡", |
|---|
| | | b3: "ç产åºå", |
|---|
| | | b4: "è´¨éè®°å½", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let ytfpData = ref([]); |
|---|
| | | let fbfpData = ref([]); |
|---|
| | | |
|---|
| | | let zlList = ref([]); |
|---|
| | | let zl2List = ref([]); |
|---|
| | | |
|---|
| | | let clList = ref([]); |
|---|
| | | let clfwData = ref([]); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await fanbianVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime1 = getDate(headData.head.reportTime); |
|---|
| | | hanjiRdData.fanbianRdList = data.data.fanbianRdList; |
|---|
| | | |
|---|
| | | hjData.value = { ...headData.head, ...hanjiRdData.fanbianRdList }; |
|---|
| | | |
|---|
| | | SClist.value = data.data.fanbianRdList; |
|---|
| | | ytfpData.value = [data.data.feipinYintie]; |
|---|
| | | fbfpData.value = [data.data.feipinFanbian]; |
|---|
| | | |
|---|
| | | zlList.value = data.data.fanbianZhiliangRdList; |
|---|
| | | zl2List.value = data.data.fanbianZhiliangRd2List; |
|---|
| | | |
|---|
| | | clList.value = data.data.fanbianClList; |
|---|
| | | clfwData.value = [data.data.fanbianClFw]; |
|---|
| | | console.log("clfwData.....", clfwData); |
|---|
| | | |
|---|
| | | zlList.value.filter((item) => { |
|---|
| | | if (item != null) item.jitouDate1 = item.jitouDate.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | zlList.value.filter((item) => { |
|---|
| | | if (item != null) { |
|---|
| | | if (item.waiguan == 1) { |
|---|
| | | item.good = "好"; |
|---|
| | | } else { |
|---|
| | | item.bad = "å"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | zl2List.value.filter((item) => { |
|---|
| | | if (item != null) item.jitouDate1 = item.jitouDate.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | zl2List.value.filter((item) => { |
|---|
| | | if (item != null) { |
|---|
| | | if (item.waiguan == 1) { |
|---|
| | | item.good = "好"; |
|---|
| | | } else { |
|---|
| | | item.bad = "å"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | clList.value.filter((item) => { |
|---|
| | | if (item != null && item.shijian != null) |
|---|
| | | item.shijian1 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | fanbianRdList: SClist.value, |
|---|
| | | feipinYintie: ytfpData.value[0], |
|---|
| | | feipinFanbian: fbfpData.value[0], |
|---|
| | | |
|---|
| | | fanbianZhiliangRdList: zlList.value, |
|---|
| | | fanbianZhiliangRd2List: zl2List.value, |
|---|
| | | fanbianClList: clList.value, |
|---|
| | | fanbianClFw: clfwData.value[0], |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | console.log("....error save", dt); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "翻边ãæ»ç/å°å£å·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("fb.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | t1: SClist.value, |
|---|
| | | t2: ytfpData.value, |
|---|
| | | t3: fbfpData.value, |
|---|
| | | t4: zlList.value, |
|---|
| | | t5: zl2List.value, |
|---|
| | | t6: clfwData.value[0], |
|---|
| | | t7: clList.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "翻边ãæ»ç/å°å£å·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | ytfpHeader, |
|---|
| | | fbfpHeader, |
|---|
| | | zlHeader, |
|---|
| | | zl2Header, |
|---|
| | | clHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ytfpData, |
|---|
| | | fbfpData, |
|---|
| | | zlList, |
|---|
| | | zl2List, |
|---|
| | | clList, |
|---|
| | | clfwData, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç½çº¿ç产æ
åµæ¥è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="chanliangtongjiListData" |
|---|
| | | :tableHeader="chaliangHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinYintieData" |
|---|
| | | :tableHeader="ytfpHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinJianbanData" |
|---|
| | | :tableHeader="jbfpHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinHanjiData" |
|---|
| | | :tableHeader="hjfpHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinFanbianData" |
|---|
| | | :tableHeader="fbfpHeader" |
|---|
| | | :labelName="labelName.b5" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinFengkouData" |
|---|
| | | :tableHeader="fkzhfpHeader" |
|---|
| | | :labelName="labelName.b6" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinJianguanData" |
|---|
| | | :tableHeader="jianguanfpHeader" |
|---|
| | | :labelName="labelName.b7" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinJiguanData" |
|---|
| | | :tableHeader="jiguanfpHeader" |
|---|
| | | :labelName="labelName.b8" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinZhijianData" |
|---|
| | | :tableHeader="zhijianfpHeader" |
|---|
| | | :labelName="labelName.b9" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinGuanData" |
|---|
| | | :tableHeader="feipinfpHeader" |
|---|
| | | :labelName="labelName.b10" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { ShengchanVoList, save } from "@/api/Guanxian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const chaliangHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "hjzs", |
|---|
| | | label: "çæ¥æ»æ°", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chengpin", |
|---|
| | | label: "æå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zhuancp", |
|---|
| | | label: "转æå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "daijp", |
|---|
| | | label: "å¾
æ£å", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiebqsy", |
|---|
| | | label: "æ¥çåå©ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiaobhsy", |
|---|
| | | label: "æ¥çåå©ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yinfg", |
|---|
| | | label: "å°åºç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "feipjbfp", |
|---|
| | | label: "åºå+åªæ¿åºå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hegcp", |
|---|
| | | label: "åæ ¼æå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "feipl", |
|---|
| | | label: "åºåç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "caiytpc", |
|---|
| | | label: "彩å°éæ¹æ¬¡", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const hjfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "touguanNum", |
|---|
| | | label: "头ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianNum", |
|---|
| | | label: "æ½æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waitubuliangNum", |
|---|
| | | label: "å¤æ¶ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaguanNum", |
|---|
| | | label: "å¡ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guhuabuliangNum", |
|---|
| | | label: "åºåä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hanjiebuliangNum", |
|---|
| | | label: "çæ¥ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const ytfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "å°éåºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chongyingNum", |
|---|
| | | label: "éå°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zazhidianNum", |
|---|
| | | label: "æè´¨ç¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "moranNum", |
|---|
| | | label: "墨æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sechaNum", |
|---|
| | | label: "è²å·®", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiyinseNum", |
|---|
| | | label: "å
å°è²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "waituzouweiNum", |
|---|
| | | label: "å¤æ¶èµ°ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "neiwaitucashangNum", |
|---|
| | | label: "å
å¤æ¶æ¦ä¼¤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sutiehexianNum", |
|---|
| | | label: "ç´ éé»çº¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "loutuNum", |
|---|
| | | label: "æ¼æ¶", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const fbfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaguanNum", |
|---|
| | | label: "å¡ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yahenNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "huashangNum", |
|---|
| | | label: "å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "youguanNum", |
|---|
| | | label: "æ²¹ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shuanggaiNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianNum", |
|---|
| | | label: "æ½æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guanjinblNum", |
|---|
| | | label: "æ»çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fengkoublNum", |
|---|
| | | label: "å°å£ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const jbfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "jianxieNum", |
|---|
| | | label: "åªæ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yahenNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "huashangNum", |
|---|
| | | label: "å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kabanNum", |
|---|
| | | label: "å¡æ¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const fkzhfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "shaunggaiNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yahenNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fengkouBlNum", |
|---|
| | | label: "å°å£ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaguanNum", |
|---|
| | | label: "å¡ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "youguanNum", |
|---|
| | | label: "æ²¹ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianNum", |
|---|
| | | label: "æ½æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const jianguanfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "louguanNum", |
|---|
| | | label: "æ¼ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shuanggaiNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "lougaiNum", |
|---|
| | | label: "æ¼ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bieguanNum", |
|---|
| | | label: "çªç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "daoguanNum", |
|---|
| | | label: "åç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const jiguanfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "youguanNum", |
|---|
| | | label: "æ²¹ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bieguanNum", |
|---|
| | | label: "çªç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hanjieBlNum", |
|---|
| | | label: "çæ¥ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gunjinBlNum", |
|---|
| | | label: "æ»çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zangguanNum", |
|---|
| | | label: "èç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianxieNum", |
|---|
| | | label: "åªæ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fanbianBlNum", |
|---|
| | | label: "翻边ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "suojinBlNum", |
|---|
| | | label: "缩çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zanggaiNum", |
|---|
| | | label: "èç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waituBlNum", |
|---|
| | | label: "å¤æ¶ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "huashangNum", |
|---|
| | | label: "彩å°å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fengkouBlNum", |
|---|
| | | label: "å°å£ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const zhijianfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "è´¨æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sum", |
|---|
| | | label: "å计", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const feipinfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "chongyingNum", |
|---|
| | | label: "éå°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zazhidianNum", |
|---|
| | | label: "æè´¨ç¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waituzouweiNum", |
|---|
| | | label: "å¤æ¶èµ°ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "moranNum", |
|---|
| | | label: "墨æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fanbianBl", |
|---|
| | | label: "翻边ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sechaNum", |
|---|
| | | label: "è²å·®", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiyinseNum", |
|---|
| | | label: "å
å°è²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiwaitucashangNum", |
|---|
| | | label: "å
å¤æ¶æ¦ä¼¤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guangyouBzNum", |
|---|
| | | label: "å
æ²¹ä¸å", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sutiehexianNum", |
|---|
| | | label: "ç´ éé»çº¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "taoyinBzNum", |
|---|
| | | label: "å¥å°ä¸å", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hubanNum", |
|---|
| | | label: "ç³æ¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "产éç»è®¡", |
|---|
| | | b2: "åºåç»è®¡", |
|---|
| | | b3: "åªæ¿åºå", |
|---|
| | | b4: "çæ¥åºå", |
|---|
| | | b5: "翻边åºå", |
|---|
| | | b6: "ç»ååºå", |
|---|
| | | b7: "æ£ç½åºå", |
|---|
| | | b8: "éç½åºå", |
|---|
| | | b9: "è´¨æ£", |
|---|
| | | b10: "å°åºç½", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let chanliangtongjiListData = ref([]); |
|---|
| | | let feipinGuanData = ref([]); |
|---|
| | | |
|---|
| | | let feipinHanjiData = ref([]); |
|---|
| | | let feipinJianbanData = ref([]); |
|---|
| | | |
|---|
| | | let feipinJiguanData = ref([]); |
|---|
| | | let feipinJianguanData = ref([]); |
|---|
| | | let feipinYintieData = ref([]); |
|---|
| | | let feipinFanbianData = ref([]); |
|---|
| | | |
|---|
| | | let feipinFengkouData = ref([]); |
|---|
| | | let feipinZhijianData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | function checkValue(obj) { |
|---|
| | | if (obj == null) return [{ total: 0 }]; |
|---|
| | | return [obj]; |
|---|
| | | } |
|---|
| | | function checkTotal(obj) { |
|---|
| | | if (obj == null) return null; |
|---|
| | | return obj.total; |
|---|
| | | } |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await ShengchanVoList(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); |
|---|
| | | headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | |
|---|
| | | let yt = { |
|---|
| | | cy: data.data.feipinYintie.chongyingNum, |
|---|
| | | mr: data.data.feipinYintie.moranNum, |
|---|
| | | zzd: data.data.feipinYintie.zazhidianNum, |
|---|
| | | wtzw: data.data.feipinYintie.waituzouweiNum, |
|---|
| | | st: data.data.feipinYintie.sutiehexianNum, |
|---|
| | | sc: data.data.feipinYintie.sechaNum, |
|---|
| | | ly: data.data.feipinYintie.louyinNum, |
|---|
| | | nys: data.data.feipinYintie.neiyinseNum, |
|---|
| | | nwtcs: data.data.feipinYintie.neiwaitucashangNum, |
|---|
| | | lt: data.data.feipinYintie.loutuNum, |
|---|
| | | }; |
|---|
| | | let jb = { |
|---|
| | | kb: |
|---|
| | | data.data.feipinJianban == null |
|---|
| | | ? 0 |
|---|
| | | : data.data.feipinJianban.kabanNum, |
|---|
| | | hs: |
|---|
| | | data.data.feipinJianban == null |
|---|
| | | ? 0 |
|---|
| | | : data.data.feipinJianban.huashangNum, |
|---|
| | | yh: |
|---|
| | | data.data.feipinJianban == null |
|---|
| | | ? 0 |
|---|
| | | : data.data.feipinJianban.yahenNum, |
|---|
| | | jx: |
|---|
| | | data.data.feipinJianban == null |
|---|
| | | ? 0 |
|---|
| | | : data.data.feipinJianban.jianxieNum.jianxieNum, |
|---|
| | | }; |
|---|
| | | let hj = { |
|---|
| | | hjyg: data.data.feipinHanji.youguanNum, |
|---|
| | | hjtg: data.data.feipinHanji.touguanNum, |
|---|
| | | hjcj: data.data.feipinHanji.choujianNum, |
|---|
| | | hjwt: data.data.feipinHanji.waitubuliangNum, |
|---|
| | | hjkg: data.data.feipinHanji.kaguanNum, |
|---|
| | | hjhj: data.data.feipinHanji.hanjiebuliangNum, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let fb = { |
|---|
| | | fbsj: data.data.feipinFengkou.suojinBlNum, |
|---|
| | | fbkg: data.data.feipinFengkou.kaguanNum, |
|---|
| | | fbyh: data.data.feipinFengkou.yahenNum, |
|---|
| | | fbhs: data.data.feipinFengkou.huashangNum, |
|---|
| | | fbwt: data.data.feipinFengkou.waituCsNum, |
|---|
| | | fbfb: data.data.feipinFengkou.fanbianBlNum, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let fk = { |
|---|
| | | fkfk: data.data.feipinFengkou.fengkouBlNum, |
|---|
| | | fkyh: data.data.feipinFengkou.yahenNum, |
|---|
| | | fkkg: data.data.feipinFengkou.kaguanNum, |
|---|
| | | fkyg: data.data.feipinFengkou.youguanNum, |
|---|
| | | fkcj: data.data.feipinFengkou.choujianNum, |
|---|
| | | fksg: data.data.feipinFengkou.shaunggaiNum, |
|---|
| | | }; |
|---|
| | | let jg = { |
|---|
| | | jgbg: data.data.feipinFengkou.bieguanNum, |
|---|
| | | jglg: data.data.feipinFengkou.louguanNum, |
|---|
| | | jgsg: data.data.feipinFengkou.shuanggaiNum, |
|---|
| | | jgdg: data.data.feipinFengkou.daoguanNum, |
|---|
| | | jglgai: data.data.feipinFengkou.lougaiNum, |
|---|
| | | jgjh: data.data.feipinFengkou.jiahanNum, |
|---|
| | | }; |
|---|
| | | let zj = { |
|---|
| | | total: checkTotal(data.data.feipinZhijian), |
|---|
| | | sum: |
|---|
| | | data.data.feipinZhijian == null ? null : data.data.feipinZhijian.sum, |
|---|
| | | t1: checkTotal(data.data.feipinYintie), |
|---|
| | | t2: checkTotal(data.data.feipinJianban), |
|---|
| | | t3: checkTotal(data.data.feipinHanji), |
|---|
| | | t4: checkTotal(data.data.feipinFanbian), |
|---|
| | | t5: checkTotal(data.data.feipinFengkou), |
|---|
| | | t6: checkTotal(data.data.feipinJianguan), |
|---|
| | | t7: checkTotal(data.data.feipinJiguan), |
|---|
| | | t8: checkTotal(data.data.feipinGuan), |
|---|
| | | }; |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...data.data.chanliangtongjiList, |
|---|
| | | ...yt, |
|---|
| | | ...jb, |
|---|
| | | ...hj, |
|---|
| | | ...fb, |
|---|
| | | ...fk, |
|---|
| | | ...jg, |
|---|
| | | ...zj, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | chanliangtongjiListData.value = checkValue(data.data.chanliangtongjiList); |
|---|
| | | feipinGuanData.value = checkValue(data.data.feipinGuan); |
|---|
| | | feipinHanjiData.value = checkValue(data.data.feipinHanji); |
|---|
| | | feipinJianbanData.value = checkValue(data.data.feipinJianban); |
|---|
| | | feipinJiguanData.value = checkValue(data.data.feipinJiguan); |
|---|
| | | feipinJianguanData.value = checkValue(data.data.feipinJianguan); |
|---|
| | | feipinYintieData.value = checkValue(data.data.feipinYintie); |
|---|
| | | feipinFanbianData.value = checkValue(data.data.feipinFanbian); |
|---|
| | | feipinFengkouData.value = checkValue(data.data.feipinFengkou); |
|---|
| | | feipinZhijianData.value = checkValue(data.data.feipinZhijian); |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | feipinGuan: feipinGuanData.value[0], |
|---|
| | | feipinHanji: feipinHanjiData.value[0], |
|---|
| | | feipinJianban: feipinJianbanData.value[0], |
|---|
| | | deipinJiguan: feipinJiguanData.value[0], |
|---|
| | | feipinJiangu: feipinJianguanData.value[0], |
|---|
| | | feipinYintie: feipinYintieData.value[0], |
|---|
| | | feipinFanbian: feipinFanbianData.value[0], |
|---|
| | | feipinFengkou: feipinFengkouData.value[0], |
|---|
| | | feipinZhijian: feipinZhijianData.value[0], |
|---|
| | | chanliangtongjiList: chanliangtongjiListData.value[0], |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "ç½çº¿ç产æ
åµæ¥è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("guanxian.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "ç½çº¿ç产æ
åµæ¥è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | ytfpHeader, |
|---|
| | | feipinfpHeader, |
|---|
| | | chaliangHeader, |
|---|
| | | chanliangtongjiListData, |
|---|
| | | feipinGuanData, |
|---|
| | | feipinHanjiData, |
|---|
| | | feipinJianbanData, |
|---|
| | | feipinJiguanData, |
|---|
| | | feipinJianguanData, |
|---|
| | | feipinYintieData, |
|---|
| | | feipinFanbianData, |
|---|
| | | feipinFengkouData, |
|---|
| | | feipinZhijianData, |
|---|
| | | jbfpHeader, |
|---|
| | | hjfpHeader, |
|---|
| | | fbfpHeader, |
|---|
| | | fkzhfpHeader, |
|---|
| | | jianguanfpHeader, |
|---|
| | | jiguanfpHeader, |
|---|
| | | zhijianfpHeader, |
|---|
| | | feipinfpHeader, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | ShengchanVoList, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>çæº/åéå·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :labelName="labelName.scjl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ytfpData" |
|---|
| | | :tableHeader="ytfpHeader" |
|---|
| | | :labelName="labelName.fptj" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="hjfpData" |
|---|
| | | :tableHeader="hjfpHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | |
|---|
| | | <div> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="wgList" |
|---|
| | | :tableHeader="wgHeader" |
|---|
| | | :labelName="labelName.wgzl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="wgList" |
|---|
| | | :tableHeader="wgHeader" |
|---|
| | | :labelName="labelName.wgzl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="wgList" |
|---|
| | | :tableHeader="wgHeader" |
|---|
| | | :labelName="labelName.wgzl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="6"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="djlList" |
|---|
| | | :tableHeader="djlHeader" |
|---|
| | | :labelName="labelName.djl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | <!-- <HJTABLE |
|---|
| | | :SClist="wgList" |
|---|
| | | :tableHeader="wgHeader" |
|---|
| | | :labelName="labelName.wgzl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> --> |
|---|
| | | <div> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="dqlsList" |
|---|
| | | :tableHeader="dqlsHeader" |
|---|
| | | :labelName="labelName.dqsl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="rdList" |
|---|
| | | :tableHeader="rdHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="hlList" |
|---|
| | | :tableHeader="hlHeader" |
|---|
| | | :labelName="labelName.hlgl" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { hanjiVoLest, save } from "@/api/HJapi"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const wgHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jdDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waiguanzhiliang", |
|---|
| | | label: "å¤è§è´¨é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const dqlsHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jdDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dingqiusila", |
|---|
| | | label: "顶çææ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "liusaunqinpao", |
|---|
| | | label: "ç¡«é
¸é侵泡", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const djlHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jdDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dajieliangTou", |
|---|
| | | label: "头é¨", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dajieliangWei", |
|---|
| | | label: "å°¾é¨", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const rdHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jdDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "tuliaoniandu", |
|---|
| | | label: "æ¶æç²åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hanjiehoudu", |
|---|
| | | label: "çæ¥å度", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "JCXM", |
|---|
| | | label: "çæµé¡¹ç®", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "SJBZFW", |
|---|
| | | label: "æ°æ®æ åèå´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "CSZ", |
|---|
| | | label: "å®æµå¼", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "FLMC", |
|---|
| | | label: "è¾
æå称", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "CJ", |
|---|
| | | label: "å家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "XH", |
|---|
| | | label: "åå·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const hlHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "hlDate1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h1", |
|---|
| | | label: "1#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h2", |
|---|
| | | label: "2#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h3", |
|---|
| | | label: "2#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h4", |
|---|
| | | label: "4#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h5", |
|---|
| | | label: "5#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h6", |
|---|
| | | label: "6#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h7", |
|---|
| | | label: "7#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h8", |
|---|
| | | label: "8#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h9", |
|---|
| | | label: "9#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h10", |
|---|
| | | label: "10#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h11", |
|---|
| | | label: "11#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "h12", |
|---|
| | | label: "12#ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const ytfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "å°éåºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chongyingNum", |
|---|
| | | label: "éå°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zazhidianNum", |
|---|
| | | label: "æè´¨ç¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiyinseNum", |
|---|
| | | label: "å
å°è²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "moranNum", |
|---|
| | | label: "墨æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waituzouweiNum", |
|---|
| | | label: "å¤æ¶èµ°ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiwaituYwNum", |
|---|
| | | label: "å
å¤æ¶æ²¹æ±¡", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const hjfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "touguanNum", |
|---|
| | | label: "头ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianNum", |
|---|
| | | label: "æ½æ£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waitubuliangNum", |
|---|
| | | label: "å¤æ¶ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaguanNum", |
|---|
| | | label: "å¡ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guhuabuliangNum", |
|---|
| | | label: "åºåä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hanjiebuliangNum", |
|---|
| | | label: "çæ¥ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "namePihaoValue", |
|---|
| | | label: "产åå称/æ¹å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | hanjiRd: {}, |
|---|
| | | hanjiHongluList: {}, |
|---|
| | | feipinYintie: {}, |
|---|
| | | feipinHanji: {}, |
|---|
| | | hanjiZhiliangRdList: {}, |
|---|
| | | hanjiZhiliangWgList: {}, |
|---|
| | | hanjiZhiliangDqlsList: {}, |
|---|
| | | hanjiZhiliangDjlList: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let hlList = ref([]); |
|---|
| | | let ytfpData = ref([]); |
|---|
| | | let hjfpData = ref([]); |
|---|
| | | let wgList = ref([]); |
|---|
| | | let dqlsList = ref([]); |
|---|
| | | let djlList = ref([]); |
|---|
| | | let rdList = ref([]); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | scjl: "ç产记å½", |
|---|
| | | fptj: "åºåç»è®¡", |
|---|
| | | wgzl: "å¤è§è´¨é", |
|---|
| | | djl: "ææ¥é", |
|---|
| | | dqsl: "顶çææå®éª", |
|---|
| | | hlgl: "ççåç", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await hanjiVoLest(); |
|---|
| | | console.log("hjdata......", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | hanjiRdData.hanjiRd = data.data.hanjiRd; |
|---|
| | | hjData.value = { ...headData.head, ...hanjiRdData.hanjiRd }; |
|---|
| | | |
|---|
| | | hlList.value = data.data.hanjiHongluList; |
|---|
| | | |
|---|
| | | ytfpData.value = [data.data.feipinYintie]; |
|---|
| | | |
|---|
| | | hjfpData.value = |
|---|
| | | data.data.feipinHanji == null ? [] : [data.data.feipinHanji]; |
|---|
| | | |
|---|
| | | wgList.value = data.data.hanjiZhiliangWgList; |
|---|
| | | wgList.value.filter((item) => { |
|---|
| | | item.jdDate1 = item.jdDate.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | djlList.value = data.data.hanjiZhiliangDjlList; |
|---|
| | | djlList.value.filter((item) => { |
|---|
| | | item.jdDate1 = item.jdDate.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | dqlsList.value = data.data.hanjiZhiliangDqlsList; |
|---|
| | | dqlsList.value.filter((item) => { |
|---|
| | | item.jdDate1 = item.jdDate.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | rdList.value = data.data.hanjiZhiliangRdList; |
|---|
| | | |
|---|
| | | let arr = [ |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.shengchannengli, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.shengchannengliFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.shengchannengliScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.tongxian, |
|---|
| | | CJ: hanjiRdData.hanjiRd.tongxianCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.tongxianXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.tongxiansudu, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.tongxiansuduFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.tongxiansuduScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.tongxian, |
|---|
| | | CJ: hanjiRdData.hanjiRd.tongxianCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.tongxianXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.hanjiedianliu, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.hanjiedianliuFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.hanjiedianliuScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.hanfengtl, |
|---|
| | | CJ: hanjiRdData.hanjiRd.hanfengtlCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.hanfengtlXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.shuiwenfanwei, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.shuiwenfanweiFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.shuiwenfanweiScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.hanfengtl, |
|---|
| | | CJ: hanjiRdData.hanjiRd.hanfengtlCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.hanfengtlXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.waituniandu, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.waitunianduFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.waitunianduScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.xishiji, |
|---|
| | | CJ: hanjiRdData.hanjiRd.xishijiCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.xishijiXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.diancilugonglv, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.diancilugonglvFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.diancilugonglvScz, |
|---|
| | | FLMC: hanjiRdData.hanjiRd.xishiji, |
|---|
| | | CJ: hanjiRdData.hanjiRd.xishijiCj, |
|---|
| | | XH: hanjiRdData.hanjiRd.xishijiXh, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.diancilusudu, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.diancilusuduFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.diancilusuduScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.kongqiyali, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.kongqiyaliFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.kongqiyaliScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.gongzuodianya, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.gongzuodianyaFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.gongzuodianyaScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.tongxianzxkd, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.tongxianzxkdFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.tongxianzxkdScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.chengyuan, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.chengyuanFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.chengyuanScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.tanhuangyali, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.tanhuangyaliFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.tanhuangyaliScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.z, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.zfw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.zscz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.shanghanlun, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.shanghanlunFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.shanghanlunScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.xiaghanlun, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.xiaghanlunFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.xiaghanlunScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | JCXM: hanjiRdData.hanjiRd.hanjijishu, |
|---|
| | | SJBZFW: hanjiRdData.hanjiRd.hanjijishuFw, |
|---|
| | | CSZ: hanjiRdData.hanjiRd.hanjijishuScz, |
|---|
| | | FLMC: "", |
|---|
| | | CJ: "", |
|---|
| | | XH: "", |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | SClist.value = arr; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | SClist.value.filter((item) => { |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.shengchannengli) { |
|---|
| | | hanjiRdData.hanjiRd.shengchannengliFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.shengchannengliScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.tongxiansudu) { |
|---|
| | | hanjiRdData.hanjiRd.tongxiansuduFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.tongxiansuduScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.hanjiedianliu) { |
|---|
| | | hanjiRdData.hanjiRd.hanjiedianliuFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.hanjiedianliuScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.shuiwenfanwei) { |
|---|
| | | hanjiRdData.hanjiRd.shuiwenfanweiFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.shuiwenfanweiScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.waituniandu) { |
|---|
| | | hanjiRdData.hanjiRd.waitunianduFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.waitunianduScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.diancilugonglv) { |
|---|
| | | hanjiRdData.hanjiRd.diancilugonglvFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.diancilugonglvScz = item.CSZ; |
|---|
| | | hanjiRdData.hanjiRd.xishiji = item.FLMC; |
|---|
| | | hanjiRdData.hanjiRd.xishijiCj = item.CJ; |
|---|
| | | hanjiRdData.hanjiRd.xishijiXh = item.XH; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.diancilusudu) { |
|---|
| | | hanjiRdData.hanjiRd.diancilusuduFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.diancilusuduScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.kongqiyali) { |
|---|
| | | hanjiRdData.hanjiRd.kongqiyaliFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.kongqiyaliScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.gongzuodianya) { |
|---|
| | | hanjiRdData.hanjiRd.gongzuodianyaFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.gongzuodianyaScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.tongxianzxkd) { |
|---|
| | | hanjiRdData.hanjiRd.tongxianzxkdFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.tongxianzxkdScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.chengyuan) { |
|---|
| | | hanjiRdData.hanjiRd.chengyuanFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.chengyuanScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.tanhuangyali) { |
|---|
| | | hanjiRdData.hanjiRd.tanhuangyaliFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.tanhuangyaliScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.z) { |
|---|
| | | hanjiRdData.hanjiRd.zfw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.zscz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.hanjijishu) { |
|---|
| | | hanjiRdData.hanjiRd.hanjijishuFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.hanjijishuScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.xiaghanlun) { |
|---|
| | | hanjiRdData.hanjiRd.xiaghanlunFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.xiaghanlunScz = item.CSZ; |
|---|
| | | } |
|---|
| | | if (item.JCXM == hanjiRdData.hanjiRd.shanghanlun) { |
|---|
| | | hanjiRdData.hanjiRd.shanghanlunFw = item.SJBZFW; |
|---|
| | | hanjiRdData.hanjiRd.shanghanlunScz = item.CSZ; |
|---|
| | | } |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | let mydata = { |
|---|
| | | hanjiRd: hanjiRdData.hanjiRd, |
|---|
| | | hanjiHongluList: hlList.value, |
|---|
| | | feipinYintie: ytfpData.value[0], |
|---|
| | | feipinHanji: hjfpData.value[0], |
|---|
| | | |
|---|
| | | hanjiZhiliangWgList: wgList.value, |
|---|
| | | hanjiZhiliangRdList: rdList.value, |
|---|
| | | hanjiZhiliangDqlsList: dqlsList.value, |
|---|
| | | hanjiZhiliangDjlList: djlList.value, |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", mydata); |
|---|
| | | const dt = await save(mydata); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t3: hlList.value, |
|---|
| | | t1: ytfpData.value, |
|---|
| | | t2: hjData.value, |
|---|
| | | t4: wgList.value, |
|---|
| | | t5: wgList.value, |
|---|
| | | t6: wgList.value, |
|---|
| | | t7: djlList.value, |
|---|
| | | t8: dqlsList.value, |
|---|
| | | rdList, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | hlHeader, |
|---|
| | | hjfpHeader, |
|---|
| | | ytfpHeader, |
|---|
| | | wgHeader, |
|---|
| | | djlHeader, |
|---|
| | | dqlsHeader, |
|---|
| | | rdHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | hlList, |
|---|
| | | hjData, |
|---|
| | | ytfpData, |
|---|
| | | hjfpData, |
|---|
| | | wgList, |
|---|
| | | djlList, |
|---|
| | | dqlsList, |
|---|
| | | rdList, |
|---|
| | | exportWord, |
|---|
| | | editable, |
|---|
| | | labelName, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="home"> |
|---|
| | | <HelloWorld msg="Welcome to Your Vue.js App" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // @ is an alias to /src |
|---|
| | | import HelloWorld from "@/components/HelloWorld.vue"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "Home", |
|---|
| | | components: { |
|---|
| | | HelloWorld |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>åªæ¿æºå·¥åºç产质éè®°å½è¡¨</h3> |
|---|
| | | |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | |
|---|
| | | <!-- <el-input |
|---|
| | | size="small" |
|---|
| | | v-model="headData.head.reportTime" |
|---|
| | | :placeholder="`请è¾å
¥${headData.head.reportTime}`" |
|---|
| | | /> --> |
|---|
| | | |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="selfList" |
|---|
| | | :tableHeader="selfHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="checkList" |
|---|
| | | :tableHeader="checkHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="rdList" |
|---|
| | | :tableHeader="rdHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | |
|---|
| | | <div id="divcss"><p>4.æ½æ£è®°å½2ï¼</p></div> |
|---|
| | | <div v-for="(ii, kk) in eloList" :key="kk"> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="6" v-for="(i, k) in ii" :key="k"> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="i.list" |
|---|
| | | :tableHeader="rd2Header" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="jFList" |
|---|
| | | :tableHeader="fpHeader" |
|---|
| | | :labelName="labelName.b6" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { jianbjVoLast, save } from "@/api/JBapi"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | methods: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | |
|---|
| | | const fpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "pihao", |
|---|
| | | label: "æ¹å·", |
|---|
| | | editable: true, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // prop: "biaoshi", |
|---|
| | | // label: "æ è¯", |
|---|
| | | // editable: false, |
|---|
| | | // type: "text", |
|---|
| | | // }, |
|---|
| | | { |
|---|
| | | prop: "scfpmc", |
|---|
| | | label: "ç产åºåå称", |
|---|
| | | editable: true, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shengchanFp", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: true, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "ytfpmc", |
|---|
| | | label: "å°éåºåå称", |
|---|
| | | editable: true, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yintieFp", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: true, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const rd2Header = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shijian3", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // prop: "biaoshi", |
|---|
| | | // label: "æ è¯", |
|---|
| | | // editable: false, |
|---|
| | | // type: "text", |
|---|
| | | // }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "changdu", |
|---|
| | | label: "é¿åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kuandu", |
|---|
| | | label: "宽度", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zhijiaodu", |
|---|
| | | label: "ç´è§åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "ytphBh", |
|---|
| | | label: "åéæ¹å·ãçå·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yscj", |
|---|
| | | label: "å°å·å家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cjsj2", |
|---|
| | | label: "è£åªæ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "ytsl", |
|---|
| | | label: "åéæ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "scsl", |
|---|
| | | label: "å®åªæ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kuiying", |
|---|
| | | label: "äºç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | , |
|---|
| | | { |
|---|
| | | prop: "stcj", |
|---|
| | | label: "ç´ éå家", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "ttsl", |
|---|
| | | label: "ééæ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yuanyin", |
|---|
| | | label: "åå ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "ttmc", |
|---|
| | | label: "ééå称", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const selfHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "cpml", |
|---|
| | | label: "产åå称", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "changdu", |
|---|
| | | label: "é¿åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gaodu", |
|---|
| | | label: "é«åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zhijiaodu", |
|---|
| | | label: "ç´è§åº¦", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const checkHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "cjffNum", |
|---|
| | | label: "æ½æ£æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cjffFre", |
|---|
| | | label: "æ½æ£é¢ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cjffCheckOne", |
|---|
| | | label: "æ£æµç¹1", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cjffCheckTwo", |
|---|
| | | label: "æ£æµç¹2", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cjffCheckThree", |
|---|
| | | label: "æ£æµç¹3", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const rdHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shijian2", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yszl", |
|---|
| | | label: "å°å·è´¨é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "liukong", |
|---|
| | | label: "ç空", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "nwths", |
|---|
| | | label: "å
å¤æ¶å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | jianbjTrjl: {}, |
|---|
| | | jianbjSelf: {}, |
|---|
| | | jianbjCheck: {}, |
|---|
| | | jianbjRd: {}, |
|---|
| | | jianbjRd2List: {}, |
|---|
| | | jianbjFpList: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let editable = ref(false); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let selfList = ref([]); |
|---|
| | | let checkList = ref([]); |
|---|
| | | let rdList = ref([]); |
|---|
| | | //å解æ两个12ålistï¼å 为æå°éè¦ |
|---|
| | | let rdList1 = ref([]); |
|---|
| | | let rdList2 = ref([]); |
|---|
| | | |
|---|
| | | let rd2List = ref([]); |
|---|
| | | let jFList = ref([]); |
|---|
| | | |
|---|
| | | let rd2ListA1 = ref([]); |
|---|
| | | let rd2ListB1 = ref([]); |
|---|
| | | let rd2ListC1 = ref([]); |
|---|
| | | let rd2ListD1 = ref([]); |
|---|
| | | |
|---|
| | | let rd2ListA2 = ref([]); |
|---|
| | | let rd2ListB2 = ref([]); |
|---|
| | | let rd2ListC2 = ref([]); |
|---|
| | | let rd2ListD2 = ref([]); |
|---|
| | | |
|---|
| | | let rd2ListA3 = ref([]); |
|---|
| | | let rd2ListB3 = ref([]); |
|---|
| | | let rd2ListC3 = ref([]); |
|---|
| | | let rd2ListD3 = ref([]); |
|---|
| | | |
|---|
| | | let eloList = ref([]); |
|---|
| | | let eloName = ref(["A", "B", "C", "D"]); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "åæææå
¥è®°å½", |
|---|
| | | b2: "1.å²ä½å产å尺寸æ åï¼", |
|---|
| | | b3: "2.æ½æ£æ¹æ³ï¼", |
|---|
| | | b4: "3.æ½æ£è®°å½1ï¼ï¼30åéæ½æ£1次ï¼æ¯å
éä¸ãä¸ãä¸åä¸æ¬¡ï¼ï¼â代表质éè¯å¥½ï¼å¦æè´¨é缺é·ç´æ¥æ³¨æ", |
|---|
| | | b5: "顶çææå®éª", |
|---|
| | | b6: "åºåè®°å½", |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | jianbjTrjl: SClist.value, |
|---|
| | | jianbjSelf: selfList.value, |
|---|
| | | jianbjCheck: checkList.value, |
|---|
| | | jianbjRd: rdList.value, |
|---|
| | | jianbjRd2List: rd2ListA1.value.concat( |
|---|
| | | rd2ListB1.value, |
|---|
| | | rd2ListC1.value, |
|---|
| | | rd2ListD1.value, |
|---|
| | | rd2ListA2.value, |
|---|
| | | rd2ListB2.value, |
|---|
| | | rd2ListC2.value, |
|---|
| | | rd2ListD2.value, |
|---|
| | | rd2ListA3.value, |
|---|
| | | rd2ListB3.value, |
|---|
| | | rd2ListC3.value, |
|---|
| | | rd2ListD3.value |
|---|
| | | ), |
|---|
| | | jianbjFpList: jFList.value, |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await jianbjVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function rd2Filter(biaoshi) { |
|---|
| | | var list = rd2List.value.filter((item) => { |
|---|
| | | return item.biaoshi === biaoshi; |
|---|
| | | }); |
|---|
| | | return list; |
|---|
| | | } |
|---|
| | | function parse(data) { |
|---|
| | | console.log('jbj...',data) |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); |
|---|
| | | |
|---|
| | | hanjiRdData.jianbjTrjl = data.data.jianbjTrjl; |
|---|
| | | |
|---|
| | | hjData.value = { ...headData.head, ...hanjiRdData.jianbjTrjl }; |
|---|
| | | |
|---|
| | | SClist.value = data.data.jianbjTrjl; |
|---|
| | | SClist.value.filter((item) => { |
|---|
| | | item.cjsj2 = item.cjsj.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | selfList.value = data.data.jianbjSelf; |
|---|
| | | checkList.value = data.data.jianbjCheck; |
|---|
| | | rdList.value = data.data.jianbjRd; |
|---|
| | | rdList.value.filter((item) => { |
|---|
| | | item.shijian2 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | rd2List.value = data.data.jianbjRd2List; |
|---|
| | | rd2List.value.filter((item) => { |
|---|
| | | item.shijian3 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | jFList.value = data.data.jianbjFpList; |
|---|
| | | |
|---|
| | | if (rdList.value.length > 12) { |
|---|
| | | rdList1 = rdList.value.splice(0, 11); |
|---|
| | | rdList2 = rdList.value.splice(12); |
|---|
| | | } else { |
|---|
| | | rdList1 = rdList; |
|---|
| | | rdList2 = []; |
|---|
| | | } |
|---|
| | | |
|---|
| | | rd2ListA1.value = rd2Filter("A1"); |
|---|
| | | rd2ListA2.value = rd2Filter("A2"); |
|---|
| | | rd2ListA3.value = rd2Filter("A3"); |
|---|
| | | |
|---|
| | | rd2ListB1.value = rd2Filter("B1"); |
|---|
| | | rd2ListB2.value = rd2Filter("B2"); |
|---|
| | | rd2ListB3.value = rd2Filter("B3"); |
|---|
| | | |
|---|
| | | rd2ListC1.value = rd2Filter("C1"); |
|---|
| | | rd2ListC2.value = rd2Filter("C2"); |
|---|
| | | rd2ListC3.value = rd2Filter("C3"); |
|---|
| | | |
|---|
| | | rd2ListD1.value = rd2Filter("D1"); |
|---|
| | | rd2ListD2.value = rd2Filter("D2"); |
|---|
| | | rd2ListD3.value = rd2Filter("D3"); |
|---|
| | | eloList.value = [ |
|---|
| | | [ |
|---|
| | | { list: rd2ListA1.value, name: "A" }, |
|---|
| | | { list: rd2ListB1.value, name: "B" }, |
|---|
| | | { list: rd2ListC1.value, name: "C" }, |
|---|
| | | { list: rd2ListD1.value, name: "D" }, |
|---|
| | | ], |
|---|
| | | [ |
|---|
| | | { list: rd2ListA2.value, name: "A" }, |
|---|
| | | { list: rd2ListB2.value, name: "B" }, |
|---|
| | | { list: rd2ListC2.value, name: "C" }, |
|---|
| | | { list: rd2ListD2.value, name: "D" }, |
|---|
| | | ], |
|---|
| | | [ |
|---|
| | | { list: rd2ListA3.value, name: "A" }, |
|---|
| | | { list: rd2ListB3.value, name: "B" }, |
|---|
| | | { list: rd2ListC3.value, name: "C" }, |
|---|
| | | { list: rd2ListD3.value, name: "D" }, |
|---|
| | | ], |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | console.log(rd2ListA1); |
|---|
| | | console.log(rd2ListB1); |
|---|
| | | } |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "åªæ¿æºå·¥åºç产质éè®°å½è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("jbj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | table: hanjiRdData.jianbjTrjl, |
|---|
| | | table2: selfList.value, |
|---|
| | | table3: rdList1.value, |
|---|
| | | table31: rdList2.value, |
|---|
| | | t4: rd2ListA1.value, |
|---|
| | | t5: rd2ListB1.value, |
|---|
| | | t6: rd2ListC1.value, |
|---|
| | | t7: rd2ListD1.value, |
|---|
| | | t8: rd2ListA2.value, |
|---|
| | | t9: rd2ListB2.value, |
|---|
| | | ta: rd2ListC2.value, |
|---|
| | | tb: rd2ListD2.value, |
|---|
| | | tc: rd2ListA3.value, |
|---|
| | | td: rd2ListB3.value, |
|---|
| | | te: rd2ListC3.value, |
|---|
| | | tf: rd2ListD3.value, |
|---|
| | | tt1: rd2ListA1.value.length == 0 ? "" : rd2ListA1.value[0].shijian, |
|---|
| | | tt2: rd2ListA2.value.length == 0 ? "" : rd2ListA2.value[0].shijian, |
|---|
| | | tt3: rd2ListA3.value.length == 0 ? "" : rd2ListA3.value[0].shijian, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "åªæ¿æºå·¥åºç产质éè®°å½è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | selfHeader, |
|---|
| | | checkHeader, |
|---|
| | | rdHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | selfList, |
|---|
| | | checkList, |
|---|
| | | rdList, |
|---|
| | | exportWord, |
|---|
| | | editable, |
|---|
| | | saveData, |
|---|
| | | headReport, |
|---|
| | | rd2Header, |
|---|
| | | rd2List, |
|---|
| | | rd2ListA1, |
|---|
| | | rd2ListC1, |
|---|
| | | rd2ListB1, |
|---|
| | | rd2ListD1, |
|---|
| | | jFList, |
|---|
| | | fpHeader, |
|---|
| | | rd2ListA2, |
|---|
| | | rd2ListB2, |
|---|
| | | rd2ListC2, |
|---|
| | | rd2ListD2, |
|---|
| | | rd2ListA3, |
|---|
| | | rd2ListB3, |
|---|
| | | rd2ListC3, |
|---|
| | | rd2ListD3, |
|---|
| | | eloList, |
|---|
| | | eloName, |
|---|
| | | labelName, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .header_nox2 { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | #divcss p { |
|---|
| | | font-size: 20px; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>æ£ç½å·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="fpData" |
|---|
| | | :tableHeader="fpHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { jianguanVoLast, save } from "@/api/JianGuan"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const fpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºåï¼å计ï¼", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "lougaiNum", |
|---|
| | | label: "æ¼ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louguanNum", |
|---|
| | | label: "æ¼ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "baokouNum", |
|---|
| | | label: "çå£", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiahanNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "bieguanNum", |
|---|
| | | label: "çªç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shijian1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jitouhao", |
|---|
| | | label: "æ£æµæºå¤´å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zhuangtai", |
|---|
| | | label: "æ¯å¦æ£å¸¸", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "lougaiNum", |
|---|
| | | label: "æ¼ç", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louguanNum", |
|---|
| | | label: "æ¼ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "baokouNum", |
|---|
| | | label: "çå£", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | , |
|---|
| | | { |
|---|
| | | prop: "jiahanNum", |
|---|
| | | label: "åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bieguanNum", |
|---|
| | | label: "çªç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | jianguanZhiliangRdList: {}, |
|---|
| | | feipinJianguan: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let fpData = ref([]); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "æ£ç½è´¨ééªè¯è®°å½", |
|---|
| | | b3: "ç产åºå", |
|---|
| | | b4: "è´¨éè®°å½", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await jianguanVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | headData.head.date = headData.head.reportTime; |
|---|
| | | hanjiRdData.jianguanZhiliangRdList = data.data.jianguanZhiliangRdList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...data.data.feipinJianguan, |
|---|
| | | t1: SClist, |
|---|
| | | }; |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.jianguanZhiliangRdList; |
|---|
| | | fpData.value = [data.data.feipinJianguan]; |
|---|
| | | // console.log(SClist); |
|---|
| | | |
|---|
| | | SClist.value.filter((item) => { |
|---|
| | | if (item != null) item.shijian1 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | jianguanZhiliangRdList: SClist.value, |
|---|
| | | feipinJianguan: fpData.value[0], |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "æ£ç½å·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("jg.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "æ£ç½å·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | fpHeader, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | fpData, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>éç½æºå·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="rdList" |
|---|
| | | :tableHeader="rdHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="ytfpData" |
|---|
| | | :tableHeader="ytfpHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="hjfpData" |
|---|
| | | :tableHeader="hjfpHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zlList" |
|---|
| | | :tableHeader="zlHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="flList" |
|---|
| | | :tableHeader="flHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { jiguanVoLast, save } from "@/api/JiGuan"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const flHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "name", |
|---|
| | | label: "å称", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "num", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fuliaoGood", |
|---|
| | | label: "åæ ¼", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fuliaoBad", |
|---|
| | | label: "ä¸åæ ¼", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fuliaoSm", |
|---|
| | | label: "ä¸åæ ¼è¯´æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const zlHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "rdTime1", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waiguanRy", |
|---|
| | | label: "å¤è§äººå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guanneiJyy", |
|---|
| | | label: "ç½å
æ£éªå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiguanRy", |
|---|
| | | label: "éç½äººå", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianJg", |
|---|
| | | label: "æ½æ£ç»æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "choujianJgzt", |
|---|
| | | label: "æ½æ£ç¶æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "wenti", |
|---|
| | | label: "主è¦è´¨éé®é¢", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const ytfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "å°éåºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chongyingNum", |
|---|
| | | label: "éå°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zazhidianNum", |
|---|
| | | label: "æè´¨ç¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiyinseNum", |
|---|
| | | label: "å
å°è²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "moranNum", |
|---|
| | | label: "墨æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sechaNum", |
|---|
| | | label: "è²å·®", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "neiwaitucashangNum", |
|---|
| | | label: "å
å¤æ¶æ¦ä¼¤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "neiwaituYwNum", |
|---|
| | | label: "å
å¤æ¶æ²¹æ±¡", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "louyinNum", |
|---|
| | | label: "æ¼å°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gaiyahenNum", |
|---|
| | | label: "çåç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gaijianjiaoNum", |
|---|
| | | label: "çæº
ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "zanggaiNum", |
|---|
| | | label: "èç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sutiehexianNum", |
|---|
| | | label: "ç´ éé»çº¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const hjfpHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "total", |
|---|
| | | label: "ç产åºå(æ»è®¡)", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianxieNum", |
|---|
| | | label: "åªæ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hanjiebuliangNum", |
|---|
| | | label: "çæ¥ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "waitubuliangNum", |
|---|
| | | label: "å¤æ¶ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gunjinBlNum", |
|---|
| | | label: "æ»çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "fengkouBlNum", |
|---|
| | | label: "å°å£ä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bieguanNum", |
|---|
| | | label: "çªç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "youguanNum", |
|---|
| | | label: "æ²¹ç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zangguanNum", |
|---|
| | | label: "èç½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shiyanFpNum", |
|---|
| | | label: "å®éªåºå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "huashangNum", |
|---|
| | | label: "å伤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "hongkaoBsNum", |
|---|
| | | label: "çç¤åè²", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "suojinBlNum", |
|---|
| | | label: "缩çä¸è¯", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shengchanTime1", |
|---|
| | | label: "ç产æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fuliaoCjTime", |
|---|
| | | label: "è¾
æå家/æ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shengchanPh", |
|---|
| | | label: "ç产æ¹å·/å
å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "num", |
|---|
| | | label: "æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chanpinBh", |
|---|
| | | label: "ç产产åæ¿å·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shengchanBs", |
|---|
| | | label: "ç产å
æ°", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const rdHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jiaobanFs", |
|---|
| | | label: "å
è£
æ¹å¼", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiebanSy", |
|---|
| | | label: "æ¥çå©ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jiaobanSy", |
|---|
| | | label: "交çå©ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | jiguanRd2List: {}, |
|---|
| | | feipinYintieList: {}, |
|---|
| | | feipinJiguanList: {}, |
|---|
| | | jiguanZhiliangRdList: {}, |
|---|
| | | jiguanFuliaoRdList: {}, |
|---|
| | | jiguanRd: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ytfpData = ref([]); |
|---|
| | | let hjfpData = ref([]); |
|---|
| | | let zlList = ref([]); |
|---|
| | | let flList = ref([]); |
|---|
| | | let rdList = ref([]); |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "åºåç»è®¡", |
|---|
| | | b3: "è´¨éè®°å½", |
|---|
| | | b4: "è¾
ææ£æ¥è®°å½", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await jiguanVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | hanjiRdData.jiguanRd2List = data.data.jiguanRd2List; |
|---|
| | | console.log("jiguan....", data); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | |
|---|
| | | ...data.data.jiguanRd, |
|---|
| | | t1: SClist, |
|---|
| | | t2: ytfpData, |
|---|
| | | t3: hjfpData, |
|---|
| | | t4: zlList, |
|---|
| | | t5: flList, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.jiguanRd2List; |
|---|
| | | hjfpData.value = data.data.feipinJiguanList; |
|---|
| | | ytfpData.value = data.data.feipinYintieList; |
|---|
| | | zlList.value = data.data.jiguanZhiliangRdList; |
|---|
| | | flList.value = data.data.jiguanFuliaoRdList; |
|---|
| | | rdList.value = [data.data.jiguanRd]; |
|---|
| | | |
|---|
| | | SClist.value.filter((item) => { |
|---|
| | | if (item != null) |
|---|
| | | item.shengchanTime1 = item.shengchanTime.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | zlList.value.filter((item) => { |
|---|
| | | if (item != null && item.rdTime != null) |
|---|
| | | item.rdTime1 = item.rdTime.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | jiguanRd2List: SClist.value, |
|---|
| | | feipinYintieList: ytfpData.value, |
|---|
| | | feipinJiguanList: hjfpData.value, |
|---|
| | | jiguanZhiliangRdList: zlList.value, |
|---|
| | | jiguanFuliaoRdList: flList.value, |
|---|
| | | jiguanRd: rdList.value[0], |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "éç½æºå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("jiguan2.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "éç½æºå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | ytfpHeader, |
|---|
| | | hjfpHeader, |
|---|
| | | zlHeader, |
|---|
| | | flHeader, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ytfpData, |
|---|
| | | hjfpData, |
|---|
| | | zlList, |
|---|
| | | flList, |
|---|
| | | rdList, |
|---|
| | | rdHeader, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç产åæºè®°å½è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="SClist" |
|---|
| | | :tableHeader="flHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { last, save } from "@/api/SCTJapi"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const flHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jitai", |
|---|
| | | label: "æºå°", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "tingjiTime", |
|---|
| | | label: "åæºæ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guzhangYy", |
|---|
| | | label: "æ
éåå ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "tiaozhengFf", |
|---|
| | | label: "è°æ´æ¹æ³", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianceItem", |
|---|
| | | label: "æ£æ¥é¡¹ç®", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianceNum", |
|---|
| | | label: "æ£æ¥æ°é", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaijiTime", |
|---|
| | | label: "å¼æºæ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianceJg", |
|---|
| | | label: "æ£æ¥ç»æ", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "querenName", |
|---|
| | | label: "确认人", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "tiaozhengTime", |
|---|
| | | label: "è°æ´æ¶é¿", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "chuliName", |
|---|
| | | label: "å¤ç人", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "åºåç»è®¡", |
|---|
| | | b3: "è´¨éè®°å½", |
|---|
| | | b4: "è¾
ææ£æ¥è®°å½", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await last(); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | |
|---|
| | | console.log("jiguan....", data); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.shengchanTjList; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | shengchanTjList: SClist.value, |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "éç½æºå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("jiguan2.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "éç½æºå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | flHeader, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | exportWord, |
|---|
| | | labelName, |
|---|
| | | editable, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="login" :style="bg"> |
|---|
| | | <div class="form-wrap"> |
|---|
| | | <ul class="menu-tab"> |
|---|
| | | <li> |
|---|
| | | <h2> |
|---|
| | | {{ "奥çé MESS 管çå¹³å°" }} |
|---|
| | | </h2> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | <el-form ref="account_form" :model="data.form" class="login-form"> |
|---|
| | | <el-form-item prop="username"> |
|---|
| | | <label class="form-label">ç¨æ·å</label> |
|---|
| | | <el-input ref="usernameRef" v-model="data.form.username"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item prop="password"> |
|---|
| | | <label class="form-label">å¯ç </label> |
|---|
| | | <el-input type="password" v-model="data.form.password"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <!-- <el-form-item prop="yzm"> |
|---|
| | | <label class="form-label">éªè¯ç </label> |
|---|
| | | <el-input v-model="data.form.yzm"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item prop="yzm"> |
|---|
| | | <img |
|---|
| | | style="margin-top: 2px; max-width: initial" |
|---|
| | | :src="randCodeData.randCodeImage" |
|---|
| | | /> |
|---|
| | | </el-form-item> --> |
|---|
| | | |
|---|
| | | <el-form-item> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | @click="submitForm" |
|---|
| | | :loading="data.submit_button_loading" |
|---|
| | | class="el-button-block" |
|---|
| | | > |
|---|
| | | {{ "ç»å½" }} |
|---|
| | | </el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { |
|---|
| | | reactive, |
|---|
| | | ref, |
|---|
| | | onBeforeUnmount, |
|---|
| | | getCurrentInstance, |
|---|
| | | onMounted, |
|---|
| | | } from "vue"; |
|---|
| | | import { useStore } from "vuex"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | |
|---|
| | | import { |
|---|
| | | validate_email, |
|---|
| | | validate_password, |
|---|
| | | validate_code, |
|---|
| | | } from "../../utils/validate"; |
|---|
| | | // sha1 |
|---|
| | | import sha1 from "js-sha1"; |
|---|
| | | // API |
|---|
| | | // import { GetCode } from "../../api/common"; |
|---|
| | | import { Register, Login, yzm } from "../../api/account"; |
|---|
| | | export default { |
|---|
| | | mounted() { |
|---|
| | | // 页é¢æ¸²æå®ææ¶èªå¨èç¦å°ç¨æ·åè¾å
¥æ¡ï¼ref="unameInput" |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.$refs.usernameRef.focus(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | bg: { |
|---|
| | | backgroundImage: |
|---|
| | | "url(" + require("../../assets/images/login_bk.jpg") + ")", |
|---|
| | | backgroundRepeat: "no-repeat", |
|---|
| | | // backgroundSize: "cover", |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | name: "Login", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const randCodeData = reactive({ |
|---|
| | | randCodeImage: "", |
|---|
| | | requestCodeSuccess: false, |
|---|
| | | checkKey: null, |
|---|
| | | }); |
|---|
| | | onMounted(() => { |
|---|
| | | let getnowTime = new Date().getTime(); |
|---|
| | | randCodeData.checkKey = getnowTime; |
|---|
| | | yzm(getnowTime).then((res) => { |
|---|
| | | randCodeData.randCodeImage = res.result; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | const usernameRef = ref(); |
|---|
| | | const instance = getCurrentInstance(); |
|---|
| | | // è·åå®ä¾ä¸ä¸æ |
|---|
| | | const { proxy } = getCurrentInstance(); |
|---|
| | | // store |
|---|
| | | const store = useStore(); |
|---|
| | | // router |
|---|
| | | const rotuer = useRouter(); |
|---|
| | | // ç¨æ·åæ ¡éª |
|---|
| | | const validate_name_rules = (rule, value, callback) => { |
|---|
| | | let regEmail = validate_email(value); |
|---|
| | | if (value === "") { |
|---|
| | | callback(new Error("请è¾å
¥é®ç®±")); |
|---|
| | | } else if (!regEmail) { |
|---|
| | | callback(new Error("é®ç®±æ ¼å¼ä¸æ£ç¡®")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | const validate_password_rules = (rule, value, callback) => { |
|---|
| | | let regPassword = true; //validate_password(value); |
|---|
| | | // è·åâ确认å¯ç â |
|---|
| | | const passwordsValue = data.form.passwords; |
|---|
| | | if (value === "") { |
|---|
| | | callback(new Error("请è¾å
¥å¯ç ")); |
|---|
| | | } else if (!regPassword) { |
|---|
| | | callback(new Error("请è¾å
¥>=6并ä¸<=20ä½çå¯ç ï¼å
å«æ°åãåæ¯")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | // æ ¡éªç¡®è®¤å¯ç |
|---|
| | | const validate_passwords_rules = (rule, value, callback) => { |
|---|
| | | // å¦ææ¯ç»å½ï¼ä¸éè¦æ ¡éªç¡®è®¤å¯ç ï¼é»è®¤éè¿ |
|---|
| | | if (data.current_menu === "login") { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | let regPassword = validate_password(value); |
|---|
| | | // è·åâå¯ç â |
|---|
| | | const passwordValue = data.form.password; |
|---|
| | | if (value === "") { |
|---|
| | | callback(new Error("请è¾å
¥å¯ç ")); |
|---|
| | | } else if (!regPassword) { |
|---|
| | | callback(new Error("请è¾å
¥>=6并ä¸<=20ä½çå¯ç ï¼å
å«æ°åãåæ¯")); |
|---|
| | | } else if (passwordValue && passwordValue !== value) { |
|---|
| | | callback(new Error("两次å¯ç ä¸ä¸è´")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | const validate_code_rules = (rule, value, callback) => { |
|---|
| | | let regCode = validate_code(value); |
|---|
| | | if (value === "") { |
|---|
| | | callback(new Error("请è¾å
¥éªè¯ç ")); |
|---|
| | | } else if (!regCode) { |
|---|
| | | callback(new Error("请è¾å
¥6ä½çéªè¯ç ")); |
|---|
| | | } else { |
|---|
| | | callback(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const data = reactive({ |
|---|
| | | form: { |
|---|
| | | username: "", // ç¨æ·å |
|---|
| | | password: "", // å¯ç |
|---|
| | | passwords: "", // 确认å¯ç |
|---|
| | | code: "", // éªè¯ç |
|---|
| | | }, |
|---|
| | | form_rules: { |
|---|
| | | // username: [{ validator: validate_name_rules, trigger: "change" }], |
|---|
| | | password: [{ validator: validate_password_rules, trigger: "change" }], |
|---|
| | | passwords: [{ validator: validate_passwords_rules, trigger: "change" }], |
|---|
| | | code: [{ validator: validate_code_rules, trigger: "change" }], |
|---|
| | | }, |
|---|
| | | tab_menu: [ |
|---|
| | | { type: "login", label: "ç»å½" }, |
|---|
| | | { type: "register", label: "注å" }, |
|---|
| | | ], |
|---|
| | | current_menu: "login", |
|---|
| | | /** |
|---|
| | | * è·åéªè¯ç æé®äº¤äº |
|---|
| | | */ |
|---|
| | | code_button_disabled: false, |
|---|
| | | code_button_loading: false, |
|---|
| | | code_button_text: "è·åéªè¯ç ", |
|---|
| | | code_button_timer: null, |
|---|
| | | // æ交æé® |
|---|
| | | submit_button_disabled: true, |
|---|
| | | loading: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // è·åéªè¯ç |
|---|
| | | const handlerGetCode = () => { |
|---|
| | | const username = data.form.username; |
|---|
| | | const password = data.form.password; |
|---|
| | | const passwords = data.form.passwords; |
|---|
| | | // æ ¡éªç¨æ·å |
|---|
| | | if (username === null) { |
|---|
| | | proxy.$message.error({ |
|---|
| | | message: "ç¨æ·åä¸è½ä¸ºç©º æ æ ¼å¼ä¸æ£ç¡®", |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // æ ¡éªå¯ç |
|---|
| | | if (!validate_password(password)) { |
|---|
| | | proxy.$message({ |
|---|
| | | message: "å¯ç ä¸è½ä¸ºç©º æ æ ¼å¼ä¸æ£ç¡®", |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | // å¤æé ç»å½ æ¶ï¼æ ¡éªä¸¤æ¬¡å¯ç |
|---|
| | | if (data.current_menu === "register" && password !== passwords) { |
|---|
| | | proxy.$message({ |
|---|
| | | message: "两次å¯ç ä¸ä¸è´", |
|---|
| | | type: "error", |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è·åéªè¯ç æ¥å£ |
|---|
| | | const requestData = { |
|---|
| | | username: data.form.username, |
|---|
| | | module: data.current_menu, |
|---|
| | | }; |
|---|
| | | data.code_button_loading = true; |
|---|
| | | data.code_button_text = "åéä¸"; |
|---|
| | | // GetCode(requestData) |
|---|
| | | // .then((response) => { |
|---|
| | | // const resData = response; |
|---|
| | | // // æ¿æ´»æ交æé® |
|---|
| | | // data.submit_button_disabled = false; |
|---|
| | | // // ç¨æ·ååå¨ |
|---|
| | | // if (resData.resCode === 1024) { |
|---|
| | | // proxy.$message.error(resData.message); |
|---|
| | | // return false; |
|---|
| | | // } |
|---|
| | | // // æå Elementui æ示 |
|---|
| | | // proxy.$message({ |
|---|
| | | // message: resData.message, |
|---|
| | | // type: "success", |
|---|
| | | // }); |
|---|
| | | // // æ§è¡åè®¡æ¶ |
|---|
| | | // countdown(); |
|---|
| | | // }) |
|---|
| | | // .catch((error) => { |
|---|
| | | // data.code_button_loading = false; |
|---|
| | | // data.code_button_text = "è·åéªè¯ç "; |
|---|
| | | // }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** åè®¡æ¶ */ |
|---|
| | | const countdown = (time) => { |
|---|
| | | if (time && typeof time !== "number") { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | let second = time || 60; // é»è®¤æ¶é´ |
|---|
| | | data.code_button_loading = false; // åæ¶å è½½ |
|---|
| | | data.code_button_disabled = true; // ç¦ç¨æé® |
|---|
| | | data.code_button_text = `å计è¿${second}ç§`; // æé®ææ¬ |
|---|
| | | // å¤ææ¯å¦åå¨å®æ¶å¨ï¼åå¨åå
æ¸
é¤ |
|---|
| | | if (data.code_button_timer) { |
|---|
| | | clearInterval(data.code_button_timer); |
|---|
| | | } |
|---|
| | | // å¼å¯å®æ¶å¨ |
|---|
| | | data.code_button_timer = setInterval(() => { |
|---|
| | | second--; |
|---|
| | | data.code_button_text = `å计è¿${second}ç§`; // æé®ææ¬ |
|---|
| | | if (second <= 0) { |
|---|
| | | data.code_button_text = `éæ°è·å`; // æé®ææ¬ |
|---|
| | | data.code_button_disabled = false; // å¯ç¨æé® |
|---|
| | | clearInterval(data.code_button_timer); // æ¸
é¤åè®¡æ¶ |
|---|
| | | } |
|---|
| | | }, 1000); |
|---|
| | | }; |
|---|
| | | /** 表åæ交 */ |
|---|
| | | const account_form = ref(null); |
|---|
| | | const submitForm = (formName) => { |
|---|
| | | account_form.value.validate((valid) => { |
|---|
| | | login(); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | /** 注å */ |
|---|
| | | const register = () => { |
|---|
| | | const requestData = { |
|---|
| | | username: data.form.username, |
|---|
| | | password: sha1(data.form.password), |
|---|
| | | code: data.form.code, |
|---|
| | | create: 1, |
|---|
| | | }; |
|---|
| | | data.submit_button_loading = true; |
|---|
| | | Register(requestData) |
|---|
| | | .then((response) => { |
|---|
| | | proxy.$message({ |
|---|
| | | message: response.message, |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | // reset(); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | data.submit_button_loading = false; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | /** ç»å½ */ |
|---|
| | | const login = () => { |
|---|
| | | // reset(); |
|---|
| | | const requestData = { |
|---|
| | | username: data.form.username, |
|---|
| | | password: data.form.password, |
|---|
| | | checkKey: randCodeData.checkKey, |
|---|
| | | captcha: data.form.yzm, |
|---|
| | | }; |
|---|
| | | data.submit_button_loading = true; |
|---|
| | | store |
|---|
| | | .dispatch("app/loginAction", requestData) |
|---|
| | | .then((response) => { |
|---|
| | | data.submit_button_loading = false; |
|---|
| | | proxy.$message({ |
|---|
| | | message: "ç»å½æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //è·¯ç±è·³è½¬ |
|---|
| | | rotuer.push({ path: "/history" }); |
|---|
| | | reset(); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | // proxy.$message({ |
|---|
| | | // message: "ç»å½å¤±è´¥", |
|---|
| | | // type: "error", |
|---|
| | | // }); |
|---|
| | | data.submit_button_loading = false; |
|---|
| | | console.log("失败"); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** éç½® */ |
|---|
| | | const reset = () => { |
|---|
| | | // é置表å |
|---|
| | | proxy.$refs.form.resetFields(); |
|---|
| | | // ååç»å½æ¨¡å¼ |
|---|
| | | data.current_menu = "login"; |
|---|
| | | // æ¸
é¤å®æ¶å¨ |
|---|
| | | data.code_button_timer && clearInterval(data.code_button_timer); |
|---|
| | | // è·åéªè¯ç éç½®ææ¬ |
|---|
| | | data.code_button_text = "è·åéªè¯ç "; |
|---|
| | | // è·åéªè¯ç æ¿æ´» |
|---|
| | | data.code_button_disabled = false; |
|---|
| | | // ç¦ç¨æ交æé® |
|---|
| | | data.submit_button_disabled = true; |
|---|
| | | // åæ¶æ交æé®å è½½ |
|---|
| | | data.submit_button_loading = false; |
|---|
| | | }; |
|---|
| | | // ç»ä»¶éæ¯ä¹å - çå½å¨æ |
|---|
| | | onBeforeUnmount(() => { |
|---|
| | | clearInterval(data.code_button_timer); // æ¸
é¤åè®¡æ¶ |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | data, |
|---|
| | | handlerGetCode, |
|---|
| | | submitForm, |
|---|
| | | randCodeData, |
|---|
| | | account_form, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | $bg: #2d3a4b; |
|---|
| | | $dark_gray: #889aa4; |
|---|
| | | $light_gray: #eee; |
|---|
| | | $cursor: #fff; |
|---|
| | | #login { |
|---|
| | | //height: 200vh; // 设置é«åº¦ï¼å±
äºæµè§å¨å¯è§åºé«åº¦ |
|---|
| | | background-color: #344a5f; // 设置èæ¯é¢è² |
|---|
| | | width: 100vw; //大å°è®¾ç½®ä¸º100% |
|---|
| | | height: 100vh; //大å°è®¾ç½®ä¸º100% |
|---|
| | | position: relative; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .form-wrap { |
|---|
| | | width: 320px; |
|---|
| | | position: absolute; |
|---|
| | | left: 50%; |
|---|
| | | top: 30%; |
|---|
| | | transform: translateX(-50%); |
|---|
| | | background-color: rgba(0, 0, 0, 0.3); |
|---|
| | | border-radius: 20px; |
|---|
| | | padding: 40px; |
|---|
| | | // padding-top: 200px; //ä¸å
è¾¹è· |
|---|
| | | // margin: auto; // åå
ç´ æ°´å¹³å±
ä¸ |
|---|
| | | } |
|---|
| | | .menu-tab { |
|---|
| | | text-align: center; |
|---|
| | | li { |
|---|
| | | display: inline-block; |
|---|
| | | padding: 10px 24px; |
|---|
| | | margin: 0 10px; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 24px; |
|---|
| | | border-radius: 5px; |
|---|
| | | cursor: pointer; |
|---|
| | | &.current { |
|---|
| | | background-color: rgba(0, 0, 0, 0.1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .form-label { |
|---|
| | | display: block; // 转为åå
ç´ |
|---|
| | | color: #fff; // 设置åä½é¢è² |
|---|
| | | font-size: 14px; // 设置åä½å¤§å° |
|---|
| | | } |
|---|
| | | .login-form { |
|---|
| | | // position: relative; |
|---|
| | | // width: 520px; |
|---|
| | | // max-width: 100%; |
|---|
| | | |
|---|
| | | :deep(.el-form-item) { |
|---|
| | | // border: 1px solid rgba(255, 255, 255, 0.1); |
|---|
| | | |
|---|
| | | // border-radius: 5px; |
|---|
| | | color: #454545; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-input) { |
|---|
| | | // display: inline-block; |
|---|
| | | // height: 47px; |
|---|
| | | // width: 85%; |
|---|
| | | background: rgba(0, 0, 0, 0.1); |
|---|
| | | .el-input__wrapper { |
|---|
| | | background: transparent; |
|---|
| | | box-shadow: 0 0 0 0; |
|---|
| | | border: 0px; |
|---|
| | | -webkit-appearance: none; |
|---|
| | | |
|---|
| | | color: $light_gray; |
|---|
| | | // height: 47px; |
|---|
| | | caret-color: $cursor; |
|---|
| | | input { |
|---|
| | | color: $light_gray; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // .login-button { |
|---|
| | | // width: 100%; |
|---|
| | | // box-sizing: border-box; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!-- <template> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç产计åæ§è¡å</h3> |
|---|
| | | |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader" :labelName="labelName.b1" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader2" :labelName="labelName.b1" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader3" :labelName="labelName.b1" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader4" :labelName="labelName.b1" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan2" :tableHeader="pplan2Header" :labelName="labelName.b1" :editable="editable"></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> --> |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button |
|---|
| | | type="primary" |
|---|
| | | circle |
|---|
| | | v-show="!editable" |
|---|
| | | @click="editable = !editable" |
|---|
| | | >ç¼è¾</el-button |
|---|
| | | > |
|---|
| | | <el-button type="primary" v-show="editable" @click="saveData" |
|---|
| | | >ç¡®å®</el-button |
|---|
| | | > |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç产计åæ§è¡å</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>å线</span> |
|---|
| | | </div> --> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader2" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader3" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan" :tableHeader="pplanHeader4" :editable="editable"></HJTABLE> |
|---|
| | | <HJTABLE :SClist="pplan2" :tableHeader="pplan2Header" :editable="editable"></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: "false", |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { b3VoLast, b3save } from "@/api/b"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const pplanHeader = reactive([{ prop: "shengcx", label: "线å«", editable: "false", type: "text" }, { prop: "cpmc", label: "产åå称", editable: "false", type: "text" }, { prop: "cpmc_Model", label: "产åç½å", editable: "false", type: "text" }, { prop: "gsbh", label: "ç½èº«çå·", editable: "false", type: "text" }, { prop: "scddh", label: "ç产订å", editable: "false", type: "text" }, { prop: "ddsl", label: "订åæ°é", editable: "false", type: "text" }, { prop: "bzfs", label: "å
è£
æ¹å¼", editable: "false", type: "text" }]); |
|---|
| | | const pplanHeader2 = reactive([{ prop: "zfg", label: "èªå°ç", editable: "false", type: "text" }, { prop: "phg", label: "é
è´§ç", editable: "false", type: "text" }, { prop: "bz", label: "å¤æ³¨", editable: "false", type: "text" }, { prop: "xsdd", label: "éå®è®¢å", editable: "false", type: "text" }, { prop: "kh", label: "客æ·", editable: "false", type: "text" }, { prop: "jhdd", label: "交货å°ç¹", editable: "false", type: "text" }]); |
|---|
| | | const pplanHeader3 = reactive([{ prop: "clgg", label: "ææè§æ ¼", editable: "false", type: "text" }, { prop: "kl", label: "å¼æ", editable: "false", type: "text" }, { prop: "jypbh", label: "æ£éªæ¹ç¼å·", editable: "false", type: "text" }, { prop: "tzrq", label: "éç¥æ¥æ", editable: "false", type: "text" }, { prop: "scrq", label: "ç产æ¥æ", editable: "false", type: "text" }, { prop: "wcrq", label: "å®ææ¥æ", editable: "false", type: "text" }, { prop: "zzgy", label: "å¶é å·¥èº", editable: "false", type: "text" }, { prop: "gydh", label: "å·¥èºåå·", editable: "false", type: "text" }, { prop: "slkz", label: "æ°éæ§å¶", editable: "false", type: "text" }, { prop: "mbrcl", label: "ç®æ æ¥äº§é", editable: "false", type: "text" }, { prop: "bh", label: "çå·", editable: "false", type: "text" }]); |
|---|
| | | const pplanHeader4 = reactive([{ prop: "wlms", label: "ç©ææè¿°", editable: "false", type: "text" }, { prop: "cpgg", label: "产åè§æ ¼", editable: "false", type: "text" }, { prop: "gjnj", label: "é¢å·å
å¾", editable: "false", type: "text" }, { prop: "bmtl", label: "表é¢æ¶æ", editable: "false", type: "text" }, { prop: "kjfs", label: "å¼å·æ¹å¼", editable: "false", type: "text" }, { prop: "dbzs", label: "åå
å¼ æ°", editable: "false", type: "text" }, { prop: "pcgg", label: "çæè§æ ¼", editable: "false", type: "text" }, { prop: "bsxs", label: "æ 示形å¼", editable: "false", type: "text" }, { prop: "sfys", label: "æ¯å¦å°å·", editable: "false", type: "text" }, { prop: "yt", label: "ç¨é", editable: "false", type: "text" }, { prop: "bianzhi", label: "ç¼å¶", editable: "false", type: "text" }]); |
|---|
| | | |
|---|
| | | const pplan2Header = reactive([{ prop: "xh", label: "åºå·", editable: "false", type: "text" }, { prop: "zjwlbh", label: "ç»ä»¶ç©æç¼ç ", editable: "false", type: "text" }, { prop: "zjwlms", label: "ç»ä»¶ç©ææè¿°", editable: "false", type: "text" }, { prop: "xqsl", label: "éæ±æ°é", editable: "false", type: "text" }, { prop: "dw", label: "åä½", editable: "false", type: "text" }, { prop: "gys", label: "ä¾åºå", editable: "false", type: "text" }]); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "åºåç»è®¡", |
|---|
| | | b3: "ç产åºå", |
|---|
| | | b4: "è´¨éè®°å½", |
|---|
| | | }; |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | scjhList: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ssList = ref([]); |
|---|
| | | let pplan = ref([]); |
|---|
| | | let pplan2 = ref([]); |
|---|
| | | const submitForm = () => { }; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await b3VoLast(); |
|---|
| | | console.log("ç产计åããã", data.data); |
|---|
| | | |
|---|
| | | headData.head = data.data.head; |
|---|
| | | pplan.value = [data.data.pplan]; |
|---|
| | | pplan2.value = data.data.pplan2List |
|---|
| | | console.log('...pplan',pplan) |
|---|
| | | // hjData.value = { |
|---|
| | | // ...headData.head, |
|---|
| | | // ...hanjiRdData.scjhList, |
|---|
| | | // }; |
|---|
| | | |
|---|
| | | SClist.value = data.data.pplan2List; |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | scjhList: SClist.value, |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | // console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: "false", |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | // console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => { }); |
|---|
| | | return { |
|---|
| | | pplan, |
|---|
| | | pplan2, |
|---|
| | | labelName, |
|---|
| | | b3VoLast, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | pplanHeader, |
|---|
| | | pplanHeader2, |
|---|
| | | pplanHeader3, |
|---|
| | | pplanHeader4, |
|---|
| | | pplan2Header, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ssList, |
|---|
| | | exportWord, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç产计å表</h3> |
|---|
| | | |
|---|
| | | <el-table |
|---|
| | | :data="SClist" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" |
|---|
| | | > |
|---|
| | | <el-table-column label="ç产计å表"> |
|---|
| | | <!-- <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > --> |
|---|
| | | <template v-for="(item, index) in tableHeader"> |
|---|
| | | <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { b1VoLast, b2VoLast } from "@/api/b"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | |
|---|
| | | setup(props) { |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "xianbie", |
|---|
| | | label: "线å«", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "dd_shijian", |
|---|
| | | label: "ä¸è®¢åæ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "shijian", |
|---|
| | | label: "æ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gx", |
|---|
| | | label: "ç½å", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "cp", |
|---|
| | | label: "产åå称", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jhcl", |
|---|
| | | label: "计å产é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "wcl", |
|---|
| | | label: "å®æé", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "dd_cy", |
|---|
| | | label: "订åå·®å¼", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fhhl", |
|---|
| | | label: "é£é¹¤è´§é", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jhrq", |
|---|
| | | label: "交货æ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "fhrq", |
|---|
| | | label: "åè´§æ¥æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bh", |
|---|
| | | label: "çå·", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "gz", |
|---|
| | | label: "çå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "state", |
|---|
| | | label: "ç¶æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bz", |
|---|
| | | label: "å¤æ³¨", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | scjhList: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ssList = ref([]); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await b1VoLast(); |
|---|
| | | console.log("ç产计åããã", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | hanjiRdData.scjhList = data.data.scjhList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...hanjiRdData.scjhList, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.scjhList; |
|---|
| | | |
|---|
| | | // console.log(SClist); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | scjhList: SClist.value, |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | // console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | // console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | b1VoLast, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ssList, |
|---|
| | | exportWord, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>设å¤æ£ä¿®ä¿å
»è®¡å表</h3> |
|---|
| | | |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <el-table |
|---|
| | | :data="SClist" |
|---|
| | | style="width: 100%" |
|---|
| | | :header-cell-style="{ 'text-align': 'center', fontSize: '20px' }" |
|---|
| | | > |
|---|
| | | <el-table-column label="设å¤æ£ä¿®ä¿å
»è®¡å表"> |
|---|
| | | <!-- <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > --> |
|---|
| | | <template v-for="(item, index) in tableHeader"> |
|---|
| | | <el-table-column |
|---|
| | | :prop="item.prop" |
|---|
| | | :label="item.label" |
|---|
| | | :key="index" |
|---|
| | | v-if="item" |
|---|
| | | > |
|---|
| | | </el-table-column> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { b1VoLast, b2VoLast } from "@/api/b"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | |
|---|
| | | setup(props) { |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "shebei", |
|---|
| | | label: "设å¤", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "shijian", |
|---|
| | | label: "æ¶é´", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jxnr", |
|---|
| | | label: "主è¦æ£ä¿®å
容", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jxxs", |
|---|
| | | label: "æ£ä¿®å°æ¶", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jxry", |
|---|
| | | label: "æ£ä¿®äººå", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "zgqr", |
|---|
| | | label: "主管确认", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "state", |
|---|
| | | label: "ç¶æ", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "bz", |
|---|
| | | label: "å¤æ³¨", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | let hanjiRdData = reactive({ |
|---|
| | | sbjxList: {}, |
|---|
| | | }); |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let ssList = ref([]); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await b2VoLast(); |
|---|
| | | console.log("ç»´ä¿®ããã", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | hanjiRdData.sbjxList = data.data.sbjxList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...hanjiRdData.sbjxList, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.sbjxList; |
|---|
| | | |
|---|
| | | // console.log(SClist); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | sbjxList: SClist.value, |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | // console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | // console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | b2VoLast, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | ssList, |
|---|
| | | exportWord, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>综åä¿¡æ¯</h3> |
|---|
| | | |
|---|
| | | |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zhxxBase" |
|---|
| | | :tableHeader="tableHeader" |
|---|
| | | |
|---|
| | | :editable="editable" |
|---|
| | | > </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zhxxDj1" |
|---|
| | | :tableHeader="zhxxDj1Header" |
|---|
| | | |
|---|
| | | :editable="editable" |
|---|
| | | > </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zhxxDj2" |
|---|
| | | :tableHeader="zhxxDj2Header" |
|---|
| | | |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zhxxFl" |
|---|
| | | :tableHeader="zhxxFlHeader" |
|---|
| | | |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { b4VoLast, b4Sava } from "@/api/b"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | |
|---|
| | | setup(props) { |
|---|
| | | const zhxxDj1Header = reactive([ |
|---|
| | | { prop: "bcp", label: "åæå", editable: false, type: "text" }, |
|---|
| | | { prop: "clrq", label: "å¤çæ¥æ", editable: false, type: "text" }, |
|---|
| | | { prop: "clrqz", label: "å¤çç¾å", editable: false, type: "text" }, |
|---|
| | | { prop: "djbh", label: "å¾
æ£ç¼å·", editable: false, type: "text" }, |
|---|
| | | { prop: "djsl", label: "å¾
æ£æ°é", editable: false, type: "text" }, |
|---|
| | | { prop: "fjjl", label: "å¤æ£è®°å½", editable: false, type: "text" }, |
|---|
| | | { prop: "fpsl", label: "å¤æ£æ°é", editable: false, type: "text" }, |
|---|
| | | { prop: "gxx", label: "çä¿¡æ¯", editable: false, type: "text" }, |
|---|
| | | { prop: "jgpd", label: "ç»æå¤å®", editable: false, type: "text" }, |
|---|
| | | |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | const zhxxDj2Header = reactive([ |
|---|
| | | |
|---|
| | | { prop: "mcgg", label: "å称è§æ ¼", editable: false, type: "text" }, |
|---|
| | | { prop: "qxyy", label: "缺é·åå ", editable: false, type: "text" }, |
|---|
| | | { prop: "scpc", label: "ç产æ¹æ¬¡", editable: false, type: "text" }, |
|---|
| | | { prop: "txx", label: "éä¿¡æ¯", editable: false, type: "text" }, |
|---|
| | | { prop: "zhijian", label: "è´¨æ£", editable: false, type: "text" }, |
|---|
| | | { prop: "zjy", label: "è´¨æ£å", editable: false, type: "text" }, |
|---|
| | | { prop: "shengcx", label: "ç产线", editable: false, type: "text" }, |
|---|
| | | { prop: "ycl", label: "åææ", editable: false, type: "text" }, |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | const zhxxFlHeader = reactive([ |
|---|
| | | |
|---|
| | | { prop: "name", label: "è¾
æå称", editable: false, type: "text" }, |
|---|
| | | { prop: "num", label: "è¾
ææ°é", editable: false, type: "text" }, |
|---|
| | | { prop: "shengcx", label: "ç产线", editable: false, type: "text" }, |
|---|
| | | { prop: "txx", label: "éä¿¡æ¯", editable: false, type: "text" }, |
|---|
| | | { prop: "zhijian", label: "è´¨æ£", editable: false, type: "text" }, |
|---|
| | | { prop: "zjy", label: "è´¨æ£å", editable: false, type: "text" }, |
|---|
| | | { prop: "shegncx", label: "ç产线", editable: false, type: "text" }, |
|---|
| | | { prop: "ycl", label: "åææ", editable: false, type: "text" }, |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | const tableHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "cxzt", |
|---|
| | | label: "产线ç¶æ", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | prop: "dbfp", |
|---|
| | | label: "å½çåºåç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kdvHg", |
|---|
| | | label: "åæ ¼åç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kdvSj", |
|---|
| | | label: "æ¶é´å¼å¨ç", |
|---|
| | | editable: false, |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kdvSj", |
|---|
| | | label: "æ§è½å¼å¨ç", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "yueTotal", |
|---|
| | | label: "æç»è®¡", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | let zhxxBase = ref([]); |
|---|
| | | let zhxxDj1 = ref([]) |
|---|
| | | let zhxxDj2 = ref([]) |
|---|
| | | let zhxxFl = ref([]) |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await b4VoLast(); |
|---|
| | | console.log("ç产计åããã", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | zhxxBase.value = [data.data.zhxxBase]; |
|---|
| | | zhxxDj1.value = [data.data.zhxxDj]; |
|---|
| | | zhxxDj2.value = [data.data.zhxxDj]; |
|---|
| | | zhxxFl.value = data.data.zhxxFlList; |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // tableHeader.forEach(e=>{ |
|---|
| | | // // SClist.push({e.}) |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | SClist.value = data.data.scjhList; |
|---|
| | | |
|---|
| | | // console.log(SClist); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | |
|---|
| | | let data = { |
|---|
| | | scjhList: SClist.value, |
|---|
| | | |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | // console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "çæº/åéå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("hj.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | |
|---|
| | | // table: hanjiRdData.hanjiRd, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | // console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "çæº/åéå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | b4VoLast, |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | tableHeader, |
|---|
| | | zhxxFlHeader, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | SClist, |
|---|
| | | zhxxBase, |
|---|
| | | zhxxDj1, |
|---|
| | | zhxxDj2, |
|---|
| | | zhxxFl, |
|---|
| | | exportWord, |
|---|
| | | zhxxDj1Header, |
|---|
| | | zhxxDj2Header, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="">æ§å¶å°</div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { useStore } from 'vuex' |
|---|
| | | export default { |
|---|
| | | name: 'NewsIndex', |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(props){ |
|---|
| | | const store = useStore(); |
|---|
| | | store.dispatch("app/update_count"); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="block"> |
|---|
| | | <span class="leixing">ç±»å</span> |
|---|
| | | <el-select v-model="value" class="m-2" placeholder="Select" size="large"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | <span class="demonstration">æ¶é´</span> |
|---|
| | | <el-date-picker v-model="value" type="date" placeholder="Pick a day" |
|---|
| | | :shortcuts="shortcuts" :size="size" value-format="YYYY-MM-DD HH:mm:ss"/> |
|---|
| | | <el-button type="primary" icon="el-icon-search" @click="getListData()">æç´¢</el-button> |
|---|
| | | </div> --> |
|---|
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|---|
| | | <el-form-item label="ç±»å"> |
|---|
| | | <el-select v-model="item" class="m-2" clearable placeholder="Select"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="æ¶é´"> |
|---|
| | | <el-date-picker |
|---|
| | | v-model="value" |
|---|
| | | type="date" |
|---|
| | | placeholder="Pick a day" |
|---|
| | | :shortcuts="shortcuts" |
|---|
| | | value-format="YYYY-MM-DD HH:mm:ss" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" @click="getListData">Query</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <el-table :data="tableData" style="width: 100%"> |
|---|
| | | <el-table-column prop="reportTime1" label="æ¶é´"> </el-table-column> |
|---|
| | | <el-table-column prop="chanpin" label="产å" /> |
|---|
| | | <el-table-column prop="leixing1" label="ç±»å" /> |
|---|
| | | <el-table-column prop="shengcx" label="产线" /> |
|---|
| | | <el-table-column prop="banci" label="ç次" /> |
|---|
| | | <el-table-column prop="id" label="ç¼å·" /> |
|---|
| | | <el-table-column prop="createDate" label="ææ°æ¶é´" /> |
|---|
| | | <el-table-column prop="createdby" label="ä¸ä¼ 人" /> |
|---|
| | | <el-table-column label="æä½"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <el-button |
|---|
| | | size="small" |
|---|
| | | type="primary" |
|---|
| | | @click="handleEdit(scope.$index, scope.row)" |
|---|
| | | >详æ
</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="page"> |
|---|
| | | <el-pagination |
|---|
| | | background |
|---|
| | | layout="prev, pager, next" |
|---|
| | | :page-count="pageData.total" |
|---|
| | | :current-page="pageData.ListData.pageNo" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { headPage, leixList } from "@/api/head"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | export default { |
|---|
| | | name: "NewsIndex", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup() { |
|---|
| | | const router = useRouter(); |
|---|
| | | const value = ref(""); |
|---|
| | | const item = ref(""); |
|---|
| | | let tableData = ref([]); |
|---|
| | | const formLabelWidth = "140px"; |
|---|
| | | let options = ref([]); |
|---|
| | | let leixingMap = new Map(); |
|---|
| | | let pageData = reactive({ |
|---|
| | | ListData: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10, |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | }); |
|---|
| | | let value2 = ""; |
|---|
| | | |
|---|
| | | const shortcuts = [ |
|---|
| | | { |
|---|
| | | text: "ä»å¤©", |
|---|
| | | value: new Date(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: "æ¨å¤©", |
|---|
| | | value: () => { |
|---|
| | | const date = new Date(); |
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24); |
|---|
| | | return date; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: "ä¸å¨å", |
|---|
| | | value: () => { |
|---|
| | | const date = new Date(); |
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); |
|---|
| | | return date; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const search = async () => { |
|---|
| | | pageData.ListData.shijian = value.value; |
|---|
| | | console.log("data manager....", value.value); |
|---|
| | | const data = await getListData(pageData.ListData); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getOptions = async () => { |
|---|
| | | const data = await leixList(); |
|---|
| | | console.log(".....leixing..", data); |
|---|
| | | options.value = data.result.map((node) => { |
|---|
| | | leixingMap.set(node.split("@")[1], node); |
|---|
| | | return { |
|---|
| | | value: node.split("@")[1], |
|---|
| | | label: node.split("@")[0], |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | console.log(".....leixing..", leixingMap); |
|---|
| | | }; |
|---|
| | | getOptions(); |
|---|
| | | |
|---|
| | | function handleEdit(index, row) { |
|---|
| | | // console.log("xxxxxxxxxxxxxxx", index); |
|---|
| | | console.log( |
|---|
| | | "xxxxxxxxxxxxxxx", |
|---|
| | | row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1) |
|---|
| | | ); |
|---|
| | | // console.log("oooooooooooooooo"); |
|---|
| | | if (row.leixing.indexOf("g") == 0 && row.leixing.length == 2) { |
|---|
| | | router.push({ |
|---|
| | | path: "/" + row.leixing.substr(0, 1) + "0" + row.leixing.substr(1, 1), |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } else |
|---|
| | | router.push({ |
|---|
| | | path: "/" + row.leixing, |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return handleEdit; |
|---|
| | | } |
|---|
| | | const formInline = reactive({ |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const dialogFormVisible = ref(false); |
|---|
| | | //ç¡®å®æç´¢å¨ä½ |
|---|
| | | const onSubmit = () => {}; |
|---|
| | | //请æ±å表æ¹æ³leixList |
|---|
| | | const getListData = async () => { |
|---|
| | | pageData.ListData.shijian = value.value; |
|---|
| | | pageData.ListData.leixing = item.value; |
|---|
| | | const data = await headPage(pageData.ListData); |
|---|
| | | // console.log("data manager....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(e) { |
|---|
| | | console.log(".....search 2", e); |
|---|
| | | pageData.total = Math.ceil(e.data.total / pageData.ListData.pageSize); |
|---|
| | | tableData.value = e.data.records; |
|---|
| | | tableData.value.filter((item) => { |
|---|
| | | if (item.reportTime != null && item.reportTime.length > 0) { |
|---|
| | | options.value; |
|---|
| | | item.reportTime1 = item.reportTime.substr(0, 10); |
|---|
| | | item.leixing1 = leixingMap.get(item.leixing); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // åé¡µå¨ |
|---|
| | | const handleCurrentChange = (val) => { |
|---|
| | | pageData.ListData.pageNo = val; |
|---|
| | | |
|---|
| | | getListData(); |
|---|
| | | }; |
|---|
| | | //å é¤ç¨æ· |
|---|
| | | const handleDelete = (val) => { |
|---|
| | | // console.log(val); |
|---|
| | | }; |
|---|
| | | //æ°å¢ç¨æ· |
|---|
| | | const addUser = () => {}; |
|---|
| | | |
|---|
| | | getListData(); |
|---|
| | | |
|---|
| | | function showState(row, column, cellValue, index) { |
|---|
| | | // console.log("row", row); |
|---|
| | | // console.log("col", column); |
|---|
| | | // console.log("cel", cellValue); |
|---|
| | | // console.log("index", index); |
|---|
| | | if (cellValue === 0) return "æ£å¸¸"; |
|---|
| | | else return "å¼å¸¸"; |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | item, |
|---|
| | | value, |
|---|
| | | getListData, |
|---|
| | | pageData, |
|---|
| | | options, |
|---|
| | | onSubmit, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | handleCurrentChange, |
|---|
| | | handleDelete, |
|---|
| | | showState, |
|---|
| | | dialogFormVisible, |
|---|
| | | formLabelWidth, |
|---|
| | | addUser, |
|---|
| | | handleEdit, |
|---|
| | | |
|---|
| | | shortcuts, |
|---|
| | | search, |
|---|
| | | leixingMap, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .page { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|---|
| | | <el-form-item label="éæ©å表"> |
|---|
| | | <el-select v-model="formInline.region" class="m-2" placeholder="Select"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" @click="onSubmit">Query</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <el-table :data="tableData" style="width: 100%"> |
|---|
| | | <el-table-column prop="date" label="Date" /> |
|---|
| | | <el-table-column prop="name" label="Name" /> |
|---|
| | | <el-table-column prop="address" label="Address" /> |
|---|
| | | <el-table-column label="æä½"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <el-button size="small" @click="details(scope.$index)" |
|---|
| | | >æ¥ç详æ
</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="page"> |
|---|
| | | <el-pagination |
|---|
| | | background |
|---|
| | | layout="prev, pager, next" |
|---|
| | | :page-count="pageData.total" |
|---|
| | | :current-page="pageData.ListData.pageNo" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | export default { |
|---|
| | | name: "NewsIndex", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const value = ref(""); |
|---|
| | | const tableData = reactive([]); |
|---|
| | | let pageData = reactive({ |
|---|
| | | ListData: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10, |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | }); |
|---|
| | | const options = [ |
|---|
| | | { |
|---|
| | | value: "Option1", |
|---|
| | | label: "Option1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option2", |
|---|
| | | label: "Option2", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option3", |
|---|
| | | label: "Option3", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option4", |
|---|
| | | label: "Option4", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option5", |
|---|
| | | label: "Option5", |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const formInline = reactive({ |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | //ç¡®å®æç´¢å¨ä½ |
|---|
| | | const onSubmit = () => {}; |
|---|
| | | //请æ±å表æ¹æ³ |
|---|
| | | const getlistData = () => { |
|---|
| | | //计ç®å页æ°é |
|---|
| | | // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) |
|---|
| | | }; |
|---|
| | | // åé¡µå¨ |
|---|
| | | const handleCurrentChange = (val) => { |
|---|
| | | pageData.ListData.pageNo = val; |
|---|
| | | |
|---|
| | | getlistData(); |
|---|
| | | }; |
|---|
| | | //æ¥ç详æ
æé® |
|---|
| | | const details = (val) => {}; |
|---|
| | | return { |
|---|
| | | value, |
|---|
| | | pageData, |
|---|
| | | options, |
|---|
| | | onSubmit, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | handleCurrentChange, |
|---|
| | | details, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .page { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="block"> |
|---|
| | | <span class="demonstration">æ¶é´</span> |
|---|
| | | <el-date-picker v-model="value2" type="date" placeholder="Pick a day" :disabled-date="disabledDate" |
|---|
| | | :shortcuts="shortcuts" :size="size" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <el-table :data="tableData" style="width: 100%"> |
|---|
| | | <el-table-column prop="chanpin" label="产å" /> |
|---|
| | | <el-table-column prop="leixing" label="ç±»å" /> |
|---|
| | | <el-table-column prop="reportTime" label="æ¶é´"> |
|---|
| | | |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column prop="banci" label="ç次" /> |
|---|
| | | <el-table-column prop="id" label="ç¼å·" /> |
|---|
| | | <el-table-column prop="createDate" label="ææ°æ¶é´" /> |
|---|
| | | <el-table-column label="æä½"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">详æ
</el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="page"> |
|---|
| | | <el-pagination background layout="prev, pager, next" :page-count="pageData.total" |
|---|
| | | :current-page="pageData.ListData.pageNo" @current-change="handleCurrentChange" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, reactive } from "vue"; |
|---|
| | | import { headPage } from "@/api/head"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | export default { |
|---|
| | | name: "NewsIndex", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup() { |
|---|
| | | const router = useRouter(); |
|---|
| | | const value = ref(""); |
|---|
| | | let tableData = ref([]); |
|---|
| | | const formLabelWidth = "140px"; |
|---|
| | | let pageData = reactive({ |
|---|
| | | ListData: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 15, |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | }); |
|---|
| | | let value2 = ''; |
|---|
| | | const shortcuts = [ |
|---|
| | | { |
|---|
| | | text: 'ä»å¤©', |
|---|
| | | value: new Date(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: 'æ¨å¤©', |
|---|
| | | value: () => { |
|---|
| | | const date = new Date() |
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24) |
|---|
| | | return date |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | text: 'ä¸å¨å', |
|---|
| | | value: () => { |
|---|
| | | const date = new Date() |
|---|
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) |
|---|
| | | return date |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | |
|---|
| | | const disabledDate = (time) => { |
|---|
| | | return time.getTime() > Date.now(); |
|---|
| | | } |
|---|
| | | const options = [ |
|---|
| | | { |
|---|
| | | value: "Option1", |
|---|
| | | label: "Option1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option2", |
|---|
| | | label: "Option2", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option3", |
|---|
| | | label: "Option3", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option4", |
|---|
| | | label: "Option4", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option5", |
|---|
| | | label: "Option5", |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | function handleEdit(index, row) { |
|---|
| | | // console.log("xxxxxxxxxxxxxxx", index); |
|---|
| | | // console.log("xxxxxxxxxxxxxxx", row); |
|---|
| | | // console.log("oooooooooooooooo"); |
|---|
| | | if (row.leixing == "A0") |
|---|
| | | router.push({ |
|---|
| | | path: "/Bianxk", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A1") |
|---|
| | | router.push({ |
|---|
| | | path: "/JBJtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A6") |
|---|
| | | router.push({ |
|---|
| | | path: "/DBtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A2") |
|---|
| | | router.push({ |
|---|
| | | path: "/HJtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A3") |
|---|
| | | router.push({ |
|---|
| | | path: "/FBtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A4") |
|---|
| | | router.push({ |
|---|
| | | path: "/JGGXtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A5") |
|---|
| | | router.push({ |
|---|
| | | path: "/JGJtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | if (row.leixing == "A7") |
|---|
| | | router.push({ |
|---|
| | | path: "/GXtable", |
|---|
| | | query: { |
|---|
| | | id: row.id, |
|---|
| | | leixing: row.leixing, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | return handleEdit; |
|---|
| | | } |
|---|
| | | const formInline = reactive({ |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const dialogFormVisible = ref(false); |
|---|
| | | //ç¡®å®æç´¢å¨ä½ |
|---|
| | | const onSubmit = () => { }; |
|---|
| | | //请æ±å表æ¹æ³ |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await headPage(pageData.ListData); |
|---|
| | | // console.log("data manager....", data); |
|---|
| | | pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize); |
|---|
| | | tableData.value = data.data.records; |
|---|
| | | }; |
|---|
| | | // åé¡µå¨ |
|---|
| | | const handleCurrentChange = (val) => { |
|---|
| | | pageData.ListData.pageNo = val; |
|---|
| | | getListData(); |
|---|
| | | }; |
|---|
| | | //å é¤ç¨æ· |
|---|
| | | const handleDelete = (val) => { |
|---|
| | | // console.log(val); |
|---|
| | | }; |
|---|
| | | //æ°å¢ç¨æ· |
|---|
| | | const addUser = () => { }; |
|---|
| | | getListData(); |
|---|
| | | function showState(row, column, cellValue, index) { |
|---|
| | | // console.log("row", row); |
|---|
| | | // console.log("col", column); |
|---|
| | | // console.log("cel", cellValue); |
|---|
| | | // console.log("index", index); |
|---|
| | | if (cellValue === 0) return "æ£å¸¸"; |
|---|
| | | else return "å¼å¸¸"; |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | value, |
|---|
| | | pageData, |
|---|
| | | options, |
|---|
| | | onSubmit, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | handleCurrentChange, |
|---|
| | | handleDelete, |
|---|
| | | showState, |
|---|
| | | dialogFormVisible, |
|---|
| | | formLabelWidth, |
|---|
| | | addUser, |
|---|
| | | handleEdit, |
|---|
| | | disabledDate, |
|---|
| | | shortcuts |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .page { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502#åºçå²åºå·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c_tieqkHeaderData" |
|---|
| | | :tableHeader="c_tieqkHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c_spHeaderData" |
|---|
| | | :tableHeader="c_spHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c_baseHeaderData" |
|---|
| | | :tableHeader="c_baseHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c_wgHeaderData" |
|---|
| | | :tableHeader="c_wgHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chongVoLast, chongVoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | |
|---|
| | | const c_spHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "sudu", label: "é度", editable: "false", type: "text" }, |
|---|
| | | { prop: "yali", label: "åå", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | const c_baseHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: false, type: "text" }, |
|---|
| | | { prop: "xm", label: "æ£æµé¡¹ç®", editable: false, type: "text" }, |
|---|
| | | { prop: "bzz", label: "æ åå¼", editable: false, type: "text" }, |
|---|
| | | { prop: "no1", label: "1#模", editable: false, type: "text" }, |
|---|
| | | { prop: "no2", label: "2#模", editable: false, type: "text" }, |
|---|
| | | { prop: "no3", label: "3#模", editable: false, type: "text" }, |
|---|
| | | ]); |
|---|
| | | const c_tieqkHeader = reactive([ |
|---|
| | | { prop: "jiebtsy", label: "æ¥çéå©ä½", editable: false, type: "text" }, |
|---|
| | | { prop: "jiaobtsy", label: "交çéå©ä½", editable: false, type: "text" }, |
|---|
| | | { prop: "ctzl", label: "å²éæ»é", editable: false, type: "text" }, |
|---|
| | | { prop: "kgs", label: "äºçæ°", editable: false, type: "text" }, |
|---|
| | | { prop: "yf", label: "å°åº", editable: false, type: "text" }, |
|---|
| | | { prop: "fp", label: "åºå", editable: false, type: "text" }, |
|---|
| | | ]); |
|---|
| | | const c_wgHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: false, type: "text" }, |
|---|
| | | { prop: "wgjc", label: "å¤è§æ£æµ", editable: false, type: "text" }, |
|---|
| | | { prop: "qxyy", label: "缺é·åå ", editable: false, type: "text" }, |
|---|
| | | { prop: "cstz", label: "æªæ½è°æ´", editable: false, type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c_baseHeaderData = ref([]); |
|---|
| | | let c_tieqkHeaderData = ref([]); |
|---|
| | | let c_tieqkHeaderDataMap = ref({}); |
|---|
| | | let c_wgHeaderData = ref([]); |
|---|
| | | let c_spHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | function splitList(start, end) { |
|---|
| | | var tlist; |
|---|
| | | if (c_baseHeaderData.value.length >= end) { |
|---|
| | | tlist = c_baseHeaderData.value.splice(start, end); |
|---|
| | | } else { |
|---|
| | | tlist = []; |
|---|
| | | } |
|---|
| | | console.log("tlist.....", tlist); |
|---|
| | | return tlist; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chongVoLast(); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | console.log(".........", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c_baseHeaderData.value = data.data.cbaseList; |
|---|
| | | c_tieqkHeaderData.value = [data.data.ctieqk]; |
|---|
| | | c_tieqkHeaderDataMap = data.data.ctieqk; |
|---|
| | | |
|---|
| | | c_wgHeaderData.value = data.data.cwgList; |
|---|
| | | c_spHeaderData.value = data.data.cSpList; |
|---|
| | | c_baseHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | c_wgHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | c_spHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...c_tieqkHeaderDataMap, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | cbaseList: c_baseHeaderData.value, |
|---|
| | | ctieqk: c_tieqkHeaderData.value[0], |
|---|
| | | cwgList: c_wgHeaderData.value, |
|---|
| | | cSpList: c_spHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chongVoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "åºçå²åºå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g01.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t1: c_spHeaderData.value, |
|---|
| | | t2: c_baseHeaderData.value, |
|---|
| | | t3: c_wgHeaderData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "502åºçå²åºå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c_baseHeaderData, |
|---|
| | | c_tieqkHeaderData, |
|---|
| | | c_wgHeaderData, |
|---|
| | | c_baseHeader, |
|---|
| | | c_tieqkHeader, |
|---|
| | | c_wgHeader, |
|---|
| | | c_spHeaderData, |
|---|
| | | c_spHeader, |
|---|
| | | chongVoLast, |
|---|
| | | chongVoSave, |
|---|
| | | c_tieqkHeaderDataMap, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>å²åºæ¥å¸¸ç¹æ£è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c2_checkHeaderData" |
|---|
| | | :tableHeader="c2_checkHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong02VoLast, chong02VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const c2_checkHeader = reactive([ |
|---|
| | | { prop: "no", label: "åºå·", editable: "false", type: "text" }, |
|---|
| | | { prop: "sbbw", label: "设å¤é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "gj", label: "å·¥å
·", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "pdbz", label: "å¤ææ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "t1", label: "1", editable: "false", type: "text" }, |
|---|
| | | { prop: "t2", label: "2", editable: "false", type: "text" }, |
|---|
| | | { prop: "t3", label: "3", editable: "false", type: "text" }, |
|---|
| | | { prop: "t4", label: "4", editable: "false", type: "text" }, |
|---|
| | | { prop: "t5", label: "5", editable: "false", type: "text" }, |
|---|
| | | { prop: "t6", label: "6", editable: "false", type: "text" }, |
|---|
| | | { prop: "t7", label: "7", editable: "false", type: "text" }, |
|---|
| | | { prop: "t8", label: "8", editable: "false", type: "text" }, |
|---|
| | | { prop: "t9", label: "9", editable: "false", type: "text" }, |
|---|
| | | { prop: "t10", label: "10", editable: "false", type: "text" }, |
|---|
| | | { prop: "t11", label: "11", editable: "false", type: "text" }, |
|---|
| | | { prop: "t12", label: "12", editable: "false", type: "text" }, |
|---|
| | | { prop: "t13", label: "13", editable: "false", type: "text" }, |
|---|
| | | { prop: "t14", label: "14", editable: "false", type: "text" }, |
|---|
| | | { prop: "t15", label: "15", editable: "false", type: "text" }, |
|---|
| | | { prop: "t16", label: "16", editable: "false", type: "text" }, |
|---|
| | | { prop: "t17", label: "17", editable: "false", type: "text" }, |
|---|
| | | { prop: "t18", label: "18", editable: "false", type: "text" }, |
|---|
| | | { prop: "t19", label: "19", editable: "false", type: "text" }, |
|---|
| | | { prop: "t20", label: "20", editable: "false", type: "text" }, |
|---|
| | | { prop: "t21", label: "21", editable: "false", type: "text" }, |
|---|
| | | { prop: "t22", label: "22", editable: "false", type: "text" }, |
|---|
| | | { prop: "t23", label: "23", editable: "false", type: "text" }, |
|---|
| | | { prop: "t24", label: "24", editable: "false", type: "text" }, |
|---|
| | | { prop: "t25", label: "25", editable: "false", type: "text" }, |
|---|
| | | { prop: "t26", label: "26", editable: "false", type: "text" }, |
|---|
| | | { prop: "t27", label: "27", editable: "false", type: "text" }, |
|---|
| | | { prop: "t28", label: "28", editable: "false", type: "text" }, |
|---|
| | | { prop: "t29", label: "29", editable: "false", type: "text" }, |
|---|
| | | { prop: "t30", label: "30", editable: "false", type: "text" }, |
|---|
| | | { prop: "t31", label: "31", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c2_checkHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong02VoLast(); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | console.log(".........", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c2_checkHeaderData.value = data.data.c2CheckList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c2CheckList: c2_checkHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong02VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "ç½çº¿ç产æ
åµæ¥è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g02.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t1: c2_checkHeaderData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "å²åºæ¥å¸¸ç¹æ£è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c2_checkHeaderData, |
|---|
| | | c2_checkHeader, |
|---|
| | | chong02VoLast, |
|---|
| | | chong02VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>å²åºå¨æ¶¦æ»è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c3_weekHeaderData" |
|---|
| | | :tableHeader="c3_weekHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong03VoLast, chong03VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const c3_weekHeader = reactive([ |
|---|
| | | { prop: "no", label: "åºå·", editable: "false", type: "text" }, |
|---|
| | | { prop: "zq", label: "å¨æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "rhbw", label: "润æ»é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "ffgj", label: "æ¹æ³å·¥å
·", editable: "false", type: "text" }, |
|---|
| | | { prop: "gj", label: "å·¥å
·", editable: "false", type: "text" }, |
|---|
| | | { prop: "zyl", label: "注油é", editable: "false", type: "text" }, |
|---|
| | | { prop: "pdbz", label: "å¤ææ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "week1", label: "第ä¸å¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week2", label: "第äºå¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week3", label: "第ä¸å¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week4", label: "第åå¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "oper1", label: "æä½å1", editable: "false", type: "text" }, |
|---|
| | | { prop: "oper2", label: "æä½å2", editable: "false", type: "text" }, |
|---|
| | | { prop: "lingb1", label: "é¢ç1", editable: "false", type: "text" }, |
|---|
| | | { prop: "lingb2", label: "é¢ç2", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c3_weekHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong03VoLast(); |
|---|
| | | console.log(".........", data); |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c3_weekHeaderData.value = data.data.c3WeekList; |
|---|
| | | |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: c3_weekHeaderData.value, |
|---|
| | | }; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c3WeekList: c3_weekHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong03VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "å²åºå¨æ¶¦æ»è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g03.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "å²åºå¨æ¶¦æ»è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | getListData(); |
|---|
| | | onMounted(() => {}); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c3_weekHeader, |
|---|
| | | c3_weekHeaderData, |
|---|
| | | chong03VoLast, |
|---|
| | | chong03VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>å²åºæ¸
æ´è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c4_cleanHeaderData" |
|---|
| | | :tableHeader="c4_cleanHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong04VoLast, chong04VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const c4_cleanHeader = reactive([ |
|---|
| | | { prop: "qjbw", label: "æ¸
æ´é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "qjbz", label: "æ¸
æ´æ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "zeren", label: "责任人", editable: "false", type: "text" }, |
|---|
| | | { prop: "jcr", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "xg", label: "æ¸
æ´åå«çææ", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c4_cleanHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong04VoLast(); |
|---|
| | | console.log(".........", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c4_cleanHeaderData.value = data.data.c4CleanList; |
|---|
| | | c4_cleanHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c4CleanList: c4_cleanHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong04VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "å²åºæ¸
æ´è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g04.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t1: c4_cleanHeaderData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "å²åºæ¸
æ´è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c4_cleanHeader, |
|---|
| | | c4_cleanHeaderData, |
|---|
| | | chong04VoLast, |
|---|
| | | chong04VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502#åºç注è¶å·¥åºç产质éè®°å½5</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj5_mfjHeaderData" |
|---|
| | | :tableHeader="zj5_mfjHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj5_spHeaderData" |
|---|
| | | :tableHeader="zj5_spHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj5_baseHeaderData" |
|---|
| | | :tableHeader="zj5_baseHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj5_wgHeaderData" |
|---|
| | | :tableHeader="zj5_wgHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong05VoLast, chong05VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const zj5_baseHeader = reactive([ |
|---|
| | | { prop: "shijian33", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "no1", label: "1#模", editable: "false", type: "text" }, |
|---|
| | | { prop: "no2", label: "2#模", editable: "false", type: "text" }, |
|---|
| | | { prop: "no3", label: "3#模", editable: "false", type: "text" }, |
|---|
| | | { prop: "no4", label: "4#模", editable: "false", type: "text" }, |
|---|
| | | { prop: "hxw", label: "ç箱温", editable: "false", type: "text" }, |
|---|
| | | { prop: "ycw", label: "å¼å¸¸æ¸©", editable: "false", type: "text" }, |
|---|
| | | { prop: "tzcs", label: "è°æ´æªæ½", editable: "false", type: "text" }, |
|---|
| | | { prop: "tzr", label: "è°æ´äººç¾å", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const zj5_mfjHeader = reactive([ |
|---|
| | | { prop: "mfjcj", label: "å¯å°è¶å家", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "mfjxh_ph", |
|---|
| | | label: "å¯å°è¶åå·/æ¹å·", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "yjl", label: "ç¨è¶é", editable: "false", type: "text" }, |
|---|
| | | { prop: "fp", label: "åºå", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const zj5_spHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "sudu", label: "é度", editable: "false", type: "text" }, |
|---|
| | | { prop: "yali", label: "åå", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const zj5_wgHeader = reactive([ |
|---|
| | | { prop: "shijian22", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "wgjc", label: "å¤è§æ£æµ", editable: "false", type: "text" }, |
|---|
| | | { prop: "qxyy", label: "缺é·åå ", editable: "false", type: "text" }, |
|---|
| | | { prop: "cstz", label: "æªæ½è°æ´", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "å¯å°è¶ä½¿ç¨è®°å½", |
|---|
| | | b2: "注è¶æºé度记å½", |
|---|
| | | b3: "产åè´¨éè®°å½", |
|---|
| | | b4: "å¤è§è´¨éæ£éª", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let zj5_baseHeaderData = ref([]); |
|---|
| | | let zj5_mfjHeaderData = ref([]); |
|---|
| | | let zj5_mfjHeaderDataMap = ref({}); |
|---|
| | | let zj5_spHeaderData = ref([]); |
|---|
| | | let zj5_wgHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong05VoLast(); |
|---|
| | | console.log(".........", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | headData.head.reportTime1 = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | zj5_baseHeaderData.value = data.data.zj5BaseList; |
|---|
| | | (zj5_mfjHeaderData.value = [ |
|---|
| | | data.data.zj5Mfj == null ? "" : data.data.zj5Mfj, |
|---|
| | | ]), |
|---|
| | | (zj5_mfjHeaderDataMap = |
|---|
| | | data.data.zj5Mfj == null ? "" : data.data.zj5Mfj), |
|---|
| | | (zj5_spHeaderData.value = data.data.zj5SpList), |
|---|
| | | (zj5_wgHeaderData.value = data.data.zj5WgList), |
|---|
| | | zj5_spHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | zj5_wgHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian22 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | zj5_baseHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian33 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...zj5_mfjHeaderDataMap, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | zj5BaseList: zj5_baseHeaderData.value, |
|---|
| | | zj5Mfj: zj5_mfjHeaderData.value[0], |
|---|
| | | zj5SpList: zj5_spHeaderData.value, |
|---|
| | | zj5WgList: zj5_wgHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong05VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "åºç注è¶å·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g05.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t1: zj5_spHeaderData.value, |
|---|
| | | t2: zj5_baseHeaderData.value, |
|---|
| | | t3: zj5_wgHeaderData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "åºç注è¶å·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | zj5_baseHeaderData, |
|---|
| | | zj5_mfjHeaderData, |
|---|
| | | zj5_spHeaderData, |
|---|
| | | zj5_wgHeaderData, |
|---|
| | | zj5_baseHeader, |
|---|
| | | zj5_mfjHeader, |
|---|
| | | zj5_spHeader, |
|---|
| | | zj5_wgHeader, |
|---|
| | | chong05VoLast, |
|---|
| | | chong05VoSave, |
|---|
| | | zj5_mfjHeaderDataMap, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>注è¶æºæ¥å¸¸ç»´æ¤ç¹æ£è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj6_checkHeaderData" |
|---|
| | | :tableHeader="zj6_checkHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong06VoLast, chong06VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const zj6_checkHeader = reactive([ |
|---|
| | | { prop: "no", label: "åºå·", editable: "false", type: "text" }, |
|---|
| | | { prop: "sbbw", label: "设å¤é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "gj", label: "å·¥å
·", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "pdbz", label: "å¤ææ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "t1", label: "1", editable: "false", type: "text" }, |
|---|
| | | { prop: "t2", label: "2", editable: "false", type: "text" }, |
|---|
| | | { prop: "t3", label: "3", editable: "false", type: "text" }, |
|---|
| | | { prop: "t4", label: "4", editable: "false", type: "text" }, |
|---|
| | | { prop: "t5", label: "5", editable: "false", type: "text" }, |
|---|
| | | { prop: "t6", label: "6", editable: "false", type: "text" }, |
|---|
| | | { prop: "t7", label: "7", editable: "false", type: "text" }, |
|---|
| | | { prop: "t8", label: "8", editable: "false", type: "text" }, |
|---|
| | | { prop: "t9", label: "9", editable: "false", type: "text" }, |
|---|
| | | { prop: "t10", label: "10", editable: "false", type: "text" }, |
|---|
| | | { prop: "t11", label: "11", editable: "false", type: "text" }, |
|---|
| | | { prop: "t12", label: "12", editable: "false", type: "text" }, |
|---|
| | | { prop: "t13", label: "13", editable: "false", type: "text" }, |
|---|
| | | { prop: "t14", label: "14", editable: "false", type: "text" }, |
|---|
| | | { prop: "t15", label: "15", editable: "false", type: "text" }, |
|---|
| | | { prop: "t16", label: "16", editable: "false", type: "text" }, |
|---|
| | | { prop: "t17", label: "17", editable: "false", type: "text" }, |
|---|
| | | { prop: "t18", label: "18", editable: "false", type: "text" }, |
|---|
| | | { prop: "t19", label: "19", editable: "false", type: "text" }, |
|---|
| | | { prop: "t20", label: "20", editable: "false", type: "text" }, |
|---|
| | | { prop: "t21", label: "21", editable: "false", type: "text" }, |
|---|
| | | { prop: "t22", label: "22", editable: "false", type: "text" }, |
|---|
| | | { prop: "t23", label: "23", editable: "false", type: "text" }, |
|---|
| | | { prop: "t24", label: "24", editable: "false", type: "text" }, |
|---|
| | | { prop: "t25", label: "25", editable: "false", type: "text" }, |
|---|
| | | { prop: "t26", label: "26", editable: "false", type: "text" }, |
|---|
| | | { prop: "t27", label: "27", editable: "false", type: "text" }, |
|---|
| | | { prop: "t28", label: "28", editable: "false", type: "text" }, |
|---|
| | | { prop: "t29", label: "29", editable: "false", type: "text" }, |
|---|
| | | { prop: "t30", label: "30", editable: "false", type: "text" }, |
|---|
| | | { prop: "t31", label: "31", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let zj6_checkHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong06VoLast(); |
|---|
| | | console.log(".........", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | zj6_checkHeaderData.value = data.data.c2CheckList; |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | x1: zj6_checkHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c2CheckList: zj6_checkHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong06VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "注è¶æºæ¥å¸¸ç»´æ¤ç¹æ£è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g06.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "注è¶æºæ¥å¸¸ç»´æ¤ç¹æ£è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | zj6_checkHeader, |
|---|
| | | zj6_checkHeaderData, |
|---|
| | | chong06VoLast, |
|---|
| | | chong06VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>注è¶æºå¨æ¶¦æ»è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj7_weekHeaderData" |
|---|
| | | :tableHeader="zj7_weekHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong07VoLast, chong07VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const zj7_weekHeader = reactive([ |
|---|
| | | { prop: "no", label: "åºå·", editable: "false", type: "text" }, |
|---|
| | | { prop: "zq", label: "å¨æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "whbw", label: "ç»´æ¤é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "ffgj", label: "æ¹æ³å·¥å
·", editable: "false", type: "text" }, |
|---|
| | | { prop: "zyl", label: "注油é", editable: "false", type: "text" }, |
|---|
| | | { prop: "pdbz", label: "å¤ææ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "week1", label: "第ä¸å¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week2", label: "第äºå¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week3", label: "第ä¸å¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "week4", label: "第åå¨", editable: "false", type: "text" }, |
|---|
| | | { prop: "TENANT_ID", label: "ç§æ·å·", editable: "false", type: "text" }, |
|---|
| | | { prop: "REVISION", label: "ä¹è§é", editable: "false", type: "text" }, |
|---|
| | | { prop: "CREATED_BY", label: "å建人", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "CREATED_TIME", |
|---|
| | | label: "å建æ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "UPDATED_BY", label: "æ´æ°äºº", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "UPDATED_TIME", |
|---|
| | | label: "æ´æ°æ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let zj7_weekHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong07VoLast(); |
|---|
| | | console.log(".........g07", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | zj7_weekHeaderData.value = data.data.c2CheckList; |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | x1: zj7_weekHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c2CheckList: zj7_weekHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong07VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "注è¶æºå¨æ¶¦æ»è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g07.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "注è¶æºå¨æ¶¦æ»è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | zj7_weekHeader, |
|---|
| | | zj7_weekHeaderData, |
|---|
| | | chong07VoLast, |
|---|
| | | chong07VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>注è¶æºæ¸
æ´è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="zj8_cleanHeaderData" |
|---|
| | | :tableHeader="zj8_cleanHeader" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong08VoLast, chong08VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const zj8_cleanHeader = reactive([ |
|---|
| | | { prop: "qjbw", label: "æ¸
æ´é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "qjbz", label: "æ¸
æ´æ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "zeren", label: "责任人", editable: "false", type: "text" }, |
|---|
| | | { prop: "jcr", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "xg", label: "注è¶æºæ¸
æ´è®°å½", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "é使ç¨æ
åµ", |
|---|
| | | b2: "ç产é度ä¸åå", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let zj8_cleanHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong08VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g08", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | zj8_cleanHeaderData.value = data.data.zj8CleanList; |
|---|
| | | zj8_cleanHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | zj8CleanList: zj8_cleanHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong08VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "注è¶æºæ¸
æ´è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g08.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | t1: zj8_cleanHeaderData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "注è¶æºæ¸
æ´è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | zj8_cleanHeader, |
|---|
| | | zj8_cleanHeaderData, |
|---|
| | | chong08VoLast, |
|---|
| | | chong08VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>éçå·¥åºç产质éè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="jg9_scjlHeaderData" |
|---|
| | | :tableHeader="jg9_scjlHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="jg9_cpzlHeaderData" |
|---|
| | | :tableHeader="jg9_cpzlHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong09VoLast, chong09VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const jg9_cpzlHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "wgjc", label: "å¤è§æ£éª", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian22", label: "æ¶é´2", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "mtsljj", |
|---|
| | | label: "æ¯æ¡æ°éæ£éª", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | const jg9_scjlHeader = reactive([ |
|---|
| | | { |
|---|
| | | prop: "jbscpl", |
|---|
| | | label: "æ¥çæ¶æåé", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "syzbsl", |
|---|
| | | label: "使ç¨çº¸æ¿æ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jbssy", |
|---|
| | | label: "交çæ¶å©ä½æåé", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "rsdsl", |
|---|
| | | label: "使ç¨ç缩è¢æ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "cpbs", label: "æåå
æ°", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "dbdsl", |
|---|
| | | label: "使ç¨æå
带æ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "crmsl", |
|---|
| | | label: "使ç¨ç¼ ç»èæ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sxmsl", |
|---|
| | | label: "使ç¨èå½¢èæ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "tpsl", label: "使ç¨æçæ°é", editable: "false", type: "text" }, |
|---|
| | | { prop: "fpsl", label: "åºåæ°é", editable: "false", type: "text" }, |
|---|
| | | { prop: "bz", label: "å¤æ³¨", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let jg9_cpzlHeaderData = ref([]); |
|---|
| | | |
|---|
| | | let jg9_scjlHeaderData = ref([]); |
|---|
| | | let jg9_scjlHeaderDataMap = ref({}); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong09VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | jg9_cpzlHeaderData.value = data.data.jg9CpzlList; |
|---|
| | | jg9_scjlHeaderData.value = [data.data.jg9Scjl]; |
|---|
| | | jg9_scjlHeaderDataMap = data.data.jg9Scjl; |
|---|
| | | |
|---|
| | | jg9_cpzlHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | if (item.shijian2 != null) item.shijian22 = item.shijian2.substr(11, 5); |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...jg9_scjlHeaderDataMap, |
|---|
| | | t1: jg9_cpzlHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | jg9CpzlList: jg9_cpzlHeader.value, |
|---|
| | | jg9Scjl: jg9_scjlHeaderData.value[0], |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong09VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "éçå·¥åºç产质éè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g09.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "éçå·¥åºç产质éè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | jg9_scjlHeader, |
|---|
| | | jg9_scjlHeaderData, |
|---|
| | | jg9_cpzlHeader, |
|---|
| | | jg9_cpzlHeaderData, |
|---|
| | | chong09VoLast, |
|---|
| | | chong09VoSave, |
|---|
| | | jg9_scjlHeaderDataMap, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>注è¶æºæ¸
æ´è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="jg10_xkHeaderData" |
|---|
| | | :tableHeader="jg10_xkHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong10VoLast, chong10VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const jg10_xkHeader = reactive([ |
|---|
| | | { prop: "riqi11", label: "æ¥æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "shijian22", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry1", label: "人å", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry1_state", label: "ç¶æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry2", label: "人å", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry2_state", label: "ç¶æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry3", label: "人å", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry3_state", label: "ç¶æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry4", label: "人å", editable: "false", type: "text" }, |
|---|
| | | { prop: "ry4_state", label: "ç¶æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "bz", label: "å¤æ³¨", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let jg10_xkHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong10VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g10", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | jg10_xkHeaderData.value = data.data.jg10XkList; |
|---|
| | | jg10_xkHeaderData.value.filter((item) => { |
|---|
| | | if (item.riqi != null) item.riqi11 = item.riqi.substr(0, 10); |
|---|
| | | if (item.shijian != null) item.shijian22 = item.shijian.substr(11, 5); |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: jg10_xkHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await save(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "éç人åä¸å°æ¶ææ¶æ¯è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g10.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "éç人åä¸å°æ¶ææ¶æ¯è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | jg10_xkHeader, |
|---|
| | | jg10_xkHeaderData, |
|---|
| | | chong10VoLast, |
|---|
| | | chong10VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502#éçæºæ¸
æ´è®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="jg11_qjHeaderData" |
|---|
| | | :tableHeader="jg11_qjHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong11VoLast, chong11VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const jg11_qjHeader = reactive([ |
|---|
| | | { prop: "riqi11", label: "æ¥æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "qjbw", label: "æ¸
æ´é¨ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "qjbz", label: "æ¸
æ´æ å", editable: "false", type: "text" }, |
|---|
| | | { prop: "qjsj11", label: "æ¸
æ´æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "zrr", label: "责任人", editable: "false", type: "text" }, |
|---|
| | | { prop: "jcr", label: "æ£æ¥äººç¡®è®¤", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "wsxg", |
|---|
| | | label: "æ¸
æ´åå«çææ", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let jg11_qjHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong11VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g11", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | jg11_qjHeaderData.value = data.data.jg11QjList; |
|---|
| | | jg11_qjHeaderData.value.filter((item) => { |
|---|
| | | if (item.riqi != null) item.riqi11 = item.riqi.substr(0, 10); |
|---|
| | | if (item.qjsj != null) item.qjsj11 = item.qjsj.substr(11, 5); |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: jg11_qjHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | jg11QjList: jg11_qjHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong11VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "502#éçæºæ¸
æ´è®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g11.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "502#éçæºæ¸
æ´è®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | jg11_qjHeader, |
|---|
| | | jg11_qjHeaderData, |
|---|
| | | chong11VoLast, |
|---|
| | | chong11VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502#åºç缩èè®°å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sm12_smHeaderData" |
|---|
| | | :tableHeader="sm12_smHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong12VoLast, chong12VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const sm12_smHeader = reactive([ |
|---|
| | | { prop: "rq", label: "æ¥æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "xhgz", label: "å°åæ ¼è¯", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "mtsysl", |
|---|
| | | label: "æ¯æ使ç¨æ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "ccpph", label: "产æåæ¹å·", editable: "false", type: "text" }, |
|---|
| | | { prop: "smry", label: "缩è人å", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "rsmyysl", |
|---|
| | | label: "ç缩è使ç¨æ°é", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let sm12_smHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong12VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g12", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | sm12_smHeaderData.value = data.data.sm12SmList; |
|---|
| | | // sm12_smHeaderData.value.filter((item) => { |
|---|
| | | // if (item.rq != null) item.rq11 = item.rq.substr(0, 10); |
|---|
| | | |
|---|
| | | // return item; |
|---|
| | | // }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: sm12_smHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | sm12SmList: sm12_smHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong12VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "502#åºç缩èè®°å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g12.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "502#åºç缩èè®°å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | sm12_smHeader, |
|---|
| | | sm12_smHeaderData, |
|---|
| | | chong12VoLast, |
|---|
| | | chong12VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>æ´å¼ å²é使ç¨ç»è®°è¡¨å½</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c13_ctsyHeaderData" |
|---|
| | | :tableHeader="c13_ctsyHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong13VoLast, chong13VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const c13_ctsyHeader = reactive([ |
|---|
| | | { prop: "shijian", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "banci", label: "ç次", editable: "false", type: "text" }, |
|---|
| | | { prop: "name", label: "å称", editable: "false", type: "text" }, |
|---|
| | | { prop: "pc", label: "å°å·æ¹æ¬¡", editable: "false", type: "text" }, |
|---|
| | | { prop: "bh", label: "å
å·", editable: "false", type: "text" }, |
|---|
| | | { prop: "ytzs", label: "åéå¼ æ°", editable: "false", type: "text" }, |
|---|
| | | { prop: "yczs", label: "å·²å²å¼ æ°", editable: "false", type: "text" }, |
|---|
| | | { prop: "jieb", label: "æ¥çå¼ æ°", editable: "false", type: "text" }, |
|---|
| | | { prop: "jbsy", label: "交çå©ä½", editable: "false", type: "text" }, |
|---|
| | | { prop: "ktzs", label: "äºéå¼ æ°", editable: "false", type: "text" }, |
|---|
| | | { prop: "yfzs", label: "å°åºå¼ æ°", editable: "false", type: "text" }, |
|---|
| | | { prop: "ytcj", label: "å°éå家", editable: "false", type: "text" }, |
|---|
| | | { prop: "bz", label: "å¤æ³¨", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c13_ctsyHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong13VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g13", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c13_ctsyHeaderData.value = data.data.c13CtsyList; |
|---|
| | | c13_ctsyHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(0, 10); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: c13_ctsyHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | c13CtsyList: c13_ctsyHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong13VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "æ´å¼ å²é使ç¨ç»è®°è¡¨å½"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g13.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "æ´å¼ å²é使ç¨ç»è®°è¡¨å½.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c13_ctsyHeader, |
|---|
| | | c13_ctsyHeaderData, |
|---|
| | | chong13VoLast, |
|---|
| | | chong13VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502åºçç产æ
åµæ¥å</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="chanliangHeaderData" |
|---|
| | | :tableHeader="chanliangHeader" |
|---|
| | | :labelName="labelName.b8" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_yt_fpHeaderData" |
|---|
| | | :tableHeader="sh14_yt_fpHeader" |
|---|
| | | :labelName="labelName.b1" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_cc_fpHeaderData" |
|---|
| | | :tableHeader="sh14_cc_fpHeader" |
|---|
| | | :labelName="labelName.b2" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_zj_fpHeaderData" |
|---|
| | | :tableHeader="sh14_zj_fpHeader" |
|---|
| | | :labelName="labelName.b3" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_gjj_fpHeaderData" |
|---|
| | | :tableHeader="sh14_gjj_fpHeader" |
|---|
| | | :labelName="labelName.b4" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_jg_fpHeaderData" |
|---|
| | | :tableHeader="sh14_jg_fpHeader" |
|---|
| | | :labelName="labelName.b5" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="sh14_zjHeaderData" |
|---|
| | | :tableHeader="sh14_zjHeader" |
|---|
| | | :labelName="labelName.b6" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="feipinfpHeaderData" |
|---|
| | | :tableHeader="feipinfpHeader" |
|---|
| | | :labelName="labelName.b9" |
|---|
| | | :editable="editable" |
|---|
| | | > |
|---|
| | | </HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong14VoLast, chong14VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const feipinfpHeader = reactive([ |
|---|
| | | { prop: "total", label: "ç产åºå(æ»è®¡)", editable: false, type: "text" }, |
|---|
| | | { prop: "chongyingNum", label: "éå°", editable: false, type: "input" }, |
|---|
| | | { prop: "louyinNum", label: "æ¼å°", editable: false, type: "input" }, |
|---|
| | | { prop: "zazhidianNum", label: "æè´¨ç¹", editable: false, type: "input" }, |
|---|
| | | { |
|---|
| | | prop: "waituzouweiNum", |
|---|
| | | label: "å¤æ¶èµ°ä½", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { prop: "louyinNum", label: "æ¼å°", editable: false, type: "input" }, |
|---|
| | | { prop: "moranNum", label: "墨æ", editable: false, type: "input" }, |
|---|
| | | { prop: "fanbianBl", label: "翻边ä¸è¯", editable: false, type: "input" }, |
|---|
| | | { prop: "sechaNum", label: "è²å·®", editable: false, type: "input" }, |
|---|
| | | { prop: "neiyinseNum", label: "å
å°è²", editable: false, type: "input" }, |
|---|
| | | { |
|---|
| | | prop: "neiwaitucashangNum", |
|---|
| | | label: "å
å¤æ¶æ¦ä¼¤", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guangyouBzNum", |
|---|
| | | label: "å
æ²¹ä¸å", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "sutiehexianNum", |
|---|
| | | label: "ç´ éé»çº¿", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "taoyinBzNum", |
|---|
| | | label: "å¥å°ä¸å", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }, |
|---|
| | | { prop: "hubanNum", label: "ç³æ¿", editable: false, type: "input" }, |
|---|
| | | ]); |
|---|
| | | const chanliangHeader = reactive([ |
|---|
| | | { prop: "hjzs", label: "å²éæ»æ°", editable: false, type: "text" }, |
|---|
| | | { prop: "chengpin", label: "æå", editable: false, type: "input" }, |
|---|
| | | { prop: "zhuancp", label: "转æå", editable: false, type: "input" }, |
|---|
| | | { prop: "daijp", label: "å¾
æ£å", editable: false, type: "input" }, |
|---|
| | | { prop: "jiebqsy", label: "æ¥çåå©ä½", editable: false, type: "input" }, |
|---|
| | | { prop: "jiaobhsy", label: "æ¥çåå©ä½", editable: false, type: "input" }, |
|---|
| | | { prop: "yinfg", label: "å°åºç", editable: false, type: "input" }, |
|---|
| | | { prop: "feipjbfp", label: "åºå", editable: false, type: "input" }, |
|---|
| | | { prop: "hegcp", label: "åæ ¼æå", editable: false, type: "input" }, |
|---|
| | | { prop: "feipl", label: "åºåç", editable: false, type: "input" }, |
|---|
| | | { prop: "caiytpc", label: "彩å°éæ¹æ¬¡", editable: false, type: "input" }, |
|---|
| | | ]); |
|---|
| | | const sh14_cc_fpHeader = reactive([ |
|---|
| | | { prop: "cq", label: "å²ç¼º", editable: "false", type: "text" }, |
|---|
| | | { prop: "kg", label: "å¡ç", editable: "false", type: "text" }, |
|---|
| | | { prop: "yh", label: "åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "cj", label: "æ½æ£", editable: "false", type: "text" }, |
|---|
| | | { prop: "bx", label: "åå½¢", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmwr", label: "çé¢æ±¡æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "sg", label: "åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "jyzz", label: "å·ç¼ç±è¤¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "ldpy", label: "èç¹å移", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmyh", label: "çé¢åç", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const sh14_gjj_fpHeader = reactive([ |
|---|
| | | { prop: "bx", label: "åå½¢", editable: "false", type: "text" }, |
|---|
| | | { prop: "wj", label: "æ è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "dj", label: "çé¢æ±¡æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "jj", label: "æè¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "hs", label: "æº
è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "cq", label: "å伤", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmwr", label: "å²ç¼º", editable: "false", type: "text" }, |
|---|
| | | { prop: "sg", label: "åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "jyzz", label: "å·ç¼ç±è¤¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "ldpy", label: "èç¹å移", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmyh", label: "çé¢åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmbd", label: "çé¢ç½ç¹", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const sh14_jg_fpHeader = reactive([ |
|---|
| | | { prop: "bx", label: "åå½¢", editable: "false", type: "text" }, |
|---|
| | | { prop: "wj", label: "æ è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "dj", label: "çé¢æ±¡æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "jj", label: "æè¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "hs", label: "æº
è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "cq", label: "å伤", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmwr", label: "å²ç¼º", editable: "false", type: "text" }, |
|---|
| | | { prop: "sg", label: "åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "jyzz", label: "å·ç¼ç±è¤¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "ldpy", label: "èç¹å移", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmyh", label: "çé¢åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmbd", label: "çé¢ç½ç¹", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const sh14_yt_fpHeader = reactive([ |
|---|
| | | { prop: "cy", label: "éå½±", editable: "false", type: "text" }, |
|---|
| | | { prop: "sc", label: "è²å·®", editable: "false", type: "text" }, |
|---|
| | | { prop: "mr", label: "墨æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "ly", label: "æ¼å°", editable: "false", type: "text" }, |
|---|
| | | { prop: "zzd", label: "æè´¨ç¹", editable: "false", type: "text" }, |
|---|
| | | { prop: "nys", label: "å
å°è²", editable: "false", type: "text" }, |
|---|
| | | { prop: "ldwy", label: "èç¹å¤ç§»", editable: "false", type: "text" }, |
|---|
| | | { prop: "nwtcs", label: "å
å¤æ¶æ¦ä¼¤", editable: "false", type: "text" }, |
|---|
| | | { prop: "lt", label: "æ¼æ¶", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const sh14_zjHeader = reactive([ |
|---|
| | | { prop: "jy", label: "æ£éª", editable: "false", type: "text" }, |
|---|
| | | { prop: "sy", label: "è¯éª", editable: "false", type: "text" }, |
|---|
| | | { prop: "hj", label: "", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | const sh14_zj_fpHeader = reactive([ |
|---|
| | | { prop: "kg", label: "å¡ç", editable: "false", type: "text" }, |
|---|
| | | { prop: "bx", label: "åå½¢", editable: "false", type: "text" }, |
|---|
| | | { prop: "wj", label: "æ è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmwr", label: "çé¢æ±¡æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "dj", label: "æè¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "jj", label: "æº
è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "hs", label: "å伤", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "å°éåºå", |
|---|
| | | b2: "å²åºåºå", |
|---|
| | | b3: "注è¶æºåºå", |
|---|
| | | b4: "å
éªæºåºå", |
|---|
| | | b5: "éçåºå", |
|---|
| | | b6: "è´¨æ£", |
|---|
| | | b7: "å°åºç", |
|---|
| | | b8: "产éç»è®¡", |
|---|
| | | b9: "å°åºç", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let sh14_cc_fpHeaderData = ref([]); |
|---|
| | | let sh14_gjj_fpHeaderData = ref([]); |
|---|
| | | let sh14_jg_fpHeaderData = ref([]); |
|---|
| | | let sh14_yt_fpHeaderData = ref([]); |
|---|
| | | let sh14_zjHeaderData = ref([]); |
|---|
| | | let sh14_zj_fpHeaderData = ref([]); |
|---|
| | | let chanliangHeaderData = ref([]); |
|---|
| | | let feipinfpHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | function checkValue(obj) { |
|---|
| | | if (obj == null) return [{ total: 0 }]; |
|---|
| | | return [obj]; |
|---|
| | | } |
|---|
| | | function checkTotal(obj) { |
|---|
| | | if (obj == null) return null; |
|---|
| | | return obj.total; |
|---|
| | | } |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong14VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g14", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | |
|---|
| | | sh14_cc_fpHeaderData.value = [data.data.sh14CcFp]; |
|---|
| | | |
|---|
| | | sh14_gjj_fpHeaderData.value = [data.data.sh14GjjFp]; |
|---|
| | | sh14_jg_fpHeaderData.value = [data.data.sh14JgFp]; |
|---|
| | | sh14_yt_fpHeaderData.value = [ |
|---|
| | | data.data.ytFp == null ? [] : data.data.ytFp, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | sh14_zjHeaderData.value = [data.data.sh14Zj]; |
|---|
| | | sh14_zj_fpHeaderData.value = [data.data.sh14ZjFp]; |
|---|
| | | |
|---|
| | | chanliangHeaderData.value = [data.data.lineChanliangtongji]; |
|---|
| | | feipinfpHeaderData.value = [data.data.feipinGuan]; |
|---|
| | | |
|---|
| | | let zhujiao = { |
|---|
| | | zjkg: data.data.sh14ZjFp.kg, |
|---|
| | | zjbx: data.data.sh14ZjFp.bx, |
|---|
| | | zjwj: data.data.sh14ZjFp.wj, |
|---|
| | | zjjj: data.data.sh14ZjFp.jj, |
|---|
| | | zjdj: data.data.sh14ZjFp.dj, |
|---|
| | | zjhs: data.data.sh14ZjFp.hj, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let gjj = { |
|---|
| | | gjjsg: data.data.sh14GjjFp.sg, |
|---|
| | | gjjdj: data.data.sh14GjjFp.dj, |
|---|
| | | gjjcq: data.data.sh14GjjFp.cq, |
|---|
| | | gjjjyzz: data.data.sh14GjjFp.gmzz, |
|---|
| | | gjjgmwr: data.data.sh14GjjFp.gmwr, |
|---|
| | | gjjldpy: data.data.sh14GjjFp.ldpy, |
|---|
| | | gjjbx: data.data.sh14GjjFp.bx, |
|---|
| | | gjjgmyh: data.data.sh14GjjFp.gmyh, |
|---|
| | | gjjgmbd: data.data.sh14GjjFp.gmbd, |
|---|
| | | gjjhs: data.data.sh14GjjFp.hs, |
|---|
| | | gjjwj: data.data.sh14GjjFp.wj, |
|---|
| | | gjjjj: data.data.sh14GjjFp.jj, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | let jg = { |
|---|
| | | jgsg: data.data.sh14JgFp.sg, |
|---|
| | | jgdj: data.data.sh14JgFp.dj, |
|---|
| | | jgcq: data.data.sh14JgFp.cq, |
|---|
| | | jgjyzz: data.data.sh14JgFp.gmzz, |
|---|
| | | jggmwr: data.data.sh14JgFp.gmwr, |
|---|
| | | jgldpy: data.data.sh14JgFp.ldpy, |
|---|
| | | jgbx: data.data.sh14JgFp.bx, |
|---|
| | | jggmyh: data.data.sh14JgFp.gmyh, |
|---|
| | | jggmbd: data.data.sh14JgFp.gmbd, |
|---|
| | | jghs: data.data.sh14JgFp.hs, |
|---|
| | | jgwj: data.data.sh14JgFp.wj, |
|---|
| | | jgjj: data.data.sh14JgFp.jj, |
|---|
| | | }; |
|---|
| | | let zj = { |
|---|
| | | t1: checkTotal(data.data.feipinYintie), |
|---|
| | | t2: checkTotal(data.data.sh14CcFp), |
|---|
| | | t3: checkTotal(data.data.sh14ZjFp), |
|---|
| | | t4: checkTotal(data.data.sh14GjjFp), |
|---|
| | | t5: checkTotal(data.data.sh14JgFp), |
|---|
| | | |
|---|
| | | t6: checkTotal(data.data.feipinGuan), |
|---|
| | | }; |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | ...data.data.ytFp, |
|---|
| | | ...data.data.sh14CcFp, |
|---|
| | | ...zhujiao, |
|---|
| | | ...gjj, |
|---|
| | | ...jg, |
|---|
| | | ...data.data.sh14Zj, |
|---|
| | | ...data.data.feipinGuan, |
|---|
| | | ...zj, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | sh14CcFp: sh14_cc_fpHeaderData.value[0], |
|---|
| | | sh14GjjFp: sh14_gjj_fpHeaderData.value[0], |
|---|
| | | sh14JgFp: sh14_jg_fpHeaderData.value[0], |
|---|
| | | ytFp: sh14_yt_fpHeaderData.value[0], |
|---|
| | | sh14Zj: sh14_zjHeaderData.value[0], |
|---|
| | | sh14ZjFp: sh14_zj_fpHeaderData.value[0], |
|---|
| | | lineChanliangtongji: chanliangHeaderData.value[0], |
|---|
| | | feipinGuan: feipinfpHeaderData.value[0], |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong14VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "502åºçç产æ
åµæ¥å"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g14.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "502åºçç产æ
åµæ¥å.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | sh14_cc_fpHeaderData, |
|---|
| | | sh14_gjj_fpHeaderData, |
|---|
| | | sh14_jg_fpHeaderData, |
|---|
| | | sh14_yt_fpHeaderData, |
|---|
| | | sh14_zjHeaderData, |
|---|
| | | sh14_zj_fpHeaderData, |
|---|
| | | sh14_cc_fpHeader, |
|---|
| | | sh14_gjj_fpHeader, |
|---|
| | | sh14_jg_fpHeader, |
|---|
| | | sh14_yt_fpHeader, |
|---|
| | | sh14_zjHeader, |
|---|
| | | sh14_zj_fpHeader, |
|---|
| | | chanliangHeaderData, |
|---|
| | | chanliangHeader, |
|---|
| | | feipinfpHeaderData, |
|---|
| | | feipinfpHeader, |
|---|
| | | chong14VoLast, |
|---|
| | | chong14VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>å¶çä¸çº¿ç产åæºè®°å½è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="shengchan_tjHeaderData" |
|---|
| | | :tableHeader="shengchan_tjHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong15VoLast, chong15VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const shengchan_tjHeader = reactive([ |
|---|
| | | { prop: "jitai", label: "æºå°", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "tingjiTime", |
|---|
| | | label: "åæºæ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "guzhangYy", |
|---|
| | | label: "æ
éåå ", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "tiaozhengFf", |
|---|
| | | label: "è°æ´æ¹æ³", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "jianceItem", |
|---|
| | | label: "æ£æµé¡¹ç®", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | prop: "kaijiTime", |
|---|
| | | label: "å¼æºæ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "jianceJg", label: "æ£æµç»æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "queren_name", label: "确认人", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "tiaozhengTime", |
|---|
| | | label: "è°æ´æ¶é¿", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { prop: "chuliName", label: "å¤ç人", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let shengchan_tjHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong15VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g15", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | shengchan_tjHeaderData.value = data.data.shengchanTjList; |
|---|
| | | // shengchan_tjHeaderData.value.filter((item) => { |
|---|
| | | // if( item.shijian != null ) |
|---|
| | | // item.shijian11 = item.shijian.substr(0, 10); |
|---|
| | | |
|---|
| | | // return item; |
|---|
| | | // }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: shengchan_tjHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | shengchanTjList: shengchan_tjHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong15VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "å¶çä¸çº¿ç产åæºè®°å½è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g15.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "å¶çä¸çº¿ç产åæºè®°å½è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | shengchan_tjHeader, |
|---|
| | | shengchan_tjHeaderData, |
|---|
| | | chong15VoLast, |
|---|
| | | chong15VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>502åºçå
æ£æºè®°å½è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="g_gyjHeaderData" |
|---|
| | | :tableHeader="g_gyjHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong16VoLast, chong16VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const g_gyjHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { prop: "csr", label: "æµè¯äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "wj", label: "æ è¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "dj", label: "æè¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "hs", label: "å伤", editable: "false", type: "text" }, |
|---|
| | | { prop: "bx", label: "åå½¢", editable: "false", type: "text" }, |
|---|
| | | { prop: "sg", label: "åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "cq", label: "å²ç¼º", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmwr", label: "çé¢æ±¡æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "xctl", label: "é¡å±è±è½", editable: "false", type: "text" }, |
|---|
| | | { prop: "ldpy", label: "èç¹å移", editable: "false", type: "text" }, |
|---|
| | | { prop: "jyzz", label: "å·ç¼ç±è¤¶", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmyh", label: "çé¢åç", editable: "false", type: "text" }, |
|---|
| | | { prop: "gmbd", label: "çé¢ç½ç¹", editable: "false", type: "text" }, |
|---|
| | | { prop: "ycqk", label: "å¼å¸¸æ
åµ", editable: "false", type: "text" }, |
|---|
| | | { prop: "zjqr", label: "è´¨æ£ç¡®è®¤", editable: "false", type: "text" }, |
|---|
| | | { prop: "lbqr", label: "é¢ç确认", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let g_gyjHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong16VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g16", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | g_gyjHeaderData.value = data.data.gyj16List; |
|---|
| | | g_gyjHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: g_gyjHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | gyj16List: g_gyjHeaderData.value, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong16VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "502åºçå
æ£æºè®°å½è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g16.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "502åºçå
æ£æºè®°å½è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | g_gyjHeader, |
|---|
| | | g_gyjHeaderData, |
|---|
| | | chong16VoLast, |
|---|
| | | chong16VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>é²æè¶æ¡ç¹æ£è¡¨17</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="c17_fzjtHeaderData" |
|---|
| | | :tableHeader="c17_fzjtHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong17VoLast, chong17VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const c17_fzjtHeader = reactive([ |
|---|
| | | { prop: "shijian11", label: "æ¶é´", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "ybj", |
|---|
| | | label: "åè¾¹æºä¸æ³¨è¶æºè¾é带ç´è§è¿æ¥å¤", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "ybjCheck", label: "æ£æ¥ç»æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "ybjRenA", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "ybjRenB", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "gjj", label: "å
æ£æºåé¤éé", editable: "false", type: "text" }, |
|---|
| | | { prop: "gjjCheck", label: "æ£æ¥ç»æ", editable: "false", type: "text" }, |
|---|
| | | { prop: "gjjRenA", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "gjjRenB", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "linbA", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | { prop: "linbB", label: "æ£æ¥äºº", editable: "false", type: "text" }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let c17_fzjtHeaderData = ref([]); |
|---|
| | | |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong17VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g17", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | // headData.head.jieban1 = headData.head.jieban.substr(11, 5); |
|---|
| | | // headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5); |
|---|
| | | c17_fzjtHeaderData.value = data.data.c17FzjtList; |
|---|
| | | c17_fzjtHeaderData.value.filter((item) => { |
|---|
| | | if (item.shijian != null) item.shijian11 = item.shijian.substr(11, 5); |
|---|
| | | |
|---|
| | | return item; |
|---|
| | | }); |
|---|
| | | hjData.value = { |
|---|
| | | ...headData.head, |
|---|
| | | t1: c17_fzjtHeaderData.value, |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong17VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "é²æè¶æ¡ç¹æ£è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g17.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "é²æè¶æ¡ç¹æ£è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | c17_fzjtHeader, |
|---|
| | | c17_fzjtHeaderData, |
|---|
| | | chong17VoLast, |
|---|
| | | chong17VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <div class="header_nox"> |
|---|
| | | <el-button type="warning" circle @click="exportWord">ä¸è½½</el-button> |
|---|
| | | <el-button type="primary" circle v-show="!editable" @click="editable = !editable">ç¼è¾</el-button> |
|---|
| | | <el-button type="primary" v-show=editable @click="saveData">ç¡®å®</el-button> |
|---|
| | | </div> --> |
|---|
| | | <div id="printContent" ref="imageWrapper"> |
|---|
| | | <h3>ç线ç»è®¡è¡¨</h3> |
|---|
| | | <div class="title_form"> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç产线ï¼</span> |
|---|
| | | <span>{{ headData.head.shengcx }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>产åï¼</span> |
|---|
| | | <span>{{ headData.head.chanpin }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥æï¼</span> |
|---|
| | | <span>{{ headData.head.reportTime }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>ç次ï¼</span> |
|---|
| | | <span>{{ headData.head.banci }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>è®°å½åï¼</span> |
|---|
| | | <span>{{ headData.head.jiluyuan }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>æ¥çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jieban1 }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="title_form_input"> |
|---|
| | | <span>交çæ¶é´ï¼</span> |
|---|
| | | <span>{{ headData.head.jiaoban1 }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <el-divider /> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="g18ChanTotalHeaderData" |
|---|
| | | :tableHeader="g18ChanTotalHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | |
|---|
| | | <HJTABLE |
|---|
| | | :SClist="g18ChanListHeaderData" |
|---|
| | | :tableHeader="g18ChanListHeader" |
|---|
| | | :editable="editable" |
|---|
| | | ></HJTABLE> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | const item = { |
|---|
| | | name: "", |
|---|
| | | birth: "", |
|---|
| | | province: "", |
|---|
| | | city: "", |
|---|
| | | address: "", |
|---|
| | | phone: "", |
|---|
| | | }; |
|---|
| | | const header = { |
|---|
| | | prop: "key", |
|---|
| | | label: "èªå®ä¹", |
|---|
| | | editable: false, |
|---|
| | | type: "input", |
|---|
| | | }; |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import { chong18VoLast, chong18VoSave } from "@/api/gaixian"; |
|---|
| | | import html2canvas from "html2canvas"; |
|---|
| | | import docxtemplater from "docxtemplater"; |
|---|
| | | import PizZip from "pizzip"; |
|---|
| | | import JSZipUtils from "jszip-utils"; |
|---|
| | | import { saveAs } from "file-saver"; |
|---|
| | | import HJTABLE from "@/components/arj/arj-table"; |
|---|
| | | import { useRouter } from "vue-router"; |
|---|
| | | import { headReport } from "@/api/head"; |
|---|
| | | export default { |
|---|
| | | name: "", |
|---|
| | | components: { HJTABLE }, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const router = useRouter(); |
|---|
| | | const g18ChanListHeader = reactive([ |
|---|
| | | { prop: "chanliang", label: "产é", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "createdTime", |
|---|
| | | label: "å建æ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "pinming", label: "åå", editable: "false", type: "text" }, |
|---|
| | | { prop: "cytpc", label: "彩å°éæ¹æ¬¡", editable: "false", type: "text" }, |
|---|
| | | { prop: "daijfpl", label: "å¾
æ£åºåé", editable: "false", type: "text" }, |
|---|
| | | { prop: "daijp", label: "å¾
æ£åå æ°é", editable: "false", type: "text" }, |
|---|
| | | { prop: "feipl", label: "åºåç", editable: "false", type: "text" }, |
|---|
| | | { prop: "shengcfp", label: "ç产åºå", editable: "false", type: "text" }, |
|---|
| | | { prop: "yinfl", label: "å°åºç", editable: "false", type: "text" }, |
|---|
| | | { prop: "yinsfp", label: "å°å·åºå", editable: "false", type: "text" }, |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | const g18ChanTotalHeader= reactive([ |
|---|
| | | { prop: "chanliangTotal", label: "产é", editable: "false", type: "text" }, |
|---|
| | | { |
|---|
| | | prop: "createdTime", |
|---|
| | | label: "å建æ¶é´", |
|---|
| | | editable: "false", |
|---|
| | | type: "text", |
|---|
| | | }, |
|---|
| | | { prop: "cytpcTotal", label: "彩å°éæ¹æ¬¡", editable: "false", type: "text" }, |
|---|
| | | { prop: "daijfplTotal", label: "å¾
æ£åºåé", editable: "false", type: "text" }, |
|---|
| | | { prop: "daijpTotal", label: "å¾
æ£åå æ°é", editable: "false", type: "text" }, |
|---|
| | | { prop: "feiplTotal", label: "åºåç", editable: "false", type: "text" }, |
|---|
| | | { prop: "shengcfpTotal", label: "ç产åºå", editable: "false", type: "text" }, |
|---|
| | | { prop: "yinflTotal", label: "å°åºç", editable: "false", type: "text" }, |
|---|
| | | { prop: "yinsfpTotal", label: "å°å·åºå", editable: "false", type: "text" }, |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | let tableData = reactive([]); |
|---|
| | | const formInline = reactive({ |
|---|
| | | user: "", |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | const imageWrapper = ref(null); |
|---|
| | | |
|---|
| | | let headData = reactive({ |
|---|
| | | head: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let labelName = { |
|---|
| | | b1: "ç产记å½", |
|---|
| | | b2: "产åè´¨éè®°å½", |
|---|
| | | b3: "åºæ¬å°ºå¯¸", |
|---|
| | | b4: "å¤è§æ£æµé¡¹ç®", |
|---|
| | | }; |
|---|
| | | let editable = ref(false); |
|---|
| | | |
|---|
| | | let SClist = ref([]); |
|---|
| | | let hjData = ref({}); |
|---|
| | | |
|---|
| | | let g18ChanTotalHeaderData = ref([]); |
|---|
| | | let g18ChanListHeaderData = ref([]); |
|---|
| | | const submitForm = () => {}; |
|---|
| | | |
|---|
| | | const handleEdit = (row) => { |
|---|
| | | row.editable = true; |
|---|
| | | }; |
|---|
| | | const handleDelete = (index) => { |
|---|
| | | this.tableData.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const prepend = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index, 0, item); |
|---|
| | | }; |
|---|
| | | const append = (index) => { |
|---|
| | | item.editable = true; |
|---|
| | | this.tableData.splice(index + 1, 0, item); |
|---|
| | | }; |
|---|
| | | const deleteCurrentColumn = (index) => { |
|---|
| | | this.tableHeader.splice(index, 1); |
|---|
| | | }; |
|---|
| | | const insertBefore = (index) => { |
|---|
| | | header.editable = true; |
|---|
| | | this.tableHeader.splice(index, 0, header); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const getListData = async () => { |
|---|
| | | const data = await chong18VoLast(); |
|---|
| | | |
|---|
| | | console.log(".........g18", data); |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | function parse(data) { |
|---|
| | | headData.head = data.data.head; |
|---|
| | | if (headData.head.reportTime != null) |
|---|
| | | headData.head.reportTime = headData.head.reportTime.substr(0, 10); |
|---|
| | | g18ChanTotalHeaderData.value = [data.data.g18ChanTotal] |
|---|
| | | g18ChanListHeaderData = data.data.g18ChanliangtongjiList |
|---|
| | | } |
|---|
| | | const saveData = async () => { |
|---|
| | | editable = false; |
|---|
| | | let data = { |
|---|
| | | head: headData.head, |
|---|
| | | }; |
|---|
| | | console.log("save data...", data); |
|---|
| | | const dt = await chong18VoSave(data); |
|---|
| | | if (dt.code == 0) { |
|---|
| | | ElMessage({ |
|---|
| | | message: "ä¿®æ¹æå", |
|---|
| | | type: "success", |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | console.log(dt); |
|---|
| | | }; |
|---|
| | | //æªå¾ |
|---|
| | | const toImage = () => { |
|---|
| | | html2canvas(imageWrapper.value, { |
|---|
| | | logging: false, |
|---|
| | | allowTaint: true, |
|---|
| | | scale: window.devicePixelRatio, |
|---|
| | | // width: shareContent.clientWidth, //dom åå§å®½åº¦ |
|---|
| | | // height: shareContent.clientHeight, |
|---|
| | | scrollY: 0, |
|---|
| | | scrollX: 0, |
|---|
| | | useCORS: true, |
|---|
| | | backgroundColor: "#ffffff", |
|---|
| | | }).then(function (canvas) { |
|---|
| | | // console.log(canvas); |
|---|
| | | let imgUrl = canvas.toDataURL("image/png"); |
|---|
| | | var tempLink = document.createElement("a"); // å建ä¸ä¸ªaæ ç¾ |
|---|
| | | tempLink.style.display = "none"; |
|---|
| | | tempLink.href = imgUrl; |
|---|
| | | tempLink.setAttribute("download", "é²æè¶æ¡ç¹æ£è¡¨"); // ç»aæ ç¾æ·»å ä¸è½½å±æ§ |
|---|
| | | |
|---|
| | | if (typeof tempLink.download === "undefined") { |
|---|
| | | tempLink.setAttribute("target", "_blank"); |
|---|
| | | } |
|---|
| | | document.body.appendChild(tempLink); // å°aæ ç¾æ·»å å°bodyå½ä¸ |
|---|
| | | tempLink.click(); // å¯å¨ä¸è½½ |
|---|
| | | document.body.removeChild(tempLink); // ä¸è½½å®æ¯å é¤aæ ç¾ |
|---|
| | | window.URL.revokeObjectURL(imgUrl); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // ç¹å»å¯¼åºword |
|---|
| | | function exportWord() { |
|---|
| | | // 读å并è·å¾æ¨¡æ¿æ件çäºè¿å¶å
容 |
|---|
| | | JSZipUtils.getBinaryContent("g17.docx", function (error, content) { |
|---|
| | | // input.docxæ¯æ¨¡æ¿ãæ们å¨å¯¼åºçæ¶åï¼ä¼æ ¹æ®æ¤æ¨¡æ¿æ¥å¯¼åºå¯¹åºçæ°æ® |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | if (error) { |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // å建ä¸ä¸ªJSZipå®ä¾ï¼å
容为模æ¿çå
容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // å建并å è½½docxtemplaterå®ä¾å¯¹è±¡ |
|---|
| | | |
|---|
| | | let doc = new docxtemplater().loadZip(zip).setOptions({ |
|---|
| | | nullGetter: function () { |
|---|
| | | return ""; |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | // 设置模æ¿åéçå¼ |
|---|
| | | doc.setData({ |
|---|
| | | ...hjData.value, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // ç¨æ¨¡æ¿åéçå¼æ¿æ¢ææ模æ¿åé |
|---|
| | | doc.render(); |
|---|
| | | } catch (error) { |
|---|
| | | // æåºå¼å¸¸ |
|---|
| | | let e = { |
|---|
| | | message: error.message, |
|---|
| | | name: error.name, |
|---|
| | | stack: error.stack, |
|---|
| | | properties: error.properties, |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({ error: e })); |
|---|
| | | throw error; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // çæä¸ä¸ªä»£è¡¨docxtemplater对象çzipæ件ï¼ä¸æ¯ä¸ä¸ªçå®çæ件ï¼èæ¯å¨å
åä¸çè¡¨ç¤ºï¼ |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: |
|---|
| | | "application/vnd.openxmlformats-officedocument.wordprocessingml.document", |
|---|
| | | }); |
|---|
| | | // å°ç®æ æ件对象ä¿å为ç®æ ç±»åçæ件ï¼å¹¶å½å |
|---|
| | | saveAs(out, "é²æè¶æ¡ç¹æ£è¡¨.docx"); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | const getRouterData = async (req) => { |
|---|
| | | // console.log("req....", req); |
|---|
| | | const data = await headReport(req); |
|---|
| | | //console.log("jbj router data.....", data); |
|---|
| | | |
|---|
| | | parse(data); |
|---|
| | | }; |
|---|
| | | onMounted(() => { |
|---|
| | | //console.log("rrrrrrrrrrr", router.currentRoute.value.query); |
|---|
| | | let head_id = router.currentRoute.value.query.id; |
|---|
| | | let leixing = router.currentRoute.value.query.leixing; |
|---|
| | | // console.log("vue recv....", head_id, leixing); |
|---|
| | | if (head_id == null) { |
|---|
| | | getListData(); |
|---|
| | | } else { |
|---|
| | | getRouterData({ head_id: head_id, leixing: leixing }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | return { |
|---|
| | | saveData, |
|---|
| | | submitForm, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | insertBefore, |
|---|
| | | deleteCurrentColumn, |
|---|
| | | append, |
|---|
| | | prepend, |
|---|
| | | handleDelete, |
|---|
| | | handleEdit, |
|---|
| | | editable, |
|---|
| | | getListData, |
|---|
| | | headData, |
|---|
| | | toImage, |
|---|
| | | imageWrapper, |
|---|
| | | labelName, |
|---|
| | | exportWord, |
|---|
| | | g18ChanTotalHeader, |
|---|
| | | g18ChanTotalHeaderData, |
|---|
| | | g18ChanListHeaderData, |
|---|
| | | g18ChanListHeader, |
|---|
| | | chong18VoLast, |
|---|
| | | chong18VoSave, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .header_nox { |
|---|
| | | text-align: right; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #printContent h3 { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 40px; |
|---|
| | | font-size: 26px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-around; |
|---|
| | | align-items: center; |
|---|
| | | // margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title_form_input { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const c13_ctsyHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"name","label":"å称","editable":"false","type":"text"},{"prop":"pc","label":"å°å·æ¹æ¬¡","editable":"false","type":"text"},{"prop":"bh","label":"å
å·","editable":"false","type":"text"},{"prop":"ytzs","label":"åéå¼ æ°","editable":"false","type":"text"},{"prop":"yczs","label":"å·²å²å¼ æ°","editable":"false","type":"text"},{"prop":"jieb","label":"æ¥çå¼ æ°","editable":"false","type":"text"},{"prop":"jbsy","label":"交çå©ä½","editable":"false","type":"text"},{"prop":"ktzs","label":"äºéå¼ æ°","editable":"false","type":"text"},{"prop":"yfzs","label":"å°åºå¼ æ°","editable":"false","type":"text"},{"prop":"ytcj","label":"å°éå家","editable":"false","type":"text"},{"prop":"bz","label":"å¤æ³¨","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c17_fzjtHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"ybj","label":"åè¾¹æºä¸æ³¨è¶æºè¾é带ç´è§è¿æ¥å¤","editable":"false","type":"text"},{"prop":"ybj_check","label":"æ£æ¥ç»æ","editable":"false","type":"text"},{"prop":"ybj_ren_a","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"ybj_ren_b","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"gjj","label":"å
æ£æºåé¤éé","editable":"false","type":"text"},{"prop":"gjj_check","label":"æ£æ¥ç»æ","editable":"false","type":"text"},{"prop":"gjj_ren_a","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"gjj_ren_b","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"linb_a","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"linb_b","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c2_checkHeader = reactive([[{"prop":"no","label":"åºå·","editable":"false","type":"text"},{"prop":"sbbw","label":"设å¤é¨ä½","editable":"false","type":"text"},{"prop":"gj","label":"å·¥å
·","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"pdbz","label":"å¤ææ å;ç»æ确认ï¼â 设å¤æ£å¸¸âââï¼â¡è®¾å¤æ æ³ä½¿ç¨âÃâï¼â¢è®¾å¤æé®é¢ââ³âï¼â£è®¾å¤ä¸ä½¿ç¨âââ","editable":"false","type":"text"},{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c3_weekHeader = reactive([[{"prop":"no","label":"åºå·","editable":"false","type":"text"},{"prop":"zq","label":"å¨æ","editable":"false","type":"text"},{"prop":"rhbw","label":"润æ»é¨ä½","editable":"false","type":"text"},{"prop":"ffgj","label":"æ¹æ³å·¥å
·","editable":"false","type":"text"},{"prop":"gj","label":"å·¥å
·","editable":"false","type":"text"},{"prop":"zyl","label":"注油é","editable":"false","type":"text"},{"prop":"pdbz","label":"å¤ææ å","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"week1","label":"第ä¸å¨","editable":"false","type":"text"},{"prop":"week2","label":"第äºå¨","editable":"false","type":"text"},{"prop":"week3","label":"第ä¸å¨","editable":"false","type":"text"},{"prop":"week4","label":"第åå¨","editable":"false","type":"text"},{"prop":"oper1","label":"æä½å1","editable":"false","type":"text"},{"prop":"oper2","label":"æä½å2","editable":"false","type":"text"},{"prop":"lingb1","label":"é¢ç1","editable":"false","type":"text"},{"prop":"lingb2","label":"é¢ç2","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c4_cleanHeader = reactive([[{"prop":"qjbw","label":"æ¸
æ´é¨ä½","editable":"false","type":"text"},{"prop":"qjbz","label":"æ¸
æ´æ å","editable":"false","type":"text"},{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"zeren","label":"责任人","editable":"false","type":"text"},{"prop":"jcr","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"xg","label":"注è¶æºæ¸
æ´è®°å½","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c_baseHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"xm","label":"æ£æµé¡¹ç®","editable":"false","type":"text"},{"prop":"bzz","label":"æ åå¼","editable":"false","type":"text"},{"prop":"no1","label":"1#模","editable":"false","type":"text"},{"prop":"no2","label":"2#模","editable":"false","type":"text"},{"prop":"no3","label":"3#模","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c_tieqkHeader = reactive([[{"prop":"jiebtsy","label":"æ¥çéå©ä½","editable":"false","type":"text"},{"prop":"jiaobtsy","label":"交çéå©ä½","editable":"false","type":"text"},{"prop":"ctzl","label":"å²éæ»é","editable":"false","type":"text"},{"prop":"kgs","label":"äºçæ°","editable":"false","type":"text"},{"prop":"yf","label":"å°åº","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const c_wgHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"wgjc","label":"å¤è§æ£æµ","editable":"false","type":"text"},{"prop":"qxyy","label":"缺é·åå ","editable":"false","type":"text"},{"prop":"cstz","label":"æªæ½è°æ´","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const g_gyjHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"csr","label":"æµè¯äºº","editable":"false","type":"text"},{"prop":"wj","label":"æ è¶","editable":"false","type":"text"},{"prop":"dj","label":"æè¶","editable":"false","type":"text"},{"prop":"hs","label":"å伤","editable":"false","type":"text"},{"prop":"bx","label":"åå½¢","editable":"false","type":"text"},{"prop":"sg","label":"åç","editable":"false","type":"text"},{"prop":"cq","label":"å²ç¼º","editable":"false","type":"text"},{"prop":"gmwr","label":"çé¢æ±¡æ","editable":"false","type":"text"},{"prop":"xctl","label":"é¡å±è±è½","editable":"false","type":"text"},{"prop":"ldpy","label":"èç¹å移","editable":"false","type":"text"},{"prop":"jyzz","label":"å·ç¼ç±è¤¶","editable":"false","type":"text"},{"prop":"gmyh","label":"çé¢åç","editable":"false","type":"text"},{"prop":"gmbd","label":"çé¢ç½ç¹","editable":"false","type":"text"},{"prop":"ycqk","label":"å¼å¸¸æ
åµ","editable":"false","type":"text"},{"prop":"zjqr","label":"è´¨æ£ç¡®è®¤","editable":"false","type":"text"},{"prop":"lbqr","label":"é¢ç确认","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const jg10_xkHeader = reactive([[{"prop":"riqi","label":"æ¥æ","editable":"false","type":"text"},{"prop":"ry","label":"人å","editable":"false","type":"text"},{"prop":"bz","label":"å¤æ³¨","editable":"false","type":"text"},{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const jg11_qjHeader = reactive([[{"prop":"riqi","label":"æ¥æ","editable":"false","type":"text"},{"prop":"qjbw","label":"æ¸
æ´é¨ä½","editable":"false","type":"text"},{"prop":"qjbz","label":"æ¸
æ´æ å","editable":"false","type":"text"},{"prop":"qjsj","label":"æ¸
æ´æ¶é´","editable":"false","type":"text"},{"prop":"zrr","label":"责任人","editable":"false","type":"text"},{"prop":"jcr","label":"æ£æ¥äººç¡®è®¤","editable":"false","type":"text"},{"prop":"wsxg","label":"æ¸
æ´åå«çææ","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const jg9_cpzlHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"wgjc","label":"å¤è§æ£éª","editable":"false","type":"text"},{"prop":"shijian2","label":"æ¶é´2","editable":"false","type":"text"},{"prop":"mtsljj","label":"æ¯æ¡æ°éæ£éª","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const jg9_scjlHeader = reactive([[{"prop":"jbscpl","label":"æ¥çæ¶æåé","editable":"false","type":"text"},{"prop":"syzbsl","label":"使ç¨çº¸æ¿æ°é","editable":"false","type":"text"},{"prop":"jbssy","label":"交çæ¶å©ä½æåé","editable":"false","type":"text"},{"prop":"rsdsl","label":"使ç¨ç缩è¢æ°é","editable":"false","type":"text"},{"prop":"cpbs","label":"æåå
æ°","editable":"false","type":"text"},{"prop":"dbdsl","label":"使ç¨æå
带æ°é","editable":"false","type":"text"},{"prop":"crmsl","label":"使ç¨ç¼ ç»èæ°é","editable":"false","type":"text"},{"prop":"sxmsl","label":"使ç¨èå½¢èæ°é","editable":"false","type":"text"},{"prop":"tpsl","label":"使ç¨æçæ°é","editable":"false","type":"text"},{"prop":"fpsl","label":"åºåæ°é","editable":"false","type":"text"},{"prop":"bz","label":"å¤æ³¨","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_cc_fpHeader = reactive([[{"prop":"cq","label":"å²ç¼º","editable":"false","type":"text"},{"prop":"kg","label":"å¡ç","editable":"false","type":"text"},{"prop":"yh","label":"åç","editable":"false","type":"text"},{"prop":"cj","label":"æ½æ£","editable":"false","type":"text"},{"prop":"bx","label":"åå½¢","editable":"false","type":"text"},{"prop":"gmwr","label":"çé¢æ±¡æ","editable":"false","type":"text"},{"prop":"sg","label":"åç","editable":"false","type":"text"},{"prop":"jyzz","label":"å·ç¼ç±è¤¶","editable":"false","type":"text"},{"prop":"ldpy","label":"èç¹å移","editable":"false","type":"text"},{"prop":"gmyh","label":"çé¢åç","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_gjj_fpHeader = reactive([[{"prop":"bx","label":"åå½¢","editable":"false","type":"text"},{"prop":"wj","label":"æ è¶","editable":"false","type":"text"},{"prop":"dj","label":"çé¢æ±¡æ","editable":"false","type":"text"},{"prop":"jj","label":"æè¶","editable":"false","type":"text"},{"prop":"hs","label":"æº
è¶","editable":"false","type":"text"},{"prop":"cq","label":"å伤","editable":"false","type":"text"},{"prop":"gmwr","label":"å²ç¼º","editable":"false","type":"text"},{"prop":"sg","label":"åç","editable":"false","type":"text"},{"prop":"jyzz","label":"å·ç¼ç±è¤¶","editable":"false","type":"text"},{"prop":"ldpy","label":"èç¹å移","editable":"false","type":"text"},{"prop":"gmyh","label":"çé¢åç","editable":"false","type":"text"},{"prop":"gmbd","label":"çé¢ç½ç¹","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_jg_fpHeader = reactive([[{"prop":"bx","label":"åå½¢","editable":"false","type":"text"},{"prop":"wj","label":"æ è¶","editable":"false","type":"text"},{"prop":"dj","label":"çé¢æ±¡æ","editable":"false","type":"text"},{"prop":"jj","label":"æè¶","editable":"false","type":"text"},{"prop":"hs","label":"æº
è¶","editable":"false","type":"text"},{"prop":"cq","label":"å伤","editable":"false","type":"text"},{"prop":"gmwr","label":"å²ç¼º","editable":"false","type":"text"},{"prop":"sg","label":"åç","editable":"false","type":"text"},{"prop":"jyzz","label":"å·ç¼ç±è¤¶","editable":"false","type":"text"},{"prop":"ldpy","label":"èç¹å移","editable":"false","type":"text"},{"prop":"gmyh","label":"çé¢åç","editable":"false","type":"text"},{"prop":"gmbd","label":"çé¢ç½ç¹","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_yt_fpHeader = reactive([[{"prop":"cy","label":"éå½±","editable":"false","type":"text"},{"prop":"sc","label":"è²å·®","editable":"false","type":"text"},{"prop":"mr","label":"墨æ","editable":"false","type":"text"},{"prop":"ly","label":"æ¼å°","editable":"false","type":"text"},{"prop":"zzd","label":"æè´¨ç¹","editable":"false","type":"text"},{"prop":"nys","label":"å
å°è²","editable":"false","type":"text"},{"prop":"ldwy","label":"èç¹å¤ç§»","editable":"false","type":"text"},{"prop":"nwtcs","label":"å
å¤æ¶æ¦ä¼¤","editable":"false","type":"text"},{"prop":"lt","label":"æ¼æ¶","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_zjHeader = reactive([[{"prop":"jy","label":"","editable":"false","type":"text"},{"prop":"sy","label":"","editable":"false","type":"text"},{"prop":"hj","label":"","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"","editable":"false","type":"text"},{"prop":"REVISION","label":"","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"","editable":"false","type":"text"}]]); |
|---|
| | | const sh14_zj_fpHeader = reactive([[{"prop":"kg","label":"å¡ç","editable":"false","type":"text"},{"prop":"bx","label":"åå½¢","editable":"false","type":"text"},{"prop":"wj","label":"æ è¶","editable":"false","type":"text"},{"prop":"gmwr","label":"çé¢æ±¡æ","editable":"false","type":"text"},{"prop":"dj","label":"æè¶","editable":"false","type":"text"},{"prop":"jj","label":"æº
è¶","editable":"false","type":"text"},{"prop":"hs","label":"å伤","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const sm12_smHeader = reactive([[{"prop":"rq","label":"æ¥æ","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"xhgz","label":"å°åæ ¼è¯","editable":"false","type":"text"},{"prop":"mtsysl","label":"æ¯æ使ç¨æ°é","editable":"false","type":"text"},{"prop":"ccpph","label":"产æåæ¹å·","editable":"false","type":"text"},{"prop":"smry","label":"缩è人å","editable":"false","type":"text"},{"prop":"rsmyysl","label":"ç缩è使ç¨æ°é","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj5_baseHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"no1","label":"1#模","editable":"false","type":"text"},{"prop":"no2","label":"2#模","editable":"false","type":"text"},{"prop":"no3","label":"3#模","editable":"false","type":"text"},{"prop":"no4","label":"4#模","editable":"false","type":"text"},{"prop":"hxw","label":"ç箱温","editable":"false","type":"text"},{"prop":"ycw","label":"å¼å¸¸æ¸©","editable":"false","type":"text"},{"prop":"tzcs","label":"è°æ´æªæ½","editable":"false","type":"text"},{"prop":"tzr","label":"è°æ´äººç¾å","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj5_mfjHeader = reactive([[{"prop":"mfjcj","label":"å¯å°è¶å家","editable":"false","type":"text"},{"prop":"mfjxh_ph","label":"å¯å°è¶åå·/æ¹å·","editable":"false","type":"text"},{"prop":"yjl","label":"ç¨è¶é","editable":"false","type":"text"},{"prop":"fp","label":"åºå","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj5_spHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"sudu","label":"é度","editable":"false","type":"text"},{"prop":"yali","label":"åå","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj5_wgHeader = reactive([[{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"wgjc","label":"å¤è§æ£æµ","editable":"false","type":"text"},{"prop":"qxyy","label":"缺é·åå ","editable":"false","type":"text"},{"prop":"cstz","label":"æªæ½è°æ´","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj6_checkHeader = reactive([[{"prop":"no","label":"åºå·","editable":"false","type":"text"},{"prop":"sbbw","label":"设å¤é¨ä½","editable":"false","type":"text"},{"prop":"gj","label":"å·¥å
·","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"pdbz","label":"å¤ææ å;ç»æ确认ï¼â 设å¤æ£å¸¸âââï¼â¡è®¾å¤æ æ³ä½¿ç¨âÃâï¼â¢è®¾å¤æé®é¢ââ³âï¼â£è®¾å¤ä¸ä½¿ç¨âââ","editable":"false","type":"text"},{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj7_weekHeader = reactive([[{"prop":"no","label":"åºå·","editable":"false","type":"text"},{"prop":"zq","label":"å¨æ","editable":"false","type":"text"},{"prop":"whbw","label":"ç»´æ¤é¨ä½","editable":"false","type":"text"},{"prop":"ffgj","label":"æ¹æ³å·¥å
·","editable":"false","type":"text"},{"prop":"zyl","label":"注油é","editable":"false","type":"text"},{"prop":"pdbz","label":"å¤ææ å","editable":"false","type":"text"},{"prop":"banci","label":"ç次","editable":"false","type":"text"},{"prop":"week1","label":"第ä¸å¨","editable":"false","type":"text"},{"prop":"week2","label":"第äºå¨","editable":"false","type":"text"},{"prop":"week3","label":"第ä¸å¨","editable":"false","type":"text"},{"prop":"week4","label":"第åå¨","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| | | const zj8_cleanHeader = reactive([[{"prop":"qjbw","label":"æ¸
æ´é¨ä½","editable":"false","type":"text"},{"prop":"qjbz","label":"æ¸
æ´æ å","editable":"false","type":"text"},{"prop":"shijian","label":"æ¶é´","editable":"false","type":"text"},{"prop":"zeren","label":"责任人","editable":"false","type":"text"},{"prop":"jcr","label":"æ£æ¥äºº","editable":"false","type":"text"},{"prop":"xg","label":"æ¸
æ´åå«çææ","editable":"false","type":"text"},{"prop":"TENANT_ID","label":"ç§æ·å·","editable":"false","type":"text"},{"prop":"REVISION","label":"ä¹è§é","editable":"false","type":"text"},{"prop":"CREATED_BY","label":"å建人","editable":"false","type":"text"},{"prop":"CREATED_TIME","label":"å建æ¶é´","editable":"false","type":"text"},{"prop":"UPDATED_BY","label":"æ´æ°äºº","editable":"false","type":"text"},{"prop":"UPDATED_TIME","label":"æ´æ°æ¶é´","editable":"false","type":"text"}]]); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
|---|
| | | <el-form-item label="éæ©å表"> |
|---|
| | | <el-select v-model="formInline.region" class="m-2" placeholder="Select"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in options" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item> |
|---|
| | | <el-button type="primary" @click="onSubmit">Query</el-button> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | <el-table :data="tableData" style="width: 100%"> |
|---|
| | | <el-table-column prop="date" label="Date" /> |
|---|
| | | <el-table-column prop="name" label="Name" /> |
|---|
| | | <el-table-column prop="address" label="Address" /> |
|---|
| | | <el-table-column label="æä½"> |
|---|
| | | <template #default="scope"> |
|---|
| | | <el-button size="small" @click="details(scope.$index)" |
|---|
| | | >æ¥ç详æ
</el-button |
|---|
| | | > |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | <div class="page"> |
|---|
| | | <el-pagination |
|---|
| | | background |
|---|
| | | layout="prev, pager, next" |
|---|
| | | :page-count="pageData.total" |
|---|
| | | :current-page="pageData.ListData.pageNo" |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import { ref, reactive, onMounted } from "vue"; |
|---|
| | | export default { |
|---|
| | | name: "NewsIndex", |
|---|
| | | components: {}, |
|---|
| | | props: {}, |
|---|
| | | setup(props) { |
|---|
| | | const value = ref(""); |
|---|
| | | const tableData = reactive([]); |
|---|
| | | let pageData = reactive({ |
|---|
| | | ListData: { |
|---|
| | | pageNo: 1, |
|---|
| | | pageSize: 10, |
|---|
| | | }, |
|---|
| | | total: 0, |
|---|
| | | }); |
|---|
| | | const options = [ |
|---|
| | | { |
|---|
| | | value: "Option1", |
|---|
| | | label: "Option1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option2", |
|---|
| | | label: "Option2", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option3", |
|---|
| | | label: "Option3", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option4", |
|---|
| | | label: "Option4", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option5", |
|---|
| | | label: "Option5", |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const formInline = reactive({ |
|---|
| | | region: "", |
|---|
| | | }); |
|---|
| | | //ç¡®å®æç´¢å¨ä½ |
|---|
| | | const onSubmit = () => {}; |
|---|
| | | //请æ±å表æ¹æ³ |
|---|
| | | const getlistData = () => { |
|---|
| | | //计ç®å页æ°é |
|---|
| | | // pageData.total = Math.ceil(data.data.total / pageData.ListData.pageSize) |
|---|
| | | }; |
|---|
| | | // åé¡µå¨ |
|---|
| | | const handleCurrentChange = (val) => { |
|---|
| | | pageData.ListData.pageNo = val; |
|---|
| | | |
|---|
| | | getlistData(); |
|---|
| | | }; |
|---|
| | | //æ¥ç详æ
æé® |
|---|
| | | const details = (val) => {}; |
|---|
| | | return { |
|---|
| | | value, |
|---|
| | | pageData, |
|---|
| | | options, |
|---|
| | | onSubmit, |
|---|
| | | formInline, |
|---|
| | | tableData, |
|---|
| | | handleCurrentChange, |
|---|
| | | details, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .page { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| src/views/history/Index.vue
src/views/history/screenTable.vue
src/views/layout/Index.vue
src/views/layout/components/Aside.vue
src/views/layout/components/Header.vue
src/views/layout/components/Main.vue
src/views/system/Depart.vue
src/views/system/Menu.vue
src/views/system/Role.vue
src/views/system/User.vue
src/views/system/depart/index.vue
src/views/system/departUser/index.vue
src/views/system/menu/index.vue
src/views/system/role/index.vue
src/views/system/user/index.vue
src/views/user/Index copy.vue
src/views/user/Index.vue
src/views/user/screenTable.vue |
