123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298 |
- <template>
- <div class="group" v-loading="loading">
- <div class="group_head" v-if="user.role != 2">
- <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addProject">添加新项目</el-button>
- </div>
- <div class="group_item">
- <div class="nodata" v-if="group.length == 0"><el-empty description="暂无项目"></el-empty></div>
- <div class="box" v-for="item in group" :key="item.id">
- <div class="main">
- <div class="menu">
- <i class="el-icon-share" @click="share(item.id)"></i>
- <i class="el-icon-edit" @click="rename(item.id)" v-if="item.creater_id == user.id || user.role == 0"></i>
- <i class="el-icon-delete" @click="del(item.id)" v-if="item.creater_id == user.id || user.role == 0"></i>
- </div>
- <div class="cover" @click="goProject(item.id)">
- <img class="project_cover" :src="global.host + item.cover" alt="">
- </div>
- </div>
- <div class="title">
- <p>{{item.group_name}}</p>
- <p>{{item.user_name}} · {{item.create_time}}</p>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import timer from '../tools/timer';
- import global from '@/tools/global';
- export default {
- name: 'group',
- data (){
- return {
- user: {},
- group: [],
- loading: true,
- global
- }
- },
- created (){
- this.user = JSON.parse(localStorage.getItem('designer_user'));
- // 没有参与项目
- if(this.user.projects.substring(1).length == 0){
- this.group = [];
- this.loading = false;
- return;
- }
- this.getgroup();
-
- },
- methods: {
- // 获取项目组列表
- getgroup (){
- // 根据id列表获取项目信息
- this.user.projects = this.user.projects.substring(1);
- this.$ajax.get('/group/list/?ids=' + this.user.projects).then(r => {
- this.group = r.map(item => {
- item.create_time = timer.time('y-m-d', item.create_time * 1000);
- return item;
- });
-
- // 处理封面展示方式,横图 = row,竖图 = col
- this.$nextTick(() => {
- let imgs = document.querySelectorAll('.project_cover');
- imgs.forEach(item => {
- let img = new Image();
- img.onload = () => {
- if(img.width > img.height){
- item.classList.add('row');
- }else{
- item.classList.add('col');
- }
- }
- img.src = item.src;
- })
- this.loading = false;
- })
- })
- },
- // 分享项目名
- share (id){
- this.group.map(item => {
- if(item.id == id){
- this.$copy(id, item.title);
- }
- })
- },
- // 重命名
- rename (id){
- let that = this;
- that.$prompt('请输入新的项目名称', '重命名', {
- inputPattern: /\S/,
- inputErrorMessage: '请输入项目名',
- closeOnPressEscape: false,
- closeOnClickModal: false,
- beforeClose (action, instance, done){
- if(action == 'confirm'){
- that.$ajax.post('/group/rename', {
- id,
- name: instance.inputValue
- }).then(r => {
- that.$message.success('修改成功');
- that.group.map(item => {
- if(item.id == id){
- item.group_name = instance.inputValue;
- }
- })
- done();
- })
- }else{
- done();
- }
- }
- }).catch(() => {});
- },
- // 删除项目
- del (id){
- let that = this;
- this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
- type: 'warning',
- closeOnPressEscape: false,
- closeOnClickModal: false,
- beforeClose (action, instance, done){
- if(action == 'confirm'){
- let index = 0;
- that.group.map((item, i) => {
- if(item.id == id){
- index = i;
- }
- })
- that.$ajax.get('/group/del/?id=' + id).then(r => {
- that.group.splice(index, 1);
- that.$message.success('删除成功');
- done();
- })
- }else{
- done();
- }
- }
- }).catch(() => {});
- },
- // 查看项目
- goProject (id){
- this.$router.push({
- path: '/list',
- query: { id }
- })
- },
- // 添加新项目
- addProject (){
- let that = this;
- that.$prompt('请输入项目名称', '添加新项目', {
- inputPattern: /\S/,
- inputErrorMessage: '请输入项目名',
- closeOnPressEscape: false,
- closeOnClickModal: false,
- beforeClose (action, instance, done){
- if(action == 'confirm'){
- that.$ajax.post('/group/add', {
- name: instance.inputValue,
- createrId: JSON.parse(localStorage.getItem('designer_user')).id
- }).then(r => {
- done();
- that.setGroup(r);
- that.$message.success('添加成功');
- })
- }else{
- done();
- }
- }
- }).catch(() => {});
- },
- // 更新项目id
- setGroup (r){
- this.user.projects = r;
- localStorage.setItem('designer_user', JSON.stringify(this.user));
- this.getgroup();
- }
- }
- }
- </script>
- <style lang="less" scoped>
- @import url('../tools/common.less');
- .group{
- width: calc(100% - 60px);
- height: 100%;
- padding: 0 30px;
- display: flex;
- justify-content: flex-start;
- align-content: flex-start;
- flex-wrap: wrap;
- overflow-x: hidden;
- overflow-y: auto;
- .group_head{
- width: calc(100% - 20px);
- height: 40px;
- padding: 20px 10px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .group_item{
- width: 100%;
- height: calc(100% - 80px);
- display: flex;
- justify-content: flex-start;
- align-content: flex-start;
- flex-wrap: wrap;
- overflow-x: hidden;
- overflow-y: auto;
- .nodata{
- width: 100%;
- height: 70%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .box{
- width: 240px;
- height: 300px;
- background: #ffffff;
- border-radius: 5px;
- margin: 10px;
- box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.0500);
- .main{
- width: 220px;
- height: 220px;
- background: #F5F5F7;
- border-radius: 5px;
- margin: 10px;
- transition: all 0.3s;
- .menu{
- width: 220px;
- height: 30px;
- line-height: 30px;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- i{
- display: block;
- font-size: 14px;
- margin-right: 15px;
- color: #888888;
- cursor: pointer;
- }
- i:hover{
- color: @color;
- }
- i.designer-gengduo{
- font-size: 20px;
- }
- }
- .cover{
- width: 200px;
- height: 170px;
- padding: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- overflow: hidden;
- img.row{
- width: 100%;
- border-radius: 10px;
- }
- img.col{
- height: 100%;
- border-radius: 10px;
- }
- }
- }
- .title{
- width: 240px;
- height: 60px;
- text-align: center;
- p:last-child{
- margin-top: 5px;
- font-size: 12px;
- color: #888888;
- }
- }
- &:hover{
- .main{
- background: #F8F5F2;
- }
- }
- }
- }
-
- .group_item::-webkit-scrollbar{
- display: none;
- }
- }
- </style>
|