整合代码

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

@@ -1,55 +1,68 @@
<template>
  <el-container>

    <el-aside>
      <basic-container>
        <!-- 左侧树 -->
        <div style="height:580px">
          <avue-tree
            ref="tree"
            v-model="treeForm"
            :data="treeData"
            :option="treeOption"
            @node-click="nodeClick">
  <el-dialog
    v-dialogDrag
    :visible.sync="btnActionVisible"
    append-to-body="true"
    class="avue-dialog"
    title="选择Action"
    width="70%"
    @close="dialogClose">
    <el-container>
      <el-aside>
        <basic-container>
          <!-- 左侧树 -->
          <div>
            <avue-tree
              ref="tree"
              v-model="treeForm"
              :data="treeData"
              :option="treeOption"
              node-key="value"
              @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
          </avue-tree>
        </div>
      </basic-container>
    </el-aside>
            </avue-tree>
          </div>
        </basic-container>
      </el-aside>

    <el-main>
      <basic-container>
        <div>
          <avue-crud
            ref="crud"
            v-model="form"
            :data="data"
            :option="option"
            :page.sync="page"
            :table-loading="tableLoading"
            @search-change="handleSearch"
            @search-reset="handleReset"
            @refresh-change="handleRefresh"
            @selection-change="selectChangeHandler"
            @row-click="rowClickHandler">
            <template slot="plTypeType" slot-scope="{row}">
              <el-tag :type="row.plTypeType === 'business' ? '' : 'success'">
                {{ row.plTypeType === 'business' ? '业务类型' : '链接类型' }}
              </el-tag>
            </template>
      <el-main>
        <basic-container>
          <div>
            <avue-crud
              ref="crud"
              v-model="form"
              :data="data"
              :option="option"
              :page.sync="page"
              :table-loading="tableLoading"
              @search-change="handleSearch"
              @search-reset="handleReset"
              @refresh-change="handleRefresh"
              @selection-change="selectChangeHandler"
              @row-click="rowClickHandler">
              <template slot="plTypeType" slot-scope="{row}">
                <el-tag :type="row.plTypeType === 'business' ? '' : 'success'">
                  {{ row.plTypeType === 'business' ? '业务类型' : '链接类型' }}
                </el-tag>
              </template>

          </avue-crud>
        </div>
      </basic-container>
    </el-main>
            </avue-crud>
          </div>
        </basic-container>
      </el-main>


  </el-container>
    </el-container>
    <span slot="footer" class="dialog-footer">
        <el-button @click="btnActionVisible = false">取 消</el-button>
        <el-button type="primary" @click="actionSaveHandler">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
@@ -75,6 +88,7 @@
  name: "index",
  data() {
    return {
      btnActionVisible: false,
      currenRow: {}, // action当前行信息
      topMethodsObj: {
        select: true,
@@ -126,7 +140,7 @@
      option: {
        ...basicOption,
        addBtn: false,
        height: 'auto',
        height: 500,
        highlightCurrentRow: true,
        column: [
          {
@@ -334,9 +348,6 @@
          this.selectList = [];
        }
      );

      // 请求action下方参数列表数据
      this.getBottomList(row);
    },

    // 搜索
@@ -368,6 +379,22 @@
      this.getRightTableList(this.treeNodeRow);
    },

    // 保存action
    actionSaveHandler() {
      if (this.selectList.length != 1) {
        this.$message.error('只能选择一条数据');
        return;
      }
      this.$emit('updataAction', this.selectList[0]);
      this.dialogClose();
    },

    dialogClose(){
      this.btnActionVisible = false;
      this.data = [];
      this.$refs.tree.setCurrentKey(null);
    }

  }
}
</script>

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

@@ -21,37 +21,24 @@
        </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>
        <avue-crud
          :data="eventData"
          :option="eventOption"
          @row-click="formDataRowClick">
          <template slot="menuLeft" slot-scope="scope">
            <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">创建</el-button>
          </template>

          <template slot="menu" slot-scope="scope">
            <el-button plain size="mini" type="danger" @click="formDataDelClickHandler(scope.row)">删除</el-button>
            <el-button plain size="mini" type="primary" @click="moveUp(scope.row)">上移</el-button>
            <el-button plain size="mini" type="primary" @click="moveDown(scope.row)">下移</el-button>
          </template>
        </avue-crud>
      </template>


      <!-- 切换搜索类型 源对象 目标对象显示label切换 -->
      <template slot="showTypeLabel" slot-scope="{}">
@@ -129,7 +116,12 @@

                  <el-form-item label="Action：" prop="Action">
                    <el-col :span="14">
                      <el-input v-model="basicForm.actionName" :readonly="disabledBtn" @focus="actionFoucus"></el-input>
                      <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>

@@ -190,15 +182,7 @@
        </el-container>
      </el-container>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :visible.sync="btnActionVisible"
      append-to-body="true"
      class="avue-dialog"
      title="选择Action"
      width="70%">
      <action-dialog></action-dialog>
    </el-dialog>
    <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
  </div>
</template>

@@ -220,7 +204,8 @@
  props: {
    sourceData: {
      type: Object,
      default: () => {}
      default: () => {
      }
    },
    height: {
      type: String,
@@ -233,6 +218,50 @@
  name: "index",
  data() {
    return {
      eventOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        column: [
          {
            label: 'EventKey',
            prop: 'eventKey',
            type: 'select',
            value: 'SelectionEvent',
            dicData: [
              {
                label: 'SelectionEvent',
                value: 'SelectionEvent'
              },
              {
                label: 'DBClickEvent',
                value: 'DBClickEvent'
              },
              {
                label: 'ClickEvent',
                value: 'ClickEvent'
              }
            ],
            cell: true
          },
          {
            label: 'EventValue',
            prop: 'eventValue',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入eventValue',
                trigger: 'blur'
              }
              ]
          }
        ]
      },
      eventData: [],
      btnActionVisible: false,
      dialogLoading: false,
      saveType: '',
@@ -438,7 +467,6 @@
        ],
        group: [
          {
            icon: 'el-icon-folder-opened',
            label: '',
            arrow: false,
            prop: 'group1',
@@ -731,45 +759,15 @@
            ]
          },
          {
            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
                span: 24,
                labelWidth: 10
              },
            ]
          }
@@ -782,28 +780,28 @@
    }
  },
  watch: {
    sourceData:{
    sourceData: {
      handler(val) {
        if(val && val.plOId) {
        if (val && val.plOId) {
          this.getTableList()
        }else{
          this.data=[];
        } else {
          this.data = [];
        }
      },
      immediate: true,
      deep:true
      deep: true
    }
  },
  computed: {},
  methods: {
    //获取列表数据
    getTableList(){
    getTableList() {
      const params = {
        pageContextOId:this.sourceData.plOId
        pageContextOId: this.sourceData.plOId
      }
      getPLPageDefinations( params).then(res => {
      getPLPageDefinations(params).then(res => {
        this.data = res.data.data;
        this.selectList=[];
        this.selectList = [];
        this.$refs.crud.clearSelection();
        this.tableLoading = false;
      })
@@ -844,6 +842,11 @@

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

@@ -854,41 +857,37 @@

    // 对话框表格添加
    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;
        }
      }
      // 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.FormData.length,
        eventKey: this.form.eventKey,
        eventValue: this.form.eventValue
        index: this.eventData.length,
        eventKey: this.form.eventKey || 'SelectionEvent',
        eventValue: this.form.eventValue,
        $cellEdit: true
      }

      this.FormData.push(obj);
      this.eventData.push(obj);
    },

    // 对话框表格删除
    formDataDelClickHandler() {
      if (func.isEmptyObject(this.formDataRow)) {
        this.$message.error('请选择一条数据');
        return;
      }

      this.FormData = this.FormData.filter(item => item.index !== this.formDataRow.index);
    formDataDelClickHandler(row) {
      this.eventData = this.eventData.filter(item => item.index !== row.index);
    },

    // 模板类型显示隐藏方法
@@ -947,22 +946,22 @@
    },

    // 上移
    moveUp() {
      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
    moveUp(row) {
      const index = this.findIndexByEventValue(this.eventData, row.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 位置插入之前被移除的元素
        const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // 移除 index-1 的元素 并在相同位置插入 index 的元素 返回被移除的元素
        this.eventData.splice(index, 1, temp); // 在 index 位置插入之前被移除的元素
      }
    },

    // 下移
    moveDown() {
      const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue);
      const length = this.FormData.length;
    moveDown(row) {
      const index = this.findIndexByEventValue(this.eventData, row.eventValue);
      const length = this.eventData.length;
      if (index < length - 1) {
        const temp = this.FormData[index];
        this.FormData.splice(index, 1, this.FormData.splice(index + 1, 1, temp)[0]);
        const temp = this.eventData[index];
        this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]);
      }
    },

@@ -973,7 +972,7 @@

    // 按钮设计
    btnDesignClickHandler() {
      if (this.selectList.length !=1) {
      if (this.selectList.length != 1) {
        this.$message.error('请选择一条数据');
        return;
      }
@@ -990,11 +989,11 @@
      getTabButtons(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData=[{
              label: this.selectList[0].name,
              oId: 'parentNode',
              children:data
            }];
          this.treeData = [{
            label: this.selectList[0].name,
            oId: 'parentNode',
            children: data
          }];
          this.treeLoading = false;
        } else {
          this.$message.error('请检查控制台错误');
@@ -1138,7 +1137,13 @@

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

    // 保存action
    actionSaveHandler(val) {
      this.$set(this.basicForm, 'actionName', val.plName);
      this.$set(this.basicForm, 'actionOId', val.plOId);
    }
  }
}