Initial commit
This commit is contained in:
Viet An
251
app/components/common/ActionInfo.vue
Normal file
251
app/components/common/ActionInfo.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="field is-grouped">
|
||||
<div class="control mr-6">
|
||||
<div class="buttons has-addons">
|
||||
<button
|
||||
:class="`button ${v.code === tab ? 'is-primary is-selected has-text-white' : ''}`"
|
||||
v-for="v in tabs"
|
||||
@click="changeTab(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="buttons has-addons">
|
||||
<button
|
||||
:class="`button ${v.code === option ? 'is-dark is-selected has-text-white' : ''}`"
|
||||
v-for="v in options"
|
||||
@click="changeOption(v)"
|
||||
>
|
||||
{{ v.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="option === 'your'">
|
||||
<template v-if="tab === 'message'">
|
||||
<div class="field is-grouped" v-for="(v, i) in message">
|
||||
<div class="control is-expanded">
|
||||
<textarea class="textarea" placeholder="" rows="3" v-model="v.text"></textarea>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="mr-3" @click="add()">
|
||||
<SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
<a @click="remove(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'danger', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
<p class="mt-2">
|
||||
<a @click="copyContent(v.text)">
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab === 'image'">
|
||||
<div class="field is-grouped mb-0">
|
||||
<div class="control is-expanded"></div>
|
||||
<div class="control">
|
||||
<FileUpload v-bind="{ position: 'left' }" @files="getImages"></FileUpload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
|
||||
<div class="control mb-2" v-for="(v, i) in image">
|
||||
<ChipImage
|
||||
style="width: 128px"
|
||||
@remove="removeImage(v, i)"
|
||||
v-bind="{ show: ['copy', 'download', 'delete'], file: v, image: `${$getpath()}static/files/${v.file}` }"
|
||||
>
|
||||
</ChipImage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab === 'file'">
|
||||
<div class="field is-grouped mb-0">
|
||||
<div class="control is-expanded"></div>
|
||||
<div class="control">
|
||||
<FileUpload v-bind="{ position: 'left', type: 'file' }" @files="getFiles"></FileUpload>
|
||||
</div>
|
||||
</div>
|
||||
<FileShow @remove="removeFile" v-bind="{ files: file, show: { delete: 1 } }"></FileShow>
|
||||
</template>
|
||||
<template v-else-if="tab === 'link'">
|
||||
<div class="field is-grouped" v-for="(v, i) in link">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" placeholder="" v-model="v.link" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="mr-3" @click="copyContent(v.link)">
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-3" :href="v.link" target="_blank">
|
||||
<SvgIcon v-bind="{ name: 'open.svg', type: 'primary', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
<a class="mr-3" @click="addLink()">
|
||||
<SvgIcon v-bind="{ name: 'add1.png', type: 'primary', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
<a @click="removeLink(v, i)">
|
||||
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'danger', size: 18 }"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<button class="button is-primary has-text-white" @click="update()">Cập nhật</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="option === 'system'">
|
||||
<template v-if="tab === 'message'">
|
||||
<div v-if="message">
|
||||
<div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in message">
|
||||
<span class="mr-3">{{ v.text }}</span>
|
||||
<a @click="copyContent(v.text)">
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab === 'image'">
|
||||
<div class="field is-grouped is-grouped-multiline" v-if="image.length > 0">
|
||||
<div class="control mb-2" v-for="(v, i) in image">
|
||||
<ChipImage
|
||||
style="width: 128px"
|
||||
v-bind="{ show: ['copy', 'download'], file: v, image: `${$getpath()}static/files/${v.file}` }"
|
||||
>
|
||||
</ChipImage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tab === 'file'">
|
||||
<FileShow v-bind="{ files: file }"></FileShow>
|
||||
</template>
|
||||
<template v-else-if="tab === 'link'">
|
||||
<div class="px-2 py-2 mb-2" style="border: 1px solid #e8e8e8" v-for="(v, i) in link">
|
||||
<a :href="v.link" target="_blank" class="mr-3">{{ v.link }}</a>
|
||||
<a @click="copyContent(v.link)">
|
||||
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 20 }"></SvgIcon>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
const {
|
||||
$id,
|
||||
$copy,
|
||||
$copyToClipboard,
|
||||
$getdata,
|
||||
$resetNull,
|
||||
$findapi,
|
||||
$insertapi,
|
||||
$updateapi,
|
||||
$remove,
|
||||
$deleteapi,
|
||||
$empty,
|
||||
} = useNuxtApp();
|
||||
import ChipImage from "~/components/media/ChipImage.vue";
|
||||
import FileShow from "~/components/media/FileShow.vue";
|
||||
const tabs = [
|
||||
{ code: "message", name: "Tin nhắn" },
|
||||
{ code: "image", name: "Hình ảnh" },
|
||||
{ code: "file", name: "Tài liệu" },
|
||||
{ code: "link", name: "Liên kết" },
|
||||
];
|
||||
const options = [
|
||||
{ code: "system", name: "Của hệ thống" },
|
||||
{ code: "your", name: "Của bạn" },
|
||||
];
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
row: Object,
|
||||
});
|
||||
var message = ref();
|
||||
var image = ref();
|
||||
var file = ref();
|
||||
var link = ref();
|
||||
var tab = ref("message");
|
||||
var record = await $getdata("useraction", { user: 1, action: props.row.id }, undefined, true);
|
||||
var option = ref(record ? "your" : "system");
|
||||
function getValue() {
|
||||
if (option.value === "your") {
|
||||
message.value = record ? $copy(record.message || [{ code: $id() }]) : [{ code: $id() }];
|
||||
image.value = record ? $copy(record.image) : [];
|
||||
file.value = record ? $copy(record.file) : [];
|
||||
link.value = record ? $copy(record.link || [{ code: $id() }]) : [{ code: $id() }];
|
||||
return;
|
||||
}
|
||||
message.value = $copy(props.row.message || []);
|
||||
image.value = $copy(props.row.image || []);
|
||||
file.value = $copy(props.row.file || []);
|
||||
link.value = $copy(props.row.link || []);
|
||||
}
|
||||
// get values
|
||||
getValue();
|
||||
// next
|
||||
function changeTab(v) {
|
||||
tab.value = v.code;
|
||||
}
|
||||
function changeOption(v) {
|
||||
option.value = v.code;
|
||||
getValue();
|
||||
}
|
||||
function getFiles(files) {
|
||||
let copy = $copy(file.value);
|
||||
copy = copy.concat(files);
|
||||
file.value = copy;
|
||||
if (option.value === "your") update();
|
||||
}
|
||||
function getImages(images) {
|
||||
let copy = $copy(image.value);
|
||||
copy = copy.concat(images);
|
||||
image.value = copy;
|
||||
if (option.value === "your") update();
|
||||
}
|
||||
function copyContent(text) {
|
||||
$copyToClipboard(text);
|
||||
}
|
||||
function add() {
|
||||
message.value.push({ code: $id() });
|
||||
}
|
||||
function remove(i) {
|
||||
message.value.splice(i, 1);
|
||||
}
|
||||
function addLink() {
|
||||
link.value.push({ code: $id() });
|
||||
}
|
||||
function removeLink(i) {
|
||||
link.value.splice(i, 1);
|
||||
}
|
||||
async function update() {
|
||||
let data = record ? $resetNull(record) : null;
|
||||
if (!data) data = { user: 1, action: props.row.id };
|
||||
let arr = message.value.filter((v) => !$empty(v.text));
|
||||
data.message = arr.length === 0 ? null : arr;
|
||||
data.image = image.value;
|
||||
data.file = file.value;
|
||||
let arr1 = link.value.filter((v) => !$empty(v.link));
|
||||
data.link = arr1.length === 0 ? null : arr1;
|
||||
let api = $findapi("useraction");
|
||||
record = data.id
|
||||
? await $updateapi("useraction", data, api.params.values)
|
||||
: await $insertapi("useraction", data, api.params.values);
|
||||
getValue();
|
||||
}
|
||||
async function removeImage(v, i) {
|
||||
let rs = await $deleteapi("file", v.id);
|
||||
$remove(image.value, i);
|
||||
if (option.value === "your") update();
|
||||
}
|
||||
async function removeFile(data) {
|
||||
let v = data.v;
|
||||
let i = data.i;
|
||||
let rs = await $deleteapi("file", v.id);
|
||||
$remove(file.value, i);
|
||||
if (option.value === "your") update();
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user