From c676e48cfcfae16cf276e75af57d0c79344bbcdc Mon Sep 17 00:00:00 2001
From: zhangyanpeng <bob.zhang@highdatas.com>
Date: 星期二, 21 一月 2020 13:47:43 +0800
Subject: [PATCH] 添加文件库，上传参数
---
src/views/calendarTask.vue | 278 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 273 insertions(+), 5 deletions(-)
diff --git a/src/views/calendarTask.vue b/src/views/calendarTask.vue
index e17c74a..6d33cd1 100644
--- a/src/views/calendarTask.vue
+++ b/src/views/calendarTask.vue
@@ -1,12 +1,280 @@
<template>
- <div>鏃ュ巻浠诲姟鍒楄〃</div>
+ <div class="calendar_div" ref="calendar_div">
+ <div style="float: left; width: 75%;" class="z_calendar_table">
+ <ele-calendar
+ :render-content="renderContent"
+ :data="datedef"
+ :prop="prop"
+ @pick="datePick"
+ @date-change="dateChange"
+ ></ele-calendar>
+ </div>
+
+ <div class="z_right" >
+ <div v-for="(task_itm, k) in DayDataTree" :key="k" class="right_row">
+ <h3>{{task_itm.name}}</h3>
+ <span>{{task_itm.desc}}</span>
+ <div v-for="(type_itm, k_) in task_itm.children" :key="k_" class="right_row_">
+ <span>{{k_+1}}銆亄{type_itm.name}}</span>
+ <el-button size="mini" type="primary" style="float: right; margin-top: 10px;" @click="handleTask(type_itm.id, type_itm.mustAttach, type_itm)">澶勭悊浠诲姟</el-button>
+ </div>
+ </div>
+ </div>
+
+ <el-dialog @close="Cancel" width="40%" top="10%" :visible.sync="dialog_1">
+ <div slot="title" class="dialog-title" style="text-align: left;">
+ <span> 涓婁紶浜や粯鐗� </span>
+ </div>
+ <!-- 涓婁紶鏂囦欢-->
+ <div style="height: 100px;">
+ <el-upload
+ class="upload-demo"
+ :action="upload_url"
+ multiple
+ :data="upData"
+ :limit="3"
+ :file-list="fileList"
+ :auto-upload='false'
+ ref="upload"
+ >
+ <el-button size="medium" type="text">閫夋嫨鏂囦欢</el-button>
+ <div slot="tip" class="el-upload__tip">鏂囦欢涓嶈秴杩�500kb</div>
+ </el-upload>
+ <div style="text-align: left;">
+ <span>鎻忚堪</span>
+ <el-input
+ type="textarea"
+ :rows="2"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ v-model="desc_task">
+ </el-input>
+ </div>
+ </div>
+
+ <!-- 澶勭悊瀹屾垚 -->
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="submitUpload">鐐瑰嚮涓婁紶</el-button>
+ <el-button @click="Cancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="doHandleTask">澶勭悊瀹屾垚</el-button>
+ </div>
+ </el-dialog>
+
+ </div>
</template>
<script>
- export default {
-
- };
-</script>
+ import eleCalendar from "ele-calendar";
+ import 'ele-calendar/dist/vue-calendar.css';
+ export default {
+ components: {
+ eleCalendar
+ },
+ data(){
+ return{
+ datedef:[
+ {'date': "2020-01-01", 'task': 3},
+ {'date': "2020-01-11", 'task': 2},
+ ],
+ prop:'date' ,//瀵瑰簲鏃ユ湡瀛楁鍚�
+ DayDataTree: [],
+
+ dialog_1: false,
+ handleTaskType: {},
+ upload_url: "",
+ desc_task: "",
+ upData: {},
+ fileList: [],
+ }
+ },
+
+ mounted() {
+ let header_height = this.$refs.calendar_div.getElementsByClassName('z_calendar_table')[0].offsetHeight;
+ this.$refs.calendar_div.getElementsByClassName('z_right')[0].style['height'] = header_height + "px";
+
+ //鑾峰彇褰撴湀鏁版嵁
+ let nowDate = new Date();
+ var imoment = this.$moment(nowDate);
+ let iformat = imoment.format('YYYY-MM');
+ let systemDate = iformat + '-01';
+ this.getDatedef(systemDate);
+
+ },
+
+ methods: {
+ renderContent(h, parmas) {
+ let defdate= parmas.defdate;
+ //鎶婃椂闂磋浆鎴愭椂闂存埑
+ var imoment = this.$moment(defdate);
+ //鎶婃椂闂磋繘琛屾牸寮忓寲
+ let geshi = imoment.format('YYYY-MM-DD');
+ //鎷垮埌鏃堕棿鎵�瀵瑰簲鐨勬槦鏈�
+ let week = imoment.day();
+ const loop = data =>{
+ return (
+ data.defvalue.value ? (<div class='z_calendar_s'><div>{data.defvalue.text}</div>
+ <span class='class_task'>{data.defvalue.value.task}涓换鍔�</span>
+ </div>) : <div>{data.defvalue.text}</div>);
+ };
+ return (
+ <div class="z_calendar_call" style="height: 10vh; min-height: 60px; border-right: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;">
+ <div style="height: 100%;" >
+ {loop(parmas)}
+ </div>
+ </div>
+ );
+ },
+
+ handleTask(id, mustAttach, type_itm) {
+ this.handleTaskType = type_itm;
+ if(mustAttach) {
+ this.dialog_1 = true;
+ }
+ else {
+ this.doHandleTask();
+ }
+ },
+
+ doHandleTask() {
+ //姝d鐨勬槑缁嗕换鍔″畬鎴�
+ let id = this.handleTaskType.id;
+ //璇锋眰鏀瑰彉姝ゆ槑缁嗙殑瀹屾垚鐘舵�侊紱
+
+ if (this.dialog_1) {
+ this.Cancel();
+ }
+ },
+
+ submitUpload() {
+ this.handleTaskType; //瑕佸鐞嗙殑鏄庣粏鏁版嵁
+
+ this.upData = {//璁剧疆瑕佷紶鐨勫弬鏁�
+ desc_task: this.desc_task,
+
+ },
+ this.upload_url = ""; //璁剧疆涓婁紶鎺ュ彛
+ this.$refs.upload.submit();//寮�濮嬩笂浼�
+ },
+
+ Cancel() {
+ this.dialog_1 = false;
+ },
+
+ dateChange(date_) {
+ var imoment = this.$moment(date_);
+ let iformat = imoment.format('YYYY-MM');
+ let systemDate = iformat + '-01';
+ this.getDatedef(systemDate);
+ },
+
+ datePick(date, event, row, dome) {
+ var imoment = this.$moment(date);
+ // 鏍煎紡鍖栨垚锛屽勾鏈堟棩
+ let iformat = imoment.format('YYYY-MM-DD');
+ // 鏍煎紡鍖栵紝鎷垮埌鏃�
+ let idate = imoment.date();
+ // 鎷垮埌鏄熸湡
+ let week = imoment.day();
+ this.getDayData(iformat);
+ },
+
+ getDatedef(month_) {//鑾峰彇鎸囧畾骞存湀鐨勬暟鎹�傚弬鏁版槸'2019-12-01'瀛楃涓诧紝閮芥槸1鍙枫�傚湪鏃ュ巻涓樉绀�
+ /* aa:[
+ {'date': "2020-01-01", 'task': 3}, //杩斿洖鐨勬暟缁勫瓧娈靛寘鍚繖涓や釜瀛楁
+ {'date': "2020-01-11", 'task': 2},
+ ], */
+
+ },
+
+ getDayData(date_) {//鑾峰彇鎸囧畾鏃ョ殑浠诲姟銆傚'2019-12-21'瀛楃涓层�傚湪鍙充晶鏄剧ず鐨�
+ /* aa:[
+ {'id': "椤圭洰鐨刬d", 'name': "椤圭洰鍚嶇О", 'desc': "椤圭洰鎻忚堪"}, //杩斿洖鐨勬暟缁勫瓧娈�
+ {'id': "鏄庣粏鐨処D(鐢ㄤ簬澶勭悊鏃剁煡閬撴槸鍝釜椤圭洰鍝釜绫诲瀷鐨勫鐞�)", 'name': "绫诲瀷鍚嶇О", 'mustAttach': "鏈夋棤浜や粯鐗�", 'parentId': "椤圭洰id"}, //
+ ], */
+ let DayDatas = [
+ {'id': "111", 'name': "娴嬭瘯1椤圭洰", 'desc': "姝ら」鐩富瑕侀拡瀵规彁楂樻晥鐜囧拰閿�鍞噺"}, //杩斿洖鐨勬暟缁勫瓧娈�
+ {'id': "111_1", 'name': "绔嬮鏈嶅姟", 'mustAttach': true, 'parentId': "111"}, //
+ {'id': "111_2", 'name': "鏂规寮�鍙戞湇鍔�", 'mustAttach': true, 'parentId': "111"}, //
+ ];
+
+ let list = DayDatas;
+ let parId = "";
+ let obj = {};
+ let result = [];
+
+ list.map(el => {
+ obj[el.id] = el;
+ })
+ for(let i=0, len = list.length; i < len; i++) {
+ let id = list[i].parentId;
+ //璁剧疆鏄剧ず瀛楁
+ list[i].value = list[i].id;
+ list[i].label = list[i].name;
+
+ if(id == parId || !id) {
+ if(!obj[list[i].id].children) {
+ obj[list[i].id].children = [];
+ }
+ result.push(list[i]);
+ continue;
+ }
+ if(obj[id].children) {
+ obj[id].children.push(list[i]);
+ } else {
+ obj[id].children = [list[i]];
+ }
+ }
+ this.DayDataTree = result;
+
+ }
+
+ }
+ }
+</script>
<style>
+ .z_calendar_s{
+ height: 100%;
+ background-color: #40ff9e;
+ }
+
+ .z_calendar_call :hover{
+ background-color: #9ec6f1;
+ }
+
+ .z_right {
+ float: right;
+ width: 24%;
+ border: 1px solid #e4eef9;
+ overflow: auto;
+ border-radius: 10px;
+ box-shadow: 0px 0px 10px 5px #D0E2E9;
+ }
+
+ .class_task{
+ font-weight: bold;
+ font-size: 15px;
+ color: #999;
+ }
+ .calendar_div table th{
+ border-top: 1px solid #ebeef5;
+ border-right: 1px solid #ebeef5;
+ background-color: #b5d8fd;
+ }
+ .calendar_div .el-date-table-calendar td.current[data-v-55be3324]:not(.disabled){
+
+ }
+ .right_row {
+ padding: 5px;
+ padding-left: 10px;
+ text-align: left;
+ box-sizing: border-box;
+ border-bottom: 1px solid #999
+ }
+ .right_row_ {
+ height: 60px;
+ line-height: 60px;
+ text-align: left;
+ border-bottom: 1px solid #ece5e5
+ }
+
</style>
--
Gitblit v1.8.0