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

@@ -21,37 +21,32 @@
        </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 slot="menu" slot-scope="scope">
        <el-button icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">编辑
        </el-button>
        <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
        </el-button>
        <el-button icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆</el-button>
      </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="{}">
@@ -85,7 +80,7 @@
            </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 plain size="mini" type="primary"  @click="cloneClickBtnHandler">复制到其他组件</el-button>
          </div>
        </el-header>
        <el-container>
@@ -129,7 +124,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>

@@ -168,10 +168,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">创建
@@ -179,6 +181,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>
@@ -190,15 +195,8 @@
        </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>
    <clone-dialog ref="cloneDialog"></clone-dialog>
  </div>
</template>

@@ -212,15 +210,19 @@
  getQTInfoDatasByPage,
  getTabButtons,
  addTapButton,
  updateTapButton, getTabByContextIdAndType
  updateTapButton,
  getLinkDatasByPage,
  addPageDefination
} from "@/api/UI/uiDefine";
import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action';
import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog";

export default {
  props: {
    sourceData: {
      type: Object,
      default: () => {}
      default: () => {
      }
    },
    height: {
      type: String,
@@ -228,11 +230,58 @@
    }
  },
  components: {
    actionDialog
    actionDialog,
    cloneDialog
  },
  name: "index",
  data() {
    return {
      paramsForm: {},
      eventOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        height: 200,
        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: '',
@@ -250,11 +299,27 @@
        column: [
          {
            label: '名称',
            prop: 'name'
            prop: 'name',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '值',
            prop: 'value'
            prop: 'value',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入值',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
@@ -292,6 +357,8 @@
        addBtn: false,
        index: true,
        calcHeight: -30,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: '名称',
@@ -363,7 +430,10 @@
              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] = "";
              })
              const searchTarger = this.option.column.find(item => item.prop === 'searchTarger');  // 获取搜索类型配置项
              searchTarger.display = true; // 切换默认展示搜索类型
              // 模板类型为表格
@@ -390,7 +460,7 @@
            dicData: [
              {
                label: '不显示',
                value: '1'
                value: '3'
              },
              {
                label: '显示角色',
@@ -398,7 +468,7 @@
              },
              {
                label: '显示Folder',
                value: '3',
                value: '1',
              },
            ],
          },
@@ -428,6 +498,11 @@
                const obj = this.option.group[0].column.find(item => item.prop === 'linkType');
                obj.display = val.value !== '1';
              }
              // 切换清空模板类型
              const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType'];
              list.forEach(item => {
                this.form[item] = '';
              })
            }
          },
          {
@@ -438,7 +513,6 @@
        ],
        group: [
          {
            icon: 'el-icon-folder-opened',
            label: '',
            arrow: false,
            prop: 'group1',
@@ -453,6 +527,13 @@
                  label: 'name',
                  value: 'name'
                },
                rules: [
                  {
                    required: true,
                    message: '请选择内容',
                    trigger: 'change'
                  }
                ],
                children: {
                  border: true,
                  column: [{
@@ -465,12 +546,18 @@
                    prop: 'label'
                  }],
                },
                change: (val) => {
                  const list = ['linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType'];
                  list.forEach(item => {
                    this.form[item] = '';
                  })
                },
                onLoad: ({page, value, data}, callback) => {
                  //page分页
                  // 不管是搜索 还是首次加载都会触发page 所以只需要拿page存在与否进行请求就可以 如果再去判断data搜索 或者value初次加载就会重复请求
                  if (page) {
                    const params = {
                      "conditionMap[filterInputValue]": value ? value.name : ''
                      "conditionMap[filterInputValue]": data ? data.name : ''
                    };
                    getBtmDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      callback({
@@ -487,8 +574,8 @@
                type: 'table',
                display: false,
                props: {
                  label: 'viName',
                  value: 'viName'
                  label: 'name',
                  value: 'name'
                },
                children: {
                  border: true,
@@ -496,19 +583,18 @@
                    label: '名称',
                    search: true,
                    searchSpan: 24,
                    prop: 'viName'
                    prop: 'name'
                  }, {
                    label: '类型',
                    prop: 'viType'
                    label: '标签',
                    prop: 'tag'
                  }],
                },
                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 => {
                    getLinkDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
@@ -520,9 +606,16 @@
              },
              {
                label: '选择模板',
                prop: 'showTypea',
                prop: 'templateId',
                display: false,
                type: 'table',
                rules: [
                  {
                    required: true,
                    message: '请选择模板',
                    trigger: 'submit'
                  }
                ],
                props: {
                  label: 'viName',
                  value: 'viName'
@@ -557,7 +650,7 @@
              },
              {
                label: 'UI定义',
                prop: 'UI',
                prop: 'SubUILayout',
                type: 'table',
                display: false,
                props: {
@@ -595,6 +688,7 @@
                label: '查询类型',
                prop: 'searchType',
                display: false,
                value: '1',
                type: 'radio',
                span: 24,
                dicData: [
@@ -633,10 +727,10 @@
                onLoad: ({page, value, data}, callback) => {
                  if (page) {
                    const params = {
                      "conditionMap[selectBtmType]": this.form.showType,
                      "conditionMap[filterInputValue]": data ? data.qtName : '',
                      "conditionMap[selectBtmType]": null, // cs端有问题 暂时不展示内容
                    };
                    getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                    getLinkDatasByPage(page.currentPage, page.pageSize, params).then(res => {
                      console.log(res);
                      callback({
                        total: res.data.total,
                        data: res.data.data
@@ -647,7 +741,7 @@
              },
              {
                label: '查询模板',
                prop: 'showTypes',
                prop: 'queryTemplateName',
                type: 'table',
                display: false,
                props: {
@@ -683,40 +777,35 @@
              },
              {
                label: '控制路径',
                prop: 'kzlj',
                prop: 'controlPath',
                display: false,
                type: 'textarea',
                span: 24,
                rows: 3
              },
              {
                label: '根节点显示表达式',
                prop: 'genjiedian',
                label: '树结构展开列',
                prop: 'expandCols',
                labelWidth: 110,
                display: false,
                labelWidth: 135,
                span: 24
              },
              {
                label: '树节点显示表达式',
                prop: 'shujiedian',
                display: false,
                labelWidth: 135,
                span: 24
                span: 12
              },
              {
                label: '参照树设置',
                prop: 'canzhaoshu',
                prop: 'showLinkAbs',
                display: false,
              },
              {
                label: '分隔符',
                prop: 'fgf',
                prop: 'separator',
                display: false,
              },
              {
                label: '展开方式',
                prop: 'zkfs',
                prop: 'expandMode',
                display: false,
                type: 'radio',
                value:'1',
                dicData: [
                  {
                    label: '逐级展开',
@@ -724,52 +813,36 @@
                  },
                  {
                    label: '全部展开',
                    value: '2'
                    value: '0'
                  }
                ]
              },
              {
                label: '根节点显示表达式',
                prop: 'rootContent',
                display: false,
                labelWidth: 135,
                span: 12
              },
              {
                label: '树节点显示表达式',
                prop: 'showAbs',
                display: false,
                labelWidth: 135,
                span: 12
              },
            ]
          },
          {
            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 +855,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,7 +917,54 @@

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

    // 修改
    editBtnClick(row) {
      console.log(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.$refs.crud.rowEdit(row);
    },

    // 保存
    rowSaveHandler(row,done,loading){
      if(row.templateType === '6'){
        row.SubUIObjType = row.showType;
        row.showType = "";
      }
      console.log(this.sourceData);
      const params = {
        ...row,
        tabPageOId:this.sourceData.plOId
      }
      addPageDefination(params).then(res => {
        console.log(res);
        if(res.data.code === 200){
          this.$message.success(res.data.obj);
          done()
        }
      }).catch(err=> {
        loading();
      })
    },

    // 对话框表格行点击
@@ -854,41 +974,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);
    },

    // 模板类型显示隐藏方法
@@ -902,7 +1018,7 @@
    // 模板类型为表格
    templateTypeTable(val) {
      if (!val) return;
      this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']);
      this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName']);
    },

    // 模板类型为自定义模板
@@ -910,19 +1026,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', 'zkfs']);
    },

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

    // 模板类型为树
@@ -930,7 +1046,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']);
    },

    // 模板类型为UI定义
@@ -938,7 +1054,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']);
    },

    // 查找数组中对象索引
@@ -947,22 +1063,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 +1089,7 @@

    // 按钮设计
    btnDesignClickHandler() {
      if (this.selectList.length !=1) {
      if (this.selectList.length != 1) {
        this.$message.error('请选择一条数据');
        return;
      }
@@ -990,11 +1106,12 @@
      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',
            disabled: true,
            children: data
          }];
          this.treeLoading = false;
        } else {
          this.$message.error('请检查控制台错误');
@@ -1018,9 +1135,20 @@
      this.paramsData.splice(row.$index, 1)
    },

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

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

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

    // 按钮设计参数信息保存
@@ -1136,10 +1264,30 @@
      });
    },

    cloneClickBtnHandler(){
      if (func.isEmptyObject(this.nodeTreeRow)) {
        this.$message.error('请选择节点进行复制');
        return;
      }
      if (this.nodeTreeRow.oId === "parentNode") {
        this.$message.error('顶层节点不允许复制');
        return;
      }
      this.$refs.cloneDialog.openDialog(this.nodeTreeRow);
    },
    // 选择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);
    },
    rowCloneHandler(row) {
      this.$refs.cloneDialog.openDialog(row);
    },
  }
}
</script>