|
|
@@ -0,0 +1,495 @@
|
|
|
+<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>
|
|
|
+ </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="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">
|
|
|
+ <!-- :value="item.platformName" -->
|
|
|
+ {{ item.platformName || "11" }}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="contentCol2">
|
|
|
+ <span>平台版块</span
|
|
|
+ ><select name="" id="" v-model="releaseP">
|
|
|
+ <option v-for="(item, index) in releasePlate" :key="index">
|
|
|
+ <!-- :value="item.platformName" -->
|
|
|
+ {{ item.platformName || "22" }}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </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">
|
|
|
+ <!-- :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="" 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: {
|
|
|
+ LinkData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ userId: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ziliaoName: this.LinkData.informationName,
|
|
|
+ ziliaoId: "",
|
|
|
+ ziliaoTime: "",
|
|
|
+ carTypeValue: "1",
|
|
|
+ carType: [],
|
|
|
+ releaseC: this.LinkData.publishPlatformName, //'发布渠道',
|
|
|
+ releaseChannel: [], // 发布渠道列表
|
|
|
+ releaseP: this.LinkData.publishSourceName, //'平台版块',
|
|
|
+ releasePlate: [], // 平台版块
|
|
|
+ contentName1: this.LinkData.mediaTypeName, //"稿件类别",
|
|
|
+ content1: [],
|
|
|
+ contentName2: this.LinkData.contentTypeName, //'内容分类',
|
|
|
+ content2: [],
|
|
|
+ readCount: 0,
|
|
|
+ goodCount: 1,
|
|
|
+ bbsCount: 1,
|
|
|
+ lookingCount: 2,
|
|
|
+ mediaTitle: this.LinkData.mediaTitle || "", //'文章标题',
|
|
|
+ mediaUrl: this.LinkData.mediaUrl || "",
|
|
|
+ dictList: [],
|
|
|
+ initParentId: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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");
|
|
|
+ },
|
|
|
+ edit() {
|
|
|
+ //当前月份
|
|
|
+ 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: this.userId,
|
|
|
+ dataId: this.ziliaoId,
|
|
|
+ informationName: this.ziliaoName,
|
|
|
+ // releaseTime: this.ziliaoTime,
|
|
|
+ releaseTime: this.ziliaoTime,
|
|
|
+ carType: this.carTypeValue,
|
|
|
+
|
|
|
+ //发布平台 渠道
|
|
|
+ releaseMedia: this.releaseC,
|
|
|
+ //发布板块
|
|
|
+ releasePlate: this.releaseP,
|
|
|
+
|
|
|
+ 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,
|
|
|
+ // informationId: "1386025423408103425"
|
|
|
+ },
|
|
|
+ };
|
|
|
+ if (this.LinkData.id) {
|
|
|
+ config.url = "/updateDealerFeedback";
|
|
|
+ config.data.id = this.LinkData.id;
|
|
|
+ } else {
|
|
|
+ //新增
|
|
|
+ config.url = "/dealerFeedback";
|
|
|
+ }
|
|
|
+ this.$emit("update", config);
|
|
|
+ this.closeSelf();
|
|
|
+ },
|
|
|
+ initialData: function () {
|
|
|
+ this.ziliaoName = this.LinkData.informationName;
|
|
|
+ this.carTypeValue = this.LinkData.carPlatformName;
|
|
|
+ this.ziliaoId = this.LinkData.informationId;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ this.readCount = this.LinkData.readCount;
|
|
|
+ this.goodCount = this.LinkData.goodCount;
|
|
|
+ this.bbsCount = this.LinkData.bbsCount;
|
|
|
+ this.lookingCount = this.LinkData.lookingCount;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ console.log(this.carType, 22);
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .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) {
|
|
|
+ let initPlat = this.LinkData.publishPlatformName;
|
|
|
+ this.releaseChannel = res.data.data;
|
|
|
+ this.releaseChannel.forEach((item) => {
|
|
|
+ if (item.platformName === initPlat) {
|
|
|
+ this.initParentId = item.id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } 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();
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ reject();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .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;
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .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;
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initialData();
|
|
|
+ this.getCarType();
|
|
|
+ this.channelType().then(() => {
|
|
|
+ let req = {
|
|
|
+ parentId: this.initParentId,
|
|
|
+ };
|
|
|
+ this.channelType(req)
|
|
|
+ });
|
|
|
+ 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>
|
|
|
+
|
