songjianet
3 years ago
committed by
GitHub
24 changed files with 853 additions and 82 deletions
@ -0,0 +1,53 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
.search-card { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.box { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
width: 300px; |
||||
|
||||
button { |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-card { |
||||
margin-top: 8px; |
||||
|
||||
.pagination { |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
|
||||
.links { |
||||
color: #2080f0; |
||||
text-decoration: none; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
@ -0,0 +1,196 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, onMounted, ref, toRefs, reactive } from 'vue' |
||||
import { |
||||
NCard, |
||||
NButton, |
||||
NInput, |
||||
NIcon, |
||||
NDataTable, |
||||
NPagination, |
||||
} from 'naive-ui' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useTable } from './use-table' |
||||
import styles from './index.module.scss' |
||||
import Card from '@/components/card' |
||||
import ProjectModal from './project-modal' |
||||
|
||||
const list = defineComponent({ |
||||
name: 'list', |
||||
setup() { |
||||
const showModalRef = ref(false) |
||||
const modelStatusRef = ref(0) |
||||
const { t } = useI18n() |
||||
const { variables, getTableData } = useTable() |
||||
let updateProjectData = reactive({ |
||||
code: 0, |
||||
projectName: '', |
||||
description: '', |
||||
}) |
||||
|
||||
const requestData = () => { |
||||
getTableData({ |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
searchVal: variables.searchVal, |
||||
}) |
||||
} |
||||
|
||||
const onCancel = () => { |
||||
showModalRef.value = false |
||||
} |
||||
|
||||
const onConfirm = () => { |
||||
showModalRef.value = false |
||||
updateProjectData = { |
||||
code: 0, |
||||
projectName: '', |
||||
description: '', |
||||
} |
||||
resetTableData() |
||||
} |
||||
|
||||
const onOpen = () => { |
||||
modelStatusRef.value = 0 |
||||
showModalRef.value = true |
||||
} |
||||
|
||||
const resetTableData = () => { |
||||
getTableData({ |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
searchVal: variables.searchVal, |
||||
}) |
||||
} |
||||
|
||||
const onUpdatePageSize = () => { |
||||
variables.page = 1 |
||||
resetTableData() |
||||
} |
||||
|
||||
const updateProjectItem = ( |
||||
code: number, |
||||
projectName: string, |
||||
description: string |
||||
) => { |
||||
modelStatusRef.value = 1 |
||||
showModalRef.value = true |
||||
updateProjectData.code = code |
||||
updateProjectData.projectName = projectName |
||||
updateProjectData.description = description |
||||
} |
||||
|
||||
onMounted(() => { |
||||
requestData() |
||||
}) |
||||
|
||||
return { |
||||
t, |
||||
showModalRef, |
||||
...toRefs(variables), |
||||
onCancel, |
||||
onConfirm, |
||||
onOpen, |
||||
updateProjectItem, |
||||
resetTableData, |
||||
onUpdatePageSize, |
||||
updateProjectData, |
||||
modelStatusRef, |
||||
} |
||||
}, |
||||
render() { |
||||
const { |
||||
t, |
||||
showModalRef, |
||||
onCancel, |
||||
onConfirm, |
||||
onOpen, |
||||
updateProjectItem, |
||||
resetTableData, |
||||
onUpdatePageSize, |
||||
updateProjectData, |
||||
modelStatusRef, |
||||
} = this |
||||
const { columns } = useTable(updateProjectItem, resetTableData) |
||||
|
||||
return ( |
||||
<div> |
||||
<NCard> |
||||
<div class={styles['search-card']}> |
||||
<div> |
||||
<NButton size='small' type='primary' onClick={onOpen}> |
||||
{t('project.list.create_project')} |
||||
</NButton> |
||||
</div> |
||||
<div class={styles.box}> |
||||
<NInput |
||||
size='small' |
||||
v-model:value={this.searchVal} |
||||
placeholder={t('project.list.project_tips')} |
||||
/> |
||||
<NButton size='small' type='primary' onClick={resetTableData}> |
||||
{{ |
||||
icon: () => ( |
||||
<NIcon> |
||||
<SearchOutlined /> |
||||
</NIcon> |
||||
), |
||||
}} |
||||
</NButton> |
||||
</div> |
||||
</div> |
||||
</NCard> |
||||
<Card |
||||
title={t('project.list.project_list')} |
||||
class={styles['table-card']} |
||||
> |
||||
<NDataTable |
||||
columns={columns} |
||||
size={'small'} |
||||
data={this.tableData} |
||||
striped |
||||
/> |
||||
<div class={styles.pagination}> |
||||
<NPagination |
||||
v-model:page={this.page} |
||||
v-model:page-size={this.pageSize} |
||||
page-count={this.totalPage} |
||||
show-size-picker |
||||
page-sizes={[10, 30, 50]} |
||||
show-quick-jumper |
||||
onUpdatePage={resetTableData} |
||||
onUpdatePageSize={onUpdatePageSize} |
||||
/> |
||||
</div> |
||||
</Card> |
||||
{showModalRef && ( |
||||
<ProjectModal |
||||
show={showModalRef} |
||||
onCancel={onCancel} |
||||
onConfirm={onConfirm} |
||||
data={updateProjectData} |
||||
status={modelStatusRef} |
||||
/> |
||||
)} |
||||
</div> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default list |
||||
@ -0,0 +1,111 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType, toRefs, onMounted } from 'vue' |
||||
import { NForm, NFormItem, NInput } from 'naive-ui' |
||||
import { useForm } from './use-form' |
||||
import Modal from '@/components/modal' |
||||
import { createProject, updateProject } from '@/service/modules/projects' |
||||
|
||||
const props = { |
||||
show: { |
||||
type: Boolean as PropType<boolean>, |
||||
default: false, |
||||
}, |
||||
data: { |
||||
type: Object as PropType<any>, |
||||
}, |
||||
status: { |
||||
type: Number as PropType<number>, |
||||
default: 0, |
||||
}, |
||||
} |
||||
|
||||
const ProjectModal = defineComponent({ |
||||
name: 'ProjectModal', |
||||
props, |
||||
emits: ['confirm', 'cancel'], |
||||
setup(props, { emit }) { |
||||
const { state, t } = useForm() |
||||
|
||||
onMounted(() => { |
||||
if (props.status === 1) { |
||||
state.projectForm.projectName = props.data.projectName |
||||
state.projectForm.description = props.data.description |
||||
} |
||||
}) |
||||
|
||||
const onConfirm = () => { |
||||
;(props.status === 1 |
||||
? updateProject(state.projectForm, props.data.code) |
||||
: createProject(state.projectForm) |
||||
).then(() => { |
||||
emit('confirm') |
||||
}) |
||||
} |
||||
|
||||
const onCancel = () => { |
||||
state.projectForm.projectName = '' |
||||
state.projectForm.description = '' |
||||
state.projectForm.userName = '' |
||||
emit('cancel') |
||||
} |
||||
|
||||
return { ...toRefs(state), t, onConfirm, onCancel } |
||||
}, |
||||
render() { |
||||
const { t, onConfirm, onCancel, show } = this |
||||
return ( |
||||
<Modal |
||||
title={t('project.list.create_project')} |
||||
show={show} |
||||
onConfirm={onConfirm} |
||||
onCancel={onCancel} |
||||
confirmDisabled={ |
||||
!this.projectForm.projectName || !this.projectForm.userName |
||||
} |
||||
> |
||||
<NForm rules={this.rules} ref='projectFormRef'> |
||||
<NFormItem label={t('project.list.project_name')} path='projectName'> |
||||
<NInput |
||||
v-model={[this.projectForm.projectName, 'value']} |
||||
placeholder={t('project.list.project_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('project.list.owned_users')} path='userName'> |
||||
<NInput |
||||
v-model={[this.projectForm.userName, 'value']} |
||||
placeholder={t('project.list.username_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('project.list.project_description')} |
||||
path='description' |
||||
> |
||||
<NInput |
||||
v-model={[this.projectForm.description, 'value']} |
||||
type='textarea' |
||||
placeholder={t('project.list.description_tips')} |
||||
/> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default ProjectModal |
||||
@ -0,0 +1,145 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { NSpace, NTooltip, NButton, NIcon, NPopconfirm } from 'naive-ui' |
||||
import { DeleteOutlined, EditOutlined, InfoCircleFilled } from '@vicons/antd' |
||||
import { deleteProject } from '@/service/modules/projects' |
||||
import type { ProjectList } from '@/service/modules/projects/types' |
||||
|
||||
interface ProjectRow extends ProjectList { |
||||
index: number |
||||
} |
||||
|
||||
const props = { |
||||
row: { |
||||
type: Object as PropType<ProjectRow>, |
||||
default: {}, |
||||
}, |
||||
} |
||||
|
||||
const TableAction = defineComponent({ |
||||
name: 'TableAction', |
||||
props, |
||||
emits: ['resetTableData', 'updateProjectItem'], |
||||
setup(props, { emit }) { |
||||
const { t } = useI18n() |
||||
|
||||
const handleEditProject = ( |
||||
code: number, |
||||
projectName: string, |
||||
description: string |
||||
) => { |
||||
emit('updateProjectItem', code, projectName, description) |
||||
} |
||||
|
||||
const handleDeleteProject = (code: number) => { |
||||
deleteProject(code).then(() => { |
||||
emit('resetTableData') |
||||
}) |
||||
} |
||||
|
||||
return { t, handleEditProject, handleDeleteProject } |
||||
}, |
||||
render() { |
||||
const { t, handleEditProject, handleDeleteProject } = this |
||||
|
||||
return ( |
||||
<NSpace> |
||||
<NTooltip trigger={'hover'}> |
||||
{{ |
||||
default: () => t('project.list.edit'), |
||||
trigger: () => ( |
||||
<NButton |
||||
size='small' |
||||
type='info' |
||||
tag='div' |
||||
onClick={() => |
||||
handleEditProject( |
||||
this.row.code, |
||||
this.row.name, |
||||
this.row.description |
||||
) |
||||
} |
||||
circle |
||||
> |
||||
<NIcon> |
||||
<EditOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
), |
||||
}} |
||||
</NTooltip> |
||||
<NTooltip trigger={'hover'}> |
||||
{{ |
||||
default: () => t('project.list.edit'), |
||||
trigger: () => ( |
||||
<NButton |
||||
size='small' |
||||
type='info' |
||||
tag='div' |
||||
onClick={() => |
||||
handleEditProject( |
||||
this.row.code, |
||||
this.row.name, |
||||
this.row.description |
||||
) |
||||
} |
||||
circle |
||||
> |
||||
<NIcon> |
||||
<EditOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
), |
||||
}} |
||||
</NTooltip> |
||||
<NTooltip trigger={'hover'}> |
||||
{{ |
||||
default: () => t('project.list.delete'), |
||||
trigger: () => ( |
||||
<NButton size='small' type='error' circle> |
||||
<NPopconfirm |
||||
positive-text={t('project.list.confirm')} |
||||
negative-text={t('project.list.cancel')} |
||||
onPositiveClick={() => handleDeleteProject(this.row.code)} |
||||
> |
||||
{{ |
||||
default: () => t('project.list.delete_confirm'), |
||||
icon: () => ( |
||||
<NIcon> |
||||
<InfoCircleFilled /> |
||||
</NIcon> |
||||
), |
||||
trigger: () => ( |
||||
<NIcon> |
||||
<DeleteOutlined /> |
||||
</NIcon> |
||||
), |
||||
}} |
||||
</NPopconfirm> |
||||
</NButton> |
||||
), |
||||
}} |
||||
</NTooltip> |
||||
</NSpace> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default TableAction |
||||
@ -0,0 +1,58 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { useI18n } from 'vue-i18n' |
||||
import { reactive, ref } from 'vue' |
||||
import { useUserStore } from '@/store/user/user' |
||||
import type { FormRules } from 'naive-ui' |
||||
import type { UserInfoRes } from '@/service/modules/users/types' |
||||
|
||||
export function useForm() { |
||||
const { t } = useI18n() |
||||
const userStore = useUserStore() |
||||
|
||||
const state = reactive({ |
||||
projectFormRef: ref(), |
||||
projectForm: { |
||||
projectName: '', |
||||
description: '', |
||||
userName: (userStore.getUserInfo as UserInfoRes).userName, |
||||
}, |
||||
rules: { |
||||
projectName: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (state.projectForm.projectName === '') { |
||||
return new Error(t('project.list.project_tips')) |
||||
} |
||||
}, |
||||
}, |
||||
userName: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (state.projectForm.userName === '') { |
||||
return new Error(t('project.list.username_tips')) |
||||
} |
||||
}, |
||||
}, |
||||
} as FormRules, |
||||
}) |
||||
|
||||
return { state, t } |
||||
} |
||||
@ -0,0 +1,112 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { h, reactive, ref } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useAsyncState } from '@vueuse/core' |
||||
import { queryProjectListPaging } from '@/service/modules/projects' |
||||
import { format } from 'date-fns' |
||||
import TableAction from './table-action' |
||||
import styles from './index.module.scss' |
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||
import type { ProjectRes } from '@/service/modules/projects/types' |
||||
|
||||
export function useTable( |
||||
updateProjectItem = ( |
||||
code: number, |
||||
name: string, |
||||
description: string |
||||
): void => {}, |
||||
resetTableData = () => {} |
||||
) { |
||||
const { t } = useI18n() |
||||
|
||||
const columns: TableColumns<any> = [ |
||||
{ title: '#', key: 'index' }, |
||||
{ |
||||
title: t('project.list.project_name'), |
||||
key: 'name', |
||||
render: (row) => |
||||
h( |
||||
'a', |
||||
{ |
||||
class: styles.links, |
||||
onClick: () => {}, |
||||
}, |
||||
{ |
||||
default: () => { |
||||
return row.name |
||||
}, |
||||
} |
||||
), |
||||
}, |
||||
{ title: t('project.list.owned_users'), key: 'userName' }, |
||||
{ title: t('project.list.workflow_define_count'), key: 'defCount' }, |
||||
{ |
||||
title: t('project.list.process_instance_running_count'), |
||||
key: 'instRunningCount', |
||||
}, |
||||
{ title: t('project.list.description'), key: 'description' }, |
||||
{ title: t('project.list.create_time'), key: 'createTime' }, |
||||
{ title: t('project.list.update_time'), key: 'updateTime' }, |
||||
{ |
||||
title: t('project.list.operation'), |
||||
key: 'actions', |
||||
render: (row: any) => |
||||
h(TableAction, { |
||||
row, |
||||
onResetTableData: () => resetTableData(), |
||||
onUpdateProjectItem: (code, name, description) => |
||||
updateProjectItem(code, name, description), |
||||
}), |
||||
}, |
||||
] |
||||
|
||||
const variables = reactive({ |
||||
tableData: [], |
||||
page: ref(1), |
||||
pageSize: ref(10), |
||||
searchVal: ref(null), |
||||
totalPage: ref(1), |
||||
}) |
||||
|
||||
const getTableData = (params: any) => { |
||||
const { state } = useAsyncState( |
||||
queryProjectListPaging(params).then((res: ProjectRes) => { |
||||
variables.totalPage = res.totalPage |
||||
variables.tableData = res.totalList.map((item, index) => { |
||||
item.createTime = format( |
||||
new Date(item.createTime), |
||||
'yyyy-MM-dd HH:mm:ss' |
||||
) |
||||
item.updateTime = format( |
||||
new Date(item.updateTime), |
||||
'yyyy-MM-dd HH:mm:ss' |
||||
) |
||||
return { |
||||
index: index + 1, |
||||
...item, |
||||
} |
||||
}) as any |
||||
}), |
||||
{} |
||||
) |
||||
return state |
||||
} |
||||
|
||||
return { getTableData, variables, columns } |
||||
} |
||||
Loading…
Reference in new issue