ohplay_system/src/views/operation/startPage/detail.vue

<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="auto" :disabled="isRead">
      <el-form-item label="启动页名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入启动页名称" />
      </el-form-item>
      <el-form-item label="生效期：" prop="date">
        <el-date-picker v-model="form.date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss" @change="getchecked" />
      </el-form-item>
      <el-form-item label="跳转方式：" prop="forwardType">
        <el-select v-model="form.forwardType" placeholder="请选择跳转方式">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="持续时间：" prop="time">
        <el-select v-model="form.time" placeholder="请选择持续时间">
          <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="能否跳过：" prop="isStep">
        <el-select v-model="form.isStep" placeholder="请选择能否跳过" :disabled="disabled">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
            :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      <el-form-item label="跳转地址：" prop="forwardUrl">
        <el-input v-model="form.forwardUrl" placeholder="请输入跳转地址" />
      </el-form-item>
      <el-form-item label="启动页图片：" prop="pic">
        <Upload listType="picture-card" measure="375*812" :url="form.pic" @upload="getUpload" :disabled="isRead" />
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!isRead" type="primary" @click="getSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { submit, detail, edit, checked } from '@/api/operation/startPage'
export default {
  data() {
    return {
      // 表单
      form: {},
      // 是否禁用
      disabled: false,
      rules: {
        name: [{
          required: true, message: '请输入启动页名称', trigger: 'blur'
        }],
        date: [{
          required: true, message: '请选择生效期', trigger: 'change'
        }],
        forwardType: [{
          required: true, message: '请选择跳转方式', trigger: 'change'
        }],
        time: [{
          required: true, message: '请选择持续时间', trigger: 'change'
        }],
        isStep: [{
          required: true, message: '请选择能否跳过', trigger: 'change'
        }],
        forwardUrl: [{
          required: true, message: '请输入跳转地址', trigger: 'blur'
        }],
        pic: [{
          required: true, message: '请上传启动页图片', trigger: 'change'
        }]
      },
      // 跳转类型
      typeOptions: [{
        value: 0,
        label: '指定页面'
      }, {
        value: 1,
        label: '指定URL'
      }],
      // 持续时间
      timeOptions: [{
        value: 3,
        label: '3秒'
      }, {
        value: 4,
        label: '4秒'
      }, {
        value: 5,
        label: '5秒'
      }, {
        value: 6,
        label: '6秒'
      }, {
        value: 7,
        label: '7秒'
      }, {
        value: 8,
        label: '8秒'
      }, {
        value: 9,
        label: '9秒'
      }, {
        value: 10,
        label: '10秒'
      }, {
        value: 0,
        label: '手动关闭'
      }],
      // 是否允许
      statusOptions: [{
        value: 0,
        label: '允许'
      }, {
        value: 1,
        label: '不允许'
      }],
      // 只读
      isRead: Boolean(this.$route.query.boolean)
    }
  },
  watch: {
    'form.time'(val) {
      if (val === 0) {
        this.form.isStep = 0
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.getList()
    }
  },
  methods: {
    // 详情
    getList() {
      detail({
        id: this.$route.query.id
      }).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.form.id = this.$route.query.id
          this.$set(this.form, "date", [res.data.startTime, res.data.endTime])
        }
      })
    },

    // 判断生效日期
    getchecked(e) {
      this.form.date = []
      if (e) {
        checked({
          startTime: e[0],
          endTime: e[1]
        }).then(res => {
          if (res.code === 0) {
            if (res.data) {
              this.form.date = e
              this.form.startTime = e[0]
              this.form.endTime = e[1]
            } else {
              this.$message.error('该日期范围存在启动页')
            }
          }
        })
      }
    },

    // 上传
    getUpload(e) {
      this.form.pic = e.file
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          delete this.form.date
          if (this.$route.query.id) {
            edit(this.form).then(res => {
              if (res.code === 0) {
                this.$message.success('修改成功！')
                this.cancel()
              }
            })
          } else {
            submit(this.form).then(res => {
              if (res.code === 0) {
                this.$message.success('新增成功！')
                this.cancel()
              }
            })
          }
        } else {
          return false
        }
      })
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/operation/startPage");
    },
  },
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}
</style>