123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 |
- <template>
- <div class="com-menus">
- <div class="menus-out">
- <div
- class="group-item"
- v-for="(it, index) in filteredMenus"
- :key="index"
- :class="'group-item' + index"
- >
- <div class="items-name">{{ it.name }}</div>
- <div class="menus">
- <template v-for="(item, itemIndex) in it.subMenus">
- <div
- :key="itemIndex"
- class="menu"
- @click="onClickMenus(item)"
- :class="{
- disabled:
- (type === 'document' && item.key !== 'ai') ||
- (item.key === 'article' && type === 'module'),
- }"
- >
- <div class="icon">
- <svg-icon
- v-if="item.icon != ''"
- className="svg-style"
- size="120"
- :icon-class="item.icon"
- />
- </div>
- <div class="menu-name">{{ item.name }}</div>
- </div>
- </template>
- </div>
- </div>
- </div>
- <el-dialog
- :visible.sync="showFormula"
- append-to-body
- v-el-drag-dialog
- width="300"
- :close-on-click-modal="false"
- custom-class="prod-verify"
- title="选择公式"
- >
- <Formula @onPicked="onPickedFormula" :comList="comArr"></Formula>
- </el-dialog>
- <el-dialog
- :visible.sync="showVariable"
- append-to-body
- v-el-drag-dialog
- width="800px"
- :close-on-click-modal="false"
- custom-class="prod-verify"
- :title="insertTitle"
- >
- <Variable
- :type="type"
- @onPicked="onPickedVariable"
- @onData="btnbianl"
- ></Variable>
- </el-dialog>
- <el-dialog
- :visible.sync="showSourceData"
- append-to-body
- v-el-drag-dialog
- width="300"
- :close-on-click-modal="false"
- custom-class="prod-verify"
- title="选择源数据"
- >
- <sourceData @onPicked="onPickedTab"></sourceData>
- </el-dialog>
- <!-- 插入ai -->
- <el-dialog
- :visible.sync="showSourceAi"
- append-to-body
- v-el-drag-dialog
- width="300"
- :close-on-click-modal="false"
- custom-class="prod-verify"
- title="选择AI"
- >
- <sourceAi @onPicked="onPickedAi"></sourceAi>
- </el-dialog>
- <!-- ai -->
- <el-dialog
- :visible.sync="showSourceEs"
- append-to-body
- v-el-drag-dialog
- width="300"
- :close-on-click-modal="false"
- custom-class="prod-verify"
- title="AI随笔"
- >
- <sourceEs @onPicked="onPickedAi"></sourceEs>
- </el-dialog>
- </div>
- </template>
- <script>
- import Formula from "./components/Formula";
- import sourceData from "./components/SourceData";
- import sourceAi from "./components/sourceAi/index.vue";
- import sourceEs from "./components/sourceEs/index.vue";
- import Variable from "./components/Variable";
- import elDragDialog from "@/directive/el-drag-dialog";
- export default {
- name: "menus",
- emits: ["onEvents", "onVariable"],
- components: {
- Formula,
- Variable,
- sourceData,
- sourceAi,
- sourceEs,
- },
- directives: { elDragDialog },
- props: {
- comArr: {
- type: Array,
- default: [],
- },
- },
- data() {
- return {
- showFormula: false,
- showVariable: false,
- showSourceData: false,
- showSourceAi: false,
- showSourceEs: false,
- type: null,
- insertTitle: "插入变量",
- menus: [
- {
- name: "插入",
- subMenus: [
- // {
- // key:"template",
- // name:"空白模板",
- // icon:"insertTemplate",
- // },
- {
- key: "article",
- name: "图文",
- icon: "图文",
- disabled: () => this.type === "module",
- },
- /* {
- key:"SourceData",
- name:"源数据",
- icon:"sourceData",
- }, */
- {
- key: "formual",
- name: "公式",
- icon: "公式",
- },
- {
- key: "variable",
- name: "变量",
- icon: "变量",
- },
- {
- key: "constant",
- name: "常量",
- icon: "常量",
- },
- {
- key: "attr",
- name: "属性",
- icon: "属性",
- },
- {
- key: "Directory",
- name: "目录",
- icon: "目录",
- },
- {
- key: "InsertNull",
- name: "插入空值",
- icon: "插入空值",
- },
- /* {
- key:"pager",
- name:"分页",
- icon:"insertPage",
- }, */
- {
- key: "ai",
- name: "AI模块",
- icon: "AI模块",
- },
- /* {
- key:"aiEs",
- name:"AI随笔",
- icon:"form",
- }, */
- ],
- },
- // {
- // name:'设置',
- // subMenus:[
- // {
- // key:"headerAndTop",
- // name:"页眉页脚",
- // icon:"insertPager",
- // },
- // {
- // key:"auth",
- // name:"权限",
- // icon:"insertAuth",
- // },
- // {
- // key:"fav",
- // name:"收藏",
- // icon:"insertFav",
- // },
- // {
- // key:"share",
- // name:"分享",
- // icon:"insertShare",
- // },
- // ]
- // }
- ],
- };
- },
- computed: {
- filteredMenus() {
- /* if (this.type === "document") { */
- this.menus
- .map((group) => ({
- ...group,
- subMenus: group.subMenus.filter((item) => item.key === "ai"),
- }))
- .filter((group) => group.subMenus.length > 0);
- /* } */
- return this.menus;
- },
- },
- mounted() {
- this.type = this.$route.query.type;
- },
- methods: {
- /* 变量变动 */
- btnbianl(e) {
- this.$emit("onVariable", e);
- },
- /* 插入ai */
- onPickedAi(e) {
- let _this = this;
- let item = {
- type: "insert",
- key: "ai",
- content: e,
- };
- this.$emit("onEvents", item);
- this.showSourceAi = false;
- },
- //选取公式
- onPickedTab(e) {
- let _this = this;
- let item = {
- type: "insert",
- key: "sourceData",
- content: e,
- };
- this.$emit("onEvents", item);
- this.showSourceData = false;
- },
- onPickedFormula(e) {
- let _this = this;
- let item = {
- type: "insert",
- key: "formual",
- content: e,
- };
- this.$emit("onEvents", item);
- console.log(item);
- this.showFormula = false;
- },
- onPickedVariable(e) {
- let _this = this;
- let item = {
- type: "insert",
- key: e.type == 2 ? "constant" : "variable",
- content: e,
- };
- this.$emit("onEvents", item);
- this.showVariable = false;
- },
- onClickMenus(e) {
- if (
- (this.type === "document" && e.key !== "ai") ||
- (e.key === "article" && this.type === "module")
- ) {
- return; // Exit the method if the item is disabled
- }
- e.type = "insert";
- if (e.key == "formual") {
- this.showFormula = true;
- } else if (e.key == "SourceData") {
- this.showSourceData = true;
- } else if (e.key == "variable" || e.key == "constant") {
- if (e.key == "variable") {
- this.type = 1;
- this.insertTitle = "插入变量";
- } else {
- this.type = 2;
- this.insertTitle = "插入常量";
- }
- this.showVariable = true;
- } else if (e.key == "ai") {
- this.showSourceAi = true;
- } else if (e.key == "aiEs") {
- this.showSourceEs = true;
- } else {
- this.$emit("onEvents", e);
- }
- },
- },
- };
- </script>
- <style lang="scss">
- @import "./menus.scss";
- .menu.disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
- </style>
|