Commit 6032c0c7 authored by jingnan's avatar jingnan 👀

缺件信息维护组件定义

parent a016dfdd
<template>
<!-- <dee-dialog
v-if="visible"
title="缺件信息维护"
:dialog-visible.sync="visible"
width="40%"
> -->
<section class="chatBox-com">
<!-- <div class="header">
<h3>缺件信息维护</h3>
</div> -->
<div class="main">
<div class="talkshow">
<ul v-for="item in list" :key="item.id" class="atalk">
<li class="textLeft">
<img src="../../../icons/photo.jpg" alt="信息" class="img">
<span class="info">
<section class="top">
<span class="left">{{ item.name }}</span>
<span class="right">{{ item.time }}</span>
</section>
<strong>{{ item.message }}</strong>
</span>
</li>
<!-- <strong v-if="item.id===1"> :{{ item.name }}</strong> -->
</ul>
</div>
</div>
<!-- 发送消息 -->
<div class="sendbox">
<el-input
v-model.trim="wordone"
class="inputword"
type="textarea"
maxlength="125"
show-word-limit
placeholder="请输入不超过255个字符"
:autosize="{ minRows: 1, maxRows:2 }"
resize="none"
clearable
@keyup.enter.native="sendmsg"
/>
<button class="btnsend" @click="sendmsg">添加</button>
<button class="btnClose" @click="closeMsgBox">关闭</button>
</div>
</section>
<!-- </dee-dialog> -->
</template>
<script>
import $ from 'jquery'
// import { addInformation, getInformation } from '@/api/requestOutStorageMatch.js'
export default {
data() {
return {
list: [],
wordone: '',
visible: false,
row: {}
}
},
watch: {
// 消息自动滚动到最低部
list() {
this.$nextTick(() => {
var h = $('.talkshow').innerHeight()
$('.main').scrollTop(h)
})
}
},
created() {
},
methods: {
// 缺件信息查询
infoInit() {
this.loading = true
// const params = {
// 'indices': [
// 'WrMaterialLackLog'
// ],
// 'pageFrom': 1,
// 'pageSize': 99999999,
// 'searchItems': {
// 'items': [
// {
// 'fieldName': 'wrMaterialLackId',
// 'operator': 'EQ',
// 'value': this.row.id
// }
// ],
// 'operator': 'AND'
// },
// 'sortItem': [
// {
// 'fieldName': 'modifyTime',
// 'sortOrder': 'asc'
// }
// ]
// }
// getInformation(params).then(res => {
// this.list = []
// res.items.content.map(item => {
// if (!item.message) return
// this.list.push({
// name: item.creator.userName,
// message: item.message,
// time: item.createTime
// })
// })
// }).catch(err => {
// console.log(err)
// }).finally(() => {
// this.loading = false
// })
},
// 缺件信息添加
sendmsg() {
if (this.wordone.trim().length) {
if (this.wordone.trim().length > 255) {
return this.$utils.showMessageWarning('输入内容过长,请重新输入')
}
this.loading = true
this.list.push({
name: 11,
message: '假数据,接口待定',
time: 11
})
// const params = {
// 'operator': 'ADD',
// 'subTypeName': 'WrMaterialLackLog',
// 'id': '',
// 'dxClassname': 'com.tf.mes.vo.schedule.WrMaterialLackLogVo',
// 'wrMaterialLackId': this.row.id,
// 'wrMaterialLackIdType': this.row.subTypeName,
// 'message': this.wordone
// }
// addInformation(params).then(res => {
// this.$utils.showMessageSuccess('添加成功')
// this.infoInit()
// }).catch(err => {
// console.log(err)
// }).finally(() => {
// this.wordone = ''
// this.loading = false
// }
// )
} else {
this.$utils.showMessageWarning('请输入内容后添加')
}
},
// 打开弹出框
open(row = {}) {
this.visible = true
this.list = []
this.wordone = ''
this.row = row
this.infoInit()
},
// 关闭弹框
closeMsgBox() {
this.wordone = ''
this.visible = false
}
}
}
</script>
<style lang="scss">
.chatBox-com{
width:100%;
height: calc(95vh - 160px);
overflow: hidden;
.talkshow li{
list-style: none;
position: relative;
padding: 5px;
margin-bottom: 10px;
.img{
position: absolute;
border-radius: 25px;
width: 50px;
height: 50px;
left: -10px;
top: 5px;
}
}
.talkshow li>span{
position: relative;
border-radius: 7px;
background-color: #a6e860;
margin-left: 50px;
padding: 6px 10px 8px 10px;
z-index: 1;
display: inline-block;
min-height: 50px;
background-color: rgb(230,249,255);
.top{
display: flex;
justify-content: space-between;
color: blue;
font-size: 15px;
}
strong{
line-height: 1.4;
}
}
.talkshow .textLeft span{
background-color: rgb(230,249,255);
}
.talkshow li.textLeft span:before{
content: "";
display: block;
width: 0;
height: 0;
border: 8px solid transparent;
border-right: 8px solid rgb(230,249,255);
position: absolute;
top: 20px;
left: -16px;
}
.main{
box-sizing: border-box;
height: 90%;
overflow: scroll;
font-size: 16px;
padding: 10px;
}
div::-webkit-scrollbar{
display: none
}
.atalk{
margin: 10px;
}
.atalk span{
display :inline-block;
padding: 3px 10px;
border-radius: 15px;
padding: 8px 5px;
}
.sendbox{
height: 60px;
width: 100%;
margin-top: 5px;
display: flex;
margin-left: -4px;
padding-left: 4px;
background-color: rgba(0,0,0,0.1);
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
}
.inputword{
outline: none;
width: 75%;
min-height: 36px;
text-indent: 12px;
.el-textarea__inner{
border-radius: 15px;
border: 1px solid #3a8ee6;
}
}
.btnsend,.btnClose {
line-height: 18px;
font-size: 18px;
color: #FFF;
padding-bottom: 4px;
outline: none;
width: 9%;
height: 35px;
border-radius : 15px;
margin-left: 2%;
background: #909399;
border: 1px solid #909399 ;
}
.btnsend{
border: 1px solid #409eff ;
background: url('../../../icons/send.jpg') no-repeat left top;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment