fuintadmin/src/views/book/components/bookForm.vue

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    class="common-dialog"
    width="840px"
    :before-close="handleCLose"
    @close="handleCLose"
    destroy-on-close
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入预约名称"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属店铺" prop="storeId">
            <el-select
              v-model="form.storeId"
              style="width: 260px"
              placeholder="所属店铺，空则为全部店铺"
            >
              <el-option
                :key="0"
                label="全部店铺"
                v-if="!this.$store.getters.storeId"
                :value="0"
              />
              <el-option
                v-for="storeInfo in storeList"
                :key="storeInfo.id"
                :label="storeInfo.name"
                :value="storeInfo.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="所属分类" prop="cateId">
            <el-select
              v-model="form.cateId"
              style="width: 260px"
              placeholder="所属分类"
            >
              <el-option :key="0" label="无" :value="0" />
              <el-option
                v-for="cate in cateList"
                :key="cate.id"
                :label="cate.name"
                :value="cate.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="封面图片" prop="logo">
            <el-upload
              :action="uploadAction"
              list-type="picture-card"
              :class="{ hide: hideUpload }"
              :file-list="uploadFiles"
              :auto-upload="true"
              :show-file-list="false"
              :headers="uploadHeader"
              :on-success="handleUploadSuccess"
            >
              <img
                v-if="this.form.logo"
                :src="getImageUrl(this.form.logo)"
                class="list-img"
              />
              <i v-if="!this.form.logo" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <p class="form-tips">（提示：点击图片修改，建议尺寸：200 x 140）</p>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="可预约日期" prop="dates">
            <el-date-picker
              type="dates"
              v-model="dates"
              value-format="yyyy-MM-dd"
              style="width: 500px"
              placeholder="选择一个或多个日期，空则表示未来7天每天都可预约"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="可预约时段" prop="dates">
            <div class="time-item">
              <el-time-select
                placeholder="起始时间"
                v-model="timeRange.startTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '23:59',
                }"
              >
              </el-time-select>
              -
              <el-time-select
                placeholder="结束时间"
                v-model="timeRange.endTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:30',
                  end: '23:59',
                }"
              >
              </el-time-select>
              -
              <el-input-number
                style="width: 120px"
                v-model="timeRange.num"
                :min="1"
              />
              <span class="unit">人</span>
            </div>
            <div class="form-tips">提示：只需设置一个可预约时间范围（例如 10:00-22:00）</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="预约费用" prop="priceRules">
            <div class="add-item">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="addPriceRule()"
                >添加费用</el-button
              >
            </div>
            <div class="time-item" v-for="(rule, index) in priceRules" :key="index">
              <el-input-number
                style="width: 140px"
                v-model="rule.hours"
                :min="0"
                :precision="1"
                controls-position="right"
              />
              <span class="unit">小时</span>
              <el-input-number
                style="width: 140px; margin-left: 10px"
                v-model="rule.price"
                :min="0"
                :precision="2"
                controls-position="right"
              />
              <span class="unit">元</span>
              <span
                class="remove-item el-icon-remove"
                @click="removePriceRule(index)"
              ></span>
            </div>
            <div class="form-tips">提示：可配置任意时长与费用（如 1小时/5元、2小时/8元、7小时/13元）</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" :min="0" />
            <div class="form-tips">提示：数值越小，排列越靠前</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注信息">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio key="A" label="A" value="A">启用</el-radio>
              <el-radio key="N" label="N" value="N">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSubmit">确定</el-button>
      <el-button @click="handleCLose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { saveBook } from '@/api/book'
import { getToken } from '@/utils/auth'
import { getUploadFileName } from '@/utils/upload'
export default {
  name: 'bookForm',
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    title: {
      type: [String],
      default: () => '',
    },
    form: {
      type: [Object],
      default: () => null,
    },
    imagePath: {
      type: [String],
      default: () => '',
    },
    storeList: {
      type: [Array],
      default: () => [],
    },
    cateList: {
      type: [Array],
      default: () => [],
    },
  },
  watch: {
    showDialog(value) {
      if (value) {
        if (this.form.serviceDates) {
          this.dates = this.form.serviceDates.split(',')
        } else {
          this.dates = []
        }
        if (this.form.serviceTimes) {
          const times = this.form.serviceTimes.split(',')
          const first = times[0].split('-')
          if (first && first.length >= 2) {
            this.timeRange = {
              startTime: first[0],
              endTime: first[1],
              num: first[2] ? Number(first[2]) : 1,
            }
          }
        } else if (this.form.id) {
          this.timeRange = { startTime: '', endTime: '', num: 1 }
        } else {
          this.timeRange = { startTime: '10:00', endTime: '22:00', num: 1 }
        }
        if (this.form.priceRules) {
          try {
            const parsed = JSON.parse(this.form.priceRules)
            this.priceRules = Array.isArray(parsed) ? parsed : []
          } catch (e) {
            this.priceRules = []
          }
        } else {
          this.priceRules = []
        }
      }
    },
  },
  data() {
    return {
      loading: false,
      dates: [],
      timeRange: { startTime: '10:00', endTime: '22:00', num: 1 },
      priceRules: [],
      total: 0,
      // 上传地址
      uploadAction: process.env.VUE_APP_SERVER_URL + 'backendApi/file/upload',
      // 隐藏上传
      hideUpload: false,
      // 上传文件列表
      uploadFiles: [],
      uploadHeader: { 'Access-Token': getToken() },
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 200,
            message: '名称长度必须介于2 和 200 之间',
            trigger: 'blur',
          },
        ],
        logo: [{ required: true, message: '请上传图片', trigger: 'blur' }],
      },
    }
  },
  methods: {
    getImageUrl(path) {
      if (!path) return ''
      if (/^https?:\/\//i.test(path)) return path
      return (this.imagePath || '') + path
    },
    addPriceRule() {
      this.priceRules.push({ hours: 1, price: 0 })
    },
    removePriceRule(index) {
      this.priceRules.splice(index, 1)
    },
    // 提交
    doSubmit() {
      const app = this
      let param = app.form
      param.times = [
        {
          startTime: app.timeRange.startTime,
          endTime: app.timeRange.endTime,
          num: app.timeRange.num,
        },
      ]
      if (app.dates && app.dates.length > 0) {
        param.dates = app.dates.toString()
      } else {
        param.dates = ''
      }
      param.priceRules = app.priceRules && app.priceRules.length > 0 ? JSON.stringify(app.priceRules) : ''
      saveBook(param).then((response) => {
        if (response) {
          app.$modal.msgSuccess('提交成功！')
          app.$emit('updateList', false)
          app.$emit('closeDialog', 'bookDialog')
        }
      })
    },
    // 关闭对话框
    handleCLose() {
      this.$emit('closeDialog', 'bookDialog')
    },
    // 上传成功回调
    handleUploadSuccess(res) {
      const fileName = getUploadFileName(res)
      if (!fileName) return
      this.form.logo = fileName
    },
  },
}
</script>
<style scoped>
.common-dialog >>> .el-upload--picture-card {
  width: 60px;
  height: 50px;
  line-height: 60px;
}
.time-item {
  margin-bottom: 2px;
}
.remove-item {
  margin-left: 2px;
  color: red;
  cursor: pointer;
}
</style>