Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/Aciton/index.vue

@@ -1,45 +1,80 @@
<template>
  <el-container>

    <el-aside>
      <basic-container>
        <div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
          <div class="headerCon">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addTreeClickHandler">创建
            </el-button>
            <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editTreeClickHandler">修改
            </el-button>
            <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delTreeClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            </el-button>
          </div>
          <!-- 左侧树 -->
          <div style="height:  calc(100vh - 280px);">
            <avue-tree
              ref="tree"
              v-model="treeForm"
              :data="treeData"
              :option="treeOption"
              @save="rowTreeSaveHandler"
              @update="rowTreeUpdataHandler"
              @node-click="nodeClick">
        <!-- 左侧树 -->
        <div style="height:  calc(100vh - 150px);">
          <avue-tree
            ref="tree"
            v-model="treeForm"
            :data="treeData"
            :option="treeOption"
            @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>
            <span style="display: flex">
              <icon-show v-if="data.icon" :name="data.icon"></icon-show>
                {{ (node || {}).label }}
            </span>
          </span>
            </avue-tree>
          </div>
          </avue-tree>
        </div>
      </basic-container>
    </el-aside>

    <el-main>
      <basic-container>
      <basic-container v-show="treeNodeRow.id === 'root' ">
        <div>
          <avue-crud
            ref="treeCrud"
            v-model="treeForm"
            :data="treeData[0].children"
            :option="treeCrudOption"
            @row-del="rowTreeDelHandler"
            @row-save="rowTreeSaveHandler"
            @row-update="rowTreeUpdataHandler"
            @refresh-change="handleRefresh">
            <template slot="menuLeft">
              <el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
                         @click="addTreeClickHandler(treeNodeRow)">
                <icon-show :name="permissionList.addBtn.source"></icon-show>
                创建
              </el-button>
              <!--<el-button v-if="permissionList.editBtn" icon="el-icon-edit" plain size="small" type="primary" @click="editTreeClickHandler">修改
              </el-button>
              <el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="danger" @click="delTreeClickHandler">删除
              </el-button>-->
              <el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary" @click="uploadClickHandler">
                <icon-show :name="permissionList.importBtn.source"></icon-show>
                导入
              </el-button>
              <el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary" @click="exportClickHandler">
                <icon-show :name="permissionList.exportBtn.source"></icon-show>
                导出
              </el-button>
            </template>
            <template #menu="{ row, index, size }">
              <el-button v-if="permissionList.editBtn" size="small" type="text"
                         @click="$refs.treeCrud.rowEdit(row, index)">
                <icon-show :name="permissionList.editBtn.source"></icon-show>
                编辑
              </el-button>
              <el-button v-if="permissionList.delBtn" size="small" type="text"
                         @click.stop="rowTreeDelHandler(row,index)">
                <icon-show :name="permissionList.delBtn.source"></icon-show>
                删除
              </el-button>
              <el-button v-if="permissionList.addBtn" :size="size"
                         text
                         type="text"
                         @click="addTreeClickHandler(row)">
                <icon-show :name="permissionList.addBtn.source"></icon-show>
                新增子级
              </el-button>
            </template>
          </avue-crud>
        </div>
      </basic-container>
      <basic-container v-show="treeNodeRow.id !== 'root'">
        <div>
          <avue-crud
            ref="crud"
@@ -56,16 +91,40 @@
            @refresh-change="handleRefresh"
            @selection-change="selectChangeHandler"
            @row-click="rowClickHandler">
            <template slot="plImage" slot-scope="{row}">
              <span class="avue-icon">
                <icon-show :name="row.plImage"></icon-show>
              </span>
            </template>
            <template slot-scope="{type,disabled}" slot="plImageForm">
              <input-icon :disabled="disabled" v-model="form.plImage"></input-icon>
            </template>
            <template slot="plTypeType" slot-scope="{row}">
              <el-tag :type="row.plTypeType === 'business' ? '' : 'success'">
                {{ row.plTypeType === 'business' ? '业务类型' : '链接类型' }}
              </el-tag>
            </template>
            <template slot="menuLeft" slot-scope="scope">
              <el-button v-if="treeNodeRow.id !== 'root'" icon="el-icon-plus" plain size="small" type="primary"
                         @click="addClickHandler">增加
              <el-button v-if="treeNodeRow.id !== 'root' && permissionList.actionTopAddBtn" class="button-custom-icon" plain size="small" type="primary"
                         @click="addClickHandler">
                <icon-show :name="permissionList.actionTopAddBtn.source"></icon-show>
                增加
              </el-button>
              <el-button icon="el-icon-download" plain size="small" type="success" @click="downLoadHandler">导出
              <el-button v-if="permissionList.actionTopExportBtn" class="button-custom-icon" plain size="small" type="success" @click="downLoadHandler">
                <icon-show :name="permissionList.actionTopExportBtn.source"></icon-show>
                导出
              </el-button>
            </template>
            <template #menu="{row,index,size}">
              <el-button v-if="permissionList.actionTopEditBtn" size="small" type="text"
                         @click="$refs.crud.rowEdit(row, index)">
                <icon-show :name="permissionList.actionTopEditBtn.source"></icon-show>
                编辑
              </el-button>
              <el-button v-if="permissionList.actionTopDelBtn" size="small" type="text"
                         @click.stop="rowDelHandler(row,index)">
                <icon-show :name="permissionList.actionTopDelBtn.source"></icon-show>
                删除
              </el-button>
            </template>
          </avue-crud>
@@ -83,7 +142,21 @@
            @row-del="BottomRowDelHandler"
          >
            <template slot="menuLeft" slot-scope="scope">
              <el-button icon="el-icon-plus" plain size="small" type="primary" @click="bottomAddClickHandler">增加
              <el-button v-if="permissionList.actionBottomAddBtn" class="button-custom-icon" plain size="small" type="primary" @click="bottomAddClickHandler">
                <icon-show :name="permissionList.actionBottomAddBtn.source"></icon-show>
                增加
              </el-button>
            </template>
            <template #menu="{row,index,size}">
              <el-button v-if="permissionList.actionBottomEditBtn" size="small" type="text"
                         @click="$refs.BottomCrud.rowEdit(row, index)">
                <icon-show :name="permissionList.actionBottomEditBtn.source"></icon-show>
                编辑
              </el-button>
              <el-button v-if="permissionList.actionBottomDelBtn" size="small" type="text"
                         @click.stop="BottomRowDelHandler(row,index)">
                <icon-show :name="permissionList.actionBottomDelBtn.source"></icon-show>
                删除
              </el-button>
            </template>
            <template slot="menuForm" slot-scope="scope">
@@ -92,6 +165,11 @@
                         icon="el-icon-check"
                         v-if="scope.type === 'add'"
                         @click="handleSaveNext()">保存后继续添加</el-button>
              <el-button type="primary"
                         size="small"
                         icon="el-icon-circle-plus-outline"
                         v-if="scope.type === 'add'"
                         @click="$refs.BottomCrud.rowSave()">保存</el-button>
            </template>
          </avue-crud>
        </div>
@@ -129,6 +207,7 @@
} from '@/api/UI/Action/api'
import func from "@/util/func";
import basicOption from "@/util/basic-option";
import {mapGetters} from "vuex";

export default {
  name: "index",
@@ -147,45 +226,91 @@
      bottomTableLoading: false,
      bottomForm:{},
      bottomData: [],
      bottomOption: {
        ...basicOption,
        addBtn: false,
        calcHeight: -30,
        selection: false,
        refreshBtn: false,
        dialogWidth:'700',
        // height:'auto',
        column: [
          {
            label: '参数名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入参数名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '默认值',
            prop: 'defaultValue',
          },
          {
            label: '提示信息',
            prop: 'description',
            span: 24,
            type: 'textarea',
            rows: 4
          },
        ],
      },
      tableLoading: false,
      lastIndex: null,
      selectList: [],
      data: [],
      option: {
      treeNodeRow: {},
      treeForm: {},
      treeOption: {
        menu: false,
        defaultExpandedKeys: ['root'],
        props: {
          label: 'name',
          value: 'id',
          children: 'children'
        }
      },
      treeData: []
    }
  },
  computed:{
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
        delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
        editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
        exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
        importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
        actionTopAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD2, false),
        actionTopDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE2, false),
        actionTopEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT2, false),
        actionTopExportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT2, false),
        actionBottomAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD3, false),
        actionBottomDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE3, false),
        actionBottomEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT3, false),
      };
    },
    treeCrudOption(){
      return {
        ...basicOption,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        calcHeight: -50,
        highlightCurrentRow: true,
        rowKey: 'id',
        rowParentKey: 'pid',
        menuWidth: 300,
        span: 24,
        labelWidth: 100,
        dialogWidth: '800',
        align:'left',
        column: [{
          label: '分类名称',
          prop: 'name',
          rules: [{
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }]
        }, {
          label: '分类序号',
          prop: 'serialno',
          rules: [{
            required: true,
            message: '请输入分类序号',
            trigger: 'blur'
          }]
        }, {
          label: '父主类',
          prop: 'pidName',
          disabled: true,
          span: 24
        }, {
          label: '备注',
          prop: 'description',
          type: 'textarea',
          span: 24
        }],
      }
    },
    option() {
      return {
        ...basicOption,
        editBtn:false,
        delBtn:false,
        addBtn: false,
        height: 350,
        highlightCurrentRow: true,
@@ -197,6 +322,7 @@
          {
            label: '编号',
            prop: 'plCode',
            width: 220,
            overHidden: true,
            search: true,
            rules: [
@@ -221,14 +347,26 @@
            ]
          },
          {
            label: '图标',
            prop: 'plImage',
            width: 80,
            rules: [
              {
                required: true,
                message: '请选择图标',
                trigger: 'submit'
              }
            ]
          },
          {
            label: '分类',
            prop: 'plActionCls',
            type: 'tree',
            hide: true,
            defaultExpandedKeys:['root'],
            props: {
              label: 'name',
              value: 'id',
              children: 'childs'
              children: 'children'
            },
            rules: [
              {
@@ -239,13 +377,13 @@
            ],
            dicData: []
          },
          {
          /*{
            label: 'C/S类路径',
            prop: 'plCSClass',
            search: true,
            hide:true,
            searchLabelWidth:120,
            overHidden: true,
          },
          },*/
          {
            label: 'B/S链接地址',
            prop: 'plBSUrl',
@@ -282,70 +420,44 @@
            type: 'textarea'
          },
        ]
      },
      treeNodeRow: {},
      treeForm: {},
      treeOption: {
      }
    },
    bottomOption(){
      return {
        ...basicOption,
        addBtn: false,
        defaultExpandedKeys: ['root'],
        props: {
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        dialogWidth:'800',
        dialogMenuPosition: 'right',
        formOption: {
          dialogMenuPosition: 'right',
          column: [
            {
              label: '分类名称',
              prop: 'name',
              rules: [
                {
                  required: true,
                  message: '请输入分类名称',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '分类序号',
              prop: 'serialno',
              rules: [
                {
                  required: true,
                  message: '请输入分类序号',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '创建者',
              prop: 'creator',
              disabled: true,
            },
            {
              label: '创建时间',
              prop: 'createTime',
              disabled: true,
            },
            {
              label: '父主类',
              prop: 'pidName',
              disabled: true,
              span:24
            },
            {
              label: '备注',
              prop: 'description',
              type:'textarea',
              span:24
            },
          ],
        }
      },
      treeData: [],
        editBtn:false,
        delBtn:false,
        calcHeight: -20,
        selection: false,
        refreshBtn: false,
        dialogWidth:'700',
        saveBtn:false,
        column: [
          {
            label: '参数名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入参数名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '默认值',
            prop: 'defaultValue',
          },
          {
            label: '提示信息',
            prop: 'description',
            span: 24,
            type: 'textarea',
            rows: 4
          },
        ],
      }
    }
  },
  created() {
@@ -359,19 +471,34 @@
      }
      getActionTree(params).then(res => {
        const data = res.data.obj;
        this.treeData = [data];
        this.treeData = this.treeDataFormAtter([data],'Action分类');
        const selectTreeData = this.option.column.find(item => item.prop === 'plActionCls'); // 找到action添加分类树
        const dicData=[data];
        dicData[0].disabled=true;//根节点不能选
        const dicData=this.treeData;
        dicData[0].disabled=true;//分类根节点不能选
        selectTreeData.dicData = dicData;
        selectTreeData.hide=true;//隐藏分类列。不能直接在option设置，会导出dicData加载不出
      })
    },

    treeDataFormAtter(items,pidName) {
      return items.map(item => {
        // 转换当前节点的属性
        const formList = {
          ...item,
          pidName:pidName,
          children: item.childs && item.childs.length > 0 ? this.treeDataFormAtter(item.childs,item.name) : undefined
        };
        return formList;
      });
    },

    // 左侧树行点击
    nodeClick(row) {
      this.treeNodeRow = row;
      this.getRightTableList(row);
      this.bottomData = [];
      if(this.treeNodeRow.id !== 'root'){
        this.getRightTableList(row);
        this.bottomData = [];
      }
    },

    // 头部刷新按钮
@@ -386,7 +513,7 @@
    getRightTableList(row) {
      this.tableLoading = true;
      const params = {
        plactioncls: row.id
        plactioncls: row.id ? row.id : ''
      }
      getActionTableData(params).then(res => {
        const data = res.data.data;
@@ -411,7 +538,7 @@
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
          this.selectList = [row];
        }
      );

@@ -427,7 +554,7 @@
      }
      this.tableLoading = true;
      const apiParams = {
        plactioncls: this.treeNodeRow.id === 'root' ? '' : this.treeNodeRow.id,
        plactioncls: this.treeNodeRow.id === 'root' ? '' : this.treeNodeRow.id ? this.treeNodeRow.id : '',
        ...params
      }

@@ -451,10 +578,10 @@
    beforeOpen(done, type, loading) {
      if ([ 'edit'].includes(type)) {
        // 编辑逻辑
        this.option.column[32].disabled = false;
        this.$set(this.option.column[3],'disabled',false);
      } else {
        // 新增逻辑
        this.option.column[2].disabled = true;
        this.$set(this.option.column[3],'disabled',true);
      }
      done();
    },
@@ -530,9 +657,7 @@
      exportAction(params).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
      }).catch(err => {
        this.$message.error(err);
      })
      });
    },

    // action列表行删除
@@ -639,33 +764,37 @@
    },

    // 左侧树创建
    addTreeClickHandler() {
      if (func.isEmptyObject(this.treeNodeRow)) {
    addTreeClickHandler(row) {
      let parentRow=row;
      if(!row || !row.id){
        parentRow=this.treeNodeRow
      }
      if (func.isEmptyObject(parentRow)) {
        this.$message.error('请选择一条分类进行添加');
        return;
      }
      if (!this.treeNodeRow.id && this.treeNodeRow.name=='未分类') {
      if (!parentRow.id && parentRow.name=='未分类') {
        this.$message.error('未分类下不能创建子分类');
        return;
      }
      const {createTime, creator, name, id, description} = this.treeNodeRow;
      const {createTime, creator, name, id, description} = parentRow;
      this.$set(this.treeForm, 'createTime', func.formattedDate(createTime));
      this.$set(this.treeForm, 'creator', creator);
      this.$set(this.treeForm, 'pid', id);
      this.$set(this.treeForm, 'pidName', name);
      this.$refs.tree.rowAdd();
      this.$refs.treeCrud.rowAdd();

    },

    // action分类保存
    rowTreeSaveHandler(node, data, done, loading) {
      saveActionCls(data).then(res => {
    rowTreeSaveHandler(row, done, loading) {
      saveActionCls(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success('分类创建成功');
          this.getTreeList();
        }
        done();
      })
      done();
      loading();
    },

@@ -695,15 +824,15 @@
      this.$set(this.treeForm, 'pidName', pidName);
      this.$set(this.treeForm, 'description', description);

      this.$refs.tree.rowEdit();
      this.$refs.treeCrud.rowEdit();
    },

    // action分类修改保存
    rowTreeUpdataHandler(node, data, done, loading) {
      updateActionCls(data).then(res => {
    rowTreeUpdataHandler(row, done, loading) {
      updateActionCls(row).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功');
          //this.getBottomList();
          this.getTreeList();
        }
        done();
      })
@@ -724,6 +853,32 @@
        }
      }
      return 'null';
    },

    // action分类修改保存
    rowTreeDelHandler( row) {
      if (row.id === 'root') {
        this.$message.error('根节点不能删除');
        return;
      }

      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteActionCls(row).then(res => {
          if (res.data.code === 200) {
            this.$message.success('分类删除成功');
            this.getTreeList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // action分类删除
@@ -759,12 +914,18 @@

    // action分类导出
    exportClickHandler() {

      this.$message({
        type: 'info',
        message: '待实现'
      });
    },

    // action分类导入
    uploadClickHandler() {

      this.$message({
        type: 'info',
        message: '待实现'
      });
    }

  }
@@ -776,8 +937,9 @@
  .el-scrollbar__wrap {
    overflow: auto !important;
  }

  .avue-dialog .el-dialog__body .avue-form{
    margin: 0 auto;
    margin: 0 auto !important;
  }
}
</style>