diff --git a/template/admin/src/components/uploadPictures/index.vue b/template/admin/src/components/uploadPictures/index.vue index 095d4ce90..79ed1ed91 100644 --- a/template/admin/src/components/uploadPictures/index.vue +++ b/template/admin/src/components/uploadPictures/index.vue @@ -1,9 +1,8 @@ @@ -162,14 +222,19 @@ import { import Setting from '@/setting'; import { getCookies } from '@/libs/util'; import uploadImg from '@/components/uploadImg'; +import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'; export default { name: 'uploadPictures', - components: { uploadImg }, + components: { uploadImg, VueTreeList }, props: { isChoice: { type: String, default: '', }, + isPage: { + type: Boolean, + default: false, + }, gridBtn: { type: Object, default: null, @@ -199,7 +264,9 @@ export default { checkPicList: [], uploadName: { name: '', + all: 1, }, + formValidate: { id: 0 }, FromData: null, treeId: 0, isJudge: false, @@ -209,6 +276,7 @@ export default { }, fileData: { pid: 0, + real_name: '', page: 1, limit: this.pageLimit || 18, }, @@ -219,6 +287,10 @@ export default { isShowPic: false, header: {}, ids: [], // 选中附件的id集合 + lietStyle: 'list', + imageUrl: '', + loading: false, + multipleSelection: [], }; }, mounted() { @@ -227,6 +299,63 @@ export default { this.getFileList(); }, methods: { + radioChange() { + this.initData(); + }, + lookImg(item) { + this.imageUrl = item.att_dir; + const viewer = this.$el.querySelector('.images').$viewer; + viewer.show(); + this.$nextTick(() => { + let i = this.pictrueList.findIndex((e) => e.att_dir === item.att_dir); + viewer.update().view(i); + }); + }, + onDel(node) { + let method = node.cate_id ? routeDel : routeCateDel; + this.$Modal.confirm({ + title: '警告', + content: '

删除后无法恢复，请确认后删除！

', + onOk: () => { + method(node.id) + .then((res) => { + this.$Message.success(res.msg); + node.remove(); + }) + .catch((err) => { + this.$Message.error(err); + }); + }, + onCancel: () => {}, + }); + }, + + onChangeName(params) { + if (params.eventType == 'blur') { + let data = { + name: params.newName, + id: params.id, + }; + interfaceEditName(data) + .then((res) => { + this.$Message.success(res.msg); + }) + .catch((err) => { + this.$Message.error(err); + }); + } + }, + // 点击菜单 + clickMenu(data, name) { + console.log(name, data); + if (name == 1) { + this.append(data); + } else if (name == 2) { + this.editPic(data); + } else if (name == 3) { + this.remove(data, '分类'); + } + }, uploadSuccess() { this.fileData.page = 1; this.getFileList(); @@ -244,259 +373,23 @@ export default { getToken() { this.header['Authori-zation'] = 'Bearer ' + getCookies('token'); }, - // 树状图 - renderContent(h, { root, node, data }) { - let operate = []; - if (data.pid == 0) { - operate.push( - h( - 'div', - { - class: ['ivu-dropdown-item'], - on: { - click: () => { - this.append(root, node, data); - }, - }, - }, - '添加分类', - ), - ); - } - if (data.id !== '') { - operate.push( - h( - 'div', - { - class: ['ivu-dropdown-item'], - on: { - click: () => { - this.editPic(root, node, data); - }, - }, - }, - '编辑分类', - ), - h( - 'div', - { - class: ['ivu-dropdown-item'], - on: { - click: () => { - this.remove(root, node, data, '分类'); - }, - }, - }, - '删除分类', - ), - ); - } - return h( - 'span', - { - class: ['ivu-span'], - style: { - display: 'inline-block', - width: '88%', - height: '32px', - lineHeight: '32px', - position: 'relative', - color: 'rgba(0,0,0,0.6)', - cursor: 'pointer', - }, - on: { - mouseenter: () => { - this.onMouseOver(root, node, data); - }, - mouseleave: () => { - this.onMouseOver(root, node, data); - }, - // click: (e) => { - // this.appendBtn(root, node, data, e); - // }, - }, - }, - [ - h( - 'span', - { - on: { - click: (e) => { - this.appendBtn(root, node, data, e); - }, - }, - }, - data.title, - ), - h( - 'div', - { - style: { - display: 'inline-block', - float: 'right', - }, - }, - [ - h('Icon', { - props: { - type: 'ios-more', - }, - style: { - marginRight: '8px', - fontSize: '20px', - display: 'inline', - }, - on: { - click: (e) => { - this.onClick(root, node, data, e); - }, - }, - }), - h( - 'div', - { - class: ['right-menu ivu-poptip-inner'], - style: { - width: '80px', - position: 'absolute', - zIndex: '9', - top: '0', - right: '0', - display: data.flag2 ? 'block' : 'none', - }, - }, - operate, - ), - ], - ), - ], - ); - }, - // renderContent (h, { root, node, data }) { - // let actionData = []; - // if (data.id !== '' && data.pid == 0) { - // actionData.push(h('Button', { - // props: Object.assign({}, this.buttonProps, { - // icon: 'ios-add' - // }), - // style: { - // marginRight: '8px', - // display: data.flag ? 'inline' : 'none' - // }, - // on: { - // click: () => { this.append(root, node, data) } - // - // } - // })); - // } - // if (data.id !== '') { - // actionData.push(h('Button', { - // props: Object.assign({}, this.buttonProps, { - // icon: 'md-create' - // }), - // style: { - // marginRight: '8px', - // display: data.flag ? 'inline' : 'none' - // }, - // on: { - // click: () => { this.editPic(root, node, data) } - // } - // })); - // actionData.push(h('Button', { - // props: Object.assign({}, this.buttonProps, { - // icon: 'ios-remove' - // }), - // style: { - // display: data.flag ? 'inline' : 'none' - // }, - // on: { - // click: () => { this.remove(root, node, data, '分类') } - // } - // })); - // } - // return h('div', { - // style: { - // display: 'inline-block', - // width: '90%' - // }, - // on: { - // mouseenter: () => { this.onMouseOver(root, node, data) }, - // mouseleave: () => { this.onMouseOver(root, node, data) } - // } - // }, [ - // h('span', [ - // h('span', { - // style: { - // cursor: 'pointer' - // }, - // class: ['ivu-tree-title'], - // on: { - // click: (e) => { this.appendBtn(root, node, data, e) } - // } - // }, data.title) - // ]), - // h('span', { - // style: { - // display: 'inline-block', - // float: 'right' - // } - // }, actionData) - // ]); - // }, - renderContentSel(h, { root, node, data }) { - return h( - 'div', - { - style: { - display: 'inline-block', - width: '90%', - }, - }, - [ - h('span', [ - h( - 'span', - { - style: { - cursor: 'pointer', - }, - class: ['ivu-tree-title'], - on: { - click: (e) => { - this.handleCheckChange(root, node, data, e); - }, - }, - }, - data.title, - ), - ]), - ], - ); - }, - // 下拉树 - handleCheckChange(root, node, data, e) { - this.list = []; - // this.pids = 0; - let value = data.id; - let title = data.title; - this.list.push({ - value, - title, - }); - if (this.ids.length) { - this.pids = value; + moveImg(status) { + if (!status) { this.getMove(); } else { - this.$Message.warning('请先选择图片'); + if (!this.ids.toString()) { + this.$Message.warning('请先选择图片'); + return; + } } - let selected = this.$refs.reference.$el.querySelectorAll('.ivu-tree-title-selected'); - for (let i = 0; i < selected.length; i++) { - selected[i].className = 'ivu-tree-title'; - } - e.path[0].className = 'ivu-tree-title ivu-tree-title-selected'; // 当前点击的元素 }, + searchImg() {}, // 移动分类 getMove() { + if (!this.ids.toString()) { + this.$Message.warning('请先选择图片'); + return; + } let data = { pid: this.pids, images: this.ids.toString(), @@ -513,11 +406,9 @@ export default { this.$Message.error(res.msg); }); }, - // 删除图片 - editPicList(tit) { - this.tits = tit; + delImg(id) { let ids = { - ids: this.ids.toString(), + ids: id, }; let delfromData = { title: '删除选中图片', @@ -535,6 +426,32 @@ export default { this.$Message.error(res.msg); }); }, + // 删除图片 + editPicList(id) { + let ids = { + ids: id || this.ids.toString(), + }; + let delfromData = { + title: '删除选中图片', + url: `file/file/delete`, + method: 'POST', + ids: ids, + }; + this.$modalSure(delfromData) + .then((res) => { + this.$Message.success(res.msg); + this.getFileList(); + this.initData(); + }) + .catch((res) => { + this.$Message.error(res.msg); + }); + }, + initData() { + this.checkPicList = []; + this.ids = []; + this.multipleSelection = []; + }, // 鼠标移入 移出 onMouseOver(root, node, data) { event.preventDefault(); @@ -543,31 +460,24 @@ export default { data.flag2 = false; } }, - onClick(root, node, data, e) { - e.preventDefault(); + // onClick(root, node, data, e) { + // e.preventDefault(); - data.flag2 = !data.flag2; - }, + // data.flag2 = !data.flag2; + // }, // 点击树 - appendBtn(root, node, data, e) { - e.preventDefault(); - + appendBtn(data) { this.treeId = data.id; this.fileData.page = 1; this.getFileList(); - let selected = this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected'); - for (let i = 0; i < selected.length; i++) { - selected[i].className = 'ivu-tree-title'; - } - e.path[0].className = 'ivu-tree-title ivu-tree-title-selected'; // 当前点击的元素 }, // 点击添加 - append(root, node, data) { + append(data) { this.treeId = data.id; this.getFrom(); }, // 删除分类 - remove(root, node, data, tit) { + remove(data, tit) { this.tits = tit; let delfromData = { title: '删除 [ ' + data.title + ' ] ' + '分类', @@ -596,7 +506,7 @@ export default { // } // }, // 编辑树表单 - editPic(root, node, data) { + editPic(data) { this.$modalForm(categoryEditApi(data.id)).then(() => this.getList()); }, // 搜索分类 @@ -612,12 +522,13 @@ export default { }; getCategoryListApi(this.uploadName) .then(async (res) => { - this.treeData = res.data.list; - this.treeData.unshift(data); if (type !== 'search') { - this.treeData2 = [...this.treeData]; + this.treeData2 = JSON.parse(JSON.stringify([...res.data.list])); } - this.addFlag(this.treeData); + res.data.list.unshift(data); + this.treeData = res.data.list; + console.log(this.treeData); + // this.addFlag(this.treeData); }) .catch((res) => { this.$Message.error(res.msg); @@ -666,11 +577,60 @@ export default { this.isShowPic = true; } this.total = res.data.count; + this.$nextTick(() => { + //确保dom加载完毕 + // this.showSelectData(); + }); }) .catch((res) => { this.$Message.error(res.msg); }); }, + showSelectData() { + if (this.multipleSelection.length > 0) { + // 判断是否存在勾选过的数据 + this.pictrueList.forEach((row) => { + // 获取数据列表接口请求到的数据 + this.multipleSelection.forEach((item) => { + // 勾选到的数据 + if (row.att_id === item.att_id) { + // this.$refs.table.toggleRowSelection(item, true); // 若有重合，则回显该条数据 + } + }); + }); + } + }, + getRowKey(row) { + return row.att_id; + }, + //对象数组去重； + unique(arr) { + let result = arr.reduce((acc, curr) => { + const x = acc.find((item) => item.att_id === curr.att_id); + if (!x) { + return acc.concat([curr]); + } else { + return acc; + } + }, []); + return result; + }, + // 选中某一行 + handleSelectRow(selection) { + let arr = this.unique(selection); + console.log(selection, arr); + const uniqueArr = []; + const ids = []; + for (let i = 0; i < arr.length; i++) { + const item = arr[i]; + if (!ids.includes(item.att_id)) { + uniqueArr.push(item); + ids.push(item.att_id); + } + } + this.ids = ids; + this.multipleSelection = uniqueArr; + }, pageChange(index) { this.fileData.page = index; this.getFileList(); @@ -786,7 +746,7 @@ export default { }; - diff --git a/template/admin/src/pages/system/file/index.vue b/template/admin/src/pages/system/file/index.vue index e92535dcd..3606db80e 100644 --- a/template/admin/src/pages/system/file/index.vue +++ b/template/admin/src/pages/system/file/index.vue @@ -2,7 +2,7 @@
- +
@@ -14,7 +14,7 @@ export default { name: 'system_file', data() { return { - pageLimit: 30, + pageLimit: 12, uploadShow: false, }; }, @@ -23,20 +23,20 @@ export default { let winWidth = this.$refs.picBox.clientWidth; let winHeight = document.body.clientHeight - 170; if (winWidth < 1018) { - this.pageLimit = 18; - this.pageLimit = winHeight > 790 ? 24 : 18; + this.pageLimit = 12; + this.pageLimit = winHeight > 790 ? 12 : 16; } else if (winWidth < 1185) { - this.pageLimit = winHeight > 790 ? 30 : 18; + this.pageLimit = winHeight > 790 ? 15 : 24; } else if (winWidth < 1222) { - this.pageLimit = 30; + this.pageLimit = 15; } else if (winWidth < 1327) { - this.pageLimit = 32; + this.pageLimit = 18; } else if (winWidth < 1750) { - this.pageLimit = 40; + this.pageLimit = 21; } else if (winWidth < 2100) { - this.pageLimit = winHeight > 790 ? 60 : 48; + this.pageLimit = winHeight > 790 ? 30 : 26; } else if (winWidth > 2100) { - this.pageLimit = winHeight > 790 ? 75 : 60; + this.pageLimit = winHeight > 790 ? 36 : 26; } this.uploadShow = true; }); diff --git a/template/admin/src/styles/style.css b/template/admin/src/styles/style.css index 92f8b8035..ccf21fc1c 100644 --- a/template/admin/src/styles/style.css +++ b/template/admin/src/styles/style.css @@ -727,3 +727,7 @@ body { .pl10 { padding-left: 10px; } +.df-jcsb { + display: flex; + justify-content: space-between; +} diff --git a/template/admin/src/theme/variables.scss b/template/admin/src/theme/variables.scss index 7a8255a13..31a421930 100644 --- a/template/admin/src/theme/variables.scss +++ b/template/admin/src/theme/variables.scss @@ -56,7 +56,7 @@ .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover { - color: var(--prev-color-primary) !important; + color: #fff !important; background: var(--prev-color-primary-light-7) !important; border-color: var(--prev-color-primary-light-7) !important; } @@ -767,7 +767,7 @@ $positions: 'top', 'right', 'bottom', 'left'; } .el-dropdown-menu { background-color: var(--prev-bg-white); - border-color: #EBEEF5; + border-color: #ebeef5; } .el-dropdown-menu__item { color: var(--prev-color-text-regular);