bsdgy-front/src/pages/recruit/BulletinIndex.vue

<template>
  <div class="div-page">
    <template>
      <Row class="search-row">
        <i-col span="8">
          <p class=""
             style="font-size: 16px;line-height: 22px;margin-top: 10px;margin-left: 20px;margin-right: 20px;">招募令</p>
          <p class=""
             style="font-size: 13px;line-height: 32px;margin-left: 20px;margin-right: 20px;">便于门店进行推广员招募</p>
        </i-col>
        <i-col span="8">
          <span class="">使用范围：{{welcome.company.length || 0}}家零售公司，{{welcome.stores.length || 0}}家店铺</span>
          <span class=""
                style="border: 0px; color: rgb(52, 150, 235); margin-left: 15px; cursor: pointer;"
                @click="showStores">修改</span>
        </i-col>
        <i-col span="8">
          <i-switch size="large"
                    @on-change="witchChange">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </i-col>
      </Row>
      <div>
        <p style="margin:10px 0 10px -480px;text-align:center">招募海报</p>
        <div style="text-align: center;">
          <img style="width:500px;height:500px"
               :src="imgUrl"
               alt="">

        </div>
        <!-- <div style="margin-top:20px;text-align: center;"><Button ghost type="primary">上传</Button></div> -->
        <Upload v-show="showUpload"
                ref="upload"
                :show-upload-list="false"
                :on-success="uploadImgSuccess"
                :format="['jpg', 'jpeg', 'png']"
                :max-size="2048"
                :before-upload="handleBeforeUpload"
                multiple
                action=""
                style="padding-top:10px;text-align: center;">
          <Button ghost
                  type="primary">上传</Button>
        </Upload>
        <div style="margin-top:20px;text-align: center;">
          <Button type="primary"
                  size="large"
                  @click="onEdit"
                  style="margin-right:10px">{{btnStr}}</Button>
          <Button v-show="showUpload"
                  type="text"
                  size="large"
                  @click="onCancel">取消</Button>
        </div>
      </div>
    </template>
    <selectStoreStep @doShow="doShow"
                     :schedule="welcome"
                     :show="showStoreCheck"></selectStoreStep>
  </div>
</template>

<script>
import selectStoreStep from '../activity/selectStoreStep'
import store from '../../store'
import bulletinService from '../../services/recruit/Bulletin'
import http from '../../services/CommonHttp';
import axios from "axios";
export default {
  components: {
    selectStoreStep,
  },
  data () {
    return {
      showStoreCheck: false,
      welcome: {
        content: '',
        params: [],
        company: [],
        stores: [],
      },
      inidData: {},
      showUpload: false,
      btnStr: '编辑',
      imgUrl: '',
      onWitch: false,
      uploadUrl: "",
      oldImg: ""
    };
  },
  mounted: function () {

  },
  created () {
    this.initData();
  },
  inject: ['reload'],
  methods: {
    witchChange (status) {
      this.onWitch = status;
    },
    initData () {
      let that = this;
      bulletinService.getDetail({}, function (data) {
        console.log(data);
        if (data.data.results.scheduleVO.params.length > 0) {
          that.imgUrl = http.getBaseUrl() + data.data.results.scheduleVO.params[0].defaultVal;
          that.oldImg = http.getBaseUrl() + data.data.results.scheduleVO.params[0].defaultVal;
        }
        that.initData = data.data.results;
        that.welcome = { ...that.initData, company: [...that.initData.organizations] };
      }, function (err) {
        that.$Message.error("网络异常，请重试");
        that.setNoLoading();
      });
    },
    doShow () {
      this.showStoreCheck = false
      this.welcome = store.getters.useData
      console.log('@', this.welcome);
    },
    showStores () {
      console.log(this.welcome, { ...store.getters.useData, ...this.welcome, ...this.initData })
      store.commit('SET_useData', { ...store.getters.useData, ...this.welcome, ...this.initData })
      this.showStoreCheck = true
    },
    onEdit () {
      if (this.btnStr == '编辑') {
        this.showUpload = true;
        this.btnStr = '保存'
      } else {
        let _this = this;
        this.initData.stores = this.welcome.stores;
        this.initData.company = this.welcome.company;
        let param = this.initData
        if (param.stores.length <= 0) {
          _this.$Message.error("请至少选择一个店铺");
          _this.loading = false;
          return false;
        }
        param.isGetActivityInfo = true;
        if (this.onWitch) {
          param.status = 1;
          param.stores.forEach(item => {
            item.status = 1;
          })
        } else {
          param.status = 3;
          param.stores.forEach(item => {
            item.status = 2;
          })
        }
        if (this.uploadUrl != "") {
          param.scheduleVO.params.forEach(item => {
            item.defaultVal = item.description = this.uploadUrl;

          })
        }
        bulletinService.dosave(param, function (data) {
          console.log(data);
          _this.$Message.info("保存成功");
          _this.btnStr = '编辑'
          _this.showUpload = false;
        }, function (err) {
          _this.$Message.error("网络异常，请重试");
          _this.setNoLoading();
        });
      }
    },
    onCancel () {
      this.showUpload = false;
      this.imgUrl = this.oldImg;
      this.btnStr = '编辑'
    },
    uploadImgSuccess (res, file) {
      this.imageName = file.name;
    },
    handleBeforeUpload (res) {
      const _this = this;
      let data = new FormData();
      data.append("file", res);
      axios({
        method: "post",
        url: "/upload",
        data: data,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        if (res.data.success) {
          console.log(res);
          _this.uploadUrl = res.data.results.localPath;
          _this.imgUrl = http.getBaseUrl() + res.data.results.localPath;
        }
      });
      return false;
    },
  },
};
</script>

<style scoped>
</style>