UI定义右下方表格

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1152 @@
<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :table-loading="tableLoading"
      @row-del="rowDelHandler"
      @row-save="rowSaveHandler"
      @row-update="rowUpdateHandler"
      @refresh-change="handleRefresh"
      @selection-change="selectChangeHandler"
      @row-click="rowClickHandler">
      <template slot="menuLeft" slot-scope="scope">
        <el-button icon="el-icon-plus" plain size="small" type="primary"
                   @click="addClickHandler">增加
        </el-button>
        <el-button icon="el-icon-edit-outline" plain size="small" type="primary"
                   @click="btnDesignClickHandler">按钮设计
        </el-button>
      </template>

      <!-- eventKey操作按钮 -->
      <template slot="eventButtonForm" slot-scope="scope">
        <div style="width: 100%;display: flex;justify-content: center">
          <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">创建</el-button>
          <el-button plain size="mini" type="danger" @click="formDataDelClickHandler">删除</el-button>
          <el-button plain size="mini" type="primary" @click="moveUp">上移</el-button>
          <el-button plain size="mini" type="primary" @click="moveDown">下移</el-button>
        </div>
      </template>
      <!-- eventKey以及eventValue显示区域 -->
      <template slot="bottomValueForm" slot-scope="scope">
        <div style="height: 200px; width: 95%; border: 1px solid #bdbbbb;overflow-y: auto">
          <!-- å†…容 -->
          <el-table
            :data="FormData"
            :highlight-current-row="true"
            style="width: 100%"
            @row-click="formDataRowClick">
            <el-table-column
              align="center"
              label="EventKey"
              prop="eventKey">
            </el-table-column>
            <el-table-column
              align="center"
              label="EventValue"
              prop="eventValue">
            </el-table-column>
          </el-table>
        </div>
      </template>

      <!-- åˆ‡æ¢æœç´¢ç±»åž‹ æºå¯¹è±¡ ç›®æ ‡å¯¹è±¡æ˜¾ç¤ºlabel切换 -->
      <template slot="showTypeLabel" slot-scope="{}">
        <span v-if="form.templateType === '3'">顶级节点</span>
        <span v-else-if="form.templateType === '5'">业务类型</span>
        <span v-else-if="form.templateType === '6'">对象类型</span>
        <span v-else-if="form.searchTarger === '1'">源对象</span>
        <span v-else-if="form.searchTarger === '2'">目标对象</span>
      </template>
    </avue-crud>
    <el-dialog
      v-dialogDrag
      :visible.sync="btnDesignVisible"
      append-to-body="true"
      class="avue-dialog"
      title="配置按钮"
      width="70%"
      @close="dialogClose">
      <el-container>
        <el-header style="height: 40px !important;">
          <div style="display: flex">
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="saveClickBtnHandler">保存
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="escClickBtnHandler">取消
            </el-button>
            <el-button plain size="mini" type="primary">调整为下级按钮</el-button>
            <el-button plain size="mini" type="primary">调整为上级按钮</el-button>
            <el-button plain size="mini" type="primary">复制到其他组件</el-button>
          </div>
        </el-header>
        <el-container>
          <el-aside width="20%">
            <basic-container>
              <div style="height:650px;">
                <avue-tree
                  ref="Tree"
                  :data="treeData"
                  :loading="treeLoading"
                  :option="treeOption"
                  node-key="value"
                  @node-click="nodeTreeClick">
                  <span slot-scope="{ node, data }" class="el-tree-node__label">
                    <span style="font-size: 14px">
                    <i class="el-icon-s-promotion"></i>
                      {{ (node || {}).label }}
                    </span>
                  </span>
                </avue-tree>
              </div>
            </basic-container>
          </el-aside>

          <el-main>
            <basic-container>
              <el-divider content-position="left">基础信息</el-divider>
              <el-form ref="form" :model="basicForm" :rules="rules" label-width="90px" size="small"
                       style="margin-top: 20px">
                <el-row>
                  <el-form-item :inline-message='true' label="编号：" prop="seq">
                    <el-input-number v-model="basicForm.seq" :disabled="disabledBtn" :max="9999" :min="1"
                                     controls-position="right"></el-input-number>
                  </el-form-item>

                  <el-form-item :inline-message='true' label="名称：" prop="label">
                    <el-col :span="14">
                      <el-input v-model="basicForm.label" :readonly="disabledBtn"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="Action：" prop="Action">
                    <el-col :span="14">
                      <el-input v-model="basicForm.actionOId" :readonly="disabledBtn"></el-input>
                    </el-col>
                  </el-form-item>

                  <el-col :span="12">
                    <el-form-item label="是否授权：" prop="resource">
                      <el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="0">是</el-radio>
                      <el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="1">否</el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="是否显示：" prop="show">
                      <el-radio v-model="basicForm.show" :disabled="disabledBtn" label="0">是</el-radio>
                      <el-radio v-model="basicForm.show" :disabled="disabledBtn" label="1">否</el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="显示方式：" prop="showType">
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="text">文字</el-radio>
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="image">图标</el-radio>
                      <el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="textandimage">文字和图标
                      </el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="提示信息：" prop="desc">
                      <el-input v-model="basicForm.desc" :readonly="disabledBtn" type="textarea"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>

              <el-divider content-position="left">参数信息</el-divider>
              <avue-crud
                ref="paramsCrud"
                :data="paramsData"
                :option="paramsOption"
                style="margin-top: 20px"
                @row-save="paramsRowSave">
                <template slot="menuLeft" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary"
                             @click="paramsRowAddClickHandler">创建
                  </el-button>
                </template>

                <template slot="menu" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text"
                             @click="paramsRowDeleteHandler(scope.row)">删除
                  </el-button>
                </template>

              </avue-crud>
            </basic-container>
          </el-main>
        </el-container>
      </el-container>
    </el-dialog>
  </basic-container>
</template>

<script>
import basicOption from "@/util/basic-option";
import func from "@/util/func";
import {
  getBtmDatasByPage,
  getPortalVIDatasByPage,
  getQTInfoDatasByPage,
  getTabButtons,
  addTapButton,
  updateTapButton
} from "@/api/UI/uiDefine/api";

export default {
  props: {
    sourceData: {
      type: Array,
      default: () => [
        {
          "controlPath": "",
          "description": "",
          "eventKey": "",
          "eventMap": null,
          "eventValue": "",
          "expandCols": "",
          "expandMode": "",
          "extAttr": "",
          "id": "ABAE25CE-867E-9C73-AC1A-B316FD91C65B",
          "isShowImage": "",
          "linkType": "parttodocument",
          "name": "技术文件",
          "navigatorType": "",
          "orderField": "",
          "orderMode": "",
          "orientation": "",
          "qryType": null,
          "queryTemplateName": "QueryPartEngineeringTechnology",
          "refTreeSet": "",
          "returnRows": "",
          "rootContent": "",
          "searchTarger": "2",
          "separator": "",
          "seq": "1",
          "showAbs": "",
          "showContent": "",
          "showContentRelation": "",
          "showContentTable": "",
          "showContentType": "",
          "showExpression": "",
          "showExpressionRoot": "",
          "showLinkAbs": "",
          "showType": "document",
          "subUILayout": "",
          "subUIObjType": "",
          "tabPageOId": "98F9082F-BAF4-FB81-3230-32590B34A329",
          "templateId": "PartEngineeringTechnology_list",
          "templateType": "1",
          "type": 3,
          "uiLayout": null,
          "uiParser": "",
          "validity": ""
        }
      ]
    },
    height: {
      type: String,
      default: () => "auto"
    }
  },
  name: "index",
  data() {
    return {
      saveType: '',
      disabledBtn: true,
      paramsData: [],
      nodeTreeRow: {},
      paramsOption: {
        ...basicOption,
        height: 260,
        addBtn: false,
        tip: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        column: [
          {
            label: '名称',
            prop: 'name'
          },
          {
            label: '值',
            prop: 'value'
          }
        ]
      },
      rules: {
        seq: [
          {required: true, message: '请输入编号', type: 'number', trigger: 'blur'},
        ],
        label: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
      },
      // æŒ‰é’®è®¾è®¡ åŸºç¡€ä¿¡æ¯
      basicForm: {
        seq: 1
      },
      treeData: [
        {
          label: this.sourceData[0].name,
          oId: 'parentNode',
          children: []
        }
      ],
      treeOption: {
        menu: false,
        addBtn: false,
        defaultExpandedKeys: ['parentNode'],
        props: {
          label: 'label',
          value: 'oId',
          children: 'children',
        },
      },
      treeLoading: false,
      btnDesignVisible: false,
      FormData: [],
      form: {},
      data: this.sourceData,
      option: {
        ...basicOption,
        height: this.height,
        addBtn: false,
        index: true,
        calcHeight: -30,
        column: [
          {
            label: '名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编号',
            prop: 'seq',
            hide: false,
            rules: [
              {
                required: true,
                message: '请输入编号',
                trigger: 'blur'
              }
            ],
          },
          {
            label: 'UI解析类型',
            prop: 'uiParser',
            hide: true,
          },
          {
            label: '扩展属性',
            prop: 'extAttr',
            hide: true,
          },
          {
            label: '模板类型',
            prop: 'templateType',
            type: 'radio',
            span: 24,
            value: '1',
            dicData: [
              {
                label: 'Table(表格)',
                value: '1'
              },
              {
                label: 'Custom（自定义模板）',
                value: '2'
              },
              {
                label: 'TreeTable(树表)',
                value: '3',
              },
              {
                label: 'Form(表单)',
                value: '4',
              },
              {
                label: 'Tree(树)',
                value: '5',
              },
              {
                label: 'UILayout(UI定义)',
                value: '6',
              }
            ],
            formatter: (row) => {
              const val = this.templateTypeValueHandler(row.templateType);
              return val;
            },
            change: (val) => {
              console.log(val);
              const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
              searchTarger.display = true; // åˆ‡æ¢é»˜è®¤å±•ç¤ºæœç´¢ç±»åž‹
              // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨æ ¼
              this.templateTypeTable(val.value === '1');
              // æ¨¡æ¿ç±»åž‹ä¸ºè‡ªå®šä¹‰æ¨¡æ¿
              this.templateTypeCustom(val.value === '2');
              // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘表
              this.templateTypeTreeTable(val.value === '3');
              // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨å•
              this.templateTypeForm(val.value === '4');
              // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘
              this.templateTypeTree(val.value === '5');
              // æ¨¡æ¿ç±»åž‹ä¸ºUI定义
              this.templateTypeUI(val.value === '6');
            }
          },
          {
            label: '显示类型',
            prop: 'navigatorType',
            type: 'radio',
            span: 24,
            value: '1',
            hide: true,
            dicData: [
              {
                label: '不显示',
                value: '1'
              },
              {
                label: '显示角色',
                value: '2'
              },
              {
                label: '显示Folder',
                value: '3',
              },
            ],
          },
          {
            label: '搜索类型',
            prop: 'searchTarger',
            display: true,
            type: 'radio',
            value: '1',
            span: 24,
            dicData: [
              {
                label: '本对象属性',
                value: '1'
              },
              {
                label: '关联对象属性',
                value: '2'
              },
            ],
            formatter: (row) => {
              return row.searchTarger === '1' ? '本对象属性' : '关联对象属性';
            },
            change: (val) => {
              // å¦‚果模板类型是表格、 æ ‘表 ã€ è¡¨å• åˆ‡æ¢å¯¹è±¡å±žæ€§çš„时候，如果是本对象属性不展示链接类型，否则展示链接类型
              if (['1', '3', '4'].includes(this.form.templateType)) {
                const obj = this.option.group[0].column.find(item => item.prop === 'linkType');
                obj.display = val.value !== '1';
              }
            }
          },
          {
            label: '描述',
            prop: 'description',
            display: false
          },
        ],
        group: [
          {
            icon: 'el-icon-folder-opened',
            label: '',
            arrow: false,
            prop: 'group1',
            column: [
              {
                label: '源对象',
                prop: 'showType',
                type: 'table',
                display: false,
                placeholder: "请输入内容",
                props: {
                  label: 'name',
                  value: 'name'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'name'
                  }, {
                    label: '标签',
                    prop: 'label'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  //page分页
                  // ä¸ç®¡æ˜¯æœç´¢ è¿˜æ˜¯é¦–次加载都会触发page æ‰€ä»¥åªéœ€è¦æ‹¿page存在与否进行请求就可以 å¦‚果再去判断data搜索 æˆ–者value初次加载就会重复请求
                  if (page) {
                    const params = {
                      "conditionMap[filterInputValue]": value ? value.name : ''
                    };
                    getBtmDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '链接类型',
                prop: 'linkType',
                type: 'table',
                display: false,
                props: {
                  label: 'viName',
                  value: 'viName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'viName'
                  }, {
                    label: '类型',
                    prop: 'viType'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.viName : '',
                    };
                    getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '选择模板',
                prop: 'showTypea',
                display: false,
                type: 'table',
                props: {
                  label: 'viName',
                  value: 'viName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'viName'
                  }, {
                    label: '类型',
                    prop: 'viType'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.viName : '',
                    };
                    getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: 'UI定义',
                prop: 'UI',
                type: 'table',
                display: false,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '查询类型',
                prop: 'searchType',
                display: false,
                type: 'radio',
                span: 24,
                dicData: [
                  {
                    label: '业务类型',
                    value: '1'
                  },
                  {
                    label: '链接类型',
                    value: '2'
                  }
                ]
              },
              {
                label: '查询对象类型',
                prop: 'searchObjType',
                type: 'table',
                display: false,
                labelWidth: 100,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '查询模板',
                prop: 'showTypes',
                type: 'table',
                display: false,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                },
                children: {
                  border: true,
                  column: [{
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'qtName'
                  }, {
                    label: '类型',
                    prop: 'btmName'
                  }],
                },
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
                        total: res.data.total,
                        data: res.data.data
                      })
                    })
                  }
                },
              },
              {
                label: '控制路径',
                prop: 'kzlj',
                display: false,
                type: 'textarea',
                rows: 3
              },
              {
                label: '根节点显示表达式',
                prop: 'genjiedian',
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '树节点显示表达式',
                prop: 'shujiedian',
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '参照树设置',
                prop: 'canzhaoshu',
                display: false,
              },
              {
                label: '分隔符',
                prop: 'fgf',
                display: false,
              },
              {
                label: '展开方式',
                prop: 'zkfs',
                display: false,
                type: 'radio',
                dicData: [
                  {
                    label: '逐级展开',
                    value: '1'
                  },
                  {
                    label: '全部展开',
                    value: '2'
                  }
                ]
              },
            ]
          },
          {
            icon: 'el-icon-folder-opened',
            label: '',
            arrow: false,
            prop: 'group2',
            column: [
              {
                label: 'EventKey',
                prop: 'eventKey',
                type: 'select',
                value: 'SelectionEvent',
                dicData: [
                  {
                    label: 'SelectionEvent',
                    value: 'SelectionEvent'
                  },
                  {
                    label: 'DBClickEvent',
                    value: 'DBClickEvent'
                  },
                  {
                    label: 'ClickEvent',
                    value: 'ClickEvent'
                  }
                ],
              },
              {
                label: 'EventValue',
                prop: 'eventValue',
                labelWidth: 100
              },
              {
                label: '',
                prop: 'eventButton',
                span: 24
              },
              {
                label: '',
                prop: 'bottomValue',
                span: 24
              },
            ]
          }
        ],
      },
      tableLoading: false,
      lastIndex: null,
      selectList: [],
      formDataRow: {},
    }
  },
  computed: {},
  methods: {
    // æ ¹æ®ä¸åŒå€¼åŒºåˆ†ç±»åž‹
    templateTypeValueHandler(val) {
      const componentMap = {
        '1': '表格',
        '2': '自定义模板',
        '3': '树表',
        '4': '表单',
        '5': '树',
        '6': 'UI定义',
      };

      return componentMap[val] || ""; // å¦‚果为空 è¿”回空
    },

    // è¡¨æ ¼å¤šé€‰
    selectChangeHandler(row) {
      this.selectList = row;
    },

    // è¡Œç‚¹å‡»
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    // å¢žåŠ 
    addClickHandler() {
      this.$refs.crud.rowAdd();
    },

    // å¯¹è¯æ¡†è¡¨æ ¼è¡Œç‚¹å‡»
    formDataRowClick(row) {
      this.formDataRow = row;
    },

    // å¯¹è¯æ¡†è¡¨æ ¼æ·»åŠ 
    formDataAddClickHandler() {
      if (!this.form.eventKey) {
        this.$message.error('请选择EventKey');
        return;
      }

      if (!this.form.eventValue) {
        this.$message.error('请输入EventValue');
        return;
      }

      if (this.FormData.length >= 1) {
        const eventValueStatus = this.FormData.some(item => item.eventValue === this.form.eventValue);

        if (eventValueStatus) {
          this.$message.error('已存在相同的 EventValue，不能重复添加');
          return;
        }
      }
      const obj = {
        index: this.FormData.length,
        eventKey: this.form.eventKey,
        eventValue: this.form.eventValue
      }

      this.FormData.push(obj);
    },

    // å¯¹è¯æ¡†è¡¨æ ¼åˆ é™¤
    formDataDelClickHandler() {
      if (func.isEmptyObject(this.formDataRow)) {
        this.$message.error('请选择一条数据');
        return;
      }

      this.FormData = this.FormData.filter(item => item.index !== this.formDataRow.index);
    },

    // æ¨¡æ¿ç±»åž‹æ˜¾ç¤ºéšè—æ–¹æ³•
    updateDisplay(val, showTpeMap) {
      const groupList = this.option.group[0].column; // èŽ·å–第一层group所有数据
      groupList.forEach(item => {
        item.display = showTpeMap.includes(item.prop) ? val : !val; // æ›´æ–°display
      });
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨æ ¼
    templateTypeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè‡ªå®šä¹‰æ¨¡æ¿
    templateTypeCustom(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['kzlj']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘表
    templateTypeTreeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes', 'zkl', 'zkfs']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºè¡¨å•
    templateTypeForm(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºæ ‘
    templateTypeTree(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['showType', 'showTypes', 'genjiedian', 'shujiedian', 'canzhaoshu', 'fgf', 'zkfs', 'linkType']);
    },

    // æ¨¡æ¿ç±»åž‹ä¸ºUI定义
    templateTypeUI(val) {
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // èŽ·å–搜索类型配置项
      searchTarger.display = false; // ä¸å±•ç¤ºæœç´¢ç±»åž‹
      this.updateDisplay(val, ['showType', 'UI', 'searchType', 'searchObjType', 'showTypes']);
    },

    // æŸ¥æ‰¾æ•°ç»„中对象索引
    findIndexByEventValue(array, eventValue) {
      return array.findIndex(item => item.eventValue === eventValue);
    },

    // ä¸Šç§»
    moveUp() {
      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
      if (index > 0) {
        // ä½¿ç”¨ splice æ–¹æ³•æ¥æ¨¡æ‹Ÿäº¤æ¢
        const temp = this.FormData.splice(index - 1, 1, this.FormData[index])[0]; // ç§»é™¤ index-1 çš„元素，并在相同位置插入 index çš„元素，返回被移除的元素
        this.FormData.splice(index, 1, temp); // åœ¨ index ä½ç½®æ’入之前被移除的元素
      }
    },

    // ä¸‹ç§»
    moveDown() {
      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
      const length = this.FormData.length;
      if (index < length - 1) {
        const temp = this.FormData[index];
        this.FormData.splice(index, 1, this.FormData.splice(index + 1, 1, temp)[0]);
      }
    },

    // æŒ‰é’®è®¾è®¡å…³é—­å¯¹è¯æ¡†
    dialogClose() {

    },

    // æŒ‰é’®è®¾è®¡
    btnDesignClickHandler() {
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      if (this.selectList.length > 1) {
        this.$message.error('最多选择一条数据');
        return;
      }
      this.btnDesignVisible = true;
      this.getTabBtnTree();
    },

    // å·¦ä¾§æ ‘请求
    getTabBtnTree() {
      const params = {
        pageDefinationOid: this.selectList[0].id
      }
      this.treeLoading = true;
      getTabButtons(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData[0].children = data;
          this.treeLoading = false;
        } else {
          this.$message.error('请检查控制台错误');
        }
      })
    },

    // æŒ‰é’®è®¾è®¡è¡Œç‚¹å‡»
    nodeTreeClick(row) {
      this.nodeTreeRow = row;
      this.basicForm = {...row};
      this.paramsData = row.buttonParams ? Object.entries(row.buttonParams).map(([key, value]) => ({
        name: key,
        value: value
      })) : [];
      this.disabledBtn = true;
    },

    // æŒ‰é’®è®¾è®¡å‚数信息删除
    paramsRowDeleteHandler(row) {
      this.paramsData.splice(row.$index, 1)
    },

    // æŒ‰é’®è®¾è®¡å‚数信息添加按钮
    paramsRowAddClickHandler() {
      this.$refs.paramsCrud.rowAdd();
    },

    // æŒ‰é’®è®¾è®¡å‚数信息保存
    paramsRowSave(row, done, loading) {
      if (!row.name) {
        this.$message.error('名称不能为空');
        return loading();
      }

      if (!row.value) {
        this.$message.error('值不能为空');
        return loading();
      }

      this.paramsData.push(row);
      done();
    },

    // æŒ‰é’®è®¾è®¡æ·»åŠ 
    addClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行添加');
        return;
      }
      this.disabledBtn = false;
      this.basicForm = {};
      this.paramsData = [];
      this.saveType = 'add';
    },

    // æŒ‰é’®è®¾è®¡ä¿®æ”¹
    editClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行添加');
        return;
      }

      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许修改');
        return;
      }

      this.disabledBtn = false;
      this.saveType = 'edit';
    },

    // æŒ‰é’®è®¾è®¡å–消
    escClickBtnHandler() {
      this.disabledBtn = true;
      if (this.saveType === 'add') {
        this.$refs.Tree.setCurrentKey(null);
      }
    },

    // æŒ‰é’®è®¾è®¡ä¿å­˜
    saveClickBtnHandler() {
      const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton;
      const bottomParams = {};
      if (this.paramsData.length > 0) {
        this.paramsData.forEach(item => {
          bottomParams[item.name] = item.value
        })
      }
      ;

      const params = this.saveType === 'add' ? {
        ...this.basicForm,
        parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId,
        buttonParams: bottomParams
      } : {
        ...this.basicForm,
        buttonParams: bottomParams
      }

      saveFunction(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.disabledBtn = true;
          this.getTabBtnTree();
          this.basicForm = {};
          this.paramsData = [];
        }
      })
    },

    // æŒ‰é’®è®¾è®¡åˆ é™¤
    delClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行删除');
        return;
      }

      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许删除');
        return;
      }

      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.el-divider__text, .el-link {
  font-size: 16px !important;
}
</style>