使用
<dblInput v-model="detailInfo.background" compType="textarea" @updateField="updateField('background',$event)" :haveAuth="getHaveAuth()"></dblInput>
<dblSelect arrayType='labelArray' @updateField="updateField('pur_type',$event)" v-model="detailInfo.pur_type" :list="contractTypes" :haveAuth="getHaveAuth()"></dblSelect>
methods: {
updateField: _.debounce(async function (field, value) {
const params = {
[field]: value,
key: this.detailInfo.key
}
await this.$api.projectManageApi['projectUpdate']({ projectForm: params })
this.projectDetailOnSearch()
}, 500)
},
1.dblInput 组件
<!--
* @Description : 双击编辑 input input-number
* @Author : wxy
* @Date : 2023-11-02 10:00:43
* @LastEditTime : 2023-11-14 14:47:43
* @LastEditors : wxy
* @FilePath : \luban-front1\src\views\projectManage\projectDetailManage\projectDetailMainContent\components\dblInput.vue
-->
<template>
<div>
<el-input-number v-if="compType === 'inputNumber'" v-clickoutside="()=>setShow(false)" v-show="isShow" style="width: 100%;" :controls="false" @change="inputNumberChange" v-model="inputValue" :min="0"></el-input-number>
<el-input @change="inputChange" v-if="compType === 'textarea'" type="textarea" show-word-limit maxlength="999" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model.lazy="inputValue" v-clickoutside="()=>setShow(false)" v-show="isShow">
</el-input>
<el-input @change="inputChange" v-if="compType==='input'" v-clickoutside="()=>setShow(false)" v-show="isShow" v-model.lazy="inputValue"></el-input>
<div :class="[{'pointer':haveAuth},'empty-width']" v-show="!isShow" @dblclick="setShow(true)">{{inputValue}}</div>
</div>
</template>
<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
import _ from 'lodash'
export default {
name: 'DblInput',
components: {},
directives: {
Clickoutside
},
props: {
value: {
type: String | Number,
},
haveAuth: {
default: false,
type: Boolean
},
compType: {
type: String,
default: 'input'
}
},
data () {
return {
isShow: false,
inputValue: ''
}
},
computed: {
},
watch: {
value: {
handler (val) {
this.inputValue = val
},
immediate: true
}
},
created () {
},
mounted () {
},
methods: {
inputChange (val) {
this.$emit('updateField', val)
this.setShow(false)
},
inputNumberChange (val) {
if (val === undefined) {
this.inputValue = 0
}
this.$emit('updateField', val)
this.setShow(false)
},
setShow (flag) {
if (!this.haveAuth) return
this.isShow = flag
},
},
}
</script>
<style lang='scss' scoped>
.empty-width {
min-height: 35px;
}
</style>
2.dblSelect组件
<!--
* @Description : 双击编辑 select
* @Author : wxy
* @Date : 2023-11-02 10:00:43
* @LastEditTime : 2023-11-10 10:11:13
* @LastEditors : wxy
* @FilePath : \luban-front1\src\views\projectManage\projectDetailManage\projectDetailMainContent\components\dblSelect.vue
-->
<template>
<div v-clickoutside="()=>setShow(false)">
<el-select v-model="inputValue" filterable @change="selectChange" @blur="setShow(false)" v-show="isShow">
<template v-if="arrayType == 'labelArray'">
<el-option v-for="(item, index) in list" :key="index" :value="item.value" :label="item.label">
</el-option>
</template>
<template v-else>
<el-option v-for="(item, index) in list" :key="index" :value="item" :label="item">
</el-option>
</template>
</el-select>
<div :class="[{'pointer':haveAuth},{'empty-width':(!inputValue && inputValue!== 0)}]" v-show="!isShow" @dblclick="setShow(true)">
<span v-if="arrayType == 'labelArray'">{{getLabelByArray(list,inputValue)}}</span>
<span v-else>{{inputValue}}</span>
</div>
</div>
</template>
<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
import _ from 'lodash'
export default {
name: 'DblSelect',
components: {},
directives: {
Clickoutside
},
props: {
value: {
type: String | Number,
default: ''
},
haveAuth: {
default: false,
type: Boolean
},
list: {
type: Array,
default: () => []
},
arrayType: {
type: String,
default: ''
}
},
data () {
return {
isShow: false
}
},
computed: {
inputValue: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
}
},
watch: {},
created () {
},
mounted () {
},
methods: {
selectChange (val) {
this.setShow(false)
this.$emit('updateField', val)
},
setShow (flag) {
if (!this.haveAuth) return
this.isShow = flag
},
},
}
</script>
<style lang='scss' scoped>
.empty-width {
min-height: 35px;
}
</style>
3. dblDate组件
<!--
* @Description : 双击编辑 日期
* @Author : wxy
* @Date : 2023-11-02 10:50:29
* @LastEditTime : 2023-11-06 17:20:54
* @LastEditors : wxy
* @FilePath : \luban-front3\src\views\projectManage\projectDetailManage\projectDetailMainContent\components\dblDate.vue
-->
<template>
<div>
<span v-if="inputValue" class="issue-status text" @dblclick="dblclick">{{ inputValue }}</span>
<el-date-picker @change="emitChange" :disabled="!haveAuth" value-format="yyyy-MM-dd" ref="datePicker" class="date-picker" v-model="inputValue" style="border-color: #FFFFFF !important; " type="date" placeholder="选择时间">
</el-date-picker>
</div>
</template>
<script>
import _ from 'lodash'
export default {
name: "DateComp",
props: {
value: {
type: String,
default: ''
},
haveAuth: {
default: false,
type: Boolean
},
},
data () {
return {
}
},
computed: {
inputValue: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
}
},
methods: {
dblclick () {
if (!this.haveAuth) return
this.$refs.datePicker.showPicker()
},
emitChange (val) {
this.$emit('updateField', val)
}
}
}
</script>
<style lang="scss" scoped>
.date-picker {
float: left;
opacity: 0;
height: 0;
}
.issue-status {
display: flex;
background-color: #ffffff;
border-radius: 6px;
width: 100%;
.issue-status-content {
color: #ffffff;
margin: 4px;
}
.desc-box {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 8px;
& :first-child {
margin-bottom: 5px;
}
.text {
color: #000;
}
}
.button-show-circle {
border: 1px dotted #aaaaaa;
font-size: 16px;
:hover {
}
}
.svg-circle {
font-size: 18px;
color: #aaaaaa;
}
}
.issue-status--dropdown-item {
width: 100%;
margin-top: 12px;
line-height: 24px;
text-align: center;
.button {
width: 110px;
text-align: center;
color: #ffffff;
.svg-local {
font-size: 14px;
}
}
}
</style>