添加分支，修改样式

73beb10c · daywrite · 9f5f4d96 · 73beb10c · 73beb10c
Commit 73beb10c authored Mar 17, 2019 by daywrite
Hide whitespace changes
Inline Side-by-side

Showing with 113 additions and 65 deletions

element.js src/apis/element.js +5 -1

scheduleItem.vue src/components/common/scheduleItem.vue +108 -64

No files found.
--- a/src/apis/element.js
+++ b/src/apis/element.js
@@ -18,6 +18,10 @@ export default {
  // 保存待办事项
  saveNewSchedule: {
    url: '/vue/schedule/save-new' + urlEnd
-  }
+  },
+  // 删除待办事项
+  deleteSchedule: {
+    url: '/vue/schedule/delete' + urlEnd
+  }
 }
--- a/src/components/common/scheduleItem.vue
+++ b/src/components/common/scheduleItem.vue
 <template>
  <section class="obear-schedule-item">
    <el-row class="obear-schedule-row">
-      <el-col :span="3" class="obear-schedule-left">
+      <el-col :span="4" :xs="24" class="obear-schedule-left">
-        <div>
+        <el-row :gutter="10">
-          <i class="fa fa-star-o" aria-hidden="true"></i><span>客户名称（{{ isNullClient ? '未设置' : item.client.name }}）</span>
+          <el-col :span="24">
-        </div>
+            <i class="fa fa-star" aria-hidden="true"></i><span>客户名称（{{ isNullClient ? '未设置' : item.client.name }}）</span>
-        <div>
+          </el-col>
-          <i class="fa fa-id-card" aria-hidden="true"></i></i><span>{{ item.createdBy.name }}</span>
+          <el-col :span="24">
-        </div>
+            <img class="user-avatar rounded-circle" :src="item.createdBy.avatar.name">
-        <div>
+            <span>{{ item.createdBy.name }}</span>
-          <i class="fa fa-connectdevelop" aria-hidden="true"></i>
+          </el-col>
-          <span>{{ item.department.name }}</span>
+          <el-col :span="24">
-          <span class="obear-schedule-left__private" :class="[isPublic ? 'colRed' : 'colGreen']">{{ isPublic ? '私人' : '共享' }}</span>
+            <i class="fa fa-connectdevelop" aria-hidden="true"></i>
-        </div>
+            <span>{{ item.department.name }}</span>
+            <span class="obear-schedule-left__private" :class="[isPublic ? 'colRed' : 'colGreen']">{{ isPublic ? '私人' : '共享' }}</span>
+          </el-col>
+        </el-row>
      </el-col>
-      <el-col :span="21" class="obear-schedule-right">
+      <el-col :span="20" :xs="24" class="obear-schedule-right">
-        <div class="obear-schedule-right__item">
+        <el-row :gutter="10">
-          <div>
+          <el-col :span="6" :xs="24">
            <span>待办时间：{{ item.schedule_week_display }}</span>
-          </div>
+          </el-col>
-          <div>
+          <el-col :span="6" :xs="24">
-            <span>状态：</span><span class="obear-schedule-right__status">{{ item.schedule_status_display }}</span>
-          </div>
-          <div>
-            <span class="obear-schedule-right__content">内容</span><span>：123</span>
-          </div>
-        </div>
-        <div class="obear-schedule-right__item">
-          <div>
            <span>开始时间：{{ item.start_at }}</span>
-          </div>
+          </el-col>
-          <div>
+          <el-col :span="6" :xs="24">
-            <span>图片：</span><span></span>
-          </div>
-          <div>
-            <span class="obear-schedule-right__content">情况说明</span><span>：{{ item.complete_description }}</span>
-          </div>
-        </div>
-        <div class="obear-schedule-right__item">
-          <div>
            <span>结束时间：{{ item.end_at }}</span>
-          </div>
+          </el-col>
-          <div>
+          <el-col :span="6" :xs="24">
-            <span>创建时间：{{ item.created_at }}</span><span></span>
-          </div>
-          <div>
-            <span>&nbsp;</span>
-          </div>
-        </div>
-        <div class="obear-schedule-right__item">
-          <div>
            <span>重复：</span>
-          </div>
+          </el-col>
-          <div>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span>状态：</span><span class="obear-schedule-right__status">{{ item.schedule_status_display }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>图片：</span><span></span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span>创建时间：{{ item.created_at }}</span><span></span>
+          </el-col>
+          <el-col :span="6" :xs="24">
            <span>创建人：{{ item.scheduleCreator.name }}</span><span></span>
-          </div>
+          </el-col>
-          <div>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="6" :xs="24">
+            <span class="obear-schedule-right__content">内容</span><span>：123</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+            <span class="obear-schedule-right__content">情况说明</span><span>：{{ item.complete_description }}</span>
+          </el-col>
+          <el-col :span="6" :xs="24">
+          </el-col>
+          <el-col :span="6" :xs="24">
            <el-button type="primary" size="mini"><i class="el-icon-share el-icon--left"></i>留言</el-button>
            <el-button type="primary" size="mini"><i class="el-icon-share el-icon--left"></i>汇报</el-button>
            <el-button type="primary" size="mini"><i class="el-icon-share el-icon--left"></i>编辑</el-button>
            <el-button type="primary" size="mini" @click="deleteSch(item.id)"><i class="el-icon-share el-icon--left"></i>删除</el-button>
-          </div>
+          </el-col>
-        </div>
+        </el-row>
      </el-col>
    </el-row>
  </section>
@@ -125,33 +125,49 @@ export default {
    color: green;
    border: 1px solid green;
  }
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+  .user-avatar {
+    width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+  }
  @include c('schedule-item') {
    margin-bottom: 10px;
+    font-size: 12px;
+  }
+  @include c('schedule-item:first-child') {
+    .obear-schedule-left {
+      border-radius: 5px 0 0 0;
+    }
  }
  @include c('schedule-row') {
-    height:100px;
+    min-height:100px;
    background-color:white;
+    display: flex;
+    flex-wrap: wrap;
  }
  @include c('schedule-left') {
    background-color: #FF6A6A;
-    height:100%;
+    min-height: 100%;
-    display: flex;
+    padding: 10px 15px 6px;
-    flex-direction: column;
+    > .el-row {
-    justify-content: space-around;
+      > .el-col {
-    padding: 5px 0 5px 0;
+        margin-bottom: 4px;
-    div {
+      }
-      margin-left:10px;
    }
-    div:first-child {
+    .el-row div:first-child, .el-row div:first-child a{
      color: white;
    }
    span {
-      display:inline-block;
+      display: inline-block;
-      padding-left:5px;
+      padding-left: 5px;
    }
    @include e('private') {
      display: inline-block;
-      // border: 1px solid black;
      padding-right: 5px;
      border-radius:5px;
      width:40px;
@@ -160,7 +176,35 @@ export default {
  }
  @include c('schedule-right') {
    height:100%;
-    display: flex;
+    padding: 10px 15px 6px;
+    > .el-row {
+      > .el-col {
+        margin-bottom: 4px;
+        .el-button {
+          margin: 0 2px;
+          padding: 7px;
+        }
+        .date-time {
+          color: #649FD7;
+        }
+      }
+    }
+    .badge {
+      border-radius: 2px;
+      color: #333744;
+      background: #ffffff;
+      vertical-align: baseline;
+      display: inline;
+      padding: 2px 6px;
+    }
+    span.badge-unread {
+      &:hover {
+        border-color: #de321d
+      }
+      color: #fff;
+      background-color: #e54c3a;
+      border-color: #a32516
+    }y: flex;
    @include e('item') {
      display: flex;
      flex-direction: column;