kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🚀 push 模块编写

master
wangxiang 2 years ago
parent
4bd5062347
commit
0371f94eba
9 changed files with 612 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/common/push/pushBlacklist/PassListModal.vue
  2. 10
      src/views/common/push/pushBlacklist/index.vue
  3. 2
      src/views/common/push/pushBlacklist/passList.data.ts
  4. 78
      src/views/common/push/pushTodoThirdParty/ThirdPartyModal.vue
  5. 131
      src/views/common/push/pushTodoThirdParty/index.vue
  6. 109
      src/views/common/push/pushTodoThirdParty/thirdParty.data.ts
  7. 78
      src/views/common/push/pushWhitelist/PassListModal.vue
  8. 138
      src/views/common/push/pushWhitelist/index.vue
  9. 70
      src/views/common/push/pushWhitelist/passList.data.ts

4
src/views/common/push/pushPassList/PassListModal.vue → src/views/common/push/pushBlacklist/PassListModal.vue
Unescape View File

@ -49,10 +49,10 @@ @@ -49,10 +49,10 @@
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
props.title = '新增名单';
props.title = '新增黑名单';
break;
case 'edit':
props.title = '编辑名单';
props.title = '编辑黑名单';
await setFieldsValue(await getPushPassList(refId));
break;
}

10
src/views/common/push/pushPassList/index.vue → src/views/common/push/pushBlacklist/index.vue
Unescape View File

@ -6,15 +6,15 @@ @@ -6,15 +6,15 @@
<template #toolbar>
<a-button type="primary"
@click="handleAdd()"
>新增名单</a-button>
>新增黑名单</a-button>
<a-button type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改名单</a-button>
>修改黑名单</a-button>
<a-button type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除名单</a-button>
>删除黑名单</a-button>
</template>
<template #action="{ record }">
<TableAction :actions="[
@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '名单列表',
title: '黑名单列表',
api: listPushPassList,
rowKey: 'id',
columns,
@ -93,7 +93,7 @@ @@ -93,7 +93,7 @@
fixed: false
},
searchInfo: {
type: router.query.type
type: "0"
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});

2
src/views/common/push/pushPassList/passList.data.ts → src/views/common/push/pushBlacklist/passList.data.ts
Unescape View File

@ -47,7 +47,7 @@ export const formSchema: FormSchema[] = [ @@ -47,7 +47,7 @@ export const formSchema: FormSchema[] = [
field: 'type',
label: '名单类型',
component: 'Input',
required: true,
defaultValue: "0",
show: false
},
{

78
src/views/common/push/pushTodoThirdParty/ThirdPartyModal.vue vendored
Unescape View File

@ -0,0 +1,78 @@ @@ -0,0 +1,78 @@
PushThirdPartyModal<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 './thirdParty.data';
import { addPushThirdParty, editPushThirdParty, getPushThirdParty } from '/@/api/platform/common/controller/pushThirdParty';
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 getPushThirdParty(refId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addPushThirdParty(formData);
break;
case 'edit':
await editPushThirdParty(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

131
src/views/common/push/pushTodoThirdParty/index.vue vendored
Unescape View File

@ -0,0 +1,131 @@ @@ -0,0 +1,131 @@
<template>
<div>
<BasicTable @register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除第三方申请</a-button>
</template>
<template #action="{ record }">
<TableAction :actions="[
{
label: '查看',
icon: 'fa6-regular:pen-to-square',
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</BasicTable>
<!--弹出窗体区域-->
<ThirdPartyModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<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 { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listPushThirdParty, delPushThirdParty } from '/@/api/platform/common/controller/pushThirdParty';
import { useModal } from '/@/components/Modal';
import ThirdPartyModal from './ThirdPartyModal.vue';
import { columns, searchFormSchema } from './thirdParty.data';
import { useMessage } from '/@/hooks/web/useMessage';
/** 类型规范统一声明定义区域 */
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '第三方列表',
api: listPushThirdParty,
rowKey: 'id',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: false
},
searchInfo: {
status: "0"
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { id: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const ids = record?.id || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除编号为${ids}的数据?`,
onOk: async () => {
await delPushThirdParty(ids);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

109
src/views/common/push/pushTodoThirdParty/thirdParty.data.ts vendored
Unescape View File

@ -0,0 +1,109 @@ @@ -0,0 +1,109 @@
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: 'statutoryRepName',
},
{
title: '企业名称',
dataIndex: 'enterpName'
},
{
title: '手机号',
dataIndex: 'phone'
},
{
title: '信用代码',
dataIndex: 'creditCode'
},
{
title: '详细地址',
dataIndex: 'detailedAddress'
},
{
title: '创建时间',
dataIndex: 'createTime'
}
];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
{
field: 'enterpName',
label: '企业名称',
component: 'Input',
componentProps: {
placeholder: '请输入企业名称'
},
colProps: { span: 6 }
}
];
/** 表单配置 */
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'statutoryRepName',
label: '法定代表人',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'idCard',
label: '身份证',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'enterpName',
label: '企业名称',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'phone',
label: '手机号',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'creditCode',
label: '信用代码',
component: 'Input',
required: true,
colProps: {
span: 12
}
},
{
field: 'detailedAddress',
label: '详细地址',
component: 'Input',
required: true,
colProps: {
span: 24
}
}
];

78
src/views/common/push/pushWhitelist/PassListModal.vue
Unescape View File

@ -0,0 +1,78 @@ @@ -0,0 +1,78 @@
<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 './passList.data';
import {addPushPassList, editPushPassList, getPushPassList} from '/@/api/platform/common/controller/pushPassList';
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 getPushPassList(refId));
break;
}
// 尾部:设置处理后的最终配置数据
setModalProps(props);
});
/** 处理弹出框提交 */
async function handleSubmit() {
try {
// 提取验证数据
const formData = await validate();
// 处理提交之前逻辑
setModalProps({ confirmLoading: true });
// 采用tag标签区分操作
switch (unref(tag)) {
case 'add':
await addPushPassList(formData);
break;
case 'edit':
await editPushPassList(formData);
break;
}
// 处理提交完成之后逻辑
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

138
src/views/common/push/pushWhitelist/index.vue
Unescape View File

@ -0,0 +1,138 @@ @@ -0,0 +1,138 @@
<template>
<div>
<BasicTable @register="registerTable"
@selection-change="handleSelectionChange"
>
<template #toolbar>
<a-button type="primary"
@click="handleAdd()"
>新增白名单</a-button>
<a-button type="primary"
:disabled="state.single"
@click="handleEdit()"
>修改白名单</a-button>
<a-button type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除白名单</a-button>
</template>
<template #action="{ record }">
<TableAction :actions="[
{
label: '编辑',
icon: 'fa6-regular:pen-to-square',
onClick: handleEdit.bind(null, record)
},
{
label: '删除',
icon: 'ant-design:delete-outlined',
color: 'error',
onClick: handleDel.bind(null, record)
}]"
/>
</template>
</BasicTable>
<!--弹出窗体区域-->
<PassListModal @register="registerModal" @success="handleRefreshTable"/>
</div>
</template>
<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 { BasicTable, useTable, TableAction } from '/@/components/Table';
import { listPushPassList, delPushPassList } from '/@/api/platform/common/controller/pushPassList';
import { useModal } from '/@/components/Modal';
import PassListModal from './PassListModal.vue';
import { columns, searchFormSchema } from './passList.data';
import { useMessage } from '/@/hooks/web/useMessage';
/** 类型规范统一声明定义区域 */
interface TableState {
single: boolean;
multiple: boolean;
}
/** 通用变量统一声明区域 */
const state = reactive<TableState>({
// 非单个禁用
single: true,
// 非多个禁用
multiple: true
});
const { createConfirm, createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
title: '白名单列表',
api: listPushPassList,
rowKey: 'id',
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true
},
rowSelection: { type: 'checkbox' },
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: false
},
searchInfo: {
type: "1"
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
/** 处理多选框选中数据 */
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
/** 新增按钮操作,行内新增与工具栏局域新增通用 */
function handleAdd() {
openModal(true,{ _tag: 'add' });
}
/** 编辑按钮操作,行内编辑 */
function handleEdit(record?: Recordable) {
record = record || { id: getSelectRowKeys() };
openModal(true, { _tag: 'edit', record });
}
/** 删除按钮操作,行内删除 */
async function handleDel(record?: Recordable) {
const ids = record?.id || getSelectRowKeys();
createConfirm({
iconType: 'warning',
title: '警告',
content: `是否确认删除编号为${ids}的数据?`,
onOk: async () => {
await delPushPassList(ids);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
/** 处理表格刷新 */
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
</script>

70
src/views/common/push/pushWhitelist/passList.data.ts
Unescape View File

@ -0,0 +1,70 @@ @@ -0,0 +1,70 @@
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
/** 表格列配置 */
export const columns: BasicColumn[] = [
{
title: '推送名称',
dataIndex: 'name'
},
{
title: '推送ID',
dataIndex: 'pushManageId'
},
{
title: '创建人',
dataIndex: 'createByName'
},
{
title: '创建时间',
dataIndex: 'createTime',
width: 200
}
];
/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '推送名称',
component: 'Input',
componentProps: {
placeholder: '请输入推送名称',
},
colProps: { span: 6 }
}
];
/** 表单配置 */
export const formSchema: FormSchema[] = [
{
field: 'id',
label: 'ID',
component: 'Input',
show: false
},
{
field: 'type',
label: '白名单类型',
component: 'Input',
defaultValue: '1'
},
{
field: 'name',
label: '推送名称',
component: 'Input',
required: true,
colProps: {
span: 24
}
},
{
field: 'pushManageId',
label: '推送ID',
component: 'Input',
required: true,
colProps: {
span: 24
}
},
];
Write Preview
Loading…
Cancel
Save