05201722lhj成本提示

src/components/Finance/Cost.vue

@@ -312,18 +312,15 @@
                             </div>
                             <div v-else-if="item.width == 100">
                                 <div v-if="item.label == 'ITIN'">
-                                    <el-input type="textarea" @input="capslk(scope.row[item.prop], scope.$index,)"
+                                    <el-input type="textarea" @input="capslk(scope.row[item.prop], scope.$index)"
                                         :rows="6" placeholder="请输入内容" v-model="scope.row[item.prop]"></el-input>
                                 </div>
-                                <div v-else-if="item.label == 'ACCO N'">
-                                    <el-input style="position: relative;" type="textarea" :rows="6" placeholder="请输入内容"
+                                <div class="accon-box" v-else-if="item.label == 'ACCO N'">
+                                    <el-input @focus="acconinput(scope.row[item.prop], scope.$index)" @blur="acconblur(scope.$index)" @input="acconinput(scope.row[item.prop], scope.$index)" style="position: relative;" type="textarea" :rows="6" placeholder="请输入内容"
                                         v-model="scope.row[item.prop]"></el-input>
-                                    <!-- <div class="accon-ul">
-                                        <div class="accon-li">asas</div>
-                                        <div class="accon-li">asas</div>
-                                        <div class="accon-li">asas</div>
-                                        <div class="accon-li">asas</div>
-                                    </div> -->
+                                    <div class="accon-ul">
+                                        <div @click="acconclick(item,scope.$index)" v-for="(item,index) in acconarrs" :key="index" class="accon-li">{{item}}</div>
+                                    </div>
                                 </div>
                                 <div v-else>
                                     <el-input type="textarea" :rows="6" placeholder="请输入内容"
@@ -765,6 +762,7 @@
     </div>
 </template>
 <script>
+import { elementMatches } from '@fullcalendar/core/internal';
 
 export default {
     data() {
@@ -2644,6 +2642,8 @@ export default {
                 }
             ],
             autoSave: null,
+            acconarr:[],
+            acconarrs:[],
         };
     },
     watch: {
@@ -2685,6 +2685,31 @@ export default {
         capslk(val, index) {
             this.tableData[index].itin = val.toUpperCase()
         },
+        acconblur(index){
+            setTimeout(() => { 
+                document.querySelectorAll('.accon-ul')[index].classList.remove('accons-ul')
+            },150)
+        },
+        acconinput(val, index){
+            this.acconarr=[];
+            this.acconarrs=[];
+            console.log(val);
+            console.log(index);
+            for(var i=0;i<this.tableData.length;i++){
+                this.acconarr.push(this.tableData[i].accon)
+            }
+            for(var j=0;j<this.acconarr.length;j++){
+                if(this.acconarr[j].includes(val)){
+                    this.acconarrs.push(this.acconarr[j])
+                } 
+            }
+            this.acconarrs=Array.from(new Set(this.acconarrs));
+            console.log(this.acconarrs)
+            document.querySelectorAll('.accon-ul')[index].classList.add('accons-ul')
+        },
+        acconclick(val,index){
+            this.tableData[index].accon=val;
+        },
         getSummaries(param) {
             var that = this;
             //console.log(param)
@@ -5783,5 +5808,19 @@ export default {
     z-index: 444;
     background-color: #fff;
     border-radius: 5px;
+    display: none;
+}
+.accon-box .accons-ul{
+    display: inline-block;
+}
+.accon-li{
+    padding: 10px 5px;
+    text-align: left;
+}
+.accon-li:hover{
+    background-color: #0001;
+}
+.accon-ul:last-child{
+    bottom: 15px;
 }
 </style>