优化

src/views/workbench/person/components/calenderDetail.vue

@@ -1,51 +1,75 @@
 <template>
   <article v-show="showDetail" ref="show-schedule-detail" class="show-schedule-detail">
     <template v-if="nowDetailData && nowDetailData.origin === 0">
-      <div class="detail-title"> <div v-if="nowDetailData.origin === 0" :class="nowDetailData.isScheduleLocked === 1 ? 'el-icon-lock': 'el-icon-unlock'" />【任务排期】{{ nowDetailData.bizName }}. {{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
-      <div class="detail-time item">
-        <div class="label">排期：</div>
-        <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
-      </div>
-      <div class="detail-people item"><div class="label">参与人：</div>
-        {{ nowDetailData.peopleObjectList.map(item=>item.name).join('，') }}
-      </div>
-      <div class="detail-needs item">
-        <div class="label">所属需求：</div>
-        {{ nowDetailData.requireNames | arrToString }}
-      </div>
-      <div class="detail-tasks item">
-        <div class="label">关联任务：</div>
-        {{ nowDetailData.taskNames | arrToString }}
-      </div>
-      <div v-if="nowDetailData.origin === 0" class="footer">
-        <div v-if="nowDetailData.isScheduleLocked === 0" class="cancel" @click="deleteSchedule">删除</div>
-        <div v-if="nowDetailData.isScheduleLocked === 0" class="edit" @click="editSchedule">编辑</div>
-      </div>
+      <el-container>
+        <el-aside width="50px">
+          <div class="el-icon-document icon-style-i" />
+        </el-aside>
+        <el-main style="padding: 0;">
+          <div class="detail-title"> <div v-if="nowDetailData.origin === 0" :class="nowDetailData.isScheduleLocked === 1 ? 'el-icon-lock': 'el-icon-unlock'" />【{{ nowDetailData.bizName }}】{{ nowDetailData.name }}{{ nowDetailData.desc ? `：${nowDetailData.desc}` : '' }}</div>
+          <div class="detail-time item">
+            <div class="label">排期：</div>
+            <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
+          </div>
+          <div class="detail-people item"><div class="label">参与人：</div>
+            {{ nowDetailData.peopleObjectList.map(item=>item.name).join('，') }}
+          </div>
+          <div class="detail-needs item">
+            <div class="label">所属需求：</div>
+            <div v-for="item in nowDetailData.requireList" :key="item.id">
+              <span class="blockSpan" @click="Jump('需求详情', item.id)">{{ item.name }}</span>
+            </div>
+            <!-- {{ nowDetailData.requireNames | arrToString }} -->
+          </div>
+          <div class="detail-tasks item">
+            <div class="label">关联任务：</div>
+            <div v-for="(item, index) in nowDetailData.taskList" :key="index">
+              <span class="blockSpan" @click="Jump('任务详情', item.id)">{{ item.name }}</span>
+              <span v-if="index < nowDetailData.taskList.length - 1"> , <br></span>
+            </div>
+            <!-- {{ nowDetailData.taskList | arrToString }} -->
+          </div>
+          <div v-if="nowDetailData.origin === 0" class="footer">
+            <div v-if="nowDetailData.isScheduleLocked === 0" class="cancel" @click="deleteSchedule">删除</div>
+            <div v-if="nowDetailData.isScheduleLocked === 0" class="edit" @click="editSchedule">编辑</div>
+          </div>
+        </el-main>
+      </el-container>
     </template>
     <template v-if="nowDetailData && nowDetailData.origin === 1">
-      <div class="detail-title">【日程】{{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
-      <div class="detail-time item">
-        <div class="label">排期：</div>
-        <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
-      </div>
-      <div class="detail-people item"><div class="label">参与人：</div>
-        {{ nowDetailData.peopleObject.name }}
-      </div>
-      <div class="detail-tasks item"><div class="label">日程描述：</div>{{ nowDetailData.desc }}</div>
-      <div class="footer">
-        <div class="cancel" @click="deleteSchedule">删除</div>
-        <div class="edit" @click="editSchedule">编辑</div>
-      </div>
+      <el-container>
+        <el-aside width="50px">
+          <div class="el-icon-date icon-style" />
+        </el-aside>
+        <el-main style="padding: 0;">
+          <div class="detail-title">{{ nowDetailData.desc ? `${nowDetailData.name}：` : nowDetailData.name }} {{ nowDetailData.desc }}</div>
+          <div class="detail-time item">
+            <div class="label">排期：</div>
+            <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
+          </div>
+          <div class="detail-people item"><div class="label">日程类型：</div>
+            {{ nowDetailData.typeName }}
+          </div>
+          <div class="detail-people item"><div class="label">参与人：</div>
+            {{ nowDetailData.peopleObject.name }}
+          </div>
+          <!-- <div class="detail-tasks item"><div class="label">日程描述：</div>{{ nowDetailData.desc }}</div> -->
+          <div class="footer">
+            <div class="cancel" @click="deleteSchedule">删除</div>
+            <div class="edit" @click="editSchedule">编辑</div>
+          </div>
+        </el-main>
+      </el-container>
     </template>
   </article>
 </template>
 <script>
 export default {
-  filters: {
-    arrToString(val) {
-      return Array.isArray(val) ? val.join(',') : val
-    }
-  },
+  // filters: {
+  //   arrToString(val) {
+  //     return Array.isArray(val) ? val.join(',') : val
+  //   }
+  // },
   props: {
     show: {
       type: Boolean,
@@ -114,6 +138,11 @@ export default {
         }
       }
     },
+    Jump(name, id) { // 详情页跳转
+      const newTab = this.$router.resolve({ name: name, query: { id: id }})
+      window.open(newTab.href, '_blank')
+    },
+
     editSchedule() {
       this.$emit('edit', this.nowDetailData)
       this.$emit('update:show', this.showDetail)
@@ -170,11 +199,34 @@ export default {
     .label {
       width: 25%;
       min-width: 80px;
-      text-align: right;
+      text-align: left;
       color: #666666;
       padding-right: 10px;
     }
   }
+  .icon-style {
+    border: 1px solid #61D3B8;
+    padding: 5px;
+    border-radius: 50%;
+    background: #61D3B8;
+    color: #fff;
+    font-size: 26px;
+  }
+
+  .icon-style-i {
+    border: 1px solid #409EFF;
+    padding: 5px;
+    border-radius: 50%;
+    background: #409EFF;
+    color: #fff;
+    font-size: 26px;
+  }
+
+.blockSpan {
+  color: #409EFF;
+  cursor: pointer;
+}
+
   .detail-title {
     color: #333333;
     font-size: 14px;
@@ -185,7 +237,7 @@ export default {
   }
   .footer {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     .cancel,.edit {
       cursor: pointer;