优化

src/views/kpi/assessment/performance/components/pinglun.vue

@@ -0,0 +1,26 @@
+<!--  -->
+<template>
+  <div>
+    Pinglun
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () { },
+  mounted () { },
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='' scoped>
+</style>

src/views/kpi/assessment/performance/components/process.vue

@@ -1,43 +1,140 @@
 <!--  -->
 <template>
-  <div class="drawer">
+  <div class="drawer commonFont">
     <el-drawer title="任务详情"
                :visible.sync="drawer"
                direction="btt"
                :before-close="handleClose">
       <div class="drawer-content">
-        <div style="height:300px;">pppp</div>
+        <div class="drawer-content-left">
-        <div style="height:300px;">pppp</div>
+          <div class="drawer-content-left-jiaoyi">
-
+            <div class="title">
-        <div style="height:300px;">pppp</div>
+              <span>交易量</span>
-        <div style="height:300px;">pppp</div>
+            </div>
-        <div style="height:300px;">pppp</div>
+            <div class="process">
-        <div style="height:300px;">pppp</div>
+              <span>
-        <div style="height:300px;">pppp</div>
+                <span>整体进度：</span>
-        <div style="height:300px;">pppp</div>
+              </span>
-        <div style="height:300px;">pppp</div>
+              <el-progress :percentage="50"></el-progress>
-
+            </div>
+          </div>
+          <div class="drawer-content-left-title">
+            <div> 关键结果（3）</div>
+            <div>
+              <i style="color:#409EFF;"
+                 class="el-icon-plus"></i>
+              <el-button @click="handleAddTask"
+                         type="text">添加</el-button>
+            </div>
+          </div>
+          <div v-for="i in 10"
+               class="boderAndRadius drawer-content-left-content">
+            ss
+          </div>
+        </div>
+        <div class="drawer-content-right">
+          <div style="padding: 0 20px;">
+            <el-tabs v-model="activeName"
+                     @tab-click="handleClick">
+              <el-tab-pane label="评论"
+                           name="1">
+              </el-tab-pane>
+              <el-tab-pane label="记录"
+                           name="2"></el-tab-pane>
+            </el-tabs>
+          </div>
+          <div v-if="activeName==='1'"
+               class="drawer-content-right-item pinglun">
+            <div class="pinglun-top">
+              <pinglun />
+            </div>
+            <div class="pinglun-bottom">
+              <el-input type="textarea"
+                        :resize='false'
+                        v-model="form.desc"></el-input>
+              <el-button size="small"
+                         type="primary">发送</el-button>
+            </div>
+          </div>
+          <div v-if="activeName==='2'"
+               class="drawer-content-right-item jilu">
+            记录ss
+          </div>
+        </div>
       </div>
     </el-drawer>
+    <el-dialog :title="title"
+               :visible.sync="dialogFormVisible">
+      <el-form :model="form"
+               :rules="formRules">
+        <el-form-item prop="name"
+                      label='任务名称'>
+          <el-input clearable
+                    size="small"
+                    placeholder="请输入任务名称"
+                    v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="任务进度"
+                      prop="weight">
+          <el-input size="small"
+                    @blur="$handleBlur('form.process')"
+                    @input.native="$handleInputInt('form.process')"
+                    v-model="form.process">
+            <template slot="append">%</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer"
+           class="dialog-footer">
+        <el-button size="small"
+                   @click="dialogFormVisible = false">取 消</el-button>
+        <el-button size="small"
+                   type="primary"
+                   @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import pinglun from './pinglun.vue'
 export default {
   props: {
     drawer: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
   data () {
     return {
+      activeName: '1',
+      formRules: {
+        name: [{
+          required: true,
+          message: '请输入任务名称',
+          trigger: 'blur'
+        }
+        ],
+      },
+      form: {
+        name: '',
+        process: '0'
+      },
+      dialogFormVisible: false,
+      title: '添加任务'
     }
   },
+  components: { pinglun },
   computed: {},
   beforeMount () { },
   mounted () { },
   methods: {
+    handleClick (tab, event) {
+      console.log(tab, event);
+    },
+    handleAddTask () {
+      this.dialogFormVisible = true
+    },
     handleClose () {
       this.$emit("update:drawer", false)
     }
@@ -63,7 +160,87 @@ export default {
 <style lang='less'>
 .drawer {
   &-content {
-    padding: 20px 16px;
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    background: #fafafa;
+    > div {
+      width: 50%;
+      box-sizing: border-box;
+      overflow: auto;
+    }
+    &-left {
+      padding: 20px 20px 0;
+      .img {
+        width: 20px;
+        height: 20px;
+      }
+      border-right: 1px solid #666666;
+      &-jiaoyi {
+        .title {
+          font-size: 16px;
+          margin-bottom: 10px;
+        }
+        .process {
+          padding: 0 0 0 20px;
+          display: flex;
+          align-items: center;
+          // width: %;
+          .el-progress {
+            width: 400px;
+          }
+        }
+      }
+      &-title {
+        margin: 10px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 16px;
+      }
+      &-content {
+        padding: 20px;
+        margin-bottom: 10px;
+      }
+    }
+    &-right {
+      display: flex;
+      flex-direction: column;
+      &-item {
+        flex: 1 0 auto;
+        overflow: auto;
+      }
+      .pinglun {
+        display: flex;
+        flex-direction: column;
+        &-top {
+          flex: 1 0 auto;
+          padding: 0 20px;
+        }
+        &-bottom {
+          width: 100%;
+          height: 60px;
+          border-top: 1px solid @borderColor;
+          display: flex;
+          background: #fff;
+          align-content: center;
+          justify-content: space-between;
+          padding: 6px 4px;
+          textarea {
+            resize: none;
+            height: 46px;
+            background: #f6f6f6;
+          }
+          .el-button--small {
+            height: 46px;
+            margin: 0 0 0 6px;
+          }
+        }
+      }
+      .jilu {
+        padding: 0 20px;
+      }
+    }
   }
 }
 </style>

src/views/kpi/assessment/performance/components/table.vue

@@ -215,7 +215,7 @@ export default {
   },
   data () {
     return {
-      drawer: false,
+      drawer: true,
       loadingTi: false,
       loadingZan: false,
       input: '',