erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-06-07 09:22:53 +07:00
parent d17bc0583c
commit ee914cc382
8 changed files with 653 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
app/assets/styles/utils.scss
View File

@@ -132,9 +132,9 @@ $class-types: (
),
);
// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ───────────────────
// ─── Numeric: w-0 → w-96, h-0 → h-96, size-0 → size-96 ───────────────────
@each $prefix, $props in $class-types {
@for $i from 0 through 48 {
@for $i from 0 through 96 {
.#{$prefix}-#{$i} {
@include set-props($props, calc(var(--spacing) * #{$i}));
}
@@ -341,9 +341,9 @@ $inset-types: (
),
);
// ─── Numeric: 0 → 48, using the same --spacing scale ──────────────────────
// ─── Numeric: 0 → 96, using the same --spacing scale ──────────────────────
@each $prefix, $props in $inset-types {
@for $i from 0 through 48 {
@for $i from 0 through 96 {
.#{$prefix}-#{$i} {
@include set-props($props, calc(var(--spacing) * #{$i}));
}
@@ -375,3 +375,98 @@ $inset-keywords: (
}
}
}
// ─── Max/Min width & height ────────────────────────────────────────────────
$minmax-types: (
"max-w": (
max-width,
),
"min-w": (
min-width,
),
"max-h": (
max-height,
),
"min-h": (
min-height,
),
);
// ─── Numeric: 0 → 96, using --spacing scale ───────────────────────────────
@each $prefix, $props in $minmax-types {
@for $i from 0 through 96 {
.#{$prefix}-#{$i} {
@include set-props($props, calc(var(--spacing) * #{$i}));
}
}
}
// ─── Fractions ─────────────────────────────────────────────────────────────
@each $prefix, $props in $minmax-types {
@each $name, $pair in $fractions {
$num: list.nth($pair, 1);
$den: list.nth($pair, 2);
.#{$prefix}-#{$name} {
@include set-props($props, calc(#{$num} / #{$den} * 100%));
}
}
}
// ─── Shared keywords ───────────────────────────────────────────────────────
@each $prefix, $props in $minmax-types {
@each $name, $value in $shared-keywords {
.#{$prefix}-#{$name} {
@include set-props($props, $value);
}
}
}
// ─── Viewport keywords ─────────────────────────────────────────────────────
@each $prefix, $props in $minmax-types {
@each $name, $value in $viewport-keywords {
.#{$prefix}-#{$name} {
@include set-props($props, $value);
}
}
}
// ─── Container sizes (max-w- / min-w- only) ───────────────────────────────
@each $name in $containers {
.max-w-#{$name} {
max-width: var(--container-#{$name});
}
.min-w-#{$name} {
min-width: var(--container-#{$name});
}
}
// ─── Screen ────────────────────────────────────────────────────────────────
.max-w-screen {
max-width: 100vw;
}
.min-w-screen {
min-width: 100vw;
}
.max-h-screen {
max-height: 100vh;
}
.min-h-screen {
min-height: 100vh;
}
// ─── none (max only) ───────────────────────────────────────────────────────
.max-w-none {
max-width: none;
}
.max-h-none {
max-height: none;
}
// ─── Opacity ───────────────────────────────────────────────────────────────
$opacity-values: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
@each $val in $opacity-values {
.opacity-#{$val} {
opacity: calc($val / 100);
}
}

111
app/components/media/Camera.vue
View File

@@ -1,33 +1,59 @@
<template>
<div>
<div>
<div class="block rounded-md is-clipped">
<video
ref="video"
id="video"
width="640"
height="480"
autoplay
class="w-full is-block"
></video>
</div>
<div class="mt-2">
<div class="fixed-grid has-12-cols mb-0">
<div class="grid">
<div class="cell is-flex is-justify-content-center is-align-items-center">
<button
class="button is-primary"
id="snap"
v-on:click="capture()"
@click="$emit('close')"
class="button is-light rounded-full"
>
Chụp ảnh
<span class="icon">
<Icon
name="material-symbols:close-rounded"
:size="20"
/>
</span>
</button>
<a
class="ml-6"
@click="switchView()"
</div>
<div class="cell is-col-span-10 has-text-centered">
<button
@click="capture"
class="button is-primary is-medium rounded-full"
>
<SvgIcon v-bind="{ name: 'camera_switch.svg', type: 'black', size: 40 }"></SvgIcon>
</a>
<span class="icon">
<Icon
name="material-symbols:photo-camera-outline-rounded"
:size="24"
/>
</span>
</button>
</div>
<div class="cell is-flex is-justify-content-center is-align-items-center">
<button
@click="flip"
class="button is-light is-primary rounded-full"
>
<span class="icon">
<Icon
name="material-symbols:flip-camera-ios-outline-rounded"
:size="20"
/>
</span>
</button>
</div>
</div>
</div>
<canvas
v-show="false"
ref="canvas"
id="canvas"
width="640"
height="480"
></canvas>
@@ -35,14 +61,14 @@
</template>
<script>
export default {
data: function () {
data() {
return {
video: {},
canvas: {},
current: "front",
};
},
mounted: function () {
mounted() {
this.openCamera();
},
beforeDestroy() {
@@ -54,46 +80,61 @@ export default {
},
methods: {
openCamera() {
let f = this.current === "front" ? { facingMode: "user" } : { facingMode: { exact: "environment" } };
this.video = this.$refs.video;
const facingConstraint = {
facingMode: this.current === "front" ? "user" : { exact: "environment" },
};
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: f, audio: false }).then((stream) => {
video.srcObject = stream;
navigator.mediaDevices
.getUserMedia({ video: facingConstraint, audio: false })
.then((stream) => {
this.video.srcObject = stream;
this.video.play();
})
.catch((err) => {
if (this.current === "back" && (err.name === "OverconstrainedError" || err.name === "NotFoundError")) {
this.current = "front";
this.$snackbar("Không tìm thấy camera sau", "Error");
this.openCamera(); // retry front cam
}
});
}
},
capture() {
this.canvas = this.$refs.canvas;
let scale = 600 / this.video.videoWidth;
let w = this.video.videoWidth * scale;
let h = this.video.videoHeight * scale;
const scale = 600 / this.video.videoWidth;
const w = this.video.videoWidth * scale;
const h = this.video.videoHeight * scale;
this.canvas.width = w;
this.canvas.height = h;
var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
this.canvas.toBlob((blod) => this.saveAs(blod));
this.canvas.getContext("2d").drawImage(this.video, 0, 0, w, h);
this.canvas.toBlob((blob) => this.saveAs(blob));
},
async saveAs(blod) {
var form = new FormData();
let name = `${this.$id()}.png`;
async saveAs(blob) {
const form = new FormData();
const name = `${this.$id()}.png`;
this.fileName = `${this.$dayjs(new Date()).format("YYYYMMDDhhmmss")}-${name}`;
form.append("filename", this.fileName);
form.append("name", name);
form.append("file", blod);
form.append("file", blob);
form.append("type", "image");
form.append("size", 100);
form.append("user", this.$store.state.login.id);
let result = await this.$insertapi("upload", { data: form });
form.append("user", this.$store.login.id || 1);
const result = await this.$insertapi("upload", { data: form });
if (result === "error") return;
let row = result.rows[0];
const file = new File([blod], name, { type: "image/png" });
row.source = { file: file };
const row = result.rows[0];
const file = new File([blob], name, { type: "image/png" });
row.source = { file };
this.$emit("modalevent", { name: "selectimage", data: row });
this.$emit("close");
},
switchView() {
flip() {
this.current = this.current === "front" ? "back" : "front";
var vidTrack = this.video.srcObject.getVideoTracks();
const vidTrack = this.video.srcObject.getVideoTracks();
vidTrack.forEach((track) => {
track.stop();
track.enabled = false;

190
app/components/media/CropImage.vue
View File

@@ -1,73 +1,105 @@
<template>
<div
class="tile is-ancestor py-5 px-3 mx-0"
v-if="image"
class="fixed-grid has-12-cols"
>
<div class="tile is-1" />
<div class="tile is-7">
<div class="grid is-gap-2">
<div class="cell is-col-span-8">
<Cropper
ref="cropper"
:src="image"
:canvas="false"
@change="onChange"
:stencil-props="getRatio"
/>
</div>
<div class="tile is-1"></div>
<div class="tile">
<div v-if="avatar !== true">
<p class="mt-2 fs-16">Chọn tỷ lệ hoặc nhập chiều rộng và cao</p>
<div class="tags are-medium mt-2">
<a
:class="curRatio.k === v.k ? 'tag is-primary' : 'tag'"
v-for="(v, i) in ratios"
:key="i"
@click="curRatio = v"
>{{ v.k }}</a
>
</div>
<div class="block mt-5">
<b-radio
v-model="radio"
native-value="replace"
>
Ghi đè
</b-radio>
<b-radio
v-model="radio"
class="ml-3"
native-value="new"
>
Tạo file mới
</b-radio>
</div>
<p class="mt-4">
<a
class="button is-primary mr-4 mb-2"
:class="loading ? 'is-loading' : ''"
@click="updateImage()"
>Lưu lại</a
>
</p>
<p
class="mt-2"
v-if="coordinates"
>
Hình ảnh cắt,
{{ "W: " + coordinates.width + ", H: " + coordinates.height + ", W/H: " + coordinates.ratio }}
</p>
</div>
<div class="cell is-col-span-4">
<div
v-if="avatar"
class="is-italic has-text-grey"
v-else
>
* Di chuyển khung để chọn hình ảnh phù hợp
</div>
<div v-else>
<p class="label">Chọn tỷ lệ:</p>
<div class="fixed-grid has-12-cols">
<div class="grid is-gap-0.5">
<div
class="cell is-col-span-3"
v-for="ratio in ratios"
:key="ratio"
>
<button
:class="['button is-fullwidth is-small', curRatio === ratio ? 'is-primary' : 'is-light']"
@click="curRatio = ratio"
>
{{ ratio }}
</button>
</div>
</div>
</div>
<hr />
<div
v-if="coordinates"
class="fixed-grid has-3-cols is-family-monospace"
>
<div class="grid">
<div class="cell p-2 rounded has-background-white-ter has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">width</p>
<p class="font-semibold">{{ coordinates.width }}</p>
</div>
<div class="cell p-2 rounded has-background-white-ter has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">height</p>
<p class="font-semibold">{{ coordinates.height }}</p>
</div>
<div class="cell p-2 rounded has-background-white-ter has-text-centered">
<p class="fs-11 is-uppercase has-text-grey">ratio</p>
<p class="font-semibold">{{ coordinates.ratio }}</p>
</div>
</div>
</div>
<hr />
<div class="block is-flex is-gap-1 is-flex-wrap-wrap">
<button
v-for="v in [
{ name: 'Ghi đè', value: 'replace' },
{ name: 'Tạo file mới', value: 'new' },
]"
:key="v.value"
@click="radio = v.value"
:class="['button fs-14', radio === v.value ? 'is-primary is-light' : 'is-white']"
>
<span class="icon">
<Icon
:name="
radio === v.value
? 'material-symbols:radio-button-checked-outline'
: 'material-symbols:radio-button-unchecked'
"
:size="18"
/>
</span>
<span>{{ v.name }}</span>
</button>
</div>
<div class="block">
<button
class="button is-primary"
:class="loading && 'is-loading'"
@click="updateImage"
>
Lưu lại
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { CircleStencil, Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";
export default {
components: {
Cropper,
@@ -78,61 +110,67 @@ export default {
return {
coordinates: undefined,
ratios: [
{ k: "1/1" },
{ k: "5/4" },
{ k: "4/3" },
{ k: "3/2" },
{ k: "5/3" },
{ k: "16/9" },
{ k: "2/1" },
{ k: "3/1" },
{ k: "4/5" },
{ k: "3/4" },
{ k: "2/3" },
{ k: "3/5" },
{ k: "9/16" },
{ k: "1/2" },
{ k: "1/3" },
"1/1",
"5/4",
"4/3",
"3/2",
"5/3",
"16/9",
"2/1",
"3/1",
"4/5",
"3/4",
"2/3",
"3/5",
"9/16",
"1/2",
"1/3",
],
curRatio: { k: "1/1" },
curRatio: "1/1",
radio: this.avatar ? "new" : "replace",
rectangle: true,
loading: false,
};
},
computed: {
getRatio() {
return { aspectRatio: this.$calc(this.curRatio.k) };
return { aspectRatio: this.$calc(this.curRatio) };
},
},
methods: {
onChange({ coordinates, canvas }) {
onChange({ coordinates }) {
this.coordinates = coordinates;
this.coordinates.ratio = ((this.coordinates.width * 1.0) / this.coordinates.height).toFixed(2);
this.coordinates.ratio = (this.coordinates.width / this.coordinates.height).toFixed(2);
},
updateImage() {
const { canvas } = this.$refs.cropper.getResult();
if (canvas) canvas.toBlob((blod) => this.saveAs(blod));
if (canvas) canvas.toBlob((blob) => this.saveAs(blob));
},
async saveAs(blod) {
async saveAs(blob) {
try {
this.loading = true;
var form = new FormData();
let name =
const form = new FormData();
const name =
this.selected.file.indexOf("-") > 0
? this.selected.file.substring(15, this.selected.file.length)
: this.selected.file;
this.fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + name;
if (this.radio === "replace") this.fileName = this.selected.file;
form.append("filename", this.fileName);
form.append("name", name);
form.append("file", blod);
form.append("file", blob);
form.append("type", "file");
form.append("size", this.selected.size);
form.append("user", this.$store.state.login.id);
let result = await this.$insertapi("upload", { data: form });
this.loading = false;
form.append("user", this.$store.login.id);
const result = await this.$insertapi("upload", { data: form });
if (result === "error") return;
this.$emit("modalevent", { name: "image", data: result.rows[0] });
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
},
},
};

16
app/components/media/FileGallery.vue
View File

@@ -1,31 +1,31 @@
<template>
<div v-if="files">
<div
class="has-text-right"
v-if="!hideopt && $getEditRights()"
class="has-text-right"
>
<FileUpload
v-bind="{ type: ['file'], position }"
@files="getFiles"
></FileUpload>
/>
</div>
<div>
<div
v-if="files.length === 0 && info"
class="mt-3 has-text-grey fs-15"
v-if="files.length === 0 && info !== false"
>
Chưa có tài liệu được tải lên
</div>
<DataView
v-bind="vbind"
v-else-if="vbind"
></DataView>
v-bind="vbind"
/>
</div>
<Modal
@close="showmodal = undefined"
v-bind="showmodal"
v-if="showmodal"
></Modal>
v-bind="showmodal"
@close="showmodal = undefined"
/>
</div>
</template>
<script>

406
app/components/media/Imagebox.vue
View File

@@ -10,144 +10,147 @@
<div class="control">
<div class="file is-primary">
<label class="file-label">
<button :class="['button is-primary is-small', loading && 'is-loading']">
<span class="icon">
<Icon
name="material-symbols:upload-rounded"
:size="18"
/>
</span>
<span>Tải lên từ máy tính</span>
</button>
<input
class="file-input"
type="file"
:id="docid"
@change="doChange"
multiple
name="resume"
@change="doChange"
class="file-input is-clickable"
:id="docid"
/>
<a
class="button is-primary is-rounded is-small"
:class="loading ? 'is-loading' : null"
>
<SvgIcon v-bind="{ name: 'add5.svg', type: 'white', size: 18 }"></SvgIcon>
<span class="fs-14 ml-1">Tải lên từ máy tính</span>
</a>
</label>
</div>
</div>
<div :class="`control ${showUrl ? '' : 'is-expanded'}`">
<a
class="button is-dark is-rounded is-small"
@click="displayInput()"
<div :class="['control', !showUrl && 'is-expanded']">
<button
class="button is-small"
@click="displayInput"
>
<SvgIcon v-bind="{ name: 'add5.svg', type: 'white', size: 18 }"></SvgIcon>
<span class="fs-14 ml-1">Tải lên từ đường dẫn</span>
</a>
<span class="icon">
<Icon
name="material-symbols:link-rounded"
:size="18"
/>
</span>
<span>Tải lên từ đường dẫn</span>
</button>
</div>
<div
class="control is-expanded"
v-if="showUrl"
class="field has-addons is-flex-grow-1 mb-0"
>
<div class="control">
<input
class="input is-small is-rounded"
class="input is-small w-60"
id="url"
v-model="url"
style="width: 250px"
v-model.trim="url"
type="text"
placeholder="Nhập đường dẫn vào đây"
placeholder="Nhập đường dẫn"
/>
<a
class="button is-primary is-small px-4 ml-3"
@click="checkUrl()"
>
<SvgIcon v-bind="{ name: 'upload.svg', type: 'white', size: 22 }"></SvgIcon>
</a>
<a
class="ml-4"
</div>
<div class="control">
<button
class="button is-light is-small rounded-full"
@click="showUrl = false"
>
<SvgIcon v-bind="{ name: 'close.svg', type: 'dark', size: 22 }"></SvgIcon>
</a>
</div>
<div class="control">
<input
class="input is-small is-rounded"
v-model="search"
style="width: 250px"
type="text"
placeholder="Tìm kiếm"
@keyup="beginSearch"
<span class="icon">
<Icon
name="material-symbols:close-rounded"
:size="18"
/>
</span>
</button>
</div>
<div class="control">
<span
class="is-clickable"
@click="mode = 'image'"
<button
class="button is-primary is-small"
:disabled="!url"
@click="checkUrl"
>
<SvgIcon v-bind="{ name: 'image3.svg', type: 'dark', size: 25 }"></SvgIcon>
<span class="icon">
<Icon
name="material-symbols:arrow-forward-rounded"
:size="20"
/>
</span>
</button>
</div>
</div>
<div class="control has-icons-left">
<input
v-model="search"
type="text"
@keyup="beginSearch"
class="input is-small is-rounded w-2xs"
placeholder="Tìm kiếm"
/>
<span
class="icon is-small is-left"
style="left: 2px"
>
<Icon
name="material-symbols:search"
:size="18"
/>
</span>
</div>
<div class="control">
<span
class="is-clickable"
@click="mode = 'list'"
<div class="tabs is-toggle m-0">
<ul class="is-flex-grow-0 ml-auto">
<li
v-for="viewMode in viewModes"
:key="viewMode.name"
:class="[viewMode.name === mode && 'is-active']"
@click="mode = viewMode.name"
>
<SvgIcon v-bind="{ name: 'list.png', type: 'dark', size: 25 }"></SvgIcon>
<a class="px-3 py-1">
<span class="icon m-0">
<Icon
:name="viewMode.icon"
:size="18"
/>
</span>
</a>
</li>
</ul>
</div>
</div>
<DataView
class="mt-3"
v-bind="vbind"
v-if="mode === 'list'"
></DataView>
v-bind="vbind"
class="mt-3"
/>
<div v-else>
<div
class="tile is-ancestor mx-0 px-0 pt-3"
v-else
>
<div class="tile is-vertical">
<div
class="tile is-parent"
v-for="(v, i) in group"
class="fixed-grid has-5-cols"
v-for="(_, i) in group"
:key="i"
>
<article
class="tile is-child"
<div class="grid">
<div
v-for="(k, j) in getData(i)"
:key="j"
@mouseover="focus = k"
@mouseleave="focus = undefined"
class="cell relative rounded-md is-clipped"
>
<div
class="image px-2 pb-2"
<figure
v-if="k.file && type === 'image'"
class="image is-square mx-auto is-flex is-align-items-center"
>
<NuxtImg
:src="`${path}download?name=${k.file}`"
:id="'commentImage' + k.id"
/>
<div
class="text-image"
v-if="focus === k"
>
<a
class="button is-primary is-small"
@click="selectMedia(k)"
>
<SvgIcon v-bind="{ name: 'checked.svg', type: 'white', size: 22 }"></SvgIcon>
</a>
<a
class="button is-primary is-small ml-2"
@click="editImage(k)"
>
<SvgIcon v-bind="{ name: 'crop.svg', type: 'white', size: 22 }"></SvgIcon>
</a>
<a
class="button is-primary is-small ml-2"
@click="copyMedia(k, 'image')"
>
<SvgIcon v-bind="{ name: 'copy.svg', type: 'white', size: 22 }"></SvgIcon>
</a>
<a
class="button is-danger is-small ml-2"
@click="deleteMedia(k, 'file')"
>
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 22 }"></SvgIcon>
</a>
</div>
</div>
</figure>
<div
class="ml-2 mr-2"
v-else-if="k.file && type === 'video'"
@@ -164,12 +167,17 @@
class="mt-2"
v-if="focus === k"
>
<a
<button
class="button is-primary"
@click="selectMedia(k)"
>
<SvgIcon v-bind="{ name: 'check3.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span class="icon">
<Icon
name="material-symbols:check-rounded"
:size="18"
/>
</span>
</button>
</div>
</vue-plyr>
</div>
@@ -182,28 +190,88 @@
class="mt-2"
v-if="focus === k"
>
<a
<button
class="button is-primary"
@click="selectMedia(k)"
>
<SvgIcon v-bind="{ name: 'check3.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span class="icon">
<Icon
name="material-symbols:check-rounded"
:size="18"
/>
</span>
</button>
</div>
</div>
<div
v-if="focus === k"
class="absolute top-0 size-full"
>
<div class="size-full has-background-black opacity-15"></div>
<div class="buttons has-addons absolute left-0 right-0 bottom-2 mx-auto w-fit">
<button
class="button is-small is-white"
@click="selectMedia(k)"
>
<span class="icon">
<Icon
name="material-symbols:check-rounded"
:size="18"
/>
</span>
</button>
<button
class="button is-small is-white"
@click="editImage(k)"
>
<span class="icon">
<Icon
name="material-symbols:crop-free-rounded"
:size="18"
/>
</span>
</button>
<button
class="button is-small is-white"
@click="copyMedia(k)"
>
<span class="icon">
<Icon
name="material-symbols:content-copy-outline-rounded"
:size="18"
/>
</span>
</button>
<button
class="button is-small is-white"
@click="deleteMedia(k, 'file')"
>
<span class="icon">
<Icon
name="material-symbols:delete-outline-rounded"
:size="18"
class="has-text-danger"
/>
</span>
</button>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<Modal
@close="showmodal = undefined"
v-if="showmodal"
v-bind="showmodal"
@close="showmodal = undefined"
@image="updateImage"
@files="getFiles"
v-if="showmodal"
/>
</div>
</template>
<script>
import DataView from "~/components/datatable/DataView.vue";
export default {
props: ["source"],
data() {
@@ -222,6 +290,10 @@ export default {
url: undefined,
search: undefined,
mode: "image",
viewModes: [
{ name: "list", icon: "material-symbols:format-list-bulleted-rounded" },
{ name: "image", icon: "material-symbols:grid-view-outline-rounded" },
],
timer: undefined,
vbind: { api: "file", setting: "image-fields" },
dataFiles: [],
@@ -230,13 +302,15 @@ export default {
};
},
async created() {
let found = this.$findapi("file");
found.params = {
filter: { user: this.login.id },
const fileApi = this.$findapi("file");
fileApi.params = {
sort: "-create_time",
filter: {
user: this.login.id,
type__code: this.type,
},
};
let result = await this.$getapi([found]);
const result = await this.$getapi([fileApi]);
this.data = result[0].data.rows;
},
watch: {
@@ -298,7 +372,7 @@ export default {
this.timer = setTimeout(() => this.startSearch(e.target.value), 150);
},
async startSearch(value) {
const filter = { user: this.login.id };
const filter = { user: this.login.id, type__code: this.type };
if (!this.$empty(value)) filter.name__icontains = value.toLowerCase();
this.data = await this.$getdata("file", { filter });
},
@@ -307,29 +381,25 @@ export default {
this.url = undefined;
setTimeout(() => document.getElementById("url").focus(), 100);
},
checkUrl() {
async checkUrl() {
if (this.$empty(this.url)) return this.$snackbar("Đường dẫn không hợp lệ", "Error");
let self = this;
try {
const self = this;
this.loading = true;
this.$axios
.get(this.url, { responseType: "blob" })
.then(function (response) {
var reader = new window.FileReader();
const res = await $fetch(this.url);
const reader = new window.FileReader();
reader.onload = (e) => {
self.image = e.target.result;
setTimeout(() => self.doUpload(e.target.result), 100);
};
reader.readAsDataURL(response.data);
self.loading = false;
})
.catch((e) => {
self.$buefy.toast.open({
duration: 3000,
message: `Đường dẫn không hợp lệ`,
type: "is-danger",
});
self.loading = false;
});
reader.readAsDataURL(res);
} catch (error) {
this.$snackbar("Đường dẫn không hợp lệ", "Error");
console.error(error);
} finally {
this.loading = false;
}
},
doUpload() {
const image = document.getElementById("image");
@@ -340,102 +410,103 @@ export default {
ctx.drawImage(image, 0, 0);
if (canvas) canvas.toBlob((blod) => this.saveAs(blod));
},
async saveAs(blod) {
var form = new FormData();
async saveAs(blob) {
const form = new FormData();
const fileName = this.$dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + this.$id() + ".png";
form.append("filename", fileName);
form.append("name", `${this.$id()}.png`);
form.append("file", blod);
form.append("file", blob);
form.append("type", "image");
form.append("size", 100);
form.append("user", this.$store.login.id);
let result = await this.$insertapi("upload", { data: form });
const result = await this.$insertapi("upload", { data: form });
if (result === "error") return;
this.updateImage(result.rows[0]);
this.showUrl = false;
},
async uploadImage(file) {
this.loading = true;
let result = await this.$insertapi("upload", { data: file.form });
const result = await this.$insertapi("upload", { data: file.form });
this.data.splice(0, 0, result.rows[0]);
this.loading = false;
},
getData(i) {
if (this.type === "video") {
var list = this.data.slice(i * 5, i * 5 + 5);
const list = this.data.slice(i * 5, i * 5 + 5);
for (let index = 0; index < 5; index++) {
if (list.length < index + 1) list.push({ file: undefined });
}
} else {
list = this.data.slice(i * 6, i * 6 + 6);
for (let index = 0; index < 6; index++) {
if (list.length < index + 1) list.push({ file: undefined });
}
}
return list;
},
selectMedia(v) {
let copy = this.media ? this.$copy(this.media) : {};
async selectMedia(v) {
const copy = this.media ? this.$copy(this.media) : {};
copy.type = "image";
copy.open = false;
copy.select = v;
this.media = copy;
let row = this.$copy(v);
const row = this.$copy(v);
if (this.source) {
let params = { name: v.file, type: "file" };
this.$axios
.get(`${this.path}download/`, {
params: params,
responseType: "blob",
})
.then(function (response) {
var reader = new window.FileReader();
const res = await $fetch(`${this.path}download/`, {
params: {
name: v.file,
type: "file",
},
});
const reader = new window.FileReader();
reader.onload = (e) => {
fetch(e.target.result)
.then((res) => res.blob())
.then((blob) => {
const file = new File([blob], v.name, { type: "image/png" });
row.source = { file: file };
row.source = { file };
});
};
reader.readAsDataURL(response.data);
});
reader.readAsDataURL(res);
}
this.$emit("modalevent", { name: "selectimage", data: row });
},
editImage(v) {
async editImage(v) {
this.loading = true;
this.selected = v;
let self = this;
let params = { name: v.file, type: "file" };
this.$axios.get(`${this.path}download/`, { params: params, responseType: "blob" }).then(function (response) {
var reader = new window.FileReader();
const self = this;
const res = await $fetch(`${this.path}download/`, {
params: {
name: v.file,
type: "file",
},
});
const reader = new window.FileReader();
reader.onload = (e) => {
self.image = e.target.result;
self.showmodal = {
component: "media/CropImage",
width: "65%",
title: "Cắt hình ảnh",
width: "90%",
height: "auto",
vbind: { selected: self.selected, image: self.image },
};
};
reader.readAsDataURL(response.data);
reader.readAsDataURL(res);
self.loading = false;
});
},
copyMedia(v) {
this.$copyToClipboard(`${this.path}download/?name=${v.file}`);
},
deleteMedia(v, name) {
let self = this;
var remove = async function () {
let result = await self.$deleteapi(name, v.id);
let idx = self.data.findIndex((x) => x.id === v.id);
const remove = async function () {
await self.$deleteapi(name, v.id);
const idx = self.data.findIndex((x) => x.id === v.id);
self.$delete(self.data, idx);
};
this.$buefy.dialog.confirm({
message: "Bạn muốn xóa file: " + v.file,
onConfirm: () => remove(),
onConfirm: remove,
});
},
updateImage(v) {
@@ -445,3 +516,10 @@ export default {
},
};
</script>
<style scoped>
.tabs {
--bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
--bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
--bulma-tabs-toggle-link-active-color: var(--bulma-link-40);
}
</style>

60
app/components/media/Picture.vue
View File

@@ -1,39 +1,55 @@
<template>
<div>
<div class="is-flex is-gap-1">
<div
class="image-container"
v-if="picture"
class="image is-128x128 relative"
>
<img
:src="picture"
style="max-height: 250px !important"
<NuxtImg :src="picture" />
<div class="absolute top-2 right-2">
<button
class="button is-small is-light is-danger"
@click="remove"
>
<span class="icon">
<Icon
name="material-symbols:delete-outline-rounded"
:size="20"
/>
<div class="image-label">
<span
class="is-clickable"
@click="remove()"
>
<SvgIcon v-bind="{ name: 'bin.svg', type: 'danger', size: 30 }"></SvgIcon>
</span>
</button>
</div>
</div>
<div
style="width: 130px; border-style: dashed; border-width: 1px"
v-else
@click="openImage()"
class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
style="border: 1px dashed var(--bulma-grey-light)"
>
<a @click="openImage()"><SvgIcon v-bind="{ name: 'image.svg', type: 'grey', size: 120 }"></SvgIcon></a>
<Icon
name="material-symbols:add-photo-alternate-outline-rounded"
:size="50"
class="has-text-grey-light"
/>
</div>
<div class="mt-2">
<a @click="openCamera()">
<SvgIcon v-bind="{ name: 'camera.svg', type: 'dark', size: 28 }"></SvgIcon>
</a>
<div>
<button
class="button is-medium is-light is-primary"
@click="openCamera()"
>
<span class="icon">
<Icon
name="material-symbols:photo-camera-outline-rounded"
:size="24"
/>
</span>
</button>
</div>
<Modal
@close="showmodal = undefined"
v-bind="showmodal"
v-if="showmodal"
@selectimage="selectImage"
></Modal>
/>
</div>
</template>
<script>
@@ -58,8 +74,8 @@ export default {
},
selectImage(files) {
this.showmodal = undefined;
let v = files;
this.picture = `${this.$path()}download/?name=${v.file__file || v.file}&type=file`;
const v = files;
this.picture = `${this.$getpath()}download/?name=${v.file__file || v.file}&type=file`;
v.image = this.$copy(this.picture);
this.vfile = v;
this.$emit("picture", v);
@@ -71,8 +87,8 @@ export default {
openCamera() {
this.showmodal = {
component: "media/Camera",
title: "Chụp ảnh",
width: "650px",
width: "700px",
height: "auto",
};
},
},

4
app/components/parameter/ImportData.vue
View File

@@ -199,7 +199,7 @@ export default {
if (files.length === 0) return;
const file = files.item(0);
let thefile = this.$upload(file, "file", 1);
const thefile = this.$upload(file, "file", 1);
if (thefile.error) {
this.$snackbar(thefile.text, "Error");
@@ -214,7 +214,7 @@ export default {
this.msgInfo.push({ message, type: "error" });
return (this.isloading = false);
}
let result = await this.$insertapi("upload", { data: thefile.form, notify: false });
const result = await this.$insertapi("upload", { data: thefile.form, notify: false });
if (result === "error") {
const message = this.$find(
this.$store.syspara,

30
app/plugins/01-common.js
View File

@@ -140,26 +140,26 @@ export default defineNuxtPlugin((nuxtApp) => {
text: "Kích thước video phải dưới 1GB",
};
}
let data = new FormData();
let fileName = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + file.name;
data.append("name", file.name);
data.append("filename", fileName);
data.append("file", file);
data.append("type", type);
data.append("size", file.size);
data.append("user", user);
data.append("convert", convert);
const form = new FormData();
const filename = dayjs(new Date()).format("YYYYMMDDhhmmss") + "-" + file.name;
form.append("name", file.name);
form.append("filename", filename);
form.append("file", file);
form.append("type", type);
form.append("size", file.size);
form.append("user", user);
form.append("convert", convert);
// Thêm quality nếu convert được bật và quality được cung cấp
if (convert && quality !== null && quality !== undefined) {
data.append("quality", quality);
form.append("quality", quality);
}
return {
form: data,
type: type,
size: file.size,
file: file,
form,
type,
file,
filename,
name: file.name,
filename: fileName,
size: file.size,
};
};