Commit 95a0f181 authored by jingnan's avatar jingnan 👀

问题进展组件开发

parent 9b5607e1
export default {
props: {},
layoutConfigData: [
{
title: '高级组件配置',
data: [
{
key: 'bindValue',
title: '绑定属性',
component: {
defaultValue: '',
name: 'el-input'
}
}
]
}
],
data() {
return {
}
},
created() {
},
computed: {
},
methods: {
}
}
<template>
<div class="problemProgressCom">
<el-form ref="form" class="processForm" :inline="true" :model="formData" label-width="40px">
<el-row v-for="(item, index) in formData.progresss" :key="index">
<el-col :span="5">
<el-form-item
label="日期"
:prop="'progresss.' + index + '.createTime'"
>
<!-- :rules="{
required: true, message: '该项必填', trigger: 'blur'
}" -->
<el-date-picker
v-model="item.createTime"
size="small"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
/>
</el-form-item>
</el-col>
<el-col :span="17">
<el-form-item
label="答复"
:prop="'progresss.' + index + '.progressItem'"
class="textareaItem"
>
<!-- :rules="[
{required: true, message: '该项必填', trigger: 'blur'},
]" -->
<el-input v-model="item.progressItem" autosize type="textarea" size="small" />
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item class="btn-box">
<span v-if="index+1 == formData.progresss.length" class="btn-item" title="新增" @click="addItem">
<img src="/icons/c-add.png" alt="">
</span>
<span v-if="index !== 0" class="btn-item" title="删除" @click.stop="() => deleteItem(data)">
<img src="/icons/c-creatbackups.png" alt="">
</span>
</el-form-item>
</el-col>
</el-row></el-form>
</div>
</template>
<script>
import config from './config'
import moment from 'moment'
export default {
componentName: '问题进展',
name: 'ProblemProgressCom', // name写在组件的最前方,自定义组件为必填
components: {},
mixins: [config],
props: {
itemObj: {
type: Object,
default: null
},
form: {
type: Object,
default: () => {}
},
middleForm: {
type: Object,
default: () => {}
},
value: {
type: [Number, String, Object, Array],
default: () => ''
}
},
data() {
return {
formData: {
progresss: [
{
createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
progressItem: '',
operator: 'ADD'
}
]
}
}
},
computed: {},
watch: {
value: {
immediate: true,
deep: true,
handler(v) {
if (v) {
// this.selVal = this.value
this.$set(this.formData, 'progresss', this.value)
}
}
},
formData: {
immediate: true,
deep: true,
handler() {
this.$emit('input', this.formData.progresss.map(item => {
if (item.id) {
item.operator = 'MODIFY'
} else {
item.operator = 'ADD'
}
return item
}))
}
}
},
created() {
// 初始化数据
},
methods: {
addItem() {
this.formData.progresss.push({
createTime: moment(new Date()).format('YYYY-MM-DD'),
progressItem: '',
operator: 'ADD'
})
},
deleteItem(item, index) {
this.formData.progresss.splice(index, 1)
},
changeVal() {
this.$emit('input', this.selVal)
}
}
}
</script>
<style lang='scss'>
.problemProgressCom{
.processForm{
width: 100%;
.el-form-item{
width: 100%;
.el-form-item__content{
width: calc(100% - 50px);
}
}
.btn-box{
width: 100%;
height: 100%;
margin-bottom: 0px;
.el-form-item__content{
width: 100%;
}
.btn-item {
display: inline-block;
padding: 4px;
width: 16px;
height: 16px;
img{
height: 100%;
width: 100%;
}
// line-height: 16px;
}
}
}
}
</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