修改页面

src/components/WebSet/WebSiteAdmanage.vue

+<style>
+  .WebSiteAdmanage .el-button.is-circle {
+    padding: 6px;
+  }
+  .webSiteUp{
+    min-height:150px;
+    border:2px dashed #d1d1d1;
+    position: relative;
+    margin-top:10px;
+    line-height: 150px;
+  }
+  .webSiteUp i {
+    font-size: 50px;
+    color: #d1d1d1;
+    left:43%;
+    cursor: pointer;
+    position: absolute;
+    top:0;
+}
+.web_imgUrl{
+  max-width: 100%;
+}
+</style>
 <template>
   <!--廣告版面管理(广告管理)-->
   <div class="WebSiteAdmanage">
-    广告管理
+    <div class="query-box">
+      <ul>
+        <li>
+          <label>名称</label>
+          <el-input v-model="msg.name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getData" class="w210">
+          </el-input>
+        </li>
+        <li>
+          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
+            @click="resetPageIndex(),getData()" />
+          <input type="button" class="normalBtn" @click="outerVisible=true" :value="$t('pub.addBtn')" />
+        </li>
+      </ul>
+    </div>
+    <div>
+      <el-table :data="dataList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
+        <el-table-column prop="openState" 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>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="广告名称" sortable>
+        </el-table-column>
+        <el-table-column prop="newMember" label="新增人员" sortable>
+
+        </el-table-column>
+        <el-table-column prop="startDate" label="活动开始时间" sortable>
+
+        </el-table-column>
+        <el-table-column prop="endDate" label="活动结束时间" sortable>
+
+        </el-table-column>
+
+        <el-table-column prop="UpdateDate" 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>
+            </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-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="noData" v-if="dataList.length==0">
+        {{$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>
+      </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>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="10">
+              <div>上传档案请小于3M</div>
+              <div class="webSiteUp">
+                  <el-upload v-if="addMsg.imgUrl==''" :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=""/>
+              </div>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="目标链接网址">
+                <el-input type="text" v-model="addMsg.linkUrl">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="活动开始时间">
+                <el-input type="text" v-model="addMsg.startDate">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="活动结束时间">
+                <el-input type="text" v-model="addMsg.endDate">
+                </el-input>
+            </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-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-form-item>
+            <el-form-item label="显示页面">
+                <el-checkbox-group v-model="checkedVal">
+                  <el-checkbox>首页</el-checkbox>
+                  <el-checkbox>首页</el-checkbox>
+                  <el-checkbox>首页</el-checkbox>
+                  <el-checkbox>首页</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </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>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        obj: {}
-      };
+        msg: {
+          name: '', //名称
+          pageSize: 15,
+          pageIndex: 1,
+        },
+        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'//显示页面
+        },
+      }
     },
     mounted() {
       this.getData();
@@ -18,7 +191,44 @@
       //获取配置
       getData() {
 
-      }
+      },
+      handleCurrentChange(val) {
+        //翻页功能按钮
+        this.msg.pageIndex = val;
+        this.getData();
+      },
+      resetPageIndex() {
+        //查询初始化页码
+        this.msg.pageIndex = 1;
+        this.currentPage = 1;
+      },
+      //修改
+      updateData(index) {
+
+      },
+      //删除
+      deletelist(index) {
+
+      },
+      //新增
+      submitForm(addMsg){
+
+      },
+      //上传图片
+      UploadImage(file) {
+        console.log(file);
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/DMC/";
+        this.UploadSelfFileT(path, newArr, x => {
+          console.log(x,'xxxx');
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.addMsg.imgUrl=imgUrl;
+        });
+      },
+
     }
   }