输入框校验

  1. // 只能输入数字 
  2. onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"
  4. // 只能输入数字、小数点 
  5. onkeyup="value=value.replace(/[^\0-9\.]/g,'')" onpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu ="value=value.replace(/[^\0-9\.]/g,'')"
  7. // 只能输入英文 
  8. onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z]/g,'')"
  10. // 只能输入英文、数字 
  11. onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
  13. // 只能输入中文
  14. onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
  16. // 只能输入中文、英文、数字
  17. onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
  19. // 只能输入中文、英文、数字、空格
  20. onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\]/g,'')"
  22. // 只能输入中文、英文、数字、小数点 
  23. onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" oncontextmenu ="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"
  27. // 不可粘贴
  28. onpaste="return false" oncontextmenu="return false;"
  30. // 如果使用了vue没有变更,则加入事件
  31. @blur="data.loginName = $event.target.value"

echars自适应

  1. window.onresize = () => this.echartObj.resize();

打开弹窗

  1. body .dialog-class .layui-layer-load {
  2.     background: white;
  3. }
  5. layer.open({
  6.     type: 2,
  7.     skin: 'dialog-class',
  8.     title: "仪器-试剂配置",
  9.     content: '${ctx}/reagent/deviceReagentPage',
  10.     area: ['80%', '90%'],
  11.     isOutAnim: false, // 关闭窗口动画
  12.     anim: -1, // 关闭出场动画
  13. });

表格自定义行颜色

  1. <el-table :row-style="handleRowStyle"
  4. handleRowStyle({row, rowIndex}) {
  5.   if (row.alertStatus === 4) {
  6.     return {}
  7.   }
  8.   return {
  9.     background: "red",
  10.     color: "white"
  11.   };
  12. },

用户选择列表

  1. // 用户列表
  2. userList : [],
  4. <el-select v-model="formData.userId" placeholder="请选择负责人" filterable clearable :style="{width: '100%'}">
  5.     <el-option v-for="(item, index) in userList" :key="index" :label="item.name"
  6.                :value="item.id"></el-option>
  7. </el-select>
  9. // 包含子部门的用户列表(查询,修改)
  10. getUserListBySubOffice(officeId) {
  11.     $.get("${ctx}/sys/user/getUserListBySubOffice/" + officeId, (res) => {
  12.         this.userList = res.data
  13.     });
  14. },
  15.         // 不含子部门的用户列表(增加)
  16. getUserListByOffice(officeId) {
  17.     $.get("${ctx}/sys/user/getUserListByOffice/" + officeId, (res) => {
  18.         this.userList = res.data
  19.     });
  20. },
  22. this.getUserListByOffice(this.queryParams.officeId)
  23. this.getUserListBySubOffice(this.queryParams.officeId)

部门树

  1. html, body, #app, .el-container {
  2.     width: 100%;
  3.     height: 100%;
  4. }
  1. <est-office-tree :office-id.sync="queryParams.officeId" width="300px" :office-name.sync="officeName" @query-method="handleQuery"></est-office-tree>
  2. <el-divider direction="vertical" class="divider-style"></el-divider>

文件上传

  1. .el-upload__tip {
  2.     line-height: 1.2;
  3. }
  5. .el-upload__input {
  6.     display: none !important;
  7. }
  10. .el-upload-list__item .el-icon-close-tip {
  11.     display: none !important;
  12. }
  1. <el-col :span="12">
  2.     <el-form-item label="上传" prop="urls">
  3.         <el-upload :file-list="uploadFileList" multiple action="${ctx}/resContract/upload"
  4.                    :on-success="onSuccess" :on-preview="previewFile"
  5.                    :before-remove="beforeRemove" :on-remove="onRemove">
  6.             <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
  7.         </el-upload>
  8.     </el-form-item>
  9. </el-col>

vue data添加

  1. // 文件上传列表
  2. uploadFileList: [],

resetForm()

  1. this.uploadFileList = []

saveOrUpdate()

  1. if (valid) {
  2.     // 复制这里 
  3.     if (this.uploadFileList.length > 0) {
  4.         this.formData.fileName = ""
  5.         this.formData.urls = ""
  6.         this.uploadFileList.forEach((file) => {
  7.             this.formData.fileName += file.name + ","
  8.             this.formData.urls += file.minioObjectName + ","
  9.         });
  10.         this.formData.fileName = this.formData.fileName.substring(0, this.formData.fileName.length - 1)
  11.         this.formData.urls = this.formData.urls.substring(0, this.formData.urls.length - 1)
  12.     }

handleUpdate() ajax里面

  1. // 回显上传列表
  2. if (res.data.urls != null && res.data.urls !== "") {
  3.     let fileNameList = res.data.fileName.split(",");
  4.     let urlList = res.data.urls.split(",")
  5.     for (let i = 0; i < urlList.length; i++) {
  6.         this.uploadFileList.push({
  7.             "uid": i,
  8.             "name": fileNameList[i],
  9.             "minioObjectName": urlList[i]
  10.         });
  11.     }
  12. }

method()

  1. // 上传成功回调
  2. onSuccess(res, file, fileList) {
  3.     if (res.status === "-1") {
  4.         // 移除失败文件
  5.         let index = fileList.findIndex(e => e.uid === file.uid);
  6.         fileList.splice(index, 1)
  7.         this.$message.error("文件[" + file.name + "] 上传失败:" + res.message);
  8.         return false
  9.     } else {
  10.         file.minioObjectName = res.data;
  11.     }
  12.     this.uploadFileList = fileList
  13. },
  14. beforeRemove(file, fileList) {
  15.     return this.$confirm('是否删除: ' + file.name)
  16. },
  17. onRemove(file, fileList) {
  18.     let index = this.uploadFileList.findIndex(e => e.uid === file.uid);
  19.     this.uploadFileList.splice(index, 1)
  20. },
  21. // 下载
  22. previewFile(file) {
  23.     window.open("${ctx}/resContract/download?objectName=" + file.minioObjectName)
  24. },

controller

  1. @PostMapping(value = "/upload")
  2. @ResponseBody
  3. public ResponseMessage upload(MultipartFile file) throws Exception {
  4.     return ResponseMessage.newOkInstance(resContractService.upload(file));
  5. }
  7. @GetMapping(value = "/download")
  8. public String download(String objectName) throws Exception {
  9.     return "redirect:" + resContractService.download(objectName);
  10. }

service

  1. private final String BUCKET_NAME = "rent-house";
  2. @Autowired
  3. private MinioService minioService;
  5. public String upload(MultipartFile file) throws Exception {
  6.     String minioObjectName = Global.USERFILES_BASE_URL + UserUtils.getUser().getId() + "/rentHouse/" + IdGen.uuid() + "/" + file.getOriginalFilename();
  7.     minioService.updateFile(BUCKET_NAME, file, minioObjectName);
  8.     return minioObjectName;
  9. }
  11. public String download(String objectName) throws Exception {
  12.     return minioService.getDownloadUrl(BUCKET_NAME, objectName, null);
  13. }

vue渲染闪烁

  1. <style>
  2.   [v-cloak]{
  3.     display: none;
  4.   }
  5. </style>
  6. <div id="app" v-cloak>