Skip to content

T
traceSourceMb
Commit 41a5220d authored by JYbmarawcp's avatar JYbmarawcp
Browse files
Options

新增模板删除功能

parent 98fd36d1
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 29 deletions
public/index.html
View file @ 41a5220d
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <title><%= htmlWebpackPlugin.options.title %></title> --> <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title><%= VUE_APP_NAME %></title> <title><%= VUE_APP_NAME %></title>
<script src="//at.alicdn.com/t/font_1750816_othyauad88d.js"></script> <script src="//at.alicdn.com/t/font_1750816_fjvcnnzthp.js"></script>
</head> </head>
<body ontouchstart> <body ontouchstart>
<audio src="https://go-czsy.oss-cn-hangzhou.aliyuncs.com/common/513271190a9ae71f3d97282f01fded19f2955324fa7d201614d1d4b5ed141d99.m4a"></audio> <audio src="https://go-czsy.oss-cn-hangzhou.aliyuncs.com/common/513271190a9ae71f3d97282f01fded19f2955324fa7d201614d1d4b5ed141d99.m4a"></audio>
......
src/api/modules/template.ts
View file @ 41a5220d
...@@ -42,6 +42,13 @@ const template = { ...@@ -42,6 +42,13 @@ const template = {
...params, ...params,
}); });
}, },
updateFolder(params: any) {
const {folder_id, folder_name} = params;
return axios.put(`${base}/updateFolder`, {
id: folder_id,
name: folder_name,
});
},
customize(name: string, detail: any, folderId: number, params: any) { customize(name: string, detail: any, folderId: number, params: any) {
return axios.post(`${base}/customize`, { return axios.post(`${base}/customize`, {
name, name,
...@@ -58,5 +65,20 @@ const template = { ...@@ -58,5 +65,20 @@ const template = {
...params, ...params,
}); });
}, },
deleteTemplate(id: number, params: any = {}) {
return axios.delete(`${base}/deleteCustomize`, {
data: {
id,
},
...params,
});
},
updateCustomize(params: any) {
const {id, name} = params;
return axios.put(`${base}/updateCustomize`, {
id,
name,
});
},
}; };
export default template; export default template;
src/components/TemplateItem.vue
View file @ 41a5220d
...@@ -28,9 +28,15 @@ export default class TemplateItem extends Vue { ...@@ -28,9 +28,15 @@ export default class TemplateItem extends Vue {
@Prop() private thumb!: string; @Prop() private thumb!: string;
@Prop() private title!: string; @Prop() private title!: string;
@Prop() private desc!: string; @Prop() private desc!: string;
@Prop() private id!: number;
@Emit('show-more-action') @Emit('show-more-action')
private async showMoreAction() { private async showMoreAction() {
return true; const id = this.id;
const name = this.title;
return {
id,
name,
};
} }
} }
</script> </script>
......
src/mixins/Index.ts
View file @ 41a5220d
...@@ -6,13 +6,13 @@ export default class Index extends Vue { ...@@ -6,13 +6,13 @@ export default class Index extends Vue {
protected ActionList: any = { protected ActionList: any = {
rename: { rename: {
key: 'rename', key: 'rename',
icon: 'shanchu3', icon: 'zhongmingming2x',
text: '重命名', text: '重命名',
callback: this.renameFolder, callback: this.renameFolder,
}, },
del: { del: {
key: 'del', key: 'del',
icon: 'shanchu3', icon: 'shanchu2x',
text: '删除', text: '删除',
callback: this.delFolder, callback: this.delFolder,
}, },
...@@ -22,19 +22,18 @@ export default class Index extends Vue { ...@@ -22,19 +22,18 @@ export default class Index extends Vue {
} }
private renameFolder(folder: any) { private renameFolder(folder: any) {
const { folder_name } = folder; const { folder_name } = folder;
return true return true;
} }
private delFolder(folder: any) { private delFolder(folder: any) {
const { folder_id} = folder; const { folder_id} = folder;
return new Promise(resolve=>{ return new Promise((resolve: any) => {
this.$dialog.confirm({ this.$dialog.confirm({
message: '您确定要删除该文件夹吗？', message: '您确定要删除该文件夹吗？',
beforeClose: (action, done) => { beforeClose: (action, done) => {
if ( action === 'confirm' ) { if ( action === 'confirm' ) {
this.$api.template.delete(folder_id).then((res: any) => { this.$api.template.delete(folder_id).then((res: any) => {
resolve() resolve();
this.$toast.success('删除成功'); this.$toast.success('删除成功');
this.resetList();
done(); done();
}).catch((err: any) => { }).catch((err: any) => {
done(); done();
...@@ -44,9 +43,6 @@ export default class Index extends Vue { ...@@ -44,9 +43,6 @@ export default class Index extends Vue {
} }
}, },
}); });
}) });
}
protected resetList() {
throw Error('resetList 在列表实现');
} }
} }
src/mixins/template.ts 0 → 100644
View file @ 41a5220d
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Template extends Vue {
protected ActionList: any = {
rename: {
key: 'rename',
icon: 'zhongmingming2x',
text: '重命名',
callback: this.renameFolder,
},
move: {
key: 'move',
icon: 'yidongzhi2x',
text: '移动至',
callback: this.delFolder,
},
copy: {
key: 'copy',
icon: 'chuangjianfuben2x',
text: '创建副本',
callback: this.delFolder,
},
del: {
key: 'del',
icon: 'shanchu2x',
text: '删除',
callback: this.delFolder,
},
};
private renameFolder(folder: any) {
return true;
}
private delFolder(folder: any) {
const { id } = folder;
return new Promise((resolve: any) => {
this.$dialog.confirm({
message: '您确定要删除该模板吗？',
beforeClose: (action, done) => {
if ( action === 'confirm' ) {
this.$api.template.deleteTemplate(id).then((res: any) => {
resolve();
this.$toast.success('删除成功');
done();
}).catch((err: any) => {
done();
});
} else {
done();
}
},
});
});
}
}
src/router/index.ts
View file @ 41a5220d
...@@ -101,7 +101,7 @@ const routes: RouteConfig[] = [ ...@@ -101,7 +101,7 @@ const routes: RouteConfig[] = [
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "templ-list" */ '@/views/template/List.vue'), component: () => import(/* webpackChunkName: "templ-list" */ '@/views/template/List.vue'),
props: ({query: {templList, folderName}}) => ({ templList, folderName }), props: ({query: {templList, folderName, id}}) => ({ templList, folderName, id }),
meta: { requiresAuth: true }, meta: { requiresAuth: true },
}, },
{ {
......
src/views/index/Index-sy.vue
View file @ 41a5220d
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<li <li
v-for="{ id, folder_simg_url, folder_name, detail} of systemList" v-for="{ id, folder_simg_url, folder_name, detail} of systemList"
:key="id" :key="id"
@click="goTemplList(detail, folder_name)" @click="goTemplList(detail, folder_name, id)"
> >
<van-image :src="folder_simg_url" width="44px" height="64px" fit="contain"></van-image> <van-image :src="folder_simg_url" width="44px" height="64px" fit="contain"></van-image>
<div style="font-size:14px;color:#353535;">{{folder_name}}</div> <div style="font-size:14px;color:#353535;">{{folder_name}}</div>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty> <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
<div> <div>
<div class="folder-item" v-for="{folder_id, folder_simg_url, folder_name, detail} of list" :key="folder_id" @click="goTemplList(detail, folder_name)"> <div class="folder-item" v-for="{folder_id, folder_simg_url, folder_name, detail} of list" :key="folder_id" @click="goTemplList(detail, folder_name, folder_id)">
<van-image <van-image
class="thumb" class="thumb"
:src="folder_simg_url" :src="folder_simg_url"
...@@ -53,12 +53,11 @@ ...@@ -53,12 +53,11 @@
v-model="isShowRename" v-model="isShowRename"
show-cancel-button show-cancel-button
confirm-button-open-type="getUserInfo" confirm-button-open-type="getUserInfo"
bind:close="onClose"
bind:getuserinfo="getUserInfo" bind:getuserinfo="getUserInfo"
@confirm="onConfirm"
> >
<van-field <van-field
:value="currentFolder.folder_name" v-model="currentFolder.folder_name"
auto-focus
/> />
</van-dialog> </van-dialog>
<transition name="van-slide-up"> <transition name="van-slide-up">
...@@ -100,10 +99,10 @@ export default class IndexSy extends Mixins(IndexMixin) { ...@@ -100,10 +99,10 @@ export default class IndexSy extends Mixins(IndexMixin) {
this.loading = false; this.loading = false;
} }
} }
private async showMoreAction(folder_name: any, folder_id: number) { private async showMoreAction(folderName: any, folderId: number) {
this.currentFolder = { this.currentFolder = {
folder_name, folder_name: folderName,
folder_id folder_id: folderId,
}; };
this.show = true; this.show = true;
} }
...@@ -121,8 +120,8 @@ export default class IndexSy extends Mixins(IndexMixin) { ...@@ -121,8 +120,8 @@ export default class IndexSy extends Mixins(IndexMixin) {
private toLogin() { private toLogin() {
this.$router.push({name: 'Login'}); this.$router.push({name: 'Login'});
} }
private goTemplList(templList: [] = [], folderName = '') { private goTemplList(templList: [] = [], folderName = '', id: any) {
this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName} }); this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName, id} });
} }
get actionList() { get actionList() {
const { rename, del } = this.ActionList; const { rename, del } = this.ActionList;
...@@ -132,8 +131,10 @@ export default class IndexSy extends Mixins(IndexMixin) { ...@@ -132,8 +131,10 @@ export default class IndexSy extends Mixins(IndexMixin) {
this.isShowRename = await cb.call(this, this.currentFolder); this.isShowRename = await cb.call(this, this.currentFolder);
this.getUserFolders(); this.getUserFolders();
} }
private onClose(): void { private async onConfirm() {
const params = this.currentFolder;
await this.$api.template.updateFolder(params);
this.getUserFolders();
} }
} }
</script> </script>
...@@ -211,5 +212,36 @@ export default class IndexSy extends Mixins(IndexMixin) { ...@@ -211,5 +212,36 @@ export default class IndexSy extends Mixins(IndexMixin) {
} }
} }
} }
.van-dialog {
border-radius: 6px;
::v-deep .van-dialog__header {
padding-left: 16px;
text-align: left;
color: #353535;
font-weight: 500;
}
::v-deep .van-field__body {
border-bottom: 1px solid #F0F1F5;
.van-field__control {
line-height: 40px;
}
}
::v-deep .van-dialog__footer--buttons {
justify-content: space-evenly;
margin: 10px 0 20px;
.van-button {
border: 1px solid #D7D7D7;
width: 140px;
height: 45px;
flex: none;
border-radius: 4px;
}
.van-dialog__confirm {
background: linear-gradient(180deg, #6C7AFE 0%, #5D7BF6 100%);
color: #ffffff;
}
}
}
} }
</style> </style>
\ No newline at end of file
src/views/template/List.vue
View file @ 41a5220d
...@@ -7,17 +7,32 @@ ...@@ -7,17 +7,32 @@
:key="id" :key="id"
@click.native="goProofDetail(id)" @click.native="goProofDetail(id)"
@show-more-action="showMoreAction" @show-more-action="showMoreAction"
:id="id"
:thumb="s_image_url" :thumb="s_image_url"
:title="name" :title="name"
:desc="info" :desc="info"
></template-item> ></template-item>
<more-action :show.sync="show" :menuList="actionList" @cb="callbackAction"></more-action> <more-action :show.sync="show" :menuList="actionList" @cb="callbackAction"></more-action>
<van-dialog
use-slot
title="重命名"
v-model="isShowRename"
show-cancel-button
confirm-button-open-type="getUserInfo"
bind:getuserinfo="getUserInfo"
@confirm="onConfirm"
>
<van-field
v-model="currentTem.name"
/>
</van-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch, Mixins } from 'vue-property-decorator';
import { List, Image, Empty } from 'vant'; import { List, Image, Empty } from 'vant';
import TemplateMixin from '@/mixins/template';
import { TEMPLATETYPE } from '@/const/enum'; import { TEMPLATETYPE } from '@/const/enum';
@Component({ @Component({
components: { components: {
...@@ -26,9 +41,12 @@ import { TEMPLATETYPE } from '@/const/enum'; ...@@ -26,9 +41,12 @@ import { TEMPLATETYPE } from '@/const/enum';
[Empty.name]: Empty, [Empty.name]: Empty,
}, },
}) })
export default class Index extends Vue { export default class Index extends Mixins(TemplateMixin) {
private list: any[] = []; private list: any[] = [];
private show: boolean = false; private show: boolean = false;
private isShowRename: boolean = false;
private currentTem: object = {};
@Prop() private id!: number;
@Prop({ @Prop({
}) })
private templList!: string; private templList!: string;
...@@ -41,9 +59,28 @@ export default class Index extends Vue { ...@@ -41,9 +59,28 @@ export default class Index extends Vue {
private goProofDetail(templateId: string) { private goProofDetail(templateId: string) {
this.$router.push({ name: 'ProofDetail', query: {templateId} }); this.$router.push({ name: 'ProofDetail', query: {templateId} });
} }
get actionList() {
const { rename, move, copy, del } = this.ActionList;
return [rename, move, copy, del];
}
private async getUserFolders() {
const id = +this.id;
const res = await this.$api.template.list({id: [id]});
this.list = res.results[0].detail || [];
}
private async callbackAction(cb: any) {
this.isShowRename = await cb.call(this, this.currentTem);
this.getUserFolders();
}
private showMoreAction(data: any) { private showMoreAction(data: any) {
this.currentTem = data;
this.show = true; this.show = true;
} }
private async onConfirm() {
const params = this.currentTem;
await this.$api.template.updateCustomize(params);
this.getUserFolders();
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/template/components/AddFolder.vue
View file @ 41a5220d
<template> <template>
<van-popup <van-dialog
use-slot
title="添加文件夹"
v-model="show"
show-cancel-button
confirm-button-open-type="getUserInfo"
@close="cancel"
bind:getuserinfo="getUserInfo"
@confirm="next"
>
<van-field
v-model="folderName"
placeholder="请输入文件夹名称"
/>
</van-dialog>
<!-- <van-popup
v-model="show" v-model="show"
position="bottom" position="bottom"
:close-on-click-overlay="false" :close-on-click-overlay="false"
...@@ -16,7 +31,7 @@ ...@@ -16,7 +31,7 @@
<div class="btn-group"> <div class="btn-group">
<div @click="next" class="slc-btn-common next">确定</div> <div @click="next" class="slc-btn-common next">确定</div>
</div> </div>
</van-popup> </van-popup> -->
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'; import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment