文件选择上传/拖拽上传前端对<input type=‘file‘>赋值方法

这篇博客详细介绍了如何实现文件的常规上传和拖拽上传功能。在前端部分,涵盖了html页面代码以及使用jquery的js代码。后端部分则展示了处理文件上传的JAVA代码,包括两种方式的实现细节。

一、常规文件上传

    1_1、前端html页面代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>常规文件上传</title>
 </head>
 <body>
   <form action="xxx/upload" method="post" id="fileUploadForm" enctype="multipart/form-data">
    请选择文件:<input type="file" name="upfile" accept=".jpg,.xls,.xlsx"><br>
	<input type="submit" value="提交">
	</form>
 </body>
</html>

    1_2、后端JAVA代码:

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ModelAndView uploadFile(@RequestParam("upfile") MultipartFile file, HttpServletRequest request, Model model) {
   ModelAndView resultMv = new ModelAndView();
   
<template> <div class="app-container"> <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px"> <el-card> <el-form-item label="系统名称"> <el-input v-model="postForm.siteName" placeholder="系统显示名称" /> </el-form-item> <el-form :model="postForm" label-width="120px"> <el-form-item label="系统LOGO"> <!-- 自定义文件上传组件 --> <file-upload v-model="postForm.backLogo" accept=".jpg,.jpeg,.png" @change="handleFileChange" @error="handleError" > 点击上传拖拽文件到这里 </file-upload> <!-- 预览已上传的LOGO --> <div v-if="postForm.backLogo" class="logo-preview"> <img :src="postForm.backLogo" alt="预览LOGO" style="max-width: 100px; max-height: 100px;"> </div> </el-form-item> </el-form> <el-form-item label="版权信息"> <el-input v-model="postForm.copyRight" placeholder="登录页底部版权信息" /> </el-form-item> <el-row> <el-button type="primary" @click="submitForm">保存</el-button> </el-row> </el-card> </el-form> </div> </template> <script> import { fetchDetail, saveData } from '@/api/sys/config/config' import FileUpload from '@/components/FileUpload' export default { name: 'Config', components: { FileUpload }, data() { return { postForm: { id: '1' }, loading: false, rules: { } } }, created() { this.fetchData() }, methods: { fetchData() { fetchDetail().then(response => { this.postForm = response.data }) }, submitForm() { console.log(JSON.stringify(this.postForm)) this.$refs.postForm.validate((valid) => { if (!valid) { return } this.loading = true this.postForm.id = '1' saveData(this.postForm).then(() => { this.$notify({ title: '成功', message: '配置保存成功!', type: 'success', duration: 2000 }) }) this.loading = false }) } } } </script> <style scoped> </style>
06-06
<template> <div> <el-dialog :title="!dataForm.id ? '指令生成' : '修改'" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible" id="myOrder"> <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" style="margin-top: -0.275rem;background-color: #fff;border: 0px solid #DCDFE6;"> <!-- 升级类型 1-BMS升级 2-Tracker通讯板升级 --> <el-form-item label="升级类型" size="mini" prop="type"> <el-radio-group v-model="dataForm.type" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1">BMS升级</el-radio> <el-radio :label="2">Tracker通讯板升级</el-radio> <!-- <el-radio :label="2">参数设置</el-radio> --> </el-radio-group> </el-form-item> <el-form-item label="项目" prop="projectParameter"> <el-select v-model="dataForm.projectParameter" placeholder="请选择项目" @change="blurSelect" style="width:6rem" clearable> <el-option v-for="item in projectIds" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="项目名称" prop="projectRef"> <el-input v-model="dataForm.projectRef" placeholder="项目简称" style="width:6rem" readonly></el-input> </el-form-item> <el-form-item label="升级模式" size="mini" prop="orderType"> <el-radio-group v-model="dataForm.orderType" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1" @change="typeChange(1)">指定设备升级</el-radio> <el-radio :label="0" @change="typeChange(0)">所有设备升级</el-radio> </el-radio-group> </el-form-item> <el-form-item label="设备导入" v-if="showotaall"> <!-- <el-button v-if="isAuth('maya:myotarequest:batchUpgrade')" type="success" @click="otaBatchUpgradeHandle()" :disabled="dataListSelections.length != 2">批量升级</el-button> --> <el-button type="success" @click="otaBatchUpgradeHandle()" >Excel导入</el-button> </el-form-item> <el-form-item label="设备编号" prop="deviceCodes" v-if="showotaall"> <!-- <el-input v-model="dataForm.deviceCodes" placeholder="设备编号。多个用“;”隔开,如下224042102999025;411219000005615;411219000005617"></el-input> --> <el-autocomplete style="width:10rem" size="normal" v-model="dataForm.deviceCodes" :popper-append-to-body="false" :fetch-suggestions="querySearchAsync" @select="handleSelect" placeholder="请输入设备编号。多个用“;”隔开,如下224042102999025;411219000005615;411219000005617"> </el-autocomplete> </el-form-item> <el-form-item label="Topic" prop="topic"> <el-select v-model="dataForm.topic" placeholder="请选择topic" style="width:6rem" > <el-option v-for="item in topics" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <!-- <el-form-item label="通讯方式" prop="communicationMode"> <el-input v-model="dataForm.communicationMode" placeholder="通讯方式 0:暂无 1:串口 2:can 3:i2c"></el-input> </el-form-item> --> <!-- <el-form-item label="通讯类型" size="mini" prop="communicationMode"> <el-radio-group v-model="dataForm.communicationMode" :disabled="dataForm.id ? 'disabled' : null"> <el-radio :label="1">串口</el-radio> <el-radio :label="2">can</el-radio> <el-radio :label="3">i2c</el-radio> </el-radio-group> </el-form-item> --> <!-- <el-form-item label="can通讯的帧id" prop="frameIdCan"> <el-input v-model="dataForm.frameIdCan" placeholder="can通讯的帧id"></el-input> </el-form-item> <el-form-item label="通讯数据" prop="payload"> <el-input v-model="dataForm.payload" placeholder="通讯的数据"></el-input> </el-form-item> --> <!-- <el-form-item label="升级固件地址" prop="url"> <el-input v-model="dataForm.url" placeholder="升级时的固件地址"></el-input> </el-form-item> --> <!-- <el-form-item label="*固件地址" prop="url" v-if="showota"> --> <el-form-item label="*固件地址" prop="url"> <el-select v-model="dataForm.url" placeholder="升级固件地址" style="width:10rem"> <el-option v-for="item in uploadurls" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" > </el-option> </el-select> </el-form-item> <el-form-item label="硬件版本" prop="hardwareversion"> <el-input v-model="dataForm.hardwareversion" placeholder="要升级的目标电池硬件版本" style="width:6rem;padding-left:0.0rem;"></el-input> <br/><span style="color:blue;font-size:13px">✸ 可不填写,若指定要升级的目标电池硬件版本,填写请在前面请带上“V”,如V1.00,V1.02</span> </el-form-item> <el-form-item label="*软件版本" prop="softwareversion"> <el-input v-model="dataForm.softwareversion" placeholder="当前升级的固件的软件版本" style="width:6rem"></el-input> </el-form-item> <el-form-item label="是否执行" size="mini" prop="todoNow"> <el-radio-group v-model="dataForm.todoNow"> <el-radio :label="0">等待</el-radio> <el-radio :label="1">立即执行</el-radio> </el-radio-group> </el-form-item> <!-- <el-form-item label="固件MD5" prop="md5"> <el-input v-model="dataForm.md5" placeholder="固件MD5"></el-input> </el-form-item> <el-form-item label="固件大小" prop="size"> <el-input v-model="dataForm.size" placeholder="固件大小"></el-input> </el-form-item> <el-form-item label="配置是否处理 " prop="handled"> <el-input v-model="dataForm.handled" placeholder="配置是否处理 1:已处理 0:待处理"></el-input> </el-form-item> <el-form-item label="是否立即执行" prop="todoNow"> <el-input v-model="dataForm.todoNow" placeholder="是否立即执行 0:等待执行 1:立即执行"></el-input> </el-form-item>--> <!-- <el-form-item label="是否执行" size="mini" prop="todoNow"> <el-radio-group v-model="dataForm.todoNow"> <el-radio :label="0">等待</el-radio> <el-radio :label="1">执行</el-radio> </el-radio-group> </el-form-item> --> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="dataFormSubmit()">生成指令</el-button> </span> </el-dialog> <!-- 弹窗, Excel导入--> <ota-batch-upgrade v-if="otaBatchUpgradeVisible" ref="otaBatchUpgrade" @refreshDataList="onSubmit(1)"></ota-batch-upgrade> </div> </template> <script> import OtaBatchUpgrade from './myotabatchupgrade' export default { data () { return { visible: false, showotaall: true, otaBatchUpgradeVisible: false, projectIds:[], uploadurls:[], topics: [{ value: '/{productKey}/{deviceId}/maya7026/ota/upgrade/push', label: '固件升级(ota/upgrade/push)' } // , { // value: '/{productKey}/{deviceId}/upgradebox/{projectRef}/property/get', // label: '电池数据获取(property/get)' // } ], dataForm: { id: 0, type: 1, orderType: 1, projectParameter: '', deviceCodes: '', projectRef: '', topic: '', // communicationMode: 1, // frameIdCan: '', payload: '', url: '', hardwareversion: '', softwareversion: '', md5: '', size: '', handled: '', todoNow: 0, createTime: '', updateTime: '' }, dataRule: { type: [ { required: true, message: '升级类型 1-BMS升级 2-Tracker通讯板升级 不能为空', trigger: 'blur' } ], orderType: [ { required: true, message: '升级模式勾选 不能为空', trigger: 'blur' } ], projectParameter: [ { required: true, message: '不能为空', trigger: 'blur' } ], // deviceCodes: [ // { required: true, message: '设备编号不能为空', trigger: 'blur' } // ], // projectRef: [ // { required: true, message: '项目简称(用于topic)不能为空', trigger: 'blur' } // ], topic: [ { required: true, message: 'mqtt发送主题,如:battery/{batteryCode}/down/upgrade不能为空', trigger: 'blur' } ], // communicationMode: [ // { required: true, message: '通讯方式 0:暂无 1:串口 2:can 3:i2c不能为空', trigger: 'blur' } // ], // frameIdCan: [ // { required: true, message: 'can通讯的帧id不能为空', trigger: 'blur' } // ], // payload: [ // { required: true, message: '通讯的数据不能为空', trigger: 'blur' } // ], // url: [ // { required: true, message: '升级时的固件地址不能为空', trigger: 'blur' } // ], // md5: [ // { required: true, message: '固件MD5不能为空', trigger: 'blur' } // ], // size: [ // { required: true, message: '固件大小不能为空', trigger: 'blur' } // ], // handled: [ // { required: true, message: '配置是否处理 1:已处理 0:待处理不能为空', trigger: 'blur' } // ], todoNow: [ { required: true, message: '是否立即执行 0:等待执行 1:立即执行不能为空', trigger: 'blur' } ], // createTime: [ // { required: true, message: '不能为空', trigger: 'blur' } // ], // updateTime: [ // { required: true, message: '更新时间不能为空', trigger: 'blur' } // ] } } }, components: { OtaBatchUpgrade, }, methods: { typeChange(val){ // alert('packageChange') if(val=='1'){ // 指定电池升级,打开电池编号输入框 this.showotaall = true }else if(val=='0'){ // ota升级项目下所有电池 this.showotaall = false } }, // el-select失去焦点必填校验 blurSelect() { var project_name = this.dataForm.projectParameter.substring(this.dataForm.projectParameter.lastIndexOf("::")+2) this.$set(this.dataForm,'projectRef', project_name) }, querySearchAsync(queryString, cb) { clearTimeout(1000); var results = [] // alert('queryString='+queryString) if (queryString == '') { cb(results); } else { //掉接口需要的参数 this.$http({ url: this.$http.adornUrl('/mqtt/mqtttriad/getDeviceIds'), method: 'get', params: this.$http.adornParams({ 'deviceId': queryString, 'projectParameter': this.dataForm.projectParameter }) }).then(({data}) => { if (data && data.code === 0) { // alert(data.data.length) var result = data.data //循环放到一个远程搜索需要的数组 for (let i = 0; i < result.length; i++) { const element = result[i]; // alert(element) results.push({ value: element, id: i }) } cb(results); } else { console.log('没有数据的显示') results = [] cb(results); } }) } }, //点击出现搜索后点击的每一项 handleSelect(item) { this.id = item.id this.name = item.value }, init (id) { this.dataForm.id = id || 0 this.showotaall = true this.visible = true this.$nextTick(() => { this.$refs['dataForm'].resetFields() if (this.dataForm.id) { this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/info/${this.dataForm.id}`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.projectIds = data.data.projectMenus.projectIds this.uploadurls = data.data.OtaUrlMenus.uploads const socitem = data.data.mqttSends this.dataForm.type = socitem.type this.dataForm.projectParameter = socitem.projectParameter this.dataForm.deviceCodes = socitem.deviceCodes this.dataForm.projectRef = socitem.projectRef this.dataForm.topic = socitem.topic // this.dataForm.communicationMode = socitem.communicationMode // this.dataForm.frameIdCan = socitem.frameIdCan // this.dataForm.payload = socitem.payload this.dataForm.url = socitem.url this.dataForm.md5 = socitem.md5 this.dataForm.size = socitem.size this.dataForm.handled = socitem.handled this.dataForm.todoNow = socitem.todoNow this.dataForm.createTime = socitem.createTime this.dataForm.updateTime = socitem.updateTime } }) }else{ this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/getOtaAndProjectMenus`), method: 'get', params: this.$http.adornParams() }).then(({data}) => { if (data && data.code === 0) { this.projectIds = data.data.projectMenus.projectIds this.uploadurls = data.data.OtaUrlMenus.uploads } }) } }) }, /** * 设备导入弹窗触发方法 */ otaBatchUpgradeHandle(){ this.otaBatchUpgradeVisible=true this.$nextTick(()=>{ this.$refs.otaBatchUpgrade.init() }) }, // 表单提交 dataFormSubmit () { if(this.dataForm.orderType==='1' || this.dataForm.orderType===1){ if(this.dataForm.deviceCodes === '' || this.dataForm.deviceCodes === undefined || this.dataForm.deviceCodes === null){ this.$message.warning('选择指定电池升级的,设备编号不能为空!') return } } // if(this.dataForm.type==='0' || this.dataForm.type===0){ if(this.dataForm.url === '' || this.dataForm.url === undefined || this.dataForm.url === null){ this.$message.warning('升级固件地址不能为空!') return } // if(this.dataForm.hardwareversion === '' || this.dataForm.hardwareversion === undefined || this.dataForm.hardwareversion === null){ // this.$message.warning('升级硬件版本不能为空!') // return // } if(this.dataForm.softwareversion === '' || this.dataForm.softwareversion === undefined || this.dataForm.softwareversion === null){ this.$message.warning('升级软件版本不能为空!') return } // } this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/maya/myotarequest/create`), method: 'post', data: this.$http.adornData({ 'id': this.dataForm.id || undefined, 'type': this.dataForm.type, 'orderType': this.dataForm.orderType, 'projectParameter': this.dataForm.projectParameter, 'deviceCodes': this.dataForm.deviceCodes, 'projectRef': this.dataForm.projectRef, 'topic': this.dataForm.topic, // 'communicationMode': this.dataForm.communicationMode, // 'frameIdCan': this.dataForm.frameIdCan, // 'payload': this.dataForm.payload, 'url': this.dataForm.url, 'hardwareversion': this.dataForm.hardwareversion, 'softwareversion': this.dataForm.softwareversion, 'md5': this.dataForm.md5, 'size': this.dataForm.size, 'handled': this.dataForm.handled, 'todoNow': this.dataForm.todoNow, 'createTime': this.dataForm.createTime, 'updateTime': this.dataForm.updateTime }) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') // this.$emit('refreshDataList', this.dataForm.type,this.dataForm.communicationMode,this.dataForm.deviceCodes); } }) } else { this.$message.error(data.msg) } }) } }) } } } </script> <style> #myOrder element.style { width: 150px; } </style>父组件是这样的
07-12
<template> <div class="container"> <div class="search-wrapper"> <el-form class="search-from" :inline="true" label-width="70px" @submit.prevent="initData"> <el-form-item label="名称"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable/> </el-form-item> <el-form-item label="责任人"> <el-input v-model="queryParams.respPerson" placeholder="请输入责任人" clearable/> </el-form-item> <el-form-item> <el-button type="primary" @click="initData"> <i class="el-icon-search"></i> 搜索 </el-button> <el-button @click="resetQuery"> <i class="el-icon-refresh"></i> 重置 </el-button> <el-button type="primary" style="margin-left: 10px;" @click="toggleGantt" > {{ showGantt ? '收起甘特图' : '展开甘特图' }} </el-button> </el-form-item> </el-form> </div> <div ref="gantt" class="gantt-container"></div> <!-- 添加或修改治理计划对话框 --> <Dialog title="查看治理计划" :visible.sync="open" width="850px" height="600px" append-to-body> <el-form ref="form" :model="form" label-width="100px" disabled> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="code"> <el-input v-model="form.code" placeholder="请输入编号"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="text"> <el-input v-model="form.text" placeholder="请输入名称"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="上级计划" prop="parent"> <treeselect v-model="form.parent" :options="planOptions" :normalizer="normalizer" placeholder="选择上级计划" disabled /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="完成度(%)" prop="progress"> <el-input-number v-model="form.progress" placeholder="请输入完成百分比"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="责任人" prop="respPerson"> <span slot="label"> <span class="content-font">责任人</span> </span> <!-- 用户向导 --> <p style="margin-top:0px; float: left;font-size: 12px;"> {{ form.respPerson }} <el-button size="mini" type="primary" icon="el-icon-user" class="btn-wizard-trigger" style="margin-left: 10px" >选择用户 </el-button> </p> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="责任部门" prop="respDept"> <el-input v-model="form.respDept" placeholder="请输入责任部门"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="计划开始日期" prop="planStartDate"> <el-date-picker clearable v-model="form.planStartDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划开始日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="实际开始日期" prop="realStartDate"> <el-date-picker clearable v-model="form.realStartDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择实际开始日期"> </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="计划结束时间" prop="planEndDate"> <el-date-picker clearable v-model="form.planEndDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划结束时间"> </el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="实际结束日期" prop="realEndDate"> <el-date-picker clearable v-model="form.realEndDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择实际结束日期"> </el-date-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="计划工期(天)" prop="planDuration"> <el-input v-model="form.planDuration" placeholder="请选择计划日期"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="实际工期(天)" prop="realDuration"> <el-input v-model="form.realDuration" placeholder="请选择实际日期"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="反馈内容" prop="feedback"> <el-input v-model="form.feedback" type="textarea" placeholder="请输入内容"/> </el-form-item> </el-col> </el-row> </el-form> <div slot="buttons" class="dialog-footer"> <el-button @click="open = false">关 闭</el-button> </div> </Dialog> </div> </template> <script> import Dialog from '@/components/Dialog' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' import {gantt} from "dhtmlx-gantt"; import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; import {listPlan} from "@/api/dw/plan/planview"; export default { components: {Dialog, Treeselect}, name: "gantt", data() { return { tasks: { data: [], }, queryParams: { name: null, respPerson: null }, showGantt: true, // 状态控制甘特图显示 planOptions: [], open: false, // 控制详情弹窗显示 form: {} // 当前查看的任务 }; }, // 把携带的参数放到queryParams查询参数里 created() { // console.log(this.$route.params.id); }, methods: { // 查看任务详情 handleView(taskId) { // 根据任务ID查找任务详情 const task = this.tasks.data.find(item => item.id == taskId); if (task) { this.getTreeselect(); this.form = task; this.open = true; } }, toggleGantt() { this.showGantt = !this.showGantt; this.initData(); // 重新初始化甘特图 }, // 上级节点 getTreeselect() { listPlan().then(response => { const data = {uid: 0, name: '顶级节点', children: []}; data.children = this.handleTree(response.data, 'uid', 'parentUid') this.planOptions.push(data) }) }, normalizer(node) { if (node.children && !node.children.length) { delete node.children } return { id: node.uid, label: node.name, children: node.children } }, //开始时间-结束时间参数 DateDifference: function (strDateStart, strDateEnd) { var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, "/"))); //begintime 为开始时间 var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, "/"))); // endtime 为结束时间 var date3 = endtime_ms - begintime_ms; //时间差的毫秒数 var days = Math.floor(date3 / (24 * 3600 * 1000)); return days; }, // 重置查询 resetQuery() { this.queryParams = { name: null, respPerson: null }; this.initData(); }, initData: function () { gantt.clearAll(); listPlan(this.queryParams).then((res) => { // 重新初始化甘特图配置 gantt.config.autosize = true; gantt.config.readonly = true; gantt.config.show_grid = true; this.tasks.data = res.data.map((item) => { let statusColor; //存在status字段 说明非一级菜单,判断阶段的具体类型 设置不同颜色 if (item.status == '1') { //冒烟 statusColor = "#84bd54" } else if (item.status == '2') { //单元 statusColor = "#fcca02" } else if (item.status == '3') { //回归 statusColor = "#dc1626" } else { statusColor = "#999999" } return { id: item.uid, parent: item.parent, text: item.name, start_date: item.planStartDate, duration: item.planDuration, open: true, //默认打开, toolTipsTxt: item.name, progress: item.schedule, status: item.status, code: item.code, respPerson: item.respPerson, respDept: item.respDept, planStartDate: item.planStartDate, planEndDate: item.planEndDate, realStartDate: item.realStartDate, realEndDate: item.realEndDate, planDuration: item.planDuration, realDuration: item.realDuration, remarks: item.remarks, feedback: item.feedback, color: statusColor, } }); //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务 gantt.config.autosize = true; //只读模式 gantt.config.readonly = true; //是否显示左侧树表格 gantt.config.show_grid = true; //表格列设置 gantt.config.columns = [ { name: "code", label: "编号", tree: true, width: "160", onrender: function (task, node) { node.setAttribute( "class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status ); }, }, { name: "status", label: "状态", align: "center", width: "80", template: function (task) { // 自定义状态列显示为状态灯 return `<div class="status-light" style="background-color: ${task.color}"></div>`; } }, {name: "text", label: "名称", align: "center", width: "180", hide: true}, {name: "progress", label: "完成度(%)", align: "center", width: "90", hide: true}, {name: "respPerson", label: "责任人", align: "center", width: "120", hide: true}, {name: "respDept", label: "责任部门", align: "center", width: "140", hide: true}, {name: "planStartDate", label: "计划开始日期", align: "center", width: "130", hide: true}, {name: "planEndDate", label: "计划结束时间", align: "center", width: "130", hide: true}, {name: "realStartDate", label: "实际开始日期", align: "center", width: "130", hide: true}, {name: "realEndDate", label: "实际结束日期", align: "center", width: "130", hide: true}, {name: "planDuration", label: "计划工期", align: "center", width: "90", hide: true}, {name: "realDuration", label: "实际工期", align: "center", width: "90", hide: true}, {name: "remarks", label: "备注", align: "center", width: "220", hide: true}, // { // name: "operate", // label: "操作", // align: "center", // width: "80", // template: function (task) { // return '<el-button size="mini" type="text" onclick=" window.vueInstance.handleView(\'' + task.id + '\')">查看</el-button>'; // } // } ]; var weekScaleTemplate = function (date) { var dateToStr = gantt.date.date_to_str("%m %d"); var endDate = gantt.date.add( gantt.date.add(date, 1, "week"), -1, "day" ); var weekNum = gantt.date.date_to_str("第 %W 周"); return weekNum(date); }; var daysStyle = function (date) { var dateToStr = gantt.date.date_to_str("%D"); if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend"; return ""; }; gantt.config.subscales = [ { unit: "week", step: 1, template: weekScaleTemplate, }, { unit: "day", step: 1, format: "%d", }, ]; gantt.plugins({ tooltip: true, }); //设置鼠标放置显示事件 gantt.attachEvent("onGanttReady", function() { var tooltips = gantt.ext.tooltips; gantt.templates.tooltip_text = function(start, end, task) { return "编号:" + task.code + "<br/>" + "名称:" + task.text + "<br/>" + "计划开始:" + gantt.templates.tooltip_date_format(start) + "<br/>" + "工期:" + task.duration }; }); //设置任务条进度内容 gantt.templates.progress_text = function (start, end, task) { return ( "<div style='text-align:left;color:#fff;padding-left:20px'>" + task.progress + "% </div>" ); }; //任务条显示内容 gantt.templates.task_text = function (start, end, task) { // return task.text + '(' + task.duration + '天)'; return ( "<div style='text-align:center;color:#fff'>" + task.text + "(" + task.duration + "天)" + "</div>" ); }; //任务条上的文字大小 以及取消border自带样式 gantt.templates.task_class = function (start, end, item) { return item.$level == 0 ? "firstLevelTask" : "secondLevelTask"; }; gantt.config.layout = { css: "gantt_container", cols: [ { width: this.showGantt ? 800 : "100%", // 如果收起甘特图,左侧表格宽度占满 min_width: 300, //表格左侧最小宽度 rows: [ { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer", }, { view: "scrollbar", id: "gridScroll", group: "horizontal", }, ], }, ...(this.showGantt ? [{ resizer: true, width: 1, }, { rows: [ { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer", }, { view: "scrollbar", id: "scrollHor", group: "horizontal", }, ] }] : []) ], }; //时间轴图表中,任务条形图的高度 // gantt.config.task_height = 28 //时间轴图表中,甘特图的高度 // gantt.config.row_height = 36 //时间轴图表中,如果不设置,只有行边框,区分上下的任务,设置之后带有列的边框,整个时间轴变成格子状。 gantt.config.show_task_cells = true; //当task的长度改变时,自动调整图表坐标轴区间用于适配task的长度 gantt.config.fit_tasks = true; gantt.config.min_column_width = 50; gantt.config.auto_types = true; gantt.config.xml_date = "%Y-%m-%d"; gantt.config.scale_unit = "month"; gantt.config.step = 1; gantt.config.date_scale = "%Y年%M"; gantt.config.start_on_monday = true; gantt.config.scale_height = 160; gantt.config.autoscroll = true; gantt.config.calendar_property = "start_date"; gantt.config.calendar_property = "end_date"; gantt.config.readonly = true; gantt.i18n.setLocale("cn"); // 初始化 gantt.init(this.$refs.gantt); // 数据解析 gantt.parse(this.tasks); // 添加双击行事件监听器 gantt.attachEvent("onTaskDblClick", function(id, e) { // 调用查看详情方法 window.vueInstance.handleView(id); return true; }); }); }, }, mounted() { // 将当前Vue实例赋值给window.vueInstance,供甘特图中调用 window.vueInstance = this; this.initData(); }, }; </script> <style lang="scss" scoped> .firstLevelTask { border: none; .gantt_task_content { font-size: 13px; } } .secondLevelTask { border: none; } .thirdLevelTask { border: 2px solid #da645d; color: #da645d; background: #da645d; } .milestone-default { border: none; background: rgba(0, 0, 0, 0.45); } .milestone-unfinished { border: none; background: #5692f0; } .milestone-finished { border: none; background: #84bd54; } .milestone-canceled { border: none; background: #da645d; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } .container { height: 100%; width: 100%; position: relative; padding: 10px; .gantt_grid_head_cell { padding-left: 20px; text-align: left !important; font-size: 14px; color: #333; } .left-container { height: 100%; } .green, .yellow, .pink, .popular { .gantt_tree_icon.gantt_file { background: none; position: relative; &::before { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } } } .green { .gantt_tree_icon.gantt_file { &::before { background: #84bd54; } } } .yellow { .gantt_tree_icon.gantt_file { &::before { background: #fcca02; } } } .pink { .gantt_tree_icon.gantt_file { &::before { background: #da645d; } } } .popular { .gantt_tree_icon.gantt_file { &::before { background: #d1a6ff; } } } } .left-container { height: 100%; } .gantt_task_content { text-align: left; padding-left: 10px; } .gantt-container { height: calc(100% - 65px) !important; } // 状态灯样式 ::v-deep .gantt_grid_data .gantt_cell div.status-light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin: 0 auto; } // 表格表头居中样式 ::v-deep .gantt_grid_head_cell { text-align: center !important; } .search-wrapper { text-align: left; padding: 10px 0; } .search-from { .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item { margin-bottom: 3px; } } </style> 实现表格和甘特图的左右拖拽
最新发布
07-29
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值