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

@@ -1,19 +1,18 @@
<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 v-if="permissionList.addBtn" 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 v-if="permissionList.editBtn" 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 v-if="permissionList.delBtn" 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 v-if="permissionList.importBtn" icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            </el-button>
            <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
            <el-button v-if="permissionList.exportBtn" icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
          </div>
          <!-- 左侧树 -->
@@ -27,7 +26,7 @@
              @update="rowTreeUpdataHandler"
              @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
           <span>
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
@@ -46,8 +45,8 @@
            v-model="form"
            :data="data"
            :option="option"
            :page.sync="page"
            :table-loading="tableLoading"
            :before-open="beforeOpen"
            @row-del="rowDelHandler"
            @row-save="rowSaveHandler"
            @row-update="rowUpdateHandler"
@@ -62,10 +61,10 @@
              </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"
              <el-button v-if="treeNodeRow.id !== 'root' && permissionList.actionTopAddBtn" icon="el-icon-plus" plain size="small" type="primary"
                         @click="addClickHandler">增加
              </el-button>
              <el-button icon="el-icon-download" plain size="small" type="success" @click="downLoadHandler">导出
              <el-button v-if="permissionList.actionTopExportBtn" icon="el-icon-download" plain size="small" type="success" @click="downLoadHandler">导出
              </el-button>
            </template>
          </avue-crud>
@@ -74,6 +73,7 @@
        <div style="margin-top: 10px">
          <avue-crud
            ref="BottomCrud"
            v-model="bottomForm"
            :data="bottomData"
            :option="bottomOption"
            :table-loading="bottomTableLoading"
@@ -82,10 +82,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" icon="el-icon-plus" plain size="small" type="primary" @click="bottomAddClickHandler">增加
              </el-button>
            </template>

            <template slot="menuForm" slot-scope="scope">
              <el-button type="primary"
                         size="small"
                         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>
      </basic-container>
@@ -122,6 +133,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",
@@ -138,131 +150,12 @@
      rightRoleData: [],
      form: {},
      bottomTableLoading: false,
      bottomForm:{},
      bottomData: [],
      bottomOption: {
        ...basicOption,
        addBtn: false,
        calcHeight: -30,
        selection: false,
        refreshBtn: false,
        // 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: {
        ...basicOption,
        addBtn: false,
        height: 350,
        highlightCurrentRow: true,
        column: [
          {
            label: '编号',
            prop: 'plCode',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'plName',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '类路径',
            prop: 'plCSClass',
            search: true,
            overHidden: true,
          },
          {
            label: '分类',
            prop: 'plActionCls',
            type: 'tree',
            hide: true,
            props: {
              label: 'name',
              value: 'id',
              children: 'childs'
            },
            rules: [
              {
                required: true,
                message: '请选择分类',
                trigger: 'blur'
              }
            ],
            dicData: []
          },
          {
            label: '链接地址',
            prop: 'plBSUrl',
            search: true,
          },
          {
            label: '类型',
            prop: 'plTypeType',
            search: true,
            type: 'select',
            dicData: [{
              label: '业务类型',
              value: 'business'
            }, {
              label: '链接类型',
              value: 'link'
            }],
            rules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '描述',
            prop: 'plDesc',
            search: true,
            overHidden: true,
          },
        ]
      },
      treeNodeRow: {},
      treeForm: {},
      treeOption: {
@@ -273,7 +166,10 @@
          value: 'id',
          children: 'childs'
        },
        dialogWidth:'800',
        dialogMenuPosition: 'right',
        formOption: {
          dialogMenuPosition: 'right',
          column: [
            {
              label: '分类名称',
@@ -300,26 +196,189 @@
            {
              label: '创建者',
              prop: 'creator',
              readonly: true,
              disabled: true,
            },
            {
              label: '创建时间',
              prop: 'createTime',
              readonly: true,
              disabled: true,
            },
            {
              label: '父主类',
              prop: 'pidName',
              readonly: true,
              disabled: true,
              span:24
            },
            {
              label: '备注',
              prop: 'description'
              prop: 'description',
              type:'textarea',
              span:24
            },
          ],
        }
      },
      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].actionTopAdd, false),
        actionTopDelBtn: this.vaildData(this.permission[this.$route.query.id].actionTopDel, false),
        actionTopEditBtn: this.vaildData(this.permission[this.$route.query.id].actionTopEdit, false),
        actionTopExportBtn: this.vaildData(this.permission[this.$route.query.id].actionTopExport, false),
        actionBottomAddBtn: this.vaildData(this.permission[this.$route.query.id].actionBottomAdd, false),
        actionBottomDelBtn: this.vaildData(this.permission[this.$route.query.id].actionBottomDel, false),
        actionBottomEditBtn: this.vaildData(this.permission[this.$route.query.id].actionBottomEdit, false),
      };
    },
    option() {
      return {
        ...basicOption,
        editBtn:this.permissionList.actionTopEditBtn,
        delBtn:this.permissionList.actionTopDelBtn,
        addBtn: false,
        height: 350,
        highlightCurrentRow: true,
        menuWidth:160,
        span:24,
        labelWidth:100,
        dialogWidth:'700',
        column: [
          {
            label: '编号',
            prop: 'plCode',
            overHidden: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入编号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'plName',
            overHidden: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '分类',
            prop: 'plActionCls',
            type: 'tree',
            hide: true,
            props: {
              label: 'name',
              value: 'id',
              children: 'childs'
            },
            rules: [
              {
                required: true,
                message: '请选择分类',
                trigger: 'blur'
              }
            ],
            dicData: []
          },
          {
            label: 'C/S类路径',
            prop: 'plCSClass',
            search: true,
            searchLabelWidth:120,
            overHidden: true,
          },
          {
            label: 'B/S链接地址',
            prop: 'plBSUrl',
            search: true,
            searchLabelWidth:120,
            overHidden: true,
          },
          {
            label: '类型',
            prop: 'plTypeType',
            search: true,
            type: 'radio',
            width:100,
            dicData: [{
              label: '业务类型',
              value: 'business'
            }, {
              label: '链接类型',
              value: 'link'
            }],
            rules: [
              {
                required: true,
                message: '请选择类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '描述',
            prop: 'plDesc',
            search: true,
            overHidden: true,
            type: 'textarea'
          },
        ]
      }
    },
    bottomOption(){
      return {
        ...basicOption,
        addBtn: false,
        editBtn:this.permissionList.actionBottomEditBtn,
        delBtn:this.permissionList.actionBottomDelBtn,
        calcHeight: -30,
        selection: false,
        refreshBtn: false,
        dialogWidth:'700',
        saveBtn:false,
        // height:'auto',
        column: [
          {
            label: '参数名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入参数名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '默认值',
            prop: 'defaultValue',
          },
          {
            label: '提示信息',
            prop: 'description',
            span: 24,
            type: 'textarea',
            rows: 4
          },
        ],
      }
    }
  },
  created() {
@@ -335,7 +394,9 @@
        const data = res.data.obj;
        this.treeData = [data];
        const selectTreeData = this.option.column.find(item => item.prop === 'plActionCls'); // 找到action添加分类树
        selectTreeData.dicData = [data];
        const dicData=[data];
        dicData[0].disabled=true;//根节点不能选
        selectTreeData.dicData = dicData;
      })
    },

@@ -356,9 +417,10 @@

    // 右侧表格信息
    getRightTableList(row) {
      console.log(row);
      this.tableLoading = true;
      const params = {
        plactioncls: row.id
        plactioncls: row.id ? row.id : ''
      }
      getActionTableData(params).then(res => {
        const data = res.data.data;
@@ -399,7 +461,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
      }

@@ -420,6 +482,17 @@
      this.getRightTableList(this.treeNodeRow);
    },

    beforeOpen(done, type, loading) {
      if ([ 'edit'].includes(type)) {
        // 编辑逻辑
        this.$set(this.option.column[2],'disabled',false);
      } else {
        // 新增逻辑
        this.$set(this.option.column[2],'disabled',true);
      }
      done();
      console.log(this.option.column)
    },
    // action列表增加
    addClickHandler() {
      if (func.isEmptyObject(this.treeNodeRow)) {
@@ -464,29 +537,24 @@
      this.leftRoleData = [{
        name: '编号',
        oid: '编号'
      },
        {
          name: '类路径',
          oid: '类路径'
        },
        {
          name: '链接地址',
          oid: '链接地址'
        },
        {
          name: '类型',
          oid: '类型'
        },
        {
          name: '描述',
          oid: '描述'
        },]
      }, {
        name: '类路径',
        oid: '类路径'
      }, {
        name: '链接地址',
        oid: '链接地址'
      }, {
        name: '类型',
        oid: '类型'
      }, {
        name: '描述',
        oid: '描述'
      },]
      this.$refs.transfer.visible = true;
    },

    // 穿梭框保存 index为0是选择 1是全部
    exportSendHandler(row, index) {
      console.log(row, index);
      const params = {
        dataType: index,
        chooseDataOid: index === 0 ? this.selectList.map(item => item.plOId) : [],
@@ -544,6 +612,7 @@

    // 参数列表新增保存
    BottomRowSaveHandler(form, done, loading) {
      form.actionOid=this.currenRow.plOId;
      savePLActionParam(form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('添加成功');
@@ -553,7 +622,24 @@
      })
      loading();
    },
    handleSaveNext(){
      this.$refs.BottomCrud.$refs.dialogForm.$refs.tableForm.$refs.form.validate((valid) => {
        if (valid) {
          this.bottomForm.actionOid=this.currenRow.plOId;
          savePLActionParam(this.bottomForm).then(res => {
            if (res.data.code === 200) {
              this.$message.success('添加成功');
              this.bottomForm={};
              this.getBottomList();
              this.$refs.BottomCrud.$refs.dialogForm.$refs.tableForm.$refs.form.resetFields()
            }
          })
        } else {
          return false;
        }
      });

    },
    // 参数列表修改保存
    BottomRowUpdateHandler(row, index, done, loading) {
      updatePLActionParam(row).then(res => {
@@ -593,7 +679,10 @@
        this.$message.error('请选择一条分类进行添加');
        return;
      }

      if (!this.treeNodeRow.id && this.treeNodeRow.name=='未分类') {
        this.$message.error('未分类下不能创建子分类');
        return;
      }
      const {createTime, creator, name, id, description} = this.treeNodeRow;
      this.$set(this.treeForm, 'createTime', func.formattedDate(createTime));
      this.$set(this.treeForm, 'creator', creator);
@@ -610,8 +699,8 @@
          this.$message.success('分类创建成功');
          this.getTreeList();
        }
        done();
      })
      done();
      loading();
    },

@@ -624,6 +713,10 @@

      if (this.treeNodeRow.id === 'root') {
        this.$message.error('根节点不能修改');
        return;
      }
      if (!this.treeNodeRow.id && this.treeNodeRow.name=='未分类') {
        this.$message.error('未分类不能修改');
        return;
      }
      const {name, serialno, creator, createTime, pid, description, id} = this.treeNodeRow;
@@ -645,7 +738,7 @@
      updateActionCls(data).then(res => {
        if (res.data.code === 200) {
          this.$message.success('修改成功');
          this.getBottomList();
          //this.getBottomList();
        }
        done();
      })
@@ -718,12 +811,8 @@
  .el-scrollbar__wrap {
    overflow: auto !important;
  }
  .avue-dialog .el-dialog__body .avue-form{
    margin: 0 auto;
  }
}

.smallBtn {
  width: 82px;
  text-align: center;
  padding-left: 4.5px;
}

</style>