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"
          @focus="hideTip"
          @blur="checkName"
        />
        <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">
          <el-tiptap
            v-model="contentParam.content"
            :extensions="extensions"
            :charCounterCount="false"
            placeholder="Write something ..."
          >
            <!--charCounterCount 是否显示字数统计 -->
          </el-tiptap>
        </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" 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 {
  // necessary extensions
  Doc,
  Paragraph,
  Text,
  Heading,
  History,
  Code,
  CodeBlock,
  Blockquote,
  BulletList,
  OrderedList,
  ListItem,
  TodoList,
  TodoItem,
  //Iframe,
  Table,
  TableHeader,
  TableRow,
  TableCell,
  TextAlign,
  LineHeight,
  Indent,
  HorizontalRule,
  HardBreak,
  TrailingNode,
  TextColor,
  TextHighlight,
  FormatClear,
  FontType,
  FontSize,
  // Preview,
  //Print,
  // SelectAll,
  Bold,
  //Underline,
  Italic,
  Strike,
  Link,
  Image,
  Fullscreen,
  // CodeView,
} from "element-tiptap";
import TipModal from "../../../components/TipModal";
import Loading from "../../data/components/UploadLoading";
import helpButton from "../custom_extensions/helpButton/index";
import CodeView from "../custom_extensions/CodeView/index";
import { php_url } from "../../../config/env";
import axiosPhp from "axios";
export default {
  components: { TipModal, Loading },
  data() {
    return {
      tipFlag: false,
      tipText: "",
      noticeTitle: "",
      InfoType: "",
      title: this.$route.query && this.$route.query.title,
      areaList: ["全区", "北区", "南区", "东区"], // 按区域添加
      extensions: [
        // new Preview(),
        // new Print(),
        // new SelectAll(),
        new Bold({ bubble: false }), // render command-button in bubble menu.
        new Italic(),
        new Strike(),
        new Link(),
        new Image(),
        new Fullscreen(),
        new CodeView(), //源码
        new Doc(),
        new Text(),
        new Paragraph(),
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Code(),
        new Blockquote(),
        new BulletList(),
        new OrderedList(),
        new ListItem(),
        new CodeBlock(),
        new TodoList(),
        new TodoItem(),
        new Table(),
        new TableHeader(),
        new TableRow(),
        new TableCell(),
        new TextAlign(),
        new LineHeight(),
        new Indent(),
        new HorizontalRule(),
        new HardBreak(),
        new TrailingNode(),
        new TextColor(),
        new TextHighlight(),
        new FormatClear(),
        new FontType(),
        new FontSize(),
        new History(),
        new helpButton({ bubble: false }),
      ],
      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.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;
      file.forEach((item) => {
        this.file.push(item);
        this.contentParam.files.push(item);
      });
    },
    // 删除文件
    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 || {};
      const areaList = this.contentParam.area.split(",");
      this.contentParam.area = areaList;
    },
    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 () {
      // 去前后空格
      this.contentParam.title = this.contentParam.title.replace(
        /(^\s*)|(\s*$)/g,
        ""
      );
      let include = this.allDataNameList.indexOf(this.contentParam.title);
      if (!this.contentParam.title) {
        this.tipText = "资料名不能为空";
        this.tipFlag = true;
        return;
      } else if (include >= 0) {
        this.tipText = "资料名称不能重复，请重新输入";
        this.tipFlag = true;
        return;
      }
    },
  },
  mounted() {
    this.getDataList();
    this.areaToList();
    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>