【前端】双击编辑,input select date input-number 富文本

70 阅读1分钟

使用

<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>