add（桌台统计，点歌）

src/views/application/componentsCompoents/add-song.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-dialog :title="title" width="500px" :visible.sync="dialogVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+      <el-form-item label="商品图片">
+        <uploadImg ref="uploadImg" :limit="1" @success="uploadSuccess" @remove="uploadRemove" />
+        <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
+      </el-form-item>
+      <el-form-item label="歌曲名称" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="原唱歌手">
+        <el-input v-model="form.originSinger"></el-input>
+      </el-form-item>
+      <el-form-item label="演出歌手名称" prop="singer">
+        <el-input v-model="form.singer"></el-input>
+      </el-form-item>
+      <el-form-item label="单价" prop="price">
+        <el-input type="number" v-model="form.price"></el-input>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input type="number" v-model="form.sort"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import uploadImg from '@/components/uploadImg'
+  import {
+    tbShopSongAdd,tbShopSongEdit
+  } from '@/api/application-song'
+  export default {
+    components: {
+      uploadImg
+    },
+    data() {
+      return {
+        title: '新增歌曲',
+        dialogVisible: false,
+        rules: {
+          name: [{
+            required: true,
+            message: '歌曲名称必填',
+            trigger: 'blur'
+          }],
+          singer: [{
+            required: true,
+            message: '演出歌手名称必填',
+            trigger: 'blur'
+          }],
+          price: [{
+            required: true,
+            message: '单价必填',
+            trigger: 'blur'
+          }],
+          sort: [{
+            required: true,
+            message: '排序必填',
+            trigger: 'blur'
+          }]
+        },
+        form: {
+          img: '',
+          name: '',
+          singer: '',
+          originSinger: '',
+          price: 0,
+          sort: 0
+        }
+      }
+    },
+    mounted() {
+      console.log(this.form);
+    },
+    methods: {
+      uploadSuccess(res) {
+        this.form.img = res[0]
+        console.log(this.form.img);
+      },
+      uploadRemove() {
+        this.form.img = ''
+      },
+      // 提交
+      onSubmitHandle() {
+        console.log(this.form)
+        this.$refs.form.validate(async valid => {
+          if (valid) {
+            try {
+              let res = ''
+              if (this.form.id) { //编辑
+                res = await tbShopSongEdit(this.form)
+                this.$notify({
+                  title: '成功',
+                  message: `修改成功`,
+                  type: 'success'
+                });
+              } else {
+                //添加
+                res = await tbShopSongAdd(this.form)
+                this.$notify({
+                  title: '成功',
+                  message: `添加成功`,
+                  type: 'success'
+                });
+              }
+              this.$emit('success', res)
+              this.close()
+            } catch (error) {
+              console.log(error)
+            }
+          }
+        })
+      },
+      async show(obj = {}, wine = false) {
+        console.log(obj);
+        this.dialogVisible = true
+        if (obj && obj.id) {
+          this.form = {
+            ...obj
+          }
+        }
+        if (obj && obj.img) {
+          this.form.img = obj.img
+          requestAnimationFrame(()=>{
+            this.$refs.uploadImg.fileList = [{
+              url: obj.img
+            }]
+          })
+
+        }
+
+      },
+      close() {
+        this.dialogVisible = false
+      },
+      reset() {
+        this.form = {
+          ...this.resetForm
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .goods_info {
+    background-color: #f9f9f9;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    .info {
+      flex: 1;
+      padding-left: 10px;
+    }
+  }
+</style>