猫舍管理 运营管理

src/views/ohplay/operation/index.vue

@@ -6,85 +6,43 @@
         :src="item.url" @click="getActive(item.id)" />
       <el-image :src="require('@/assets/images/ohplay/comment.png')" />
     </div>
-    <div class="isShow" v-if="active === 1">
-      <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
-        <el-form-item label-width="auto" :label='`广告位${ index + 1 }`' />
-        <el-form-item label="Banner：">
-          <Upload listType="picture-card" :url="form.banner" measure="343*140" @upload="getUpload" />
-        </el-form-item>
-        <el-form-item label="选择日期：">
-          <el-date-picker v-model="date" size="small" type="datetimerange" start-placeholder="开始时间"
-            end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
-        </el-form-item>
-        <el-form-item label="跳转：">
-          <el-select v-model="form.skip" placeholder="请选择跳转页面">
-            <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
-              :value="item.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网址：">
-          <el-input v-model="form.skipUrl" placeholder="请输入网址" />
-        </el-form-item>
-        <el-form-item>
-          <el-button>清空</el-button>
-          <el-button type="primary" @click="getSubmit">确定</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="isShow" v-if="active === 2">
-      <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
-        <el-form-item label-width="auto" :label='`推荐位${ index + 1 }`' />
-        <el-form-item label="Banner：">
-          <Upload listType="picture-card" :url="form.banner" measure="100*100" @upload="getUpload" />
-        </el-form-item>
-        <el-form-item label="选择日期：">
-          <el-date-picker v-model="date" size="small" type="datetimerange" start-placeholder="开始时间"
-            end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
-        </el-form-item>
-        <el-form-item label="跳转：">
-          <el-select v-model="form.skip" placeholder="请选择跳转页面">
-            <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
-              :value="item.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网址：">
-          <el-input v-model="form.skipUrl" placeholder="请输入网址" />
-        </el-form-item>
-        <el-form-item>
-          <el-button>清空</el-button>
-          <el-button type="primary" @click="getSubmit">确定</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="isShow" v-if="active === 3">
-      <el-form label-width="100px" v-for="(item, index) in 4" :key="index">
-        <el-form-item label-width="auto" :label='`快捷位${index + 1}`' />
-        <el-form-item label="文字：">
-          <el-input placeholder="请输入快捷按钮文字" />
-        </el-form-item>
-        <el-form-item label="选择日期：">
-          <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
-            value-format="yyyy-MM-dd HH:mm:ss" />
-        </el-form-item>
-        <el-form-item label="跳转：">
-          <el-select placeholder="请选择跳转页面">
-            <el-option />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网址：">
-          <el-input placeholder="请输入网址" />
-        </el-form-item>
-        <el-form-item>
-          <el-button>清空</el-button>
-          <el-button type="primary" @click="getSubmit">确定</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+
+    <keep-alive>
+      <div class="isShow">
+        <el-button v-if="isShow()" type="primary" icon="el-icon-plus" @click="getAdd">添加</el-button>
+        <el-form label-width="100px" v-for="(item, index) in list" :key="index">
+          <el-link :underline="false" class="close" icon="el-icon-close" @click="getDelete(item.id)" />
+          <el-form-item :label="label + (index + 1)" />
+          <el-form-item v-if="active === 3" label="文字：">
+            <el-input v-model="item.script" placeholder="请输入快捷按钮文字" />
+          </el-form-item>
+          <el-form-item v-else label="Banner：">
+            <Upload listType="picture-card" :url="item.banner" measure="343*140" @upload="getUpload" />
+          </el-form-item>
+          <el-form-item label="选择日期：">
+            <el-date-picker v-model="item.date" size="small" type="datetimerange" start-placeholder="开始时间"
+              end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
+          </el-form-item>
+          <el-form-item label="跳转：">
+            <el-select v-model="item.skip" placeholder="请选择跳转页面">
+              <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
+                :value="Number(item.value)" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网址：">
+            <el-input v-model="item.skipUrl" placeholder="请输入网址" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getSubmit(item, index)">确定</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </keep-alive>
   </div>
 </template>
 
 <script>
-import { create, list } from '@/api/ohplay/operation'
+import { create, list, remove, edit } from '@/api/ohplay/operation'
 import Upload from "@/components/Upload/index"
 export default {
   components: {
@@ -104,17 +62,12 @@ export default {
         url: require('@/assets/images/ohplay/shortcut.png')
       }],
       active: 1,
-      form: {},
-      date: [],
+      label: '广告位',
+      pic: '',
+      // 列表
       list: [],
     }
   },
-  watch: {
-    date(val) {
-      this.form.startCreateTime = val[0]
-      this.form.updateTime = val[1]
-    }
-  },
   mounted() {
     this.getList()
   },
@@ -123,36 +76,92 @@ export default {
     getActive(id) {
       if (this.active !== id) {
         this.active = id
-        this.form = {}
-        this.date = []
+        this.label = id === 1 ? '广告位' : id === 2 ? '推广位' : '快捷位'
         this.getList()
       }
     },
 
+    // 添加
+    getAdd() {
+      this.list.push({})
+    },
+
+    // 隐藏添加按钮
+    isShow() {
+      return this.active === 3 ? this.list.length < 4 ? true : false : this.list.length < 6 ? true : false
+    },
+
+    // 删除
+    getDelete(id) {
+      this.$confirm('是否删除？', '提示', {
+        'confirmButtonText': '确定',
+        'cancelButtonText': '取消',
+        type: 'warning'
+      }).then(() => {
+        remove(id).then(res => {
+          console.log(res);
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
     // 列表
     getList() {
-      let type = this.active === 1 ? '' : this.active === 2 ? 0 : 1
+      let type = this.active === 1 ? 2 : this.active === 2 ? 0 : 1
+      this.list = []
       list({
         type: type
       }).then(res => {
-        console.log(res);
         if (res.code === 0) {
-          this.list = res.data
+          if (res.data) {
+            res.data.map(i => {
+              this.list.push({
+                date: [i.startCreateTime, i.endCreateTime],
+                ...i
+              })
+            })
+          }
         }
       })
     },
 
     // 上传图片
     getUpload(e) {
-      this.form.banner = e.file
+      this.pic = e.file
     },
 
-    // 新增
-    getSubmit() {
-      this.form.type = this.active === 1 ? '' : this.active === 2 ? 0 : 1
-      create(this.form).then(res => {
-        console.log(res);
-      })
+    // 新增 编辑
+    getSubmit(item, index) {
+      let form = {
+        type: this.active === 1 ? 2 : this.active === 2 ? 0 : 1,
+        startCreateTime: item.date[0],
+        endCreateTime: item.date[1],
+        sort: index + 1,
+        skip: item.skip,
+        skipUrl: item.skipUrl,
+        script: item.script
+      }
+      if (item.id) {
+        form.id = item.id
+        form.banner = item.banner
+        edit(form).then(res => {
+          if (res.code === 0) {
+            this.$message.success('修改成功！')
+            this.getList()
+          }
+        })
+      } else {
+        form.banner = this.pic
+        create(form).then(res => {
+          if (res.code === 0) {
+            this.$message.success('创建成功！')
+            this.getList()
+          }
+        })
+      }
     }
   }
 }
@@ -171,14 +180,21 @@ export default {
 .isShow {
   width: calc(100% - 400px);
   margin-left: 20px;
-  display: flex;
-  flex-wrap: wrap;
 
   .el-form {
+    width: 500px;
     border: 1px solid #dcdfe6;
     padding: 20px;
     box-shadow: 5px 5px 5px 0px #dcdfe6;
     margin: 0 20px 20px 0;
+    position: relative;
+
+    .close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      z-index: 99;
+    }
   }
 }