优化
This commit is contained in:
xiongchengqiang
parent
4543ccfc18
commit
c50298aba6
26
src/views/kpi/assessment/performance/components/pinglun.vue
Normal file
26
src/views/kpi/assessment/performance/components/pinglun.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
Pinglun
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@ -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 style="height:300px;">pppp</div>
|
||||
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
<div style="height:300px;">pppp</div>
|
||||
|
||||
<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: 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>
|
||||
|
||||
@ -215,7 +215,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
drawer: false,
|
||||
drawer: true,
|
||||
loadingTi: false,
|
||||
loadingZan: false,
|
||||
input: '',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user