Lexus-media/src/views/data/components/addFeedbackMoal.vue

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <div class="modal-header">
        <span>新增</span>
      </div>
      <div class="modal-body">
        <div class="bodyRow">
          <span>资料名称</span>
          <div>{{ fileName }}</div>
        </div>
        <div class="bodyRow timeWidth">
          <span>发布时间</span
          ><input
            type="date"
            placeholder="选择时间"
            :max="localDay"
            v-model="ziliaoTime"
          />
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>涉及车型</span
            ><select v-model="carTypeValue">
              <option
                v-for="(item, index) in carType"
                :key="index"
                :value="item.typeName"
              >
                {{ item.typeName || "123" }}
              </option>
            </select>
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>发布渠道</span>
            <select
              name=""
              id=""
              v-model="releaseC"
              @change="chooseChannel($event)"
            >
              <option v-for="(item, index) in releaseChannel" :key="index">
                {{ item.platformName || "-" }}
              </option>
            </select>
          </div>
          <div class="contentCol2">
            <span>平台版块</span>
            <div v-if="releaseC !== '其它'">
              <select name="" id="" v-model="releaseP">
                <option v-for="(item, index) in releasePlate" :key="index">
                  {{ item.platformName || "-" }}
                </option>
              </select>
            </div>
            <div v-else>
              <input type="text" v-model="releaseP" />
            </div>
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>稿件类别</span>
            <select name="" id="" v-model="contentName1">
              <option v-for="(item, index) in content1" :key="index">
                {{ item.dictName }}
              </option>
            </select>
          </div>
          <div class="contentCol2">
            <span>内容分类</span
            ><select name="" id="" v-model="contentName2">
              <option v-for="(item, index) in content2" :key="index">
                {{ item.dictName || "-" }}
              </option>
            </select>
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>阅读量</span>
            <input type="number" placeholder="" min="0" v-model="readCount" />
          </div>
          <div class="contentCol2">
            <span>点赞</span>
            <input type="number" placeholder="" min="0" v-model="goodCount" />
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>评论</span>
            <input type="number" placeholder="" min="0" v-model="bbsCount" />
          </div>
          <div class="contentCol2">
            <span>在看/转发</span>
            <input
              type="number"
              placeholder=""
              min="0"
              v-model="lookingCount"
            />
          </div>
        </div>
        <div class="bodyRow longInput">
          <span>标题</span>
          <input type="text" placeholder="文章标题" v-model="mediaTitle" />
        </div>
        <div class="bodyRow longInput">
          <span>链接</span>
          <input type="text" placeholder="文章发布地址" v-model="mediaUrl" />
        </div>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn-confirm" @click="confirm">确认</button> -->
        <button type="button" class="btn-confirm" @click="testUrl()">
          确认
        </button>
        <button type="button" class="btn-close" @click="closeSelf">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Modal",
  props: {
    fileName: {
      type: String,
      default: "",
    },
    ziliaoId: {
      type: String,
      default: "",
    },
    userId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      ziliaoTime: "",
      carTypeValue: "1",
      carType: [],
      releaseC: "", //'发布渠道',
      releaseChannel: [], // 发布渠道列表
      releaseP: "", //'平台版块',
      releasePlate: [], // 平台版块
      contentName1: "", //"稿件类别",
      content1: [],
      contentName2: "", //'内容分类',
      content2: [],
      readCount: 0,
      goodCount: 0,
      bbsCount: 0,
      lookingCount: 0,
      mediaTitle: "", //'文章标题',
      mediaUrl: "",
      dictList: [],
      initParentId: "",
      localDay: "",
      noEditFlag: false,
    };
  },
  methods: {
    // 改变发布渠道
    chooseChannel: function (e) {
      let index = e.target.options.selectedIndex;
      let req = {
        parentId: this.releaseChannel[index].id,
      };
      this.channelType(req);
    },
    // 确认
    testUrl: function () {
      var regex = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
      let flag = regex.test(this.mediaUrl);
      if (flag) {
        this.edit();
      } else {
        alert("链接输入有误!\n示例：https://www.baidu.com");
      }
    },
    // 取消
    closeSelf: function () {
      this.$emit("closeme");
    },
    // 判断非空
    beforeEdit: function () {
      this.releaseP = (this.releaseP || "").replace(/\s/g, "");
      this.mediaTitle = (this.mediaTitle || "").replace(/\s/g, "");
      if (!this.ziliaoTime) {
        this.noEditFlag = true;
        alert("发布时间不能为空");
        return;
      }
      if (!this.carTypeValue) {
        this.noEditFlag = true;
        alert("请选择车型");
        return;
      }
      if (!this.releaseC) {
        this.noEditFlag = true;
        alert("请选择发布渠道");
        return;
      }
      if (!this.releaseP) {
        this.noEditFlag = true;
        alert("请选择平台版块");
        return;
      }
      if (!this.contentName1) {
        this.noEditFlag = true;
        alert("请选择稿件类别");
        return;
      }
      if (!this.contentName2) {
        this.noEditFlag = true;
        alert("请选择内容分类");
        return;
      }
      if (!this.readCount || this.readCount < 0) {
        this.noEditFlag = true;
        alert("请填写阅读量");
        return;
      }
      if (!this.goodCount || this.goodCount < 0) {
        this.noEditFlag = true;
        alert("请填写点赞量");
        return;
      }
      if (!this.bbsCount || this.bbsCount < 0) {
        this.noEditFlag = true;
        alert("请填写评论量");
        return;
      }
      if (!this.lookingCount || this.lookingCount < 0) {
        this.noEditFlag = true;
        alert("请填写正确的在看/转发");
        return;
      }
      if (!this.mediaTitle) {
        this.noEditFlag = true;
        alert("标题不能为空");
        return;
      }
      if (!this.mediaUrl) {
        this.noEditFlag = true;
        alert("链接不能为空");
        return;
      }
    },
    edit() {
      this.noEditFlag = false;
      this.beforeEdit();
      if (!this.noEditFlag) {
        //当前月份
        let date = new Date();
        let m = date.getMonth() + 1;
        let y = date.getFullYear();
        let d = y + "/" + m;
        let config = {
          url: "",
          data: {
            month: d,
            dealerId: this.userId,
            dataId: this.ziliaoId,
            informationName: this.fileName,
            releaseTime: this.ziliaoTime,
            carType: this.carTypeValue,
            releaseMedia: this.releaseC,
            releasePlate: this.releaseP,
            draftGenre: this.contentName1,
            contentClass: this.contentName2,
            articleTitle: this.mediaTitle,
            articleLink: this.mediaUrl,
            readCount: this.readCount,
            goodCount: this.goodCount,
            bbsCount: this.bbsCount,
            lookingCount: this.lookingCount,
          },
        };
        this.$emit("add_feedback", config);
        this.closeSelf();
      }
    },
    // 获取当前的月份
    getLocalMonth: function () {
      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      if (month < 10) {
        month = "0" + month;
      } else {
        month = month + "";
      }
      this.localDay = year + "-" + month + "-" + day;
    },
    getCarType: function () {
      this.$http({
        method: "post",
        url: "/base/carTypeManager/selectCarTypePage",
        data: {},
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.carType = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    channelType: function (data) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/base/publishPlatformManager/selectPublishPlatformPage",
          method: "post",
          data,
        })
          .then((res) => {
            this.releasePlate = [];
            if (res.data.code === 200) {
              if (!data) {
                this.releaseChannel = res.data.data;
              } else {
                this.releasePlate = res.data.data;
              }
            }
            resolve();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    // 获取内容分类、媒体平台、常用参数接口的标识，再调接口时需要用到
    selectSysDataDictList: function () {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/sys/dataDict/selectSysDataDictList",
          data: {},
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              this.dictList = res.data.data;
              resolve();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    getContent1: function () {
      this.$http({
        method: "post",
        url: "/sys/dataDict/selectSysDataDictPage",
        data: {
          dictCode: this.dictList[1]["dictCode"],
          parentId: this.dictList[1]["id"],
        },
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.content1 = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getContent2: function () {
      this.$http({
        method: "post",
        url: "/sys/dataDict/selectSysDataDictPage",
        data: {
          dictCode: this.dictList[2]["dictCode"],
          parentId: this.dictList[2]["id"],
        },
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.content2 = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getLocalMonth();
    this.getCarType();
    this.channelType();
    this.selectSysDataDictList().then(() => {
      this.getContent1();
      this.getContent2();
    });
  },
};
</script>

<style>
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #7d9191;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background-color: #eeeeee;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  border-radius: 0px;
  width: 1030px;
}
.modal-header {
  border-bottom: 1px solid #eee;
  color: #313131;
  justify-content: space-between;
  padding: 15px;
  display: flex;
  border-bottom: 1px solid #e3e3e3;
}
.modal-header span {
  font-size: 16px;
  font-weight: bold;
}
.modal-footer {
  border-top: 1px solid #eee;
  justify-content: center;
  padding: 15px;
  display: flex;
}
.modal-footer button {
  width: 90px;
  margin-left: 0px;
}
.modal-footer button:nth-child(1) {
  margin-right: 80px;
}
.modal-body {
  position: relative;
  padding: 20px 120px 20px 180px;
}
.modal-body span,
select,
input,
div {
  font-size: 14px;
}

.btn-close,
.btn-confirm {
  border-radius: 8px;
  margin-left: 16px;
  width: 56px;
  height: 36px;
  border: none;
  cursor: pointer;
}
.btn-close {
  color: #313131;
  background-color: gray;
}
.btn-confirm {
  color: #fff;
  background-color: #0056a0;
}
.bodyRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px;
}
.bodyRow span {
  width: 80px;
  margin: 10px;
}
.bodyRow select {
  width: 120px;
}
.bodyRow input {
  width: 112px;
}
.longInput input {
  width: 476px;
}
.bodyRow select,
input {
  padding: 2px;
}
.contentCol1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.contentCol1 span {
  width: 80px;
  margin: 10px;
}
.contentCol1 div {
  width: 120px;
}
.contentCol2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 363px;
}
.timeWidth input {
  width: 150px;
}
</style>