HeaderEdit.vue 11 KB

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