menus.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  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. (typeMenu === 'document' && item.key !== 'ai') ||
  20. (item.key === 'article' && (typeMenu === 'module' || typeMenu === undefined)),
  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="60%"
  42. :close-on-click-modal="false"
  43. custom-class="prod-verify"
  44. top="20px"
  45. title="选择公式"
  46. >
  47. <Formula @onPicked="onPickedFormula" :comList="comArr"></Formula>
  48. </el-dialog>
  49. <el-dialog
  50. :visible.sync="showVariable"
  51. append-to-body
  52. v-el-drag-dialog
  53. width="800px"
  54. :close-on-click-modal="false"
  55. custom-class="prod-verify"
  56. top="20px"
  57. :title="insertTitle"
  58. >
  59. <Variable
  60. :type="type"
  61. @onPicked="onPickedVariable"
  62. @onData="btnbianl"
  63. ></Variable>
  64. </el-dialog>
  65. <el-dialog
  66. :visible.sync="showSourceData"
  67. append-to-body
  68. v-el-drag-dialog
  69. width="300"
  70. :close-on-click-modal="false"
  71. top="20px"
  72. custom-class="prod-verify"
  73. title="选择源数据"
  74. >
  75. <sourceData @onPicked="onPickedTab"></sourceData>
  76. </el-dialog>
  77. <!-- 插入ai -->
  78. <el-dialog
  79. :visible.sync="showSourceAi"
  80. append-to-body
  81. v-el-drag-dialog
  82. width="80%"
  83. :close-on-click-modal="false"
  84. top="20px"
  85. custom-class="prod-verify"
  86. title="AI"
  87. >
  88. <!-- <sourceAi @onPicked="onPickedAi"></sourceAi> -->
  89. <ChatBox />
  90. </el-dialog>
  91. <!-- ai -->
  92. <el-dialog
  93. :visible.sync="showSourceEs"
  94. append-to-body
  95. v-el-drag-dialog
  96. width="300"
  97. :close-on-click-modal="false"
  98. custom-class="prod-verify"
  99. title=""
  100. >
  101. <sourceEs @onPicked="onPickedAi" :TemList="comArr"></sourceEs>
  102. </el-dialog>
  103. <!-- 插入目录 -->
  104. <el-dialog
  105. :visible.sync="showDirectoryLevelDialog"
  106. append-to-body
  107. v-el-drag-dialog
  108. width="300px"
  109. :close-on-click-modal="false"
  110. custom-class="prod-verify"
  111. title="选择目录等级"
  112. >
  113. <el-form :model="directoryForm" label-width="100px">
  114. <el-form-item label="目录等级">
  115. <el-select v-model="directoryForm.level" placeholder="请选择目录等级">
  116. <el-option label="一级目录" :value="1"></el-option>
  117. <el-option label="二级目录" :value="2"></el-option>
  118. <el-option label="三级目录" :value="3"></el-option>
  119. <el-option label="四级目录" :value="4"></el-option>
  120. <el-option label="五级目录" :value="5"></el-option>
  121. <el-option label="六级目录" :value="6"></el-option>
  122. </el-select>
  123. </el-form-item>
  124. </el-form>
  125. <span slot="footer" class="dialog-footer">
  126. <el-button @click="showDirectoryLevelDialog = false">取 消</el-button>
  127. <el-button type="primary" @click="confirmDirectoryLevel"
  128. >确 定</el-button
  129. >
  130. </span>
  131. </el-dialog>
  132. </div>
  133. </template>
  134. <script>
  135. import Formula from "./components/Formula";
  136. import sourceData from "./components/SourceData";
  137. import sourceAi from "./components/sourceAi/index.vue";
  138. import sourceEs from "./components/sourceEs/index.vue";
  139. import Variable from "./components/Variable";
  140. import elDragDialog from "@/directive/el-drag-dialog";
  141. import ChatBox from "@/components/ai.vue";
  142. import TemList from "../temList/temList.vue";
  143. export default {
  144. name: "menus",
  145. emits: ["onEvents", "onVariable"],
  146. components: {
  147. Formula,
  148. Variable,
  149. sourceData,
  150. sourceAi,
  151. sourceEs,
  152. ChatBox,
  153. },
  154. directives: { elDragDialog },
  155. props: {
  156. comArr: {
  157. type: Array,
  158. default: [],
  159. },
  160. },
  161. data() {
  162. return {
  163. showDirectoryLevelDialog: false,
  164. directoryForm: {
  165. level: 1
  166. },
  167. showFormula: false,
  168. showVariable: false,
  169. showSourceData: false,
  170. showSourceAi: false,
  171. showSourceEs: false,
  172. type: null,
  173. typeMenu:null,
  174. insertTitle: "插入变量",
  175. menus: [
  176. {
  177. name: "插入",
  178. subMenus: [
  179. // {
  180. // key:"template",
  181. // name:"空白模板",
  182. // icon:"insertTemplate",
  183. // },
  184. {
  185. key: "article",
  186. name: "图文",
  187. icon: "图文",
  188. disabled: () =>this.typeMenu === "module" || this.typeMenu === undefined,
  189. },
  190. {
  191. key:"SourceData",
  192. name:"源数据",
  193. icon:"sourceData",
  194. },
  195. {
  196. key: "formual",
  197. name: "公式",
  198. icon: "公式",
  199. },
  200. {
  201. key: "variable",
  202. name: "变量",
  203. icon: "变量",
  204. },
  205. {
  206. key: "constant",
  207. name: "常量",
  208. icon: "常量",
  209. },
  210. {
  211. key: "attr",
  212. name: "属性",
  213. icon: "属性",
  214. },
  215. {
  216. key: "Directory",
  217. name: "目录",
  218. icon: "目录",
  219. },
  220. {
  221. key: "InsertNull",
  222. name: "插入空值",
  223. icon: "插入空值",
  224. },
  225. /* {
  226. key:"pager",
  227. name:"分页",
  228. icon:"insertPage",
  229. }, */
  230. {
  231. key: "ai",
  232. name: "AI模块",
  233. icon: "AI",
  234. },
  235. {
  236. key:"searchEs",
  237. name:"检索",
  238. icon:"form",
  239. },
  240. ],
  241. },
  242. // {
  243. // name:'设置',
  244. // subMenus:[
  245. // {
  246. // key:"headerAndTop",
  247. // name:"页眉页脚",
  248. // icon:"insertPager",
  249. // },
  250. // {
  251. // key:"auth",
  252. // name:"权限",
  253. // icon:"insertAuth",
  254. // },
  255. // {
  256. // key:"fav",
  257. // name:"收藏",
  258. // icon:"insertFav",
  259. // },
  260. // {
  261. // key:"share",
  262. // name:"分享",
  263. // icon:"insertShare",
  264. // },
  265. // ]
  266. // }
  267. ],
  268. };
  269. },
  270. computed: {
  271. filteredMenus() {
  272. /* if (this.type === "document") { */
  273. this.menus
  274. .map((group) => ({
  275. ...group,
  276. subMenus: group.subMenus.filter((item) => item.key === "ai"),
  277. }))
  278. .filter((group) => group.subMenus.length > 0);
  279. /* } */
  280. return this.menus;
  281. },
  282. },
  283. mounted() {
  284. this.typeMenu = this.$route.query.type;
  285. },
  286. methods: {
  287. /* 变量变动 */
  288. btnbianl(e) {
  289. this.$emit("onVariable", e);
  290. },
  291. /* 插入ai */
  292. onPickedAi(e) {
  293. let _this = this;
  294. let item = {
  295. type: "insert",
  296. key: "ai",
  297. content: e,
  298. };
  299. this.$emit("onEvents", item);
  300. this.showSourceAi = false;
  301. },
  302. //选取公式
  303. onPickedTab(e) {
  304. let _this = this;
  305. let item = {
  306. type: "insert",
  307. key: "sourceData",
  308. content: e,
  309. };
  310. this.$emit("onEvents", item);
  311. this.showSourceData = false;
  312. },
  313. onPickedFormula(e) {
  314. let _this = this;
  315. let item = {
  316. type: "insert",
  317. key: "formual",
  318. content: e,
  319. };
  320. this.$emit("onEvents", item);
  321. console.log(item);
  322. this.showFormula = false;
  323. },
  324. onPickedVariable(e) {
  325. let _this = this;
  326. let item = {
  327. type: "insert",
  328. key: e.type == 2 ? "constant" : "variable",
  329. content: e,
  330. };
  331. this.$emit("onEvents", item);
  332. this.showVariable = false;
  333. },
  334. onClickMenus(e) {
  335. if (
  336. (this.typeMenu === "document" && e.key !== "ai") ||
  337. (e.key === "article" && (this.typeMenu === "module" || this.typeMenu === undefined))
  338. ) {
  339. return; // Exit the method if the item is disabled
  340. }
  341. /* e.type = "insert"; */
  342. if (e.key == "formual") {
  343. this.showFormula = true;
  344. } else if (e.key == "SourceData") {
  345. this.showSourceData = true;
  346. } else if (e.key == "variable" || e.key == "constant") {
  347. if (e.key == "variable") {
  348. this.type = 1;
  349. this.insertTitle = "插入变量";
  350. } else {
  351. this.type = 2;
  352. this.insertTitle = "插入常量";
  353. }
  354. this.showVariable = true;
  355. } else if (e.key == "ai") {
  356. this.showSourceAi = true;
  357. } else if (e.key == "searchEs") {//aiEs
  358. this.showSourceEs = true;
  359. } else if (e.key === "Directory") {
  360. this.showDirectoryLevelDialog = true;
  361. } else {
  362. this.$emit("onEvents", e);
  363. }
  364. },
  365. confirmDirectoryLevel() {
  366. this.showDirectoryLevelDialog = false;
  367. this.$emit("onEvents", {
  368. type: "insert",
  369. key: "Directory",
  370. content: { level: this.directoryForm.level }
  371. });
  372. }
  373. },
  374. };
  375. </script>
  376. <style lang="scss">
  377. @import "./menus.scss";
  378. .menu.disabled {
  379. opacity: 0.5;
  380. cursor: not-allowed;
  381. }
  382. </style>