|
|
@@ -0,0 +1,188 @@
|
|
|
+<script type="text/x-template" id="flexiblevariant-uploaddialog-template">
|
|
|
+ <el-dialog title="Image Upload" width="660" class="flexiblevariant-uploaddialog"
|
|
|
+ :model-value="isShow" @update:model-value="$emit('update:isShow', $event)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-upload
|
|
|
+ v-model:file-list="fileList"
|
|
|
+ ref="uploadRef"
|
|
|
+ :auto-upload="false"
|
|
|
+ :http-request="submitUpload"
|
|
|
+ list-type="picture"
|
|
|
+ :limit="1"
|
|
|
+ :on-change="uploadChange"
|
|
|
+ :on-exceed="uploadExceed"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d1"
|
|
|
+ >
|
|
|
+
|
|
|
+ <template #trigger>
|
|
|
+ <el-button type="primary">select file</el-button>
|
|
|
+ </template>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ <p>Image files with a size less than 500kb.</p>
|
|
|
+ <p>Only one image is allowed to be uploaded.</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancelHandler">Cancel</el-button>
|
|
|
+ <el-button type="primary" @click="confirmHandler">Confirm</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+</script>
|
|
|
+<script type="module">
|
|
|
+
|
|
|
+ app.component('flexiblevariant-uploaddialog', {
|
|
|
+ template: '#flexiblevariant-uploaddialog-template',
|
|
|
+
|
|
|
+ props: {
|
|
|
+
|
|
|
+ variant: {
|
|
|
+ type: Object,
|
|
|
+ default: function() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ emits: ['update:isShow','confirm'], // 显式声明事件（推荐）
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ form: {
|
|
|
+ sku: '',
|
|
|
+ name: '',
|
|
|
+ price: 0,
|
|
|
+ weight: 0,
|
|
|
+ quantity: 0,
|
|
|
+ // status: false,
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'variant.images':{
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ this.fileList = [];
|
|
|
+ console.log(newVal);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getVariant(id) {
|
|
|
+ let loading = this.$loading({
|
|
|
+ target: '.flexiblevariant-eidtdialog'
|
|
|
+ });
|
|
|
+ axios.get(`/admin/flexible-variant/variants/${id}`).then((result) => {
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+ this.form = result.data.data;
|
|
|
+ loading.close();
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({
|
|
|
+ message: error.message,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadExceed(files) {
|
|
|
+ this.$refs.uploadRef.clearFiles();
|
|
|
+ const file = files[0];
|
|
|
+ file.uid = this.$genFileId();
|
|
|
+ this.$refs.uploadRef.handleStart(file);
|
|
|
+ },
|
|
|
+ uploadChange(addFile, fileList) {
|
|
|
+ console.log(addFile.size,addFile,fileList);
|
|
|
+ },
|
|
|
+ beforeUpload(rawFile) {
|
|
|
+ let res = true;
|
|
|
+ if(rawFile.size > 500000) {
|
|
|
+ this.$message({
|
|
|
+ message: 'Image files with a size less than 500kb.',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ res = false;
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ submitUpload(option) {
|
|
|
+ console.log('submitUpload ---- ',option);
|
|
|
+ let loading = this.$loading({
|
|
|
+ target: '.flexiblevariant-uploaddialog'
|
|
|
+ });
|
|
|
+ axios.post(`/admin/variants/${this.variant.id}/images/upload`,{
|
|
|
+ file: option.file
|
|
|
+ }).then((result) => {
|
|
|
+ console.log(result);
|
|
|
+
|
|
|
+
|
|
|
+ loading.close();
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message({
|
|
|
+ message: error.message,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ loading.close();
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ async saveVariant() {
|
|
|
+ // /admin/flexible-variant/variants/{id}
|
|
|
+ await this.$refs.variantFormRef.validate();
|
|
|
+ let requestData = {
|
|
|
+ sku: this.form.sku,
|
|
|
+ name: this.form.name,
|
|
|
+ price: this.form.price,
|
|
|
+ weight: this.form.weight,
|
|
|
+ quantity: this.form.quantity,
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ let res = await axios.put(`/admin/flexible-variant/variants/${this.variantId}`,requestData);
|
|
|
+ this.$message({
|
|
|
+ message: 'Save successfully.',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.$emit('update:isShow', false);
|
|
|
+ this.$emit('confirm', res.data.data);
|
|
|
+ } catch(err) {
|
|
|
+ this.$message({
|
|
|
+ message: err.message,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmHandler() {
|
|
|
+ this.$refs.uploadRef.submit()
|
|
|
+ },
|
|
|
+ cancelHandler() {
|
|
|
+ this.$emit('update:isShow', false);
|
|
|
+ this.$emit('cancel', {});
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ });
|
|
|
+</script>
|
fogwind