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

<!--  -->
<template>
  <div class="drawer commonFont">
    <el-drawer title="任务详情"
               :visible.sync="drawer"
               direction="btt"
               :before-close="handleClose">
      <div class="drawer-content">
        <div class="drawer-content-left">
          <div class="drawer-content-left-jiaoyi">
            <div class="title">
              <span>交易量</span>
            </div>
            <div class="process">
              <span>
                <span>整体进度：</span>
              </span>
              <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: 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)
    }
  },
  watch: {}

}

</script>
<style lang="less">
.el-drawer {
  border-radius: 12px 12px 0 0 !important;
  height: 80% !important;
  overflow: auto;
}
.el-drawer__header {
  margin: 0;
}
.el-drawer__body {
  overflow: auto;
}
</style>
<style lang='less'>
.drawer {
  &-content {
    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>