Lexus-media/src/components/Modal.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>{{ ziliaoName }}</div>
          <!--   <select v-model="ziliaoId">
            <option
              v-for="(item, index) in dataName"
              :key="index"
              :value="item.id"
            >
              {{ item.informationName }}
            </option>
          </select> -->
        </div>
        <div class="bodyRow timeWidth">
          <span>发布时间</span
          ><input type="date" placeholder="选择时间" v-model="ziliaoTime" />
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>车系</span
            ><select v-model="carS" @change="chooseCarSeries">
              <option
                v-for="(item, index) in carSeries"
                :key="index"
                :value="item.typeName"
              >
                {{ item.typeName }}
              </option>
            </select>
          </div>
          <div class="contentCol2">
            <span>车型</span
            ><select v-model="carT">
              <option
                v-for="(item, index) in carType"
                :key="index"
                :value="item.typeName"
              >
                {{ item.typeName }}
              </option>
            </select>
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>发布渠道</span>
            <div>{{ selectedPlatform }}</div>
          </div>
          <div class="contentCol2">
            <span>平台版块</span
            ><select name="" id="" v-model="releaseP">
              <option
                v-for="(item, index) in releaseMedia"
                :key="index"
                :value="item.platformName"
              >
                {{ item.platformName }}
              </option>
            </select>
          </div>
        </div>
        <!--      <div class="bodyRow">
          <span>项目分类</span
          ><select name="" id="">
            <option value="">请选择</option>
          </select>
        </div> -->
        <div class="bodyRow">
          <div class="contentCol1">
            <span>稿件类别</span
            ><select name="" id="" v-model="contentName1">
              <option
                v-for="(item, index) in content1"
                :key="index"
                :value="item.dictName"
              >
                {{ 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"
                :value="item.dictName"
              >
                {{ item.dictName }}
              </option>
            </select>
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>阅读量</span>
            <input type="number" placeholder="" v-model="readCount" />
          </div>
          <div class="contentCol2">
            <span>点赞</span>
            <input type="number" placeholder="" v-model="goodCount" />
          </div>
        </div>
        <div class="bodyRow">
          <div class="contentCol1">
            <span>评论</span>
            <input type="number" placeholder="" v-model="bbsCount" />
          </div>
          <div class="contentCol2">
            <span>在看/转发</span>
            <input type="number" placeholder="" 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: {
    LinkData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    selectedPlatform: {
      type: String,
      default: () => {
        return "";
      },
    },
    releaseMedia: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dataName: [],
      carSeries: [],
      carType: [],
      content1: [],
      content2: [],

      carS: "",
      carT: "",
      releaseP: "",
      ziliaoId: "",
      content1Id: "",
      content2Id: "",

      carTypeId: "",
      contentTypeName: "",
      informationId: "",
      mediaTitle: "",
      mediaUrl: "",
      projectTypeName: "",
      publishDate: "",
      publishSourceName: "",

      ziliaoName: "",
      ziliaoTime: "",
      contentName1: "",
      contentName2: "",

      readCount: "",
      goodCount: "",
      bbsCount: "",
      lookingCount: "",
    };
  },
  methods: {
    closeSelf() {
      this.$emit("closeme");
      //  console.log(this.LinkData);
    },

    edit: function () {
      let obj = {};
      //获取资料名
      let idVal = this.ziliaoId;
      obj = this.dataName.find(function (item) {
        return item.id === idVal;
      });
      this.ziliaoName = obj.informationName;
      //获取车系 id
      let nameCarS = this.carS;
      obj = this.carSeries.find(function (item) {
        return item.typeName === nameCarS;
      });
      console.log("chexi ", obj);
      //carTypeId  表示车系 id
      this.carTypeId = obj.id;
      //获取车型名 this.carT
      //获取平台名 this.selectedPlatform,

      //当前月份
      let date = new Date();
      let m = date.getMonth() + 1;
      let y = date.getFullYear();
      let d = y + "/" + m;

      let config = {
        url: "",
        data: {
          id: "", //主键值
          month: d,
          dealerId: "254",
          dataId: this.ziliaoId,
          informationName: this.ziliaoName,
          releaseTime: this.ziliaoTime,
          carService: this.carS,
          carType: this.carT,
          //发布板块
          releasePlate: this.releaseP,
          //发布平台
          releaseMedia: this.selectedPlatform,
          draftGenre: this.contentName1,

          //内容分类2？
          contentClass: this.contentName2,
          articleTitle: this.mediaTitle,
          articleLink: this.mediaUrl,

          readCount: this.readCount,
          goodCount: this.goodCount,
          bbsCount: this.bbsCount,
          lookingCount: this.lookingCount,
        },
      };

      if (this.LinkData.id) {
        //编辑
        config.url = "/updateDealerFeedback";
        config.data.id = this.LinkData.id;
        console.log(config.url);
      } else {
        //新增
        config.url = "/dealerFeedback";
      }

      this.$emit("update", config);
      this.$emit("closeme");
    },
    addInfo: function () {
      let obj = {};
      //获取资料名
      let idVal = this.ziliaoId;
      obj = this.dataName.find(function (item) {
        return item.id === idVal;
      });
      this.ziliaoName = obj.informationName;
      //获取车系 id
      let nameCarS = this.carS;
      obj = this.carSeries.find(function (item) {
        return item.typeName === nameCarS;
      });
      console.log("chexi ", obj);
      //carTypeId  表示车系 id
      this.carTypeId = obj.id;
      //获取车型名 this.carT
      //获取平台名 this.selectedPlatform,

      //当前月份
      let date = new Date();
      let m = date.getMonth() + 1;
      let y = date.getFullYear();
      let d = y + "/" + m;

      let config = {
        url: "/dealerFeedback",
        data: {
          // id: "", //主键值
          month: d,
          dealerId: "254",
          dataId: this.ziliaoId,
          informationName: this.ziliaoName,
          releaseTime: this.ziliaoTime,
          carService: this.carS,
          carType: this.carT,
          //releasePlate: this.selectedPlatform,
          //releaseMedia: this.releaseP,
          //发布板块
          releasePlate: this.releaseP,
          //发布平台
          releaseMedia: this.selectedPlatform,
          draftGenre: this.contentName1,

          //内容分类2？
          contentClass: this.contentName2,
          articleTitle: this.mediaTitle,
          articleLink: this.mediaUrl,

          readCount: this.readCount,
          goodCount: this.goodCount,
          bbsCount: this.bbsCount,
          lookingCount: this.lookingCount,
        },
      };
      this.$emit("update", config);
      this.$emit("closeme");
    },
    //资料名称列表
    chooseDataName: function () {
      this.$http({
        url: "/firmsUploadListByAgent",
        //url: "/firmsLinkUpload",
        method: "post",
        data: {
          download: true,
          //report: false,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.dataName = res.data.data;
            console.log(this.dataName);
            //获取资料名
            let obj = {};
            let idVal = this.ziliaoId;
            obj = this.dataName.find(function (item) {
              return item.id === idVal;
            });
            this.ziliaoName = obj.informationName;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //发布版块
    /*  chooseReleasePlate: function () {}, */

    //不分页查询车系车型信息
    chooseCarSeries: function () {
      this.$http({
        url: "/base/carTypeManager/selectCarTypeList",
        method: "post",
        data: {},
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.carSeries = res.data.data;
            this.chooseCarType();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    chooseCarType: function () {
      //清空下级select
      this.carT = "";
      //获取车系 id
      let obj = {};
      let nameCarS = this.carS;
      obj = this.carSeries.find(function (item) {
        return item.typeName === nameCarS;
      });
      console.log(this.carSeries, obj);
      this.carTypeId = obj.id;

      this.$http({
        url: "/base/carTypeManager/selectCarTypeList",
        method: "post",
        data: {
          parentId: this.carTypeId || -1,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.carType = res.data.data;
            this.carT = this.LinkData.carPlatformName;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //不分页查询发布平台信息 内容分类1
    //初次调用获得 content ID 用作 parentID
    firstContent1Classify: function () {
      this.$http({
        url: "/sys/dataDict/selectSysDataDictList",
        method: "post",
        data: {
          dictCode: "content1",
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.content1Id = res.data.data[0].id;
            this.secondContent1Classify();
          }
          console.log("contentClassify1", res.data.data[0].id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    secondContent1Classify: function () {
      this.$http({
        url: "/sys/dataDict/selectSysDataDictList",
        method: "post",
        data: {
          parentId: this.content1Id,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.content1 = res.data.data;
          }
          console.log("second contentClassify1", res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //不分页查询发布平台信息 内容分类2
    firstContent2Classify: function () {
      this.$http({
        url: "/sys/dataDict/selectSysDataDictList",
        method: "post",
        data: {
          dictCode: "content2",
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.content2Id = res.data.data[0].id;
            this.secondContent2Classify();
          }
          console.log("contentClassify2", res.data.data[0].id);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    secondContent2Classify: function () {
      this.$http({
        url: "/sys/dataDict/selectSysDataDictList",
        method: "post",
        data: {
          parentId: this.content2Id,
        },
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.content2 = res.data.data;
          }
          console.log("second contentClassify2", res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    initialData: function () {
      this.ziliaoId = this.LinkData.informationId;

      this.mediaTitle = this.LinkData.mediaTitle;
      this.mediaUrl = this.LinkData.mediaUrl;
      this.carS = this.LinkData.carTypeName;

      this.carT = this.LinkData.carPlatformName;
      let time = this.LinkData.publishDate; //发布时间
      if (time.length > 4) {
        let y = time.slice(0, 4);
        let m = time.slice(5, 7);
        let d = time.slice(8, 10);
        let temp = y + "-" + m + "-" + d;
        this.ziliaoTime = temp;
      }
      //console.log("console.log(this.forceUpdate);", typeof time, m, y);

      //缺少对应列表值 已有资料名在数据中无法查询到
      //publishSourceName 发布板块
      this.releaseP = this.LinkData.publishSourceName;

      this.contentName1 = this.LinkData.mediaTypeName;
      this.contentName2 = this.LinkData.contentTypeName;

      this.readCount = this.LinkData.readCount;
      this.goodCount = this.LinkData.goodCount;
      this.bbsCount = this.LinkData.bbsCount;
      this.lookingCount = this.LinkData.lookingCount;
    },
    testUrl: function () {
      var regex = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
      let flag = regex.test(this.mediaUrl);
      // console.log(flag, regex);
      if (flag) {
        if (flag
         /*  this.ziliaoName &&
          this.ziliaoTime &&
          this.carS &&
          this.carT &&
          this.releaseP &&
          this.selectedPlatform &&
          this.contentName1 &&
          this.contentName2 &&
          this.mediaTitle &&
          this.mediaUrl &&
          this.readCount &&
          this.goodCount &&
          this.bbsCount &&
          this.lookingCount */
        ) {
          this.edit();
        } else {
          alert("请将信息补充完整！");
        }
      } else {
        alert("链接输入有误!\n示例：https://www.baidu.com");
      }
      /*  
this.ziliaoName && this.ziliaoTime &&this.carS &&this.carT&&
this.releaseP&& this.selectedPlatform&& this.contentName1&&
this.contentName2&& this.mediaTitle&& this.mediaUrl&&
this.readCount&&this.goodCount&&  this.bbsCount&& this.lookingCount */
    },
  },
  mounted() {
    this.chooseDataName();
    this.chooseCarSeries();
    this.firstContent1Classify();
    this.firstContent2Classify();
    //this.chooseReleasePlate();

    this.initialData();
  },
};
</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>