MingGao_vue/minggao/src/page/systemmanger/motif.vue

<!--  -->
<template>
  <div class="motif_box">
    <el-card :style="'height:' + fullHeight + 'px'">
      <ul class="motif_ul">
        <li class="motif_list">
          <div class="list_left">系统LOGO:</div>
          <div class="list_right">
            <!-- <img  v-viewer id="viewerDom" src="../../assets/images/newImg/12.jpg" alt="" class="" /> -->
            <img
              v-if="objData.logo_url"
              v-viewer
              id="viewerDom"
              :src="
                objData.logo_url.indexOf('http') == -1
                  ? this.$deriveData + objData.logo_url
                  : objData.logo_url
              "
              alt=""
              class=""
            />
          </div>
        </li>
        <li class="motif_list">
          <div class="list_left">系统名称:</div>
          <div class="list_right">{{ objData.sys_name }}</div>
        </li>
        <li class="motif_list">
          <div class="list_left">版权信息:</div>
          <div class="list_right">
            {{ objData.copyright_info }}
          </div>
        </li>
        <li>
          <el-button
            size="mini"
            type="primary"
            @click="btnEdit"
            style="margin: 10px 0 0 100px"
            >编辑</el-button
          >
        </li>
      </ul>
    </el-card>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑"
      :visible.sync="redactVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="系统LOGO:" prop="img">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            :http-request="ImgUploadSectionFile"
            :with-credentials="true"
            :auto-upload="true"
            accept=".png, .jpg, .gif, .svg"
            action
            :on-change="handleChange"
            list-type="list"
            :file-list="fileList"
            multiple
            :show-file-list="false"
          >
            <img v-if="form.img" :src="form.img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="系统名称: " prop="name">
          <el-input
            style="width: 80%"
            size="mini"
            v-model.trim="form.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="版权信息: " prop="role_describe">
          <el-input
            style="width: 80%"
            size="mini"
            type="textarea"
            resize="none"
            v-model.trim="form.role_describe"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            :disabled="submitBtn"
            size="small"
            type="primary"
            @click="confirm"
            >{{ submitBtn == true ? "发布中..." : "发布" }}</el-button
          >
          <el-button size="small" @click="redactVisible = false"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //
      redactVisible: false,
      form: {
        img: "",
        name: "",
        role_describe: ""
      },
      rules: {
        img: [{ required: true, message: "请上传系统LOGO", trigger: "blur" }],
        name: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
        role_describe: [
          { required: true, message: "请输入版本信息", trigger: "blur" }
        ]
      },

      // 上传图片
      fileList: [],
      userDetail: {},
      objData: {},
      submitBtn: false // 防止弹框确定按钮重复请求
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    redactVisible(val) {
      if (val == false) {
        this.form.img = "";
        this.form.name = "";
        this.form.role_describe = "";
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 上传图片
    ImgUploadSectionFile(param) {
      let that = this;
      let formData = new FormData();
      formData.append("img_file", param.file); //首页图片
      that
        .$axios({
          method: "post",
          url: "api/api_gateway?method=monitor_manage.cbd_manage.add_img",
          data: formData
        })
        .then(res => {
          if (res.data.data.src !== "0") {
            that.imageSrc = res.data.data.src;
            that.form.img = res.data.data.src;
          } else {
            that.$message.error({
              message: "上传图片失败，请重试",
              duration: 1500
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      //   that.clearUploadBox();
    },
    handleChange(file, fileList) {
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.raw.name)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      let reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
      };
      reader.readAsArrayBuffer(file.raw);
      this.fileList = fileList;
    },

    // 按钮编辑
    btnEdit() {
      this.form.img = this.$deriveData + this.objData.logo_url;
      this.form.name = this.objData.sys_name;
      this.form.role_describe = this.objData.copyright_info;
      this.redactVisible = true;
    },

    // 编辑确定
    confirm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitBtn = true;
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=sysmenage.usermanager.theme_modify",
            data: this.qs.stringify({
              logo_url: this.form.img, // logo链接地址
              sys_name: this.form.name, // 系统名称
              copyright_info: this.form.role_describe // 版权信息
            })
          })
            .then(res => {
              if (res.data.data == true) {
                this.$message({
                  message: "成功!",
                  type: "success",
                  duration: 1500
                });
                this.motifAxios();
              }
              this.submitBtn = false;
              this.redactVisible = false;
            })
            .catch(err => {
              // console.log(err);
              this.submitBtn = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 主题数据
    motifAxios() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.user_info"
      })
        .then(res => {
          console.log(res);
          this.objData = res.data.data.theme_info;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.motifAxios();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
// .motif_box {

// }

.motif_ul {
  .motif_list {
    display: flex;
    .list_left {
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: #333333;
      font-weight: 400;
    }
    .list_right {
      width: 300px;
      margin: 0 0 30px 20px;
      font-size: 14px;
      img {
        width: 150px;
        height: 150px;
        border-radius: 5px;
      }
    }
  }
}
</style>