editor.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <template>
  2. <div class="editor">
  3. <draggable
  4. v-model="comList"
  5. @add="onAdd"
  6. @update="onDragEnd"
  7. group="itxst"
  8. animation="300"
  9. :style="draggableStyle"
  10. handle=".drag-handle"
  11. :scroll="true"
  12. :scrollSensitivity="100"
  13. :scrollSpeed="20"
  14. >
  15. <transition-group style="display:block;min-height: 100vh;">
  16. <template v-for="(it, index) in comList">
  17. <div
  18. class="layers"
  19. :key="index"
  20. :class="comIndex == index ? 'active-layer' : ''"
  21. >
  22. <div class="drag-handle" draggable>
  23. <svg-icon icon-class="drag" />
  24. </div>
  25. <!-- :options="categoryList":props="props" -->
  26. <div style="padding: 10px 0">
  27. <el-form label-position="left" class="inline-form">
  28. <el-row :gutter="24">
  29. <el-col :span="8">
  30. <el-form-item label="模块分类:">
  31. <!-- 此处需要处理为只有admin账号可编辑 -->
  32. <!-- <el-cascader
  33. v-model="it.category_id"
  34. clearable
  35. :options="categoryList"
  36. :props="props"
  37. :show-all-levels="false"
  38. @change="onChangeCategory"
  39. placeholder="请选择模块分类"
  40. /> -->
  41. <!-- {{ $store.state.user }} -->
  42. <!-- <el-select
  43. v-if="$store.state.user.id == 2"
  44. v-model="it.category_id"
  45. placeholder="请选择模块分类"
  46. size="large"
  47. style="width: 80%"
  48. >
  49. <el-option
  50. v-for="item in categoryList"
  51. :key="item.id"
  52. :label="item.name"
  53. :value="item.id"
  54. />
  55. </el-select> -->
  56. <span>{{ getCategory(it.category_id) }}</span>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="8">
  60. <el-form-item label="模块名称:">
  61. <!-- <el-input
  62. class="input-item"
  63. v-model="it.name"
  64. placeholder="请填写模块名称"
  65. /> -->
  66. <span >{{ it.name }}</span>
  67. </el-form-item>
  68. </el-col>
  69. <!-- <el-col :span="6">
  70. <el-form-item label="模块描述:">
  71. <el-input
  72. v-if="$store.state.user.id == 2"
  73. class="input-item"
  74. v-model="it.intro"
  75. placeholder="请填写模块介绍"
  76. />
  77. <span v-else>{{ it.intro }}</span>
  78. </el-form-item>
  79. </el-col> -->
  80. <el-col :span="3" :offset="5">
  81. <el-form-item v-if="$store.state.user.id == 2">
  82. <div class="btn-save">
  83. <el-tooltip
  84. class="item"
  85. effect="dark"
  86. content="保存模块"
  87. placement="top"
  88. >
  89. <el-button
  90. size="mini"
  91. @click="onSaveTemplate(it)"
  92. icon="el-icon-document-add"
  93. circle
  94. >
  95. </el-button>
  96. </el-tooltip>
  97. <!-- <el-tooltip
  98. class="item"
  99. effect="dark"
  100. content="另存为"
  101. placement="top"
  102. >
  103. <el-button
  104. circle
  105. size="mini"
  106. @click="onSaveAs(it)"
  107. v-if="it.id > 0"
  108. icon="el-icon-document-copy"
  109. >
  110. </el-button>
  111. </el-tooltip> -->
  112. <el-button
  113. circle
  114. size="mini"
  115. v-if="it.isEdit !== 1"
  116. @click="onEdit(index, 1)"
  117. >
  118. <svg-icon icon-class="edit" />
  119. </el-button>
  120. <el-button
  121. circle
  122. size="mini"
  123. @click="onEdit(index, 2)"
  124. icon="el-icon-view"
  125. v-else
  126. >
  127. </el-button>
  128. <el-tooltip
  129. class="item"
  130. effect="dark"
  131. content="删除"
  132. placement="top"
  133. >
  134. <el-button circle size="mini" @click="onRemove(index)">
  135. <svg-icon icon-class="delete"
  136. /></el-button>
  137. </el-tooltip>
  138. </div>
  139. </el-form-item>
  140. </el-col>
  141. </el-row>
  142. </el-form>
  143. </div>
  144. <div class="main" @click="onSetActive(index)">
  145. <component
  146. :is="it.type"
  147. :com="it"
  148. :coms="comList"
  149. :currentIndex="index"
  150. :isAdmin="isAdmin"
  151. :insertCmd="insertCmd"
  152. @onUpdate="onUpdate"
  153. @onUpdateAttr="onUpdateAttr"
  154. @onUpdateProdAttr="onUpdateProdAttr"
  155. :isEdit="it.isEdit"
  156. />
  157. </div>
  158. <!-- <div class="label">
  159. {{ it.name }}
  160. <div class="del">
  161. <svg-icon
  162. @click="onEdit(index, 1)"
  163. v-if="it.isEdit !== 1"
  164. icon-class="edit"
  165. style="color: #fff; margin-right: 10px"
  166. />
  167. <svg-icon
  168. @click="onEdit(index, 2)"
  169. v-else
  170. icon-class="view"
  171. style="color: #fff; margin-right: 10px"
  172. />
  173. <svg-icon
  174. @click="onRemove(index)"
  175. icon-class="delete"
  176. style="color: #fff; margin-left: 10px"
  177. />
  178. </div>
  179. </div> -->
  180. </div>
  181. </template>
  182. <template v-if="comList.length <= 0">
  183. <div class="editor-empty" :key="-1">
  184. <el-empty description="请拖放组件至当前页面" />
  185. </div>
  186. </template>
  187. </transition-group>
  188. </draggable>
  189. </div>
  190. </template>
  191. <script>
  192. import draggable from "vuedraggable";
  193. import Table from "./components/Table";
  194. import TextArea from "./components/TextArea";
  195. import Empty from "./components/Empty";
  196. import { getAllList, createTemplate, updateTemplate } from "@/api/template";
  197. export default {
  198. name: "editor",
  199. emits: [
  200. "onSetActiveIndex",
  201. "onDelete",
  202. "onInsert",
  203. "onLoadArticle",
  204. "onRebuild",
  205. "onSetComs",
  206. ],
  207. components: {
  208. Table,
  209. TextArea,
  210. draggable,
  211. Empty,
  212. },
  213. props: {
  214. coms: {
  215. type: Array,
  216. default: null,
  217. },
  218. comIndex: {
  219. type: Number,
  220. default: 0,
  221. },
  222. templateCate: {
  223. type: Array,
  224. default: () => {
  225. return [];
  226. },
  227. },
  228. insertCmd: {
  229. type: Object,
  230. default: null,
  231. },
  232. isAdmin: {
  233. type: Number,
  234. default: 2,
  235. },
  236. },
  237. watch: {
  238. coms: {
  239. handler(val) {
  240. if (val == null) return;
  241. this.comList = JSON.parse(JSON.stringify(val));
  242. console.log(this.comList);
  243. },
  244. immediate: true, //立即执行
  245. deep: true,
  246. },
  247. comIndex: {
  248. handler(val) {
  249. if (val <= 0) return;
  250. this.comList = this.comList.map((it) => {
  251. it.isEdit = 2;
  252. return it;
  253. });
  254. },
  255. immediate: true, //立即执行
  256. deep: true,
  257. },
  258. },
  259. data() {
  260. return {
  261. showEditor: false,
  262. operation: "",
  263. id: 0,
  264. comList: [],
  265. categoryList: [],
  266. props: {
  267. value: "id",
  268. label: "name",
  269. children: "children",
  270. checkStrictly: true,
  271. },
  272. saveAs: false,
  273. draggableStyle: {
  274. width: '100%',
  275. overflowY: 'auto'
  276. }
  277. };
  278. },
  279. mounted() {
  280. this.initCategoryList();
  281. console.log(this.$store.state.user);
  282. },
  283. methods: {
  284. /* 获取分类名称 */
  285. getCategory(item) {
  286. return this.categoryList.find((el) => el.id === item)?.name || "";
  287. },
  288. onSaveAs(e) {
  289. this.saveAs = true;
  290. this.onSaveTemplate(e);
  291. },
  292. /* 保存模块 */
  293. onSaveTemplate(e) {
  294. let _this = this;
  295. /* e.category_id='1' */
  296. let data = JSON.parse(JSON.stringify(e));
  297. if (data.category) {
  298. delete data.category;
  299. }
  300. data.attrs = JSON.stringify(data.attrs);
  301. data.code = data.name;
  302. data.status = 5;
  303. data.category_id = e.category_id;
  304. if (data.id == undefined || this.saveAs) {
  305. createTemplate(data).then((res) => {
  306. if (res.status != 200) return;
  307. data.id = res.data;
  308. e.id = res.data;
  309. _this.$alert("模板信息保存成功");
  310. _this.$emit("onRefresh");
  311. this.saveAs = false;
  312. });
  313. } else {
  314. updateTemplate(data).then((res) => {
  315. if (res.status != 200) return;
  316. _this.$alert("模板信息更新成功");
  317. _this.$emit("onRefresh");
  318. });
  319. }
  320. },
  321. /* 获取模块分类 */
  322. //获取模板分类信息
  323. async initCategoryList() {
  324. let _this = this;
  325. let res = await getAllList();
  326. this.categoryList = res.data; //this.processDataForCascader(res.data);
  327. },
  328. processDataForCascader(data) {
  329. console.log("Raw data:", data); // 调试原始数据
  330. const idMap = new Map();
  331. const rootItems = [];
  332. // First pass: create a map of all items
  333. data.forEach((item) => {
  334. const processedItem = { ...item, children: [] };
  335. idMap.set(item.id, processedItem);
  336. });
  337. // Second pass: build the tree structure
  338. data.forEach((item) => {
  339. if (item.parent_id === "0" || item.parent_id === 0) {
  340. rootItems.push(idMap.get(item.id));
  341. } else {
  342. const parent = idMap.get(parseInt(item.parent_id));
  343. if (parent) {
  344. parent.children.push(idMap.get(item.id));
  345. } else {
  346. console.warn(
  347. `Parent with id ${item.parent_id} not found for item:`,
  348. item
  349. );
  350. rootItems.push(idMap.get(item.id)); // 如果找不到父项,作为根项添加
  351. }
  352. }
  353. });
  354. console.log("Processed data:", rootItems); // 调试处理后的数据
  355. return rootItems;
  356. },
  357. onChangeCategory() {},
  358. //更新产品属性
  359. onUpdateProdAttr(comIndex, attrIndex, data) {
  360. this.comList[comIndex].attrs[attrIndex].content = data;
  361. let attrName = this.comList[comIndex].attrs[attrIndex].attrs.name;
  362. let attrType = this.comList[comIndex].attrs[attrIndex].attrs.type;
  363. for (var i = 0; i < this.comList.length; i++) {
  364. for (var j = 0; j < this.comList[i].attrs.length; j++) {
  365. if (this.comList[i].attrs[j].type == "ProductAttr") {
  366. if (
  367. this.comList[i].attrs[j].attrs.name == attrName &&
  368. this.comList[i].attrs[j].attrs.type == attrType
  369. ) {
  370. this.comList[i].attrs[j].content = data;
  371. }
  372. }
  373. }
  374. }
  375. this.$emit("onRebuild", this.comList);
  376. },
  377. onUpdateAttr(comIndex, attrIndex, data) {
  378. this.comList[comIndex].attrs[attrIndex].content = data;
  379. let dataType = this.comList[comIndex].attrs[attrIndex].type;
  380. let dataId = this.comList[comIndex].attrs[attrIndex].data;
  381. for (var i = 0; i < this.comList.length; i++) {
  382. for (var j = 0; j < this.comList[i].attrs.length; j++) {
  383. if (
  384. this.comList[i].attrs[j].type == dataType &&
  385. this.comList[i].attrs[j].id == dataId
  386. ) {
  387. this.comList[i].attrs[j].content = data;
  388. }
  389. }
  390. }
  391. this.$emit("onRebuild", this.comList);
  392. },
  393. onRemove(index) {
  394. this.$emit("onDelete", index);
  395. },
  396. onEdit(e, state) {
  397. this.comList = this.comList.map((it) => {
  398. it.isEdit = 2;
  399. return it;
  400. });
  401. if (state == 1) {
  402. this.comList[e].isEdit = 1;
  403. this.onSetActive(e);
  404. }
  405. this.$emit("onRebuild", this.comList);
  406. },
  407. onAdd(e) {
  408. e.preventDefault();
  409. e.stopPropagation();
  410. this.$emit("onRebuild", this.comList);
  411. },
  412. onDragEnd(e) {
  413. e.preventDefault();
  414. e.stopPropagation();
  415. this.$emit("onRebuild", this.comList);
  416. },
  417. onUpdate(index, content) {
  418. let _this = this;
  419. this.coms[index].content = content;
  420. },
  421. //激活当前层
  422. onSetActive(e) {
  423. this.$emit("onSetActiveIndex", e);
  424. },
  425. },
  426. };
  427. </script>
  428. <style lang="scss">
  429. @import "./editor.scss";
  430. .layers {
  431. margin-left: 26px;
  432. .drag-handle {
  433. position: absolute;
  434. top: 0;
  435. left: -27px;
  436. cursor: move;
  437. padding: 0 5px;
  438. display: flex;
  439. align-items: center;
  440. /* background-color: #f0f0f0; */
  441. &:hover {
  442. /* background-color: #e0e0e0; */
  443. }
  444. }
  445. .content-wrapper {
  446. flex-grow: 1;
  447. display: flex;
  448. flex-direction: column;
  449. }
  450. .main {
  451. flex-grow: 1;
  452. }
  453. }
  454. .inline-form {
  455. display: flex;
  456. flex-wrap: wrap;
  457. gap: 10px;
  458. }
  459. .inline-form .el-form-item {
  460. display: flex;
  461. align-items: center;
  462. margin-bottom: 0;
  463. flex: 1;
  464. min-width: 300px;
  465. }
  466. .inline-form .el-form-item__label {
  467. flex-shrink: 0;
  468. width: auto;
  469. padding-right: 12px;
  470. }
  471. .inline-form .el-form-item__content {
  472. flex-grow: 1;
  473. margin-left: 0 !important;
  474. }
  475. .input-item {
  476. width: 200px;
  477. }
  478. </style>