页面修改

src/components/WebSet/WebSiteAdmanage.vue

@@ -2,24 +2,28 @@
   .WebSiteAdmanage .el-button.is-circle {
     padding: 6px;
   }
-  .webSiteUp{
-    min-height:150px;
-    border:2px dashed #d1d1d1;
+
+  .webSiteUp {
+    min-height: 150px;
+    border: 2px dashed #d1d1d1;
     position: relative;
-    margin-top:10px;
+    margin-top: 10px;
     line-height: 150px;
   }
+
   .webSiteUp i {
     font-size: 50px;
     color: #d1d1d1;
-    left:43%;
+    left: 43%;
     cursor: pointer;
     position: absolute;
-    top:0;
-}
-.web_imgUrl{
+    top: 0;
+  }
+
+  .web_imgUrl {
     max-width: 100%;
-}
+  }
+
 </style>
 <template>
   <!--廣告版面管理(广告管理)-->
@@ -28,7 +32,7 @@
       <ul>
         <li>
           <label>名称</label>
-          <el-input v-model="msg.name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
+          <el-input v-model="msg.AdName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
           </el-input>
         </li>
         <li>
@@ -39,35 +43,32 @@
       </ul>
     </div>
     <div>
-      <el-table :data="dataList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
-        <el-table-column prop="openState" label="开放状态" sortable>
+      <el-table :data="dataList" style="width: 100%" v-loading="loading"
+        :default-sort="{prop: 'date', order: 'descending'}">
+        <el-table-column prop="IsOpen" label="开放状态" sortable>
           <template slot-scope="scope">
-            <el-switch v-model="scope.row.openState" :active-value="1" :inactive-value="0" active-color="#13ce66"
-              inactive-color="#ff4949"></el-switch>
+            <el-switch v-model="scope.row.IsOpen" :active-value="1" :inactive-value="0" active-color="#13ce66"
+              inactive-color="#dcdfe6" @change="UpdateAdIsOpen(scope.row)"></el-switch>
           </template>
         </el-table-column>
-        <el-table-column prop="name" label="广告名称" sortable>
+        <el-table-column prop="AdName" label="广告名称" sortable>
         </el-table-column>
-        <el-table-column prop="newMember" label="新增人员" sortable>
-
+        <el-table-column prop="CreateByName" label="新增人员" sortable>
         </el-table-column>
-        <el-table-column prop="startDate" label="活动开始时间" sortable>
-
+        <el-table-column prop="AdStartTimeStr" label="活动开始时间" sortable>
         </el-table-column>
-        <el-table-column prop="endDate" label="活动结束时间" sortable>
-
+        <el-table-column prop="AdEndTimeStr" label="活动结束时间" sortable>
         </el-table-column>
-
-        <el-table-column prop="UpdateDate" label="最后更新时间" sortable>
+        <el-table-column prop="UpdateTimeStr" label="最后更新时间" sortable>
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
-              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(index)">
+              <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
               </el-button>
             </el-tooltip>
             <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
-              <el-button type="danger" icon="el-icon-delete" circle @click="deletelist(index)"></el-button>
+              <el-button type="danger" icon="el-icon-delete" circle @click="deletelist(scope.row)"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -76,16 +77,15 @@
         {{$t('system.content_noData')}}
       </div>
       <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
-        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total=total>
+        layout="total,prev, pager, next, jumper" :page-size='msg.pageSize' :total="total">
       </el-pagination>
     </div>
-
     <el-dialog title="广告版面设定" :visible.sync="outerVisible" center width="1200px;">
       <el-form :model="addMsg" ref="addMsg" label-width="200px">
         <el-row>
           <el-col :span="24">
             <el-form-item label="广告版面名称" label-width="120px">
-                <el-input type="text" v-model="addMsg.name">
+              <el-input type="text" v-model="addMsg.AdName" maxlength="50">
               </el-input>
             </el-form-item>
           </el-col>
@@ -94,35 +94,35 @@
           <el-col :span="10">
             <div>上传档案请小于3M</div>
             <div class="webSiteUp">
-                  <el-upload v-if="addMsg.imgUrl==''" :http-request="UploadImage" :multiple="true"
+              <el-upload v-if="addMsg.AdImg==''" :http-request="UploadImage" :multiple="true"
                 accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
                 <div class="addIconDiv">
                   <i class="web_addImg iconfont icon-img_haha"></i>
                 </div>
               </el-upload>
-                  <img v-else :src="addMsg.imgUrl" class="web_imgUrl" alt=""/>
+              <img v-else :src="addMsg.AdImg" class="web_imgUrl" alt="" />
             </div>
           </el-col>
           <el-col :span="14">
             <el-form-item label="目标链接网址">
-                <el-input type="text" v-model="addMsg.linkUrl">
+              <el-input type="text" v-model="addMsg.AdLink" maxlength="200">
               </el-input>
             </el-form-item>
             <el-form-item label="活动开始时间">
-                <el-input type="text" v-model="addMsg.startDate">
-                </el-input>
+              <el-date-picker v-model="addMsg.AdStartTime" type="date"  value-format="yyyy-MM-dd" placeholder="活动开始时间">
+              </el-date-picker>
             </el-form-item>
             <el-form-item label="活动结束时间">
-                <el-input type="text" v-model="addMsg.endDate">
-                </el-input>
+              <el-date-picker v-model="addMsg.AdEndTime" type="date"  value-format="yyyy-MM-dd" placeholder="活动结束时间">
+              </el-date-picker>
             </el-form-item>
             <el-form-item label="设定页面显示位置">
-              <el-radio v-model="addMsg.position" :label="1">靠左</el-radio>
-              <el-radio v-model="addMsg.position" :label="2">靠右</el-radio>
+              <el-radio v-model="addMsg.AdPosition" :label="0">靠左</el-radio>
+              <el-radio v-model="addMsg.AdPosition" :label="1">靠右</el-radio>
             </el-form-item>
             <el-form-item label="点选广告后是否开新窗口">
-              <el-radio v-model="addMsg.isNewwindow" :label="1">是</el-radio>
-              <el-radio v-model="addMsg.isNewwindow" :label="2">否</el-radio>
+              <el-radio v-model="addMsg.IsNewOpen" :label="0">否</el-radio>
+              <el-radio v-model="addMsg.IsNewOpen" :label="1">是</el-radio>
             </el-form-item>
             <el-form-item label="显示页面">
               <el-checkbox-group v-model="checkedVal">
@@ -137,8 +137,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
-        <button class="hollowFixedBtn"
-          @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
+        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
       </div>
     </el-dialog>
   </div>
@@ -147,40 +146,27 @@
   export default {
     data() {
       return {
+        loading: false,
         msg: {
-          name: '', //名称
+          AdName: '', //名称
           pageSize: 15,
           pageIndex: 1,
         },
-        checkedVal:[],
+        checkedVal: [],
         total: 0,
         currentPage: 1,
         //弹窗
         outerVisible: false,
-        dataList: [{
-          openState: 1, //开放状态
-          name: '当地一日游', //广告名称
-          newMember: '测试账号', //新增人员
-          startDate: '2019-10-21', //活动开放时间
-          endDate: '2019-10-31', //活动结束时间
-          UpdateDate: '2016-05-02', //最后更新时间
-         }, {
-          openState: 0,
-          name: '当地二日游',
-          newMember: '测试账号',
-          startDate: '2019-10-21',
-          endDate: '2019-10-31',
-          UpdateDate: '2016-05-02',
-        }],
-        addMsg:{
-          name:'', //广告名称
-          imgUrl:'', //上传图片
-          linkUrl:'', //目标链接网址
-          startDate:'', //活动开始时间
-          endDate:'', //活动结束时间
-          position:1,  //设定页面显示位置
-          isNewwindow:1, //点选广告后是否开新视窗
-          xianshi:'1'//显示页面
+        dataList: [],
+        addMsg: {
+          AdName: '', //广告名称
+          AdImg: '', //上传图片
+          AdLink: '', //目标链接网址
+          AdStartTime: '', //活动开始时间
+          AdEndTime: '', //活动结束时间
+          AdPosition: 1, //设定页面显示位置
+          IsNewOpen: 1, //点选广告后是否开新视窗
+          xianshi: '1' //显示页面
         },
       }
     },
@@ -190,7 +176,23 @@
     methods: {
       //获取配置
       getData() {
-
+        //获取现有线路列表
+        this.loading = true;
+        this.apipost(
+          "ws_get_GetAdmanagePageList",
+          this.msg,
+          res => {
+            this.loading = false;
+            console.log("res.data", res.data)
+            if (res.data.resultCode == 1) {
+              this.dataList = res.data.data.pageData;
+              this.total = res.data.data.count
+            } else {
+              this.loading = false;
+            }
+          },
+          err => {}
+        );
       },
       handleCurrentChange(val) {
         //翻页功能按钮
@@ -202,30 +204,90 @@
         this.msg.pageIndex = 1;
         this.currentPage = 1;
       },
+      //更新广告状态
+      UpdateAdIsOpen(item) {
+        this.apipost(
+          "ws_post_UpdateAdmanageIsOpen", {
+            Id: item.Id,
+            IsOpen: item.IsOpen
+          },
+          res => {
+            if (res.data.resultCode == 1) {
+              this.Success(res.data.message);
+              this.getData();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
       //修改
-      updateData(index) {
+      updateData(item) {
+        this.apipost(
+          "ws_get_GetAdmanage", {
+            Id: item.Id,
 
           },
-      //删除
-      deletelist(index) {
+          res => {
+            console.log("HKHK", res.data.data);
+            if (res.data.resultCode == 1) {
 
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //删除广告
+      deletelist(item) {
+        var that = this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "ws_post_RemoveAdmanage", {
+              Id: item.Id
             },
-      //新增
-      submitForm(addMsg){
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getData();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+            null
+          );
+        });
+      },
+      //清空数据
+      clearMsg() {
 
+      },
+      //新增、修改广告
+      submitForm(addMsg) {
+        this.apipost(
+          "ws_post_SetAdmanage", this.addMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.getData();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
       },
       //上传图片
       UploadImage(file) {
-        console.log(file);
         let newArr = [];
         newArr.push(file.file);
         let fileName = file.file.name;
-        var path = "/Upload/DMC/";
+        var path = "/Upload/WebSite/";
         this.UploadSelfFileT(path, newArr, x => {
-          console.log(x,'xxxx');
           var str = x.data.FilePath;
           var imgUrl = this.domainManager().ViittoFileUrl + str;
-          this.addMsg.imgUrl=imgUrl;
+          this.addMsg.AdImg = imgUrl;
         });
       },