editableCell.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="myedit">
  3. <div class="editable-cell">
  4. <div v-if="editable" class="editable-cell-input-wrapper">
  5. <a-input v-model="value" @blur="blurChange" @change="handleChange" @pressEnter="check" /><a-icon
  6. type="check"
  7. class="editable-cell-icon-check"
  8. @click="check"
  9. />
  10. </div>
  11. <div v-else class="editable-cell-text-wrapper">
  12. {{ value*1? `日预算:${value*1}` :value }}
  13. <a-icon type="edit" class="editable-cell-icon" @click="edit" />
  14. </div>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. props: ["text",'slotName'],
  21. data() {
  22. return {
  23. value: this.text,
  24. editable: false,
  25. };
  26. },
  27. watch:{
  28. text:{
  29. handler(n,o){
  30. this.value=n
  31. },
  32. deep:true
  33. }
  34. },
  35. methods: {
  36. blurChange(e) {
  37. console.log(e)
  38. const value = e.target.value;
  39. if(this.slotName=='groupBudget'){
  40. if(this.value*1){
  41. if(value*1 && value*1>300 &&value*1<9999999.99){
  42. this.value = value;
  43. }else{
  44. this.$message.error('请输入300-9999999.99的数')
  45. }
  46. }else{
  47. this.value='不限'
  48. }
  49. }else if(this.slotName=='bid'){
  50. if(this.value*1){
  51. if(value*1 && value*1>0.1 &&value*1<9999999.99){
  52. this.value = value;
  53. }else{
  54. this.$message.error('请输入0.1-9999999.99的数')
  55. }
  56. }else{
  57. this.value='不限'
  58. }
  59. }
  60. },
  61. handleChange(e){
  62. console.log(e)
  63. },
  64. check() {
  65. this.editable = false;
  66. this.$emit('change', this.value);
  67. },
  68. edit() {
  69. this.editable = true;
  70. },
  71. },
  72. }
  73. </script>
  74. <style lang="scss" scoped>
  75. .myedit{
  76. .editable-cell {
  77. position: relative;
  78. }
  79. .editable-cell-input-wrapper,
  80. .editable-cell-text-wrapper {
  81. padding-right: 24px;
  82. }
  83. .editable-cell-text-wrapper {
  84. padding: 5px 24px 5px 5px;
  85. }
  86. .editable-cell-icon,
  87. .editable-cell-icon-check {
  88. position: absolute;
  89. right: 0;
  90. top: 6px;
  91. width: 20px;
  92. cursor: pointer;
  93. }
  94. .editable-cell-icon {
  95. line-height: 18px;
  96. display: none;
  97. }
  98. .editable-cell-icon-check {
  99. line-height: 28px;
  100. }
  101. .editable-cell:hover .editable-cell-icon {
  102. display: inline-block;
  103. }
  104. .editable-cell-icon:hover,
  105. .editable-cell-icon-check:hover {
  106. color: #108ee9;
  107. }
  108. .editable-add-btn {
  109. margin-bottom: 8px;
  110. }
  111. }
  112. </style>