Browse Source

feat: 关注模块

master
wangxiang 2 years ago
parent
commit
da09c3d6cf
  1. 41
      src/views/common/push/pushConcern/ConcernModal.vue
  2. 79
      src/views/common/push/pushConcern/UserManageModal.vue
  3. 118
      src/views/common/push/pushConcern/concern.data.ts
  4. 118
      src/views/common/push/pushConcern/index.vue
  5. 132
      src/views/common/push/pushConcern/userManage.data.ts
  6. 8
      src/views/common/push/pushType/TypeModal.vue

41
src/views/common/push/pushConcern/ConcernModal.vue

@ -0,0 +1,41 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './concern.data';
import { getPushConcernFan } from '/@/api/platform/common/controller/pushConcernFan';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
//
await resetFields();
await clearValidate();
//
tag.value = data._tag;
const refId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false };
props.title = '查看关注用户';
await setFieldsValue(await getPushConcernFan(refId));
// :
setModalProps(props);
});
</script>

79
src/views/common/push/pushConcern/UserManageModal.vue

@ -1,79 +0,0 @@
<template>
<BasicModal
v-bind="$attrs"
width="720px"
@register="registerModal"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
/**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔
*/
import { ref, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './userManage.data';
import { addPushUserManage, editPushUserManage, getPushUserManage } from '/@/api/platform/common/controller/pushUserManage';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
/** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>('');
/** https://v3.cn.vuejs.org/api/options-data.html#emits */
const emit = defineEmits(['success', 'register']);
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { span: 24 }
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
//
await resetFields();
await clearValidate();
//
tag.value = data._tag;
const refId = data.record?.id;
const props: Partial<ModalProps> = { confirmLoading: false };
// tag
switch (unref(tag)) {
case 'add':
props.title = '新增推送';
break;
case 'edit':
props.title = '编辑推送';
await setFieldsValue(await getPushUserManage(refId));
break;
}
// :
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
//
const formData = await validate();
//
setModalProps({ confirmLoading: true });
// tag
switch (unref(tag)) {
case 'add':
await addPushUserManage(formData);
break;
case 'edit':
await editPushUserManage(formData);
break;
}
//
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

118
src/views/common/push/pushConcern/concern.data.ts

@ -0,0 +1,118 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
/** 表格列配置 */
export const columns: BasicColumn[] = [
{
title: '昵称',
dataIndex: 'nickName'
},
{
title: '性别',
dataIndex: 'sex',
width: 80,
customRender: ({ record }) => {
const sex = record.sex;
const enable = ~~sex === 0;
const color = enable ? 'green' : 'red';
const text = enable ? '男' : '女';
return h(Tag, { color: color }, () => text);
}
},
{
title: '手机号',
dataIndex: 'phone'
},
{
title: '邮箱',
dataIndex: 'email'
},
{
title: '所属部门',
dataIndex: 'deptName'
},
{
title: '创建人',
dataIndex: 'createByName'
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 200
},
];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
{
field: 'nickName',
label: '用户昵称',
component: 'Input',
componentProps: {
placeholder: '请输入昵称',
},
colProps: { span: 6 }
}
];
/** 表单配置 */
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'nickName',
label: '昵称',
component: 'Input',
componentProps: {
disabled: true
}
},
{
field: 'deptName',
label: '所属部门',
component: 'Input',
colProps: {
span: 12
},
componentProps: {
disabled: true
}
},
{
field: 'sex',
label: '性别',
component: 'Select',
colProps: {
span: 12
},
componentProps: {
disabled: true,
options: [
{ label: '男', value: '0' },
{ label: '女', value: '1' }
]
},
},
{
field: 'phone',
label: '手机号',
component: 'Input',
componentProps: {
disabled: true
}
},
{
field: 'email',
label: '邮箱',
component: 'Input',
componentProps: {
disabled: true
}
},
];

118
src/views/common/push/pushConcern/index.vue

@ -4,69 +4,84 @@
@register="registerTable" @register="registerTable"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<template #expandedRowRender="{ record }">
<BasicTable @register="pushTypeRegisterTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
onClick: handlePushTypeEdit.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
</template>
<template #toolbar> <template #toolbar>
<!--<a-button type="primary"
@click="handleAdd()"
>新增推送</a-button>-->
<a-button <a-button
type="primary" type="primary"
:disabled="state.single" :disabled="state.single"
@click="handleEdit()" @click="()=>{}"
>修改推送</a-button> >推送通知</a-button>
<a-button <a-button
type="primary" type="primary"
:disabled="state.multiple" :disabled="state.multiple"
@click="handleDel()" @click="handleDel()"
>移除推送</a-button> >取消关注</a-button>
</template> </template>
<template #action="{ record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: '编辑', label: '查看',
icon: 'fa6-regular:pen-to-square', icon: 'fa6-regular:pen-to-square',
onClick: handleEdit.bind(null, record) onClick: handleViewEdit.bind(null, record)
}]"
:dropDownActions="[
{
label: '推送通知',
icon: 'fa6-regular:pen-to-square',
onClick: ()=>{}
}, },
{ {
label: '移除', label: '取消关注',
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
color: 'error', color: 'error',
onClick: handleDel.bind(null, record) onClick: handleDel.bind(null, record)
}]" }]"
/> />
</template> </template>
</template>
</BasicTable> </BasicTable>
<!--弹出窗体区域--> <ConcernModal @register="registerModal" @success="handleRefreshTable"/>
<UserManageModal @register="registerModal" @success="handleRefreshTable"/> <TypeModal @register="pushTypeRegisterModal" @success="handleRefreshPushTypeTable"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
/**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,采用 setup 写法
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
* author entfrm开发团队-王翔
*/
import { reactive, toRaw } from 'vue'; import { reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listPushUserManage, delPushUserManage } from '/@/api/platform/common/controller/pushUserManage'; import { listPushConcernFan, delPushConcernFan } from '/@/api/platform/common/controller/pushConcernFan';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import UserManageModal from './UserManageModal.vue'; import ConcernModal from './ConcernModal.vue';
import { columns, searchFormSchema } from './userManage.data'; import TypeModal from '../pushType/TypeModal.vue';
import { columns, searchFormSchema } from './concern.data';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import {useUserStore} from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { columns as pushTypeColumns, searchFormSchema as pushTypeSearchFormSchema} from '../pushType/type.data';
import { listPushConcernFanType } from '/@/api/platform/common/controller/pushConcernFanType';
const userStore = useUserStore(); const userStore = useUserStore();
const userInfoStore = userStore.getUserInfo; const userInfoStore = userStore.getUserInfo;
/** 类型规范统一声明定义区域 */
interface TableState { interface TableState {
single: boolean; single: boolean;
multiple: boolean; multiple: boolean;
} }
/** 通用变量统一声明区域 */
const state = reactive<TableState>({ const state = reactive<TableState>({
// //
single: true, single: true,
@ -75,9 +90,10 @@
}); });
const { createConfirm, createMessage } = useMessage(); const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [pushTypeRegisterModal, { openModal: pushTypeOpenModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({ const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '推送列表', title: '关注列表',
api: listPushUserManage, api: listPushConcernFan,
rowKey: 'id', rowKey: 'id',
columns, columns,
formConfig: { formConfig: {
@ -98,15 +114,39 @@
width: 220, width: 220,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' },
fixed: false fixed: false
}, },
searchInfo: { searchInfo: {
status: '1', status: '1',
fromUserId: userInfoStore.id fanUserId: userInfoStore.id
}, },
handleSearchInfoFn: () => clearSelectedRowKeys() handleSearchInfoFn: () => clearSelectedRowKeys()
}); });
const [pushTypeRegisterTable, { reload: pushTypeReload }] = useTable({
title: '推送类型列表',
api: listPushConcernFanType,
rowKey: 'id',
columns: pushTypeColumns,
formConfig: {
compact: true,
labelWidth: 80,
schemas: pushTypeSearchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
fixed: false
},
});
/** 处理多选框选中数据 */ /** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) { function handleSelectionChange(selection?: Recordable) {
@ -115,15 +155,15 @@
state.multiple = !rowSelection.length; state.multiple = !rowSelection.length;
} }
/** 新增按钮操作,行内新增与工具栏局域新增通用 */ /** 查看按钮操作,行内查看 */
function handleAdd() { function handleViewEdit(record?: Recordable) {
openModal(true,{ _tag: 'add' }); record = record || { id: getSelectRowKeys() };
openModal(true, { _tag: 'view', record });
} }
/** 编辑按钮操作,行内编辑 */ function handlePushTypeEdit(record?: Recordable) {
function handleEdit(record?: Recordable) {
record = record || { id: getSelectRowKeys() }; record = record || { id: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record }); pushTypeOpenModal(true, { _tag: 'concernEdit', record });
} }
/** 删除按钮操作,行内删除 */ /** 删除按钮操作,行内删除 */
@ -132,10 +172,10 @@
createConfirm({ createConfirm({
iconType: 'warning', iconType: 'warning',
title: '警告', title: '警告',
content: `是否确认移除编号为${ids}的数据?`, content: `是否确认取消编号为${ids}的数据?`,
onOk: async () => { onOk: async () => {
await delPushUserManage(ids); await delPushConcernFan(ids);
createMessage.success('移除成功!'); createMessage.success('取消成功!');
handleRefreshTable(); handleRefreshTable();
} }
}); });
@ -147,4 +187,8 @@
reload(); reload();
} }
function handleRefreshPushTypeTable() {
pushTypeReload();
}
</script> </script>

132
src/views/common/push/pushConcern/userManage.data.ts

@ -1,132 +0,0 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
/** 表格列配置 */
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'userName'
},
{
title: '是否播放声音',
dataIndex: 'playSound',
customRender: ({record}) => {
return ~~record?.playSound === 0 ? '是' : '否';
}
},
{
title: '是否震动',
dataIndex: 'playVibrate',
customRender: ({record}) => {
return ~~record?.playVibrate === 0 ? '是' : '否';
}
},
{
title: '是否闪光',
dataIndex: 'playLights',
customRender: ({record}) => {
return ~~record?.playLights === 0 ? '是' : '否';
}
},
{
title: '创建人',
dataIndex: 'createByName'
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 200
}
];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
{
field: 'userName',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入名称',
},
colProps: { span: 6 }
}
];
/** 表单配置 */
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'toUserId',
label: '对方用户id',
component: 'Input',
show: false
},
{
field: 'fromUserId',
label: '发送方用户id',
component: 'Input',
show: false
},
{
field: 'userName',
label: '名称',
component: 'Input',
required: true,
componentProps: {
disabled: true
},
},
{
field: 'playSound',
label: '是否播放声音',
component: 'RadioGroup',
required: true,
defaultValue: '0',
componentProps: {
options: [
{ label: '是', value: '0' },
{ label: '否', value: '1' }
]
},
colProps: {
span: 12
}
},
{
field: 'playVibrate',
label: '是否震动',
component: 'RadioGroup',
required: true,
defaultValue: '0',
componentProps: {
options: [
{ label: '是', value: '0' },
{ label: '否', value: '1' }
]
},
colProps: {
span: 12
}
},
{
field: 'playLights',
label: '是否闪光',
component: 'RadioGroup',
required: true,
defaultValue: '0',
componentProps: {
options: [
{ label: '是', value: '0' },
{ label: '否', value: '1' }
]
},
colProps: {
span: 12
}
},
];

8
src/views/common/push/pushType/TypeModal.vue

@ -20,6 +20,7 @@
import { formSchema } from './type.data'; import { formSchema } from './type.data';
import { addPushType, editPushType, getPushType } from '/@/api/platform/common/controller/pushType'; import { addPushType, editPushType, getPushType } from '/@/api/platform/common/controller/pushType';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { getPushConcernFanType, editPushConcernFanType } from '/@/api/platform/common/controller/pushConcernFanType';
/** 通用变量统一声明区域 */ /** 通用变量统一声明区域 */
const tag = ref<Nullable<string>>(''); const tag = ref<Nullable<string>>('');
@ -48,6 +49,10 @@
props.title = '编辑推送类型'; props.title = '编辑推送类型';
await setFieldsValue(await getPushType(refId)); await setFieldsValue(await getPushType(refId));
break; break;
case 'concernEdit':
props.title = '编辑关注推送类型';
await setFieldsValue(await getPushConcernFanType(refId));
break;
} }
// : // :
setModalProps(props); setModalProps(props);
@ -68,6 +73,9 @@
case 'edit': case 'edit':
await editPushType(formData); await editPushType(formData);
break; break;
case 'concernEdit':
await editPushConcernFanType(formData);
break;
} }
// //
closeModal(); closeModal();

Loading…
Cancel
Save