web-base-admin/src/views/marketing/superStudioGift/message.vue

<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="main_title">
        <div class="bluekuai" />
        <div class="title_word">{{ '基本信息' }}</div>
      </div>
      <div class="main_content">
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item :label="'活动名称'" prop="name">
                <el-input v-model="form.name" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="'活动说明'" prop="name">
                <editor
                  ref="sptwEditor"
                  v-model="form.content"
                  :min-height="196"
                  :upload-url="uploadImgUrl"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item :label="'活动封面'" prop="name">
              <el-upload
                :headers="headers"
                :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
                :action="uploadImgUrl"
                :on-success="handlePictureSuccess"
                :on-change="uploadImgChange"
                list-type="picture-card"
                :limit="1"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus" />
                <div class="sizes">{{ '大小为5M' }}</div>
              </el-upload>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="'目标用户群体'" prop="name" style="margin-bottom: 0" />
          </el-row>
          <el-row>
            <el-form-item label="" prop="name" style="margin-bottom: 0">
              <div style="display: flex">
                <el-checkbox
                  v-model="checkAll"
                  :label="'注册等级'"
                  @change="handleCheckAllChangeSales"
                >{{ '注册等级' }}</el-checkbox>
                <el-checkbox-group v-model="bushForm" style="margin-left: 30px" @change="handleCheckedColumnChangeSales">
                  <el-checkbox
                    v-for="(item,index) in awardsList"
                    :key="index"
                    :label="item.pkId"
                  >{{ item.awardsName }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="" prop="name" style="margin-bottom: 0">
              <div style="display: flex">
                <el-checkbox
                  v-model="checkAll1"
                  :label="'荣誉奖衔'"
                  @change="handleCheckAllChangeSales1"
                >{{ '荣誉奖衔' }}</el-checkbox>
                <el-checkbox-group v-model="bushForm1" style="margin-left: 30px" @change="handleCheckedColumnChangeSales1">
                  <el-checkbox
                    v-for="item in gradeRangList"
                    :key="item.pkId"
                    :label="item.pkId"
                  >{{ item.gradeName }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="" prop="name">
              <div>
                <el-checkbox
                  :label="'权限中心'"
                >{{ '权限中心' }}</el-checkbox>
                <el-checkbox
                  v-for="item in awardsList"
                  :key="item.pkId"
                  v-model="item.changed"
                  :label="item.pkId"
                >{{ item.awardsName }}</el-checkbox>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="'活动时间'" prop="name">
              <el-date-picker
                v-model="form.creatTime"
                type="datetimerange"
                range-separator="——"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                value-format="yyyy-MM-dd HH:mm:ss"
                :unlink-panels="true"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="'展示时间'" prop="name">
              <el-date-picker
                v-model="form.creatTime"
                type="datetimerange"
                range-separator="——"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
                value-format="yyyy-MM-dd HH:mm:ss"
                :unlink-panels="true"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          class="thebtn"
          style="background: #ccc;color: #fff"
          @click="cancel"
        > {{ '取消' }}</el-button>
        <el-button
          type="primary"
          class="thebtn"
          style="margin-left: 30px;color: #48B2FD;color: #fff"
        > {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import topBar from '@/components/topBar'
import { getzccsList, saveYfpz } from '@/api/system'
import { getAwardsListChiose, getgradeRanglist } from '@/api/level'
import { getToken } from '@/utils/auth'
export default {
  name: 'Xtcs',
  components: {
    topBar,
    Editor
  },
  data() {
    return {
      checkedKeyLists: [], // key的list数据
      openDiag: false,
      showImg: true, // 默认展示
      noneUploadImg: false, //
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      headers: {
        Authorization: getToken()
      },
      moren: 'superStudioMessage',
      topList: [
        {
          name: '基本信息',
          path: 'superStudioMessage'
        },
        {
          name: '规则设置',
          path: 'superStudioRule'
        }
      ],
      rules: {
        bankCode: [
          { required: true, message: '请选择活动名称', trigger: 'blur' }
        ]
      },
      form: {},
      awardsList: [],
      gradeRangList: [],
      checkAll: false,
      isALL: false, // 全选框是否在勾选状态
      bushForm: [], // 选中的注册等级数据
      checkAll1: false,
      isALL1: false, // 全选框是否在勾选状态
      bushForm1: [] // 选中的荣誉奖衔数据
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 全选
    handleCheckAllChangeSales1(val) {
      const checkedsItem = val ? this.gradeRangList : []
      if (checkedsItem.length > 0) {
        checkedsItem.forEach((item) => {
          this.bushForm1.push(item.pkId)
        })
        console.error(this.bushForm1)
      } else {
        this.bushForm1 = []
      }
      this.isALL = false
    },
    handleCheckedColumnChangeSales1(value) {
      const checkedCount = value.length
      this.checkAll1 = checkedCount === this.gradeRangList.length
      this.isALL =
        checkedCount > 0 && checkedCount < this.gradeRangList.length
    },
    // 全选
    handleCheckAllChangeSales(val) {
      const checkedsItem = val ? this.awardsList : []
      if (checkedsItem.length > 0) {
        checkedsItem.forEach((item) => {
          this.bushForm.push(item.pkId)
        })
        console.error(this.bushForm)
      } else {
        this.bushForm = []
      }
      this.isALL = false
    },
    handleCheckedColumnChangeSales(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.awardsList.length
      this.isALL =
        checkedCount > 0 && checkedCount < this.awardsList.length
    },
    uploadImgChange(file, fileList) {
      this.noneUploadImg = fileList.length > 0
      this.$refs.form.clearValidate('cover')
    },
    // 图片上传成功后的回调
    handlePictureSuccess(res, file) {
      this.form.cover = res.data.url
    },
    // 图片上传删除
    handleRemove(file, fileList) {
      this.form.cover = ''
      this.noneUploadImg = fileList.length > 0
    },
    cancel() {
      this.$router.push({
        name: 'superStudioGift'
      })
    },
    getData() {
    // 荣誉奖衔下拉选
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 注册等级下拉
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-icon-plus{
  color: #4391FD;
}
.sizes{
  position: absolute;
  top: 0;
  color: #999;
  font-size: 10px;
  margin:30px 0 0 20px;
}
::v-deep .el-upload{
  width: 88px;
  height: 88px;
  line-height: 88px;
  position: relative;
}
::v-deep .el-select{
  width: 100%;
}
::v-deep .el-textarea__inner{
  height: 84px;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .main_title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .bluekuai {
        width: 5px;
        height: 19px;
        background: #4391fd;
        margin-right: 20px;
      }
      .title_word {
        font-size: 14px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .main_content {
      padding: 20px 25px;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
</style>