|
|
@@ -0,0 +1,529 @@
|
|
|
+<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>
|
