123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320 |
- <template>
- <div class="list" v-loading="loading">
- <div class="list_head" v-if="user.role != 2">
- <el-button type="primary" size="small" icon="el-icon-arrow-left" plain @click="$router.push('/group')">返回项目列表</el-button>
- <div class="upload">
- <el-button type="primary" size="small" icon="el-icon-upload">上传文件</el-button>
- <input type="file" id="file" @change="uploadFile">
- </div>
- </div>
- <div class="list_item">
- <div class="nodata" v-if="list.length == 0"><el-empty description="暂无项目"></el-empty></div>
- <div class="box" v-for="item in list" :key="item.id">
- <div class="main">
- <div class="menu">
- <i class="el-icon-edit" @click="rename(item.id)" v-if="item.create_id == user.id"></i>
- <i class="el-icon-delete" @click="del(item.id)" v-if="item.create_id == user.id"></i>
- </div>
- <div class="cover" @click="goProject(item.id)">
- <img class="project_cover" :src="'http://designer.xuxiangbo.com/' + item.img_url" alt="">
- </div>
- </div>
- <div class="title">
- <p>{{item.title}}</p>
- <p>{{item.user_name}} · {{item.create_time}}</p>
- </div>
- </div>
- </div>
- <!-- 上传状态 -->
- <div class="uploading" v-if="uploading">
- <div class="box">
- <el-progress type="circle" :percentage="uploadProgress"></el-progress>
- <p v-for="item in uploadTips" :key="item">{{item}}...</p>
- </div>
- </div>
- </div>
- </template>
- <script>
- import timer from '../tools/timer';
- export default {
- name: 'list',
- data (){
- return {
- user: {},
- list: [],
- loading: false,
- uploading: false,
- uploadProgress: 0,
- uploadTips: [
- '正在上传文件',
- '正在解析文件',
- '正在保存数据'
- ]
- }
- },
- created (){
- this.getList();
- },
- methods: {
- // 获取列表
- getList (){
- // 根据id列表获取项目信息
- this.$ajax.get('/project/list/?id=' + this.$route.query.id).then(r => {
- this.list = 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;
- })
- })
- },
- // 重命名
- rename (id){
- let that = this;
- that.$prompt('请输入新的项目名称', '重命名', {
- inputPattern: /\S/,
- inputErrorMessage: '请输入项目名',
- closeOnPressEscape: false,
- closeOnClickModal: false,
- beforeClose (action, instance, done){
- if(action == 'confirm'){
- that.$ajax.post('/project/rename', {
- id,
- title: instance.inputValue
- }).then(r => {
- that.$message.success('修改成功');
- that.list.map(item => {
- if(item.id == id){
- item.title = 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.list.map((item, i) => {
- if(item.id == id){
- index = i;
- }
- })
- that.$ajax.get('/project/del/?id=' + id).then(r => {
- that.list.splice(index, 1);
- that.$message.success('删除成功');
- done();
- })
- }else{
- done();
- }
- }
- }).catch(() => {});
- },
- // 查看项目
- goProject (id){
- this.$router.push({
- path: '/project',
- query: { id }
- })
- },
- // 上传文件
- uploadFile (){
- this.$nextTick(() => {
- let file = document.querySelector('#file').files[0];
- this.$message.error(file.name);
- file.value = null;
- let data = {
- file
- }
- // this.$ajax.post('/projects/upload/', data).then(result => {
-
- // })
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- @import url('../tools/common.less');
- .list{
- 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;
- .uploading{
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0%;
- background: rgba(0, 0, 0, 0.6);
- display: flex;
- justify-content: center;
- align-items: center;
- .box{
- width: 300px;
- padding: 50px 0;
- background: #ffffff;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- border-radius: 5px;
- p{
- width: 100%;
- text-align: center;
- margin-top: 10px;
- color: #888888;
- }
- }
- }
- .list_head{
- width: calc(100% - 20px);
- height: 40px;
- padding: 20px 10px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- .upload{
- margin-left: 20px;
- position: relative;
- input{
- width: 100px;
- height: 35px;
- opacity: 0;
- cursor: pointer;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 99;
- }
- }
- }
- .list_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;
- }
- }
- }
- }
-
- .list_item::-webkit-scrollbar{
- display: none;
- }
- }
- </style>
|