Skip to content

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

新增模板删除功能

parent 98fd36d1
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 29 deletions
public/index.html
View file @ 41a5220d
......@@ -7,7 +7,8 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <title><%= htmlWebpackPlugin.options.title %></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>
<body ontouchstart>
<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 = {
...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) {
return axios.post(`${base}/customize`, {
name,
......@@ -58,5 +65,20 @@ const template = {
...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;
src/components/TemplateItem.vue
View file @ 41a5220d
......@@ -28,9 +28,15 @@ export default class TemplateItem extends Vue {
@Prop() private thumb!: string;
@Prop() private title!: string;
@Prop() private desc!: string;
@Prop() private id!: number;
@Emit('show-more-action')
private async showMoreAction() {
return true;
const id = this.id;
const name = this.title;
return {
id,
name,
};
}
}
</script>
......
src/mixins/Index.ts
View file @ 41a5220d
......@@ -6,13 +6,13 @@ export default class Index extends Vue {
protected ActionList: any = {
rename: {
key: 'rename',
icon: 'shanchu3',
icon: 'zhongmingming2x',
text: '重命名',
callback: this.renameFolder,
},
del: {
key: 'del',
icon: 'shanchu3',
icon: 'shanchu2x',
text: '删除',
callback: this.delFolder,
},
......@@ -22,19 +22,18 @@ export default class Index extends Vue {
}
private renameFolder(folder: any) {
const { folder_name } = folder;
return true
return true;
}
private delFolder(folder: any) {
const { folder_id} = folder;
return new Promise(resolve=>{
return new Promise((resolve: any) => {
this.$dialog.confirm({
message: '您确定要删除该文件夹吗？',
beforeClose: (action, done) => {
if ( action === 'confirm' ) {
this.$api.template.delete(folder_id).then((res: any) => {
resolve()
resolve();
this.$toast.success('删除成功');
this.resetList();
done();
}).catch((err: any) => {
done();
......@@ -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[] = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
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 },
},
{
......
src/views/index/Index-sy.vue
View file @ 41a5220d
......@@ -18,7 +18,7 @@
<li
v-for="{ id, folder_simg_url, folder_name, detail} of systemList"
: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>
<div style="font-size:14px;color:#353535;">{{folder_name}}</div>
......@@ -34,7 +34,7 @@
</div>
<empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
<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
class="thumb"
:src="folder_simg_url"
......@@ -53,12 +53,11 @@
v-model="isShowRename"
show-cancel-button
confirm-button-open-type="getUserInfo"
bind:close="onClose"
bind:getuserinfo="getUserInfo"
@confirm="onConfirm"
>
<van-field
:value="currentFolder.folder_name"
auto-focus
v-model="currentFolder.folder_name"
/>
</van-dialog>
<transition name="van-slide-up">
......@@ -100,10 +99,10 @@ export default class IndexSy extends Mixins(IndexMixin) {
this.loading = false;
}
}
private async showMoreAction(folder_name: any, folder_id: number) {
private async showMoreAction(folderName: any, folderId: number) {
this.currentFolder = {
folder_name,
folder_id
folder_name: folderName,
folder_id: folderId,
};
this.show = true;
}
......@@ -121,8 +120,8 @@ export default class IndexSy extends Mixins(IndexMixin) {
private toLogin() {
this.$router.push({name: 'Login'});
}
private goTemplList(templList: [] = [], folderName = '') {
this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName} });
private goTemplList(templList: [] = [], folderName = '', id: any) {
this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) , folderName, id} });
}
get actionList() {
const { rename, del } = this.ActionList;
......@@ -132,8 +131,10 @@ export default class IndexSy extends Mixins(IndexMixin) {
this.isShowRename = await cb.call(this, this.currentFolder);
this.getUserFolders();
}
private onClose(): void {
private async onConfirm() {
const params = this.currentFolder;
await this.$api.template.updateFolder(params);
this.getUserFolders();
}
}
</script>
......@@ -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>
\ No newline at end of file
src/views/template/List.vue
View file @ 41a5220d
......@@ -7,17 +7,32 @@
:key="id"
@click.native="goProofDetail(id)"
@show-more-action="showMoreAction"
:id="id"
:thumb="s_image_url"
:title="name"
:desc="info"
></template-item>
<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>
</template>
<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 TemplateMixin from '@/mixins/template';
import { TEMPLATETYPE } from '@/const/enum';
@Component({
components: {
......@@ -26,9 +41,12 @@ import { TEMPLATETYPE } from '@/const/enum';
[Empty.name]: Empty,
},
})
export default class Index extends Vue {
export default class Index extends Mixins(TemplateMixin) {
private list: any[] = [];
private show: boolean = false;
private isShowRename: boolean = false;
private currentTem: object = {};
@Prop() private id!: number;
@Prop({
})
private templList!: string;
......@@ -41,9 +59,28 @@ export default class Index extends Vue {
private goProofDetail(templateId: string) {
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) {
this.currentTem = data;
this.show = true;
}
private async onConfirm() {
const params = this.currentTem;
await this.$api.template.updateCustomize(params);
this.getUserFolders();
}
}
</script>
<style scoped lang="scss">
......
src/views/template/components/AddFolder.vue
View file @ 41a5220d
<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"
position="bottom"
:close-on-click-overlay="false"
......@@ -16,7 +31,7 @@
<div class="btn-group">
<div @click="next" class="slc-btn-common next">确定</div>
</div>
</van-popup>
</van-popup> -->
</template>
<script lang="ts">
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