264 lines
7.4 KiB
Vue
264 lines
7.4 KiB
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">Category<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">Classify<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">Code<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">Index</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-12">
|
|
<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()"
|
|
>Save</a
|
|
>
|
|
<a
|
|
class="button is-dark has-text-white ml-5"
|
|
@click="updateData(true)"
|
|
v-if="record.id"
|
|
>Create new</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>
|