链接上传

src/views/parameter/LinkUpload.vue

@@ -1,53 +1,54 @@
 <template>
   <div>
-  <div class="link_upload">
-    <div class="count">
-      <div class="select">
-        <p>上传平台</p>
-        <select @change="slectPlatForm()" v-model="selectedForm">
-          <option 
-            v-for="(item, index) in optionList" :key="index"
-            :value="item"
-          >
-            {{item}}
-          </option>
-        </select>
+    <div class="link_upload">
+      <div class="count">
+        <div class="select">
+          <p>上传平台</p>
+          <select @change="slectPlatForm($event)" v-model="selectedForm">
+            <option
+              v-for="(item, index) in optionList"
+              :key="index"
+              :data-index='index'
+            >
+              {{ item.platformName }}
+            </option>
+          </select>
+        </div>
+        <div @click="showModal" class="current_button">新增</div>
+      </div>
+      <div class="table">
+        <Table
+          :tableData="tableData"
+          @edit="edit"
+          @delet_data="deleteData"
+          :pageSize="sum"
+        ></Table>
+      </div>
+      <div class="page">
+        <Tablepage
+          :totalPage="totalPage"
+          :currentPage="currentPage"
+          @change_page="changePage"
+          @jump_page="jumpPage"
+        ></Tablepage>
+        <Count :sum="sum"></Count>
+      </div>
+      <div class="modal" v-if="modalFlag">
+        <Modal
+          :modalFlag="modalFlag"
+          @submit="submit"
+          @hide_modal="showModal"
+          :optionList='optionList'
+        ></Modal>
       </div>
-      <div @click="showModal" class="current_button">新增</div>
-    </div>
-    <div class="table">
-      <Table
-        :tableData='tableData'
-        @edit='edit'
-        @delet_data='deleteData'
-        :pageSize='sum'
-      ></Table>
-    </div>
-    <div class="page">
-      <Tablepage
-        :totalPage='totalPage'
-        :currentPage='currentPage'
-        @change_page='changePage'
-        @jump_page='jumpPage'
-      ></Tablepage>
-      <Count :sum='sum'></Count>
-    </div>
-    <div class="modal" v-if="modalFlag">
-      <Modal
-        :modalFlag='modalFlag'
-        :selectedForm='selectedForm'
-        @submit='submit'
-        @hide_modal='showModal'
-      ></Modal>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
-import Count from '../../components/Count';
-import Tablepage from '../../components/TablePage';
-import Table from './components/LinkUpload/Table';
+import Count from "../../components/Count";
+import Tablepage from "../../components/TablePage";
+import Table from "./components/LinkUpload/Table";
 import Modal from "./components/LinkUpload/Modal";
 
 export default {
@@ -55,7 +56,7 @@ export default {
     Count,
     Table,
     Tablepage,
-    Modal
+    Modal,
   },
   data() {
     return {
@@ -64,36 +65,36 @@ export default {
       currentPage: 1,
       tableData: [],
       getDate: [
-        {time: '2021/03', plate: '汽车之家', num: 5, str: '222'},
-        {time: '2021/03', plate: '汽车之家', num: 5, str: '111'},
-        {time: '2021/03', plate: '汽车之家', num: 5, str: '333'}
+        { time: "2021/03", plate: "汽车之家", num: 5, str: "222" },
+        { time: "2021/03", plate: "汽车之家", num: 5, str: "111" },
+        { time: "2021/03", plate: "汽车之家", num: 5, str: "333" },
       ],
       functionData: [],
       modalFlag: false, // 控制模态框展示
-      optionList: ['汽车之家', 'aa', 'bb', 'ss'],
-      selectedForm: '汽车之家'
-    }
+      optionList: [],
+      selectedForm: '',
+    };
   },
-  computed:{
+  computed: {
     // 表格总页数
     totalPage() {
-      return Math.ceil(this.sum/this.pageSize);
+      return Math.ceil(this.sum / this.pageSize);
     },
     // 获取路由参数
     queryTag() {
-      console.log (111, this.$route.query);
-      return (this.$route.query && this.$route.query.tag) ? 0 : 1
-    }
+      console.log(111, this.$route.query);
+      return this.$route.query && this.$route.query.tag ? 0 : 1;
+    },
   },
   methods: {
     // 获取某一页面的数据，展示在表格
-    changePage: function(page) {
+    changePage: function (page) {
       this.currentPage = page;
       console.log(page);
     },
     // 点击上一页，下一页，首页，尾页
-    jumpPage: function(item) {
-      switch(item) {
+    jumpPage: function (item) {
+      switch (item) {
         case 1:
           this.currentPage = 1;
           break;
@@ -110,69 +111,194 @@ export default {
       console.log(this.currentPage);
     },
     // 获取数据
-    getData: function() {
+    getData: function () {
       this.tableData = [];
       this.functionData = [];
-      this.getDate.forEach( (element) => {
-        this.tableData.push(
-          {
-            time: element.time,
-            plate: element.plate,
-            num: element.num
-          }
-        );
-        this.functionData.push(
-          {
-            str: element.str
-          }
-        )
+      this.getDate.forEach((element) => {
+        this.tableData.push({
+          time: element.time,
+          plate: element.plate,
+          num: element.num,
+        });
+        this.functionData.push({
+          str: element.str,
+        });
       });
     },
     // 展示、隐藏模态框
-    showModal: function() {
+    showModal: function () {
       this.modalFlag = !this.modalFlag;
     },
     // 点击编辑
-    edit (index, newName) {
+    edit(index, newName) {
       console.log(this.functionData[index].str, newName);
     },
     // 点击删除
-    deleteData (index) {
-      console.log('删除', this.functionData[index].str)
+    deleteData(index) {
+      console.log("删除", this.functionData[index].str);
     },
     // 模态框保存
-    submit: function(time, num) {
-        console.log('保存', time, num);
-        this.modalFlag = false;
+    submit: function (time, num, id) {
+      time = time.replace('-','/');
+      console.log(time);
+      this.addMediaPublishInfo(+num, '2021/03', 'test', id);
+      this.modalFlag = false;
     },
     // slectPlatForm
-    slectPlatForm: function() {
-      console.log(this.selectedForm);
-    }
+    slectPlatForm: function (e) {
+      console.log(e.target.options.selectedIndex);
+      console.log(1111, this.selectedForm);
+    },
+    // 新增 接口
+    addMediaPublishInfo: function (publishCount, publishMonth, publishPlatformName, publishPlatformId) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/base/mediaPublishManager/addMediaPublishInfo",
+          data: {
+            publishCount,
+            publishMonth,
+            publishPlatformName,
+            publishPlatformId
+          },
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              console.log(res);
+              resolve();
+            } else {
+              alert("新增失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            reject(err);
+          });
+      });
+    },
+    // 获取列表 接口
+    selectMediaPublishList: function () {
+      this.$http({
+        method: "post",
+        url: "/base/mediaPublishManager/selectMediaPublishList",
+        data: {},
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            console.log(res);
+            // this.tableData = res.data.data;
+            this.sum = res.data.count;
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 编辑，接口
+    updateGroupInfo: function (id, platformName) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/group/updateGroupInfo",
+          data: {
+            id,
+            platformName,
+          },
+        })
+          .then((res) => {
+            console.log(res, 1111);
+            if (res.data && res.data.code === 200) {
+              console.log(res);
+              resolve();
+            } else {
+              alert("编辑失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("编辑失败，请重试");
+            console.log(err);
+            reject(err);
+          });
+      });
+    },
+    // 删除 接口
+    deleteGroupInfo: function (id) {
+      return new Promise((resolve, reject) => {
+        this.$http({
+          method: "post",
+          url: "/sys/group/deleteGroupInfo",
+          data: {
+            id,
+          },
+        })
+          .then((res) => {
+            if (res.data && res.data.code === 200) {
+              console.log(res);
+              resolve();
+            } else {
+              alert("编辑失败，请重试");
+              console.log(res);
+            }
+          })
+          .catch((err) => {
+            alert("编辑失败，请重试");
+            console.log(err);
+            reject(err);
+          });
+      });
+    },
+    // 获取平台列表 接口
+    selectPublishPlatformPage: function () {
+      this.$http({
+        method: "post",
+        url: "/base/publishPlatformManager/selectPublishPlatformPage",
+        data: {},
+      })
+        .then((res) => {
+          if (res.data && res.data.code === 200) {
+            console.log(res);
+            this.optionList = res.data.data;
+            this.selectedForm = this.optionList[0]['platformName'];
+          } else {
+            console.log(res);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
   mounted() {
     this.getData();
-  }
-}
+  },
+  created() {
+    this.selectMediaPublishList();
+    this.selectPublishPlatformPage();
+  },
+};
 </script>
 
 <style scoped lang="less">
-.link_upload{
-  .count{
-      margin-top: 10px;
+.link_upload {
+  .count {
+    margin-top: 10px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .select{
+    .select {
       display: flex;
       padding-left: 20px;
-      p{
+      p {
         height: 28px;
         line-height: 28px;
         width: 70px;
       }
-      select{
+      select {
         border: 1px solid #ccc;
         height: 28px;
         width: 144px;
@@ -180,7 +306,7 @@ export default {
       }
     }
   }
-  .page{
+  .page {
     display: flex;
   }
 }

src/views/parameter/components/LinkUpload/Modal.vue

@@ -8,7 +8,11 @@
         </div>
         <div class="plate">
           <p>选择平台</p>
-          <p>{{ selectedForm }}</p>
+          <select v-model="selectedForm" @change="slectPlatForm($event)">
+            <option v-for="(item, index) in optionList" :key="index">
+              {{ item.platformName }}
+            </option>
+          </select>
         </div>
         <div class="num">
           <p>设置上传数量</p>
@@ -30,15 +34,19 @@ export default {
       type: Boolean,
       default: false,
     },
-    selectedForm: {
-      type: String,
-      default: "",
+    optionList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
   },
   data() {
     return {
       time: "",
       num: 0,
+      selectedForm: this.optionList[0]['platformName'],
+      platformId: this.optionList[0]['id'],
     };
   },
   methods: {
@@ -55,7 +63,7 @@ export default {
       } else if (Math.ceil(num) !== num) {
         alert("请输入大于零的整数");
       } else {
-        this.$emit("submit", this.time, this.num);
+        this.$emit("submit", this.time, this.num, this.platformId);
       }
     },
     hideModal: function () {
@@ -64,7 +72,14 @@ export default {
     mousewheel: function (e) {
       e.preventDefault();
     },
+    slectPlatForm: function (e) {
+      let index = e.target.options.selectedIndex
+      this.platformId = this.optionList[index]['id']
+    },
   },
+  created() {
+    console.log(this.optionList);
+  }
 };
 </script>
 
@@ -109,6 +124,10 @@ export default {
       p {
         width: 100px;
       }
+      select{
+        height: 26px;
+        width: 144px;
+      }
     }
     .num {
       display: flex;