menus.vue 8.0 KB

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