system/components/parameter/Common.vue

<template>
       <div class="columns is-multiline is-mobile mx-0">
        <div class="column is-1">
            <div class="field">
                  <label class="label has-text-left">ID<span class="has-text-danger ml-1">*</span></label>
            <div class="control">
                <input  class="input" type="text" v-model="record.id" disabled>
                </div> 
            </div>   
        </div>
        <div class="column is-3">
            <div class="field">
                  <label class="label has-text-left">Phân loại<span class="has-text-danger ml-1">*</span></label>
            <div class="control">
                <input  class="input" type="text" v-model="record.category">
                </div> 
            </div>   
        </div>
        <div class="column is-3">
            <div class="field">
                  <label class="label has-text-left">Phân lớp<span class="has-text-danger ml-1">*</span></label>
            <div class="control">
                <input  class="input" type="text" v-model="record.classify">
                </div> 
            </div>   
        </div>
        <div class="column is-3">
            <div class="field">
                  <label class="label has-text-left">Mã<span class="has-text-danger ml-1">*</span></label>
            <div class="control">
                <input  class="input" type="text" v-model="record.code">
                </div> 
            </div>   
        </div>        
          <div class="column is-2">
            <div class="field">
                  <label class="label has-text-left">Thứ tự</label>
            <div class="control">
                <input  class="input" type="text" v-model="record.index">
                </div> 
            </div>   
        </div>
          <div class="column is-12">
             <label class="label has-text-left">VI<span class="has-text-danger ml-1">*</span></label>
             <div class="field has-addons">
          <div class="control is-expanded">
          <textarea class="textarea" placeholder="" rows="3" v-model="record.vi"></textarea>
          </div>
          <div class="control ml-5">
            <a @click="openEditor()">
              <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 22}"></SvgIcon>
            </a>
          </div>
        </div>
        </div>
        <div class="column is-12">
             <label class="label has-text-left">EN<span class="has-text-danger ml-1">*</span></label>
             <div class="field has-addons">
          <div class="control is-expanded">
          <textarea class="textarea" placeholder="" rows="3" v-model="record.en"></textarea>
          </div>
          <div class="control ml-5">
            <a @click="openEditor()">
              <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 22}"></SvgIcon>
            </a>
          </div>
        </div>
        </div>     
        <div class="column is-6">
            <div class="field">
                  <label class="label has-text-left">Image</label>
            <div class="control">
                <input  class="input" type="text" v-model="record.image">
                </div> 
            </div>   
        </div>
        <div class="column is-6">
            <div class="field">
                  <label class="label has-text-left">Link</label>
            <div class="control">
                <input  class="input" type="text" v-model="record.link">
                </div> 
            </div>
        </div>
        <div class="column is-6">
          <label class="label has-text-left">Detail</label>
          <div class="field has-addons">
        <div class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.detail">
        </div>
        <div class="control">
          <button class="button" @click="editDetail('detail')">
            <span>
              <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 17}"></SvgIcon>
            </span>
          </button>
        </div>
        <div class="control">
          <button class="button" @click="copyDetail('detail')">
            Copy
          </button>
        </div>
        <div class="control">
          <button class="button" @click="pasteDetail('detail')">
            Paste
          </button>
        </div>
      </div>
        </div>
      <div class="column is-6">
          <label class="label has-text-left">Detail EN</label>
          <div class="field has-addons">
        <div class="control is-expanded">
          <input class="input" type="text" placeholder="" v-model="record.detail_en">
        </div>
        <div class="control">
          <button class="button" @click="editDetail('detail_en')">
            <span>
              <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 17}"></SvgIcon>
            </span>
          </button>
        </div>
        <div class="control">
          <button class="button" @click="copyDetail('detail_en')">
            Copy
          </button>
        </div>
        <div class="control">
          <button class="button" @click="pasteDetail('detail_en')">
            Paste
          </button>
        </div>
      </div>
        </div>  
      <div class="column is-12 pt-5">
        <a class="button is-primary has-text-white" @click="updateData()">Lưu lại</a>
        <a class="button is-dark has-text-white ml-5" @click="updateData(true)" v-if="record.id">Tạo mới</a>
    </div>
  </div>
  <Modal @close="showmodal=undefined" v-bind="showmodal" @texteditor="updateText" @update="updateAttr" v-if="showmodal"></Modal>
</template>
<script setup>
  const emit = defineEmits([])
  var props = defineProps({
    pagename: String,
    row: Object,
    api: String
  })
    const { $copy, $resetNull, $insertrow, $updaterow, $copyToClipboard, $empty } = useNuxtApp()
    var record = ref(props.row? $copy(props.row) : {})
    var showmodal = ref()
    var vapi = props.api
    var current
    var updateText = function(content) {
      record.value.vi = content
    }
    var openEditor = function() {
      showmodal.value = {component: 'common/TextEditor', vbind: {content: record.value.vi}, title: 'Text editor', width: '40%', height: '150px'}
    }
    var editDetail = function(attr) {
      current = attr
      let detail = record.value[attr]? record.value[attr] : {}
      showmodal.value = {component: 'datatable/FieldAttribute', vbind: {field: detail, close: true}, 
      title: 'Change attributes', width: '40%', height: '150px'}
    }
    var updateAttr = function(detail) {
      record.value[current] = detail
    }
    function copyDetail(attr) {
      if($empty(record.value[attr])) return
      let val = typeof record.value[attr]=='string'? record.value[attr] : JSON.stringify(record.value[attr])
      $copyToClipboard(val)
    }
    async function pasteDetail(attr) {
      let text = await navigator.clipboard.readText()
      if($empty(text)) return
      record.value[attr] = JSON.parse(text)
    }
    var updateData = async function(isNew) {
      let ele = record.value
      if(ele.create_time===null) ele.create_time = new Date()
      ele = $resetNull(ele)
      if(isNew) delete ele.id
      let result = ele.id? await  $updaterow(vapi, ele, undefined, props.pagename)
      : await $insertrow(vapi, ele, undefined, props.pagename)
      if(isNew) emit('close')
    }
</script>