yunyubang-web/src/views/productService/components/addStrategy.vue

<template>
  <div>
    <xy-dialog :width="70" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增攻略' : '编辑攻略'" :form="form" :rules="rules" @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请填写标题" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:subheading>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            副标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.subheading" placeholder="请填写副标题" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:strategyTypeId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>栏目：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.strategyTypeId" placeholder="请选择栏目">
              <el-option v-for="item in strategyTypes" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:state>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否启用：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.state"></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            内容：
          </div>
          <div class="xy-table-item-content">
            <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce>
          </div>
        </div>
      </template>
      <template v-slot:coverPicture>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            封面图：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.coverPicture" style="position: relative;">
              <img :src="form.coverPicture" class="avatar">
              <Button
                shape="circle"
                icon="md-close"
                type="error"
                size="small"
                class="img__delete"
                @click="form.coverPicture = ''"></Button>
            </div>
            <el-upload
              v-else
              accept="picture"
              :limit="1"
              class="avatar-uploader"
              list-type="picture-card"
              :action="action"
              :show-file-list="true"
              :on-error="uploadFail"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:sortNumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            排序：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :controls="false" :min="0" :precision="0" v-model="form.sortNumber" placeholder="请填写排序" clearable style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:label>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标签：
          </div>
          <div class="xy-table-item-content">
            <el-select multiple v-model="form.label" placeholder="请选择标签">
              <el-option v-for="item in labels" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {index as typeIndex} from "@/api/strategyType"
import {getparameter} from '@/api/system/dictionary'

import tinymce from "@/components/Tinymce"
import { Message } from 'element-ui'
export default {
  components:{
    tinymce
  },
  data() {
    return {
      isShow:false,
      type:'',
      id:'',
      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

      labels:[],
      strategyTypes:[],
      form:{
        title:'',
        subheading:'',
        strategyTypeId:'',
        state:true,
        content:'',
        coverPicture:'',
        sortNumber:0,
        label:''
      },
      rules:{
        title:[
          {required:true,message:'请填写标题'}
        ],
        strategyTypeId:[
          {required:true,message:'请选择类型'}
        ]
      }
    }
  },
  methods: {
    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.coverPicture = response.url
    },
    uploadBefore(file){
      if((file.size/1000) > 2024){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },

    async getLabel(){
      const res = await getparameter({number:'strategyLabel'})
      this.labels = res.detail
    },
    async getStrategyTypes(){
      const res = await typeIndex()
      this.strategyTypes = res.rows
      console.log(this.strategyTypes)
    },

    submit(){
      if(this.type === 'add'){
        console.log(this.form)
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        this.getStrategyTypes()
        this.getLabel()
      }else{
        this.id = ''
        this.type = ''
        this.$refs['tinymce'].setContent(' ')
        this.$refs['dialog'].reset()
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
<style>
.avatar-uploader .el-upload {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #BF617C;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  display: block;
  border-radius: 6px;
}
.img__delete{
  transform: scale(0.7,0.7);

  position: absolute;
  top: 1px;
  left: 4%;
}
</style>