模板列表

src/api/template.js

@@ -51,10 +51,9 @@ export function templateDel(templateId) {
  */
 export function templateGetTagList(typeId) {
   return request({
-    url: '/template/get/tag/list',
+    url: '/template/get/tag/list/' + typeId,
     method: 'get',
     params: {
-      typeId
     }
   })
 }
@@ -70,6 +69,27 @@ export function templateGetTypeList() {
 }
 /**
  *
+ * @param {*} listQuery
+ * @param {*} p
+ * @param {*} c
+ * 获取模板列表
+ */
+export function getList(listQuery, p = 1, c = 20) {
+  return request({
+    url: '/template/get/list',
+    method: 'post',
+    data: {
+      typeId: listQuery.typeId,
+      tagId: listQuery.tagId,
+      templateName: listQuery.title
+    },
+    params: {
+      p, c
+    }
+  })
+}
+/**
+ *
  * @param {*} resourse
  * zip资源上传解压功能
  */

src/router/modules/templates.js

@@ -30,6 +30,20 @@ const templatesRouter = {
       component: () => import('@/views/template/template-list'),
       name: 'TemplateList',
       meta: { title: '模板列表' }
+    },
+    {
+      path: 'add',
+      component: () => import('@/views/template/template-add-detail'),
+      name: 'TemplateAdd',
+      hidden: true,
+      meta: { title: '添加模板' }
+    },
+    {
+      path: 'detail',
+      component: () => import('@/views/template/template-add-detail'),
+      name: 'TemplateDetail',
+      hidden: true,
+      meta: { title: '模板详情' }
     }
   ]
 }

src/store/modules/app.js

@@ -2,11 +2,23 @@ import Cookies from 'js-cookie'
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: Cookies.get('sidebarStatus')
+      ? !!+Cookies.get('sidebarStatus')
+      : true,
     withoutAnimation: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'medium'
+  size: Cookies.get('size') || 'medium',
+  showStatus: [
+    { id: 'HORIZONTAL', name: '横屏' },
+    { id: 'VERTICAL', name: '竖屏' },
+    { id: 'OTHER', name: '异形屏' }
+
+  ],
+  templateEnvironment: [
+    '自有设备',
+    '普通屏幕'
+  ]
 }
 
 const mutations = {

src/views/template/template-add-detail.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+
+      <!-- <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
+        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
+      </el-select> -->
+
+    </div>
+    <div>
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="left"
+        label-width="100px"
+        style="width: 400px; margin-left:50px;"
+      >
+        <el-form-item
+          label="模板类型"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.typeId"
+            placeholder="选择模板类型"
+            clearable
+            class="filter-item"
+            style="width: 130px"
+            @change="typeChange"
+          >
+            <el-option
+              v-for="item in typeList"
+              :key="item.typeId"
+              :label="item.typeName"
+              :value="item.typeId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="模板标签"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.tagIds"
+            placeholder="选择模板标签"
+            clearable
+            style="width: 130px"
+            class="filter-item"
+          >
+            <el-option
+              v-for="item in tagsList"
+              :key="item.tagId"
+              :label="item.tagName"
+              :value="item.tagId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="模板名称"
+
+          prop="title"
+        >
+          <el-input v-model="temp.templateName" placeholder="请输入模板名称" />
+        </el-form-item>
+        <el-form-item label="模板详情">
+          <el-input
+            v-model="temp.templateDescribe"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            type="textarea"
+            placeholder="请输入模板详情"
+          />
+        </el-form-item>
+        <el-form-item
+          label="适用设备"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.templateEnvironment"
+            class="filter-item"
+            placeholder="请选择适用设备"
+          >
+            <el-option
+              v-for="item in templateEnvironment"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="显示方式"
+          prop="type"
+        >
+          <el-select
+            v-model="temp.templateShow"
+            class="filter-item"
+            placeholder="请选择显示方式"
+          >
+            <el-option
+              v-for="item in showStatus"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="显示比列"
+          prop="timestamp"
+        >
+          <el-input v-model="temp.templateProportion" placeholder="" />:
+          <el-input v-model="temp.templateProportion" placeholder="" />
+        </el-form-item>
+
+        <el-form-item
+          label="模板包名称"
+
+          prop="title"
+        >
+          <el-input v-model="temp.templatePackageName" placeholder="请输入模板包名称" />
+        </el-form-item>
+        <el-form-item
+          label="上传模板包"
+
+          prop="title"
+        >
+          模板包
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createArticle, updateArticle } from '@/api/article'
+import {
+  templateGetTypeList,
+  templateGetTagList,
+  templateDel,
+  getList
+} from '@/api/template'
+import waves from '@/directive/waves' // waves directive
+
+export default {
+  name: 'ComplexTable',
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      typeList: null,
+      tagsList: null,
+      showStatus: this.$store.state.app.showStatus,
+      templateEnvironment: this.$store.state.app.templateEnvironment,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        typeId: undefined,
+        title: '',
+        tagId: undefined,
+        sort: '+id'
+      },
+      importanceOptions: [1, 2, 3],
+      sortOptions: [
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
+      ],
+      statusOptions: ['published', 'draft', 'deleted'],
+      showReviewer: false,
+      temp: {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        type: '',
+        status: 'published'
+      },
+      dialogFormVisible: true,
+      dialogStatus: '',
+      textMap: {
+        update: 'Edit',
+        create: 'Create'
+      },
+      dialogPvVisible: false,
+      pvData: [],
+      rules: {
+        type: [
+          { required: true, message: 'type is required', trigger: 'change' }
+        ],
+        timestamp: [
+          {
+            type: 'date',
+            required: true,
+            message: 'timestamp is required',
+            trigger: 'change'
+          }
+        ],
+        title: [
+          { required: true, message: 'title is required', trigger: 'blur' }
+        ]
+      },
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.getList()
+    this.getTypeList()
+    this.getTagsList()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      getList(this.listQuery, this.listQuery.page, this.listQuery.limit).then(
+        response => {
+          this.list = response.list
+          this.total = response.count
+          // Just to simulate the time of the request
+          setTimeout(() => {
+            this.listLoading = false
+          }, 1.5 * 1000)
+        }
+      )
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    getTypeList() {
+      templateGetTypeList().then(res => {
+        this.typeList = res
+      })
+    },
+    getTagsList() {
+      templateGetTagList(this.listQuery.typeId).then(res => {
+        this.tagsList = res
+      })
+    },
+    typeChange(value) {
+      this.listQuery.tagId = undefined
+      this.getTagsList()
+    },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        importance: 1,
+        remark: '',
+        timestamp: new Date(),
+        title: '',
+        status: 'published',
+        type: ''
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
+          this.temp.author = 'vue-element-admin'
+          createArticle(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Created Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj
+      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const tempData = Object.assign({}, this.temp)
+          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
+          updateArticle(tempData).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogFormVisible = false
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+          })
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$confirm('此操作将删除该模板, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          templateDel(row.templateId).then(() => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+            this.getList()
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    getSortClass: function(key) {
+      const sort = this.listQuery.sort
+      return sort === `+${key}`
+        ? 'ascending'
+        : sort === `-${key}`
+          ? 'descending'
+          : ''
+    }
+  }
+}
+</script>

src/views/template/template-type-detail.vue

 <template>
   <div class="app-container">
     <div class="detail-form">
+      <div class="detail-form-title">类型信息</div>
       <el-form
-        ref="dataForm"
+        ref="dataForm2"
         :rules="rules"
         :model="detailTemp"
         label-position="left"
@@ -22,6 +23,14 @@
           <el-input v-model="detailTemp.typeName" />
         </el-form-item>
       </el-form>
+      <div class="detail-form-btn">
+        <el-button
+          type="primary"
+          @click="updateTypeData"
+        >
+          保存
+        </el-button>
+      </div>
     </div>
     <div class="filter-container">
 
@@ -29,7 +38,6 @@
         class="filter-item"
         style="margin-left: 10px;"
         type="primary"
-        icon="el-icon-edit"
         @click="handleCreate"
       >
         新增标签
@@ -60,7 +68,7 @@
         </template> -->
       </el-table-column>
       <el-table-column
-        label="模板类型名称"
+        label="标签名称"
         width="auto"
         align="center"
       >
@@ -157,59 +165,21 @@
         </el-button>
       </div>
     </el-dialog>
-
-    <el-dialog
-      :visible.sync="dialogPvVisible"
-      title="Reading statistics"
-    >
-      <el-table
-        :data="pvData"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%"
-      >
-        <el-table-column
-          prop="key"
-          label="Channel"
-        />
-        <el-table-column
-          prop="pv"
-          label="Pv"
-        />
-      </el-table>
-      <span
-        slot="footer"
-        class="dialog-footer"
-      >
-        <el-button
-          type="primary"
-          @click="dialogPvVisible = false"
-        >Confirm</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { fetchPv } from '@/api/article'
-import { getTypeTagList, typeAddTag, typeDelTag, getTypeDetail, typeUpdateTagInfo } from '@/api/menu'
+import {
+  getTypeTagList,
+  typeAddTag,
+  typeDelTag,
+  getTypeDetail,
+  typeUpdateTagInfo,
+  typeUpdateInfo
+} from '@/api/menu'
 import waves from '@/directive/waves' // waves directive
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
-const calendarTypeOptions = [
-  { key: 'CN', display_name: 'China' },
-  { key: 'US', display_name: 'USA' },
-  { key: 'JP', display_name: 'Japan' },
-  { key: 'EU', display_name: 'Eurozone' }
-]
-
-// arr to obj, such as { CN : "China", US : "USA" }
-const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
-  acc[cur.key] = cur.display_name
-  return acc
-}, {})
-
 export default {
   name: 'ComplexTable',
   components: { Pagination },
@@ -222,9 +192,6 @@ export default {
         deleted: 'danger'
       }
       return statusMap[status]
-    },
-    typeFilter(type) {
-      return calendarTypeKeyValue[type]
     }
   },
   data() {
@@ -241,15 +208,14 @@ export default {
         type: undefined,
         sort: '+id'
       },
-      calendarTypeOptions,
       showReviewer: false,
       temp: {
         typeMenuOrde: 0,
         typeMenuName: ''
       },
       detailTemp: {
-        typeMenuOrde: 0,
-        typeMenuName: ''
+        typeOrder: 0,
+        typeName: ''
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -404,7 +370,7 @@ export default {
     updateData() {
       this.$refs['dataForm'].validate(valid => {
         if (valid) {
-          typeUpdateTagInfo(this.$route.query.typeId, this.temp.tagName).then(() => {
+          typeUpdateTagInfo(this.temp.tagId, this.temp.tagName).then(() => {
             for (const v of this.list) {
               if (v.tagId === this.temp.tagId) {
                 const index = this.list.indexOf(v)
@@ -423,8 +389,26 @@ export default {
         }
       })
     },
+    updateTypeData() {
+      this.$refs['dataForm2'].validate(valid => {
+        if (valid) {
+          typeUpdateInfo(
+            this.detailTemp.typeName,
+            this.$route.query.typeId
+          ).then(() => {
+            this.$notify({
+              title: 'Success',
+              message: 'Update Successfully',
+              type: 'success',
+              duration: 2000
+            })
+            // this.getDetail()
+          })
+        }
+      })
+    },
     handleDelete(row) {
-      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+      this.$confirm('此操作将删除该标签, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -445,12 +429,6 @@ export default {
           })
         })
     },
-    handleFetchPv(pv) {
-      fetchPv(pv).then(response => {
-        this.pvData = response.data.pvData
-        this.dialogPvVisible = true
-      })
-    },
     getSortClass: function(key) {
       const sort = this.listQuery.sort
       return sort === `+${key}`
@@ -462,3 +440,16 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.detail-form {
+  border: 1px solid #dfe6ec;
+  padding: 20px;
+  margin-bottom: 30px;
+  &-title {
+    font-size: 20px;
+  }
+  &-btn {
+    padding-left: 0;
+  }
+}
+</style>

src/views/template/template-type.vue

@@ -399,7 +399,7 @@ export default {
       })
     },
     handleDelete(row) {
-      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'