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

chore: install prettier

Browse Source
This commit is contained in:
Viet An
2026-05-04 15:22:27 +07:00
parent 93d29ca7d8
commit bd58e2b847
267 changed files with 22950 additions and 13581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,91 +1,139 @@
<template>
<div class="tile is-ancestor py-5 px-3 mx-0" v-if="image">
<div class="tile is-1"/>
<div
class="tile is-ancestor py-5 px-3 mx-0"
v-if="image"
>
<div class="tile is-1" />
<div class="tile is-7">
<Cropper
ref="cropper"
:src="image"
@change="onChange"
:stencil-props="getRatio" />
ref="cropper"
:src="image"
@change="onChange"
:stencil-props="getRatio"
/>
</div>
<div class="tile is-1"> </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 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>
<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">
<b-radio
v-model="radio"
native-value="replace"
>
Ghi đè
</b-radio>
<b-radio v-model="radio" class="ml-3"
native-value="new">
<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>
<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="is-italic has-text-grey"
v-else
>
* Di chuyển khung để chọn hình ảnh phù hợp
</div>
<div class="is-italic has-text-grey" v-else>* Di chuyển khung để chọn hình ảnh phù hợp</div>
</div>
</div>
</div>
</template>
<script>
import { CircleStencil, Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
export default {
components: {
Cropper,
CircleStencil
import { CircleStencil, Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";
export default {
components: {
Cropper,
CircleStencil,
},
props: ["selected", "image", "avatar"],
data() {
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" },
],
curRatio: { k: "1/1" },
radio: this.avatar ? "new" : "replace",
rectangle: true,
loading: false,
};
},
computed: {
getRatio() {
return { aspectRatio: this.$calc(this.curRatio.k) };
},
props: ['selected', 'image', 'avatar'],
data() {
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'}],
curRatio: {k: '1/1'},
radio: this.avatar? 'new' : 'replace',
rectangle: true,
loading: false
}
},
methods: {
onChange({ coordinates, canvas }) {
this.coordinates = coordinates;
this.coordinates.ratio = ((this.coordinates.width * 1.0) / this.coordinates.height).toFixed(2);
},
computed: {
getRatio() {
return {aspectRatio: this.$calc(this.curRatio.k)}
}
updateImage() {
const { canvas } = this.$refs.cropper.getResult();
if (canvas) canvas.toBlob((blod) => this.saveAs(blod));
},
methods: {
onChange({ coordinates, canvas}) {
this.coordinates = coordinates
this.coordinates.ratio = (this.coordinates.width*1.00 / this.coordinates.height).toFixed(2)
},
updateImage() {
const { canvas } = this.$refs.cropper.getResult()
if (canvas) canvas.toBlob(blod=>this.saveAs(blod))
},
async saveAs(blod) {
this.loading = true
var form = new FormData();
let 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('type', 'file')
form.append('size', this.selected.size)
form.append('user', this.$store.state.login.id)
let result = await this.$insertapi('upload', form)
this.loading = false
if(result==='error') return
this.$emit('modalevent', {name: 'image', data: result.rows[0]})
}
}
}
</script>
async saveAs(blod) {
this.loading = true;
var form = new FormData();
let 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("type", "file");
form.append("size", this.selected.size);
form.append("user", this.$store.state.login.id);
let result = await this.$insertapi("upload", form);
this.loading = false;
if (result === "error") return;
this.$emit("modalevent", { name: "image", data: result.rows[0] });
},
},
};
</script>