Base Login

components/DataView.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <DataTable @open="open" @insert="insert" @edit="edit" @delete="remove" @opensetting="openSetting" v-bind="{pagename: vpagename}" 
+    @dataevent="dataEvent" @company="openCompany" v-if="pagedata" />
+    <Modal @close="comp=undefined" 
+    v-bind="{component: comp, width: width || '40%', height: height || '300px', vbind: vbind1}" v-if="comp"></Modal>
+  </div>
+</template>
+<script>
+export default {
+  props: ['setting', 'api', 'filter', 'component', 'pagename', 'width', 'height', 'params', 'data', 'vbind'],
+  data() {
+    return {
+      comp: undefined,
+      current: undefined,
+      chart: undefined,
+      vbind1: {},
+      vpagename: this.pagename? this.pagename : this.$findpage()
+    }
+  },
+  created() {
+    this.pagedata = this.$getpage()
+    setTimeout(()=>this.getApi(), 10)
+  },
+  beforeDestroy() {
+    if(!this.pagename && this.vpagename) this.$clearpage(this.vpagename)
+  },
+  watch: {
+    dialog: function(newVal) {
+      if(newVal? newVal.confirm : false) this.delete()
+    }
+  },
+  computed: {
+    pagedata: {
+      get: function() {return this.$store.state[this.vpagename]},
+      set: function(val) {this.$store.commit('updateStore', {name: this.vpagename, data: val})}
+    },
+    currentsetting: {
+      get: function() {return this.$store.state.currentsetting},
+      set: function(val) {this.$store.commit("updateCurrentSetting", {currentsetting: val})}
+    },
+    dialog: {
+      get: function() {return this.$store.state['dialog']},
+      set: function(val) {this.$store.commit('updateStore', {name: 'dialog', data: val})}
+    },
+    settings: {
+      get: function() {return this.$store.state['settings']},
+      set: function(val) {this.$store.commit('updateStore', {name: 'settings', data: val})}
+    }
+  },
+  methods: {
+    async getApi() {
+      let connlist = []
+      let row = this.setting.id? this.$copy(this.setting) : undefined
+      if(!row) {
+        let found = this.$find(this.settings, this.setting>0? {id: this.setting} : {name: this.setting})
+        if(found) row = this.$copy(found)
+      }
+      if(!row) {
+        let conn = this.$findapi('usersetting')
+        conn.params.filter = this.setting>0? {id: this.setting} : {name: this.setting}
+        connlist.push(conn)
+      }
+      let data = this.data? this.$copy(this.data) : undefined 
+      if(!data) {
+        let conn1 = this.$findapi(this.api)
+        if(this.filter) conn1.params.filter = this.filter
+        if(this.params) conn1.params = this.params
+        connlist.push(conn1)
+      }
+      let ele = undefined
+      if(connlist.length>0) {
+        let rs = await this.$getapi(connlist)
+        ele = this.$find(rs, {name: 'usersetting'})
+        if(ele) {
+          row = this.$copy(ele.data.rows[0])
+          let copy = this.$copy(this.settings)
+          copy.push(row)
+          this.settings = copy
+        }
+        let obj = this.$find(rs, {name: this.api})
+        if(obj) data = this.$copy(obj.data.rows)
+      }
+      this.$setpage(this.vpagename, row, ele)
+      data = this.$formatArray(data, this.pagedata.fields)
+      this.$store.commit('updateState', {name: this.vpagename, key: 'update', data: {data: data}})
+    },
+    remove(v) {
+      this,this.current = v
+      this.$dialog({width: '500px', title: 'Xác nhận', 
+      content: `Bạn có chắc muốn xoá bản ghi ${v.id}`, type: 'is-primary', progress:true, duration: 10, askconfirm: true})
+    },
+    async delete() {
+      await this.$deleterow(this.api, this.current.id)
+      this.$emit('close')
+    },
+    dataEvent(row) {
+      this.$emit('dataevent', row)
+    },
+    openSetting(v) {
+      this.$emit('opensetting', v)
+    },
+    open(v) {
+      this.$emit('open', v)
+      this.$emit('modalevent', {name: 'open', data: v})
+    },
+    openCompany(v) {
+      this.$emit('company', v)
+      this.$emit('modalevent', {name: 'company', data: v})
+    },
+    insert() {
+      this.vbind1 = {vpagename: this.vpagename, api: this.api}
+      this.comp = this.$copy(this.component)
+    },
+    edit(v) {
+      this.vbind1 = {vpagename: this.vpagename, api: this.api, row: v}
+      if(this.vbind) {
+        for (const [key, value] of Object.entries(this.vbind)) {
+          this.vbind1[key] = value.indexOf('$')===0? v[value.replace('$', '')] : value
+        }
+      }
+      this.comp = this.$copy(this.component)
+    }
+  }
+}
+</script>