添加自定义弹出拖拽指令&上传文件下载文件action配置以及页面编写&创建默认表格option配置&表格加上自定义宽度

 Source/plt-web/plt-web-ui/public/img/Group.png

Binary files differ

 Source/plt-web/plt-web-ui/public/img/image.png.png

Binary files differ

 Source/plt-web/plt-web-ui/public/img/login-background.png

Binary files differ

 Source/plt-web/plt-web-ui/src/components/actions/base/downloadFileAction.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,64 @@
/**
 * æŒ‰é’®å¤„理 ä¸šåŠ¡ç±»åž‹å®¡ç­¾
 */
import {paramLow,callPreEvent, callPostEvent} from '../BaseAction';
import {validatenull} from "@/util/validate";
import Vue from "vue";
import func from "@/util/func";

export const doAction = (options,callback) => {
  options.sourceData = options.sourceData || {};
  options.dataStore = options.dataStore || [];
  if (!options.dataStore || options.dataStore.length < 1) {
    Vue.prototype.$message.error("请选择需要下载的数据");
    return false;
  }
  if (!options.paramVOS.multi && options.dataStore.length > 1) {
    Vue.prototype.$message.error("仅能选择一条数据进行下载");
    return false;
  }


  callPreEvent(options, doBefore, function (options) {
    showStartWindow(options, function () {
      callPostEvent(options, doAfter, callback,type);
    });
  });
};

/**
 * æ˜¾ç¤ºæµç¨‹çš„窗口
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const showStartWindow = (options,callback)=> {
  const paramVOS = options.paramVOS;
  if (!paramVOS['form'] && !paramVOS['context']) {
    Vue.prototype.$message.error("按钮配置不正确");
    return false;
  }
  // func.downloadFileByBlobHandler();

}
/**
 * å‰ç½®äº‹ä»¶
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const doBefore = (options,callback)=> {
  console.log("执行增加前置事件")
  if(callback){
    callback(options);
  }
}
/**
 * åŽç½®äº‹ä»¶
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const doAfter = (options,callback,actionType)=> {
  console.log('执行增加后置事件');
  if(callback){
    callback(actionType);
  }
}

 Source/plt-web/plt-web-ui/src/components/actions/base/uploadFile.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
<template>
  <el-dialog
    v-dialogDrag
    :width="width"
    :visible.sync="visible"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    append-to-body
    title="上传文件"
    class="avue-dialog"
  >
    <Divider left="30px" text="导入提示"></Divider>
    <ul>
      <li>
        1.红色字体表示必输项
      </li>
      <li>
        2.每次仅能最多导入10000条数据
      </li>
    </ul>
    <Divider left="30px" text="excel文件，选择文件后会自动上传"></Divider>
    <el-upload
      :before-upload="beforeUpload"
      :headers="uploadHeaders"
      :on-change="uploadChange"
      :on-error="onError"
      :on-success="onSuccess"
      :show-file-list="false"
      accept=".xlsx, .xls"
      action="/api/ubcs-code/codeClassify/importClassify"
      class="upload-demo">
      <el-button size="small" style="margin: 15px 35px" type="primary">浏览文件</el-button>
    </el-upload>
    <template #footer>
      <el-button
        :loading="downloadLoading"
        size="small"
        type="primary"
        @click="downloadTemplateFun"
      >下载导入模板
      </el-button
      >
      <el-button size="small" @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
// import {downloadErrorFile,downloadBatchImportApplyTemplate} from '@/api/template/templateAttr'
import {getToken} from "@/util/auth";
import func from "@/util/func";
import {validatenull} from "@/util/validate";

export default {
  name: "upload-file",
  props: {
    paramVOS: {
      type: Object,
      default: {}
    },
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
  },
  data() {
    return {
      flga: true,
      pageLoading: null,
      downloadLoading: false,
      visible:false,
    }
  },
  watch: {
    visible: {
      handler(newval, oldval) {
        // console.log('newval',newval)
      }
    }
  },
  computed: {
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
      };
    },
    width() {
      if (!validatenull(this.paramVOS.width)) {
        if (this.paramVOS.width.includes("px") || this.paramVOS.width.includes("%")) {
          return this.paramVOS.width;
        } else {
          return this.paramVOS.width + "px";
        }
      } else {
        return "60%";
      }
    },
    fullscreen(){
      console.log(this.paramVOS)
      if(this.paramVOS.width || this.paramVOS.height){
        return false;
      }else if(this.paramVOS.form){
        return false;
      }
      return true;
    }
  },
  methods: {
    //文件上传前
    async beforeUpload(file) {
      const fileType = file.name.split(".").pop();
      if (fileType !== "xlsx" && fileType !== "xls") {
        // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传
        this.$message.error("只允许上传xlsx、xls格式的文件");
        return Promise.reject(false);
      }
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸ
    onSuccess(resbonse) {
      if (Object.keys(resbonse.data).length === 0) {
        this.$message.success("上传成功！");
        this.dialogVisible = false;
        return;
      }
      if (resbonse.data.fileOid) {
        const fileName = resbonse.data.filePath.split("/").pop();
        this.$message.error("请下载错误信息文件进行查看！");
        downloadErrorFile({uuid: resbonse.data.fileOid}).then((res) => {
          func.downloadFileByBlobHandler(res);
        });
      }
    },
    //点击下载模板
    downloadTemplateFun() {
      this.downloadLoading = true;
      downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res => {
        this.$utilFunc.downloadFileByBlob(res.data, "模板文件.xls");
        this.downloadLoading = false;
      }).catch((res) => {
        this.$message.warning(res)
        this.downloadLoading = false;
      })
    },
    //文件上传失败
    onError(res) {
      this.pageLoading.close();
    },
    //文件状态改变
    uploadChange(file) {
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0 0 0 30px;
  list-style: none;

  li {
    margin-bottom: 5px;
    font-size: 13px;
  }
}
</style>

 Source/plt-web/plt-web-ui/src/components/actions/base/uploadFileAction.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,74 @@
/**
 * æŒ‰é’®å¤„理 ä¸šåŠ¡ç±»åž‹å®¡ç­¾
 */
import {paramLow,callPreEvent, callPostEvent} from '../BaseAction';
import {validatenull} from "@/util/validate";
import Vue from "vue";
import uploadFileDialog from "@/components/actions/base/uploadFile"


export const doAction = (options,callback) => {
  options.sourceData = options.sourceData || {};
  options.dataStore = options.dataStore || [];

  callPreEvent(options, doBefore, function (options) {
    showStartWindow(options, function () {
      callPostEvent(options, doAfter, callback,type);
    });
  });
};

/**
 * æ˜¾ç¤ºæµç¨‹çš„窗口
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const showStartWindow = (options,callback)=> {
  const paramVOS = options.paramVOS;
  // if (!paramVOS['form'] && !paramVOS['context']) {
  //   Vue.prototype.$message.error("按钮配置不正确");
  //   return false;
  // }

  const dialogConstructor = Vue.extend(uploadFileDialog);
  let instance = new dialogConstructor();
  instance.sourceData = options.sourceData;
  instance.dataStore = options.dataStore;
  instance.paramVOS = paramVOS;

  instance.dialogClose = function () {
    vm.visible = false;
    document.body.removeChild(vm.$el);
    instance.$destroy();
    instance = null;
  };
  if (callback) {
    instance.saveCallback = callback;
  }
  let vm = instance.$mount();
  document.body.appendChild(vm.$el);
  instance.visible = true;

}
/**
 * å‰ç½®äº‹ä»¶
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const doBefore = (options,callback)=> {
  console.log("执行增加前置事件")
  if(callback){
    callback(options);
  }
}
/**
 * åŽç½®äº‹ä»¶
 * @param options æŒ‰é’®çš„配置信息
 * @param callback å›žè°ƒ
 */
export const doAfter = (options,callback,actionType)=> {
  console.log('执行增加后置事件');
  if(callback){
    callback(actionType);
  }
}

 Source/plt-web/plt-web-ui/src/components/actions/handlers.js

@@ -31,6 +31,14 @@
    launchworkflow: () => {import("@/components/actions/base/StartWorkflowAction").then(module => {
      module.doAction(options,callback);
    })},
    //上传文件
    uploadfile: () => {import("@/components/actions/base/uploadFileAction").then(module => {
      module.doAction(options,callback);
    })},
    //上传文件
    downloadfile: () => {import("@/components/actions/base/downloadFileAction").then(module => {
      module.doAction(options,callback);
    })},
  };
  if (handlers[type]) {
    handlers[type]()

 Source/plt-web/plt-web-ui/src/components/dynamic-components/dynamic-table.vue

@@ -143,6 +143,8 @@
      //表格数据
      tableList: [],
      option: {
        border:true,
        stripe:true,
        index: true,
        addBtn: false,
        editBtn: false,

 Source/plt-web/plt-web-ui/src/directive/el-drag-dialog/dialogDrag.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,51 @@
import Vue from 'vue';

// v-dialogDrag: å¼¹çª—拖拽
Vue.directive('dialogDrag', {
    bind(el) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header');
        const dragDom = el.querySelector('.el-dialog');
        dialogHeaderEl.style.cursor = 'move';

        // èŽ·å–原有属性 ie dom元素.currentStyle ç«ç‹è°·æ­Œ window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

        dialogHeaderEl.onmousedown = (e) => {
            // é¼ æ ‡æŒ‰ä¸‹ï¼Œè®¡ç®—当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft;
            const disY = e.clientY - dialogHeaderEl.offsetTop;

            // èŽ·å–到的值带px æ­£åˆ™åŒ¹é…æ›¿æ¢
            let styL, styT;

            // æ³¨æ„åœ¨ie中 ç¬¬ä¸€æ¬¡èŽ·å–到的值为组件自带50% ç§»åŠ¨ä¹‹åŽèµ‹å€¼ä¸ºpx
            if (sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);
                styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);
            } else {
                styL = +sty.left.replace(/\px/g, '');
                styT = +sty.top.replace(/\px/g, '');
            }

            document.onmousemove = function(e) {
                // é€šè¿‡äº‹ä»¶å§”托，计算移动的距离
                const l = e.clientX - disX;
                const t = e.clientY - disY;

                // ç§»åŠ¨å½“前元素
                dragDom.style.left = `${l + styL}px`;
                dragDom.style.top = `${t + styT}px`;

                // å°†æ­¤æ—¶çš„位置传出去
                // binding.value({x:e.pageX,y:e.pageY})
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    }
});



 Source/plt-web/plt-web-ui/src/main.js

@@ -24,6 +24,8 @@
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
import Divider from  '@/components/Divider/index'
import '@/directive/el-drag-dialog/dialogDrag'

//表单组件
import basicForm from "@/components/PLT-basic-component/basicForm";
// ä¸šåŠ¡ç»„件

 Source/plt-web/plt-web-ui/src/option/user/basic-option.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
export default {
  border:true,
  height:'auto',
  index:true,
  dialogDrag:true,
  searchShow:true,
  searchIcon:true,
  selection:true,
  stripe:true,
  // selection æ˜¯å¦æœ‰é€‰æ‹©æ¡†
  // indexFixed:true/left/right, å›ºå®šåˆ—
  // menu:false, æ˜¯å¦æœ‰æ“ä½œæ 
  // menuTitle:xxx, æ“ä½œæ æ ‡é¢˜
}

 Source/plt-web/plt-web-ui/src/page/login/userlogin.vue

@@ -74,7 +74,7 @@
          //用户名
          username: "admin",
          //密码
          password: "admin",
          password: "",
          selectInput:'',
          //下拉input数据
          value:'管理组',

 Source/plt-web/plt-web-ui/src/store/modules/user.js

@@ -65,6 +65,9 @@
        loginByUsername(userInfo.deptId, userInfo.roleId, userInfo.username, userInfo.password, userInfo.type, userInfo.key,).then(res => {
          const data = res.data;
          if (data.code === 200) {
            // commit('SET_TOKEN', data.obj.sessionInfo.token);
            // commit('SET_REFRESH_TOKEN', data.obj.sessionInfo.token);

            commit('SET_TOKEN', data.obj.tokenVO.accessToken);
            commit('SET_REFRESH_TOKEN', data.obj.tokenVO.accessToken);
            commit('DEL_ALL_TAG');

 Source/plt-web/plt-web-ui/src/views/base/UIContentViewer.vue

@@ -117,6 +117,7 @@
    }
  },
  created() {
    console.log(this.$route);
    if (verifyNull(this.$route.query.type) || (verifyNull(this.$route.query.context) && verifyNull(this.$route.query.content))) {
      this.$message.error("配置的信息错误，请参考“?type=xxx&context=yyy&param=zzz”这种形式。其中type是业务类型（或链接类型），context是UI上下文的名称");
      return false;

 Source/plt-web/plt-web-ui/src/views/user/userManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,137 @@
<template>
  <basic-container>
    <avue-crud :data="data"
               :option="option">
    </avue-crud>
  </basic-container>
</template>

<script>
import basicOption from '@/option/user/basic-option'
export default {
  name: "userManage",
  data() {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        },
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        },
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }, {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
        , {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        ...basicOption,
        column: [
          {
            label: '姓名',
            prop: 'name',
            search:true
          }, {
            label: '性别',
            prop: 'sex',
            search:true
          }
        ]
      }
    }
  }

}
</script>

<style scoped>

</style>