管理后台-演出管理-演出安排

htmldev/manage/src/views/business/show/plan/details.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <el-dialog :title="exData.id ? '编辑': '新增'"
+               :visible.sync="dialog"
+               width="50%"
+               :close-on-click-modal="false"
+               top="50px">
+      <el-form ref="form"
+               :model="form"
+               :rules="formRules"
+               label-width="80px">
+        <el-form-item>
+          <h4>安排2021-05-19的演出</h4>
+        </el-form-item>
+        <el-form-item v-for="(domain, index) in form.domains"
+                      :label="'第' + (index + 1) + '节'"
+                      :key="domain.key"
+                      :prop="'domains.' + index + '.value'">
+          <el-select v-model="domain.singer"
+                     filterable
+                     placeholder="请选择演唱艺人">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-time-picker class="af-el-date-editor"
+                          is-range
+                          v-model="domain.value1"
+                          range-separator="至"
+                          start-placeholder="演唱开始时间"
+                          end-placeholder="演唱结束时间"
+                          placeholder="选择时间范围">
+          </el-time-picker>
+          <el-button type="warning"
+                     @click.prevent="removeDomain(domain)">删除
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer text-center">
+        <el-button @click="dialog = false">取 消</el-button>
+        <el-button @click="addDomain">新增时间段</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    exData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      dialog: !!this.value,
+      form: {
+        bar_name: '', // 门店名称
+        bar_address: '', // 门店地址
+        bar_status: '1', // 门店状态(0无效1有效)
+        bar_img_url: [], // 门店图片
+        bar_song_start_time: '', // 点歌开始时间
+        bar_song_end_time: '', // 点歌结束时间
+        bar_place_reserve_start_time: '', // 座位预定开始时间
+        bar_place_reserve_end_time: '', // 座位预定结束时间
+        note: '', // 备注
+        domains: [
+          {
+            singer: '',
+            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+          },
+          {
+            singer: '',
+            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+          }
+        ]
+      },
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }]
+    }
+  },
+  methods: {
+    removeDomain (item) {
+      var index = this.form.domains.indexOf(item)
+      if (index !== -1) {
+        this.form.domains.splice(index, 1)
+      }
+    },
+    addDomain () {
+      this.form.domains.push({
+        value: '',
+        key: Date.now()
+      })
+    },
+    handleSubmit () {
+      const url = this.exData.id ? '/v1/bar/modify' : '/v1/bar/add'
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          const data = await this.$fetch(url, {
+            ...this.form
+          })
+          if (data.code === 200) {
+            this.$message.success('提交成功')
+            this.$emit('success')
+            this.dialog = false
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    if (this.exData.id) {
+      this.$set(this.form, 'id', this.exData.id)
+      for (const key in this.exData) {
+        if (this.form.hasOwnProperty(key)) {
+          let value = this.exData[key]
+          if ((Array.isArray(value) && value.length > 0) || value) {
+            if (key === 'bar_status') {
+              value = value.toString()
+            }
+            this.$set(this.form, key, value)
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    dialog (val) {
+      if (!val) this.$emit('input', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.af-el-date-editor {
+  width: 220px;
+  margin: 0 10px;
+}
+</style>