<script lang="ts" setup>
|
import type { FormSchema } from '@jnpf/ui/form';
|
|
import { reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { Timeline, TimelineItem } from 'ant-design-vue';
|
|
import { delPostil, getPostilList, sendPostil } from '#/api/extend/table';
|
import { $t } from '#/locales';
|
|
interface State {
|
id: string;
|
activities: any[];
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
id: '',
|
activities: [],
|
});
|
const { activities } = toRefs(state);
|
const schemas: FormSchema[] = [
|
{
|
field: 'text',
|
label: ' ',
|
component: 'Textarea',
|
componentProps: { placeholder: '输入内容', rows: 3 },
|
rules: [{ required: true, trigger: 'blur', message: '批注内容不能为空' }],
|
},
|
];
|
const { createMessage, createConfirm } = useMessage();
|
const [registerForm, { validate, resetFields, updateSchema }] = useForm({ labelWidth: 0, schemas });
|
const [registerModal, { changeLoading, changeOkLoading }] = useModalInner(init);
|
|
function init(data) {
|
resetFields();
|
state.id = data.id;
|
if (data.industryTypeList) updateSchema({ field: 'projectType', componentProps: { options: data.industryTypeList } });
|
if (state.id) {
|
changeLoading(true);
|
getPostilList(state.id).then((res) => {
|
state.activities = res.data.postilJson ? JSON.parse(res.data.postilJson) : [];
|
changeLoading(false);
|
});
|
}
|
}
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
changeOkLoading(true);
|
sendPostil(state.id, values)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
init({ id: state.id });
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
}
|
function handleDel(index) {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.tipTitle'),
|
onOk: () => {
|
delPostil(state.id, index).then((res) => {
|
state.activities.splice(index, 1);
|
createMessage.success(res.msg);
|
emit('reload');
|
});
|
},
|
});
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" ok-text="发送" show-ok-btn title="添加批注" @ok="handleSubmit" @register="registerModal">
|
<BasicForm :hide-required-mark="true" @register="registerForm" />
|
<Timeline class="!pt-[5px]">
|
<TimelineItem v-for="(item, index) in activities" :key="index">
|
<div class="timeline-content">
|
<p class="text">{{ item.text }}</p>
|
<p class="time">
|
<span>{{ item.userId }} 提交于 {{ item.creatorTime }}</span>
|
<span class="del" @click="handleDel(index)"> <i class="icon-ym icon-ym-delete"></i>删除</span>
|
</p>
|
</div>
|
</TimelineItem>
|
</Timeline>
|
</BasicModal>
|
</template>
|
<style lang="scss" scoped>
|
.timeline-content {
|
p {
|
padding: 0;
|
margin: 0;
|
}
|
|
.text {
|
margin-bottom: 10px;
|
font-size: 14px;
|
line-height: 20px;
|
color: var(--text-color-label);
|
}
|
|
.time {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 26px;
|
font-size: 12px;
|
opacity: 0.6;
|
|
.del {
|
display: none;
|
color: rgb(255 91 91);
|
cursor: pointer;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
}
|
|
&:hover {
|
.del {
|
display: block;
|
}
|
}
|
}
|
</style>
|
