router-用户管理

src/api/login.js

@@ -1,8 +1,9 @@
 import request from '@/utils/request'
 
+// 登录
 export function login(username, password, phone, code, uuid, rememberMe) {
   return request({
-    url: 'auth/login',
+    url: 'api/auth/login',
     method: 'post',
     data: {
       username,
@@ -16,7 +17,7 @@ export function login(username, password, phone, code, uuid, rememberMe) {
 }
 export function getMsg(phone) {
   return request({
-    url: 'auth/msg',
+    url: 'api/auth/msg',
     method: 'post',
     data: {
       phone
@@ -26,7 +27,7 @@ export function getMsg(phone) {
 
 export function setPassword(phone, new_pass, code, uuid) {
   return request({
-    url: 'auth/password',
+    url: 'api/auth/password',
     method: 'post',
     data: {
       phone,
@@ -37,23 +38,26 @@ export function setPassword(phone, new_pass, code, uuid) {
   })
 }
 
+// 获取用户信息
 export function getInfo() {
   return request({
-    url: 'auth/info',
+    url: 'api/auth/info',
     method: 'get'
   })
 }
 
+// 获取验证码 - 登录
 export function getCodeImg() {
   return request({
-    url: 'auth/code',
+    url: 'api/auth/code',
     method: 'get'
   })
 }
 
+// 登出
 export function logout() {
   return request({
-    url: 'auth/logout',
+    url: 'api/auth/logout',
     method: 'delete'
   })
 }

src/api/system/role.js

@@ -1,5 +1,14 @@
 import request from '@/utils/request'
 
+// 获取角色列表
+export function FetchDropDownList(parameter) {
+  return request({
+    url: 'api/roles/dropdown/list',
+    method: 'get',
+    params: parameter
+  })
+}
+
 // 获取所有的Role
 export function getAll() {
   return request({

src/api/system/user.js

@@ -1,6 +1,15 @@
 import request from '@/utils/request'
 import { encrypt } from '@/utils/rsaEncrypt'
 
+// 获取用户列表
+export function FetchUserList(parameter) {
+  return request({
+    url: 'api/users/list',
+    method: 'get',
+    params: parameter
+  })
+}
+
 export function add(data) {
   return request({
     url: 'api/users',

src/router/index.js

@@ -30,7 +30,6 @@ router.beforeEach((to, from, next) => {
           // 动态路由，拉取菜单
           loadMenus(next, to)
         }).catch(() => {
-          console.log('logOut')
           store.dispatch('LogOut').then(() => {
             location.reload() // 为了重新实例化vue-router对象 避免bug
           })

src/router/routers.js

@@ -57,6 +57,20 @@ export const constantRouterMap = [
         noCache: true
       }
     }]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'menu1',
+        component: (resolve) => require(['@/views/user/menu1'], resolve),
+        name: '',
+        meta: { title: '' }
+      }
+    ]
   }
   // {
   //   path: '/system',

src/store/modules/user.js

@@ -31,8 +31,6 @@ const user = {
       const rememberMe = userInfo.rememberMe
       return new Promise((resolve, reject) => {
         login(userInfo.username, userInfo.password, userInfo.phone, userInfo.code, userInfo.uuid, userInfo.rememberMe).then(res => {
-          console.log('store')
-          console.log(res)
           setToken(res.data.token, rememberMe)
           commit('SET_TOKEN', res.data.token)
           setUserInfo(res.data.user, commit)
@@ -40,7 +38,6 @@ const user = {
           commit('SET_LOAD_MENUS', true)
           resolve()
         }).catch(error => {
-          console.log('store2')
           reject(error)
         })
       })
@@ -49,7 +46,7 @@ const user = {
     SetPassword({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
         setPassword(userInfo.phone, userInfo.new_pass, userInfo.code, userInfo.uuid).then(res => {
-          setUserInfo(res.data.user, commit)
+          setUserInfo(res.data, commit)
           resolve(res)
         }).catch(error => {
           reject(error)
@@ -59,9 +56,10 @@ const user = {
     // 获取用户信息
     GetInfo({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        getInfo(userInfo.phone).then(res => {
+        const token = getToken()
+        getInfo(token).then(res => {
           console.log(res)
-          setUserInfo(res.data.user, commit)
+          setUserInfo(res.data, commit)
           resolve(res)
         }).catch(error => {
           reject(error)
@@ -96,6 +94,7 @@ export const logOut = (commit) => {
 }
 
 export const setUserInfo = (res, commit) => {
+  console.log(res)
   // 如果没有任何权限，则赋予一个默认的权限，避免请求死循环
   if (res.roles.length === 0) {
     commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT'])

src/views/content/material/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="app-container">
+    <div class="content_warp">
+      <el-tabs v-model="activeIndex" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="0" />
+        <el-tab-pane name="1">
+          <span slot="label">
+            图片<i class="emrgencyCount">{{ imgNum }}</i>
+          </span>
+        </el-tab-pane>
+        <el-tab-pane name="2">
+          <span slot="label">
+            视频<i class="emrgencyCount">{{ videoNum }}</i>
+          </span>
+        </el-tab-pane>
+        <el-tab-pane name="3">
+          <span slot="label">
+            音频<i class="emrgencyCount">{{ audioNum }}</i>
+          </span>
+        </el-tab-pane>
+      </el-tabs>
+      <MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :active-index="activeIndex" @changedMultiSelected="changedMultiSelected" />
+    </div>
+    <div class="material_btn">
+      <el-button round type="primary" @click="handleUpload">上传列表</el-button>
+      <el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import MaterialList from './materialList/index'
+export default {
+  name: 'MaterialContent',
+  components: { MaterialList },
+  data() {
+    return {
+      activeIndex: 0 || '0',
+      isMultiSelected: false,
+      mulitText: '多选',
+      audioNum: 0,
+      imgNum: 0,
+      videoNum: 0
+    }
+  },
+  mounted: function() {
+    setTimeout(() => {
+      this.audioNum = this.$refs.MaterialList.audioNum
+      this.imgNum = this.$refs.MaterialList.imgNum
+      this.videoNum = this.$refs.MaterialList.videoNum
+    }, 1000)
+  },
+  methods: {
+    handleClick(tab) {
+      this.activeIndex = tab.index
+      switch (this.activeIndex) {
+        case '0':
+          this.$refs.MaterialList.tabType = null
+          break
+        case '1':
+          this.$refs.MaterialList.tabType = 0
+          break
+        case '2':
+          this.$refs.MaterialList.tabType = 1
+          break
+        case '3':
+          this.$refs.MaterialList.tabType = 2
+          break
+      }
+      this.$refs.MaterialList.getMaterialList()
+    },
+    handleUpload() {
+      this.$refs.MaterialList.UploadList()
+    },
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      this.mulitText = this.isMultiSelected ? '取消' : '多选'
+    },
+    // 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消
+    changedMultiSelected() {
+      if (this.isMultiSelected) {
+        this.isMultiSelected = false
+        this.mulitText = '多选'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  padding: 6px 0 20px 0;
+}
+.emrgencyCount{
+  padding: 0 4px;
+}
+</style>

src/views/content/material/materialList/index.vue

@@ -0,0 +1,674 @@
+<template>
+  <div>
+    <div v-if="isToFolder" class="material_crumbs">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item><a href="/content">素材库</a></el-breadcrumb-item>
+        <el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="material_content">
+      <!-- 上传 / 创建文件夹 -->
+      <div class="material_item cont_upload">
+        <Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" />
+        <el-button v-if="!isToFolder && tabType == null" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
+        <el-button v-if="isToFolder" class="return_btn" round type="primary"><a href="/content">返回</a></el-button>
+      </div>
+      <!-- 文件夹list -->
+      <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
+        <div class="icon_bg">
+          <svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true">
+            <use xlink:href="#icon-wenjianjia" />
+          </svg>
+          <img v-else :src="item.imgPath" />
+        </div>
+        <p class="file_name">{{ item.name }}</p>
+        <span v-if="folderChecked == index" class="checked_btn"></span>
+      </div>
+      <!-- 素材库list -->
+      <div v-for="(item, index) in materialList" :key="'list-'+index" :class="['material_item', 'item_cont', { 'item_multi': selectedListId.includes(item.material_id) }]">
+        <div v-if="item.img_path || item.material_type == 1" class="img_box">
+          <img :src="item.img_path" :onerror="defaultImg" alt />
+        </div>
+        <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
+        <div class="item_format">
+          <span class="item_type">{{ item.deposit_url | getFileFormat }}</span>
+          <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
+        </div>
+        <div class="file_name">{{ item.material_name }}</div>
+        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span>
+      </div>
+    </div>
+
+    <!-- 创建文件夹layer / 编辑 -->
+    <div class="publish_layer">
+      <el-dialog :title="layerTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px">
+        <el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px">
+          <el-form-item
+            :label="labelTxt"
+            prop="name"
+            :rules="[
+              { required: true, message: '请输入名称', trigger: 'blur' }
+            ]"
+          >
+            <el-input v-model="folderForm.name" style="width: 336px" />
+          </el-form-item>
+          <el-form-item v-if="formatType != 0" label="封面">
+            <UploadCover ref="childUpload" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button v-if="!isEditMaterial" type="primary" round @click="submitForm('folderForm')">保 存</el-button>
+          <el-button v-else type="primary" round @click="saveMaterial">保 存</el-button>
+          <el-button round @click="resetForm()">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 多选操作 -->
+    <div v-if="selectedListId.length != 0 || folderChecked != -1" class="multi_handle">
+      <div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected">
+        <el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button>
+        <el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
+        <el-button type="button" class="mulit_btn" :disabled="selectedListId.length > 1" @click="editContent()">编辑</el-button>
+        <el-button type="button" class="mulit_btn">下载</el-button>
+        <el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
+        <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
+      </div>
+      <div v-else>
+        <el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button>
+        <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button>
+      </div>
+    </div>
+
+    <!-- 移动至layer -->
+    <div class="wjj_layer">
+      <el-dialog title="移动至" :close-on-click-modal="false" :show-close="false" :visible.sync="movingVisible" width="576px" height="384px">
+        <div class="wjj_list">
+          <div v-for="(item, index) in folderList" :key="index" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" @click="wjjSelected(item,index)">
+            <svg class="font-icon icon" aria-hidden="true">
+              <use xlink:href="#icon-wenjianjia" />
+            </svg>
+            <p class="wjj_name">{{ item.name }}</p>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="moveFile">确定</el-button>
+          <el-button round @click="movingVisible=false">取消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial, moveMyMaterial } from '@/api/material/material'
+import Upload from '../../../components/upload'
+import UploadCover from '../../../components/upload_cover'
+import { getSeconds, getFileFormat } from '@/utils/index.js'
+export default {
+  name: 'Material',
+  components: { Upload, UploadCover },
+  filters: {
+    getSeconds(s) {
+      return getSeconds(s)
+    },
+    getFileFormat(s) {
+      return getFileFormat(s)
+    }
+  },
+  props: {
+    isMultiSelected: {
+      type: Boolean,
+      required: true
+    },
+    activeIndex: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isTheme: false,
+      orga_id: '133221333123111', // 机构ID
+      rootFolderId: null, // 根目录文件夹ID
+      thisFoldId: null, // 当前父文件夹ID
+      folderList: [], // 文件夹list
+      materialFolders: [], // 文件夹list
+      folderForm: { // form
+        fid: '',
+        id: '',
+        img_path: '',
+        name: '',
+        orga_id: ''
+      },
+      isEditFolder: false, // 是否编辑文件夹
+      mkdirVisible: false, // 新建编辑layer
+      folderChecked: -1, // 文件夹是否单击选中
+      materialList: [], // 素材库list
+      isEditMaterial: false, // 是否是编辑素材
+      formatType: null, // 上传素材类型 0 img 1 video 2 audio
+      materialId: null, // 编辑时需要参数 id
+      materialImgPath: '', // 素材封面
+      materialDuration: 0, // 时长
+      materialName: '', // 素材名称
+      uploadFileUrl: null, // 素材保存路径
+      selectedMaterial: [], // 素材选中
+      selectedListId: [], // 素材选中的material_id
+      selectInFolderid: [], // 素材选中的和文件关联表id -- in_folder_id
+      layerTitle: '创建文件夹', // 文件夹/素材编辑框title
+      labelTxt: '文件夹名称',
+      isToFolder: false, // 是否进入文件夹
+      currentFolder: '', // 当前进入的文件夹名
+      currentFolderId: null,
+      movingVisible: false,
+      uploadListData: [ // 上传列表
+      ],
+      folderListChecked: -1,
+      tabType: null,
+      audioNum: 0,
+      imgNum: 0,
+      videoNum: 0
+    }
+  },
+  computed: {
+    defaultImg() {
+      return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
+    }
+  },
+  watch: {
+    isMultiSelected(newName, oldName) {
+      console.log('newName', newName)
+      if (newName === false) {
+        this.selectedListId = []
+      }
+    },
+    activeIndex(newName, oldName) {
+      this.tabIndex = newName
+      this.$nextTick(() => {
+        switch (this.tabIndex) {
+          case '0':
+            this.$refs.uploadMaterial.isActiveType = null
+            break
+          case '1':
+            this.formatType = 1
+            this.$refs.uploadMaterial.isActiveType = 0
+            break
+          case '2':
+            this.formatType = 2
+            this.$refs.uploadMaterial.isActiveType = 1
+            break
+          case '3':
+            this.formatType = 2
+            this.$refs.uploadMaterial.isActiveType = 2
+            break
+        }
+      })
+    },
+    '$route.query.folderTag'(Val) {
+      console.log(Val)
+    }
+  },
+  created() {
+    // console.log(localStorage.getItem('materialTabIndex'))
+  },
+  mounted: function() {
+    console.log(this.$route.query.folderTag)
+    this.getMaterialList()
+    document.addEventListener('click', this.hiddenFolderActiveClick)
+  },
+  methods: {
+    // 获取素材库list
+    getMaterialList() {
+      let params
+      if (this.$route.query.folderTag) {
+        console.log('文件夹内')
+        this.isToFolder = true
+        this.currentFolder = localStorage.getItem('currentFolder')
+        this.currentFolderId = localStorage.getItem('currentFolderId')
+        params = {
+          'folder_id': this.currentFolderId,
+          'material_name': null,
+          'material_type': this.tabType,
+          'material_type_not': null,
+          'orga_id': this.orga_id
+        }
+      } else {
+        console.log('文件夹外')
+        this.isToFolder = false
+        localStorage.removeItem('currentFolder')
+        localStorage.removeItem('currentFolderId')
+        params = {
+          'folder_id': null,
+          'material_name': null,
+          'material_type': this.tabType,
+          'material_type_not': null,
+          'orga_id': this.orga_id
+        }
+      }
+      getMaterialList(params).then(res => {
+        if (!this.$route.query.folderTag) {
+          localStorage.setItem('rootFolderId', res.data.thisFoldId)
+        }
+        this.materialFolders = res.data.materialFolders
+        this.materialList = res.data.pageThemeVO
+        this.audioNum = res.data.audioNum
+        this.imgNum = res.data.imgNum
+        this.videoNum = res.data.videoNum
+        // 创建文件夹获取data
+        this.thisFoldId = res.data.thisFoldId
+      })
+    },
+    // 新建 / 编辑 文件夹
+    handleMkdir(mkdirType) {
+      this.mkdirVisible = true
+      this.folderForm.fid = this.thisFoldId
+      this.folderForm.orga_id = this.orga_id
+      if (mkdirType === 0) {
+        this.$nextTick(() => {
+          this.$refs.childUpload.imageUrl = ''
+          this.folderForm.img_path = ''
+          this.folderForm.name = ''
+        })
+        delete this.folderForm.id
+      } else {
+        this.$nextTick(() => {
+          this.$refs.childUpload.imageUrl = this.folderForm.img_path
+        })
+      }
+    },
+    // 文件夹双击操作
+    floderDbClick(item, index) {
+      this.isEditMaterial = false
+      this.$router.replace(
+        {
+          path: '/content', query: { folderTag: 1 }
+        }
+      )
+      this.currentFolder = item.name
+      this.currentFolderId = item.id
+      localStorage.setItem('currentFolder', this.currentFolder)
+      localStorage.setItem('currentFolderId', this.currentFolderId)
+      this.getMaterialList()
+      this.selectedListId = []
+      this.folderChecked = -1
+      this.isEditFolder = false
+    },
+    // 点击其他区域选中的文件夹 去掉选中样式
+    hiddenFolderActiveClick() {
+      this.folderChecked = -1
+      this.isEditFolder = false
+    },
+    // 选择 编辑 文件夹
+    editFolder(item, index) {
+      this.isEditMaterial = false
+      this.selectedListId = []
+      // 有选择中的文件夹时，同时存在素材多选操作时
+      this.$emit('changedMultiSelected')
+      if (index != this.folderChecked) {
+        this.folderChecked = index
+        this.isEditFolder = true
+        this.folderForm = {
+          fid: item.fid,
+          id: item.id,
+          name: item.name,
+          img_path: item.imgPath,
+          orga_id: item.orgaId
+        }
+      } else {
+        this.folderChecked = -1
+        this.isEditFolder = false
+      }
+    },
+    // 删除 文件夹
+    deleteMaterialFolder() {
+      this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: this.folderForm.id
+        }
+        deleteMaterialFolder(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '删除文件夹成功',
+              type: 'success'
+            })
+            this.getMaterialList()
+            this.folderChecked = -1
+            this.isEditFolder = false
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
+      })
+    },
+    // 提交表单 - 新建/编辑
+    submitForm(formName) {
+      this.folderForm.img_path = this.$refs.childUpload.imageUrl
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          saveMaterialFolder(this.folderForm).then(res => {
+            if (res.code === 200) {
+              this.$message({
+                message: '创建文件夹成功',
+                duration: 2000,
+                type: 'success'
+              })
+              this.mkdirVisible = false
+              this.getMaterialList()
+            } else {
+              this.$message({
+                message: '创建文件夹失败',
+                duration: 2000,
+                type: 'warning'
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 重置表单
+    resetForm() {
+      // 强制重置folderForm表单
+      // Object.assign(this.$data.folderForm, this.$options.data.call(this).folderForm)
+      this.mkdirVisible = false
+    },
+    // 选择素材 - to 即时发布/定时发布
+    publishHandle(index) {
+      localStorage.removeItem('selectedMaterial')
+      localStorage.removeItem('releaseId')
+      localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
+      // 判断是否选择了多个音频文件
+      const resultAudio = []
+      this.selectedMaterial.map(item => {
+        if (item.material_type == 2) {
+          resultAudio.push(item)
+        }
+      })
+      if (resultAudio.length > 1) {
+        this.$message.error('音频类型的文件只可选择1个')
+        return
+      }
+      this.$router.push(
+        {
+          path: '/release', query: { tag: index }
+        }
+      )
+    },
+    // 素材 - 编辑
+    editContent() {
+      this.mkdirVisible = true
+      this.labelTxt = '文件名称'
+      this.isEditMaterial = true
+      if (this.formatType == 1) {
+        this.layerTitle = '视频编辑'
+      } else if (this.formatType == 2) {
+        this.layerTitle = '音频编辑'
+      } else {
+        this.layerTitle = '图片编辑'
+      }
+      const checkedMaterial = this.materialList.filter(item => {
+        return item.material_id == this.selectedListId[0]
+      })
+      this.materialId = checkedMaterial[0].material_id
+      this.folderForm.name = checkedMaterial[0].material_name
+      this.materialDuration = checkedMaterial[0].duration
+      this.uploadFileUrl = checkedMaterial[0].deposit_url
+      this.materialImgPath = checkedMaterial[0].img_path
+    },
+    // 上传素材
+    saveMaterial() {
+      if (!this.isEditMaterial) {
+        console.log(this.$refs.uploadMaterial.fileSize)
+        const formatType = this.$refs.uploadMaterial.formatType
+        this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
+        // 视频和音频的时长
+        const duration = this.$refs.uploadMaterial.duration
+        this.materialName = this.$refs.uploadMaterial.fileNames
+        switch (formatType) {
+          case 'image':
+            this.formatType = 0
+            this.materialImgPath = this.uploadFileUrl
+            this.materialDuration = 0
+            break
+          case 'video':
+            this.formatType = 1
+            this.materialDuration = duration
+            break
+          case 'audio':
+            this.formatType = 2
+            this.materialDuration = duration
+            break
+        }
+      } else {
+        this.materialName = this.folderForm.name
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.materialImgPath = this.$refs.childUpload.imageUrl
+          }
+        })
+      }
+      setTimeout(() => {
+        const params = {
+          'class_ids': [
+            // 素材类id集合
+          ],
+          'deposit_url': this.uploadFileUrl, // 素材存放路径
+          'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
+          'duration': this.materialDuration, // 时长s
+          'material_id': this.materialId,
+          'folder_id': this.thisFoldId, // 文件夹id
+          'img_path': this.materialImgPath, // 封面图片id
+          'material_name': this.materialName, // 素材名称
+          'material_type': this.formatType, // 素材类别
+          'file_size': this.$refs.uploadMaterial.fileSize, // 文件大小
+          'orga_id': this.orga_id, // 机构id
+          'store_type': 1 // 库类型 1.素材库 2.主题库
+        }
+        console.log(params)
+        if (!this.isEditMaterial) {
+          // 新上传素材时不需要该字段
+          delete params.material_id
+        }
+        saveMaterial(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '上传素材成功',
+              type: 'success'
+            })
+            this.mkdirVisible = false
+            this.getMaterialList()
+            this.materialImgPath = ''
+          }
+        })
+      }, 200)
+    },
+    // 素材 - 多选
+    selectedItem(item) {
+      const id = item.material_id
+      const inFolderId = item.in_folder_id
+      const type = item.material_type
+      const arr = this.selectedListId
+      if (arr.includes(id)) {
+        const index = arr.indexOf(id)
+        if (index > -1) {
+          arr.splice(index, 1)
+          this.selectInFolderid.splice(index, 1)
+          this.selectedMaterial.splice(index, 1)
+        }
+      } else {
+        this.selectedListId.push(id)
+        this.selectInFolderid.push(inFolderId)
+        this.selectedMaterial.push(item)
+        this.formatType = type
+      }
+    },
+    // 素材 - 删除
+    deleteMyMaterial() {
+      this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          ids: this.selectedListId
+        }
+        deleteMyMaterial(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '删除素材成功',
+              type: 'success'
+            })
+            this.getMaterialList()
+            this.selectedListId = []
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
+      })
+    },
+    UploadList() {
+      this.uploadListVisible = true
+    },
+    // 点击-移动btn
+    moveingTo(index) {
+      this.folderList = []
+      if (this.materialFolders.length > 0) {
+        this.folderList = this.materialFolders.slice(0, this.materialFolders.length)
+      }
+      this.rootFolderId = localStorage.getItem('rootFolderId')
+      const returnFolder = {
+        id: this.rootFolderId,
+        name: '返回上一级'
+      }
+      this.folderList.unshift(returnFolder)
+      this.movingVisible = true
+    },
+    // 文件夹list - 选中操作
+    wjjSelected(item, index) {
+      this.folderListChecked = index
+      this.thisFoldId = item.id
+    },
+    // 点击确定 - 移动素材
+    moveFile() {
+      if (this.materialFolders.length > 0) {
+        if (this.thisFoldId == this.rootFolderId) {
+          this.$message({
+            message: '不能讲文件移动到自身目录下哦~',
+            type: 'error'
+          })
+          return
+        }
+      } else {
+        this.thisFoldId = this.rootFolderId
+      }
+      const params = {
+        'folder_id': this.thisFoldId,
+        'ids': this.selectInFolderid,
+        'material_ids': this.selectedListId
+      }
+      moveMyMaterial(params).then(res => {
+        if (res.code === 200) {
+          this.$message({
+            message: '移动成功',
+            type: 'success'
+          })
+          this.movingVisible = false
+          this.getMaterialList()
+          this.selectedListId = []
+        }
+      })
+    },
+    format(percentage) {
+      return percentage === 100 ? '100%' : `${percentage}%`
+    },
+    start() {
+      const that = this
+      that.$nextTick(() => {
+        that.progressLoading = true
+        that.percentage = 0
+        that.timeStart = setInterval(() => {
+          if (that.percentage < 100) {
+            that.percentage += 1
+          }
+        }, 100)
+      })
+    },
+    // 进度条结束
+    end() {
+      this.loading_txt = '继续'
+      // const that = this
+      // that.percentage = 100
+      clearInterval(this.timeStart)
+      // setTimeout(() => {
+      //   that.progressLoading = false
+      // }, 300)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.material_crumbs {
+  padding: 0 24px 15px 24px;
+  margin-top: -20px;
+  ::v-deep .el-breadcrumb {
+    font-size: 12px;
+    color: #999999;
+  }
+}
+.material_content {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 24px;
+  .material_item {
+    position: relative;
+    width: 174px;
+    height: 182px;
+    border-radius: 4px;
+    margin: 0 20px 20px 0;
+    overflow: hidden;
+  }
+  .item_cont {
+    border-color: #dcdde3;
+    img {
+      width: 100%;
+      height: 148px;
+    }
+    .radio_img {
+      width: 100%;
+      height: 148px;
+    }
+  }
+}
+.upload_layer {
+  ::v-deep .el-dialog__body {
+    padding: 0 20px 30px 20px;
+  }
+}
+::v-deep .el-table {
+  .el-button {
+    padding: 0 10px;
+    height: 24px;
+    &.upload_delt {
+      background-color: #f76b6b;
+    }
+  }
+}
+.multi_handle {
+  div {
+    display: flex;
+  }
+}
+</style>

src/views/content/publish/historyList/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="list_warp">
+    <el-row :gutter="15">
+      <el-col>
+        <el-table ref="table" :data="publishHistoryList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="发布名称" align="center" prop="relaase_name" />
+          <el-table-column label="发布内容" align="center" prop="content">
+            <template slot-scope="scope">
+              <div>
+                <img width="100px" size="medium" :src="scope.row.release_first_img" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布时间" align="center" prop="date">
+            <template slot-scope="scope">
+              <div v-if="scope.row.release_type==0">{{ scope.row.release_start }}</div>
+              <div v-else>{{ scope.row.release_start+" 至 "+scope.row.release_end }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布周期" align="center" prop="cycle">
+            <template slot-scope="scope">
+              {{ scope.row.release_cycle==0?(''):((scope.row.release_cycle==1?'每天':'每周'+scope.row.release_weekly)) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="发布类型" align="center" prop="type">
+            <template slot-scope="scope">
+              <div>{{ scope.row.release_type==1 ? '定时发布' : '即时发布' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布人" align="center" prop="nick_name" />
+          <el-table-column label="状态" align="center" prop="enabled">
+            <template slot-scope="scope">
+              <div :class="{ stop_txt: scope.row.is_state }">
+                {{ scope.row.is_state==0 ? '':(scope.row.is_state==1? '停止':'发布中') }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="release_device" align="center" label="发布设备">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.release_device == 2 ? "" : "全部设备" }}
+              </div>
+              <div>
+                <el-tag v-for="tag in scope.row.binding_device" :key="tag">{{ tag }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getPublishHistory" @size-change="handleSizeChange" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { parseTime, setWeekly } from '@/utils/index.js'
+import { reqPublishHistory } from '@/api/publish/publishHistory'
+export default {
+  name: 'HistoryList',
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+
+  data() {
+    return {
+      orga_id: '133221333123111',
+      page: 1,
+      size: 10,
+      // 总条数
+      total: 0,
+      // 发布历史列表
+      publishHistoryList: [],
+      selectedList: []
+    }
+  },
+  mounted() {
+    this.getPublishHistory()
+  },
+  methods: {
+    // 获取发布历史列表
+    getPublishHistory(pager = 1) {
+      this.page = pager
+      const params = {
+        release_name: '',
+        orga_id: this.orga_id,
+        page: this.page,
+        size: this.size
+      }
+      reqPublishHistory(params).then(res => {
+        if (res.code == 200) {
+          this.publishHistoryList = res.data.content
+          this.total = res.data.totalElements
+          this.publishHistoryList.forEach(item => {
+            item.release_start = parseTime(item.release_start).split('00:00:00')[0]
+            item.release_end = parseTime(item.release_end).split('00:00:00')[0]
+            if (item.binding_device) {
+              item.binding_device = item.binding_device.split(',')
+            }
+            if (item.release_weekly) {
+              item.release_weekly = setWeekly(item.release_weekly)
+            } else {
+              item.release_weekly = ''
+            }
+          })
+          console.log(this.publishHistoryList)
+        }
+      })
+    },
+    handleSelectionChange(val) {
+      this.selectedList = val
+      if (val.length > 0) {
+        this.clearBtnDisabled = false
+      } else {
+        this.clearBtnDisabled = true
+      }
+      console.log(val)
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getPublishHistory()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list_warp {
+  padding: 0 24px;
+  .stop_txt {
+    color: #3a8aeb;
+  }
+}
+</style>

src/views/content/publish/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="app-container">
+    <div class="content_warp">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="发布列表" name="first">
+          <PublistList />
+        </el-tab-pane>
+        <el-tab-pane label="发布历史" name="second">
+          <HistoryList />
+        </el-tab-pane>
+        <el-tab-pane label="紧急通知" name="third">
+          <UrgentMessage ref="message" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div v-if="activeName !== 'third'" class="home_publish_btn">
+      <el-button round class="el_button_red" @click="publishHandle(0)">即时发布</el-button>
+      <el-button round type="primary" @click="publishHandle(1)">定时发布</el-button>
+    </div>
+    <div v-else class="home_publish_btn">
+      <el-button type="primary" round @click="addMessage">紧急发布</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublistList from './publishList/index'
+import HistoryList from './historyList/index'
+import UrgentMessage from './urgentMessage/index'
+export default {
+  name: 'PublishContent',
+  components: { PublistList, HistoryList, UrgentMessage },
+  data() {
+    return {
+      activeName: 'first',
+      mulitText: '多选'
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    publishHandle(index) {
+      localStorage.removeItem('selectedMaterial')
+      localStorage.removeItem('releaseId')
+      this.$router.push(
+        {
+          path: '/release', query: { tag: index }
+        }
+      )
+    },
+    // 紧急发布 通知子组件发请求
+    addMessage() {
+      this.$refs.message.addFormData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  position: relative;
+  padding: 6px 0 20px 0;
+}
+</style>

src/views/content/publish/publishList/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="list_warp">
+    <el-row :gutter="15">
+      <el-col>
+        <el-table ref="table" :data="publishList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" class="publish_table">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="发布名称" align="center" prop="relaase_name" />
+          <el-table-column label="发布内容" align="center" prop="content">
+            <template slot-scope="scope">
+              <div v-if="scope.row.release_first_img">
+                <img width="48px" height="63px" size="medium" :src="scope.row.release_first_img" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布时间" align="center" prop="date" width="200px">
+            <template slot-scope="scope">
+              <div v-if="scope.row.release_type==0">{{ scope.row.release_start }}</div>
+              <div v-else-if="scope.row.release_cycle==2">{{ scope.row.release_start+" 至 "+scope.row.release_end +'每周'+ scope.row.release_weekly }}</div>
+              <div v-else>{{ scope.row.release_start+" 至 "+scope.row.release_end +'每天' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布类型" align="center" prop="type">
+            <template slot-scope="scope">
+              <div>{{ scope.row.release_type==1 ? "定时发布" : "即时发布" }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="发布人" align="center" prop="nick_name" />
+          <el-table-column label="状态" align="center" prop="is_state">
+            <template slot-scope="scope">
+              <div :class="{ stop_txt: scope.row.is_state == 2 }">
+                {{ scope.row.is_state == 2 ? '停止' : (scope.row.stateTxt ? '发布中' : '未发布') }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="release_device" align="center" label="发布设备" width="300px">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.release_device == 2 ? "" : "全部设备" }}
+                <div class="tag_list">
+                  <el-tag v-for="tag in scope.row.binding_device" :key="tag" type="primary">{{ tag }}</el-tag>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="220px" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="primary" :class="['top_btn', { top_btn_active: scope.row.is_topping }]" @click="isTophandle(scope.row)">{{ scope.row.is_topping ? "取消" : "置顶" }}</el-button>
+              <el-button type="primary" class="edit_btn" @click="editRelease(scope.row)">编辑</el-button>
+              <el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state==1 }]" @click="isStopHandle(scope.row)">{{ scope.row.is_state==1 ? "停止" : "恢复" }}</el-button>
+              <el-button type="info" class="delt_btn" @click="deltHandle(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <!-- 分页器 -->
+    <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getPublishList" @size-change="handleSizeChange" />
+  </div>
+</template>
+
+<script>
+import { parseTime, setWeekly, getNowFormatDate } from '@/utils/index.js'
+import { FetchGetReleaseList, FetchUpdateReleaseState, FetchDeleteRelease, FetchToppingRelease } from '@/api/release/release'
+export default {
+  name: 'PublishList',
+  data() {
+    return {
+      orga_id: '133221333123111',
+      page: 1,
+      size: 10,
+      total: 0,
+      stateTxt: null,
+      publishList: [] // 发布list
+    }
+  },
+  mounted() {
+    this.getPublishList()
+  },
+  methods: {
+    // 获取发布列表的数据
+    getPublishList(pager = 1) {
+      this.page = pager
+      const params = {
+        release_name: '',
+        orga_id: this.orga_id,
+        page: this.page,
+        size: this.size
+      }
+      FetchGetReleaseList(params).then(res => {
+        if (res.code == 200) {
+          this.publishList = res.data.content
+          this.total = res.data.totalElements
+          this.publishList.forEach(item => {
+            item.release_start = parseTime(item.release_start).split('00:00:00')[0]
+            item.release_end = parseTime(item.release_end).split('00:00:00')[0]
+            if (item.binding_device) {
+              item.binding_device = item.binding_device.split(',')
+            }
+            if (item.release_weekly) {
+              item.release_weekly = setWeekly(item.release_weekly)
+            } else {
+              item.release_weekly = ''
+            }
+            // 发布开始时间与当天时间比较
+            const todayDate = getNowFormatDate()
+            item.stateTxt = this.dateCompare(item.release_start, todayDate)
+          })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getPublishList()
+    },
+    // 是否置顶
+    isTophandle(row) {
+      const params = {
+        id: row.release_id,
+        is_topping: !row.is_topping
+      }
+      FetchToppingRelease(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(res.msg)
+          this.getPublishList()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 编辑
+    editRelease(row) {
+      localStorage.setItem('releaseId', JSON.stringify(row.release_id))
+      this.$router.push(
+        {
+          path: '/release', query: { tag: row.release_type }
+        }
+      )
+    },
+    // 是否停止发布
+    isStopHandle(row) {
+      row.is_state = row.is_state == 1 ? 2 : 1
+      const params = {
+        id: row.release_id,
+        state: row.is_state
+      }
+      FetchUpdateReleaseState(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(res.msg)
+          this.getPublishList(this.page)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 删除发布信息
+    deltHandle(row) {
+      this.$confirm('此操作将永久删除该列表, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: row.release_id,
+          is_del: true
+        }
+        FetchDeleteRelease(params).then(res => {
+          if (res.code == 200) {
+            this.$message.success(res.msg)
+            this.getPublishList(this.page)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
+      })
+    },
+    // 时间比较 - 未发布状态
+    dateCompare(str1, str2) {
+      const arr = str1.split('-')
+      const startDate = new Date(arr[0], arr[1], arr[2])
+      const startTimes = startDate.getTime()
+      const arr2 = str2.split('-')
+      const currentDate = new Date(arr2[0], arr2[1], arr2[2])
+      const currentTimes = currentDate.getTime()
+      if (startTimes > currentTimes) {
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list_warp {
+  padding: 0 24px;
+  .stop_txt {
+    color: #3a8aeb;
+  }
+}
+
+.publish_table {
+  .tag_list {
+    // text-align: left;
+    .el-tag {
+      height: 26px;
+      line-height: 26px;
+      margin: 5px 10px 5px 0;
+      background: #cbe3ff;
+      color: #3a8aeb;
+      border: none;
+    }
+  }
+}
+</style>

src/views/content/publish/urgentMessage/index.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="list_warp">
+    <el-row :gutter="15">
+      <el-col>
+        <!-- v-loading="crud.loading" -->
+        <el-table ref="table" :data="urgentMessage" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <!-- prop="name"  -->
+          <el-table-column label="序号" type="index" align="center" width="50" />
+          <el-table-column label="发布内容" align="center" prop="context" width="400">
+            <template slot-scope="{ row }">
+              <div>{{ row.context }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="通知时间" align="center" prop="create_time">
+            <template slot-scope="{ row }">
+              <div>{{ row.create_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="发布人" align="center" prop="creater_name" />
+          <el-table-column label="状态" align="center" prop="is_state">
+            <template slot-scope="{ row }">
+              <div :class="{ stop_txt: row.is_state }">
+                {{ row.is_state == 1 ? "发布中" : "停止" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="120px" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
+              <el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.is_state == 1 ? "停止" : "恢复" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <!-- 分页器 -->
+    <el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUrgentMessage" @size-change="handleSizeChange" />
+
+    <!-- 编辑紧急通知 -->
+    <div class="publish_layer">
+      <el-dialog :title="form.notice_id==null? '紧急发布':'编辑'" :close-on-click-modal="false" :show-close="false" :visible.sync="messageVisible" width="872px">
+        <el-form ref="form" :model="form" size="small" label-width="100px">
+          <el-form-item
+            label="文本颜色"
+            prop="context_color"
+            :rules="[
+              { required: true, message: '请选择文本颜色', trigger: '' },
+            ]"
+          >
+            <colorPicker v-model="form.context_color" class="txt_color" @change="headleChangeColor" />
+            <el-input v-show="false" v-model="form.context_color" />
+          </el-form-item>
+          <el-form-item
+            label="文本内容"
+            prop="context"
+            :rules="[
+              { required: true, message: '请输入文本内容', trigger: 'blur' },
+            ]"
+          >
+            <el-input v-model="form.context" type="textarea" rows="6" style="width: 674px" />
+          </el-form-item>
+          <el-form-item
+            label="文本大小"
+            prop="context_size_name"
+            :rules="[
+              { required: true, message: '请选择文本大小', trigger: 'change' },
+            ]"
+          >
+            <el-select v-model="form.context_size_name" size="small" class="filter-item" @change="selectSize">
+              <el-option v-for="item in sizeData" :key="item.key" :label="item.name" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="文本位置"
+            prop="context_position_name"
+            :rules="[
+              { required: true, message: '请选择文本位置', trigger: 'change' },
+            ]"
+          >
+            <el-select v-model="form.context_position_name" size="small" value-key="name" class="filter-item" @change="selectPosition">
+              <el-option v-for="item in positionData" :key="item.key" :label="item.name" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="滚动速度"
+            prop="context_speed_name"
+            :rules="[
+              { required: true, message: '请选择滚动速度', trigger: 'change' },
+            ]"
+          >
+            <el-select v-model="form.context_speed_name" size="small" class="filter-item" @change="selectSpeed">
+              <el-option v-for="item in speedData" :key="item.key" :label="item.name" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="选择设备"
+            prop="notice_device"
+            :rules="[
+              { required: true, message: '请选择设备', trigger: 'change' },
+            ]"
+          >
+            <el-radio-group v-model="form.notice_device" @change="clearCheckbox()">
+              <el-radio :label="1" value="all">所有设备</el-radio>
+              <el-radio :label="2" value="other">部分设备<i v-if="form.notice_device === 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div v-if="form.notice_device == 1" class="select_all_tip">
+            所有设备都将被发送
+          </div>
+          <div v-if="deviceTags.length > 0 && form.notice_device == 2" class="select_other">
+            <el-row>
+              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
+              <el-col :span="4">
+                <el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
+              </el-col>
+            </el-row>
+            <el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" context_color="#cbe3ff" @close="handleClose(tag)">
+              {{ tag.device_name }}
+            </el-tag>
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <!-- :loading="crud.status.cu === 2"
+           @click="crud.submitCU"-->
+          <el-button type="primary" round @click="submit">保存</el-button>
+          <el-button round @click="closeDialog">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <!-- 添加发布的设备 -->
+    <div class="add_device_layer">
+      <el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
+        <el-tag v-for="tag in deviceList" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
+          {{ tag.device_name }}
+        </el-tag>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { parseTime } from '@/utils/index.js'
+import { ReqDeviceList } from '@/api/device/deviceList.js'
+import {
+  reqUrgentMessage,
+  reqQueryMessage,
+  reqEditMessage,
+  reqChangeMessage
+} from '@/api/publish/urgentMessage'
+export default {
+  name: 'UrgentMessage',
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+  data() {
+    return {
+      isAddEdit: false,
+      form: {
+        context_color: '#ff0000', // 文本的颜色
+        context: '', // 文本的内容
+        context_position: null, // 文本的位置
+        context_position_name: null,
+        context_speed_name: null,
+        context_speed: null, // 文本的速度
+        context_size_name: null,
+        context_size: null, // 文字的大小
+        // create_by:'', //发布人
+        notice_device: null,
+        notice_devices: [],
+        notice_id: '', // 紧急通知的id
+        orga_id: '133221333123111'
+      },
+      queryInfo: {
+        notice_name: '',
+        orga_id: '133221333123111',
+        page: 1,
+        size: 10
+      },
+      total: 0,
+      messageVisible: false,
+      selectDeviceVisible: false,
+      sizeData: [
+        { key: 0, name: 16 },
+        { key: 1, name: 22 },
+        { key: 2, name: 24 },
+        { key: 3, name: 30 }
+      ],
+      positionData: [
+        { key: 1, name: '顶部' },
+        { key: 2, name: '中间' },
+        { key: 3, name: '底部' }
+      ],
+      speedData: [
+        { key: 0, name: '1s' },
+        { key: 1, name: '2s' },
+        { key: 2, name: '3s' }
+      ],
+      selectedList: [],
+      // 部分设备列表的数据
+      deviceList: [],
+      // newArr:[],
+      deviceTags: [],
+      // 紧急通知列表
+      urgentMessage: []
+    }
+  },
+  mounted() {
+    this.getUrgentMessage()
+    this.getDevice()
+  },
+  methods: {
+    // 获取紧急通知的列表
+    getUrgentMessage(pager = 1) {
+      this.queryInfo.page = pager
+      const params = this.queryInfo
+      reqUrgentMessage(params).then((res) => {
+        if (res.code == 200) {
+          this.urgentMessage = res.data.content
+          this.total = res.data.totalElements
+          // console.log(this.urgentMessage);
+        }
+      })
+    },
+    // 获取设备列表的信息
+    getDevice() {
+      const params = this.queryInfo
+      ReqDeviceList(params).then((res) => {
+        if (res.code == 200) {
+          this.deviceList = res.data.content
+        } else {
+          return this.$message.error('获取设备列表失败！')
+        }
+      })
+    },
+    // 紧急通知的状态  is_state为1 发布中 2 停止
+    // row.is_state == 1 ? "停止" : "恢复"
+    isStopHandle(index, row) {
+      console.log(row)
+      // console.log(index)
+      if (row.is_state == 1) {
+        row.is_state = 2
+      } else {
+        row.is_state = 1
+      }
+      const params = {
+        id: row.notice_id,
+        state: row.is_state
+      }
+      reqChangeMessage(params).then(res => {
+        // console.log(res)
+        if (res.code == 200) {
+          if (params.state == 1) {
+            this.$message({
+              type: 'success',
+              message: '已发布成功！'
+            })
+          } else {
+            this.$message({
+              type: 'success',
+              message: '已停止！'
+            })
+          }
+        } else {
+          return this.$message.error('失败了~~~~')
+        }
+      })
+    },
+    // 编辑
+    editFormData(row) {
+      this.messageVisible = true
+      // 根据id查询返回的紧急通知的数据
+      const params = {
+        notice_id: row.notice_id
+      }
+      reqQueryMessage(params).then((res) => {
+        if (res.code == 200) {
+          this.form.notice_device = res.data.notice.noticeDevice
+          this.deviceTags = res.data.noticeDeviceDetailsVO
+          this.form.context_color = res.data.notice.contextColor
+          this.form.context = res.data.notice.context
+          this.form.context_speed = res.data.notice.contextSpeed
+          this.form.context_position = res.data.notice.contextPosition
+          this.form.context_size = res.data.notice.contextSize
+          this.form.notice_id = row.notice_id
+          //  判断文字位置
+          if (this.form.context_position == 1) {
+            this.form.context_position_name = '顶部'
+          } else if (this.form.context_position == 2) {
+            this.form.context_position_name = '中部'
+          } else {
+            this.form.context_position_name = '底部'
+          }
+          // 判断速度
+          if (this.form.context_speed == 0) {
+            this.form.context_speed_name = '1s'
+          } else if (this.form.context_speed == 1) {
+            this.form.context_speed_name = '2s'
+          } else {
+            this.form.context_speed_name = '3s'
+          }
+          // 判断文字大小
+          if (this.form.context_size == 0) {
+            this.form.context_size_name = '16'
+          } else if (this.form.context_size == 1) {
+            this.form.context_size_name = '22'
+          } else if (this.form.context_size == 2) {
+            this.form.context_size_name = '24'
+          } else {
+            this.form.context_size_name = '30'
+          }
+        }
+      })
+    },
+    // 新增
+    addFormData() {
+      this.messageVisible = true
+      this.$nextTick(() => {
+        this.form.notice_id = null
+      })
+    },
+    // 提交
+    submit() {
+      this.$refs.form.validate((valid) => {
+        console.log(this.deviceTags)
+        console.log(this.form.notice_devices)
+        if (this.form.notice_device == 2) {
+          if (this.deviceTags.length != 0) {
+            this.deviceTags.forEach(item => {
+              this.form.notice_devices.push({ deviceId: item.device_id })
+            })
+          } else {
+            this.$message.error('请添加设备！')
+            return
+          }
+        }
+        // 修改
+        if (valid) {
+          const params = {
+            context: this.form.context,
+            context_color: this.form.context_color,
+            context_position: this.form.context_position,
+            context_size: this.form.context_size,
+            context_speed: this.form.context_speed,
+            notice_device: this.form.notice_device,
+            notice_devices: this.form.notice_devices,
+            notice_id: this.form.notice_id,
+            orga_id: '133221333123111'
+          }
+          console.log(params)
+          reqEditMessage(params).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: this.form.notice_id
+                  ? '修改紧急通知成功'
+                  : '添加紧急通知成功'
+              })
+              this.messageVisible = false
+              this.$refs.form.resetFields()
+              this.getUrgentMessage(this.queryInfo.page)
+            }
+          })
+        }
+      })
+    },
+    // 所有设备和部分设备的切换数据处理
+    clearCheckbox() {
+      if (this.form.notice_device == 1) {
+        this.form.notice_devices = []
+      }
+    },
+    // 多选框
+    handleSelectionChange(val) {
+      this.selectedList = val
+      // if (val.length > 0) {
+      // 	this.clearBtnDisabled = false;
+      // } else {
+      // 	this.clearBtnDisabled = true;
+      // }
+    },
+    // 改变文字的颜色
+    headleChangeColor() {
+      this.form.context_size
+    },
+    // 改变文字的大小
+    selectSize(selVal) {
+      this.form.context_size = selVal.key
+      this.form.context_size_name = selVal.name
+    },
+    // 改变文字的位置
+    selectPosition(selVal) {
+      console.log(selVal)
+      this.form.context_position = selVal.key
+      this.form.context_position_name = selVal.name
+    },
+    // 速度
+    selectSpeed(selVal) {
+      this.form.context_speed = selVal.key
+      this.form.context_speed_name = selVal.name
+    },
+    // 添加设备的对话框
+    addDeviceTag() {
+      this.selectDeviceVisible = true
+    },
+    // 添加设备
+    tagHandle(tag) {
+      // 添加设备不能重复 不重复才添加
+      if (this.deviceTags.length == 0) {
+        this.deviceTags.push(tag)
+      } else {
+        const current =
+          this.deviceTags &&
+          this.deviceTags.some((item) => item.device_id == tag.device_id)
+        if (!current) {
+          this.deviceTags.push(tag)
+        } else {
+          this.$message('请勿添加重复的设备！')
+        }
+      }
+    },
+    // 单独删除某一个设备
+    handleClose(tag) {
+      this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
+    },
+    // 清空设备
+    clearDevice() {
+      this.deviceTags = []
+      this.form.notice_devices = []
+    },
+    // 关闭重置表单
+    closeDialog() {
+      this.messageVisible = false
+      this.$refs.form.resetFields()
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.queryInfo.size = size
+      this.getUrgentMessage()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list_warp {
+  padding: 0 24px;
+  .stop_txt {
+    color: #3a8aeb;
+  }
+}
+.txt_color {
+  margin-top: 12px;
+}
+::v-deep .el-radio-group {
+  display: block;
+  .el-radio {
+    position: relative;
+    line-height: 40px;
+    .radio_tip {
+      position: absolute;
+      right: -45px;
+      top: 0;
+      display: block;
+      width: 42px;
+      height: 21px;
+      line-height: 21px;
+      font-size: 12px;
+      text-align: center;
+      color: #fff;
+      background: url(~@/assets/images/an-tj.png) no-repeat;
+      background-size: 42px 21px;
+    }
+  }
+}
+.select_all_tip {
+  width: 336px;
+  height: 32px;
+  line-height: 32px;
+  margin: -20px 0 0 100px;
+  padding: 0 14px;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
+}
+.select_other {
+  width: 600px;
+  margin: -20px 0 0 100px;
+  padding: 18px 23px;
+  background: #f8f8f8;
+  border: 1px solid #dcdde3;
+  border-radius: 4px;
+  .other_tip {
+    line-height: 24px;
+    span {
+      display: inline-block;
+      margin-left: 20px;
+    }
+  }
+  .el-button {
+    padding: 5px 8px;
+    border: none !important;
+  }
+  .delt_btn {
+    color: #fff;
+    background-color: #ee5747 !important;
+  }
+}
+.el-tag--small {
+  height: 28px;
+  line-height: 26px;
+  padding: 0 24px;
+  margin: 18px 16px 0 0;
+  font-size: 14px;
+  // color: #3a8aeb;
+  ::v-deep .el-icon-close {
+    font-size: 16px;
+  }
+}
+.add_device_layer {
+  ::v-deep .el-dialog__body {
+    padding: 0 20px 30px 20px;
+  }
+}
+</style>

src/views/content/theme/index.vue

@@ -0,0 +1,713 @@
+<template>
+
+  <div class="app-container theme_main">
+    <!-- 右上角btn -->
+    <div class="home_publish_btn">
+      <el-button round class="el_button_green" @click="addEditClassify(0)">新增</el-button>
+      <el-button round type="primary" @click="addEditClassify(1)">编辑</el-button>
+      <el-button round class="el_button_red" @click="uploadTheme()">上传</el-button>
+    </div>
+    <div style="position:relative">
+      <!-- 主题库list -->
+      <ThemeGalleryList
+        ref="ThemeGalleryList"
+        :is-multi-selected="isMultiSelected"
+        :mulit-text="mulitText"
+        :show-item-info="showItemInfo"
+        :tab-item="tabItem"
+        :is-my-album="isMyAlbum"
+        @pf="parent"
+        @changedMultiSelected="changedMultiSelected"
+      />
+      <MyAlbum v-show="isMyAlbum" ref="MyAlbum" :is-multi-selected="isMultiSelected" />
+      <div class="material_btn">
+        <el-button round type="primary" @click="uploadHistoryVisible=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" :close-on-click-modal="false" :title="layerTitle" width="620px">
+        <el-form ref="classifyForm" inline :model="classifyForm" size="small" label-width="80px">
+          <el-form-item
+            v-if="isAddEdit==0"
+            label="类别名称"
+            prop="class_name"
+            :rules="[
+              { required: true, message: '请输入类别名称', trigger: 'blur' }
+            ]"
+          >
+            <el-input v-model="classifyForm.class_name" style="width: 360px;" />
+          </el-form-item>
+          <el-form-item
+            v-else
+            label="类别名称"
+            prop="class_name"
+            :rules="[
+              { required: true, message: '请选择类别名称', trigger: 'change' }
+            ]"
+          >
+            <el-select v-model="classifyForm.class_name" placeholder="请选择" value-key="class_name" style="width: 360px;" @change="selectName">
+              <el-option v-for="item in tabItem" :key="item.id" :label="item.class_name" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="所属机构"
+            prop="searchClassify"
+          >
+            <el-select v-model="searchClassify" multiple placeholder="请选择" style="width: 360px;" @change="changeSelect">
+              <el-option
+                v-for="item in organOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.id"
+              />
+            </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" :close-on-click-modal="false" :title="uploadTitle" class="upload_layer">
+      <el-form ref="uploadForm" :model="uploadForm" size="small" label-width="80px">
+        <el-form-item label="类别名称" prop="selectClassifyList">
+          <el-checkbox-group v-model="selectClassifyList">
+            <el-checkbox v-for="item in tabItem" :key="item.id" :label="item.id" :value="item.id">{{ item.class_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="设备方向" prop="device_direction">
+          <el-radio-group v-model="uploadForm.device_direction">
+            <el-radio :label="1" value="1">横屏</el-radio>
+            <el-radio :label="2" value="2">竖屏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="isUploadThemeType == 1" prop="material_name" label="文件名称">
+          <el-input v-model="uploadForm.material_name" style="width:336px" />
+        </el-form-item>
+        <el-form-item class="upload_source" label="上传内容" prop="deposit_url">
+          <div v-if="formatType != -1" class="source_cont">
+            <img v-if="formatType==0" :src="uploadForm.deposit_url" alt="" width="150" />
+            <video v-if="formatType==1" :src="uploadForm.deposit_url" controls width="200"></video>
+            <audio v-if="formatType==2" :src="uploadForm.deposit_url" controls></audio>
+            <!-- <p>文件名：{{ fileNames }}</p> -->
+          </div>
+          <Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" />
+        </el-form-item>
+        <el-form-item v-if="formatType != 0" label="添加封面" prop="img_path">
+          <UploadCover ref="childUpload" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round @click="uploadSubmit()">确 定</el-button>
+        <el-button round @click="resetForm('uploadForm')">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 上传历史layer -->
+    <div class="upload_layer">
+      <el-dialog title="上传历史" :close-on-click-modal="false" :visible.sync="uploadHistoryVisible" width="1100px">
+        <!-- 上传历史 - 搜索 -->
+        <el-form ref="form" :model="queryForm" label-width="80px" class="query_history">
+          <el-form-item label="文件名称">
+            <el-input v-model="queryForm.name" style="width:200px" @keyup.enter.native="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
+          </el-form-item>
+          <el-form-item label="时间">
+            <el-date-picker v-model="queryForm.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
+          </el-form-item>
+        </el-form>
+        <!-- 上传历史 - table-list -->
+        <el-table :data="uploadHistoryListData" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="material_name" label="文件名称" />
+          <el-table-column align="center" prop="cover" label="发布内容">
+            <template slot-scope="scope">
+              <div v-if="scope.row.img_path">
+                <img width="48px" height="64px" size="medium" :src="scope.row.img_path" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="classes" label="类别名称" width="180">
+            <template slot-scope="scope">
+              <div class="tag_list">
+                <el-tag v-for="tag in scope.row.classes.split(',')" :key="tag" type="primary">{{ tag }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="device_direction" label="设备方向">
+            <template slot-scope="scope">
+              {{ scope.row.device_direction==2 ? "竖屏" : "横屏" }}
+            </template>
+          </el-table-column>
+          <!-- <el-table-column align="center" prop="agency" label="所属机构" /> -->
+          <el-table-column align="center" prop="create_time" label="上传时间" width="150">
+            <template slot-scope="{row}">
+              <div>{{ row.create_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="create_by" label="发布人" />
+          <el-table-column align="center" prop="handle" label="操作">
+            <template slot-scope="scope">
+              <el-button type="primary" round class="edit_btn" @click="editUploadTheme(scope.row)">编辑</el-button>
+              <el-button type="primary" round :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.row)">{{ scope.row.is_state == 1 ? "停用" : "恢复" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getThemeHistoryList" @size-change="handleSizeChange" />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchAddOrEdit, FetchThemeHistoryList, FetchUpdateThemeState, FetchFindThemeClassDetails } from '@/api/theme/theme.js'
+import { saveMaterial } from '@/api/material/material'
+import ThemeGalleryList from '../../components/ThemeGalleryList'
+import MyAlbum from '../../components/MyAlbum'
+import Upload from '../../components/upload'
+import UploadCover from '../../components/upload_cover'
+import { parseTime } from '@/utils/index.js'
+export default {
+  name: 'ThemeGallery',
+  components: { ThemeGalleryList, MyAlbum, UploadCover, Upload },
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+  data() {
+    return {
+      isMyAlbum: false,
+      isTheme: true,
+      orga_id: '133221333123111', // 机构ID
+      addDialogVisible: false, // 新增编辑-分类弹框
+      layerTitle: '新增',
+      isAddEdit: 0, // 判断分类菜单是新增还是编辑
+      classifyForm: { //  主题库分类菜单form
+        class_name: '',
+        is_all: false,
+        id: '',
+        orga_ids: []
+      },
+      tabItem: [], // 分类菜单data
+      isAllSelect: [],
+      searchClassify: [], // 机构选择多选操作
+      oldSearchClassify: [],
+      organOptions: [ // 机构list-data
+        {
+          label: '全部',
+          value: 'ALL_SELECT',
+          id: 'ALL_SELECT'
+        },
+        {
+          label: '武汉图书馆',
+          value: '01',
+          id: '133221333123111'
+        }
+      ],
+      mulitText: '多选', // 主题库list - 多选操作
+      isMultiSelected: false,
+      showItemInfo: true, // 判断是否显示画册
+      uploadDialogVisible: false, // 上传主题内容 - 弹框
+      uploadHistoryVisible: false, // 上传主题历史 - 弹框
+      uploadTitle: '上传', // 上传-弹框内
+      isUploadThemeType: 0, // 判断上传-新增还是编辑
+      uploadForm: { // 上传素材
+        class_ids: [
+          // 素材类id集合
+        ],
+        deposit_url: null, // 素材存放路径
+        device_direction: null, // 横竖屏 1.横屏 2.竖屏,
+        duration: null, // 时长s
+        material_id: null,
+        folder_id: null, // 文件夹id
+        img_path: null, // 封面图片id
+        material_name: null, // 素材名称
+        material_type: null, // 素材类别
+        file_size: null, // 文件大小
+        orga_id: null, // 机构id
+        store_type: null // 库类型 1.素材库 2.主题库
+      },
+      fileNames: '',
+      formatType: -1,
+      materialImgPath: null,
+      materialDuration: null,
+      selectClassifyList: [],
+      queryForm: { // 历史list - 搜索
+        name: '',
+        date: []
+      },
+      uploadHistoryListData: [], // 上传历史list
+      isEditTheme: false,
+      page: 1,
+      size: 10,
+      total: 0,
+      selectContVisible: true
+    }
+  },
+  watch: {
+  },
+  mounted() {
+    // 上传历史list
+    this.getThemeHistoryList()
+  },
+  methods: {
+    parent() {
+      this.isMyAlbum = this.$refs.ThemeGalleryList.themeItemActive == 2
+      console.log(this.$refs.ThemeGalleryList.themeItemActive)
+      this.$refs.MyAlbum.selectInFolderid = []
+      this.$refs.MyAlbum.getMyAlbum()
+    },
+    // 机构选择 全选 / 多选
+    changeSelect(val) {
+      const allValues = []
+      // 保留所有值
+      for (const item of this.organOptions) {
+        allValues.push(item.id)
+      }
+      // 用来储存上一次的值，可以进行对比
+      const oldVal = this.oldSearchClassify.length === 1 ? this.oldSearchClassify[0] : []
+      // 若是全部选择
+      if (val.includes('ALL_SELECT')) this.searchClassify = allValues
+      // 取消全部选中 上次有 当前没有 表示取消全选
+      if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchClassify = []
+      // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
+      // 新老数据都有全部选中
+      if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
+        const index = val.indexOf('ALL_SELECT')
+        val.splice(index, 1) // 排除全选选项
+        this.searchClassify = val
+      }
+      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
+      if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
+        if (val.length === allValues.length - 1) this.searchClassify = ['ALL_SELECT'].concat(val)
+      }
+      // 储存当前最后的结果 作为下次的老数据
+      this.oldSearchClassify[0] = this.searchClassify
+    },
+    // 编辑分类 - 类型名称选择
+    selectName(vId) {
+      this.classifyForm.id = vId.id
+      this.classifyForm.class_name = vId.class_name
+    },
+    // 主题库分类菜单 - 新增 / 编辑
+    addEditClassify(index) {
+      this.addDialogVisible = true
+      if (index == 1) {
+        this.layerTitle = '编辑'
+        this.isAddEdit = 1
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+        this.activeIndex = this.$refs.ThemeGalleryList.activeIndex
+        this.classifyForm.class_name = this.tabItem[this.activeIndex].class_name
+        this.classifyForm.id = this.tabItem[this.activeIndex].id
+        // 利用这个，来判断是否机构全选
+        this.isAllSelect = []
+        for (const item of this.organOptions) {
+          this.isAllSelect.push(item.id)
+        }
+        const params = {
+          theme_class_id: this.classifyForm.id
+        }
+        FetchFindThemeClassDetails(params).then(res => {
+          if (res.code == 200) {
+            if (res.data.is_all) {
+              this.searchClassify = this.isAllSelect
+            } else {
+              this.searchClassify.push(res.data.orgs)
+            }
+          }
+        })
+      } else {
+        this.layerTitle = '新增'
+        this.isAddEdit = 0
+        this.classifyForm.id = null
+        this.classifyForm.class_name = ''
+      }
+    },
+    // 新增/编辑 - 分类菜单 - 提交
+    submitForm(formName) {
+      this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT')
+      this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.searchClassify.length == 0) {
+            this.$message.error('请选择所属机构！')
+            return false
+          }
+          FetchAddOrEdit(this.classifyForm).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: this.classifyForm.id ? '编辑成功' : '新增成功'
+              })
+              this.addDialogVisible = false
+              this.searchClassify = []
+              this.$refs.ThemeGalleryList.getThemeClassList()
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 表单 - 关闭btn
+    resetForm(formName) {
+      this.addDialogVisible = false
+      this.uploadDialogVisible = false
+      this.searchClassify = []
+      // 上传表单重置
+      this.selectClassifyList = []
+      this.uploadForm.device_direction = 0
+      this.uploadForm.deposit_url = null
+      this.formatType = -1
+      this.uploadForm.material_type = null
+      this.uploadForm.img_path = null
+      this.materialImgPath = null
+      this.$nextTick(() => {
+        if (this.$refs.uploadMaterial) {
+          this.$refs.uploadMaterial.filePercent = 0
+        }
+        if (this.$refs.childUpload) {
+          this.$refs.childUpload.imageUrl = null
+        }
+      })
+      this.$refs[formName].resetFields()
+    },
+    // list - 多选btn
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+    },
+    // 新增 - 上传
+    uploadTheme() {
+      this.isEditTheme = false
+      this.$nextTick(() => {
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+      })
+      this.uploadDialogVisible = true
+      this.isUploadThemeType = 0
+      this.uploadTitle = '新增'
+      this.uploadForm.device_direction = 0
+    },
+    // 编辑 - 上传
+    editUploadTheme(row) {
+      this.isEditTheme = true
+      this.uploadDialogVisible = true
+      this.isUploadThemeType = 1
+      this.uploadTitle = '编辑'
+      this.$nextTick(() => {
+        this.tabItem = this.$refs.ThemeGalleryList.tabItem
+        const classifyListName = row.classes.split(',')
+        if (classifyListName) {
+          this.selectClassifyList = []
+          this.tabItem.filter(item => {
+            if (classifyListName.indexOf(item.class_name) != -1) {
+              this.selectClassifyList.push(item.id)
+            }
+          })
+        }
+      })
+      this.uploadForm.device_direction = row.device_direction
+      this.uploadForm.material_name = row.material_name
+      this.fileNames = row.material_name
+      this.uploadForm.deposit_url = row.deposit_url
+
+      this.formatType = row.material_type
+      if (this.formatType != 0) {
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.$refs.childUpload.imageUrl = row.img_path
+          }
+        })
+      } else {
+        this.uploadForm.img_path = row.deposit_url
+      }
+      this.uploadForm.material_type = this.formatType
+      this.uploadForm.duration = row.duration
+      this.uploadForm.file_size = row.file_size
+      this.uploadForm.material_id = row.material_id
+    },
+    // 素材上传完之后 - 获取相关info
+    saveMaterial() {
+      const formatType = this.$refs.uploadMaterial.formatType
+      const uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
+      // 视频和音频的时长
+      const duration = this.$refs.uploadMaterial.duration
+      switch (formatType) {
+        case 'image':
+          this.formatType = 0
+          this.materialImgPath = uploadFileUrl
+          this.materialDuration = 0
+          break
+        case 'video':
+          this.formatType = 1
+          this.materialDuration = duration
+          this.materialImgPath = null
+          break
+        case 'audio':
+          this.formatType = 2
+          this.materialDuration = duration
+          this.materialImgPath = null
+          break
+      }
+      this.uploadForm.deposit_url = uploadFileUrl
+      this.fileNames = this.$refs.uploadMaterial.fileNames
+      this.uploadForm.material_name = this.$refs.uploadMaterial.fileNames
+      this.uploadForm.material_type = this.formatType
+      this.uploadForm.file_size = this.$refs.uploadMaterial.fileSize
+      this.uploadForm.img_path = this.materialImgPath
+      this.uploadForm.duration = this.materialDuration
+    },
+    // 上传 - 提交btn
+    uploadSubmit(formName) {
+      if (this.isEditTheme) {
+        this.$nextTick(() => {
+          if (this.$refs.childUpload) {
+            this.uploadForm.img_path = this.$refs.childUpload.imageUrl
+          }
+        })
+      }
+      this.uploadForm.class_ids = this.selectClassifyList
+      if (this.uploadForm.class_ids.length == 0) {
+        this.$message.error('请选择类别名称')
+        return
+      } else if (!this.uploadForm.device_direction) {
+        this.$message.error('请选择设备方向')
+        return
+      } else if (!this.uploadForm.deposit_url) {
+        this.$message.error('请上传资源内容')
+        return
+      } else if (!this.uploadForm.material_name) {
+        this.$message.error('请输入文件名称')
+        return
+      }
+      // this.uploadForm.orga_id = this.orga_id
+      this.uploadForm.store_type = 2
+      setTimeout(() => {
+        saveMaterial(this.uploadForm).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '上传素材成功',
+              type: 'success'
+            })
+            this.uploadDialogVisible = false
+            this.getThemeHistoryList()
+            this.$refs.ThemeGalleryList.getThemeGallery()
+            // 上传表单重置
+            this.selectClassifyList = []
+            this.uploadForm.device_direction = 0
+            this.uploadForm.deposit_url = null
+            this.formatType = -1
+            this.uploadForm.material_type = null
+            this.uploadForm.img_path = null
+            this.materialImgPath = null
+            this.$nextTick(() => {
+              if (this.$refs.uploadMaterial) {
+                this.$refs.uploadMaterial.filePercent = 0
+              }
+              if (this.$refs.childUpload) {
+                this.$refs.childUpload.imageUrl = null
+              }
+            })
+            this.$refs.uploadForm.resetFields()
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }, 200)
+    },
+    // 上传历史list - 主题库
+    getThemeHistoryList(pager = 1) {
+      this.page = pager
+      let start_time = ''
+      let end_time = ''
+      if (this.queryForm.date) {
+        start_time = this.queryForm.date[0]
+        end_time = this.queryForm.date[1]
+      } else {
+        start_time = end_time = null
+      }
+      const params = {
+        theme_name: this.queryForm.name,
+        theme_class: null,
+        device_direction: null,
+        orga_id: null,
+        start_time: start_time,
+        end_time: end_time,
+        folder_id: null,
+        page: this.page,
+        size: this.size
+      }
+      FetchThemeHistoryList(params).then(res => {
+        if (res.code === 200) {
+          this.uploadHistoryListData = res.data.content
+          this.total = res.data.totalElements
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getThemeHistoryList()
+    },
+    // 上传历史-停用/恢复
+    isStopHandle(row) {
+      row.is_state = row.is_state == 1 ? 2 : 1
+      const params = {
+        id: row.material_id,
+        state: row.is_state
+      }
+      FetchUpdateThemeState(params).then(res => {
+        if (res.code == 200) {
+          this.$message.success(res.msg)
+          this.getThemeHistoryList()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    // 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消
+    changedMultiSelected() {
+      if (this.isMultiSelected) {
+        this.isMultiSelected = false
+        this.mulitText = '多选'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.theme_main {
+  position: relative;
+  padding: 0;
+  background: none;
+  ::v-deep .el-tabs {
+    height: 55px;
+    padding: 0 24px;
+    margin-bottom: 24px;
+    line-height: 55px;
+    background: #fff;
+  }
+  ::v-deep .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  ::v-deep .el-tabs__active-bar {
+    display: none;
+  }
+  ::v-deep .theme_item_tab {
+    margin-bottom: 0;
+    .el-tabs__header {
+      margin-bottom: 0;
+      border-bottom: 1px solid #eee;
+    }
+  }
+  ::v-deep .theme_img {
+    align-content: flex-start;
+    height: calc(100vh - 246px);
+    padding: 18px 24px 0 24px;
+    overflow-y: auto;
+    background: #fff;
+  }
+  .material_btn {
+    top: 93px;
+  }
+}
+.upload_layer {
+  .query_history {
+    display: flex;
+    margin-top: -16px;
+  }
+  ::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;
+    }
+  }
+}
+.upload_source {
+  ::v-deep .el-form-item__content{
+    display: flex;
+  }
+  .source_cont{
+    margin-right: 20px;
+    p{
+      font-size: 12px;
+      padding: 0 10px;
+      line-height: 32px;
+    }
+  }
+  video{
+    display: block;
+  }
+  audio{
+    display: block;
+  }
+  img{
+    display: block;
+  }
+}
+::v-deep .components_upload{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  text-align: center;
+  width: 128px;
+  height: 120px;
+  font-size: 14px;
+  border: 1px dashed #dcdde3;
+  background: #f2f7ff;
+  border-radius: 6px;
+  .cont_upload_btn{
+    display: block;
+    width: 100px;
+    height: 34px;
+    font-size: 14px;
+    left: 50%;
+    top: 14px;
+    margin-left: -50px;
+  }
+  #upFile{
+    margin: 0 auto;
+  }
+  .start_upload{
+    display: block;
+    width: 100px;
+    height: 34px;
+    color: #fff;
+    text-align: center;
+    border: none;
+    background: linear-gradient(to right, #fc8c6f, #fa544e);
+    border-radius: 34px;
+    margin: 10px auto;
+  }
+}
+.tag_list{
+  ::v-deep .el-tag{
+    margin:  0 5px 5px 0;
+  }
+}
+</style>

src/views/device/config/index.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <div class="form_item">
+            <span>设备ID:</span>
+            <el-input v-model="queryInfo.device_id" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" />
+          </div>
+          <div class="form_item">
+            <span>设备名称：</span>
+            <el-input v-model="queryInfo.device_name" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" />
+          </div>
+        </el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled" @click="removeStartUp(sels)">清空</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- 配置开关机列表 -->
+    <el-row :gutter="15">
+      <el-col>
+        <el-table style="width: 100%;" :data="startUpList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="device_id" label="设备ID" align="center" />
+          <el-table-column prop="device_account" label="设备账号" align="center" width="150" />
+          <el-table-column prop="device_name" label="设备名称" align="center" />
+          <el-table-column label="设备方向" align="center">
+            <template slot-scope="{row}">
+              <div>{{ row.device_direction==1? '竖屏' : '横屏' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="period" label="配置周期" align="center" width="300">
+            <template slot-scope="{row}">
+              <div v-show="row.open_setting">{{ row.open_setting==1? '每天 - 开机 '+row.open_time :'每周'+setWeekly(row.open_weekly)+'开机'+row.open_time }}</div>
+              <div v-show="row.open_setting">{{ row.close_setting==1?'每天 - 关机'+row.close_time :'每周'+setWeekly(row.close_weekly)+'关机'+row.close_time }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="启动画面" align="center">
+            <template slot-scope="{row}">
+              <el-image v-show="row.startup_screen" class="cover_img" :src="row.startup_screen" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_time" label="创建时间" align="center" width="200">
+            <template slot-scope="{row}">
+              <div>{{ row.update_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" align="center" width="120">
+            <template slot-scope="scope">
+              <el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
+              <el-button type="info" class="record_btn">记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getStartUpList" @size-change="handleSizeChange" />
+
+      </el-col>
+    </el-row>
+    <!-- 编辑设备 -->
+    <div class="layer device_layer">
+      <el-dialog title="编辑" :close-on-click-modal="false" :show-close="false" :visible.sync="addFromVisible" width="880px">
+        <el-form ref="form" :model="form">
+          <div class="setting_item">
+            <h4>开机时间</h4>
+            <div class="setting_cont">
+              <span>设置时间：</span>
+              <div>
+                <el-form-item
+                  prop="open_setting"
+                  :rules="[
+                    { required: true, message: '请选择开机时间', trigger: 'change' },
+                  ]"
+                  :class="{'no_margin': form.open_setting === 2}"
+                >
+                  <el-radio-group v-model="form.open_setting" @change="clearCheckbox()">
+                    <el-radio :label="1" value="everyday">每天</el-radio>
+                    <el-radio :label="2" value="weekly">每周</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="form.open_setting === 2"
+                  :class="{'weekly_margin': form.open_setting === 2}"
+                  prop="open_weekly"
+                  :rules="[
+                    { required: true, message: '请选择每周开机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-checkbox-group v-model="selectOpenWeekly">
+                    <el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+
+                <el-form-item
+                  prop="open_time"
+                  :rules="[
+                    {type: 'string', required: true, message: '请选择具体开机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-time-picker
+                    v-model="form.open_time"
+                    :picker-options="{
+                      selectableRange: '00:00:00 - 23:59:59'
+                    }"
+                    placeholder="任意时间点"
+                    value-format="HH:mm:ss"
+                  />
+                </el-form-item>
+              </div>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>关机时间</h4>
+            <div class="setting_cont">
+              <span>设置时间：</span>
+              <div>
+                <el-form-item
+                  prop="close_setting"
+                  :rules="[
+                    {required: true, message: '请选择关机时间', trigger: 'change' },
+                  ]"
+                  :class="{'no_margin': form.close_setting === 2}"
+                >
+                  <el-radio-group v-model="form.close_setting" @change="clearCheckbox()">
+                    <el-radio :label="1" value="everyday">每天</el-radio>
+                    <el-radio :label="2" value="weekly">每周</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="form.close_setting === 2"
+                  :class="{'weekly_margin': form.close_setting === 2}"
+                  prop="close_weekly"
+                  :rules="[
+                    { required: true, message: '请选择每周关机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-checkbox-group v-model="selectCloseweekly">
+                    <el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
+
+                <el-form-item
+                  prop="close_time"
+                  :rules="[
+                    {type: 'string', required: true, message: '请选择具体关机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-time-picker
+                    v-model="form.close_time"
+                    :picker-options="{
+                      selectableRange: '00:00:00 - 23:59:59'
+                    }"
+                    placeholder="任意时间点"
+                    value-format="HH:mm:ss"
+                  />
+                </el-form-item>
+              </div>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>设备方向</h4>
+            <div class="setting_cont">
+              <span>设备方向：</span>
+              <el-form-item
+                prop="device_direction_name"
+                :rules="[
+                  { required: true, message: '请选择具体设备方向', trigger: 'change' },
+                ]"
+              >
+                <el-select v-model="form.device_direction_name" size="small" class="filter-item" value-key="name" @change="selectDirection">
+                  <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" />
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>启动画面</h4>
+            <!--   action="https://jsonplaceholder.typicode.com/posts/" -->
+            <div class="setting_cont upload_img">
+              <el-form-item prop="startup_screen">
+                <UploadCover ref="childUpload" />
+              </el-form-item>
+            </div>
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
+          <el-button round @click="resetForm('form')">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadCover from '../../components/upload_cover.vue'
+import { reqStartUpList, reqEditStartUp, reqClearStartUp } from '@/api/device/startUpList.js'
+import { parseTime } from '@/utils/index.js'
+export default {
+  name: 'DeviceConfig',
+  components: { UploadCover },
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+  data() {
+    return {
+      query: {
+        blurry: ''
+      },
+      // 获取开关机列表的参数
+      queryInfo: {
+        device_id: '',
+        device_name: '',
+        is_state: '',
+        page: 1,
+        size: 10
+      },
+      total: 0,
+      // 开关机列表的数据
+      startUpList: [],
+      form: {
+        device_direction: null,
+        device_direction_name: null,
+        device_id: '',
+        open_setting: null, // 开机状态的每天和每周
+        close_setting: null, // 关机状态的每天和每周
+        open_time: '', // 具体的开机时间
+        close_time: '', // 具体的关机时间
+        startup_screen: '', // 启动画面的图片
+        open_weekly: [],
+        close_weekly: []
+      },
+      selectOpenWeekly: [], // 选中的开机每周状态
+      selectCloseweekly: [], // 选中的关机机每周状态
+      addFromVisible: false,
+      // 被选中的行
+      sels: [],
+      clearBtnDisabled: true,
+      deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }],
+      weeklyList: [
+        {
+          id: '0',
+          name: '周日'
+        },
+        {
+          id: '1',
+          name: '周一'
+        },
+        {
+          id: '2',
+          name: '周二'
+        },
+        {
+          id: '3',
+          name: '周三'
+        },
+        {
+          id: '4',
+          name: '周四'
+        },
+        {
+          id: '5',
+          name: '周五'
+        },
+        {
+          id: '6',
+          name: '周六'
+        }
+      ]
+    }
+  },
+  computed: {
+    // 将字符串渲染成汉字显示到页面
+    setWeekly() {
+      const a = {
+        0: '日',
+        1: '一',
+        2: '二',
+        3: '三',
+        4: '四',
+        5: '五',
+        6: '六'
+      }
+      return function(str) {
+        if (str) {
+          return str.split(',').map(i => a[i]).join('/')
+        }
+      }
+    }
+
+  },
+  watch: {},
+  mounted() {
+    this.getStartUpList()
+  },
+  methods: {
+    // 获取开关机列表
+    getStartUpList() {
+      // this.queryInfo.page = pager
+      const params = this.queryInfo
+      reqStartUpList(params).then(res => {
+        if (res.code == 200) {
+          this.startUpList = res.data.content
+          this.total = res.data.totalElements
+          this.queryInfo.size = res.data.size
+        } else {
+          return this.$message.error('获取设备列表失败！')
+        }
+      })
+    },
+    // 编辑开关机
+    editFormData(row) {
+      this.addFromVisible = true
+      this.form.device_id = row.device_id
+      this.form.open_setting = row.open_setting
+      this.form.close_setting = row.close_setting
+      this.form.open_time = row.open_time
+      this.form.close_time = row.close_time
+      this.form.startup_screen = row.startup_screen
+      this.form.open_weekly = row.open_weekly
+      if (row.open_weekly) {
+        this.selectOpenWeekly = row.open_weekly.split(',')
+      }
+      this.form.close_weekly = row.close_weekly
+      if (row.close_weekly) {
+        this.selectCloseweekly = row.close_weekly.split(',')
+      }
+      this.form.device_direction_name = row.device_direction == 1 ? '竖屏' : '横屏'
+      this.form.device_direction = row.device_direction
+      this.$nextTick(() => {
+        this.$refs.childUpload.imageUrl = this.form.startup_screen
+      })
+    },
+    // 每天/每周切换的情况下数据处理
+    clearCheckbox() {
+      if (this.form.open_setting === 1) {
+        this.open_weekly = []
+        this.form.open_weekly = null
+      }
+      if (this.form.close_setting === 1) {
+        this.close_weekly = []
+        this.form.close_weekly = null
+      }
+    },
+    // 选择设备方向处理
+    selectDirection(selVal) {
+      console.log(selVal)
+      this.form.device_direction = selVal.key
+      this.form.device_direction_name = selVal.name
+    },
+    // 重置表单数据
+    resetForm(formName) {
+      this.addFromVisible = false
+      this.$refs[formName].resetFields()
+    },
+    // 提交表单数据
+    submitForm(formName) {
+      this.form.startup_screen = this.$refs.childUpload.imageUrl
+      if (this.form.open_setting === 2) {
+        this.form.open_weekly = this.selectOpenWeekly.join(',')
+      }
+      if (this.form.close_setting === 2) {
+        this.form.close_weekly = this.selectCloseweekly.join(',')
+      }
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          const params = {
+            close_setting: this.form.close_setting,
+            close_time: this.form.close_time,
+            close_weekly: this.form.close_weekly,
+            device_id: this.form.device_id,
+            open_setting: this.form.open_setting,
+            open_time: this.form.open_time,
+            open_weekly: this.form.open_weekly,
+            device_direction: this.form.device_direction,
+            startup_screen: this.form.startup_screen
+          }
+          console.log(params)
+          reqEditStartUp(params).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '修改设备成功'
+              })
+              this.addFromVisible = false
+              this.getStartUpList(this.queryInfo.page)
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 列表多选操作 - 清空btn状态
+    // 单选单个复选框
+    handleSelectionChange(sels) {
+      this.sels = sels
+      if (sels.length > 0) {
+        this.clearBtnDisabled = false
+      } else {
+        this.clearBtnDisabled = true
+      }
+    },
+    // 清空
+    removeStartUp(rows) {
+      const ids = []
+      rows.forEach(item => {
+        ids.push(item.device_id)
+      })
+      // console.log(ids)
+      this.$confirm('确定要清空选中的配置周期和启动画面吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          ids
+        }
+        reqClearStartUp(params).then(res => {
+          console.log(res)
+          if (res.code == 200) {
+            this.$message({
+              message: '清空成功',
+              type: 'success'
+            })
+            this.getStartUpList(this.startUpList.length > 1 ? this.queryInfo.page : this.queryInfo.page - 1)
+          }
+        }).catch(() => {
+          this.$message({
+            message: '清空失败',
+            type: 'info'
+          })
+        })
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.queryInfo.size = size
+      this.getStartUpList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.setting_btn {
+  margin-right: 10px;
+}
+.clear_btn {
+  color: #3a8aeb;
+  border-color: #3a8aeb;
+}
+.cover_img {
+  width: 65px;
+}
+.device_layer {
+  ::v-deep .el-dialog__body {
+    padding: 0 20px;
+  }
+  .setting_item {
+    padding-top: 24px;
+    color: #333;
+    h4 {
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+    .setting_cont {
+      display: flex;
+      span {
+        display: block;
+        width: 80px;
+        line-height: 32px;
+      }
+      .no_margin {
+        margin: 0;
+      }
+      .weekly_margin {
+        margin-bottom: 6px;
+        ::v-deep .el-form-item__error {
+          top: 70%;
+        }
+      }
+      ::v-deep .el-form-item--small.el-form-item:last-child {
+        margin: 0;
+      }
+      ::v-deep .el-radio-group {
+        display: block;
+        // line-height: 32px;
+        .el-radio {
+          line-height: 32px;
+        }
+      }
+    }
+    .upload_img {
+      padding-left: 82px;
+    }
+  }
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

src/views/device/list/index.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <div class="form_item">
+            <span>状态：</span>
+            <el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
+              <el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" />
+            </el-select>
+          </div>
+          <div class="form_item">
+            <span>设备ID：</span>
+            <el-input v-model="queryInfo.device_id" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @clear="getDevice" @blur="queryDevice(queryInfo.device_id)" @keyup.enter.native="queryDevice(queryInfo.device_id)" />
+          </div>
+          <div class="form_item">
+            <span>设备名称：</span>
+            <el-input v-model="queryInfo.device_name" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @clear="getDevice" @blur="getDevice" @keyup.enter.native="getDevice" />
+          </div>
+        </el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add clear_btn" plain disabled>清空</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- table :data="deviceList"-->
+    <el-row :gutter="15">
+      <el-col>
+        <el-table style="width: 100%;" :data="deviceList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="device_id" label="设备ID" align="center" />
+          <el-table-column prop="device_account" label="设备账号" align="center" />
+          <el-table-column prop="device_name" label="设备名称" align="center" />
+          <el-table-column label="设备方向" align="center">
+            <template slot-scope="{row}">
+              <div>{{ row.device_direction==1? '竖屏' : '横屏' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="organ_name" label="所属机构" align="center" /> >
+
+          <el-table-column prop="isDel" label="设备状态" align="center">
+            <template slot-scope="scope">
+              <div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="content" label="发布内容" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="update_time" label="创建时间" align="center" width="160">
+            <template slot-scope="{row}">
+              <div>{{ row.update_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" align="center" width="160">
+            <template slot-scope="scope">
+              <el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
+              <el-button type="danger" class="record_btn" @click="recordData(scope.$index, scope.row)">记录</el-button>
+              <el-button type="danger" @click="removeDevice(scope.row)">解绑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getDevice" @size-change="handleSizeChange" />
+    <!-- 编辑设备 -->
+    <div class="layer">
+      <el-dialog :title="dialogTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="addFromVisible" width="576px">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="设备账号" prop="account">
+            <el-input v-model="form.account" autocomplete="off" disabled />
+          </el-form-item>
+          <el-form-item label="设备名称" prop="name">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="设备方向" prop="orientation_name">
+            <el-select v-model="form.orientation_name" size="small" class="filter-item" @change="selectDirection">
+              <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
+          <el-button round @click="addFromVisible = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <div class="publish_layer">
+      <el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="970px" height="590px">
+        <div class="content_warp">
+          <div v-for="(items,index) in contentDevice" :key="index" class="release_list">
+            <h4>发布名称 {{ items.relaase_name }} </h4>
+            <p style="margin-bottom: 10px"> 发布时间 {{ items.release_start.split("00:00:00")[0] }} </p>
+            <div class="device_cont_list">
+              <!-- <div v-if="items.bgm_main != null && items.bgm_name != null" class="material_item item_cont">
+                <div class="radio_img"></div>
+                <div class="file_name">{{ items.bgm_name }}</div>
+              </div> -->
+              <div v-for="(item, i) in items.show_materials" :key="'list-'+i" class="material_item item_cont">
+                <div class="img_box">
+                  <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" alt />
+                </div>
+                <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
+                <div class="item_format">
+                  <span class="item_type">{{ item.deposit_url | getFileFormat }}</span>
+                  <!-- <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span> -->
+                </div>
+                <div class="file_name">{{ item.material_name }}</div>
+                <div v-if="item.bgm_name && item.material_type == 0" class="bgm_name">背景音乐:{{ item.bgm_name }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 记录 -->
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="recordVisible" title="记录" class="record_layer" width="750px">
+      <el-table :data="recordData">
+        <el-table-column property="name" label="操作人" />
+        <el-table-column property="permissionType" label="角色权限" />
+        <el-table-column property="account" label="登录账号" />
+        <el-table-column property="type" label="操作类型" />
+        <el-table-column property="date" label="操作时间" />
+      </el-table>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { ReqDeviceEdit, ReqDeviceList, ReqQueryDevice, ReqRemoveDevice, FetchFindReleaseDetailsByDeviceId } from '@/api/device/deviceList.js'
+import { parseTime, getSeconds, getFileFormat } from '@/utils/index.js'
+export default {
+  name: 'Device',
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    },
+    getSeconds(s) {
+      return getSeconds(s)
+    },
+    getFileFormat(s) {
+      return getFileFormat(s)
+    }
+  },
+  data() {
+    return {
+      queryInfo: {
+        device_id: '',
+        device_name: '',
+        is_state: '',
+        page: 1,
+        size: 10
+      },
+      total: 0,
+      // device_id:'',
+      dialogTitle: '',
+      // 编辑的对话框
+      addFromVisible: false,
+      contentVisible: false,
+      contentDevice: [],
+      recordVisible: false,
+      // 设备列表的数据
+      deviceList: [],
+      stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
+      deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }],
+      query: {
+        state: null
+      },
+      // 收集表单数据
+      form: {
+        account: null,
+        name: null,
+        orientation_name: null,
+        orientation: null,
+        device_id: '',
+        orga_id: '1310000'
+      },
+      rules: {
+        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
+        orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
+      }
+    }
+  },
+  watch: {},
+  mounted() {
+    this.getDevice()
+  },
+  methods: {
+    // 获取设备列表的数据
+    getDevice() {
+      // this.queryInfo.page = pager
+      const params = this.queryInfo
+      ReqDeviceList(params).then(res => {
+        console.log(res)
+        if (res.code == 200) {
+          this.deviceList = res.data.content
+          this.total = res.data.totalElements
+          this.queryInfo.size = res.data.size
+        } else {
+          return this.$message.error('获取设备列表失败！')
+        }
+      })
+    },
+    // 编辑
+    editFormData(row) {
+      this.addFromVisible = true
+      this.form.account = row.device_account
+      this.form.name = row.device_name
+      this.form.orientation_name = row.device_direction == 1 ? '竖屏' : '横屏'
+      this.form.orientation = row.device_direction
+      this.form.device_id = row.device_id
+    },
+    // 选择设备方向处理
+    selectDirection(selVal) {
+      console.log(selVal)
+      this.form.orientation = selVal.key
+      this.form.orientation_name = selVal.name
+    },
+    // 解绑
+    removeDevice(row) {
+      // console.log(row.device_id)
+      this.$confirm(`你确定解绑${row.device_name}?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const params = {
+          id: row.device_id
+        }
+        ReqRemoveDevice(params).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '解绑成功',
+              type: 'success'
+            })
+            // 解绑时 如果一页设备只剩下一个 则返回上一页
+            this.getDevice(this.deviceList.length > 1 ? this.queryInfo.page : this.queryInfo.page - 1)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消解绑',
+          type: 'info'
+        })
+      })
+    },
+    recordData(index, row) {
+      this.recordVisible = true
+    },
+    // 查看
+    handleClick(row) {
+      console.log(row)
+      this.contentVisible = true
+      const params = {
+        device_id: row.device_id
+      }
+      FetchFindReleaseDetailsByDeviceId(params).then(res => {
+        if (res.code === 200) {
+          console.log(res)
+          this.contentDevice = res.data
+        }
+      })
+    },
+    // 修改设备信息并提交
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          const params = {
+            account: this.form.account,
+            device_name: this.form.name,
+            device_direction: this.form.orientation,
+            device_id: this.form.device_id,
+            orga_id: '13000'
+          }
+          console.log(params)
+          ReqDeviceEdit(params).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                type: 'success',
+                message: '修改设备成功'
+              })
+            }
+            this.addFromVisible = false
+            this.getDevice(this.queryInfo.page)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 查询设备
+    queryDevice(id) {
+      const params = {
+        device_id: id
+      }
+      ReqQueryDevice(params).then(res => {
+        console.log(res)
+        if (res.code == 200) {
+          this.getDevice()
+        }
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.queryInfo.size = size
+      this.getDevice()
+    }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.clear_btn {
+  color: #3a8aeb;
+  border-color: #3a8aeb;
+}
+.publish_layer {
+  ::v-deep .el-dialog__body {
+    padding: 0 20px 30px 20px;
+    height: 590px;
+    overflow-y: auto;
+  }
+}
+.content_warp {
+  padding-top: 16px;
+  h4 {
+    margin: 6px 0 16px 0;
+    font-size: 16px;
+    color: #333;
+  }
+}
+.release_list{
+  margin-bottom: 40px;
+}
+.device_cont_list{
+  display: flex;
+  flex-wrap: wrap;
+  .item_cont{
+    overflow: inherit;
+  }
+  .bgm_name{
+    font-size: 12px;
+    padding: 10px 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+  }
+}
+</style>

src/views/login.vue

@@ -81,13 +81,14 @@ export default {
         callback()
       }
     }
+    // 15902734788
     return {
       Background: Background,
       codeUrl: '',
       cookiePass: '',
       loginForm: {
-        username: '15902734788',
-        phone: '15902734788',
+        username: '',
+        phone: '',
         password: '',
         rememberMe: false,
         code: '',
@@ -148,6 +149,7 @@ export default {
       this.$router.push(`/forgetPassword`)
     },
     handleLogin() {
+      this.loginForm.username = this.loginForm.phone
       this.$refs.loginForm.validate(valid => {
         const user = {
           username: this.loginForm.username,

src/views/system/user/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    fff
     <!--工具栏-->
     <div class="head-container">
       <el-row type="flex">
@@ -8,7 +9,7 @@
           <div class="form_item">
             <span>角色名称：</span>
             <el-input
-              v-model="query.blurry"
+              v-model="blurry"
               clearable
               size="small"
               placeholder="角色名称"
@@ -20,7 +21,7 @@
           <div class="form_item">
             <span>管理员名称：</span>
             <el-input
-              v-model="query.blurry"
+              v-model="blurry"
               clearable
               size="small"
               placeholder="管理员名称"
@@ -188,28 +189,28 @@
 </template>
 
 <script>
-import crudUser from '@/api/system/user'
+// import crudUser from '@/api/system/user'
 import { isvalidPhone } from '@/utils/validate'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+// import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 // import crudOperation from '@crud/CRUD.operation'
 // import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
 import { mapGetters } from 'vuex'
-const defaultForm = {
-  id: null,
-  account: null,
-  nickName: '',
-  roles: null,
-  enabled: ''
-}
+// const defaultForm = {
+//   id: null,
+//   account: null,
+//   nickName: '',
+//   roles: null,
+//   enabled: ''
+// }
 export default {
   name: 'User',
   components: { rrOperation, pagination },
-  cruds() {
-    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
+  // cruds() {
+  //   return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
+  // },
+  // mixins: [presenter(), header(), form(defaultForm), crud()],
   // 数据字典
   data() {
     // 自定义验证

src/views/user/menu1.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <!-- 搜索 -->
+          <div class="form_item">
+            <span>角色名称：</span>
+            <el-input
+              v-model="query.role_name"
+              clearable
+              size="small"
+              placeholder="角色名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="getUserList(page,query.role_name)"
+              @clear="getUserList(page,query.role_name)"
+            />
+          </div>
+          <div class="form_item">
+            <span>管理员名称：</span>
+            <el-input
+              v-model="query.nickName"
+              clearable
+              size="small"
+              placeholder="管理员名称"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="getUserList(page,query.nickName)"
+              @clear="getUserList(page,query.nickName)"
+            />
+          </div>
+        </el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <!--新增用户-->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :show-close="false"
+      :visible.sync="addDialogVisible"
+      title="新增"
+      width="576px"
+    >
+      <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
+        <el-form-item
+          label="手机号"
+          prop="account"
+          :rules="[
+            { required: true, message: '请输入手机号', trigger: 'blur' }
+          ]"
+        >
+          <el-input v-model="form.account" style="width: 336px" />
+        </el-form-item>
+        <el-form-item
+          label="管理员名称"
+          prop="nickName"
+          :rules="[
+            { required: true, message: '请输入管理员名称', trigger: 'blur' },
+            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+          ]"
+        >
+          <el-input v-model="form.nickName" style="width: 336px" />
+        </el-form-item>
+        <el-form-item
+          label="管理员角色"
+          prop="roles"
+          :rules="[
+            { required: true, message: '请选择管理员角色', trigger: 'change' }
+          ]"
+        >
+          <el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px">
+            <el-option label="机构超级管理员" value="1" />
+            <el-option label="普通用户" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="管理员状态"
+          prop="enabled"
+          :rules="[
+            { required: true, trigger: 'change', message: '请选择管理员状态' }
+          ]"
+        >
+          <el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px">
+            <el-option label="启用" value="1" />
+            <el-option label="关闭" value="0" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round>保存</el-button>
+        <el-button round @click="addDialogVisible=false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <!-- 编辑用户 -->
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :show-close="false"
+      :visible.sync="editDialogVisible"
+      title="编辑"
+      width="576px"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="editForm"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
+        <el-form-item label="管理员名称" prop="nickName">
+          <el-input v-model="editForm.nickName" style="width: 336px" />
+        </el-form-item>
+        <el-form-item label="管理员角色" prop="roles">
+          <el-input v-model="editForm.roles" disabled style="width: 336px" />
+        </el-form-item>
+        <el-form-item label="机构名称" prop="orgName">
+          <el-input v-model="editForm.orgName" disabled style="width: 336px" />
+        </el-form-item>
+        <el-form-item label="更改手机号" prop="phone">
+          <el-input v-model.number="editForm.phone" style="width: 336px" />
+        </el-form-item>
+        <el-form-item label="验证码" prop="code" class="auth_code">
+          <el-input v-model.number="editForm.code" style="width: 336px" />
+          <div class="login-code">
+            <span @click="countdown()">{{ verification }}</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="登录密码" prop="password">
+          <el-input v-model="editForm.password" style="width: 336px" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round>保存</el-button>
+        <el-button round @click="editDialogVisible=false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-row :gutter="15">
+      <el-col>
+        <el-table
+          ref="table"
+          :data="userList"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+          style="width: 100%;"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="username" width="135" align="center" label="登录账号" />
+          <el-table-column prop="nickName" align="center" label="管理员名称" />
+          <el-table-column prop="roles" align="center" label="管理角色">
+            <template slot-scope="scope">
+              <div v-for="(item,index) in scope.row.roles" :key="index">
+                <div>{{ item.name }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="org" align="center" label="机构名称">
+            <template slot-scope="scope">
+              <div>{{ scope.row.org ? scope.row.org.name : '' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="phone" align="center" label="手机号码" />
+          <el-table-column label="状态" align="center" prop="enabled">
+            <template slot-scope="scope">
+              <div>{{ scope.row.enabled ? '启用' : '关闭' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" width="155" align="center" label="创建日期">
+            <template slot-scope="{row}">
+              <div>{{ row.createTime | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <!-- v-if="checkPer(['admin','user:edit','user:del'])" -->
+          <el-table-column label="操作" width="120" align="center" fixed="right">
+            <template slot-scope="scope">
+              <!-- <udOperation
+            :data="scope.row"
+            :permission="permission"
+            :disabled-dle="scope.row.id === user.id"
+              />-->
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button type="danger" class="delt_btn">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUserList" @size-change="handleSizeChange" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { FetchUserList } from '@/api/system/user'
+import { FetchDropDownList } from '@/api/system/role'
+import { isvalidPhone } from '@/utils/validate'
+import { parseTime } from '@/utils/index.js'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'User',
+  filters: {
+    parseTime(time, cFormat) {
+      return parseTime(time, cFormat)
+    }
+  },
+  components: { },
+  // 数据字典
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'))
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      userList: [],
+      total: 0,
+      page: 0,
+      size: 10,
+      addDialogVisible: false,
+      editDialogVisible: false,
+      query: {
+        role_name: '',
+        nickName: ''
+      },
+      form: {
+        account: null,
+        nickName: '',
+        roles: null,
+        enabled: ''
+      },
+      editForm: {
+        nickName: '',
+        roles: '',
+        orgName: '',
+        phone: '',
+        code: '',
+        password: ''
+      },
+      disabledSendCode: false,
+      verification: '获取验证码',
+      countNum: 60,
+      height: document.documentElement.clientHeight - 180 + 'px;',
+      permission: {
+        add: ['admin', 'user:add'],
+        edit: ['admin', 'user:edit'],
+        del: ['admin', 'user:del']
+      },
+      rules: {
+        nickName: [
+          { required: true, message: '请输入管理员名称', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, trigger: 'blur', validator: validPhone }
+        ],
+        code: [
+          { required: true, trigger: 'blur', message: '请输入验证码' }
+        ],
+        password: [
+          { required: true, trigger: 'blur', message: '请输入密码' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  mounted: function() {
+    this.getUserList()
+  },
+  methods: {
+    // 获取用户列表的数据
+    getUserList(pager = 0, name) {
+      this.page = pager
+      const param = {
+        page: this.page,
+        size: this.size,
+        blurry: name
+      }
+      FetchUserList(param).then(res => {
+        if (res.code == 200) {
+          this.userList = res.data.content
+          this.total = res.data.totalElements
+          this.size = res.data.size
+        } else {
+          return this.$message.error('获取用户列表数据失败！')
+        }
+      })
+    },
+    // 每条显示数据改变时的事件
+    handleSizeChange(size) {
+      // 整理参数
+      this.size = size
+      this.getUserList()
+    },
+    getDropdownList() {
+      const param = {
+
+      }
+      FetchDropDownList(param).then(res => {
+        if (res.code == 200) {
+          this.userList = res.data.content
+          this.total = res.data.totalElements
+          this.size = res.data.size
+        } else {
+          return this.$message.error('获取角色下拉列表数据失败！')
+        }
+      })
+    },
+    // 编辑
+    editFormData(index, row) {
+      this.editDialogVisible = true
+      this.editForm.nickName = row.nickName
+      if (row.roles) {
+        row.roles.forEach(item => {
+          this.editForm.roles = item.name
+        })
+      }
+      if (row.org) {
+        this.editForm.orgName = row.org.name
+      }
+      this.editForm.phone = row.phone
+      this.editForm.enabled = row.enabled
+    },
+    // 获取验证码
+    getAuthCode() {
+      // const param = {
+      //   phone: this.editForm.phone
+      // }
+      // proxy.$http
+      //   .post(proxy.$API.SENDMSGCODE,
+      //     param
+      //   )
+      //   .then(res => {
+      //     if (res.type == 200) {
+      //       this.countdown()
+      //     } else {
+      //       console.log(res.content)
+      //     }
+      //   })
+      //   .catch(res => {
+      //     console.log(res)
+      //   })
+    },
+    countdown() {
+      if (this.disabledSendCode) {
+        return
+      }
+      if (!/^1\d{10}$/.test(this.editForm.phone)) {
+        this.$message.error('手机号错误，请重新输入')
+        return
+      }
+      this.getAuthCode()
+      this.disabledSendCode = true
+      // this.isSendAuth = true
+      this.countNum = 60
+      const timer = setInterval(() => {
+        this.verification = this.countNum + '重新获取'
+        this.countNum -= 1
+        if (this.countNum < 1) {
+          clearInterval(timer)
+          this.verification = '重新获取'
+          this.disabledSendCode = false
+          // this.isSendAuth = false
+          console.log('倒计时结束')
+        }
+      }, 1000)
+    },
+    checkboxT(row, rowIndex) {
+      return row.id !== this.user.id
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-dialog__header {
+  background-color: #f1f1f1;
+}
+.edit_code {
+  margin-left: 20px;
+}
+</style>