Lexus-media/src/views/notification/editPage/editPage.vue

<template>
  <div class="notice_changShang_edit">
    <form>
      <div class="Line Line1">
        <span>标题:</span>
        <input
          type="text"
          v-model="contentParam.title"
        />
        <p v-show="tipFlag" style="margin-left: 88px; color: red">
          {{ tipText }}
        </p>
      </div>
      <div class="Line Line2">
        <span>类型:</span>
        <select>
          <option>重要通知</option>
        </select>
      </div>
      <div class="Line Line3">
        <span>区域:</span>
        <div class="areaBox">
          <div v-for="(item, index) in areaList" :key="index">
            <input
              type="checkbox"
              :value="item"
              v-model="contentParam.area"
              @click="clickCheckbox(index)"
            /><span>{{ item }}</span>
          </div>
        </div>
      </div>
      <div class="Line Line4">
        <span>信息配置:</span>
        <div class="fuWenBen">
          <editor-bar v-model="contentParam.content" :content="this.contentParam.content"></editor-bar>
        </div>
        <div style="clear: both; display: block"></div>
      </div>

      <div class="uploadFile">
        <p class="title">附件:</p>
        <label for="fileInput" @change="getFileInfo($event)"
          >添加附件
          <input type="file"  ref="referenceUpload" name="fileName" id="fileInput" multiple />
        </label>
        <div class="fileDes">
          <p v-for="(item, index) in contentParam.files" :key="index">
            {{ item.file_name || item.name }}
            <span class="deleteFile" @click="deleteFile(index, item)">×</span>
          </p>
        </div>
      </div>
    </form>
    <div class="operationStyle">
      <button @click="addNotice(contentParam.id)">保存</button>
      <button @click="backToPre()">返回</button>
    </div>
    <TipModal
      :tipFlag="tipModalFlag"
      :tipText="tipModalText"
      @close_tip_modal="closeTipModal"
    />
    <Loading v-if="uploading"></Loading>
  </div>
</template>

<script>
import TipModal from "../../../components/TipModal";
import Loading from "../../data/components/UploadLoading";
import EditorBar from '../../../components/wangEditor'
// import helpButton from "../custom_extensions/helpButton/index";
import { php_url } from "../../../config/env";
import axiosPhp from "axios";
export default {
  components: { TipModal, Loading ,EditorBar},
  name: 'tinymce',
  data() {
    return {
      tipFlag: false,
      isClear: false,
      tipText: "",
      noticeTitle: "",
      InfoType: "",
      title: this.$route.query.title,
      areaList: ["全区", "华东", "华南","华北"],
      content: "",
      unifiedUrl: "/lexus_php/api/",
      fileDes: [], // 上传的文件名,
      file: [],
      tipModalFlag: false,
      tipModalText: "",
      uploading: false,
      contentParam: {},
      noticeId: "",
      delFileIds: [],
      editFileLength: "",
      allDataNameList: [],
    };
  },
  computed: {},
  methods: {
    addNotice(id) {
      let requestURL, paramData;
      this.checkName();
      if(this.contentParam.area.length === 0){
        alert('请选择地区')
        return;
      }
      if (!this.tipFlag) {
        if (id) {
          //编辑
          requestURL = "notice_update.php";
          paramData = new FormData();
          paramData.append("title", this.contentParam.title);
          paramData.append("area", this.contentParam.area);
          paramData.append("content", this.contentParam.content);
          paramData.append("id", id);
          console.log(this.delFileIds);
          console.log(this.delFileIds.length);
          if (this.delFileIds.length) {
            let delFileStr = this.delFileIds.join(",");
            paramData.append("del_file_ids", delFileStr);
          }
          if (this.contentParam.files && this.contentParam.files.length === 0) {
            paramData.append("file_num", "0");
          } else {
            let count = 0;
            let len = this.file.length;
            this.file.forEach((item) => {
              count++;
              paramData.append("file" + count, item);
            });
            paramData.append("file_num", len);
          }
        } else {
          //新增
          requestURL = "notice_add.php";
          paramData = new FormData();
          paramData.append("title", this.contentParam.title);
          paramData.append("area", this.contentParam.area);
          paramData.append("content", this.contentParam.content);
          if (this.file.length === 0) {
            paramData.append("file_num", "0");
          } else {
            let count = 0;
            let len = this.file.length;
            this.file.forEach((item) => {
              count++;
              paramData.append("file" + count, item);
            });
            paramData.append("file_num", len);
          }
        }
        this.uploading = true;
        axiosPhp({
          url: php_url + this.unifiedUrl + requestURL,
          method: "post",
          data: paramData,
          dataType: "json", //声明成功使用json数据类型回调
          cache: false,
          processData: false,
          contentType: false,
        })
          .then((res) => {
            this.uploading = false;
            if (res.data.code === 200) {
              this.tipModalFlag = true;
              if (id) {
                this.tipModalText = "更新成功!";
              } else {
                this.tipModalText = "新增成功!";
              }
            } else {
              alert(res.data.message);
            }
          })
          .catch((err) => {
            alert(err);
          });
      }
    },
    // 关闭提示框
    closeTipModal: function () {
      this.tipModalFlag = false;
      this.$router.push({ path: "/changShang" });
    },
    // 获取文件，文件名
    getFileInfo: function (event) {
      let file = event.target.files;
      Array.from(file).forEach((item) => {
        this.file.push(item);
        this.contentParam.files.push(item);
      });
       this.$refs.referenceUpload.value = null;
    },
    // 删除文件
    deleteFile: function (i, item) {
      if (this.noticeId && this.editFileLength > this.delFileIds.length) {
        this.delFileIds.push(item.file_id);
      }
      this.file.splice(i, 1);
      this.contentParam.files.splice(i, 1);
    },
    // 保证多选框东区和其他的多选框互斥
    clickCheckbox(i) {
      let list = this.contentParam.area;
      let include = list.indexOf("全区");
      if (i === 0) {
        this.contentParam.area = [];
        return;
      }
      if (include >= 0) {
        this.contentParam.area.splice(0, 1);
      }
    },
    backToPre() {
      this.$router.push({
        path: "/changShang",
        query: {},
      });
    },
    // 转地区的格式
    // areaToList() {
    //   this.contentParam = this.$route.query
    // },
    getDataList: function (data = {}) {
      axiosPhp({
        method: "post",
        url: php_url + this.unifiedUrl + "notice_list.php",
        data,
      })
        .then((res) => {
          if (res.data.code === 200) {
            res.data.data.forEach((element) => {
              if(element.title !==this.title){
                this.allDataNameList.push(element.title);
              }
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // // 名字不重复，隐藏提示
    // hideTip: function () {
    //   this.tipText = "资料名称不能重复，请重新输入";
    //   this.tipFlag = false;
    // },
    checkName: function () {
    // console.log(this.contentParam.area)
      // 去前后空格
      // this.contentParam.title = this.contentParam.title.replace(
      //   /(^\s*)|(\s*$)/g,
      //   ""
      // );
     this.tipFlag = false;
    //  let include = this.allDataNameList.indexOf(this.contentParam.title);
      if (!this.contentParam.title) {
        this.tipText = "标题不能为空";
        this.tipFlag = true;
        return;
      }
      // else if (include >= 0 && !this.noticeId) {
      //   this.tipText = "资料名称不能重复，请重新输入";
      //   this.tipFlag = true;
      //   return;
      // }
    },
  },
  mounted() {
  //  this.getDataList();
    this.contentParam = JSON.parse(localStorage.getItem('nowPageEdit'));
    this.noticeId = this.contentParam.id;
    if (this.contentParam.files) {
      this.editFileLength = this.contentParam.files.length;
    }
  },
  created() {},
};
</script>


<style scoped lang="less">
.fuWenBen {
  position: relative;
  left: 85px;
  top: -40px;
  width: 950px;
}
.operationStyle {
  display: flex;
  justify-content: center;
}
.operationStyle button:nth-child(1) {
  margin-right: 36px;
}
.operationStyle button {
  border-radius: 5px;
  width: 100px;
  height: 36px;
}
.Line5 button {
  border-radius: 5px;
  width: 100px;
  height: 23px;
  vertical-align: middle;
}
/* .operationStyle button:nth-child(2){
  display: flex;
  justify-content: center;
} */
.focusStyle {
  border: 1px solid #ccc;
  line-height: 20px;
  color: #555555;
  outline: none;
  position: absolute;
}
.focusStyle:focus {
  animation: shadowAni 200ms linear forwards;
}
.Line {
  height: 50px;
}
.Line span {
  width: 80px;
  height: 36px;
  display: inline-flex;
  vertical-align: middle;
  line-height: 36px;
  justify-content: flex-end;
  margin-right: 8px;
}
.areaBox {
  display: flex;
}
.areaBox span {
  width: 30px;
}
.areaBox input {
  vertical-align: middle;
}
.Line3 {
  display: flex;
}
.Line4 span {
  line-height: 10px;
}
.Line4 {
  margin-top: 9px;
  height: auto;
}

.Line5 span {
  position: relative;
}
.Line5 button {
  margin-left: 64px;
}
.Line1 input {
  height: 24px;
}
.Line2 select {
  vertical-align: middle;
  width: 120px;
}
.uploadFile {
  display: flex;
  margin-top: 35px;
  min-height: 100px;
  .title {
    margin-right: 8px;
    height: 20px;
    line-height: 20px;
    margin-left: 5%;
  }
  .fileDes {
    margin-left: 20px;
    width: 500px;
    overflow: hidden; /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
    white-space: nowrap; /* 强制不换行 */
    p {
      height: 30px;
      line-height: 30px;
      .deleteFile {
        font-size: 20px;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
        // color: #0056a0;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  label {
    height: 30px;
    line-height: 30px;
    width: 72px;
    background-color: #0056a0;
    color: #fff;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    input {
      display: none;
    }
  }
}
</style>