web/app/components/parameter/ImportSetting.vue

<template>
  <div class="columns">
    <div class="column is-3">
      <div class="field">
  <label class="label">Code</label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="current.code">
  </div>
</div>
<div class="field mt-4">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="current.name">
  </div>
</div>
<div class="field mt-4">
  <label class="label">Api</label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="current.api">
  </div>
</div>
  <div class="mt-5 py-2 border-bottom">
    <a @click="updateFromModel()">Thêm cài đặt cột từ Model</a>
  </div>
  <div class="py-2 border-bottom">
    <a @click="createUserSetting()">Tạo thiết lập (user setting)</a>
  </div>
  <div class="buttons mt-5">
    <button class="button is-primary" @click="saveData()">Lưu lại</button>
  </div>
  </div>
  <div class="column is-5">
    <DataTable v-bind="{pagename: pagename1}" @delete="remove" @open="showAttr()" v-if="pagedata1" />
  </div>
  <div class="column is-4">
    <DataTable v-bind="{pagename: pagename2}" v-if="pagedata2" />
  </div>
</div>
  <Modal @close="showmodal=undefined" @update="updateAttr" v-bind="showmodal" v-if="showmodal" />
</template>
<script>
export default {
  props: ['row'],
  data() {
    return {
      data: [],
      current: {},
      showmodal: undefined,
      report: undefined,
      setting: {},
      pagename: 'page0',
      pagename1: 'page1',
      pagename2: 'page2',
      pagename3: 'page3'
    }
  },
  async created() {
    let conn1 = this.$findapi('usersetting')
    conn1.params.filter = {name__in: ['import-setting', 'model-fields']}
    let rs = await this.$getapi([conn1])
    let obj = this.$find(rs, {name: 'usersetting'})
    let found = this.$find(obj.data.rows, {name: 'import-setting'})
    this.pagedata1 = this.$getpage()
    this.$setpage(this.pagename1, found)
    this.pagedata2 = this.$getpage()
    found = this.$find(obj.data.rows, {name: 'model-fields'})
    this.$setpage(this.pagename2, found)
    this.doClick(this.row)
  },
  computed: {
    pagedata1: {
      get: function() {return this.$store[this.pagename1]},
      set: function(val) {this.$store.commit(this.pagename1, val)}
    },
    pagedata2: {
      get: function() {return this.$store[this.pagename2]},
      set: function(val) {this.$store.commit(this.pagename2, val)}
    },
    pagedata3: {
      get: function() {return this.$store[this.pagename3]},
      set: function(val) {this.$store.commit(this.pagename3, val)}
    }
  },
  methods: {
    updateAttr(v) {
      this.current.detail = v
      this.showSetting()
      this.showmodal = undefined
    },
    createUserSetting() {
      this.pagedata3 = this.$getpage()
      let fields = []
      let arr = ['AutoField', 'ForeignKey', 'FloatField', 'IntegerField']
      this.pagedata2.data.map(v=>{
        let field = this.$createField(v.name, v.name, arr.findIndex(x=>x==v.datatype)>=0? 'number' : 'string', true, true)
        fields.push(field)
      })
      this.$store.commit(this.pagename3, {update: {'fields': fields}})
      this.showmodal = {component: 'menu/MenuSave', title: 'Lưu thiết lập', width: '600px', height: '300px',
      vbind: {pagename: this.pagename3, classify: 3}}
    },
    remove(v) {
      let copy = this.$copy(this.current.detail)
      delete copy[v.key]
      this.current.detail = copy
      this.doClick(this.current)
    },
    async insertData() {
      let copy = this.$copy(this.current)
      copy.id = undefined
      let rs = await this.$insertrow('importsetting', copy, undefined, this.pagename)
    },
    async saveData() {
      if(!this.row) return this.insertData()
      let rs = await this.$updateapi('importsetting', this.current, undefined, this.pagename)
    },
    updateFromModel() {
      let filter = this.$filter(this.pagedata2.data, {datatype: ['FloatField', 'IntegerField']})
      let copy = this.$copy(this.current.detail)
      filter.map(v=>{
        copy[v.name] = {type: 'number', empty: v.null? 'yes' : 'no'}
      })
      this.current.detail = copy
      this.showSetting()
    },
    showAttr() {
      this.showmodal = {component: 'datatable/FieldAttribute', width: '40%', height: '300px', title: 'Danh sách thuộc tính', vbind: {field: this.current.detail}}
    },
    async doClick(v) {
      this.current = this.$copy(v)
      this.showSetting()
      let found = this.$findapi(v.api)
      let conn = this.$findapi('modelfields')
      conn.url += found.url.replace('data/', '')
      let rs = await this.$getapi([conn])
      let copy = this.$copy(this.pagedata2)
      copy.update = {data: rs[0].data}
      this.pagedata2 = copy
    },
    showSetting() {
      let arr = []
      let i = 0
      for(let key in this.current.detail) {
        i += 1
        arr.push({id: i, key: key, value: this.current.detail[key], text: JSON.stringify(this.current.detail[key])})
      }
      let copy = this.$copy(this.pagedata1)
      copy.update = {data: arr}
      this.pagedata1 = copy
    }
  }
}
</script>