parent
ed33c2619c
commit
a901838aa2
@ -1,251 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted, watch } from "vue";
|
|
||||||
import { Plus } from "@element-plus/icons-vue";
|
|
||||||
|
|
||||||
import { getParentCateList, getCategory, addCategory, updateCategory } from "@/api/category";
|
|
||||||
|
|
||||||
// import { getAminUser, addAdminUser, updateAdminUser } from "@/api/adminuser";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
editid: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(["close"]);
|
|
||||||
|
|
||||||
const formType = ref("insert");
|
|
||||||
|
|
||||||
const loading = ref(false);
|
|
||||||
const formRef = ref(null);
|
|
||||||
const form = ref({
|
|
||||||
id: 0,
|
|
||||||
parent_id: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
const options = ref([]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
if (props.editid) {
|
|
||||||
let res = await getCategory(props.editid);
|
|
||||||
if (res.code === 200) {
|
|
||||||
form.value = res.data;
|
|
||||||
formType.value = "update";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let pcateRes = await getParentCateList();
|
|
||||||
if (pcateRes.code === 200) {
|
|
||||||
options.value = pcateRes.data.map((item) => {
|
|
||||||
return {
|
|
||||||
label: item.name,
|
|
||||||
value: item.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const rules = reactive({
|
|
||||||
username: [{ required: true, message: "管理員帳號必填", trigger: 'blur' }],
|
|
||||||
})
|
|
||||||
|
|
||||||
// START: 圖片上傳
|
|
||||||
import { uploadFile } from "@/utils/request";
|
|
||||||
|
|
||||||
import { Cropper } from 'vue-advanced-cropper';
|
|
||||||
import "vue-advanced-cropper/dist/style.css";
|
|
||||||
|
|
||||||
const crop = ref({
|
|
||||||
show: false,
|
|
||||||
img: null,
|
|
||||||
ratio: 2.6,
|
|
||||||
})
|
|
||||||
|
|
||||||
const myCrop = ref(null)
|
|
||||||
|
|
||||||
const beforeAvatarUpload = (rawFile) => {
|
|
||||||
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
|
|
||||||
ElMessage.error('圖片格式只能是jpeg/png/jpg!');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// if (rawFile.size / 1024 / 1024 > 2) {
|
|
||||||
// ElMessage.error('檔案大小請勿超過2MB!')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
crop.value.show = true
|
|
||||||
|
|
||||||
crop.value.img = URL.createObjectURL(rawFile);
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const onCrop = () => {
|
|
||||||
const { canvas } = myCrop.value.getResult();
|
|
||||||
if (canvas) {
|
|
||||||
const imgFile = new FormData();
|
|
||||||
canvas.toBlob(async (blob) => {
|
|
||||||
let ufile = new File([blob], "image.jpg");
|
|
||||||
imgFile.append("fileType", "IMAGE");
|
|
||||||
imgFile.append("file", ufile);
|
|
||||||
|
|
||||||
crop.value.show = false;
|
|
||||||
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
let res = await uploadFile('/cate/uploadImage', imgFile);
|
|
||||||
|
|
||||||
if (res.code === 200) {
|
|
||||||
form.value.imageurl = res.data;
|
|
||||||
ElMessage.success('上傳成功');
|
|
||||||
} else {
|
|
||||||
ElMessage.error('上傳失敗');
|
|
||||||
}
|
|
||||||
loading.value = false;
|
|
||||||
|
|
||||||
}, "image/jpeg");
|
|
||||||
}
|
|
||||||
|
|
||||||
return;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
crop.value.show = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// END: 圖片剪裁
|
|
||||||
|
|
||||||
|
|
||||||
const cancelForm = () => {
|
|
||||||
console.log("cancel!");
|
|
||||||
emit("close", false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitForm = (formEl) => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
let res;
|
|
||||||
let message;
|
|
||||||
if (formType.value === "update") {
|
|
||||||
form.value.id = props.editid;
|
|
||||||
res = await updateCategory(form.value);
|
|
||||||
message = "修改成功.";
|
|
||||||
} else {
|
|
||||||
res = await addCategory(form.value);
|
|
||||||
message = "新增成功.";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (res.code === 200) {
|
|
||||||
ElMessage({
|
|
||||||
message: message,
|
|
||||||
type: 'success',
|
|
||||||
});
|
|
||||||
emit("close", true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
ElMessage({
|
|
||||||
message: "操作失敗.",
|
|
||||||
type: 'error',
|
|
||||||
});
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-form ref="formRef" :model="form" status-icon :rules="rules" label-width="120px">
|
|
||||||
<el-form-item label="分類名稱" prop="name">
|
|
||||||
<el-input v-model="form.name" type="text" v-if="form.parent_id === 0"/>
|
|
||||||
<el-input v-model="form.name" :rows="4" type="textarea" v-else/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="上級分類">
|
|
||||||
<el-select v-model="form.parent_id" class="m-2" placeholder="Select">
|
|
||||||
<el-option label="最上層" :value="0" />
|
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="類別圖片" prop="imageurl" v-if="form.parent_id === 0">
|
|
||||||
<el-upload class="avatar-uploader"
|
|
||||||
action="#"
|
|
||||||
accept="image/*"
|
|
||||||
:show-file-list="false"
|
|
||||||
:auto-upload="true"
|
|
||||||
:before-upload="(file) => beforeAvatarUpload(file)">
|
|
||||||
<img v-if="form.imageurl" :src="form.imageurl" class="avatar" id="imageurl" />
|
|
||||||
<el-icon v-else class="avatar-uploader-icon">
|
|
||||||
<Plus />
|
|
||||||
</el-icon>
|
|
||||||
</el-upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class="demo-drawer__footer" style="text-align: right;">
|
|
||||||
<el-button @click="cancelForm">取消</el-button>
|
|
||||||
<el-button type="primary" :loading="loading" @click="submitForm(formRef)">{{
|
|
||||||
loading ? '提交中 ...' : '確認'
|
|
||||||
}}</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<el-dialog
|
|
||||||
v-model="crop.show"
|
|
||||||
title="Tips"
|
|
||||||
:before-close="handleClose"
|
|
||||||
>
|
|
||||||
<div class="cropper-section" v-if="crop.show">
|
|
||||||
<div class="crop-area">
|
|
||||||
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
|
||||||
aspectRatio: crop.ratio,
|
|
||||||
}" :auto-zoom="true" />
|
|
||||||
</div>
|
|
||||||
<div class="crop-btn">
|
|
||||||
<el-button type="primary" size="small" text @click="handleClose">取消</el-button>
|
|
||||||
<el-button type="primary" size="small" @click="onCrop">剪裁</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.avatar-uploader .avatar {
|
|
||||||
width: 312px;
|
|
||||||
height: 120px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.avatar-uploader .el-upload) {
|
|
||||||
border: 1px dashed var(--el-border-color);
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: var(--el-transition-duration-fast);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader .el-upload:hover {
|
|
||||||
border-color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-icon.avatar-uploader-icon {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
width: 312px;
|
|
||||||
height: 120px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-dialog) {
|
|
||||||
width: 40% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crop-btn {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue