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

@@ -3,21 +3,44 @@
    <avue-crud
      ref="crud"
      v-model="form"
      :before-close="beforeClose"
      :before-open="beforeOpen"
      :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 v-if="permissionChildrenList.UiPageLayoutAddBtn" class="button-custom-icon" plain size="small"
                   type="primary"
                   @click="addClickHandler">
          <icon-show :name="permissionChildrenList.UiPageLayoutAddBtn.source"></icon-show>
          增加
        </el-button>
        <el-button icon="el-icon-edit-outline" plain size="small" type="primary"
                   @click="btnDesignClickHandler">按钮设计
      </template>

      <template slot="menu" slot-scope="scope">
        <el-button v-if="permissionChildrenList.UiPageLayoutDesignBtn" size="small" type="text"
                   @click="btnDesignClickHandler(scope.row)">
          <icon-show :name="permissionChildrenList.UiPageLayoutDesignBtn.source"></icon-show>
          按钮设计
        </el-button>
        <el-button v-if="permissionChildrenList.UiPageLayoutEditBtn" size="small" type="text"
                   @click="editBtnClick(scope.row)">
          <icon-show :name="permissionChildrenList.UiPageLayoutEditBtn.source"></icon-show>
          编辑
        </el-button>
        <el-button v-if="permissionChildrenList.UiPageLayoutDelBtn" size="small" type="text"
                   @click="rowDeleteHandler(scope.row)">
          <icon-show :name="permissionChildrenList.UiPageLayoutDelBtn.source"></icon-show>
          删除
        </el-button>
        <el-button v-if="permissionChildrenList.UiPageLayoutCloneBtn" size="small" type="text"
                   @click="rowCloneHandler(scope.row)">
          <icon-show :name="permissionChildrenList.UiPageLayoutCloneBtn.source"></icon-show>
          克隆
        </el-button>
      </template>

@@ -39,7 +62,6 @@
        </avue-crud>
      </template>


      <!-- 切换搜索类型 源对象 目标对象显示label切换 -->
      <template slot="showTypeLabel" slot-scope="{}">
        <span v-if="form.templateType === '3'">顶级节点</span>
@@ -48,6 +70,52 @@
        <span v-else-if="form.searchTarger === '1'">源对象</span>
        <span v-else-if="form.searchTarger === '2'">目标对象</span>
      </template>

      <template slot="extAttrLabel" slot-scope="{}">
        <el-tooltip placement="top">
          <div slot="content">示例:ext1:xx;ext2;ext3:xx;ext4:xxx;extn:xxx;
            <br/>1、用英交半角分号:分隔各组值;
            <br/>2、每组用英交半角冒号:分隔单一扩展属性名称及属性值;
            <br/>3、可以定义任意组，但总字符长度不得超过4000;
            <br/>4、输入时，不要敲回车换行;
          </div>
          <span>扩展属性 <i class="el-icon-warning" style="color:red;"></i> </span>
        </el-tooltip>
      </template>

      <template slot="uiParserLabel" slot-scope="{}">
        <el-tooltip placement="top">
          <div slot="content">示例：java_cs;xxx.java_bs;xxx.net_cs;xxxx.net_bs;xxx.mobile_cs;xx.mobile_bs;xxx;
            <br/>1、用英文半角分号;分割各组值；（这里结尾的是中文字符的分号）
            <br/>2、每组用英文半角冒号:分隔单一扩展属性名称及属性值；
            <br/>3、其中的xxx是各种解析类的完整类型名称（完全限定名)；
            <br/>4、输入时，不要敲回车换行;
          </div>
          <span>UI解析类型 <i class="el-icon-warning" style="color:red;"></i> </span>
        </el-tooltip>
      </template>

      <template slot="templateIdForm" slot-scope="{}">
        <el-select v-model="form.templateId" filterable placeholder="请选择">
          <el-option
            v-for="item in templateIdList"
            :key="item.viName"
            :label="item.viName"
            :value="item.viName">
          </el-option>
        </el-select>
      </template>

      <template slot="queryTemplateNameForm" slot-scope="{}">
        <el-select v-model="form.queryTemplateName" filterable placeholder="请选择">
          <el-option
            v-for="item in queryTemplateNameList"
            :key="item.qtName"
            :label="item.qtName"
            :value="item.qtName">
          </el-option>
        </el-select>
      </template>
    </avue-crud>
    <el-dialog
      v-dialogDrag
@@ -55,28 +123,36 @@
      append-to-body="true"
      class="avue-dialog"
      title="配置按钮"
      width="75%"
      @close="dialogClose">
      width="1200px"
      @close="$refs.form.clearValidate();disabledBtn=true;">
      <el-container v-loading="dialogLoading">
        <el-header style="height: 40px !important;">
        <el-header style="height: 40px !important;padding-left: 5px;">
          <div style="display: flex">
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加
            <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="primary"
                       @click="addClickBtnHandler">添加
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改
            <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="primary"
                       @click="editClickBtnHandler">修改
            </el-button>
            <el-button :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除
            <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="danger"
                       @click="delClickBtnHandler">删除
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="saveClickBtnHandler">保存
            <el-button v-show="!disabledBtn" :disabled="disabledBtn" icon="el-icon-check" plain size="mini"
                       type="success" @click="saveClickBtnHandler">保存
            </el-button>
            <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="escClickBtnHandler">取消
            <el-button v-show="!disabledBtn" :disabled="disabledBtn" icon="el-icon-close" plain size="mini"
                       type="danger" @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>
            <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="changeBottomBtnHandler">调整为下级按钮
            </el-button>
            <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="changeTopBtnHandler">调整为上级按钮
            </el-button>
            <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="cloneClickBtnHandler">复制到其他组件
            </el-button>
          </div>
        </el-header>
        <el-container>
          <el-aside width="20%">
          <el-aside width="25%">
            <basic-container>
              <div style="height:650px;">
                <avue-tree
@@ -87,9 +163,10 @@
                  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 style="display: flex">
                      <i v-if="data.oId=='parentNode'" class="iconShow el-icon-s-home"></i>
                      <icon-show v-if="data.oId!='parentNode' && data.iconPath && data.iconPath!='undefined'" :name="data.iconPath"></icon-show>
                        {{ (node || {}).label }}
                    </span>
                  </span>
                </avue-tree>
@@ -100,38 +177,40 @@
          <el-main>
            <basic-container>
              <el-divider content-position="left">基础信息</el-divider>
              <el-form ref="form" :model="basicForm" :rules="rules" label-width="90px" size="small"
              <el-form ref="form" :model="basicForm" :rules="rules" label-width="100px" 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">
                      <div style="display: flex">
                        <el-input v-model="basicForm.actionName" :readonly="disabledBtn"></el-input>
                        <el-button :disabled="disabledBtn" size="mini" style="margin-left: 10px" type="success"
                                   @click="actionFoucus">选择
                        </el-button>
                      </div>
                    </el-col>
                  </el-form-item>
                  <el-col :span="12">
                    <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-col>

                  <el-col :span="12">
                    <el-form-item label="是否授权：" prop="resource">
                    <el-form-item label="名称：" prop="label">
                      <el-input v-model="basicForm.label" :disabled="disabledBtn"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="Action：" prop="actionName">
                      <el-input v-model="basicForm.actionName" :clearable="true" :disabled="disabledBtn"
                                @clear="clearActionValue" @focus="actionFoucus">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
                           @click="actionFoucus"></i>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="是否授权：" prop="authorization">
                      <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="24">
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否显示：" prop="show">
                      <el-radio v-model="basicForm.show" :disabled="disabledBtn" label="0">是</el-radio>
@@ -139,7 +218,7 @@
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                  <el-col v-show="basicForm.show=='0'" :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>
@@ -147,10 +226,15 @@
                      </el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" v-show="basicForm.show=='0' && (basicForm.displayMode=='image'||basicForm.displayMode=='textandimage')">
                    <el-form-item :class="basicForm.displayMode==='image'?'is-required':''" label="图标：" prop="iconPath">
                      <input-icon v-model="basicForm.iconPath" :disabled="disabledBtn"></input-icon>
                    </el-form-item>
                  </el-col>

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

@@ -160,10 +244,12 @@
              <el-divider content-position="left">参数信息</el-divider>
              <avue-crud
                ref="paramsCrud"
                v-model="paramsForm"
                :data="paramsData"
                :option="paramsOption"
                style="margin-top: 20px"
                @row-save="paramsRowSave">
                @row-save="paramsRowSave"
                @row-update="paramsRowUpdate">
                <template slot="menuLeft" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary"
                             @click="paramsRowAddClickHandler">创建
@@ -171,6 +257,9 @@
                </template>

                <template slot="menu" slot-scope="scope">
                  <el-button :disabled="disabledBtn" icon="el-icon-edit" size="small" type="text"
                             @click="paramsRowEditHandler(scope.row)">修改
                  </el-button>
                  <el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text"
                             @click="paramsRowDeleteHandler(scope.row)">删除
                  </el-button>
@@ -182,7 +271,12 @@
        </el-container>
      </el-container>
    </el-dialog>
    <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
    <action-dialog ref="actionDialog" @cancelAction="actionCancelHandler"
                   @updataAction="actionSaveHandler"></action-dialog>
    <clone-dialog ref="cloneDialog" :fromOid="fromOid" :sourceOId="sourceOId" paramsType="tab"
                  type="pageDef"></clone-dialog>
    <clone-dialog ref="cloneBtnDialog" :fromOid="formBtnOid" :sourceOId="sourceBtnOid" paramsType="pageDef"
                  type="tabButton"></clone-dialog>
  </div>
</template>

@@ -191,14 +285,21 @@
import func from "@/util/func";
import {
  getPLPageDefinations,
  getBtmDatasByPage,
  getPortalVIDatasByPage,
  getQTInfoDatasByPage,
  getTabButtons,
  addTapButton,
  updateTapButton, getTabByContextIdAndType
  updateTapButton,
  addPageDefination,
  deleteTabButton,
  delPageDefination,
  joinBtn,
  exitBtn,
  updatePageDefination,
  getPortalVIDatasByPage,
  getQTInfoDatasByPage
} from "@/api/UI/uiDefine";
import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action';
import actionDialog from '@/views/modelingMenu/ui/Aciton/components/dialog';
import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog";
import {mapGetters} from "vuex";

export default {
  props: {
@@ -213,11 +314,22 @@
    }
  },
  components: {
    actionDialog
    actionDialog,
    cloneDialog
  },
  name: "index",
  data() {
    return {
      queryTemplateNameList: [],
      templateIdList: [],
      searchTargerChangeFlag: false,
      showTypeChangeFlag: false,
      linkTypeChangeFlag: false,
      formBtnOid: '',
      sourceBtnOid: '',
      sourceOId: '',
      fromOid: '',
      paramsForm: {},
      eventOption: {
        ...basicOption,
        addBtn: false,
@@ -225,6 +337,7 @@
        delBtn: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        height: 200,
        column: [
          {
            label: 'EventKey',
@@ -257,7 +370,7 @@
                message: '请输入eventValue',
                trigger: 'blur'
              }
              ]
            ]
          }
        ]
      },
@@ -276,14 +389,36 @@
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        dialogWidth: '600',
        menuWidth: '140',
        column: [
          {
            label: '名称',
            prop: 'name'
            prop: 'name',
            width: 180,
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '值',
            prop: 'value'
            prop: 'value',
            type: 'textarea',
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请输入值',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
@@ -294,11 +429,12 @@
        label: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        actionName: [
          {required: true, message: '请选择Action', trigger: 'change'},
        ],
      },
      // 按钮设计 基础信息
      basicForm: {
        seq: 1
      },
      basicForm: {},
      treeData: [],
      treeOption: {
        menu: false,
@@ -317,14 +453,20 @@
      data: [],
      option: {
        ...basicOption,
        size: 'mini',
        height: this.height,
        addBtn: false,
        index: true,
        calcHeight: -30,
        editBtn: false,
        delBtn: false,
        menuWidth: 300,
        column: [
          {
            label: '名称',
            prop: 'name',
            width: 220,
            labelWidth: 110,
            rules: [
              {
                required: true,
@@ -334,8 +476,11 @@
            ]
          },
          {
            label: '编号',
            label: '序号',
            prop: 'seq',
            width: 100,
            type:'number',
            labelWidth: 110,
            hide: false,
            rules: [
              {
@@ -349,16 +494,25 @@
            label: 'UI解析类型',
            prop: 'uiParser',
            hide: true,
            labelWidth: 110,
          },
          {
            label: '扩展属性',
            prop: 'extAttr',
            hide: true,
            labelWidth: 110,
          },
          {
            label: '描述',
            prop: 'description',
            labelWidth: 110,
            hide: false,
          },
          {
            label: '模板类型',
            prop: 'templateType',
            type: 'radio',
            labelWidth: 110,
            span: 24,
            value: '1',
            dicData: [
@@ -392,7 +546,11 @@
              return val;
            },
            change: (val) => {
              console.log(val);
              const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName', 'controlPath', 'expandCols', 'rootContent', 'showAbs', 'showLinkAbs', 'separator']
              // list.forEach(item => {
              //   this.form[item] = "";
              // })
              // this.form.searchTarger = '1'
              const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // 获取搜索类型配置项
              searchTarger.display = true; // 切换默认展示搜索类型
              // 模板类型为表格
@@ -413,6 +571,7 @@
            label: '显示类型',
            prop: 'navigatorType',
            type: 'radio',
            labelWidth: 110,
            span: 24,
            value: '1',
            hide: true,
@@ -435,6 +594,7 @@
            label: '搜索类型',
            prop: 'searchTarger',
            display: true,
            labelWidth: 110,
            type: 'radio',
            value: '1',
            span: 24,
@@ -457,173 +617,144 @@
                const obj = this.option.group[0].column.find(item => item.prop === 'linkType');
                obj.display = val.value !== '1';
              }

              if (this.searchTargerChangeFlag) {
                // 切换清空模板类型
                const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType', 'bsDataModel', 'csDataModel'];
                list.forEach(item => {
                  this.form[item] = '';
                })
              } else {
                this.searchTargerChangeFlag = true;
              }
            }
          },
          {
            label: '描述',
            prop: 'description',
            display: false
          },
        ],
        group: [
          {
            icon: 'el-icon-info',
            label: '',
            arrow: false,
            arrow: true,
            prop: 'group1',
            column: [
              {
                label: '源对象',
                prop: 'showType',
                type: 'table',
                display: false,
                type: 'select',
                labelWidth: 115,
                cascader: ['linkType', 'SubUILayout', 'searchObjType'],
                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
                      })
                dicUrl: '/api/uiManagerController/getBtmDatasByPage?page=1&limit=-1',
                filterable: true,
                change: (val) => {
                  if (val.value) {
                    let params = {
                      'conditionMap[selectBtmType]': this.form.searchTarger === '1' ? val.value : this.form.linkType
                    }
                    getPortalVIDatasByPage(1, -1, params).then(res => {
                      this.templateIdList = res.data.data;
                    })
                    getQTInfoDatasByPage(1, -1, params).then(res => {
                      this.queryTemplateNameList = res.data.data;
                    })
                  }
                  if (this.showTypeChangeFlag) {
                    if (val.value) {
                      if (this.form.searchTarger === '1') {
                        this.form.templateId = "";
                        this.form.queryTemplateName = "";
                      } else {
                        this.form.linkType = "";
                        this.form.templateId = "";
                        this.form.queryTemplateName = "";
                      }
                    }
                  } else {
                    this.showTypeChangeFlag = true;
                  }
                },
                props: {
                  label: 'name',
                  value: 'name',
                  desc: 'label'
                },
                rules: [
                  {
                    required: true,
                    message: '请选择内容',
                    trigger: 'change'
                  }
                ],
              },
              {
                label: '链接类型',
                prop: 'linkType',
                type: 'table',
                type: 'select',
                display: false,
                labelWidth: 115,
                filterable: true,
                props: {
                  label: 'viName',
                  value: 'viName'
                  label: 'name',
                  value: 'name',
                  desc: 'tag'
                },
                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
                      })
                dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
                change: (val) => {
                  if (val.value) {
                    let params = {
                      'conditionMap[selectBtmType]': val.value
                    }
                    getPortalVIDatasByPage(1, -1, params).then(res => {
                      this.templateIdList = res.data.data;
                    })
                    getQTInfoDatasByPage(1, -1, params).then(res => {
                      this.queryTemplateNameList = res.data.data;
                    })
                  }
                },
                  if (this.linkTypeChangeFlag) {
                    if (val.value) {
                      this.form.templateId = "";
                      this.form.queryTemplateName = "";
                    }
                  } else {
                    this.linkTypeChangeFlag = true;
                  }
                }
              },
              {
                label: '选择模板',
                prop: 'showTypea',
                prop: 'templateId',
                labelWidth: 115,
                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
                      })
                    })
                formslot: true,
                rules: [
                  {
                    required: true,
                    message: '请选择模板',
                    trigger: 'submit'
                  }
                },
                ],
              },
              {
                label: 'UI定义',
                prop: 'UI',
                type: 'table',
                prop: 'SubUILayout',
                type: 'select',
                labelWidth: 115,
                filterable: true,
                display: false,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                  label: 'plName',
                  value: 'plCode',
                },
                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
                      })
                    })
                  }
                },
                dicUrl: '/api/uiManagerController/getUILayoutDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
              },
              {
                label: '查询类型',
                prop: 'searchType',
                display: false,
                value: '1',
                type: 'radio',
                labelWidth: 115,
                span: 24,
                dicData: [
                  {
@@ -639,112 +770,59 @@
              {
                label: '查询对象类型',
                prop: 'searchObjType',
                type: 'table',
                type: 'select',
                display: false,
                labelWidth: 100,
                labelWidth: 115,
                props: {
                  label: 'qtName',
                  value: 'qtName'
                  value: 'qtName',
                  desc: 'btmName'
                },
                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
                      })
                    })
                  }
                },
                dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]=',// cs端有问题 暂时不展示内容
              },
              {
                label: '查询模板',
                prop: 'showTypes',
                type: 'table',
                prop: 'queryTemplateName',
                labelWidth: 115,
                type: 'select',
                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
                      })
                    })
                  }
                },
                formslot: true,
              },
              {
                label: '控制路径',
                prop: 'kzlj',
                prop: 'controlPath',
                labelWidth: 115,
                display: false,
                type: 'textarea',
                span: 24,
                rows: 3
              },
              {
                label: '根节点显示表达式',
                prop: 'genjiedian',
                label: '树结构展开列',
                prop: 'expandCols',
                labelWidth: 115,
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '树节点显示表达式',
                prop: 'shujiedian',
                display: false,
                labelWidth: 135,
                span: 24
                span: 12
              },
              {
                label: '参照树设置',
                prop: 'canzhaoshu',
                prop: 'showLinkAbs',
                labelWidth: 115,
                display: false,
              },
              {
                label: '分隔符',
                prop: 'fgf',
                prop: 'separator',
                labelWidth: 115,
                display: false,
              },
              {
                label: '展开方式',
                prop: 'zkfs',
                prop: 'expandMode',
                display: false,
                type: 'radio',
                labelWidth: 115,
                value: '1',
                dicData: [
                  {
                    label: '逐级展开',
@@ -752,9 +830,37 @@
                  },
                  {
                    label: '全部展开',
                    value: '2'
                    value: '0'
                  }
                ]
              },
              {
                label: 'B/S自定义查询',
                prop: 'bsDataModel',
                display: false,
                labelWidth: 115,
                span: 12
              },
              {
                label: 'C/S自定义查询',
                prop: 'csDataModel',
                display: false,
                labelWidth: 115,
                span: 12
              },
              {
                label: '根节点显示表达式',
                prop: 'rootContent',
                display: false,
                labelWidth: 135,
                span: 12
              },
              {
                label: '树节点显示表达式',
                prop: 'showAbs',
                display: false,
                labelWidth: 135,
                span: 12
              },
            ]
          },
@@ -777,13 +883,26 @@
      lastIndex: null,
      selectList: [],
      formDataRow: {},
      defaultForm: {},
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionChildrenList() {
      return {
        UiPageLayoutAddBtn: this.vaildData(this.permission[this.$route.query.id].CLSRIGHT, false),
        UiPageLayoutEditBtn: this.vaildData(this.permission[this.$route.query.id].DATARIGHT, false),
        UiPageLayoutDelBtn: this.vaildData(this.permission[this.$route.query.id].ATTRRIGHT, false),
        UiPageLayoutCloneBtn: this.vaildData(this.permission[this.$route.query.id].CLONE, false),
        UiPageLayoutDesignBtn: this.vaildData(this.permission[this.$route.query.id].UPLOAD, false),
      }
    }
  },
  watch: {
    sourceData: {
      handler(val) {
        if (val && val.plOId) {
          this.getTableList()
          this.getTableList();
        } else {
          this.data = [];
        }
@@ -792,7 +911,6 @@
      deep: true
    }
  },
  computed: {},
  methods: {
    //获取列表数据
    getTableList() {
@@ -806,6 +924,7 @@
        this.tableLoading = false;
      })
    },

    // 根据不同值区分类型
    templateTypeValueHandler(val) {
      const componentMap = {
@@ -835,19 +954,115 @@
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
          this.selectList = [row];
        }
      );
    },

    // 增加
    addClickHandler() {
      console.log(this.sourceData);
      if (!this.sourceData || !this.sourceData.plOId) {
        this.$message.error('请在上方选择一条数据后进行添加');
        return;
      }
      this.$refs.crud.rowAdd();
    },

    // 增加关闭对话框 清空event数组
    beforeClose(done) {
      this.eventData = [];
      this.showTypeChangeFlag = false;
      this.linkTypeChangeFlag = false;
      done();
    },

    // 修改
    editBtnClick(row) {
      this.eventData = [];
      if (row.eventKey && row.eventValue) {
        let keys = row.eventKey.split(',');
        let values = row.eventValue.split(',');

        this.eventData = keys.map((key, index) => {
          return {
            index: this.eventData.length,
            eventKey: key.trim(),
            eventValue: values[index],
            $cellEdit: true
          };
        });
      }
      this.searchTargerChangeFlag = false;
      this.$refs.crud.rowEdit(row);
    },

    // 删除
    rowDeleteHandler(row) {
      this.$confirm('您确定要删除所选择的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          oids: row.id
        }
        delPageDefination(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTableList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 保存
    rowSaveHandler(row, done, loading) {
      if (row.templateType === '6') {
        row.SubUIObjType = row.showType;
        row.showType = "";
      }
      if (row.templateType === '5' && this.form.linkType && !this.form.showLinkAbs) {
        this.$message.error('请选择参照树设置');
        return loading();
      }
      const params = {
        ...row,
        tabPageOId: this.sourceData.plOId
      }
      addPageDefination(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        loading();
      })
    },

    rowUpdateHandler(row, index, done, loading) {
      if (row.templateType === '6') {
        row.SubUIObjType = row.showType;
        row.showType = "";
      }
      const params = {
        ...row,
        tabPageOId: this.sourceData.plOId
      }
      updatePageDefination(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTableList();
          done();
        }
      }).catch(err => {
        loading();
      })
    },

    // 对话框表格行点击
@@ -857,24 +1072,6 @@

    // 对话框表格添加
    formDataAddClickHandler() {
      // if (!this.form.eventKey) {
      //   this.$message.error('请选择EventKey');
      //   return;
      // }
      //
      // if (!this.form.eventValue) {
      //   this.$message.error('请输入EventValue');
      //   return;
      // }
      //
      // if (this.eventData.length >= 1) {
      //   const eventValueStatus = this.eventData.some(item => item.eventValue === this.form.eventValue);
      //
      //   if (eventValueStatus) {
      //     this.$message.error('已存在相同的 EventValue，不能重复添加');
      //     return;
      //   }
      // }
      const obj = {
        index: this.eventData.length,
        eventKey: this.form.eventKey || 'SelectionEvent',
@@ -901,7 +1098,7 @@
    // 模板类型为表格
    templateTypeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
      this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'bsDataModel', 'csDataModel']);
    },

    // 模板类型为自定义模板
@@ -909,19 +1106,19 @@
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // 获取搜索类型配置项
      searchTarger.display = false; // 不展示搜索类型
      this.updateDisplay(val, ['kzlj']);
      this.updateDisplay(val, ['controlPath']);
    },

    // 模板类型为树表
    templateTypeTreeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes', 'zkl', 'zkfs']);
      this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'expandCols', 'expandMode', 'bsDataModel', 'csDataModel']);
    },

    // 模板类型为表单
    templateTypeForm(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
      this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'bsDataModel', 'csDataModel']);
    },

    // 模板类型为树
@@ -929,7 +1126,7 @@
      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']);
      this.updateDisplay(val, ['showType', 'queryTemplateName', 'rootContent', 'showAbs', 'showLinkAbs', 'separator', 'expandMode', 'linkType', 'bsDataModel', 'csDataModel']);
    },

    // 模板类型为UI定义
@@ -937,7 +1134,7 @@
      if (!val) return;
      const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // 获取搜索类型配置项
      searchTarger.display = false; // 不展示搜索类型
      this.updateDisplay(val, ['showType', 'UI', 'searchType', 'searchObjType', 'showTypes']);
      this.updateDisplay(val, ['showType', 'SubUILayout', 'searchType', 'searchObjType', 'queryTemplateName', 'bsDataModel', 'csDataModel']);
    },

    // 查找数组中对象索引
@@ -965,38 +1162,35 @@
      }
    },

    // 按钮设计关闭对话框
    dialogClose() {

    },

    // 按钮设计
    btnDesignClickHandler() {
      if (this.selectList.length != 1) {
    btnDesignClickHandler(row) {
      /*if (this.selectList.length != 1) {
        this.$message.error('请选择一条数据');
        return;
      }
      }*/
      this.btnDesignVisible = true;
      this.getTabBtnTree();
      this.formBtnOid = row.id;
      this.getTabBtnTree(row);
    },

    // 左侧树请求
    getTabBtnTree() {
    getTabBtnTree(row) {
      const params = {
        pageDefinationOid: this.selectList[0].id
        pageDefinationOid: row && row.id ? row.id : this.selectList[0].id
      }
      this.treeLoading = true;
      getTabButtons(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData = [{
            label: this.selectList[0].name,
            label: row && row.id ? row.name : this.selectList[0].name,
            oId: 'parentNode',
            disabled: true,
            children: data
          }];
          this.treeLoading = false;
        } else {
          this.$message.error('请检查控制台错误');
          this.$message.error(res.data.msg);
        }
      })
    },
@@ -1004,12 +1198,14 @@
    // 按钮设计行点击
    nodeTreeClick(row) {
      this.nodeTreeRow = row;
      this.defaultForm = {...row};
      this.basicForm = {...row};
      this.paramsData = row.buttonParams ? Object.entries(row.buttonParams).map(([key, value]) => ({
        name: key,
        value: value
      })) : [];
      this.disabledBtn = true;
      this.$refs.form.clearValidate();
    },

    // 按钮设计参数信息删除
@@ -1017,9 +1213,20 @@
      this.paramsData.splice(row.$index, 1)
    },

    // 按钮设计信息参数信息修改
    paramsRowEditHandler(row) {
      this.$refs.paramsCrud.rowEdit(row, row.$index);
    },

    // 按钮设计参数信息添加按钮
    paramsRowAddClickHandler() {
      this.$refs.paramsCrud.rowAdd();
    },

    // 按钮设计参数信息修改保存
    paramsRowUpdate(row, index, done, loading) {
      this.paramsData.splice(index, 1, row);
      done();
    },

    // 按钮设计参数信息保存
@@ -1071,42 +1278,54 @@
      this.disabledBtn = true;
      if (this.saveType === 'add') {
        this.$refs.Tree.setCurrentKey(null);
        this.$refs.form.resetFields();
      } else {
        this.basicForm = {...this.defaultForm};
      }
    },

    // 按钮设计保存
    saveClickBtnHandler() {
      this.dialogLoading = true;
      const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton;
      const bottomParams = {};
      if (this.paramsData.length > 0) {
        this.paramsData.forEach(item => {
          bottomParams[item.name] = item.value
        })
      if (this.basicForm.show == '0' && this.basicForm.displayMode == 'image' && this.basicForm.iconPath == '') {
        this.$message.error('请选择图标');
        return;
      }
      ;
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          this.dialogLoading = true;
          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,
            tableOId: this.selectList[0].id
          } : {
            ...this.basicForm,
            buttonParams: bottomParams
          }

      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 = [];
          this.dialogLoading = false;
          saveFunction(params).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.obj);
              this.disabledBtn = true;
              this.getTabBtnTree();
              this.paramsData = [];
              this.dialogLoading = false;
              this.$refs.form.resetFields();
            }
          }).catch(err => {
            this.dialogLoading = false;
          })
        } else {
          return false;
        }
      }).catch(err => {
        this.dialogLoading = false;
      })
      });
    },

    // 按钮设计删除
@@ -1126,7 +1345,14 @@
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deleteTabButton(this.nodeTreeRow).then(res => {
          if (res.data.code === 200) {
            this.$message.success('删除成功');
            this.getTabBtnTree();
            this.basicForm = {};
            this.paramsData = [];
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
@@ -1135,17 +1361,88 @@
      });
    },

    // 复制到其他组件
    cloneClickBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行复制');
        return;
      }
      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许复制');
        return;
      }
      this.sourceBtnOid = this.nodeTreeRow.oId;
      this.$refs.cloneBtnDialog.openDialog(this.nodeTreeRow);
    },

    // 选择action
    actionFoucus() {
      this.$refs.actionDialog.btnActionVisible = true;
      this.$refs.actionDialog.openDialog();
    },

    // 保存action
    actionSaveHandler(val) {
      this.$set(this.basicForm, 'actionName', val.plName);
      this.$set(this.basicForm, 'actionOId', val.plOId);
      this.$set(this.basicForm, 'iconPath', val.plImage);//图标
      this.$refs.form.clearValidate('Action')
    },
    // action选择弹窗直接关闭
    actionCancelHandler() {
      if (this.basicForm.actionOId) {
        this.$refs.form.clearValidate('Action')
      }
    },

    //清除action
    clearActionValue() {
      this.$set(this.basicForm, 'actionName', '');
      this.$set(this.basicForm, 'actionOId', '');
    },
    // 打开克隆对话框
    rowCloneHandler(row) {
      this.fromOid = this.sourceData.plOId;
      this.sourceOId = row.id;
      this.$refs.cloneDialog.openDialog(row);
    },

    // 调整为下级按钮
    changeBottomBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行修改');
        return;
      }

      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许调整');
        return;
      }
      joinBtn(this.nodeTreeRow).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTabBtnTree();
        }
      })
    },

    // 调整为上级按钮
    changeTopBtnHandler() {
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行修改');
        return;
      }
      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许调整');
        return;
      }
      exitBtn(this.nodeTreeRow).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.getTabBtnTree();
        }
      })
    }
  }
  },
}
</script>