menus.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <div class="com-menus">
  3. <div class="menus-out">
  4. <div
  5. class="group-item"
  6. v-for="(it, index) in menus"
  7. :key="index"
  8. :class="'group-item' + index"
  9. >
  10. <div class="items-name">{{ it.name }}</div>
  11. <div class="menus">
  12. <template v-for="(item, itemIndex) in it.subMenus">
  13. <div
  14. :key="itemIndex"
  15. class="menu"
  16. @click="onClickMenus(item)"
  17. :class="{ disabled: item.key === 'article' && type === 'module' }"
  18. >
  19. <div class="icon">
  20. <svg-icon
  21. v-if="item.icon != ''"
  22. className="svg-style"
  23. size="120"
  24. :icon-class="item.icon"
  25. />
  26. </div>
  27. <div class="menu-name">{{ item.name }}</div>
  28. </div>
  29. </template>
  30. </div>
  31. </div>
  32. </div>
  33. <el-dialog
  34. :visible.sync="showFormula"
  35. append-to-body
  36. v-el-drag-dialog
  37. width="300"
  38. :close-on-click-modal="false"
  39. custom-class="prod-verify"
  40. title="选择公式"
  41. >
  42. <Formula @onPicked="onPickedFormula" :comList="comArr"></Formula>
  43. </el-dialog>
  44. <el-dialog
  45. :visible.sync="showVariable"
  46. append-to-body
  47. v-el-drag-dialog
  48. width="800px"
  49. :close-on-click-modal="false"
  50. custom-class="prod-verify"
  51. :title="insertTitle"
  52. >
  53. <Variable
  54. :type="type"
  55. @onPicked="onPickedVariable"
  56. @onData="btnbianl"
  57. ></Variable>
  58. </el-dialog>
  59. <el-dialog
  60. :visible.sync="showSourceData"
  61. append-to-body
  62. v-el-drag-dialog
  63. width="300"
  64. :close-on-click-modal="false"
  65. custom-class="prod-verify"
  66. title="选择源数据"
  67. >
  68. <sourceData @onPicked="onPickedTab"></sourceData>
  69. </el-dialog>
  70. <!-- 插入ai -->
  71. <el-dialog
  72. :visible.sync="showSourceAi"
  73. append-to-body
  74. v-el-drag-dialog
  75. width="300"
  76. :close-on-click-modal="false"
  77. custom-class="prod-verify"
  78. title="选择AI"
  79. >
  80. <sourceAi @onPicked="onPickedAi"></sourceAi>
  81. </el-dialog>
  82. <!-- ai -->
  83. <el-dialog
  84. :visible.sync="showSourceEs"
  85. append-to-body
  86. v-el-drag-dialog
  87. width="300"
  88. :close-on-click-modal="false"
  89. custom-class="prod-verify"
  90. title="AI随笔"
  91. >
  92. <sourceEs @onPicked="onPickedAi"></sourceEs>
  93. </el-dialog>
  94. </div>
  95. </template>
  96. <script>
  97. import Formula from "./components/Formula";
  98. import sourceData from "./components/SourceData";
  99. import sourceAi from "./components/sourceAi/index.vue";
  100. import sourceEs from "./components/sourceEs/index.vue";
  101. import Variable from "./components/Variable";
  102. import elDragDialog from "@/directive/el-drag-dialog";
  103. export default {
  104. name: "menus",
  105. emits: ["onEvents", "onVariable"],
  106. components: {
  107. Formula,
  108. Variable,
  109. sourceData,
  110. sourceAi,
  111. sourceEs,
  112. },
  113. directives: { elDragDialog },
  114. props: {
  115. comArr: {
  116. type: Array,
  117. default: [],
  118. },
  119. },
  120. data() {
  121. return {
  122. showFormula: false,
  123. showVariable: false,
  124. showSourceData: false,
  125. showSourceAi: false,
  126. showSourceEs: false,
  127. type: null,
  128. insertTitle: "插入变量",
  129. menus: [
  130. {
  131. name: "插入",
  132. subMenus: [
  133. // {
  134. // key:"template",
  135. // name:"空白模板",
  136. // icon:"insertTemplate",
  137. // },
  138. {
  139. key: "article",
  140. name: "图文",
  141. icon: "insertArticle",
  142. disabled: () => this.type === "module",
  143. },
  144. /* {
  145. key:"SourceData",
  146. name:"源数据",
  147. icon:"sourceData",
  148. }, */
  149. {
  150. key: "formual",
  151. name: "公式",
  152. icon: "insertFormula",
  153. },
  154. {
  155. key: "variable",
  156. name: "变量",
  157. icon: "insertParams",
  158. },
  159. {
  160. key: "constant",
  161. name: "常量",
  162. icon: "constant",
  163. },
  164. {
  165. key: "attr",
  166. name: "属性",
  167. icon: "attr",
  168. },
  169. {
  170. key: "Directory",
  171. name: "目录",
  172. icon: "subject",
  173. },
  174. {
  175. key: "InsertNull",
  176. name: "插入空值",
  177. icon: "insertTemplate",
  178. },
  179. /* {
  180. key:"pager",
  181. name:"分页",
  182. icon:"insertPage",
  183. }, */
  184. {
  185. key: "ai",
  186. name: "AI模块",
  187. icon: "AI",
  188. },
  189. /* {
  190. key:"aiEs",
  191. name:"AI随笔",
  192. icon:"form",
  193. }, */
  194. ],
  195. },
  196. // {
  197. // name:'设置',
  198. // subMenus:[
  199. // {
  200. // key:"headerAndTop",
  201. // name:"页眉页脚",
  202. // icon:"insertPager",
  203. // },
  204. // {
  205. // key:"auth",
  206. // name:"权限",
  207. // icon:"insertAuth",
  208. // },
  209. // {
  210. // key:"fav",
  211. // name:"收藏",
  212. // icon:"insertFav",
  213. // },
  214. // {
  215. // key:"share",
  216. // name:"分享",
  217. // icon:"insertShare",
  218. // },
  219. // ]
  220. // }
  221. ],
  222. };
  223. },
  224. mounted() {
  225. this.type = this.$route.query.type;
  226. },
  227. methods: {
  228. /* 变量变动 */
  229. btnbianl(e) {
  230. this.$emit("onVariable", e);
  231. },
  232. /* 插入ai */
  233. onPickedAi(e) {
  234. let _this = this;
  235. let item = {
  236. type: "insert",
  237. key: "ai",
  238. content: e,
  239. };
  240. this.$emit("onEvents", item);
  241. this.showSourceAi = false;
  242. },
  243. //选取公式
  244. onPickedTab(e) {
  245. let _this = this;
  246. let item = {
  247. type: "insert",
  248. key: "sourceData",
  249. content: e,
  250. };
  251. this.$emit("onEvents", item);
  252. this.showSourceData = false;
  253. },
  254. onPickedFormula(e) {
  255. let _this = this;
  256. let item = {
  257. type: "insert",
  258. key: "formual",
  259. content: e,
  260. };
  261. this.$emit("onEvents", item);
  262. console.log(item);
  263. this.showFormula = false;
  264. },
  265. onPickedVariable(e) {
  266. let _this = this;
  267. let item = {
  268. type: "insert",
  269. key: e.type == 2 ? "constant" : "variable",
  270. content: e,
  271. };
  272. this.$emit("onEvents", item);
  273. this.showVariable = false;
  274. },
  275. onClickMenus(e) {
  276. if (e.disabled && e.disabled()) {
  277. return;
  278. }
  279. e.type = "insert";
  280. if (e.key == "formual") {
  281. this.showFormula = true;
  282. } else if (e.key == "SourceData") {
  283. this.showSourceData = true;
  284. } else if (e.key == "variable" || e.key == "constant") {
  285. if (e.key == "variable") {
  286. this.type = 1;
  287. this.insertTitle = "插入变量";
  288. } else {
  289. this.type = 2;
  290. this.insertTitle = "插入常量";
  291. }
  292. this.showVariable = true;
  293. } else if (e.key == "ai") {
  294. this.showSourceAi = true;
  295. } else if (e.key == "aiEs") {
  296. this.showSourceEs = true;
  297. } else {
  298. this.$emit("onEvents", e);
  299. }
  300. },
  301. },
  302. };
  303. </script>
  304. <style lang="scss">
  305. @import "./menus.scss";
  306. .menu.disabled {
  307. opacity: 0.5;
  308. cursor: not-allowed;
  309. }
  310. </style>