主题库完善

src/utils/index.js

@@ -5,76 +5,76 @@
  * @returns {string}
  */
 export function parseTime(time, cFormat) {
-    if (arguments.length === 0) {
-        return null
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'undefined' || time === null || time === 'null') {
+    return ''
+  } else if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
     }
-    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-    let date
-    if (typeof time === 'undefined' || time === null || time === 'null') {
-        return ''
-    } else if (typeof time === 'object') {
-        date = time
-    } else {
-        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-            time = parseInt(time)
-        }
-        if ((typeof time === 'number') && (time.toString().length === 10)) {
-            time = time * 1000
-        }
-        date = new Date(time)
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
     }
-    const formatObj = {
-        y: date.getFullYear(),
-        m: date.getMonth() + 1,
-        d: date.getDate(),
-        h: date.getHours(),
-        i: date.getMinutes(),
-        s: date.getSeconds(),
-        a: date.getDay()
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
     }
-    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-        let value = formatObj[key]
-            // Note: getDay() returns 0 on Sunday
-        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
-        if (result.length > 0 && value < 10) {
-            value = '0' + value
-        }
-        return value || 0
-    })
-    return time_str
+    return value || 0
+  })
+  return time_str
 }
 
-/**  
+/**
  * @param {number} time
  * @param {string} option
  * @returns {string}
  */
 export function formatTime(time, option) {
-    if (('' + time).length === 10) {
-        time = parseInt(time) * 1000
-    } else {
-        time = +time
-    }
-    const d = new Date(time)
-    const now = Date.now()
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
 
-    const diff = (now - d) / 1000
+  const diff = (now - d) / 1000
 
-    if (diff < 30) {
-        return '刚刚'
-    } else if (diff < 3600) {
-        // less 1 hour
-        return Math.ceil(diff / 60) + '分钟前'
-    } else if (diff < 3600 * 24) {
-        return Math.ceil(diff / 3600) + '小时前'
-    } else if (diff < 3600 * 24 * 2) {
-        return '1天前'
-    }
-    if (option) {
-        return parseTime(time, option)
-    } else {
-        return (
-            d.getMonth() +
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return (
+      d.getMonth() +
             1 +
             '月' +
             d.getDate() +
@@ -83,8 +83,8 @@ export function formatTime(time, option) {
             '时' +
             d.getMinutes() +
             '分'
-        )
-    }
+    )
+  }
 }
 
 /**
@@ -92,18 +92,18 @@ export function formatTime(time, option) {
  * @returns {Object}
  */
 export function getQueryObject(url) {
-    url = url == null ? window.location.href : url
-    const search = url.substring(url.lastIndexOf('?') + 1)
-    const obj = {}
-    const reg = /([^?&=]+)=([^?&=]*)/g
-    search.replace(reg, (rs, $1, $2) => {
-        const name = decodeURIComponent($1)
-        let val = decodeURIComponent($2)
-        val = String(val)
-        obj[name] = val
-        return rs
-    })
-    return obj
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
 }
 
 /**
@@ -111,15 +111,15 @@ export function getQueryObject(url) {
  * @returns {number} output value
  */
 export function byteLength(str) {
-    // returns the byte length of an utf8 string
-    let s = str.length
-    for (var i = str.length - 1; i >= 0; i--) {
-        const code = str.charCodeAt(i)
-        if (code > 0x7f && code <= 0x7ff) s++
-            else if (code > 0x7ff && code <= 0xffff) s += 2
-        if (code >= 0xDC00 && code <= 0xDFFF) i--
-    }
-    return s
+  // returns the byte length of an utf8 string
+  let s = str.length
+  for (var i = str.length - 1; i >= 0; i--) {
+    const code = str.charCodeAt(i)
+    if (code > 0x7f && code <= 0x7ff) s++
+    else if (code > 0x7ff && code <= 0xffff) s += 2
+    if (code >= 0xDC00 && code <= 0xDFFF) i--
+  }
+  return s
 }
 
 /**
@@ -127,13 +127,13 @@ export function byteLength(str) {
  * @returns {Array}
  */
 export function cleanArray(actual) {
-    const newArray = []
-    for (let i = 0; i < actual.length; i++) {
-        if (actual[i]) {
-            newArray.push(actual[i])
-        }
+  const newArray = []
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i])
     }
-    return newArray
+  }
+  return newArray
 }
 
 /**
@@ -141,13 +141,13 @@ export function cleanArray(actual) {
  * @returns {Array}
  */
 export function param(json) {
-    if (!json) return ''
-    return cleanArray(
-        Object.keys(json).map(key => {
-            if (json[key] === undefined) return ''
-            return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
-        })
-    ).join('&')
+  if (!json) return ''
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return ''
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    })
+  ).join('&')
 }
 
 /**
@@ -155,19 +155,19 @@ export function param(json) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-    const search = url.split('?')[1]
-    if (!search) {
-        return {}
-    }
-    return JSON.parse(
-        '{"' +
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
         decodeURIComponent(search)
-        .replace(/"/g, '\\"')
-        .replace(/&/g, '","')
-        .replace(/=/g, '":"')
-        .replace(/\+/g, ' ') +
+          .replace(/"/g, '\\"')
+          .replace(/&/g, '","')
+          .replace(/=/g, '":"')
+          .replace(/\+/g, ' ') +
         '"}'
-    )
+  )
 }
 
 /**
@@ -175,9 +175,9 @@ export function param2Obj(url) {
  * @returns {string}
  */
 export function html2Text(val) {
-    const div = document.createElement('div')
-    div.innerHTML = val
-    return div.textContent || div.innerText
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
 }
 
 /**
@@ -187,21 +187,21 @@ export function html2Text(val) {
  * @returns {Object}
  */
 export function objectMerge(target, source) {
-    if (typeof target !== 'object') {
-        target = {}
-    }
-    if (Array.isArray(source)) {
-        return source.slice()
+  if (typeof target !== 'object') {
+    target = {}
+  }
+  if (Array.isArray(source)) {
+    return source.slice()
+  }
+  Object.keys(source).forEach(property => {
+    const sourceProperty = source[property]
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty)
+    } else {
+      target[property] = sourceProperty
     }
-    Object.keys(source).forEach(property => {
-        const sourceProperty = source[property]
-        if (typeof sourceProperty === 'object') {
-            target[property] = objectMerge(target[property], sourceProperty)
-        } else {
-            target[property] = sourceProperty
-        }
-    })
-    return target
+  })
+  return target
 }
 
 /**
@@ -209,19 +209,19 @@ export function objectMerge(target, source) {
  * @param {string} className
  */
 export function toggleClass(element, className) {
-    if (!element || !className) {
-        return
-    }
-    let classString = element.className
-    const nameIndex = classString.indexOf(className)
-    if (nameIndex === -1) {
-        classString += '' + className
-    } else {
-        classString =
+  if (!element || !className) {
+    return
+  }
+  let classString = element.className
+  const nameIndex = classString.indexOf(className)
+  if (nameIndex === -1) {
+    classString += '' + className
+  } else {
+    classString =
             classString.substr(0, nameIndex) +
             classString.substr(nameIndex + className.length)
-    }
-    element.className = classString
+  }
+  element.className = classString
 }
 
 /**
@@ -229,11 +229,11 @@ export function toggleClass(element, className) {
  * @returns {Date}
  */
 export function getTime(type) {
-    if (type === 'start') {
-        return new Date().getTime() - 3600 * 1000 * 24 * 90
-    } else {
-        return new Date(new Date().toDateString())
-    }
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  } else {
+    return new Date(new Date().toDateString())
+  }
 }
 
 /**
@@ -243,38 +243,38 @@ export function getTime(type) {
  * @return {*}
  */
 export function debounce(func, wait, immediate) {
-    let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result
 
-    const later = function() {
-        // 据上一次触发时间间隔
-        const last = +new Date() - timestamp
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
 
-        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
-        if (last < wait && last > 0) {
-            timeout = setTimeout(later, wait - last)
-        } else {
-            timeout = null
-                // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-            if (!immediate) {
-                result = func.apply(context, args)
-                if (!timeout) context = args = null
-            }
-        }
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
     }
+  }
 
-    return function(...args) {
-        context = this
-        timestamp = +new Date()
-        const callNow = immediate && !timeout
-            // 如果延时不存在，重新设定延时
-        if (!timeout) timeout = setTimeout(later, wait)
-        if (callNow) {
-            result = func.apply(context, args)
-            context = args = null
-        }
-
-        return result
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
     }
+
+    return result
+  }
 }
 
 /**
@@ -285,18 +285,18 @@ export function debounce(func, wait, immediate) {
  * @returns {Object}
  */
 export function deepClone(source) {
-    if (!source && typeof source !== 'object') {
-        throw new Error('error arguments', 'deepClone')
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'deepClone')
+  }
+  const targetObj = source.constructor === Array ? [] : {}
+  Object.keys(source).forEach(keys => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys])
+    } else {
+      targetObj[keys] = source[keys]
     }
-    const targetObj = source.constructor === Array ? [] : {}
-    Object.keys(source).forEach(keys => {
-        if (source[keys] && typeof source[keys] === 'object') {
-            targetObj[keys] = deepClone(source[keys])
-        } else {
-            targetObj[keys] = source[keys]
-        }
-    })
-    return targetObj
+  })
+  return targetObj
 }
 
 /**
@@ -304,16 +304,16 @@ export function deepClone(source) {
  * @returns {Array}
  */
 export function uniqueArr(arr) {
-    return Array.from(new Set(arr))
+  return Array.from(new Set(arr))
 }
 
 /**
  * @returns {string}
  */
 export function createUniqueString() {
-    const timestamp = +new Date() + ''
-    const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-    return (+(randomNum + timestamp)).toString(32)
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
 }
 
 /**
@@ -323,7 +323,7 @@ export function createUniqueString() {
  * @returns {boolean}
  */
 export function hasClass(ele, cls) {
-    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
 }
 
 /**
@@ -332,7 +332,7 @@ export function hasClass(ele, cls) {
  * @param {string} cls
  */
 export function addClass(ele, cls) {
-    if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
 }
 
 /**
@@ -341,44 +341,44 @@ export function addClass(ele, cls) {
  * @param {string} cls
  */
 export function removeClass(ele, cls) {
-    if (hasClass(ele, cls)) {
-        const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-        ele.className = ele.className.replace(reg, ' ')
-    }
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    ele.className = ele.className.replace(reg, ' ')
+  }
 }
 
 // 替换邮箱字符
 export function regEmail(email) {
-    if (String(email).indexOf('@') > 0) {
-        const str = email.split('@')
-        let _s = ''
-        if (str[0].length > 3) {
-            for (var i = 0; i < str[0].length - 3; i++) {
-                _s += '*'
-            }
-        }
-        var new_email = str[0].substr(0, 3) + _s + '@' + str[1]
+  if (String(email).indexOf('@') > 0) {
+    const str = email.split('@')
+    let _s = ''
+    if (str[0].length > 3) {
+      for (var i = 0; i < str[0].length - 3; i++) {
+        _s += '*'
+      }
     }
-    return new_email
+    var new_email = str[0].substr(0, 3) + _s + '@' + str[1]
+  }
+  return new_email
 }
 
 // 替换手机字符
 export function regMobile(mobile) {
-    if (mobile.length > 7) {
-        var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
-    }
-    return new_mobile
+  if (mobile.length > 7) {
+    var new_mobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
+  }
+  return new_mobile
 }
 
 // 下载文件
 export function downloadFile(obj, name, suffix) {
-    const url = window.URL.createObjectURL(new Blob([obj]))
-    const link = document.createElement('a')
-    link.style.display = 'none'
-    link.href = url
-    const fileName = parseTime(new Date()) + '-' + name + '.' + suffix
-    link.setAttribute('download', fileName)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-}
+  const url = window.URL.createObjectURL(new Blob([obj]))
+  const link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url
+  const fileName = parseTime(new Date()) + '-' + name + '.' + suffix
+  link.setAttribute('download', fileName)
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}

src/views/ThemeGallery/index.vue

@@ -2,9 +2,9 @@
   <div class="app-container theme_main">
     <!-- 右上角btn -->
     <div class="home_publish_btn">
-      <el-button round class="el_button_green">新增</el-button>
-      <el-button round type="primary">编辑</el-button>
-      <el-button round class="el_button_red">上传</el-button>
+      <el-button round class="el_button_green" @click="addEdit(0)">新增</el-button>
+      <el-button round type="primary" @click="addEdit(1)">编辑</el-button>
+      <el-button round class="el_button_red" @click="uploadEdit">上传</el-button>
     </div>
     <div style="position:relative">
       <!-- 主题库list -->
@@ -15,10 +15,146 @@
         :show-item-info="showItemInfo"
       />
       <div class="material_btn">
-        <el-button round type="primary">上传历史</el-button>
+        <el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button>
         <el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
       </div>
+    </div>
+
+    <!-- 平台技术人员-新增/编辑分类 -->
+    <div class="upload_layer">
+      <el-dialog
+        append-to-body
+        :show-close="false"
+        :visible.sync="addDialogVisible"
+        :title="layerTitle"
+        width="620px"
+      >
+        <el-form ref="classifyForm" inline :model="classifyForm" :rules="rules" size="small" label-width="80px">
+          <el-form-item v-if="isAddEdit==0" label="类别名称" prop="name">
+            <el-input v-model="classifyForm.name" style="width: 360px;" />
+          </el-form-item>
+          <el-form-item v-else label="类别名称" prop="selectName">
+            <el-select v-model="classifyForm.selectName" placeholder="请选择" style="width: 360px;" @change="selectName">
+              <el-option
+                v-for="item in nameOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属机构" prop="agency">
+            <el-select v-model="classifyForm.agency" multiple placeholder="请选择" style="width: 360px;">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button>
+          <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 平台技术人员-上传 -->
+    <el-dialog
+      append-to-body
+      :show-close="false"
+      :visible.sync="uploadDialogVisible"
+      :title="uploadTitle"
+      class="upload_layer"
+    >
+      <el-form ref="classifyForm" :model="classifyForm" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="类别名称" prop="selectNameList">
+          <el-checkbox-group v-model="classifyForm.selectNameList">
+            <el-checkbox v-for="item in nameOptions" :key="item.value" :label="item.label">{{ item.label }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="设备方向" prop="direction">
+          <el-radio-group v-model="classifyForm.direction">
+            <el-radio :label="0">横屏</el-radio>
+            <el-radio :label="1">竖屏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="文件名称">
+          <el-input v-model="classifyForm.name" style="width:336px" />
+        </el-form-item>
+        <el-form-item label="上传内容" prop="file">
+          <el-upload action="#" list-type="picture-card" :auto-upload="false">
+            <img src="@/assets/images/t-sc.png" alt />
+            <div slot="file" slot-scope="{file}">
+              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button>
+        <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+      </div>
+    </el-dialog>
 
+    <!-- 上传历史layer -->
+    <div class="upload_layer">
+      <el-dialog
+        title="上传历史"
+        :close-on-click-modal="false"
+        :visible.sync="uploadListVisible"
+        height="384px"
+      >
+        <el-form ref="form" :model="form" label-width="80px" class="query_history">
+          <el-form-item label="文件名称">
+            <el-input v-model="form.name" style="width:200px" />
+          </el-form-item>
+          <el-form-item label="时间">
+            <el-date-picker
+              v-model="form.date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+        </el-form>
+        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="name" label="文件名称" />
+          <el-table-column align="center" prop="cover" label="发布内容">
+            <template slot-scope="scope">
+              <div>
+                <img width="48px" height="64px" size="medium" :src="scope.row.cover" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="type" label="类别名称" />
+          <el-table-column align="center" prop="direction" label="设备方向">
+            <template slot-scope="scope">
+              {{ scope.row.direction ? "竖屏" : "横屏" }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="agency" label="所属机构" />
+          <el-table-column align="center" prop="date" label="上传时间" width="150" />
+          <el-table-column align="center" prop="publisher" label="发布人" />
+          <el-table-column align="center" prop="handle" label="操作">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="uploadEdit(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button
+                type="primary"
+                :class="['start_btn', { stop_btn: scope.row.enabled }]"
+                @click="isStopHandle(scope.$index, scope.row)"
+              >{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -32,7 +168,73 @@ export default {
     return {
       mulitText: '多选',
       isMultiSelected: false,
-      showItemInfo: true
+      showItemInfo: true,
+      uploadListVisible: false,
+      addDialogVisible: false,
+      layerTitle: '新增',
+      uploadDialogVisible: false,
+      uploadTitle: '上传',
+      isAddEdit: 0,
+      form: {
+        name: null,
+        date: null
+      },
+      classifyForm: {
+        name: null,
+        agency: null,
+        selectName: null,
+        direction: null,
+        selectNameList: []
+      },
+      options: [
+        {
+          value: '选项1',
+          label: '全部'
+        },
+        {
+          value: '选项2',
+          label: '武汉图书馆'
+        }
+      ],
+      nameOptions: [
+        {
+          value: '选项1',
+          label: '为你推荐',
+          checked: false
+        },
+        {
+          value: '选项2',
+          label: '人工智能',
+          checked: true
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
+        selectName: [
+          { required: true, message: '请选择类别名称', trigger: 'change' }
+        ],
+        selectNameList: [
+          { required: true, message: '请选择类别名称', trigger: 'change' }
+        ],
+        agency: [
+          { required: true, message: '请选择所属机构', trigger: 'change' }
+        ],
+        direction: [
+          { required: true, message: '请选择设备方向', trigger: 'change' }
+        ]
+      },
+      uploadData: [
+        {
+          name: '图片1',
+          cover: require('@/assets/images/background.jpg'),
+          type: '为你推荐',
+          direction: 0,
+          agency: '全部',
+          date: '2022-1-1 15：00',
+          publisher: '张三',
+          enabled: false
+        }
+      ]
     }
   },
   mounted() {
@@ -46,7 +248,60 @@ export default {
       } else {
         this.mulitText = '多选'
       }
+    },
+    // 上传历史-停用/恢复
+    isStopHandle(index, row) {
+      row.enabled = !row.enabled
+    },
+    addEdit(index) {
+      this.addDialogVisible = true
+      index ? this.layerTitle = '编辑' : this.layerTitle = '新增'
+      index ? this.isAddEdit = 1 : this.isAddEdit = 0
+      // if (index) {
+      //   this.layerTitle = '编辑'
+      //   this.isAddEdit = 1
+      //   // this.classifyForm.selectName = 0
+      // } else {
+      //   this.layerTitle = '新增'
+      //   this.isAddEdit = 0
+      // }
+    },
+    uploadEdit(index, row) {
+      this.uploadDialogVisible = true
+      if (row) {
+        console.log(row.type)
+        this.uploadTitle = '编辑'
+        this.classifyForm.name = row.name
+        this.classifyForm.direction = row.direction
+        this.classifyForm.selectNameList.push(row.type)
+      } else {
+        this.uploadTitle = '上传'
+      }
+    },
+    selectName(vId) {
+      let obj = {}
+      obj = this.nameOptions.find((item) => {
+        return item.value === vId
+      })
+      this.classifyForm.selectName = obj.value
+    },
+    // 新增编辑
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.addDialogVisible = false
+      this.uploadDialogVisible = false
+      this.$refs[formName].resetFields()
     }
+
   }
 }
 </script>
@@ -86,4 +341,25 @@ export default {
     top: 93px;
   }
 }
+.upload_layer{
+  .query_history{
+    display: flex;
+  }
+  ::v-deep .el-dialog__body {
+    .el-form-item__label{
+      height: 30px;
+      line-height: 30px;
+    }
+    .el-input__inner{
+      height: 30px;
+      line-height: 30px;
+    }
+    .el-range-separator{
+      line-height: 26px;
+    }
+    .el-checkbox__label{
+      line-height: 30px;
+    }
+  }
+}
 </style>

src/views/immediateRelease/index.vue

@@ -284,6 +284,7 @@
               <div class="set_time set_audio">
                 <span>音频：</span>
                 <p class="audio_name">audio.mp3</p>
+                <!-- 主题库音频文件不可选择 -->
                 <el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
               </div>
             </div>

src/views/materialContent/materialList/index.vue

@@ -418,6 +418,11 @@ export default {
     }
   }
 }
+.upload_layer{
+  ::v-deep .el-dialog__body{
+    padding: 0 20px 30px 20px;
+  }
+}
 ::v-deep .el-table {
   .el-button {
     padding: 0 10px;