geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: lint格式化文件

Browse Source
This commit is contained in:
t-aonan.gu
2025-10-21 18:04:02 +08:00
parent f9ca969fec
commit 7629120548
1092 changed files with 148218 additions and 157907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/views/dataconfig/areaManager/components/AreaModal.vue
View File

@ -1,136 +1,134 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
</BasicModal>
</template>
<script lang="tsx" setup>
import { ref, computed, unref, reactive, toRefs } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { addArea, getArea, updateArea } from '/@/api/system/area';
import { usePermission } from '/@/hooks/web/usePermission';
const { t } = useI18n();
const accountFormSchema: FormSchema[] = [
{
field: 'code',
label: t('编号'),
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
field: 'name',
label: t('名称'),
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
field: 'simpleSpelling',
label: t('简拼'),
component: 'Input',
colProps: { span: 24 },
},
{
field: 'quickQuery',
label: t('快速查询'),
component: 'Input',
colProps: { span: 24 },
},
{
field: 'sortCode',
label: t('排序'),
component: 'InputNumber',
required: true,
colProps: { span: 24 },
componentProps: {
min: 1,
},
},
{
field: 'remark',
label: t('备注'),
component: 'InputTextArea',
colProps: { span: 24 },
},
];
import { ref, computed, unref, reactive, toRefs } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { addArea, getArea, updateArea } from '/@/api/system/area';
import { usePermission } from '/@/hooks/web/usePermission';
const { t } = useI18n();
const accountFormSchema: FormSchema[] = [
{
field: 'code',
label: t('编号'),
component: 'Input',
required: true,
colProps: { span: 24 }
},
{
field: 'name',
label: t('名称'),
component: 'Input',
required: true,
colProps: { span: 24 }
},
{
field: 'simpleSpelling',
label: t('简拼'),
component: 'Input',
colProps: { span: 24 }
},
{
field: 'quickQuery',
label: t('快速查询'),
component: 'Input',
colProps: { span: 24 }
},
{
field: 'sortCode',
label: t('排序'),
component: 'InputNumber',
required: true,
colProps: { span: 24 },
componentProps: {
min: 1
}
},
{
field: 'remark',
label: t('备注'),
component: 'InputTextArea',
colProps: { span: 24 }
}
];
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['success', 'register']);
const { filterFormSchemaAuth } = usePermission();
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const { filterFormSchemaAuth } = usePermission();
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
console.log(filterFormSchemaAuth(accountFormSchema, true), 'ssssssssss');
console.log(filterFormSchemaAuth(accountFormSchema, true), 'ssssssssss');
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: filterFormSchemaAuth(accountFormSchema, true),
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: filterFormSchemaAuth(accountFormSchema, true),
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
let areaInfo = reactive({
layer: 1,
parentId: null,
});
let { layer, parentId } = toRefs(areaInfo);
let areaInfo = reactive({
layer: 1,
parentId: null
});
let { layer, parentId } = toRefs(areaInfo);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.id;
const record = await getArea(data.id);
if (unref(isUpdate)) {
rowId.value = data.id;
const record = await getArea(data.id);
setFieldsValue({
...record,
});
} else {
layer.value = data?.layer;
parentId.value = data?.parentId;
setFieldsValue({
...record
});
} else {
layer.value = data?.layer;
parentId.value = data?.parentId;
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增区域') : t('编辑区域')));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
let paramas = parentId.value ? { ...areaInfo, ...values } : { layer: layer.value, ...values };
await addArea(paramas);
notification.success({
message: t('提示'),
description: t('新增成功')
}); //提示消息
} else {
values.id = rowId.value;
await updateArea(values);
notification.success({
message: t('提示'),
description: t('修改成功！')
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增区域') : t('编辑区域')));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
let paramas = parentId.value
? { ...areaInfo, ...values }
: { layer: layer.value, ...values };
await addArea(paramas);
notification.success({
message: t('提示'),
description: t('新增成功'),
}); //提示消息
} else {
values.id = rowId.value;
await updateArea(values);
notification.success({
message: t('提示'),
description: t('修改成功！'),
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

424
src/views/dataconfig/areaManager/index.vue
View File

@ -1,234 +1,216 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<div
class="w-1/4 xl:w-1/5 overflow-hidden bg-white"
:style="{ 'border-right': '1px solid #e5e7eb' }"
>
<BasicTree
:title="t('目录信息')"
ref="asyncTreeRef"
search
toolbar
:clickRowToExpand="true"
expandOnSearch
:treeData="treeData"
:load-data="onLoadData"
:fieldNames="{ key: 'id', title: 'name' }"
@select="handleSelect"
/>
</div>
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'areaManager:add'">{{
t('新增区域')
}}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'areaManager:edit',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
auth: 'areaManager:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</BasicTable>
<AreaModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<div class="w-1/4 xl:w-1/5 overflow-hidden bg-white" :style="{ 'border-right': '1px solid #e5e7eb' }">
<BasicTree :title="t('目录信息')" ref="asyncTreeRef" search toolbar :clickRowToExpand="true" expandOnSearch :treeData="treeData" :load-data="onLoadData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
</div>
<BasicTable @register="registerTable" class="w-3/4 xl:w-4/5">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'areaManager:add'">{{ t('新增区域') }}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'areaManager:edit',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
auth: 'areaManager:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</BasicTable>
<AreaModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted, reactive, toRefs } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
import { getAreaProvinceList, getAreaList, deleteArea } from '/@/api/system/area';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import { uniq } from 'lodash-es';
import AreaModal from './components/AreaModal.vue';
import { usePermission } from '/@/hooks/web/usePermission';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('区域名称'),
component: 'Input',
componentProps: {
placeholder: t('请输入区域名称'),
},
},
];
const columns: BasicColumn[] = [
{
title: t('编号'),
dataIndex: 'code',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('名称'),
dataIndex: 'name',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('简拼'),
dataIndex: 'simpleSpelling',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('快速查询'),
dataIndex: 'quickQuery',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('级别'),
dataIndex: 'layer',
width: 120,
sorter: true,
align: 'left',
customRender: ({ text }) => {
switch (text) {
case 1:
return t('省');
case 2:
return t('市');
case 3:
return t('区');
case 4:
return t('街道');
import { ref, unref, onMounted, reactive, toRefs } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
import { getAreaProvinceList, getAreaList, deleteArea } from '/@/api/system/area';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import { uniq } from 'lodash-es';
import AreaModal from './components/AreaModal.vue';
import { usePermission } from '/@/hooks/web/usePermission';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('区域名称'),
component: 'Input',
componentProps: {
placeholder: t('请输入区域名称')
}
}
},
},
{
title: t('备注'),
sorter: true,
dataIndex: 'remark',
width: 180,
align: 'left',
},
];
];
const { notification } = useMessage();
const selectAreaId = ref('');
const { filterColumnAuth } = usePermission();
const filterColumns = filterColumnAuth(columns, true);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('行政区域列表'),
api: getAreaList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false,
},
beforeFetch: (params) => {
//发送请求默认新增 左边树结构所选区域id
return { ...params, id: selectAreaId.value };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
const treeData = ref<TreeItem[]>([]);
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
function onLoadData(treeNode) {
return new Promise((resolve: (value?: unknown) => void) => {
getAreaList({ id: treeNode.id }).then((res) => {
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
if (asyncTreeAction) {
asyncTreeAction.updateNodeByKey(treeNode.key, { children: res });
asyncTreeAction.setExpandedKeys(
uniq([treeNode.key, ...asyncTreeAction.getExpandedKeys()]),
);
const columns: BasicColumn[] = [
{
title: t('编号'),
dataIndex: 'code',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('名称'),
dataIndex: 'name',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('简拼'),
dataIndex: 'simpleSpelling',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('快速查询'),
dataIndex: 'quickQuery',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('级别'),
dataIndex: 'layer',
width: 120,
sorter: true,
align: 'left',
customRender: ({ text }) => {
switch (text) {
case 1:
return t('省');
case 2:
return t('市');
case 3:
return t('区');
case 4:
return t('街道');
}
}
},
{
title: t('备注'),
sorter: true,
dataIndex: 'remark',
width: 180,
align: 'left'
}
];
const { notification } = useMessage();
const selectAreaId = ref('');
const { filterColumnAuth } = usePermission();
const filterColumns = filterColumnAuth(columns, true);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('行政区域列表'),
api: getAreaList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
beforeFetch: (params) => {
//发送请求默认新增 左边树结构所选区域id
return { ...params, id: selectAreaId.value };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
resolve();
return;
});
});
}
const treeData = ref<TreeItem[]>([]);
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = (await getAreaProvinceList()) as unknown as TreeItem[];
}
function onLoadData(treeNode) {
return new Promise((resolve: (value?: unknown) => void) => {
getAreaList({ id: treeNode.id }).then((res) => {
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
if (asyncTreeAction) {
asyncTreeAction.updateNodeByKey(treeNode.key, { children: res });
asyncTreeAction.setExpandedKeys(uniq([treeNode.key, ...asyncTreeAction.getExpandedKeys()]));
}
resolve();
return;
});
});
}
onMounted(() => {
fetch();
});
function handleCreate() {
openModal(true, {
isUpdate: false,
...areaInfo,
async function fetch() {
treeData.value = (await getAreaProvinceList()) as unknown as TreeItem[];
}
onMounted(() => {
fetch();
});
}
function handleCreate() {
openModal(true, {
isUpdate: false,
...areaInfo
});
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true,
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true
});
}
function handleDelete(record: Recordable) {
deleteArea([record.id]).then((_) => {
reload({ searchInfo: { id: selectAreaId.value } });
notification.success({
message: t('提示'),
description: t('删除成功')
}); //提示消息
});
}
function handleSuccess() {
reload({ searchInfo: { id: selectAreaId.value } });
}
const areaInfo = reactive({
layer: 1,
parentId: null
});
}
function handleDelete(record: Recordable) {
deleteArea([record.id]).then((_) => {
reload({ searchInfo: { id: selectAreaId.value } });
notification.success({
message: t('提示'),
description: t('删除成功'),
}); //提示消息
});
}
function handleSuccess() {
reload({ searchInfo: { id: selectAreaId.value } });
}
const areaInfo = reactive({
layer: 1,
parentId: null,
});
function handleSelect(areaId = '', { selectedNodes }) {
let { layer, parentId } = toRefs(areaInfo);
layer.value = selectedNodes[0]?.layer + 1 || 1;
parentId.value = selectedNodes[0]?.id;
selectAreaId.value = areaId[0] || '';
reload({ searchInfo: { id: areaId } });
}
function handleSelect(areaId = '', { selectedNodes }) {
let { layer, parentId } = toRefs(areaInfo);
layer.value = selectedNodes[0]?.layer + 1 || 1;
parentId.value = selectedNodes[0]?.id;
selectAreaId.value = areaId[0] || '';
reload({ searchInfo: { id: areaId } });
}
</script>

436
src/views/dataconfig/codeRule/components/CodeModal.vue
View File

@ -1,235 +1,235 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> + {{ t('新增') }} </a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
title: t('编辑'),
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
title: t('删除'),
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</BasicTable>
<RuleModal @register="registerRuleModal" @success="handleSuccess" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" />
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> + {{ t('新增') }} </a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
title: t('编辑'),
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
title: t('删除'),
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</BasicTable>
<RuleModal @register="registerRuleModal" @success="handleSuccess" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
import { addCodeRule, getCodeRuleInfo, editCodeRule } from '/@/api/system/code';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import RuleModal from './RuleModal.vue';
const { t } = useI18n();
const codeFormSchema: FormSchema[] = [
{
field: 'code',
label: t('编码编号'),
component: 'Input',
required: true,
colProps: { span: 12 },
},
{
field: 'name',
label: t('编码名称'),
component: 'Input',
required: true,
colProps: { span: 12 },
},
{
field: 'description',
label: t('编码说明'),
component: 'Input',
colProps: { span: 12 },
},
{
field: 'sortCode',
label: t('排序码'),
component: 'InputNumber',
componentProps: {
min: 1,
precision: 0,
style: { width: '100%' },
},
colProps: { span: 12 },
},
];
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
import { addCodeRule, getCodeRuleInfo, editCodeRule } from '/@/api/system/code';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import RuleModal from './RuleModal.vue';
const { t } = useI18n();
const codeFormSchema: FormSchema[] = [
{
field: 'code',
label: t('编码编号'),
component: 'Input',
required: true,
colProps: { span: 12 }
},
{
field: 'name',
label: t('编码名称'),
component: 'Input',
required: true,
colProps: { span: 12 }
},
{
field: 'description',
label: t('编码说明'),
component: 'Input',
colProps: { span: 12 }
},
{
field: 'sortCode',
label: t('排序码'),
component: 'InputNumber',
componentProps: {
min: 1,
precision: 0,
style: { width: '100%' }
},
colProps: { span: 12 }
}
];
const columns: BasicColumn[] = [
{
title: t('前缀'),
dataIndex: 'itemTypeName',
width: 120,
},
{
title: t('格式'),
dataIndex: 'formatStr',
width: 120,
},
{
title: t('步长'),
dataIndex: 'stepValue',
width: 100,
},
{
title: t('初始值'),
dataIndex: 'initValue',
width: 100,
},
{
title: t('排序'),
dataIndex: 'sortNum',
width: 100,
},
{
title: t('说明'),
dataIndex: 'description',
width: 120,
},
];
const columns: BasicColumn[] = [
{
title: t('前缀'),
dataIndex: 'itemTypeName',
width: 120
},
{
title: t('格式'),
dataIndex: 'formatStr',
width: 120
},
{
title: t('步长'),
dataIndex: 'stepValue',
width: 100
},
{
title: t('初始值'),
dataIndex: 'initValue',
width: 100
},
{
title: t('排序'),
dataIndex: 'sortNum',
width: 100
},
{
title: t('说明'),
dataIndex: 'description',
width: 120
}
];
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: codeFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: codeFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.id;
const record = await getCodeRuleInfo(data.record.id);
setFieldsValue({
...record,
});
let datas=JSON.parse({ ...record }.formatJson);
datas.forEach((data)=>{
if(!data.sortNum){
data.sortNum=0;
}
});
setTableData(datas);
} else {
setTableData([]);
if (unref(isUpdate)) {
rowId.value = data.record.id;
const record = await getCodeRuleInfo(data.record.id);
setFieldsValue({
...record
});
let datas = JSON.parse({ ...record }.formatJson);
datas.forEach((data) => {
if (!data.sortNum) {
data.sortNum = 0;
}
});
setTableData(datas);
} else {
setTableData([]);
}
});
const [registerRuleModal, { openModal }] = useModal();
const [registerTable, { getDataSource, setTableData, updateTableDataRecord }] = useTable({
title: t('规则设计'),
columns,
bordered: true,
pagination: false,
canResize: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
formConfig: {
showResetButton: false,
showSubmitButton: false
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增单据编码') : t('编辑单据编码')));
async function handleSubmit() {
try {
const values = await validate();
let data = getDataSource();
data.sort((a, b) => {
return a.sortNum - b.sortNum;
});
values.formatJson = JSON.stringify(data);
setModalProps({ confirmLoading: true });
if (values.formatJson === '[]') {
notification.warning({
message: t('提示'),
description: t('编码规则不能为空')
});
return;
}
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addCodeRule(values);
notification.success({
message: t('提示'),
description: t('新增成功')
}); //提示消息
} else {
values.id = rowId.value;
await editCodeRule(values);
notification.success({
message: t('提示'),
description: t('修改成功！')
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
});
const [registerRuleModal, { openModal }] = useModal();
const [registerTable, { getDataSource, setTableData, updateTableDataRecord }] = useTable({
title: t('规则设计'),
columns,
bordered: true,
pagination: false,
canResize: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
},
formConfig: {
showResetButton: false,
showSubmitButton: false
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增单据编码') : t('编辑单据编码')));
async function handleSubmit() {
try {
const values = await validate();
let data=getDataSource();
data.sort((a,b)=>{
return a.sortNum-b.sortNum;
});
values.formatJson = JSON.stringify(data);
setModalProps({ confirmLoading: true });
if (values.formatJson === '[]') {
notification.warning({
message: t('提示'),
description: t('编码规则不能为空'),
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true
});
return;
}
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addCodeRule(values);
notification.success({
message: t('提示'),
description: t('新增成功'),
}); //提示消息
} else {
values.id = rowId.value;
await editCodeRule(values);
notification.success({
message: t('提示'),
description: t('修改成功！'),
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
function handleDelete(record: Recordable) {
const dataSource = getDataSource();
setTableData(dataSource.filter((x) => x.key !== record.key));
}
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
function handleSuccess({ isUpdate, record }) {
if (isUpdate) {
updateTableDataRecord(record.key, record);
} else {
const dataSource = getDataSource();
dataSource.push(record);
setTableData(dataSource);
function handleDelete(record: Recordable) {
const dataSource = getDataSource();
setTableData(dataSource.filter((x) => x.key !== record.key));
}
function handleCreate() {
openModal(true, {
isUpdate: false
});
}
function handleSuccess({ isUpdate, record }) {
if (isUpdate) {
updateTableDataRecord(record.key, record);
} else {
const dataSource = getDataSource();
dataSource.push(record);
setTableData(dataSource);
}
}
}
</script>

550
src/views/dataconfig/codeRule/components/RuleModal.vue
View File

@ -1,285 +1,283 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" ref="formRef" :validateTrigger="['blur', 'change']" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" ref="formRef" :validateTrigger="['blur', 'change']" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { buildUUID } from '/@/utils/uuid';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const emit = defineEmits(['success', 'register']);
const formRef = ref();
import { ref, computed, unref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { buildUUID } from '/@/utils/uuid';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const emit = defineEmits(['success', 'register']);
const formRef = ref();
const itemTypeNameOptions: LabelValueOptions = [
{
label: t('自定义'),
value: '0',
},
{
label: t('日期'),
value: '1',
},
{
label: t('流水号'),
value: '2',
},
{
label: t('部门'),
value: '3',
},
{
label: t('用户'),
value: '4',
},
];
const formatStrOptionsData = {
'1': [
{ label: 'MMdd', value: '1' },
{ label: 'ddMM', value: '2' },
{ label: 'MMyy', value: '3' },
{ label: 'yyMM', value: '4' },
{ label: 'yyyy', value: '5' },
{ label: 'yy', value: '6' },
{ label: 'yyyyMM', value: '7' },
{ label: 'yyMMdd', value: '8' },
{ label: 'yyyyMMdd', value: '9' },
],
'2': [
{ label: '000', value: '1' },
{ label: '0000', value: '2' },
{ label: '00000', value: '3' },
{ label: '000000', value: '4' },
],
'3': [
{ label: t('部门编号'), value: 'code' },
{ label: t('部门名称'), value: 'name' },
],
'4': [
{ label: t('用户编号'), value: 'code' },
{ label: t('用户名称'), value: 'name' },
],
};
let itemTypeName = ref('');
let formatStr = ref('');
let formatStrOptions: Array<object>;
const ruleFormSchema: FormSchema[] = [
{
field: 'itemType',
label: t('前缀'),
component: 'Select',
required: true,
colProps: { span: 24 },
componentProps: ({ formModel, formActionType }) => {
return {
options: itemTypeNameOptions,
allowClear: false,
onChange: (e: any, option) => {
itemTypeName.value = option?.label;
const { updateSchema } = formActionType;
formModel.formatStr = undefined;
if (e === '0') {
updateSchema({
field: 'formatStr',
component: 'Input',
componentProps: () => {
return {
allowClear: false,
onChange: (e: any) => {
formatStr.value = e.target.value;
},
};
},
});
} else {
formatStrOptions = e ? formatStrOptionsData[e] : [];
updateSchema({
field: 'formatStr',
component: 'Select',
componentProps: () => {
return {
allowClear: false,
options: formatStrOptions,
onChange: (_, option) => {
formatStr.value = e === '3' || e === '4' ? option?.value : option?.label;
},
};
},
});
}
if (e !== '2') {
updateSchema({
field: 'stepValue',
defaultValue: '',
});
updateSchema({
field: 'initValue',
defaultValue: '',
});
nextTick(() => {
formRef.value.clearValidate(['stepValue', 'initValue']);
});
}
},
};
},
},
{
field: 'formatStr',
label: t('格式'),
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
field: 'stepValue',
label: t('步长'),
component: 'InputNumber',
componentProps: {
min: 1,
precision: 0,
style: { width: '100%' },
allowClear: false,
},
colProps: { span: 24 },
dynamicDisabled: ({ values }) => {
return values.itemType !== '2';
},
dynamicRules: ({ values }) => {
return values.itemType === '2' ? [{ required: true, message: t('请输入步长') }] : [];
},
},
{
field: 'initValue',
label: t('初始'),
component: 'Input',
colProps: { span: 24 },
componentProps: {
allowClear: false,
onChange: (e: any) => {
e.target.value = e.target.value.replace(/[^\d]/g, '');
const itemTypeNameOptions: LabelValueOptions = [
{
label: t('自定义'),
value: '0'
},
},
dynamicDisabled: ({ values }) => {
return values.itemType !== '2';
},
dynamicRules: ({ values }) => {
return values.itemType === '2' ? [{ required: true, message: t('请输入初始') }] : [];
},
},
{
field: 'sortNum',
label: t('排序'),
component: 'InputNumber',
colProps: { span: 24 },
componentProps: {
allowClear: false,
},
},
{
field: 'description',
label: t('说明'),
component: 'Input',
colProps: { span: 24 },
componentProps: {
allowClear: false,
},
},
];
const isUpdate = ref(true);
const rowId = ref('');
const { notification } = useMessage();
const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
labelWidth: 100,
schemas: ruleFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.key;
const val = data.record.itemType;
itemTypeName.value=data.record.itemTypeName;
formatStr.value=data.record.formatStr;
if (val !== '0') {
formatStrOptions = val ? formatStrOptionsData[val] : [];
updateSchema({
field: 'formatStr',
component: 'Select',
componentProps: () => {
return {
options: formatStrOptions,
onChange: (_, option) => {
formatStr.value = val === '3' || val === '4' ? option?.value : option?.label;
},
};
},
});
}
setFieldsValue({
...data.record,
});
} else {
rowId.value = buildUUID();
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增') : t('编辑')));
async function handleSubmit() {
try {
const values = await validate();
if (values.itemType === '2' && !!values.initValue?.toString().length) {
if (formatStr.value?.length !== values.initValue?.toString().length) {
notification.warning({
message: t('提示'),
description: t(
'初始值的长度需跟格式保持一致，例如：格式为000，初始值就为001，不能超过长度',
),
});
return;
} else if (formatStr.value === values.initValue?.toString()) {
notification.warning({
message: t('提示'),
description: t('初始值不能从零开始'),
});
return;
{
label: t('日期'),
value: '1'
},
{
label: t('流水号'),
value: '2'
},
{
label: t('部门'),
value: '3'
},
{
label: t('用户'),
value: '4'
}
}
setModalProps({ confirmLoading: true });
closeModal();
emit('success', {
isUpdate: unref(isUpdate),
record: {
...values,
itemTypeName:unref(itemTypeName),
formatStr:unref(formatStr),
key: rowId.value,
];
const formatStrOptionsData = {
'1': [
{ label: 'MMdd', value: '1' },
{ label: 'ddMM', value: '2' },
{ label: 'MMyy', value: '3' },
{ label: 'yyMM', value: '4' },
{ label: 'yyyy', value: '5' },
{ label: 'yy', value: '6' },
{ label: 'yyyyMM', value: '7' },
{ label: 'yyMMdd', value: '8' },
{ label: 'yyyyMMdd', value: '9' }
],
'2': [
{ label: '000', value: '1' },
{ label: '0000', value: '2' },
{ label: '00000', value: '3' },
{ label: '000000', value: '4' }
],
'3': [
{ label: t('部门编号'), value: 'code' },
{ label: t('部门名称'), value: 'name' }
],
'4': [
{ label: t('用户编号'), value: 'code' },
{ label: t('用户名称'), value: 'name' }
]
};
let itemTypeName = ref('');
let formatStr = ref('');
let formatStrOptions: Array<object>;
const ruleFormSchema: FormSchema[] = [
{
field: 'itemType',
label: t('前缀'),
component: 'Select',
required: true,
colProps: { span: 24 },
componentProps: ({ formModel, formActionType }) => {
return {
options: itemTypeNameOptions,
allowClear: false,
onChange: (e: any, option) => {
itemTypeName.value = option?.label;
const { updateSchema } = formActionType;
formModel.formatStr = undefined;
if (e === '0') {
updateSchema({
field: 'formatStr',
component: 'Input',
componentProps: () => {
return {
allowClear: false,
onChange: (e: any) => {
formatStr.value = e.target.value;
}
};
}
});
} else {
formatStrOptions = e ? formatStrOptionsData[e] : [];
updateSchema({
field: 'formatStr',
component: 'Select',
componentProps: () => {
return {
allowClear: false,
options: formatStrOptions,
onChange: (_, option) => {
formatStr.value = e === '3' || e === '4' ? option?.value : option?.label;
}
};
}
});
}
if (e !== '2') {
updateSchema({
field: 'stepValue',
defaultValue: ''
});
updateSchema({
field: 'initValue',
defaultValue: ''
});
nextTick(() => {
formRef.value.clearValidate(['stepValue', 'initValue']);
});
}
}
};
}
},
});
updateSchema({
field: 'formatStr',
component: 'Input',
});
} finally {
setModalProps({ confirmLoading: false });
{
field: 'formatStr',
label: t('格式'),
component: 'Input',
required: true,
colProps: { span: 24 }
},
{
field: 'stepValue',
label: t('步长'),
component: 'InputNumber',
componentProps: {
min: 1,
precision: 0,
style: { width: '100%' },
allowClear: false
},
colProps: { span: 24 },
dynamicDisabled: ({ values }) => {
return values.itemType !== '2';
},
dynamicRules: ({ values }) => {
return values.itemType === '2' ? [{ required: true, message: t('请输入步长') }] : [];
}
},
{
field: 'initValue',
label: t('初始'),
component: 'Input',
colProps: { span: 24 },
componentProps: {
allowClear: false,
onChange: (e: any) => {
e.target.value = e.target.value.replace(/[^\d]/g, '');
}
},
dynamicDisabled: ({ values }) => {
return values.itemType !== '2';
},
dynamicRules: ({ values }) => {
return values.itemType === '2' ? [{ required: true, message: t('请输入初始') }] : [];
}
},
{
field: 'sortNum',
label: t('排序'),
component: 'InputNumber',
colProps: { span: 24 },
componentProps: {
allowClear: false
}
},
{
field: 'description',
label: t('说明'),
component: 'Input',
colProps: { span: 24 },
componentProps: {
allowClear: false
}
}
];
const isUpdate = ref(true);
const rowId = ref('');
const { notification } = useMessage();
const [registerForm, { setFieldsValue, resetFields, validate, updateSchema }] = useForm({
labelWidth: 100,
schemas: ruleFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.key;
const val = data.record.itemType;
itemTypeName.value = data.record.itemTypeName;
formatStr.value = data.record.formatStr;
if (val !== '0') {
formatStrOptions = val ? formatStrOptionsData[val] : [];
updateSchema({
field: 'formatStr',
component: 'Select',
componentProps: () => {
return {
options: formatStrOptions,
onChange: (_, option) => {
formatStr.value = val === '3' || val === '4' ? option?.value : option?.label;
}
};
}
});
}
setFieldsValue({
...data.record
});
} else {
rowId.value = buildUUID();
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增') : t('编辑')));
async function handleSubmit() {
try {
const values = await validate();
if (values.itemType === '2' && !!values.initValue?.toString().length) {
if (formatStr.value?.length !== values.initValue?.toString().length) {
notification.warning({
message: t('提示'),
description: t('初始值的长度需跟格式保持一致，例如：格式为000，初始值就为001，不能超过长度')
});
return;
} else if (formatStr.value === values.initValue?.toString()) {
notification.warning({
message: t('提示'),
description: t('初始值不能从零开始')
});
return;
}
}
setModalProps({ confirmLoading: true });
closeModal();
emit('success', {
isUpdate: unref(isUpdate),
record: {
...values,
itemTypeName: unref(itemTypeName),
formatStr: unref(formatStr),
key: rowId.value
}
});
updateSchema({
field: 'formatStr',
component: 'Input'
});
} finally {
setModalProps({ confirmLoading: false });
}
}
}
</script>

290
src/views/dataconfig/codeRule/index.vue
View File

@ -1,158 +1,156 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'codeRule:add'">{{
t('新增')
}}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'codeRule:edit',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
auth: 'codeRule:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</BasicTable>
<CodeModal @register="registerModal" @success="handleSuccess" :width="800" />
</PageWrapper>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'codeRule:add'">{{ t('新增') }}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'codeRule:edit',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
auth: 'codeRule:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</BasicTable>
<CodeModal @register="registerModal" @success="handleSuccess" :width="800" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { getCodeList, deleteCodeRule } from '/@/api/system/code';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import CodeModal from './components/CodeModal.vue';
// import DeptTree from './components/DeptTree.vue';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('编码名称'),
component: 'Input',
colProps: { xs: 12, md: 8 },
componentProps: {
placeholder: t('请输入编码名称'),
},
},
];
import { ref } from 'vue';
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { getCodeList, deleteCodeRule } from '/@/api/system/code';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import CodeModal from './components/CodeModal.vue';
// import DeptTree from './components/DeptTree.vue';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('编码名称'),
component: 'Input',
colProps: { xs: 12, md: 8 },
componentProps: {
placeholder: t('请输入编码名称')
}
}
];
const columns: BasicColumn[] = [
{
title: t('编码编号'),
dataIndex: 'code',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('编码名称'),
dataIndex: 'name',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('当前流水号'),
dataIndex: 'currentNumber',
width: 120,
align: 'left',
sorter: true,
},
{
title: t('创建用户'),
dataIndex: 'createUserName',
width: 120,
sorter: true,
align: 'left',
},
{
title: t('创建时间'),
dataIndex: 'createDate',
width: 180,
sorter: true,
align: 'left',
},
{
title: t('编码说明'),
dataIndex: 'description',
width: 180,
align: 'left',
sorter: true,
},
];
const columns: BasicColumn[] = [
{
title: t('编码编号'),
dataIndex: 'code',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('编码名称'),
dataIndex: 'name',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('当前流水号'),
dataIndex: 'currentNumber',
width: 120,
align: 'left',
sorter: true
},
{
title: t('创建用户'),
dataIndex: 'createUserName',
width: 120,
sorter: true,
align: 'left'
},
{
title: t('创建时间'),
dataIndex: 'createDate',
width: 180,
sorter: true,
align: 'left'
},
{
title: t('编码说明'),
dataIndex: 'description',
width: 180,
align: 'left',
sorter: true
}
];
const { notification } = useMessage();
const { notification } = useMessage();
const selectRuleId = ref('');
const selectRuleId = ref('');
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('自动编码列表'),
api: getCodeList,
rowKey: 'id',
columns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false
},
useSearchForm: true,
striped: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
function handleCreate() {
openModal(true, {
isUpdate: false,
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('自动编码列表'),
api: getCodeList,
rowKey: 'id',
columns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
useSearchForm: true,
striped: false,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
function handleCreate() {
openModal(true, {
isUpdate: false
});
}
function handleDelete(record: Recordable) {
deleteCodeRule([record.id]).then((_) => {
reload({ searchInfo: { id: selectRuleId.value } });
notification.success({
message: t('提示'),
description: t('删除成功'),
}); //提示消息
});
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true
});
}
function handleSuccess() {
reload({ searchInfo: { id: selectRuleId.value } });
}
function handleDelete(record: Recordable) {
deleteCodeRule([record.id]).then((_) => {
reload({ searchInfo: { id: selectRuleId.value } });
notification.success({
message: t('提示'),
description: t('删除成功')
}); //提示消息
});
}
function handleSuccess() {
reload({ searchInfo: { id: selectRuleId.value } });
}
</script>

305
src/views/dataconfig/databaselink/components/DatabaseLinkModal.vue
View File

@ -1,167 +1,162 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
<template #insertFooter>
<a-button type="primary" danger @click="handleTest"> {{ t('测试链接') }} </a-button>
</template>
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
<template #insertFooter>
<a-button type="primary" danger @click="handleTest"> {{ t('测试链接') }} </a-button>
</template>
</BasicModal>
</template>
<script lang="tsx" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import {
addDatabaseLink,
getDatabaseLink,
updateDatabaseLink,
testDatabaseLink,
} from '/@/api/system/databaselink';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const accountFormSchema: FormSchema[] = [
{
field: 'dbName',
label: t('数据库名称'),
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
field: 'dbType',
label: t('数据库类型'),
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'mysql', value: 'mysql' },
{ label: 'sqlserver', value: 'sqlserver' },
{ label: 'oracle', value: 'oracle' },
{ label: 'pgsql', value: 'pgsql' },
{ label: 'dm', value: 'dm' },
{ label: 'mariadb', value: 'mariadb' },
{ label: 'sqlite', value: 'sqlite' },
{ label: 'gbase', value: 'gbase' },
{ label: 'oceanbase', value: 'oceanbase' },
{ label: 'h2', value: 'h2' },
],
},
colProps: { span: 24 },
},
{
field: 'dbVersion',
label: t('数据库版本'),
component: 'Input',
colProps: { span: 24 },
},
{
field: 'host',
label: t('链接'),
required: true,
component: 'InputTextArea',
colProps: { span: 24 },
},
{
field: 'username',
label: t('账号'),
component: 'Input',
required: true,
colProps: { span: 24 },
},
{
field: 'password',
label: t('密码'),
component: 'InputPassword',
componentProps: {
visibilityToggle: true,
},
required: true,
colProps: { span: 24 },
},
];
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { addDatabaseLink, getDatabaseLink, updateDatabaseLink, testDatabaseLink } from '/@/api/system/databaselink';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const accountFormSchema: FormSchema[] = [
{
field: 'dbName',
label: t('数据库名称'),
component: 'Input',
required: true,
colProps: { span: 24 }
},
{
field: 'dbType',
label: t('数据库类型'),
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'mysql', value: 'mysql' },
{ label: 'sqlserver', value: 'sqlserver' },
{ label: 'oracle', value: 'oracle' },
{ label: 'pgsql', value: 'pgsql' },
{ label: 'dm', value: 'dm' },
{ label: 'mariadb', value: 'mariadb' },
{ label: 'sqlite', value: 'sqlite' },
{ label: 'gbase', value: 'gbase' },
{ label: 'oceanbase', value: 'oceanbase' },
{ label: 'h2', value: 'h2' }
]
},
colProps: { span: 24 }
},
{
field: 'dbVersion',
label: t('数据库版本'),
component: 'Input',
colProps: { span: 24 }
},
{
field: 'host',
label: t('链接'),
required: true,
component: 'InputTextArea',
colProps: { span: 24 }
},
{
field: 'username',
label: t('账号'),
component: 'Input',
required: true,
colProps: { span: 24 }
},
{
field: 'password',
label: t('密码'),
component: 'InputPassword',
componentProps: {
visibilityToggle: true
},
required: true,
colProps: { span: 24 }
}
];
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const loading = ref(false);
const { notification } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const loading = ref(false);
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: accountFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false, width: '40%' });
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false, width: '40%' });
isUpdate.value = !!data?.isUpdate;
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.id;
console.log(rowId.value);
const record = await getDatabaseLink(data.id);
if (unref(isUpdate)) {
rowId.value = data.id;
console.log(rowId.value);
const record = await getDatabaseLink(data.id);
setFieldsValue({
...record,
});
setFieldsValue({
...record
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增数据库链接') : t('编辑数据库链接')));
const handleTest = async () => {
const values = await validate();
console.log('handleTest');
const ok = await testDatabaseLink(values);
loading.value = true;
if (!ok) {
notification.error({
message: t('提示'),
type: 'warning',
description: t('未能连接上数据库')
}); //提示消息
} else {
notification.success({
message: t('提示'),
description: t('成功')
}); //提示消息
}
loading.value = false;
};
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addDatabaseLink(values);
notification.success({
message: t('提示'),
description: t('数据库连接新增成功！')
}); //提示消息
} else {
values.id = unref(rowId);
await updateDatabaseLink(values);
notification.success({
message: t('提示'),
description: t('数据库连接修改成功！')
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增数据库链接') : t('编辑数据库链接')));
const handleTest = async () => {
const values = await validate();
console.log('handleTest');
const ok = await testDatabaseLink(values);
loading.value = true;
if (!ok) {
notification.error({
message: t('提示'),
type: 'warning',
description: t('未能连接上数据库'),
}); //提示消息
} else {
notification.success({
message: t('提示'),
description: t('成功'),
}); //提示消息
}
loading.value = false;
};
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addDatabaseLink(values);
notification.success({
message: t('提示'),
description: t('数据库连接新增成功！'),
}); //提示消息
} else {
values.id = unref(rowId);
await updateDatabaseLink(values);
notification.success({
message: t('提示'),
description: t('数据库连接修改成功！'),
}); //提示消息
}
closeModal();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>

270
src/views/dataconfig/databaselink/index.vue
View File

@ -1,148 +1,146 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'databaselink:add'">{{
t('新增')
}}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'databaselink:edit',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
auth: 'databaselink:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</BasicTable>
<DatabaseLinkModal @register="registerModal" @success="handleSuccess" :width="800" />
</PageWrapper>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate" v-auth="'databaselink:add'">{{ t('新增') }}</a-button>
</template>
<template #action="{ record }">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
auth: 'databaselink:edit',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
auth: 'databaselink:delete',
color: 'error',
popConfirm: {
title: t('是否确认删除'),
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</BasicTable>
<DatabaseLinkModal @register="registerModal" @success="handleSuccess" :width="800" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { deleteDatabaseLink, getDatabaselinkPage } from '/@/api/system/databaselink';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import DatabaseLinkModal from './components/DatabaseLinkModal.vue';
// import DeptTree from './components/DeptTree.vue';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('数据库名称'),
component: 'Input',
colProps: { xs: 16, md: 8 },
componentProps: {
placeholder: t('请输入数据库名称'),
},
},
];
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
import { deleteDatabaseLink, getDatabaselinkPage } from '/@/api/system/databaselink';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import DatabaseLinkModal from './components/DatabaseLinkModal.vue';
// import DeptTree from './components/DeptTree.vue';
const { t } = useI18n();
const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('数据库名称'),
component: 'Input',
colProps: { xs: 16, md: 8 },
componentProps: {
placeholder: t('请输入数据库名称')
}
}
];
const columns: BasicColumn[] = [
{
title: t('数据库名称'),
dataIndex: 'dbName',
width: '15%',
sorter: true,
align: 'left',
},
const columns: BasicColumn[] = [
{
title: t('数据库名称'),
dataIndex: 'dbName',
width: '15%',
sorter: true,
align: 'left'
},
{
title: t('数据库类型'),
dataIndex: 'dbType',
width: '15%',
sorter: true,
align: 'left',
},
{
title: t('数据库版本'),
dataIndex: 'dbVersion',
width: '15%',
sorter: true,
align: 'left',
},
// {
// title: '驱动',
// dataIndex: 'driver',
// width: 180,
// sorter: true,
// },
{
title: t('链接'),
dataIndex: 'host',
sorter: true,
align: 'left',
},
];
{
title: t('数据库类型'),
dataIndex: 'dbType',
width: '15%',
sorter: true,
align: 'left'
},
{
title: t('数据库版本'),
dataIndex: 'dbVersion',
width: '15%',
sorter: true,
align: 'left'
},
// {
// title: '驱动',
// dataIndex: 'driver',
// width: 180,
// sorter: true,
// },
{
title: t('链接'),
dataIndex: 'host',
sorter: true,
align: 'left'
}
];
const { notification } = useMessage();
const { notification } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('数据库链接'),
api: getDatabaselinkPage,
rowKey: 'id',
columns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false,
},
useSearchForm: true,
striped: false,
showTableSetting: true,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
function handleCreate() {
openModal(true, {
isUpdate: false,
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('数据库链接'),
api: getDatabaselinkPage,
rowKey: 'id',
columns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
useSearchForm: true,
striped: false,
showTableSetting: true,
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true,
});
}
function handleCreate() {
openModal(true, {
isUpdate: false
});
}
function handleDelete(record: Recordable) {
deleteDatabaseLink([record.id]).then((_) => {
reload();
notification.success({
message: t('提示'),
description: t('删除成功'),
}); //提示消息
});
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true
});
}
function handleSuccess() {
reload();
}
function handleDelete(record: Recordable) {
deleteDatabaseLink([record.id]).then((_) => {
reload();
notification.success({
message: t('提示'),
description: t('删除成功')
}); //提示消息
});
}
function handleSuccess() {
reload();
}
</script>

252
src/views/dataconfig/liteFlow/components/liteFLowModal.vue
View File

@ -1,142 +1,134 @@
<template>
<BasicModal
v-bind="$attrs"
destroyOnClose
@register="registerDrawer"
showFooter
:title="getTitle"
width="40%"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
</BasicModal>
<BasicModal v-bind="$attrs" destroyOnClose @register="registerDrawer" showFooter :title="getTitle" width="40%" @ok="handleSubmit">
<BasicForm @register="registerForm" :style="{ 'margin-right': '10px' }" />
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { addLiteflow, updateLiteflow } from '/@/api/liteflow/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const formSchema: FormSchema[] = [
{
field: 'applicationName',
label: t('应用名称'),
component: 'Input',
required: true,
componentProps: {
placeholder: t('请输入应用名称'),
},
colProps: { lg: 24, md: 24 },
},
import { addLiteflow, updateLiteflow } from '/@/api/liteflow/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const formSchema: FormSchema[] = [
{
field: 'applicationName',
label: t('应用名称'),
component: 'Input',
required: true,
componentProps: {
placeholder: t('请输入应用名称')
},
colProps: { lg: 24, md: 24 }
},
{
field: 'chainName',
label: t('规则名称'),
component: 'Input',
required: true,
componentProps: {
placeholder: t('请输入规则名称'),
},
colProps: { lg: 24, md: 24 },
},
{
field: 'elData',
label: t('执行规则'),
component: 'CodeTextArea',
required: true,
componentProps: {
rows: 8,
placeholder: t('请输入执行规则，例如：THEN(a,WHEN(b, c, d),e);'),
},
colProps: { lg: 24, md: 24 },
},
{
field: 'chainDesc',
label: t('备注'),
component: 'InputTextArea',
componentProps: {
placeholder: t('请输入备注'),
},
colProps: { lg: 24, md: 24 },
},
];
export default defineComponent({
name: 'LogModal',
components: {
BasicModal,
BasicForm,
},
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
const { notification } = useMessage();
const rowId = ref('');
const { t } = useI18n();
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { lg: 12, md: 24 },
});
const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.id;
setFieldsValue({
...data.record,
});
{
field: 'chainName',
label: t('规则名称'),
component: 'Input',
required: true,
componentProps: {
placeholder: t('请输入规则名称')
},
colProps: { lg: 24, md: 24 }
},
{
field: 'elData',
label: t('执行规则'),
component: 'CodeTextArea',
required: true,
componentProps: {
rows: 8,
placeholder: t('请输入执行规则，例如：THEN(a,WHEN(b, c, d),e);')
},
colProps: { lg: 24, md: 24 }
},
{
field: 'chainDesc',
label: t('备注'),
component: 'InputTextArea',
componentProps: {
placeholder: t('请输入备注')
},
colProps: { lg: 24, md: 24 }
}
});
];
const getTitle = computed(() => (!unref(isUpdate) ? t('新增规则') : t('编辑规则')));
export default defineComponent({
name: 'LogModal',
components: {
BasicModal,
BasicForm
},
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
const { notification } = useMessage();
const rowId = ref('');
async function handleSubmit() {
try {
const values = await validate();
const { t } = useI18n();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addLiteflow(values);
notification.success({
message: t('提示'),
description: t('新增成功'),
}); //提示消息
} else {
values.id = rowId.value;
await updateLiteflow(values);
notification.success({
message: t('提示'),
description: t('编辑成功'),
}); //提示消息
}
closeModal();
emit('success');
} catch (error) {
setModalProps({ confirmLoading: false });
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: { lg: 12, md: 24 }
});
const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.id;
setFieldsValue({
...data.record
});
}
});
const getTitle = computed(() => (!unref(isUpdate) ? t('新增规则') : t('编辑规则')));
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
// TODO custom api
if (!unref(isUpdate)) {
//false 新增
await addLiteflow(values);
notification.success({
message: t('提示'),
description: t('新增成功')
}); //提示消息
} else {
values.id = rowId.value;
await updateLiteflow(values);
notification.success({
message: t('提示'),
description: t('编辑成功')
}); //提示消息
}
closeModal();
emit('success');
} catch (error) {
setModalProps({ confirmLoading: false });
}
}
return {
registerDrawer,
registerForm,
getTitle,
handleSubmit,
t
};
}
}
return {
registerDrawer,
registerForm,
getTitle,
handleSubmit,
t,
};
},
});
});
</script>
<style scoped></style>

280
src/views/dataconfig/liteFlow/index.vue
View File

@ -1,156 +1,156 @@
<template>
<PageWrapper dense fixedHeight contentFullHeight>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
ifShow: record.code !== 'chinese',
popConfirm: {
title: t('是否确认删除？'),
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
<LgTypeDrawer @register="registerDrawer" @success="handleSuccess" />
</PageWrapper>
<PageWrapper dense fixedHeight contentFullHeight>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate"> {{ t('新增') }} </a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, record)
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
ifShow: record.code !== 'chinese',
popConfirm: {
title: t('是否确认删除？'),
confirm: handleDelete.bind(null, record)
}
}
]"
/>
</template>
</template>
</BasicTable>
<LgTypeDrawer @register="registerDrawer" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import LgTypeDrawer from './components/liteFLowModal.vue';
import { useModal } from '/@/components/Modal';
import LgTypeDrawer from './components/liteFLowModal.vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { useMessage } from '/@/hooks/web/useMessage';
import { PageWrapper } from '/@/components/Page';
import { getLiteflowPage, deleteLiteflow } from '/@/api/liteflow/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const columns: BasicColumn[] = [
{
title: t('规则名称'),
dataIndex: 'chainName',
align: 'left',
},
{
title: t('应用名称'),
dataIndex: 'applicationName',
align: 'left',
},
{
title: t('备注'),
dataIndex: 'chainDesc',
align: 'left',
},
{
title: t('创建时间'),
dataIndex: 'createTime',
align: 'left',
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('关键字'),
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: t('请输入规则名称或应用名称'),
},
},
];
export default defineComponent({
name: 'TaskLog',
components: { BasicTable, LgTypeDrawer, TableAction, PageWrapper },
setup() {
const { notification } = useMessage();
const [registerDrawer, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('规则管理列表'),
api: getLiteflowPage,
columns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false,
import { PageWrapper } from '/@/components/Page';
import { getLiteflowPage, deleteLiteflow } from '/@/api/liteflow/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const columns: BasicColumn[] = [
{
title: t('规则名称'),
dataIndex: 'chainName',
align: 'left'
},
useSearchForm: true,
showTableSetting: true,
striped: false,
pagination: {
hideOnSinglePage: true,
{
title: t('应用名称'),
dataIndex: 'applicationName',
align: 'left'
},
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
{
title: t('备注'),
dataIndex: 'chainDesc',
align: 'left'
},
tableSetting: {
size: false,
setting: false,
},
});
{
title: t('创建时间'),
dataIndex: 'createTime',
align: 'left'
}
];
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
export const searchFormSchema: FormSchema[] = [
{
field: 'keyword',
label: t('关键字'),
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: t('请输入规则名称或应用名称')
}
}
];
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
export default defineComponent({
name: 'TaskLog',
components: { BasicTable, LgTypeDrawer, TableAction, PageWrapper },
setup() {
const { notification } = useMessage();
function handleDelete(record: Recordable) {
deleteLiteflow([record.id]).then((_) => {
reload();
notification.success({
message: t('提示'),
description: t('删除成功'),
}); //提示消息
});
}
const [registerDrawer, { openModal }] = useModal();
function handleSuccess() {
reload();
}
const [registerTable, { reload }] = useTable({
title: t('规则管理列表'),
api: getLiteflowPage,
columns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
useSearchForm: true,
showTableSetting: true,
striped: false,
pagination: {
hideOnSinglePage: true
},
actionColumn: {
width: 80,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
return {
registerTable,
registerDrawer,
handleCreate,
handleEdit,
handleDelete,
handleSuccess,
t,
};
},
});
function handleCreate() {
openModal(true, {
isUpdate: false
});
}
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true
});
}
function handleDelete(record: Recordable) {
deleteLiteflow([record.id]).then((_) => {
reload();
notification.success({
message: t('提示'),
description: t('删除成功')
}); //提示消息
});
}
function handleSuccess() {
reload();
}
return {
registerTable,
registerDrawer,
handleCreate,
handleEdit,
handleDelete,
handleSuccess,
t
};
}
});
</script>

244
src/views/dataconfig/oaNews/components/NewsModal.vue
View File

@ -1,142 +1,134 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
@cancel="handleClose"
:paddingRight="15"
:bodyStyle="{ minHeight: '400px !important' }"
>
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { add, getInfo, edit } from '/@/api/system/oa';
import { ref, computed, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { add, getInfo, edit } from '/@/api/system/oa';
import { formProps } from './newsConfig';
import { cloneDeep } from 'lodash-es';
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { OaType } from '../../../../enums/oa';
import { formProps } from './newsConfig';
import { cloneDeep } from 'lodash-es';
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { OaType } from '../../../../enums/oa';
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const { filterFormSchemaAuth } = usePermission();
const formRef = ref();
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
const state = reactive({
formModel: {},
isUpdate: true,
isView: false,
isCopy: false,
rowId: '',
});
const { t } = useI18n();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
state.isUpdate = !!data?.isUpdate;
state.isView = !!data?.isView;
state.isCopy = !!data?.isCopy;
setModalProps({
destroyOnClose: true,
maskClosable: false,
showCancelBtn: !state.isView,
showOkBtn: !state.isView,
canFullscreen: true,
width: 800,
const { notification } = useMessage();
const { filterFormSchemaAuth } = usePermission();
const formRef = ref();
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
const state = reactive({
formModel: {},
isUpdate: true,
isView: false,
isCopy: false,
rowId: ''
});
const viewformProps = cloneDeep(formProps);
setDisabled(viewformProps.schemas);
formRef.value.setProps(state.isView ? viewformProps : formProps);
if (state.isUpdate || state.isView || state.isCopy) {
state.rowId = data.id;
const record = await getInfo(data.id);
formRef.value.setFieldsValue(record);
} else {
formRef.value.resetFields();
}
});
const { t } = useI18n();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
state.isUpdate = !!data?.isUpdate;
state.isView = !!data?.isView;
state.isCopy = !!data?.isCopy;
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
setModalProps({
destroyOnClose: true,
maskClosable: false,
showCancelBtn: !state.isView,
showOkBtn: !state.isView,
canFullscreen: true,
width: 800
});
const viewformProps = cloneDeep(formProps);
setDisabled(viewformProps.schemas);
formRef.value.setProps(state.isView ? viewformProps : formProps);
function setDisabled(schemas) {
const layoutComponents = ['tab', 'grid', 'card'];
schemas?.map((info) => {
if (layoutComponents.includes(info.type!)) {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
if (layoutComponents.includes(com.type)) {
setDisabled(childInfo.list);
if (state.isUpdate || state.isView || state.isCopy) {
state.rowId = data.id;
const record = await getInfo(data.id);
formRef.value.setFieldsValue(record);
} else {
formRef.value.resetFields();
}
});
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
function setDisabled(schemas) {
const layoutComponents = ['tab', 'grid', 'card'];
schemas?.map((info) => {
if (layoutComponents.includes(info.type!)) {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
if (layoutComponents.includes(com.type)) {
setDisabled(childInfo.list);
} else {
com.dynamicDisabled = true;
}
});
});
} else if (info.type == 'table-layout') {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
com.children.map((el) => {
if (layoutComponents.includes(el.type) || el.type == 'table-layout') {
setDisabled(com.children);
} else {
el.dynamicDisabled = true;
}
});
});
});
} else if (info.type == 'one-for-one') {
setDisabled(info.componentProps.childSchemas);
} else {
com.dynamicDisabled = true;
info.dynamicDisabled = true;
}
});
});
} else if (info.type == 'table-layout') {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
com.children.map((el) => {
if (layoutComponents.includes(el.type) || el.type == 'table-layout') {
setDisabled(com.children);
} else {
el.dynamicDisabled = true;
}
});
});
});
} else if (info.type == 'one-for-one') {
setDisabled(info.componentProps.childSchemas);
} else {
info.dynamicDisabled = true;
}
});
}
async function handleSubmit() {
try {
let values = await formRef.value?.validate();
//添加隐藏组件
if (formProps.hiddenComponent?.length) {
formProps.hiddenComponent.forEach((component) => {
values[component.bindField] = component.value;
});
}
setModalProps({ confirmLoading: true });
values = { ...values, typeId: OaType.NEWS };
// TODO custom api
if (!state.isUpdate || state.isCopy) {
//false 新增
await add(values);
notification.success({
message: 'Tip',
description: t('新增成功！'),
}); //提示消息
} else {
values.id = state.rowId;
await edit(values);
notification.success({
message: 'Tip',
description: t('修改成功！'),
}); //提示消息
}
closeModal();
formRef.value.resetFields();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
function handleClose() {
formRef.value.resetFields();
}
async function handleSubmit() {
try {
let values = await formRef.value?.validate();
//添加隐藏组件
if (formProps.hiddenComponent?.length) {
formProps.hiddenComponent.forEach((component) => {
values[component.bindField] = component.value;
});
}
setModalProps({ confirmLoading: true });
values = { ...values, typeId: OaType.NEWS };
// TODO custom api
if (!state.isUpdate || state.isCopy) {
//false 新增
await add(values);
notification.success({
message: 'Tip',
description: t('新增成功！')
}); //提示消息
} else {
values.id = state.rowId;
await edit(values);
notification.success({
message: 'Tip',
description: t('修改成功！')
}); //提示消息
}
closeModal();
formRef.value.resetFields();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
function handleClose() {
formRef.value.resetFields();
}
</script>

244
src/views/dataconfig/oaNews/components/NoticesModal.vue
View File

@ -1,142 +1,134 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
@cancel="handleClose"
:paddingRight="15"
:bodyStyle="{ minHeight: '400px !important' }"
>
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
<SimpleForm ref="formRef" :formProps="formProps" :formModel="state.formModel" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { add, getInfo, edit } from '/@/api/system/oa';
import { ref, computed, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { add, getInfo, edit } from '/@/api/system/oa';
import { formProps } from './noticesConfig';
import { cloneDeep } from 'lodash-es';
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { OaType } from '/@/enums/oa';
import { formProps } from './noticesConfig';
import { cloneDeep } from 'lodash-es';
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
import { OaType } from '/@/enums/oa';
const emit = defineEmits(['success', 'register']);
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const { filterFormSchemaAuth } = usePermission();
const formRef = ref();
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
const state = reactive({
formModel: {},
isUpdate: true,
isView: false,
isCopy: false,
rowId: '',
});
const { t } = useI18n();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
state.isUpdate = !!data?.isUpdate;
state.isView = !!data?.isView;
state.isCopy = !!data?.isCopy;
setModalProps({
destroyOnClose: true,
maskClosable: false,
showCancelBtn: !state.isView,
showOkBtn: !state.isView,
canFullscreen: true,
width: 600,
const { notification } = useMessage();
const { filterFormSchemaAuth } = usePermission();
const formRef = ref();
formProps.schemas = filterFormSchemaAuth(formProps.schemas!);
const state = reactive({
formModel: {},
isUpdate: true,
isView: false,
isCopy: false,
rowId: ''
});
const viewformProps = cloneDeep(formProps);
setDisabled(viewformProps.schemas);
formRef.value.setProps(state.isView ? viewformProps : formProps);
if (state.isUpdate || state.isView || state.isCopy) {
state.rowId = data.id;
const record = await getInfo(data.id);
formRef.value.setFieldsValue(record);
} else {
formRef.value.resetFields();
}
});
const { t } = useI18n();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
state.isUpdate = !!data?.isUpdate;
state.isView = !!data?.isView;
state.isCopy = !!data?.isCopy;
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
setModalProps({
destroyOnClose: true,
maskClosable: false,
showCancelBtn: !state.isView,
showOkBtn: !state.isView,
canFullscreen: true,
width: 600
});
const viewformProps = cloneDeep(formProps);
setDisabled(viewformProps.schemas);
formRef.value.setProps(state.isView ? viewformProps : formProps);
function setDisabled(schemas) {
const layoutComponents = ['tab', 'grid', 'card'];
schemas?.map((info) => {
if (layoutComponents.includes(info.type!)) {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
if (layoutComponents.includes(com.type)) {
setDisabled(childInfo.list);
if (state.isUpdate || state.isView || state.isCopy) {
state.rowId = data.id;
const record = await getInfo(data.id);
formRef.value.setFieldsValue(record);
} else {
formRef.value.resetFields();
}
});
const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
function setDisabled(schemas) {
const layoutComponents = ['tab', 'grid', 'card'];
schemas?.map((info) => {
if (layoutComponents.includes(info.type!)) {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
if (layoutComponents.includes(com.type)) {
setDisabled(childInfo.list);
} else {
com.dynamicDisabled = true;
}
});
});
} else if (info.type == 'table-layout') {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
com.children.map((el) => {
if (layoutComponents.includes(el.type) || el.type == 'table-layout') {
setDisabled(com.children);
} else {
el.dynamicDisabled = true;
}
});
});
});
} else if (info.type == 'one-for-one') {
setDisabled(info.componentProps.childSchemas);
} else {
com.dynamicDisabled = true;
info.dynamicDisabled = true;
}
});
});
} else if (info.type == 'table-layout') {
info.children?.map((childInfo) => {
childInfo.list.map((com) => {
com.children.map((el) => {
if (layoutComponents.includes(el.type) || el.type == 'table-layout') {
setDisabled(com.children);
} else {
el.dynamicDisabled = true;
}
});
});
});
} else if (info.type == 'one-for-one') {
setDisabled(info.componentProps.childSchemas);
} else {
info.dynamicDisabled = true;
}
});
}
async function handleSubmit() {
try {
let values = await formRef.value?.validate();
//添加隐藏组件
if (formProps.hiddenComponent?.length) {
formProps.hiddenComponent.forEach((component) => {
values[component.bindField] = component.value;
});
}
setModalProps({ confirmLoading: true });
values = { ...values, typeId: OaType.NOTICE };
// TODO custom api
if (!state.isUpdate || state.isCopy) {
//false 新增
await add(values);
notification.success({
message: 'Tip',
description: t('新增成功！'),
}); //提示消息
} else {
values.id = state.rowId;
await edit(values);
notification.success({
message: 'Tip',
description: t('修改成功！'),
}); //提示消息
}
closeModal();
formRef.value.resetFields();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
function handleClose() {
formRef.value.resetFields();
}
async function handleSubmit() {
try {
let values = await formRef.value?.validate();
//添加隐藏组件
if (formProps.hiddenComponent?.length) {
formProps.hiddenComponent.forEach((component) => {
values[component.bindField] = component.value;
});
}
setModalProps({ confirmLoading: true });
values = { ...values, typeId: OaType.NOTICE };
// TODO custom api
if (!state.isUpdate || state.isCopy) {
//false 新增
await add(values);
notification.success({
message: 'Tip',
description: t('新增成功！')
}); //提示消息
} else {
values.id = state.rowId;
await edit(values);
notification.success({
message: 'Tip',
description: t('修改成功！')
}); //提示消息
}
closeModal();
formRef.value.resetFields();
emit('success');
} finally {
setModalProps({ confirmLoading: false });
}
}
function handleClose() {
formRef.value.resetFields();
}
</script>

104
src/views/dataconfig/oaNews/components/View.vue
View File

@ -1,69 +1,61 @@
<template>
<div class="box">
<div class="tag-box">
<div class="tag-item"
><span class="tag-title"> {{ props.viewData?.releaseTime }}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{ props.viewData?.categoryName }}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{
props.viewData?.typeId == OaType.NEWS
? '作者：' + props.viewData?.authorName
: '信息来源：' + props.viewData?.sourceName
}}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{
props.viewData?.typeId == OaType.NEWS
? '编辑：' + props.viewData?.compileName
: '信息地址：' + props.viewData?.sourceAddress
}}</span></div
>
<div class="box">
<div class="tag-box">
<div class="tag-item"
><span class="tag-title"> {{ props.viewData?.releaseTime }}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{ props.viewData?.categoryName }}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{ props.viewData?.typeId == OaType.NEWS ? '作者：' + props.viewData?.authorName : '信息来源：' + props.viewData?.sourceName }}</span></div
>
<div class="tag-item"><span class="tag-title hr"> |</span></div>
<div class="tag-item"
><span class="tag-title">{{ props.viewData?.typeId == OaType.NEWS ? '编辑：' + props.viewData?.compileName : '信息地址：' + props.viewData?.sourceAddress }}</span></div
>
</div>
<div class="content-box">
<div class="content" v-html="props.viewData?.newsContent"> </div>
</div>
</div>
<div class="content-box">
<div class="content" v-html="props.viewData?.newsContent"> </div>
</div>
</div>
</template>
<script setup lang="ts">
import { OaType } from '../../../../enums/oa';
const props = defineProps({
viewData: {
type: Object as PropType<any>,
},
});
import { OaType } from '../../../../enums/oa';
const props = defineProps({
viewData: {
type: Object as PropType<any>
}
});
</script>
<style scoped>
.box {
padding: 10px;
}
.box {
padding: 10px;
}
.tag-box {
margin-bottom: 10px;
display: flex;
}
.tag-box {
margin-bottom: 10px;
display: flex;
}
.tag-item .tag-title {
font-size: 12px;
color: #a8a8a8;
}
.tag-item .tag-title {
font-size: 12px;
color: #a8a8a8;
}
.tag-item .hr {
margin: 0 10px;
}
.tag-item .hr {
margin: 0 10px;
}
.content-box {
color: #000;
background-color: #f7f7f7;
padding: 20px;
font-size: 14px;
height: 440px;
}
.content-box {
color: #000;
background-color: #f7f7f7;
padding: 20px;
font-size: 14px;
height: 440px;
}
</style>

480
src/views/dataconfig/oaNews/news.vue
View File

@ -1,269 +1,253 @@
<template>
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<template v-for="button in tableButtonConfig" :key="button.code">
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
<a-button v-else type="primary">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<TableAction :actions="getActions(record)" />
</template>
</template>
</BasicTable>
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<template v-for="button in tableButtonConfig" :key="button.code">
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
<a-button v-else type="primary">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<TableAction :actions="getActions(record)" />
</template>
</template>
</BasicTable>
<NewsModal @register="registerModal" @success="handleSuccess" />
<ModalPanel
:visible="viewOpen"
:width="800"
:title="viewData.briefHead"
@submit="handleViewClose"
@close="handleViewClose"
>
<ViewModal v-if="viewOpen" :viewData="viewData" />
</ModalPanel>
</PageWrapper>
<NewsModal @register="registerModal" @success="handleSuccess" />
<ModalPanel :visible="viewOpen" :width="800" :title="viewData.briefHead" @submit="handleViewClose" @close="handleViewClose">
<ViewModal v-if="viewOpen" :viewData="viewData" />
</ModalPanel>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, computed, createVNode } from 'vue';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
import { getList, deleteOa, changeStatus } from '/@/api/system/oa';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useRouter } from 'vue-router';
import { ref, computed, createVNode } from 'vue';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
import { getList, deleteOa, changeStatus } from '/@/api/system/oa';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useRouter } from 'vue-router';
import { useModal } from '/@/components/Modal';
import { useModal } from '/@/components/Modal';
import NewsModal from './components/NewsModal.vue';
import ViewModal from './components/View.vue';
import { searchFormSchema, columns } from './components/newsConfig';
import Icon from '/@/components/Icon/index';
import { OaType } from '../../../enums/oa';
import NewsModal from './components/NewsModal.vue';
import ViewModal from './components/View.vue';
import { searchFormSchema, columns } from './components/newsConfig';
import Icon from '/@/components/Icon/index';
import { OaType } from '../../../enums/oa';
const { notification } = useMessage();
const { t } = useI18n();
defineEmits(['register']);
const { filterColumnAuth, filterButtonAuth } = usePermission();
const viewOpen = ref(false);
const viewData: Recordable = ref({});
const filterColumns = filterColumnAuth(columns);
const { notification } = useMessage();
const { t } = useI18n();
defineEmits(['register']);
const { filterColumnAuth, filterButtonAuth } = usePermission();
const viewOpen = ref(false);
const viewData: Recordable = ref({});
const filterColumns = filterColumnAuth(columns);
//展示在列表内的按钮
const actionButtons = ref<string[]>([
'view',
'edit',
'status',
'copyData',
'delete',
'startwork',
]);
const buttonConfigs = computed(() => {
const list = [
{
isUse: true,
name: '刷新',
code: 'refresh',
icon: 'ant-design:reload-outlined',
isDefault: true,
},
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
{
isUse: true,
name: '编辑',
code: 'edit',
icon: 'ant-design:form-outlined',
isDefault: true,
},
{
isUse: true,
name: '发布',
code: 'status',
icon: 'ant-design:heat-map-outlined',
isDefault: false,
},
{
isUse: true,
name: '删除',
code: 'delete',
icon: 'ant-design:delete-outlined',
isDefault: true,
},
];
return filterButtonAuth(list);
});
const tableButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
});
const actionButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
});
const btnEvent = {
refresh: handleRefresh,
view: handleView,
add: handleAdd,
edit: handleEdit,
delete: handleDelete,
status: handlePublic,
};
const { currentRoute } = useRouter();
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '新闻列表',
api: getList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false,
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, type: OaType.NEWS, PK: 'id' };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
function buttonClick(code) {
btnEvent[code]();
}
function handleAdd() {
openModal(true, {
isUpdate: false,
//展示在列表内的按钮
const actionButtons = ref<string[]>(['view', 'edit', 'status', 'copyData', 'delete', 'startwork']);
const buttonConfigs = computed(() => {
const list = [
{
isUse: true,
name: '刷新',
code: 'refresh',
icon: 'ant-design:reload-outlined',
isDefault: true
},
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
{
isUse: true,
name: '编辑',
code: 'edit',
icon: 'ant-design:form-outlined',
isDefault: true
},
{
isUse: true,
name: '发布',
code: 'status',
icon: 'ant-design:heat-map-outlined',
isDefault: false
},
{
isUse: true,
name: '删除',
code: 'delete',
icon: 'ant-design:delete-outlined',
isDefault: true
}
];
return filterButtonAuth(list);
});
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true,
const tableButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
});
}
async function handlePublic(record: Recordable) {
try {
await changeStatus(record.id);
notification.success({
message: 'Tip',
description: t('成功！'),
}); //提示消息
handleSuccess();
} catch (error) {
notification.error({
message: 'Tip',
description: t('失败！'),
}); //提示消息
const actionButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
});
const btnEvent = {
refresh: handleRefresh,
view: handleView,
add: handleAdd,
edit: handleEdit,
delete: handleDelete,
status: handlePublic
};
const { currentRoute } = useRouter();
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '新闻列表',
api: getList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, type: OaType.NEWS, PK: 'id' };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
function buttonClick(code) {
btnEvent[code]();
}
}
function handleDelete(record: Recordable) {
deleteList([record.id]);
}
function deleteList(ids) {
Modal.confirm({
title: '提示信息',
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认删除？',
okText: '确认',
cancelText: '取消',
onOk() {
deleteOa(ids).then((_) => {
handleSuccess();
notification.success({
message: 'Tip',
description: t('删除成功！'),
});
function handleAdd() {
openModal(true, {
isUpdate: false
});
},
onCancel() {},
});
}
}
function handleRefresh() {
reload();
}
function handleSuccess() {
reload();
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true
});
}
async function handlePublic(record: Recordable) {
try {
await changeStatus(record.id);
notification.success({
message: 'Tip',
description: t('成功！')
}); //提示消息
handleSuccess();
} catch (error) {
notification.error({
message: 'Tip',
description: t('失败！')
}); //提示消息
}
}
function handleDelete(record: Recordable) {
deleteList([record.id]);
}
function handleView(record: Recordable) {
viewData.value = record;
viewOpen.value = true;
}
function handleViewClose() {
viewOpen.value = false;
}
function getActions(record: Recordable): ActionItem[] {
const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
if (button.code === 'status') {
return {
icon:
record.enabledMark === 0
? 'ant-design:upload-outlined'
: 'ant-design:download-outlined',
name: record.enabledMark === 0 ? '发布' : '下架',
tooltip: record.enabledMark === 0 ? '发布' : '下架',
onClick: btnEvent[button.code].bind(null, record),
};
} else {
return {
icon: button?.icon,
tooltip: button?.name,
color: button.code === 'delete' ? 'error' : undefined,
onClick: btnEvent[button.code].bind(null, record),
};
}
});
return actionsList;
}
function deleteList(ids) {
Modal.confirm({
title: '提示信息',
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认删除？',
okText: '确认',
cancelText: '取消',
onOk() {
deleteOa(ids).then((_) => {
handleSuccess();
notification.success({
message: 'Tip',
description: t('删除成功！')
});
});
},
onCancel() {}
});
}
function handleRefresh() {
reload();
}
function handleSuccess() {
reload();
}
function handleView(record: Recordable) {
viewData.value = record;
viewOpen.value = true;
}
function handleViewClose() {
viewOpen.value = false;
}
function getActions(record: Recordable): ActionItem[] {
const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
if (button.code === 'status') {
return {
icon: record.enabledMark === 0 ? 'ant-design:upload-outlined' : 'ant-design:download-outlined',
name: record.enabledMark === 0 ? '发布' : '下架',
tooltip: record.enabledMark === 0 ? '发布' : '下架',
onClick: btnEvent[button.code].bind(null, record)
};
} else {
return {
icon: button?.icon,
tooltip: button?.name,
color: button.code === 'delete' ? 'error' : undefined,
onClick: btnEvent[button.code].bind(null, record)
};
}
});
return actionsList;
}
</script>
<style lang="less" scoped>
:deep(.ant-table-selection-col) {
width: 50px;
}
:deep(.ant-table-selection-col) {
width: 50px;
}
.show {
display: flex;
}
.show {
display: flex;
}
.hide {
display: none !important;
}
.hide {
display: none !important;
}
</style>

480
src/views/dataconfig/oaNews/notices.vue
View File

@ -1,270 +1,254 @@
<template>
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<template v-for="button in tableButtonConfig" :key="button.code">
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
<a-button v-else type="primary">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<TableAction :actions="getActions(record)" />
</template>
</template>
</BasicTable>
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<template v-for="button in tableButtonConfig" :key="button.code">
<a-button v-if="button.isDefault" type="primary" @click="buttonClick(button.code)">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
<a-button v-else type="primary">
<template #icon><Icon :icon="button.icon" /></template>
{{ button.name }}
</a-button>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<TableAction :actions="getActions(record)" />
</template>
</template>
</BasicTable>
<NoticesModal @register="registerModal" @success="handleSuccess" />
<ModalPanel
:visible="viewOpen"
:width="800"
:title="viewData.briefHead"
@submit="handleViewClose"
@close="handleViewClose"
>
<ViewModal v-if="viewOpen" :viewData="viewData" />
</ModalPanel>
</PageWrapper>
<NoticesModal @register="registerModal" @success="handleSuccess" />
<ModalPanel :visible="viewOpen" :width="800" :title="viewData.briefHead" @submit="handleViewClose" @close="handleViewClose">
<ViewModal v-if="viewOpen" :viewData="viewData" />
</ModalPanel>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref, computed, createVNode } from 'vue';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
import { getList, deleteOa, changeStatus } from '/@/api/system/oa';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useRouter } from 'vue-router';
import { ref, computed, createVNode } from 'vue';
import { ModalPanel } from '/@/components/ModalPanel/index';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
import { getList, deleteOa, changeStatus } from '/@/api/system/oa';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { usePermission } from '/@/hooks/web/usePermission';
import { useRouter } from 'vue-router';
import { useModal } from '/@/components/Modal';
import { useModal } from '/@/components/Modal';
import NoticesModal from './components/NoticesModal.vue';
import ViewModal from './components/View.vue';
import { searchFormSchema, columns } from './components/noticesConfig';
import Icon from '/@/components/Icon/index';
import { OaType } from '../../../enums/oa';
import NoticesModal from './components/NoticesModal.vue';
import ViewModal from './components/View.vue';
import { searchFormSchema, columns } from './components/noticesConfig';
import Icon from '/@/components/Icon/index';
import { OaType } from '../../../enums/oa';
const { notification } = useMessage();
const { t } = useI18n();
const viewOpen = ref(false);
const viewData: Recordable = ref({});
defineEmits(['register']);
const { filterColumnAuth, filterButtonAuth } = usePermission();
const { notification } = useMessage();
const { t } = useI18n();
const viewOpen = ref(false);
const viewData: Recordable = ref({});
defineEmits(['register']);
const { filterColumnAuth, filterButtonAuth } = usePermission();
const filterColumns = filterColumnAuth(columns);
const filterColumns = filterColumnAuth(columns);
//展示在列表内的按钮
const actionButtons = ref<string[]>([
'view',
'edit',
'status',
'copyData',
'delete',
'startwork',
]);
const buttonConfigs = computed(() => {
const list = [
{
isUse: true,
name: '刷新',
code: 'refresh',
icon: 'ant-design:reload-outlined',
isDefault: true,
},
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
{
isUse: true,
name: '编辑',
code: 'edit',
icon: 'ant-design:form-outlined',
isDefault: true,
},
{
isUse: true,
name: '发布',
code: 'status',
icon: 'ant-design:heat-map-outlined',
isDefault: false,
},
{
isUse: true,
name: '删除',
code: 'delete',
icon: 'ant-design:delete-outlined',
isDefault: true,
},
];
return filterButtonAuth(list);
});
const tableButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
});
const actionButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
});
const btnEvent = {
refresh: handleRefresh,
view: handleView,
add: handleAdd,
edit: handleEdit,
delete: handleDelete,
status: handlePublic,
};
const { currentRoute } = useRouter();
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '通知公告列表',
api: getList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
showResetButton: false,
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, type: OaType.NOTICE, PK: 'id' };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
function buttonClick(code) {
btnEvent[code]();
}
function handleAdd() {
openModal(true, {
isUpdate: false,
//展示在列表内的按钮
const actionButtons = ref<string[]>(['view', 'edit', 'status', 'copyData', 'delete', 'startwork']);
const buttonConfigs = computed(() => {
const list = [
{
isUse: true,
name: '刷新',
code: 'refresh',
icon: 'ant-design:reload-outlined',
isDefault: true
},
{ isUse: true, name: '查看', code: 'view', icon: 'ant-design:eye-outlined', isDefault: true },
{ isUse: true, name: '新增', code: 'add', icon: 'ant-design:plus-outlined', isDefault: true },
{
isUse: true,
name: '编辑',
code: 'edit',
icon: 'ant-design:form-outlined',
isDefault: true
},
{
isUse: true,
name: '发布',
code: 'status',
icon: 'ant-design:heat-map-outlined',
isDefault: false
},
{
isUse: true,
name: '删除',
code: 'delete',
icon: 'ant-design:delete-outlined',
isDefault: true
}
];
return filterButtonAuth(list);
});
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true,
const tableButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
});
}
async function handlePublic(record: Recordable) {
try {
await changeStatus(record.id);
notification.success({
message: 'Tip',
description: t('成功！'),
}); //提示消息
handleSuccess();
} catch (error) {
notification.error({
message: 'Tip',
description: t('失败！'),
}); //提示消息
const actionButtonConfig = computed(() => {
return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
});
const btnEvent = {
refresh: handleRefresh,
view: handleView,
add: handleAdd,
edit: handleEdit,
delete: handleDelete,
status: handlePublic
};
const { currentRoute } = useRouter();
const formIdComputedRef = computed(() => currentRoute.value.meta.formId as string);
const [registerModal, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: '通知公告列表',
api: getList,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
showResetButton: false
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, type: OaType.NOTICE, PK: 'id' };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
function buttonClick(code) {
btnEvent[code]();
}
}
function handleDelete(record: Recordable) {
deleteList([record.id]);
}
function deleteList(ids) {
Modal.confirm({
title: '提示信息',
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认删除？',
okText: '确认',
cancelText: '取消',
onOk() {
deleteOa(ids).then((_) => {
handleSuccess();
notification.success({
message: 'Tip',
description: t('删除成功！'),
});
function handleAdd() {
openModal(true, {
isUpdate: false
});
},
onCancel() {},
});
}
}
function handleRefresh() {
reload();
}
function handleSuccess() {
reload();
}
function handleEdit(record: Recordable) {
openModal(true, {
id: record.id,
isUpdate: true
});
}
async function handlePublic(record: Recordable) {
try {
await changeStatus(record.id);
notification.success({
message: 'Tip',
description: t('成功！')
}); //提示消息
handleSuccess();
} catch (error) {
notification.error({
message: 'Tip',
description: t('失败！')
}); //提示消息
}
}
function handleDelete(record: Recordable) {
deleteList([record.id]);
}
function handleView(record: Recordable) {
viewData.value = record;
viewOpen.value = true;
}
function handleViewClose() {
viewOpen.value = false;
}
function getActions(record: Recordable): ActionItem[] {
const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
if (button.code === 'status') {
return {
icon:
record.enabledMark === 0
? 'ant-design:upload-outlined'
: 'ant-design:download-outlined',
name: record.enabledMark === 0 ? '发布' : '下架',
tooltip: record.enabledMark === 0 ? '发布' : '下架',
onClick: btnEvent[button.code].bind(null, record),
};
} else {
return {
icon: button?.icon,
tooltip: button?.name,
color: button.code === 'delete' ? 'error' : undefined,
onClick: btnEvent[button.code].bind(null, record),
};
}
});
return actionsList;
}
function deleteList(ids) {
Modal.confirm({
title: '提示信息',
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认删除？',
okText: '确认',
cancelText: '取消',
onOk() {
deleteOa(ids).then((_) => {
handleSuccess();
notification.success({
message: 'Tip',
description: t('删除成功！')
});
});
},
onCancel() {}
});
}
function handleRefresh() {
reload();
}
function handleSuccess() {
reload();
}
function handleView(record: Recordable) {
viewData.value = record;
viewOpen.value = true;
}
function handleViewClose() {
viewOpen.value = false;
}
function getActions(record: Recordable): ActionItem[] {
const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
if (button.code === 'status') {
return {
icon: record.enabledMark === 0 ? 'ant-design:upload-outlined' : 'ant-design:download-outlined',
name: record.enabledMark === 0 ? '发布' : '下架',
tooltip: record.enabledMark === 0 ? '发布' : '下架',
onClick: btnEvent[button.code].bind(null, record)
};
} else {
return {
icon: button?.icon,
tooltip: button?.name,
color: button.code === 'delete' ? 'error' : undefined,
onClick: btnEvent[button.code].bind(null, record)
};
}
});
return actionsList;
}
</script>
<style lang="less" scoped>
:deep(.ant-table-selection-col) {
width: 50px;
}
:deep(.ant-table-selection-col) {
width: 50px;
}
.show {
display: flex;
}
.show {
display: flex;
}
.hide {
display: none !important;
}
.hide {
display: none !important;
}
</style>

259
src/views/dataconfig/schedule/components/ScheduleModal.vue
View File

@ -1,148 +1,143 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle">
<BasicForm @register="registerForm" />
<template #footer>
<a-button @click="closeModal">取消</a-button>
<a-button type="danger" v-if="eventId" @click="handleDelete">删除</a-button>
<a-button type="primary" @click="handleSubmit">确定</a-button>
</template>
</BasicModal>
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle">
<BasicForm @register="registerForm" />
<template #footer>
<a-button @click="closeModal">取消</a-button>
<a-button type="danger" v-if="eventId" @click="handleDelete">删除</a-button>
<a-button type="primary" @click="handleSubmit">确定</a-button>
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import {
addSchedule,
updateSchedule,
getScheduleInfo,
deleteSchedule,
} from '/@/api/system/schedule';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { formatToDateTime } from '/@/utils/dateUtil';
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { FormSchema } from '/@/components/Table';
import { addSchedule, updateSchedule, getScheduleInfo, deleteSchedule } from '/@/api/system/schedule';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { formatToDateTime } from '/@/utils/dateUtil';
const { t } = useI18n();
const FormSchema: FormSchema[] = [
{
field: 'startDate',
label: '开始时间',
component: 'DatePicker',
required: true,
colProps: { span: 12 },
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
style: { width: '100%' },
getPopupContainer: () => document.body,
},
},
{
field: 'endDate',
label: '结束时间',
component: 'DatePicker',
colProps: { span: 12 },
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
style: { width: '100%' },
getPopupContainer: () => document.body,
},
dynamicRules: ({ model }) => {
return [
{
const { t } = useI18n();
const FormSchema: FormSchema[] = [
{
field: 'startDate',
label: '开始时间',
component: 'DatePicker',
required: true,
validator: () => {
if (formatToDateTime(model.endDate) < formatToDateTime(model.startDate)) {
return Promise.reject();
}
return Promise.resolve();
colProps: { span: 12 },
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
style: { width: '100%' },
getPopupContainer: () => document.body
}
},
{
field: 'endDate',
label: '结束时间',
component: 'DatePicker',
colProps: { span: 12 },
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
style: { width: '100%' },
getPopupContainer: () => document.body
},
message: t('结束时间不能小于开始时间'),
trigger: 'change',
},
];
},
},
{
field: 'scheduleContent',
label: '日程内容',
component: 'InputTextArea',
required: true,
colProps: { span: 24 },
componentProps: {
placeholder: '请输入日程内容',
},
},
];
dynamicRules: ({ model }) => {
return [
{
required: true,
validator: () => {
if (formatToDateTime(model.endDate) < formatToDateTime(model.startDate)) {
return Promise.reject();
}
return Promise.resolve();
},
message: t('结束时间不能小于开始时间'),
trigger: 'change'
}
];
}
},
{
field: 'scheduleContent',
label: '日程内容',
component: 'InputTextArea',
required: true,
colProps: { span: 24 },
componentProps: {
placeholder: '请输入日程内容'
}
}
];
const { notification } = useMessage();
const eventId = ref('');
const emit = defineEmits(['success', 'register']);
const { notification } = useMessage();
const eventId = ref('');
const emit = defineEmits(['success', 'register']);
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: FormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false, destroyOnClose: true, width: 800 });
eventId.value = data.eventId;
if (unref(eventId)) {
const record = await getScheduleInfo(eventId.value);
setFieldsValue({
...record,
});
} else {
setFieldsValue({
startDate: data.date,
endDate: data.date,
});
}
});
const getTitle = computed(() => (!unref(eventId) ? '新增' : '编辑'));
const handleDelete = async () => {
await deleteSchedule([eventId.value]);
closeModal();
emit('success');
notification.success({
message: '删除',
description: t('成功'),
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: FormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23
}
});
};
const handleSubmit = async () => {
try {
const values = await validate();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false, destroyOnClose: true, width: 800 });
eventId.value = data.eventId;
setModalProps({ confirmLoading: true });
if (unref(eventId)) {
const record = await getScheduleInfo(eventId.value);
setFieldsValue({
...record
});
} else {
setFieldsValue({
startDate: data.date,
endDate: data.date
});
}
});
if (!unref(eventId)) {
await addSchedule(values);
const getTitle = computed(() => (!unref(eventId) ? '新增' : '编辑'));
const handleDelete = async () => {
await deleteSchedule([eventId.value]);
closeModal();
emit('success');
notification.success({
message: '新增',
description: t('成功'),
message: '删除',
description: t('成功')
});
} else {
values.id = eventId.value;
await updateSchedule(values);
notification.success({
message: '编辑',
description: t('成功'),
});
}
};
closeModal();
emit('success');
} catch (error) {
setModalProps({ confirmLoading: false });
}
};
const handleSubmit = async () => {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
if (!unref(eventId)) {
await addSchedule(values);
notification.success({
message: '新增',
description: t('成功')
});
} else {
values.id = eventId.value;
await updateSchedule(values);
notification.success({
message: '编辑',
description: t('成功')
});
}
closeModal();
emit('success');
} catch (error) {
setModalProps({ confirmLoading: false });
}
};
</script>

118
src/views/dataconfig/schedule/index.vue
View File

@ -1,73 +1,73 @@
<template>
<div class="schedule-box">
<FullCalendar :options="scheduleData" />
<ScheduleModal @register="registerModal" @success="handleSuccess" />
</div>
<div class="schedule-box">
<FullCalendar :options="scheduleData" />
<ScheduleModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarOptions } from '@fullcalendar/core';
import { getScheduleList } from '/@/api/system/schedule';
import ScheduleModal from './components/ScheduleModal.vue';
import { useModal } from '/@/components/Modal';
import { onMounted, ref } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarOptions } from '@fullcalendar/core';
import { getScheduleList } from '/@/api/system/schedule';
import ScheduleModal from './components/ScheduleModal.vue';
import { useModal } from '/@/components/Modal';
const handleDateClick = (day) => {
openModal(true, { date: day.dateStr });
};
const handleDateClick = (day) => {
openModal(true, { date: day.dateStr });
};
const handleEventClick = ({ event }) => {
openModal(true, { eventId: event.id });
};
const [registerModal, { openModal }] = useModal();
const handleEventClick = ({ event }) => {
openModal(true, { eventId: event.id });
};
const [registerModal, { openModal }] = useModal();
const scheduleData = ref<CalendarOptions>({
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
dateClick: handleDateClick,
eventClick: handleEventClick,
locale: 'zh-cn',
themeSystem: '#000',
headerToolbar: {
left: '',
center: 'prev,title,next',
right: '',
},
events: [],
});
const scheduleData = ref<CalendarOptions>({
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
dateClick: handleDateClick,
eventClick: handleEventClick,
locale: 'zh-cn',
themeSystem: '#000',
headerToolbar: {
left: '',
center: 'prev,title,next',
right: ''
},
events: []
});
onMounted(() => {
handleSuccess();
});
onMounted(() => {
handleSuccess();
});
const handleSuccess = async () => {
scheduleData.value.events = await getScheduleList();
};
const handleSuccess = async () => {
scheduleData.value.events = await getScheduleList();
};
</script>
<style lang="less" scoped>
:deep(.fc-toolbar-chunk) > div {
display: flex;
}
:deep(.fc-toolbar-chunk) > div {
display: flex;
}
:deep(.fc-button),
:deep(.fc-button:active),
:deep(.fc-button:hover) {
background-color: #fff !important;
border: none !important;
color: #000 !important;
box-shadow: none !important;
}
:deep(.fc-button),
:deep(.fc-button:active),
:deep(.fc-button:hover) {
background-color: #fff !important;
border: none !important;
color: #000 !important;
box-shadow: none !important;
}
:deep(.fc-direction-ltr) {
background: #fff;
}
:deep(.fc-direction-ltr) {
background: #fff;
}
.schedule-box {
margin: 10px;
padding: 10px;
background-color: #fff;
}
.schedule-box {
margin: 10px;
padding: 10px;
background-color: #fff;
}
</style>