web/src/component/EditDialog.vue

<style scoped>
label {
  cursor: pointer;
  line-height: 1.2;
  display: block;
}
.item-desc {
  color: #aaa;
  font-size: small;
  display: block;
  line-height: 1.2;
  margin-top: 0.2em;
}
.item-desc a {
  color: #aaa;
}

form >>> input {
  font-family: 'Courier New', Courier, monospace;
}

* >>> .um-edit-dialog {
  max-width: 90%;
  width: 30em;
}
</style>

<template>
  <el-dialog
    @close="cancel()"
    title="音乐标签编辑"
    v-model="internalShow"
    class="um-edit-dialog"
    center
  >
    <el-form ref="form" status-icon :model="form" label-width="0">
      <section>
        <el-image
          v-show="!editPicture"
          :src="imgFile.url || picture"
          style="width: 100px; height: 100px"
        >
          <template #error class="image-slot el-image__error">
            暂无封面
          </template>
        </el-image>
        <el-upload
          v-show="editPicture"
          :auto-upload="false"
          :on-change="addFile"
          :on-remove="rmvFile"
          :show-file-list="true"
          :limit="1"
          list-type="picture"
          action=""
          drag
        >
          <el-icon><UploadFilled /></el-icon>
          <div class="el-upload__text">
            将新图片拖到此处，或<em>点击选择</em><br />以替换自动匹配的图片
          </div>
          <template #tip class="el-upload__tip">
            新拖到此处的图片将覆盖原始图片
          </template>
        </el-upload>

        <i
          :class="{
            'el-icon-edit': !editPicture,
            'el-icon-check': editPicture,
          }"
          @click="changeCover"
        ></i>
        <br />
        标题:
        <span v-show="!editTitle">{{ title }}</span>
        <!-- <el-input v-show="editTitle" v-model="title"></el-input> -->
        <i
          :class="{ 'el-icon-edit': !editTitle, 'el-icon-check': editTitle }"
          @click="editTitle = !editTitle"
        ></i
        ><br />
        艺术家:
        <span v-show="!editArtist">{{ artist }}</span>
        <!-- <el-input v-show="editArtist" v-model="artist"></el-input> -->
        <i
          :class="{ 'el-icon-edit': !editArtist, 'el-icon-check': editArtist }"
          @click="editArtist = !editArtist"
        ></i
        ><br />
        专辑:
        <span v-show="!editAlbum">{{ album }}</span>
        <!-- <el-input v-show="editAlbum" v-model="album"></el-input> -->
        <i
          :class="{ 'el-icon-edit': !editAlbum, 'el-icon-check': editAlbum }"
          @click="editAlbum = !editAlbum"
        ></i
        ><br />
        专辑艺术家:
        <span v-show="!editAlbumartist">{{ albumartist }}</span>
        <!-- <el-input v-show="editAlbumartist" v-model="albumartist"></el-input> -->
        <i
          :class="{
            'el-icon-edit': !editAlbumartist,
            'el-icon-check': editAlbumartist,
          }"
          @click="editAlbumartist = !editAlbumartist"
        ></i
        ><br />
        风格:
        <span v-show="!editGenre">{{ genre }}</span>
        <!-- <el-input v-show="editGenre" v-model="genre"></el-input> -->
        <i
          :class="{ 'el-icon-edit': !editGenre, 'el-icon-check': editGenre }"
          @click="editGenre = !editGenre"
        ></i
        ><br />

        <p class="item-desc">
          为了节省您设备的资源，请在确定前充分检查，避免反复修改。<br />
          直接关闭此对话框不会保留所作的更改。
        </p>
      </section>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="emitConfirm()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import Ruby from './Ruby';

export default {
  components: {
    Ruby,
  },
  props: {
    show: { type: Boolean, required: true },
    picture: { type: String, required: true },
    title: { type: String, required: true },
    artist: { type: String, required: true },
    album: { type: String, required: true },
    albumartist: { type: String, required: true },
    genre: { type: String, required: true },
  },
  data() {
    return {
      internalShow: false,
      form: {},
      imgFile: { tmpblob: undefined, blob: undefined, url: undefined },
      editPicture: false,
      editTitle: false,
      editArtist: false,
      editAlbum: false,
      editAlbumartist: false,
      editGenre: false,
    };
  },
  watch: {
    show(newValue, oldValue) {
      this.internalShow = newValue;
    },
  },
  async mounted() {
    this.refreshForm();
  },
  methods: {
    addFile(file) {
      this.imgFile.tmpblob = file.raw;
    },
    rmvFile() {
      this.imgFile.tmpblob = undefined;
    },
    changeCover() {
      this.editPicture = !this.editPicture;
      if (!this.editPicture && this.imgFile.tmpblob) {
        this.imgFile.blob = this.imgFile.tmpblob;
        if (this.imgFile.url) {
          URL.revokeObjectURL(this.imgFile.url);
        }
        this.imgFile.url = URL.createObjectURL(this.imgFile.blob);
      }
    },

    async refreshForm() {
      if (this.imgFile.url) {
        URL.revokeObjectURL(this.imgFile.url);
      }
      this.imgFile = { tmpblob: undefined, blob: undefined, url: undefined };
      this.editPicture = false;
      this.editTitle = false;
      this.editArtist = false;
      this.editAlbum = false;
      this.editAlbumartist = false;
      this.editGenre = false;
    },
    async cancel() {
      this.refreshForm();
      this.$emit('cancel');
    },
    async emitConfirm() {
      if (this.editPicture) {
        this.changeCover();
      }
      if (this.imgFile.url) {
        URL.revokeObjectURL(this.imgFile.url);
      }
      this.$emit('ok', {
        picture: this.imgFile.blob,
        title: this.title,
        artist: this.artist,
        album: this.album,
        albumartist: this.albumartist,
        genre: this.genre,
      });
    },
  },
};
</script>