<template>
|
<div class="p-2">
|
<vxe-toolbar>
|
<template #buttons>
|
<div class="flex flex-justify-end">
|
一级分组: 9个
|
</div>
|
</template>
|
</vxe-toolbar>
|
|
<vxe-table
|
ref="xTable"
|
style="margin: 10px 0"
|
:data="demo.tableData"
|
@mounted="onMounted"
|
height="700"
|
>
|
<vxe-column width="40">
|
<template #default>
|
<span class="drag-btn">
|
<HolderOutlined />
|
</span>
|
</template>
|
</vxe-column>
|
<vxe-column field="TagName" title="分组名称" minWidth="250">
|
<template #default="{ row }">
|
<div class="my-d-f">
|
<div
|
v-if="row.systemFlag"
|
class="bookmark"
|
:style="{ backgroundColor: row.tagColor }"
|
></div>
|
<div v-else>
|
<ColorPicker
|
v-model="row.tagColor"
|
:type="2"
|
@change="fnRowColorChange($event, row)"
|
></ColorPicker>
|
</div>
|
<a-tag class="ml-5" :color="row.tagColor">{{ row.tagName }}</a-tag>
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column field="age" title="操作" width="150">
|
<template #default="{ row }">
|
<a style="margin-right: 10px" @click="showModal('edit', row)">编辑</a>
|
<a style="margin-right: 10px" @click="fnDeleteRow(row)">删除</a>
|
</template>
|
</vxe-column>
|
</vxe-table>
|
<a-modal :width="300" v-model:open="open" :title="`${title}标签`" @ok="handleOk">
|
<a-form ref="formRef" :model="form" style="margin-top: 20px">
|
<a-form-item label="标签颜色" name="tagColor">
|
<ColorPicker v-model="form.tagColor" :type="2"></ColorPicker>
|
</a-form-item>
|
<a-form-item
|
label="标签名称"
|
name="tagName"
|
:rules="[{ required: true, message: '请输入标签名称', trigger: 'blur' }]"
|
>
|
<a-input v-model:value="form.tagName" placeholder="请输入标签名称" />
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, computed, onMounted, nextTick, onUnmounted, reactive } from 'vue';
|
import ColorPicker from '@/components/ColorPicker/index.vue';
|
import { addTagApi, deleteTagApi, updateTagApi, getTagApi } 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);
|
updateTagApi({
|
tagColor: currRow.tagColor,
|
tagName: currRow.tagName,
|
sortId: newIndex,
|
tagId: currRow.tagId,
|
})
|
.then(() => {
|
fnGetList();
|
})
|
.catch(() => {});
|
},
|
});
|
};
|
|
let initTime: any;
|
nextTick(() => {
|
// 加载完成之后在绑定拖动事件
|
initTime = setTimeout(() => {
|
rowDrop();
|
}, 500);
|
});
|
|
onUnmounted(() => {
|
clearTimeout(initTime);
|
if (sortable) {
|
sortable.destroy();
|
}
|
});
|
|
function fnGetList() {
|
getTagApi({}).then((res) => {
|
console.log(res);
|
demo.tableData = res.data;
|
});
|
}
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createMessage } = useMessage();
|
|
const open = ref(false);
|
const formRef = ref();
|
|
interface formType {
|
tagColor: string;
|
tagName: string;
|
tagType: number;
|
systemFlag: boolean;
|
tagId?: number;
|
}
|
|
const defaultForm: formType = {
|
tagColor: '#000000',
|
tagName: '',
|
tagType: 1,
|
systemFlag: false,
|
};
|
|
const form = ref<formType>({ ...defaultForm });
|
|
const title = ref('新建');
|
const signType = ref('add');
|
|
const showModal = (type: string, row) => {
|
signType.value = type;
|
open.value = true;
|
|
if (type == 'add') {
|
form.value = { ...defaultForm };
|
} else {
|
title.value = '编辑';
|
nextTick(() => {
|
formRef.value.resetFields();
|
form.value = {
|
tagColor: row.tagColor,
|
tagName: row.tagName,
|
tagType: row.tagType,
|
systemFlag: row.systemFlag,
|
tagId: row.tagId,
|
};
|
});
|
}
|
};
|
|
function fnDeleteRow(row) {
|
deleteTagApi({ tagId: row.tagId }).then((res) => {
|
if (res.code === 0) {
|
createMessage.success(res.msg);
|
fnGetList();
|
}
|
});
|
}
|
|
function handleOk() {
|
nextTick(() => {
|
formRef.value
|
.validate()
|
.then(() => {
|
const api = signType.value == 'add' ? addTagApi : updateTagApi;
|
api(form.value).then((res) => {
|
if (res.code === 0) {
|
createMessage.success(res.msg);
|
fnGetList();
|
open.value = false;
|
}
|
});
|
})
|
.catch(() => {});
|
});
|
}
|
|
function fnRowColorChange(color, row) {
|
console.log(color, row);
|
const data = {
|
tagColor: row.tagColor,
|
tagName: row.tagName,
|
tagType: row.tagType,
|
systemFlag: row.systemFlag,
|
tagId: row.tagId,
|
};
|
updateTagApi(data).then((res) => {
|
if (res.code === 0) {
|
createMessage.success(res.msg);
|
fnGetList();
|
}
|
});
|
}
|
|
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;
|
}
|
|
.bookmark {
|
display: inline-block;
|
position: relative;
|
width: 14px;
|
height: 18px;
|
margin-right: 5px;
|
border-radius: 2px 2px 0 0; /* Rounded top corners */
|
}
|
|
.bookmark::after {
|
content: '';
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
height: 8px;
|
background-color: #fff;
|
clip-path: polygon(50% 60%, 0% 100%, 100% 100%); /* Triangle at the bottom */
|
}
|
</style>
|
