HeaderEdit.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <template>
  2. <header class="header">
  3. <div class="reset-btn">
  4. <i class="el-icon-arrow-left" @click="goback"></i>
  5. <span class="reset-title">{{title || '返回作品'}}</span>
  6. <i class="el-icon-edit edit-title" @click="editTitle"></i>
  7. </div>
  8. <div class="tools">
  9. <div class="next_return">
  10. <div
  11. class="return"
  12. title="撤销"
  13. @click="revocation"
  14. :style="`opacity:${operationList.length>1?'1':'.3'}`"
  15. >
  16. <img class="retutn_icon" src="../assets/images/button_return.png" alt />
  17. <span>撤销</span>
  18. </div>
  19. <div
  20. class="return"
  21. title="恢复"
  22. @click="recover"
  23. :style="`opacity:${nextList.length>0?'1':'.3'}`"
  24. >
  25. <img class="retutn_icon" src="../assets/images/button_next.png" alt />
  26. <span>恢复</span>
  27. </div>
  28. <div class="return" title="分享设置" @click="shareSetting">
  29. <img class="retutn_icon" src="../assets/images/share_setting_edit_nor.png" alt />
  30. <span>分享设置</span>
  31. </div>
  32. <div class="return" title="保存" @click="save">
  33. <img class="retutn_icon" src="../assets/images/save_edit_nor.png" alt />
  34. <span>保存</span>
  35. </div>
  36. <div title="缩放" class="zoom-title">
  37. <span class="size" @click="zoom(false)">-</span>
  38. <div class="zoom-num">
  39. <span
  40. style="font-size:14px;font-family:MicrosoftYaHei;color:rgba(100,107,129,1);line-height:19px"
  41. >{{zoomNum*100}}%</span>
  42. <span
  43. style="font-size:14px;font-family:MicrosoftYaHei;color:rgba(100,107,129,1);line-height:19px;"
  44. >缩放</span>
  45. </div>
  46. <span class="size" @click="zoom(true)">+</span>
  47. </div>
  48. </div>
  49. </div>
  50. <!-- <div class="next_return">
  51. <span class="return" title="撤销" @click="revocation" :style="`opacity:${operationList.length>1?'1':'.3'}`"></span>
  52. <span class="next" title="恢复" @click="recover" :style="`opacity:${nextList.length>0?'1':'.3'}`"></span>
  53. </div>
  54. <el-button @click="grid" class="preview " type="primary" style="margin-left: 50px;">网格参考线</el-button>
  55. <div class="right-panel">
  56. <el-button @click="deploy" class="preview" type="primary" :loading="loading">预览</el-button>-->
  57. <!--<el-button @click="psd"-->
  58. <!--class="preview"-->
  59. <!--type="primary"-->
  60. <!--:loading="loading" style="margin-right: 20px">PSD导入</el-button>-->
  61. <!--<el-upload-->
  62. <!--class="upload-demo"-->
  63. <!--:action="`${appConst}/api/pages/psd`"-->
  64. <!--accept="A/.psd"-->
  65. <!--:on-change="uploadFn">-->
  66. <!--<el-button size="small" type="primary">psd文件导入</el-button>-->
  67. <!--<div slot="tip" class="el-upload__tip">只能上传psd文件</div>-->
  68. <!--</el-upload>-->
  69. <!-- <form id="upload" enctype='multipart/form-data'>
  70. <input type="hidden" id="itemId" />
  71. <input type="file" id="psdFile" name="image" @change="uploadFn">
  72. </form>
  73. </div>-->
  74. <!-- 分享设置 -->
  75. <ShareSetting v-if="isShareSetting" :close="closeShare" :shareModel="shareModel"></ShareSetting>
  76. </header>
  77. </template>
  78. <script>
  79. import tools from "../util/tools";
  80. import api from "../api/editor";
  81. import ShareSetting from "./ShareSetting";
  82. var time = null;
  83. export default {
  84. props: {
  85. goback: Function,
  86. save: Function,
  87. zoom: Function,
  88. title: "",
  89. zoomNum: Number,
  90. shareModel: ""
  91. },
  92. components: {
  93. ShareSetting
  94. },
  95. data() {
  96. return {
  97. loading: false,
  98. operationList: [],
  99. nextList: [],
  100. isShareSetting: false
  101. };
  102. },
  103. beforeCreate() {
  104. window.revocationFlag = false;
  105. },
  106. destroyed() {
  107. this.operationList = [];
  108. this.nextList = [];
  109. },
  110. mounted: function() {
  111. var that = this;
  112. /*var fn=function(e) {
  113. if (90 == e.keyCode && e.ctrlKey)
  114. {
  115. that.revocation()
  116. }
  117. if(88 == e.keyCode && e.ctrlKey){
  118. that.recover()
  119. }
  120. }
  121. document.removeEventListener("keydown",fn)
  122. document.addEventListener("keydown",fn)*/
  123. },
  124. computed: {
  125. obj: function() {
  126. return JSON.stringify(this.$store.state.editor.editorPage);
  127. },
  128. operationFlag: function() {
  129. return this.$store.state.user.operationFlag;
  130. }
  131. },
  132. watch: {
  133. obj: function(v) {
  134. var that = this;
  135. if (!revocationFlag) {
  136. if (that.operationList.length == 0) {
  137. that.operationList.push(v);
  138. }
  139. return;
  140. }
  141. window.hasSaveFlag = false;
  142. clearTimeout(time);
  143. time = setTimeout(function() {
  144. if (that.operationFlag) {
  145. that.nextList = [];
  146. that.operationList.push(v);
  147. }
  148. }, 500);
  149. }
  150. },
  151. methods: {
  152. editTitle() {
  153. console.log("编辑标题");
  154. this.$prompt("请输入测试标题", "提示", {
  155. confirmButtonText: "确定",
  156. cancelButtonText: "取消",
  157. inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
  158. inputErrorMessage: "测试标题不为空",
  159. inputValue: this.title
  160. })
  161. .then(({ value }) => {
  162. let param = {
  163. id: this.shareModel.id,
  164. title: value,
  165. updator: "admin"
  166. };
  167. api.saveTheme(param).then(res => {
  168. if (res.success) {
  169. this.$message.success("保存成功");
  170. this.title = value;
  171. } else {
  172. this.$message.error("数据加载失败,请重试");
  173. }
  174. });
  175. })
  176. .catch(() => {});
  177. },
  178. notempty(arrays) {
  179. for (var i = 0; i < arrays.length; i++) {
  180. if (
  181. arrays[i] == "" ||
  182. arrays[i] == null ||
  183. typeof arrays[i] == "undefined"
  184. ) {
  185. arrays.splice(i, 1);
  186. i--;
  187. } else {
  188. this.$store.dispatch("addElement", arrays[i]);
  189. }
  190. }
  191. return arrays;
  192. },
  193. uploadFn(e) {
  194. var that = this;
  195. var form = document.getElementById("upload"),
  196. formData = new FormData(form);
  197. document.getElementById("itemId").innerText = this.$route.query.itemId;
  198. // this.$store.dispatch('uploadPsd', formData)
  199. const loading = this.$loading({
  200. lock: true,
  201. text: "psd解析中...",
  202. spinner: "el-icon-loading",
  203. background: "rgba(0, 0, 0, 0.7)"
  204. });
  205. try {
  206. api
  207. .uploadPsd(formData)
  208. .then(function(res) {
  209. loading.close();
  210. var res = res;
  211. that.$store.state.editor.editorPage.elements = [];
  212. that.notempty(res["pages"][0].elements);
  213. // that.$store.state.editor.editorPage.elements=res['pages'][0].elements
  214. that.$store.state.editor.editorTheme.title = res["title"];
  215. that.$store.state.editor.editorTheme.description =
  216. res["description"];
  217. that.$store.state.editor.editorTheme.canvasHeight = Number(
  218. res["canvasHeight"]
  219. );
  220. that.$store.state.editor.editorTheme.canvasWidth =
  221. res["canvasWidth"];
  222. })
  223. .catch(function(err) {
  224. loading.close();
  225. that.$message.error("psd文件解析失败");
  226. });
  227. } catch (e) {
  228. loading.close();
  229. that.$message.error("psd文件解析失败");
  230. }
  231. form.reset();
  232. },
  233. revocation() {
  234. if (this.operationList.length < 2) {
  235. return false;
  236. }
  237. if (!revocationFlag) {
  238. return false;
  239. }
  240. revocationFlag = false;
  241. var str = this.operationList.splice(this.operationList.length - 1, 1);
  242. this.nextList.push(str[0]);
  243. this.$store.state.editor.editorPage.elements = JSON.parse(
  244. this.operationList[this.operationList.length - 1]
  245. ).elements;
  246. setTimeout(function() {
  247. revocationFlag = true;
  248. }, 400);
  249. }, //撤销
  250. recover() {
  251. if (this.nextList.length == 0) {
  252. return false;
  253. }
  254. if (!revocationFlag) {
  255. return false;
  256. }
  257. revocationFlag = false;
  258. this.$store.state.editor.editorPage.elements = JSON.parse(
  259. this.nextList[this.nextList.length - 1]
  260. ).elements;
  261. this.operationList.push(
  262. this.nextList.splice(this.nextList.length - 1, 1)[0]
  263. );
  264. setTimeout(function() {
  265. revocationFlag = true;
  266. }, 400);
  267. }, //恢复
  268. deploy() {
  269. // this.loading = true
  270. /*this.$store.dispatch('saveTheme', tools.vue2json(this.$store.state.editor.editorTheme)).then(() => {
  271. // setTimeout(() => {
  272. // this.$emit('saveThemeSuccess')
  273. // this.loading = false
  274. // }, 1000)
  275. this.$emit('saveThemeSuccess')
  276. this.loading = false
  277. })*/
  278. if (!window.hasSaveFlag) {
  279. this.$confirm("您确定不保存直接预览吗?", "提示", {
  280. confirmButtonText: "确定",
  281. cancelButtonText: "取消",
  282. type: "warning"
  283. })
  284. .then(() => {
  285. window.hasSaveFlag = false;
  286. this.$emit("saveThemeSuccess");
  287. })
  288. .catch(() => {});
  289. } else {
  290. this.$emit("saveThemeSuccess");
  291. }
  292. },
  293. grid() {
  294. //网格
  295. if (!this.$store.state.editor.gridTempField) {
  296. this.$store.state.editor.gridTempField = true;
  297. } else {
  298. this.$store.state.editor.gridTempField = false;
  299. }
  300. },
  301. psd() {
  302. var that = this;
  303. axios.get("../../static/json.json").then(function(res) {
  304. var res = res.data;
  305. that.$store.state.editor.editorTheme.title = res["title"];
  306. that.$store.state.editor.editorTheme.description = res["description"];
  307. that.$store.state.editor.editorTheme.canvasHeight = res["canvasHeight"];
  308. that.$store.state.editor.editorTheme.canvasWidth = res["canvasWidth"];
  309. that.$store.state.editor.editorPage.elements = res["pages"][0].elements;
  310. });
  311. },
  312. shareSetting() {
  313. this.isShareSetting = true;
  314. },
  315. closeShare() {
  316. this.isShareSetting = false;
  317. }
  318. }
  319. };
  320. </script>
  321. <style lang="less" scoped>
  322. .header {
  323. height: 60px;
  324. background-color: #fff;
  325. color: #646b81;
  326. margin-top: 60px;
  327. position: relative;
  328. display: flex;
  329. flex-direction: row;
  330. .reset-btn {
  331. position: absolute;
  332. left: 0px;
  333. top: 0px;
  334. height: 100%;
  335. padding: 0 50px;
  336. cursor: pointer;
  337. display: flex;
  338. flex-direction: row;
  339. align-items: center;
  340. max-width: 30%;
  341. .reset-title {
  342. overflow: hidden;
  343. text-overflow: ellipsis;
  344. white-space: nowrap;
  345. }
  346. }
  347. .el-icon-arrow-left {
  348. margin-right: 10px;
  349. }
  350. .right-panel {
  351. float: right;
  352. height: 100%;
  353. width: 100px;
  354. display: flex;
  355. align-items: center;
  356. padding-right: 15px;
  357. flex-direction: row-reverse;
  358. }
  359. .edit-title {
  360. padding-left: 10px;
  361. }
  362. .tools {
  363. width: 100%;
  364. height: 60px;
  365. .next_return {
  366. display: flex;
  367. flex-direction: row;
  368. align-items: center;
  369. justify-content: center;
  370. height: 100%;
  371. .return {
  372. display: flex;
  373. flex-direction: column;
  374. align-items: center;
  375. justify-content: center;
  376. padding-left: 16px;
  377. padding-right: 16px;
  378. font-size: 16px;
  379. color: rgba(100, 107, 129, 1);
  380. .retutn_icon {
  381. width: 17px;
  382. height: 14px;
  383. margin-bottom: 8px;
  384. }
  385. }
  386. .zoom-title {
  387. margin-left: 80px;
  388. display: flex;
  389. flex-direction: row;
  390. justify-content: center;
  391. align-items: center;
  392. .zoom-num {
  393. display: flex;
  394. flex-direction: column;
  395. justify-content: center;
  396. align-items: center;
  397. width: 50px;
  398. }
  399. .size {
  400. display: inline-block;
  401. width: 20px;
  402. height: 20px;
  403. justify-content: center;
  404. text-align: center;
  405. margin-left: 8px;
  406. margin-right: 8px;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. </style>