<template>
|
<div class="p-2">
|
<vxe-toolbar>
|
<template #buttons>
|
<div style="display: flex; align-items: flex-end">
|
<span style="font-size: 1.25rem; font-weight: 600">快速文本</span
|
><span style="margin-left: 5px; padding-bottom: 4px; font-size: 12px"
|
>作为模板使用，在写信时快速创建内容</span
|
>
|
</div>
|
</template>
|
<template #tools>
|
<a-button type="primary" @click="showDrawer('add', '')">新建文本</a-button>
|
</template>
|
</vxe-toolbar>
|
|
<vxe-table ref="xTable" style="margin: 10px 0" :data="demo.tableData" @mounted="onMounted">
|
<vxe-column width="60">
|
<template #default>
|
<span class="drag-btn">
|
<HolderOutlined />
|
</span>
|
</template>
|
</vxe-column>
|
<vxe-column field="userName" title="标题" width="250"></vxe-column>
|
<vxe-column field="content" title="内容" min-width="250"></vxe-column>
|
<vxe-column field="age" title="操作" width="150">
|
<template #default="{ row }">
|
<a style="margin-right: 10px" @click="showDrawer('update', row)">编辑</a>
|
<a style="margin-right: 10px" @click="fnDelete(row)">删除</a>
|
</template>
|
</vxe-column>
|
</vxe-table>
|
<a-drawer :title="`${title}文本`" placement="right" :open="open" @close="onClose" width="600">
|
<a-form ref="formRef" :model="form" style="margin-top: 20px">
|
<a-form-item
|
label="标题"
|
name="textName"
|
:rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
|
>
|
<a-input v-model:value="form.textName" placeholder="请输入名称" />
|
</a-form-item>
|
<a-form-item
|
label="内容"
|
name="content"
|
:rules="[{ required: true, message: '请输入内容', trigger: 'blur' }]"
|
>
|
<Tinymce v-model="form.content" :isElse="false" :isText="false" :isImg="false"></Tinymce>
|
</a-form-item>
|
</a-form>
|
<template #footer>
|
<div style="margin-top: 20px; text-align: center">
|
<div style="margin-bottom: 20px"
|
>写邮件时，输入
|
<span style="color: red">&</span>标题关键词，联想出快速文本，快捷插入</div
|
>
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
<a-button type="primary" @click="onOk">保存</a-button>
|
</div>
|
</template>
|
</a-drawer>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, computed, onMounted, nextTick, onUnmounted, reactive } from 'vue';
|
import { Tinymce } from '@/components/Tinymce';
|
import {
|
getQuickTextApi,
|
addQuickTextApi,
|
updateQuickTextApi,
|
deleteQuickTextApi,
|
} from '@/api/email/userList';
|
|
// 排序
|
import { HolderOutlined } from '@ant-design/icons-vue';
|
import Sortable from 'sortablejs';
|
let sortable: any;
|
const demo = reactive({
|
showHelpTip: false,
|
tableData: [],
|
});
|
const xTable = ref();
|
const rowDrop = () => {
|
const $table = xTable.value;
|
sortable = Sortable.create($table.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
|
handle: '.drag-btn',
|
onEnd: (sortableEvent) => {
|
const newIndex = sortableEvent.newIndex as number;
|
const oldIndex = sortableEvent.oldIndex as number;
|
const currRow:Record<string, any> = demo.tableData.splice(oldIndex, 1)[0];
|
// demo.tableData.splice(newIndex, 0, currRow);
|
updateQuickTextApi({
|
textId: currRow.textId,
|
textName: currRow.textName,
|
content: currRow.content,
|
sortId: newIndex,
|
}).then(() => {
|
fnGetList();
|
}).catch(()=>{});
|
},
|
});
|
};
|
|
let initTime: any;
|
nextTick(() => {
|
// 加载完成之后在绑定拖动事件
|
initTime = setTimeout(() => {
|
rowDrop();
|
}, 500);
|
});
|
|
onUnmounted(() => {
|
clearTimeout(initTime);
|
if (sortable) {
|
sortable.destroy();
|
}
|
});
|
|
const form = ref<Record<string, any>>({});
|
const title = ref('新建');
|
const open = ref<boolean>(false);
|
const handleType = ref('add');
|
const formRef = ref();
|
const showDrawer = (type, row) => {
|
handleType.value = type;
|
open.value = true;
|
if (type == 'add') {
|
form.value = {
|
textName: '',
|
content: '',
|
};
|
} else {
|
title.value = '编辑';
|
nextTick(() => {
|
formRef.value.resetFields();
|
form.value = Object.assign(form.value, row);
|
});
|
}
|
};
|
const api = computed(() => {
|
return handleType.value == 'add' ? addQuickTextApi : updateQuickTextApi;
|
});
|
|
function fnDelete(row) {
|
deleteQuickTextApi({ textId: row.textId }).then((res) => {
|
if (res.code == 0) {
|
fnGetList();
|
}
|
});
|
}
|
function fnGetList() {
|
getQuickTextApi({}).then((res) => {
|
console.log(res);
|
demo.tableData = res.data;
|
});
|
}
|
const onClose = () => {
|
open.value = false;
|
};
|
import { useMessage } from '@/hooks/web/useMessage';
|
const { createMessage } = useMessage();
|
const onOk = () => {
|
formRef.value.validate().then(() => {
|
const data: Record<string, any> = {
|
textName: form.value.textName,
|
content: form.value.content,
|
};
|
if (handleType.value != 'add') {
|
data.textId = form.value.textId;
|
}
|
api
|
.value(data)
|
.then((res) => {
|
if (res.code === 0) {
|
createMessage.success(res.msg);
|
}
|
fnGetList();
|
onClose();
|
})
|
.catch((e) => {
|
createMessage.warning(e);
|
});
|
});
|
};
|
|
onMounted(() => {
|
fnGetList();
|
});
|
</script>
|
|
<style scoped>
|
.sortable-row-demo .drag-btn {
|
font-size: 12px;
|
cursor: move;
|
}
|
|
.sortable-row-demo .vxe-body--row.sortable-ghost,
|
.sortable-row-demo .vxe-body--row.sortable-chosen {
|
background-color: #dfecfb;
|
}
|
</style>
|
