SideMenu.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <div class="side-catalog-wrap">
  3. <el-scrollbar class="side-catalog-box">
  4. <div
  5. class="side-catalog-all side-catalog-item"
  6. :class="{'active-catalog':isAll}"
  7. @click="clickAllCatalog()"
  8. >
  9. 全部
  10. </div>
  11. <div
  12. v-for="(catalog,index) in catalogList"
  13. :key="index"
  14. class="side-catalog-item"
  15. :class="{'active-catalog':activeCatalog.code === catalog.code && !isAll}"
  16. @mouseenter="mouseenter(catalog.code)"
  17. @mouseleave="mouseleave"
  18. @click="clickCatalog(catalog)"
  19. >
  20. <span class="catalog-name">{{ catalog.name }}</span>
  21. <el-dropdown
  22. :class="{'dropdown-show':(showDropdown && hoverItem === catalog.code) || activeCatalog.code === catalog.code}"
  23. class="page-list-dropdown"
  24. placement="bottom-start"
  25. node-key="id"
  26. trigger="click"
  27. >
  28. <span class="el-dropdown-link menu-dropdown-link">
  29. <i
  30. class="el-icon-more"
  31. :class="{'active-icon-more':activeCatalog.code === catalog.code && !isAll}"
  32. />
  33. <el-dropdown-menu
  34. slot="dropdown"
  35. class="dropdown-menu-box bs-el-dropdown-menu"
  36. >
  37. <el-dropdown-item @click.native="catalogEdit(catalog)">
  38. 编辑
  39. </el-dropdown-item>
  40. <el-dropdown-item
  41. class="delete-item"
  42. @click.native="catalogDel(catalog)"
  43. >
  44. 删除
  45. </el-dropdown-item>
  46. </el-dropdown-menu>
  47. </span>
  48. </el-dropdown>
  49. </div>
  50. </el-scrollbar>
  51. <div
  52. class="add-catalog-box"
  53. @click="catalogAdd"
  54. >
  55. <i class="el-icon-plus" />
  56. <div>新建分组</div>
  57. </div>
  58. <!-- 新增或编辑目录弹窗 -->
  59. <el-dialog
  60. :title="currentCatalog.code ? '编辑分组':'新建分组'"
  61. :visible.sync="catalogVisible"
  62. custom-class="bs-el-dialog"
  63. width="30%"
  64. class="bs-dialog-wrap bs-el-dialog"
  65. @close="handleClose"
  66. >
  67. <el-form
  68. ref="form"
  69. :model="currentCatalog"
  70. label-width="80px"
  71. :rules="formRules"
  72. >
  73. <el-form-item
  74. label="分组名称"
  75. prop="name"
  76. >
  77. <el-input
  78. v-model="currentCatalog.name"
  79. class="bs-el-input"
  80. />
  81. </el-form-item>
  82. <el-form-item
  83. label="排序"
  84. >
  85. <el-input-number
  86. v-model="currentCatalog.orderNum"
  87. :min="0"
  88. :max="30000"
  89. controls-position="right"
  90. class="bs-el-input-number"
  91. />
  92. </el-form-item>
  93. </el-form>
  94. <span
  95. slot="footer"
  96. class="dialog-footer"
  97. >
  98. <el-button
  99. class="bs-el-button-default"
  100. @click="catalogVisible = false"
  101. >
  102. 取消
  103. </el-button>
  104. <el-button
  105. type="primary"
  106. @click="addOrEditCatalog"
  107. >确定</el-button>
  108. </span>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. import { get, post } from '../../packages/js/utils/http'
  114. import _ from 'lodash'
  115. export default {
  116. components: { },
  117. props: {
  118. type: {
  119. type: String,
  120. default: 'bigScreenCatalog'
  121. }
  122. },
  123. data () {
  124. return {
  125. showDropdown: false,
  126. hoverItem: null,
  127. isAll: true,
  128. catalogList: [],
  129. catalogVisible: false,
  130. activeCatalog: { // 激活的目录,点击其他非目录按钮时需要保持当前的菜单激活状态
  131. name: '',
  132. id: '',
  133. code: ''
  134. },
  135. currentCatalog: { // 选中目录
  136. name: '',
  137. id: '',
  138. code: ''
  139. },
  140. formRules: {
  141. name: [
  142. { required: true, message: '分组名称不能为空', trigger: 'blur' }
  143. ]
  144. }
  145. }
  146. },
  147. mounted () {
  148. this.getCatalogList()
  149. },
  150. methods: {
  151. mouseenter (code) {
  152. this.showDropdown = true
  153. this.hoverItem = code
  154. },
  155. mouseleave () {
  156. this.showDropdown = false
  157. },
  158. // 点击全部
  159. clickAllCatalog () {
  160. this.isAll = true
  161. this.$emit('getPageInfo', { isAll: true, page: { id: '', code: '', name: '' } })
  162. },
  163. // 点击目录
  164. clickCatalog (catalog) {
  165. this.currentCatalog = _.cloneDeep(catalog)
  166. this.activeCatalog = _.cloneDeep(catalog)
  167. this.isAll = false
  168. this.$emit('getPageInfo', { isAll: false, page: catalog })
  169. },
  170. // 关闭目录弹窗
  171. handleClose () {
  172. this.catalogVisible = false
  173. this.$refs.form.clearValidate()
  174. },
  175. // 新增编辑目录(点击确定)
  176. addOrEditCatalog () {
  177. this.$refs.form.validate(async (valid) => {
  178. if (!valid) {
  179. return
  180. }
  181. if (!this.currentCatalog.id) {
  182. post('/bigScreen/type/add',
  183. {
  184. ...this.currentCatalog,
  185. type: this.type || 'bigScreenCatalog'
  186. }).then(data => {
  187. this.catalogVisible = false
  188. this.getCatalogList()
  189. this.flag = true
  190. // 关闭页面菜单的弹窗
  191. this.closePageMenuDialog()
  192. }).catch(() => {
  193. })
  194. } else {
  195. post('/bigScreen/type/update', { ...this.currentCatalog, type: this.type || 'bigScreenCatalog' }).then(data => {
  196. this.catalogVisible = false
  197. this.getCatalogList()
  198. }).catch(() => {
  199. })
  200. }
  201. })
  202. },
  203. // 新增目录
  204. catalogAdd () {
  205. this.catalogVisible = true
  206. this.currentCatalog = { // 选中目录
  207. name: '',
  208. id: '',
  209. code: ''
  210. }
  211. },
  212. // 编辑目录
  213. catalogEdit () {
  214. this.catalogVisible = true
  215. },
  216. // 删除目录
  217. catalogDel (catalog) {
  218. this.$confirm('确定删除该目录?', '提示', {
  219. confirmButtonText: '确定',
  220. cancelButtonText: '取消',
  221. type: 'warning',
  222. customClass: 'bs-el-message-box'
  223. }).then(async () => {
  224. post(`/bigScreen/type/delete/${catalog.id}`).then(() => {
  225. this.$message({
  226. type: 'success',
  227. message: '删除成功'
  228. })
  229. this.getCatalogList()
  230. }).catch(() => {
  231. this.$message({
  232. type: 'error',
  233. message: '删除失败!'
  234. })
  235. })
  236. }).catch()
  237. },
  238. // 获取目录的列表
  239. getCatalogList () {
  240. this.pageLoading = true
  241. get(`/bigScreen/type/list/${this.type}`).then(data => {
  242. this.catalogList = data
  243. }).catch(() => {
  244. }).finally(() => {
  245. this.pageLoading = false
  246. })
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="scss" scoped>
  252. @import '~packages/assets/style/bsTheme.scss';
  253. .side-catalog-wrap{
  254. // padding-top: 16px;
  255. width: 220px;
  256. height: 100%;
  257. box-sizing: border-box;
  258. color: var(--bs-el-title);
  259. background-color: var(--bs-background-2);
  260. .side-catalog-box{
  261. height: calc(100% - 50px);
  262. overflow-y: auto;
  263. .side-catalog-all{
  264. font-weight: bold;
  265. }
  266. .side-catalog-item{
  267. width: 100%;
  268. padding: 0px 16px;
  269. line-height: 36px;
  270. display: flex;
  271. justify-content: space-between;
  272. &:hover{
  273. cursor: pointer;
  274. }
  275. .el-icon-more{
  276. transform: rotate(90deg);
  277. color: var(--bs-el-title);
  278. font-weight: 400;
  279. }
  280. .active-icon-more{
  281. color:var(--bs-el-text);
  282. }
  283. .catalog-name{
  284. overflow:hidden;
  285. white-space: nowrap;
  286. text-overflow: ellipsis;
  287. -o-text-overflow:ellipsis;
  288. }
  289. .page-list-dropdown{
  290. opacity: 0;
  291. }
  292. .dropdown-show{
  293. opacity: 1;
  294. }
  295. }
  296. /*菜单激活时的样式*/
  297. .active-catalog{
  298. background-color: rgba(var(--bs-el-color-primary-active), 0.4);
  299. color: var(--bs-el-text);
  300. &::after{
  301. content: '';
  302. position: absolute;
  303. left: 0;
  304. width: 4px;
  305. height: 36px;
  306. background-color: var(--bs-el-color-primary);
  307. }
  308. }
  309. }
  310. .add-catalog-box{
  311. padding: 10px 0;
  312. box-sizing: border-box;
  313. display: flex;
  314. justify-content: center;
  315. align-items: center;
  316. border-radius: 10px;
  317. margin: 0 8px;
  318. &:hover{
  319. background-color: var(--bs-background-1);
  320. cursor: pointer;
  321. color: var(--bs-el-text);;
  322. }
  323. .el-icon-plus{
  324. padding: 0 5px;
  325. }
  326. }
  327. }
  328. .dropdown-menu-box{
  329. left: 50%;
  330. transform: translateX(-40%);
  331. width: 100px!important;
  332. /deep/.el-dropdown-menu__item{
  333. text-align: center;
  334. padding: 5px;
  335. }
  336. /deep/.popper__arrow{
  337. left: 50% !important;
  338. transform: translateX(-50%) !important;
  339. }
  340. }
  341. </style>