FE-V2-PC/src/views/system/chart/addPage.vue

<template>
  <div class="add-chart-page">
    <div class="top-title-box">
      <p>{{propsData.id?'编辑':'新增'}}</p>
      <p class="reset-button-one" @click="backPage">返回</p>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="标题：" prop="imgName">
        <el-input v-model="form.imgName" placeholder="请输入标题" maxLength="20" style="width:400px;"/>
      </el-form-item>
      <el-form-item label="类型：" prop="imgCategory">
        <el-select v-model="form.imgCategory" placeholder="请选择类型" style="width:400px;">
          <el-option label="轮播图" :value="1"></el-option>
          <el-option label="文化图" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="范围：" prop="imgRange">
        <el-select v-model="form.imgRange" placeholder="请选择范围" style="width:400px;">
          <el-option
            v-for="dict in deptOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序：" prop="imgOrder">
        <el-input v-model="form.imgOrder" placeholder="请输入排序" maxLength="5" style="width:400px;"/>
      </el-form-item>
      <el-form-item label="有效时间：" prop="validBeginTime">
        <el-date-picker
          @change="timeChange"
          :clearable="false"
          v-model="dateRange"
          size="small"
          style="width: 400px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="内容：" prop="imgUrl">
        <el-upload
          class="certificate-avatar-uploader"
          :action="uploadImgUrl"
          :show-file-list="false"
          accept="image/jpeg,image/gif,image/png"
          :on-success="handleAvatarSuccess"
          :headers="headers"
          :before-upload="beforeAvatarUpload">
          <p v-if="!form.imgUrl" style="background:#0183FA;color:#fff;font-weight:500;font-size:14px;text-align: center;line-height:40px;width:200px;border-radius:4px; "> + 上传图片</p>
          <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" style="height:80px;width:80px;">
        </el-upload>
      </el-form-item>
      <!--<el-form-item label="轮播图类型" prop="imgType">-->
        <!--<template>-->
          <!--<el-radio v-model="form.imgType" label="1">轮播</el-radio>-->
          <!--<el-radio v-model="form.imgType" label="2">文化图</el-radio>-->
        <!--</template>-->
      <!--</el-form-item>-->
    </el-form>
    <p class="bottom-button-p inquire-button-one" @click="submitForm">保存</p>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { listDepartments } from "@/api/system/dept";
  import { addChart, updateChart } from "@/api/laboratory/chart";
  export default {
    name: "addPage",
    props:{
      propsData:{},
    },
    data(){
      return{
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        form:{

        },
        rules:{
          imgName:[
            {required: true, message: '请输入轮播图标题', trigger: 'blur'},
            { required: true, message: "请输入轮播图标题", validator: this.spaceJudgment, trigger: "blur" }
          ],
          imgCategory:[
            {required: true, message: '请选择轮播图类型', trigger: 'blur'}
          ],
          imgRange:[
            {required: true, message: '请选择轮播图展示范围', trigger: 'blur'}
          ],
          imgOrder:[
            {required: true, message: '请输入轮播图排序序号', trigger: 'blur'},
            { required: true, message: "请输入轮播图排序序号", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
          ],
          validBeginTime:[
            {required: true, message: '请选择轮播图有效期', trigger: 'blur'}
          ],
          imgUrl:[
            {required: true, message: '请选择轮播图内容', trigger: 'blur'}
          ],
        },
        dateRange:[],
        //范围
        deptOptions:[],
      }
    },
    created() {

    },
    mounted(){
      this.getDeptList();
      if(this.propsData.id){
        let obj = {
          id : this.propsData.id,
          imgName : this.propsData.imgName,
          imgCategory : this.propsData.imgCategory,
          imgRange : this.propsData.imgRange,
          imgOrder : this.propsData.imgOrder,
          validBeginTime : this.propsData.validBeginTime,
          validEndTime : this.propsData.validEndTime,
          imgUrl : this.propsData.imgUrl,
        }
        this.$set(this,'form',obj);
        this.dateRange.push(this.propsData.validBeginTime)
        this.dateRange.push(this.propsData.validEndTime)
        console.log("123",123)
      }
    },
    methods: {
      timeChange(data){
        this.$set(this.form,'validBeginTime',data[0])
        this.$set(this.form,'validEndTime',data[1])
      },
      /** 查询学院列表 */
      getDeptList() {
        listDepartments().then(response => {
          this.$set(this, 'deptOptions', response.data)
          this.deptOptions.unshift({deptId:-1,deptName:'全校'})
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.buttonClick(1);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateChart(this.form).then( response => {
                this.msgSuccess("修改成功");
                this.$parent.buttonClick(1);
              });
            } else {
              addChart(this.form).then( response => {
                this.msgSuccess("新增成功");
                this.$parent.buttonClick(1);
              });
            }
          }
        });
      },
      //上传
      handleAvatarSuccess(res, file) {
        this.$set(this.form,'imgUrl',res.data.url);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
    },
  }
</script>

<style scoped lang="scss">
  .add-chart-page{
    flex:1;
    display: flex!important;
    flex-direction: column;
    *{
      margin:0;
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        flex:1;
        margin-left:20px;
        color:#0045af;
        line-height:80px;
        font-size:18px;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .bottom-button-p{
      display: block;
      margin:40px auto;
    }
    .el-form-item{
      margin-top:30px;
    }
  }
</style>