Base Login

components/datatable/InputNote.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="hyperlink" @click="open()" v-if="note">{{ note }}</div>
+    <div class="inputshow" style="min-height: 20px;"  v-else>
+      <span class="material-symbols-outlined fs-12 is-clickable inputhide" @click="open()">edit</span>
+    </div>
+<Modal @close="showmodal=undefined" v-bind="showmodal" @changenote="changeNote" v-if="showmodal" />
+</div>
+</template>
+<script>
+export default {
+  props: ['pagename', 'row', 'field'],
+  data() {
+    return {
+      showmodal: undefined,
+      note: undefined
+    }
+  },
+  created() {
+    if(this.row[this.field.name]) this.note = this.row[this.field.name]
+  },
+  methods: {
+    open() {
+      let title = this.$stripHtml(this.field.label)
+      title = title.toLowerCase().indexOf('nhập')>=0? title : `Nhập ${title}` 
+      this.showmodal = {component: 'datatable/Note', vbind: {note: this.note}, title: title, width: '500px', height: '200px'}
+    },
+    changeNote(data) {
+      this.note = data.note
+      let copy = this.$copy(this.$store.state[this.pagename])
+      let idx = this.$findIndex(copy.data, {stock_code: this.row.stock_code})
+      let copyRow = this.$copy(this.row)
+      copyRow[this.field.name] = this.note
+      copy.data[idx] = copyRow
+      this.$store.commit("updateState", {name: this.pagename, key: "update", data: {data: copy.data}})
+      this.showmodal = undefined
+      let datainput = copy.setting.input || {}
+      let f = datainput[this.row.stock_code] || {}
+      this.note? f[this.field.name] = this.note : delete f[this.field.name]
+      Object.keys(f).length>0? datainput[this.row.stock_code] = f : delete datainput[this.row.stock_code]
+      copy.setting.input = Object.keys(datainput).length>0? datainput : null
+      this.$store.commit("updateState", {name: this.pagename, key: "setting", data: copy.setting})
+    }
+  }
+}
+</script>
+<style>
+.inputhide {
+  display: none;
+  cursor: pointer;
+  font-size: 12px;
+}
+.inputshow:hover .inputhide {
+  display: block;
+}
+</style>