初始化
This commit is contained in:
@@ -0,0 +1,214 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { markRaw, onMounted, ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElAvatar,
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import defaultAvatar from '#/assets/defaultUserAvatar.png';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysAccountModal from './SysAccountModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
initDict();
|
||||
});
|
||||
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const dictStore = useDictStore();
|
||||
const headerButtons = [
|
||||
{
|
||||
key: 'create',
|
||||
text: $t('button.add'),
|
||||
icon: markRaw(Plus),
|
||||
type: 'primary',
|
||||
data: { action: 'create' },
|
||||
permission: '/api/v1/sysAccount/save',
|
||||
},
|
||||
];
|
||||
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('dataStatus');
|
||||
}
|
||||
const handleSearch = (params: string) => {
|
||||
pageDataRef.value.setQuery({ loginName: params, isQueryOr: true });
|
||||
};
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysAccount/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
function isAdmin(data: any) {
|
||||
return data?.accountType === 1 || data?.accountType === 99;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysAccountModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch
|
||||
:buttons="headerButtons"
|
||||
@search="handleSearch"
|
||||
@button-click="showDialog({})"
|
||||
/>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysAccount/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn
|
||||
prop="avatar"
|
||||
align="center"
|
||||
:label="$t('sysAccount.avatar')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<ElAvatar :src="row.avatar || defaultAvatar" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="loginName"
|
||||
align="center"
|
||||
:label="$t('sysAccount.loginName')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.loginName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="nickname"
|
||||
align="center"
|
||||
:label="$t('sysAccount.nickname')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.nickname }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="mobile"
|
||||
align="center"
|
||||
width="120"
|
||||
:label="$t('sysAccount.mobile')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.mobile }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="email"
|
||||
align="center"
|
||||
width="200"
|
||||
:label="$t('sysAccount.email')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.email }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="status"
|
||||
align="center"
|
||||
:label="$t('sysAccount.status')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('dataStatus', row.status) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="created"
|
||||
width="160"
|
||||
:label="$t('sysAccount.created')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" :label="$t('sysAccount.remark')">
|
||||
<template #default="{ row }">
|
||||
{{ row.remark }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3" v-if="!isAdmin(row)">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<div v-access:code="'/api/v1/sysAccount/remove'">
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton type="danger" :icon="Delete" link>
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
// import Cropper from '#/components/upload/Cropper.vue';
|
||||
import UploadAvatar from '#/components/upload/UploadAvatar.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
deptId: '',
|
||||
loginName: '',
|
||||
password: '',
|
||||
accountType: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
avatar: '',
|
||||
dataScope: '',
|
||||
deptIdList: '',
|
||||
status: '',
|
||||
remark: '',
|
||||
positionIds: [],
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({
|
||||
deptId: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
loginName: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
nickname: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysAccount/save' : 'api/v1/sysAccount/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="avatar" :label="$t('sysAccount.avatar')">
|
||||
<!-- <Cropper v-model="entity.avatar" crop /> -->
|
||||
<UploadAvatar v-model="entity.avatar" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="deptId" :label="$t('sysAccount.deptId')">
|
||||
<DictSelect v-model="entity.deptId" dict-code="sysDept" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="loginName" :label="$t('sysAccount.loginName')">
|
||||
<ElInput v-model.trim="entity.loginName" />
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="isAdd"
|
||||
prop="password"
|
||||
:label="$t('sysAccount.password')"
|
||||
>
|
||||
<ElInput v-model.trim="entity.password" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="nickname" :label="$t('sysAccount.nickname')">
|
||||
<ElInput v-model.trim="entity.nickname" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="mobile" :label="$t('sysAccount.mobile')">
|
||||
<ElInput v-model.trim="entity.mobile" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="email" :label="$t('sysAccount.email')">
|
||||
<ElInput v-model.trim="entity.email" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="status" :label="$t('sysAccount.status')">
|
||||
<DictSelect v-model="entity.status" dict-code="dataStatus" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysAccount.remark')">
|
||||
<ElInput v-model.trim="entity.remark" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="roleIds" :label="$t('sysAccount.roleIds')">
|
||||
<DictSelect multiple v-model="entity.roleIds" dict-code="sysRole" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="positionIds" :label="$t('sysAccount.positionIds')">
|
||||
<DictSelect multiple v-model="entity.positionIds" dict-code="sysPosition" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
196
easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue
Normal file
196
easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElIcon,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysDeptModal from './SysDeptModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
getTree();
|
||||
initDict();
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const treeData = ref([]);
|
||||
const loading = ref(false);
|
||||
const saveDialog = ref();
|
||||
const formInline = ref({
|
||||
deptName: '',
|
||||
});
|
||||
const dictStore = useDictStore();
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('dataStatus');
|
||||
}
|
||||
function search(formEl: FormInstance | undefined) {
|
||||
formEl?.validate((valid) => {
|
||||
if (valid) {
|
||||
getTree();
|
||||
}
|
||||
});
|
||||
}
|
||||
function reset(formEl: FormInstance | undefined) {
|
||||
formEl?.resetFields();
|
||||
getTree();
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysDept/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset(formRef.value);
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
function getTree() {
|
||||
loading.value = true;
|
||||
api
|
||||
.get('/api/v1/sysDept/list', {
|
||||
params: {
|
||||
asTree: true,
|
||||
...formInline.value,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
treeData.value = res.data;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-1.5 p-6">
|
||||
<SysDeptModal ref="saveDialog" @reload="reset" />
|
||||
<div class="flex items-center justify-between">
|
||||
<ElForm ref="formRef" :inline="true" :model="formInline">
|
||||
<ElFormItem prop="deptName" class="!mr-3">
|
||||
<ElInput
|
||||
class="search-input"
|
||||
v-model="formInline.deptName"
|
||||
:placeholder="$t('sysDept.deptName')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton @click="search(formRef)" type="primary">
|
||||
{{ $t('button.query') }}
|
||||
</ElButton>
|
||||
<ElButton @click="reset(formRef)">
|
||||
{{ $t('button.reset') }}
|
||||
</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="handle-div">
|
||||
<ElButton
|
||||
v-access:code="'/api/v1/sysDept/save'"
|
||||
@click="showDialog({})"
|
||||
type="primary"
|
||||
>
|
||||
<ElIcon class="mr-1">
|
||||
<Plus />
|
||||
</ElIcon>
|
||||
{{ $t('button.add') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<ElTable :data="treeData" row-key="id" v-loading="loading" border>
|
||||
<ElTableColumn prop="deptName" :label="$t('sysDept.deptName')">
|
||||
<template #default="{ row }">
|
||||
{{ row.deptName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="deptCode" :label="$t('sysDept.deptCode')">
|
||||
<template #default="{ row }">
|
||||
{{ row.deptCode }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="sortNo" :label="$t('sysDept.sortNo')">
|
||||
<template #default="{ row }">
|
||||
{{ row.sortNo }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysDept.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" :label="$t('sysDept.remark')">
|
||||
<template #default="{ row }">
|
||||
{{ row.remark }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('common.handle')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton link :icon="Delete" type="danger">
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-input {
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
144
easyflow-ui-admin/app/src/views/system/sysDept/SysDeptModal.vue
Normal file
144
easyflow-ui-admin/app/src/views/system/sysDept/SysDeptModal.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
parentId: '',
|
||||
ancestors: '',
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
sortNo: '',
|
||||
status: '',
|
||||
remark: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({
|
||||
parentId: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
deptName: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysDept/save' : 'api/v1/sysDept/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="parentId" :label="$t('sysDept.parentId')">
|
||||
<DictSelect
|
||||
:disabled="entity.deptCode === 'root_dept'"
|
||||
:extra-options="[{ label: $t('sysDept.root'), value: 0 }]"
|
||||
v-model="entity.parentId"
|
||||
dict-code="sysDept"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="deptName" :label="$t('sysDept.deptName')">
|
||||
<ElInput v-model.trim="entity.deptName" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="deptCode" :label="$t('sysDept.deptCode')">
|
||||
<ElInput
|
||||
:disabled="entity.deptCode === 'root_dept'"
|
||||
v-model.trim="entity.deptCode"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="sortNo" :label="$t('sysDept.sortNo')">
|
||||
<ElInput v-model.trim="entity.sortNo" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysDept.remark')">
|
||||
<ElInput v-model.trim="entity.remark" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { IconifyIcon } from '@easyflow/icons';
|
||||
|
||||
import { ArrowLeft, Check } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDescriptions,
|
||||
ElDescriptionsItem,
|
||||
ElLink,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
import { tryit } from 'radash';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import { $t } from '#/locales';
|
||||
import { router } from '#/router';
|
||||
|
||||
const feedbackTypeOptions = [
|
||||
{
|
||||
value: 1,
|
||||
label: $t('sysFeedback.functionalFailure'),
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: $t('sysFeedback.optimizationSuggestions'),
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: $t('sysFeedback.accountIssue'),
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: $t('sysFeedback.other'),
|
||||
},
|
||||
];
|
||||
const statusType: Record<number, any> = {
|
||||
0: {
|
||||
label: $t('sysFeedback.notViewed'),
|
||||
type: 'warning',
|
||||
},
|
||||
1: {
|
||||
label: $t('sysFeedback.viewed'),
|
||||
type: 'primary',
|
||||
},
|
||||
2: {
|
||||
label: $t('sysFeedback.processed'),
|
||||
type: 'success',
|
||||
},
|
||||
3: {
|
||||
label: $t('sysFeedback.closed/Invalid'),
|
||||
type: 'info',
|
||||
},
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
const feedback = ref();
|
||||
const status = ref(0);
|
||||
const loading = reactive<Record<string, boolean>>({
|
||||
markRead: false,
|
||||
markResolved: false,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (route.params.id) {
|
||||
const [, res] = await tryit(api.get)('/api/v1/sysUserFeedback/detail', {
|
||||
params: { id: route.params.id },
|
||||
});
|
||||
|
||||
if (res && res.errorCode === 0) {
|
||||
feedback.value = res.data;
|
||||
status.value = res.data.status;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getFeedbackType(type: number) {
|
||||
const option = feedbackTypeOptions.find((option) => option.value === type);
|
||||
return option?.label;
|
||||
}
|
||||
async function markStatus(_status: number) {
|
||||
const key = _status === 1 ? 'markRead' : 'markResolved';
|
||||
loading[key] = true;
|
||||
|
||||
const [, res] = await tryit(api.post)('/api/v1/sysUserFeedback/update', {
|
||||
...feedback.value,
|
||||
status: _status,
|
||||
});
|
||||
|
||||
if (res && res.errorCode === 0) {
|
||||
status.value = _status;
|
||||
ElMessage.success($t('sysFeedback.markedSuccessfully'));
|
||||
}
|
||||
loading[key] = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative p-5">
|
||||
<ElButton
|
||||
class="absolute left-5 top-5"
|
||||
:icon="ArrowLeft"
|
||||
@click="router.back()"
|
||||
>
|
||||
{{ $t('button.back') }}
|
||||
</ElButton>
|
||||
|
||||
<div class="mx-auto flex w-full max-w-[900px] flex-col gap-4">
|
||||
<div
|
||||
class="bg-background border-border flex flex-col gap-6 rounded-lg border p-5 pb-6"
|
||||
>
|
||||
<ElDescriptions :title="$t('sysFeedback.basicInformation')">
|
||||
<ElDescriptionsItem :label="$t('sysFeedback.category')">
|
||||
{{ getFeedbackType(feedback?.feedbackType) }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="$t('sysFeedback.processingStatus')">
|
||||
{{ statusType[feedback?.status ?? 0].label }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="$t('sysFeedback.contactInformation')">
|
||||
{{ feedback?.contactInfo }}
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem :label="$t('sysFeedback.submittedAt')">
|
||||
{{ feedback?.created }}
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
<!-- <h1 class="text-base font-medium">基础信息</h1>
|
||||
<div class="flex items-center gap-16 text-sm">
|
||||
<span>问题类型：{{ feedback?.feedbackType }}</span>
|
||||
<span>处理状态：{{ feedback?.status }}</span>
|
||||
<span>联系方式：{{ feedback?.contactInfo }}</span>
|
||||
<span>提交时间：{{ feedback?.created }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-background border-border flex flex-col gap-6 rounded-lg border p-5 pb-6"
|
||||
>
|
||||
<h1 class="text-base font-medium">
|
||||
{{ $t('sysFeedback.feedbackContent') }}
|
||||
</h1>
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<span class="w-20 shrink-0">
|
||||
{{ $t('sysFeedback.description') }}：
|
||||
</span>
|
||||
<div
|
||||
class="border-border w-full whitespace-pre-wrap rounded-lg border p-4"
|
||||
>
|
||||
{{ feedback?.feedbackContent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<span class="w-20 shrink-0">
|
||||
{{ $t('sysFeedback.attachments') }}：
|
||||
</span>
|
||||
<ElLink target="_blank" :href="feedback?.attachmentUrl">
|
||||
{{ feedback?.attachmentUrl }}
|
||||
</ElLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto flex items-center">
|
||||
<ElButton
|
||||
type="primary"
|
||||
:icon="Check"
|
||||
:loading="loading.markRead"
|
||||
:disabled="status >= 1"
|
||||
@click="markStatus(1)"
|
||||
>
|
||||
{{ $t('button.markAsRead') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
:loading="loading.markResolved"
|
||||
:disabled="status >= 2"
|
||||
@click="markStatus(2)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="svg:resolved" />
|
||||
</template>
|
||||
{{ $t('button.markAsResolved') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@easyflow/icons';
|
||||
|
||||
import { MoreFilled, View } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElIcon,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
ElTag,
|
||||
} from 'element-plus';
|
||||
import { tryit } from 'radash';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { router } from '#/router';
|
||||
|
||||
const feedbackTypeOptions = [
|
||||
{
|
||||
value: 1,
|
||||
label: $t('sysFeedback.functionalFailure'),
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: $t('sysFeedback.optimizationSuggestions'),
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: $t('sysFeedback.accountIssue'),
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: $t('sysFeedback.other'),
|
||||
},
|
||||
];
|
||||
const statusType: Record<number, any> = {
|
||||
0: {
|
||||
label: $t('sysFeedback.notViewed'),
|
||||
type: 'warning',
|
||||
},
|
||||
1: {
|
||||
label: $t('sysFeedback.viewed'),
|
||||
type: 'primary',
|
||||
},
|
||||
2: {
|
||||
label: $t('sysFeedback.processed'),
|
||||
type: 'success',
|
||||
},
|
||||
3: {
|
||||
label: $t('sysFeedback.closed/Invalid'),
|
||||
type: 'info',
|
||||
},
|
||||
};
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const formData = ref({
|
||||
feedbackType: '',
|
||||
status: '',
|
||||
feedbackContent: '',
|
||||
});
|
||||
const pageDataRef = ref();
|
||||
|
||||
function search(formEl?: FormInstance) {
|
||||
formEl?.validate((valid) => {
|
||||
if (valid) {
|
||||
pageDataRef.value.setQuery(formData.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
function getFeedbackType(type: number) {
|
||||
const option = feedbackTypeOptions.find((option) => option.value === type);
|
||||
return option?.label;
|
||||
}
|
||||
async function markStatus(row: any, status: number) {
|
||||
const [, res] = await tryit(api.post)('/api/v1/sysUserFeedback/update', {
|
||||
...row,
|
||||
status,
|
||||
});
|
||||
|
||||
if (res && res.errorCode === 0) {
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-1.5 p-6">
|
||||
<ElForm ref="formRef" inline :model="formData">
|
||||
<ElFormItem prop="feedbackType" class="!mr-3">
|
||||
<ElSelect
|
||||
v-model="formData.feedbackType"
|
||||
:options="feedbackTypeOptions"
|
||||
:placeholder="$t('sysFeedback.feedbackType')"
|
||||
clearable
|
||||
filterable
|
||||
immediate
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="status" class="!mr-3">
|
||||
<DictSelect
|
||||
v-model="formData.status"
|
||||
dict-code="feedbackType"
|
||||
:placeholder="$t('sysFeedback.processingStatus')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="feedbackContent" class="!mr-3">
|
||||
<ElInput
|
||||
v-model="formData.feedbackContent"
|
||||
:placeholder="$t('common.searchPlaceholder')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton @click="search(formRef)" type="primary">
|
||||
{{ $t('button.query') }}
|
||||
</ElButton>
|
||||
<ElButton @click="reset(formRef)">
|
||||
{{ $t('button.reset') }}
|
||||
</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysUserFeedback/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable border show-overflow-tooltip :data="pageList">
|
||||
<ElTableColumn prop="id" label="ID">
|
||||
<template #default="{ row }">
|
||||
{{ row.id }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="feedbackType"
|
||||
:label="$t('sysFeedback.category')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ getFeedbackType(row.feedbackType) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="feedbackContent"
|
||||
:label="$t('sysFeedback.description')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.feedbackContent }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="contactInfo"
|
||||
:label="$t('sysFeedback.contactInformation')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.contactInfo }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="created"
|
||||
:label="$t('sysFeedback.submittedAt')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="status"
|
||||
:label="$t('sysFeedback.processingStatus')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<ElTag :type="statusType[(row.status as number) ?? 0].type">
|
||||
{{ statusType[row.status ?? 0].label }}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton
|
||||
link
|
||||
type="primary"
|
||||
@click="router.push(`/sys/sysFeedback/${row.id}`)"
|
||||
>
|
||||
{{ $t('button.view') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<ElDropdownItem
|
||||
:icon="View"
|
||||
:disabled="(row.status ?? 0) >= 1"
|
||||
@click="markStatus(row, 1)"
|
||||
>
|
||||
{{ $t('button.markAsRead') }}
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem
|
||||
:disabled="(row.status ?? 0) >= 2"
|
||||
@click="markStatus(row, 2)"
|
||||
>
|
||||
<ElIcon>
|
||||
<IconifyIcon icon="svg:resolved" />
|
||||
</ElIcon>
|
||||
{{ $t('button.markAsResolved') }}
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
278
easyflow-ui-admin/app/src/views/system/sysJob/SysJobList.vue
Normal file
278
easyflow-ui-admin/app/src/views/system/sysJob/SysJobList.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { markRaw, onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
CaretRight,
|
||||
CircleCloseFilled,
|
||||
Delete,
|
||||
MoreFilled,
|
||||
Plus,
|
||||
Tickets,
|
||||
} from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { router } from '#/router';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysJobModal from './SysJobModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
initDict();
|
||||
});
|
||||
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const dictStore = useDictStore();
|
||||
const headerButtons = [
|
||||
{
|
||||
key: 'create',
|
||||
text: $t('button.add'),
|
||||
icon: markRaw(Plus),
|
||||
type: 'primary',
|
||||
data: { action: 'create' },
|
||||
permission: '/api/v1/sysJob/save',
|
||||
},
|
||||
];
|
||||
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('jobType');
|
||||
dictStore.fetchDictionary('jobStatus');
|
||||
dictStore.fetchDictionary('yesOrNo');
|
||||
dictStore.fetchDictionary('misfirePolicy');
|
||||
}
|
||||
const handleSearch = (params: string) => {
|
||||
pageDataRef.value.setQuery({ jobName: params, isQueryOr: true });
|
||||
};
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysJob/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
function start(row: any) {
|
||||
ElMessageBox.confirm($t('message.startAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api.get(`/api/v1/sysJob/start?id=${row.id}`).then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function stop(row: any) {
|
||||
ElMessageBox.confirm($t('message.stopAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api.get(`/api/v1/sysJob/stop?id=${row.id}`).then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function toLogPage(row: any) {
|
||||
router.push({
|
||||
name: 'SysJobLog',
|
||||
query: {
|
||||
jobId: row.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysJobModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch
|
||||
:buttons="headerButtons"
|
||||
@search="handleSearch"
|
||||
@button-click="showDialog({})"
|
||||
/>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysJob/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn prop="jobName" :label="$t('sysJob.jobName')">
|
||||
<template #default="{ row }">
|
||||
{{ row.jobName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="jobType" :label="$t('sysJob.jobType')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('jobType', row.jobType) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="cronExpression"
|
||||
:label="$t('sysJob.cronExpression')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.cronExpression }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="allowConcurrent"
|
||||
:label="$t('sysJob.allowConcurrent')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('yesOrNo', row.allowConcurrent) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="misfirePolicy"
|
||||
:label="$t('sysJob.misfirePolicy')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('misfirePolicy', row.misfirePolicy) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status" :label="$t('sysJob.status')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('jobStatus', row.status) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysJob.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" :label="$t('sysJob.remark')">
|
||||
<template #default="{ row }">
|
||||
{{ row.remark }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<div
|
||||
v-if="row.status === 0"
|
||||
v-access:code="'/api/v1/sysJob/save'"
|
||||
>
|
||||
<ElDropdownItem @click="start(row)">
|
||||
<ElButton :icon="CaretRight" link>
|
||||
{{ $t('button.start') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
<div
|
||||
v-if="row.status === 1"
|
||||
v-access:code="'/api/v1/sysJob/save'"
|
||||
>
|
||||
<ElDropdownItem @click="stop(row)">
|
||||
<ElButton :icon="CircleCloseFilled" link>
|
||||
{{ $t('button.stop') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
<div v-access:code="'/api/v1/sysJob/query'">
|
||||
<ElDropdownItem @click="toLogPage(row)">
|
||||
<ElButton :icon="Tickets" link>
|
||||
{{ $t('button.log') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
<div v-access:code="'/api/v1/sysJob/remove'">
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton type="danger" :icon="Delete" link>
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
136
easyflow-ui-admin/app/src/views/system/sysJob/SysJobLogList.vue
Normal file
136
easyflow-ui-admin/app/src/views/system/sysJob/SysJobLogList.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
const router = useRouter();
|
||||
const $route = useRoute();
|
||||
onMounted(() => {
|
||||
initDict();
|
||||
});
|
||||
const formRef = ref<FormInstance>();
|
||||
const pageDataRef = ref();
|
||||
const formInline = ref({
|
||||
status: '',
|
||||
});
|
||||
const dictStore = useDictStore();
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('jobResult');
|
||||
}
|
||||
function search(formEl: FormInstance | undefined) {
|
||||
formEl?.validate((valid) => {
|
||||
if (valid) {
|
||||
pageDataRef.value.setQuery(formInline.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
function reset(formEl: FormInstance | undefined) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="mb-3">
|
||||
<ElButton :icon="ArrowLeft" @click="router.back()">
|
||||
{{ $t('button.back') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
<ElForm ref="formRef" :inline="true" :model="formInline">
|
||||
<ElFormItem :label="$t('sysJobLog.status')" prop="status">
|
||||
<DictSelect v-model="formInline.status" dict-code="jobResult" />
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton @click="search(formRef)" type="primary">
|
||||
{{ $t('button.query') }}
|
||||
</ElButton>
|
||||
<ElButton @click="reset(formRef)">
|
||||
{{ $t('button.reset') }}
|
||||
</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<div class="handle-div"></div>
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysJobLog/page"
|
||||
:extra-query-params="{
|
||||
jobId: $route.query.jobId,
|
||||
}"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn prop="jobName" :label="$t('sysJobLog.jobName')">
|
||||
<template #default="{ row }">
|
||||
{{ row.jobName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
show-overflow-tooltip
|
||||
prop="jobParams"
|
||||
:label="$t('sysJobLog.jobParams')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.jobParams }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
show-overflow-tooltip
|
||||
prop="jobResult"
|
||||
:label="$t('sysJobLog.jobResult')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.jobResult }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="errorInfo" :label="$t('sysJobLog.errorInfo')">
|
||||
<template #default="{ row }">
|
||||
{{ row.errorInfo }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status" :label="$t('sysJobLog.status')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('jobResult', row.status) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
width="180"
|
||||
prop="startTime"
|
||||
:label="$t('sysJobLog.startTime')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.startTime }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
width="180"
|
||||
prop="endTime"
|
||||
:label="$t('sysJobLog.endTime')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.endTime }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
244
easyflow-ui-admin/app/src/views/system/sysJob/SysJobModal.vue
Normal file
244
easyflow-ui-admin/app/src/views/system/sysJob/SysJobModal.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElAlert,
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import CronPicker from '#/components/cron/CronPicker.vue';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
import WorkflowFormItem from '#/views/ai/workflow/components/WorkflowFormItem.vue';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const initEntity = {
|
||||
deptId: '',
|
||||
jobName: '',
|
||||
jobType: '',
|
||||
jobParams: {
|
||||
workflowParams: {},
|
||||
},
|
||||
cronExpression: '',
|
||||
allowConcurrent: 0,
|
||||
misfirePolicy: 3,
|
||||
options: '',
|
||||
status: '',
|
||||
remark: '',
|
||||
};
|
||||
const entity = ref<any>(initEntity);
|
||||
const btnLoading = ref(false);
|
||||
// 基础验证规则
|
||||
const baseRules = ref({
|
||||
jobName: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
jobType: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
cronExpression: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
allowConcurrent: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
misfirePolicy: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
|
||||
const paramsLoading = ref(false);
|
||||
const workflowParams = ref<any[]>([]);
|
||||
const rules = ref({ ...baseRules.value });
|
||||
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
entity.value = { ...row };
|
||||
// 确保 jobParams 存在
|
||||
if (!entity.value.jobParams) {
|
||||
entity.value.jobParams = {};
|
||||
}
|
||||
if (entity.value.jobParams.workflowId) {
|
||||
getWorkflowParams(entity.value.jobParams.workflowId);
|
||||
}
|
||||
isAdd.value = false;
|
||||
} else {
|
||||
entity.value = { ...initEntity };
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysJob/save' : 'api/v1/sysJob/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = { ...initEntity };
|
||||
workflowParams.value = [];
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
function jobTypeChange(v: any) {
|
||||
workflowParams.value = [];
|
||||
entity.value.jobParams = {
|
||||
workflowParams: {},
|
||||
};
|
||||
if (v === 1) {
|
||||
entity.value.jobParams.workflowParams = {};
|
||||
}
|
||||
}
|
||||
function workflowChange(v: any) {
|
||||
entity.value.jobParams.workflowParams = {};
|
||||
getWorkflowParams(v);
|
||||
}
|
||||
function getWorkflowParams(v: any) {
|
||||
paramsLoading.value = true;
|
||||
api.get(`/api/v1/workflow/getRunningParameters?id=${v}`).then((res) => {
|
||||
paramsLoading.value = false;
|
||||
workflowParams.value = res.data.parameters;
|
||||
});
|
||||
}
|
||||
const str = '"param"';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
v-loading="paramsLoading"
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="jobName" :label="$t('sysJob.jobName')">
|
||||
<ElInput v-model.trim="entity.jobName" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="cronExpression" :label="$t('sysJob.cronExpression')">
|
||||
<ElInput v-model.trim="entity.cronExpression" />
|
||||
<CronPicker v-model="entity.cronExpression" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="jobType" :label="$t('sysJob.jobType')">
|
||||
<DictSelect
|
||||
v-model="entity.jobType"
|
||||
dict-code="jobType"
|
||||
@change="jobTypeChange"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="entity.jobType === 1"
|
||||
:label="$t('sysJob.workflow')"
|
||||
prop="jobParams.workflowId"
|
||||
:rules="[
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<DictSelect
|
||||
v-model="entity.jobParams.workflowId"
|
||||
dict-code="aiWorkFlow"
|
||||
@change="workflowChange"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<WorkflowFormItem
|
||||
v-model:run-params="entity.jobParams.workflowParams"
|
||||
:parameters="workflowParams"
|
||||
prop-prefix="jobParams.workflowParams."
|
||||
/>
|
||||
<ElFormItem
|
||||
v-if="entity.jobType === 2"
|
||||
:label="$t('sysJob.beanMethod')"
|
||||
prop="jobParams.beanMethod"
|
||||
:rules="[
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<ElInput v-model="entity.jobParams.beanMethod" />
|
||||
<ElAlert
|
||||
style="margin-top: 5px"
|
||||
:title="`${$t('sysJob.example')}：sysJobServiceImpl.testParam(${str},false,299)`"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
v-if="entity.jobType === 3"
|
||||
:label="$t('sysJob.javaMethod')"
|
||||
prop="jobParams.javaMethod"
|
||||
:rules="[
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<ElInput v-model="entity.jobParams.javaMethod" />
|
||||
<ElAlert
|
||||
style="margin-top: 5px"
|
||||
:title="`${$t('sysJob.example')}：tech.easyflow.job.util.JobUtil.execTest(${str},1,0.52D,100L)`"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="allowConcurrent" :label="$t('sysJob.allowConcurrent')">
|
||||
<DictSelect v-model="entity.allowConcurrent" dict-code="yesOrNo" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="misfirePolicy" :label="$t('sysJob.misfirePolicy')">
|
||||
<DictSelect v-model="entity.misfirePolicy" dict-code="misfirePolicy" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysJob.remark')">
|
||||
<ElInput v-model.trim="entity.remark" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
83
easyflow-ui-admin/app/src/views/system/sysLog/SysLogList.vue
Normal file
83
easyflow-ui-admin/app/src/views/system/sysLog/SysLogList.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { ElTable, ElTableColumn } from 'element-plus';
|
||||
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
import SysLogModal from './SysLogModal.vue';
|
||||
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const handleSearch = (params: string) => {
|
||||
pageDataRef.value.setQuery({ actionName: params, isQueryOr: true });
|
||||
};
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysLogModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch @search="handleSearch" />
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysLog/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn prop="accountId" :label="$t('sysLog.accountId')">
|
||||
<template #default="{ row }">
|
||||
{{ row.account?.nickname }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="actionName" :label="$t('sysLog.actionName')">
|
||||
<template #default="{ row }">
|
||||
{{ row.actionName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="actionType" :label="$t('sysLog.actionType')">
|
||||
<template #default="{ row }">
|
||||
{{ row.actionType }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="actionClass" :label="$t('sysLog.actionClass')">
|
||||
<template #default="{ row }">
|
||||
{{ row.actionClass }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="actionMethod"
|
||||
:label="$t('sysLog.actionMethod')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.actionMethod }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="actionIp" :label="$t('sysLog.actionIp')">
|
||||
<template #default="{ row }">
|
||||
{{ row.actionIp }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysLog.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
143
easyflow-ui-admin/app/src/views/system/sysLog/SysLogModal.vue
Normal file
143
easyflow-ui-admin/app/src/views/system/sysLog/SysLogModal.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
accountId: '',
|
||||
actionName: '',
|
||||
actionType: '',
|
||||
actionClass: '',
|
||||
actionMethod: '',
|
||||
actionUrl: '',
|
||||
actionIp: '',
|
||||
actionParams: '',
|
||||
actionBody: '',
|
||||
status: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysLog/save' : 'api/v1/sysLog/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="accountId" :label="$t('sysLog.accountId')">
|
||||
<ElInput v-model.trim="entity.accountId" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionName" :label="$t('sysLog.actionName')">
|
||||
<ElInput v-model.trim="entity.actionName" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionType" :label="$t('sysLog.actionType')">
|
||||
<ElInput v-model.trim="entity.actionType" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionClass" :label="$t('sysLog.actionClass')">
|
||||
<ElInput v-model.trim="entity.actionClass" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionMethod" :label="$t('sysLog.actionMethod')">
|
||||
<ElInput v-model.trim="entity.actionMethod" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionUrl" :label="$t('sysLog.actionUrl')">
|
||||
<ElInput v-model.trim="entity.actionUrl" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionIp" :label="$t('sysLog.actionIp')">
|
||||
<ElInput v-model.trim="entity.actionIp" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionParams" :label="$t('sysLog.actionParams')">
|
||||
<ElInput v-model.trim="entity.actionParams" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="actionBody" :label="$t('sysLog.actionBody')">
|
||||
<ElInput v-model.trim="entity.actionBody" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="status" :label="$t('sysLog.status')">
|
||||
<ElInput v-model.trim="entity.status" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
182
easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuList.vue
Normal file
182
easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuList.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { createIconifyIcon } from '@easyflow/icons';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElIcon,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysMenuModal from './SysMenuModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
getTree();
|
||||
initDict();
|
||||
});
|
||||
|
||||
const saveDialog = ref();
|
||||
const treeData = ref([]);
|
||||
const loading = ref(false);
|
||||
const dictStore = useDictStore();
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('menuType');
|
||||
dictStore.fetchDictionary('yesOrNo');
|
||||
}
|
||||
function reset() {
|
||||
getTree();
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysMenu/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
function getTree() {
|
||||
loading.value = true;
|
||||
api
|
||||
.get('/api/v1/sysMenu/list', {
|
||||
params: {
|
||||
asTree: true,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
loading.value = false;
|
||||
treeData.value = res.data;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysMenuModal ref="saveDialog" @reload="reset" />
|
||||
<div>
|
||||
<ElButton
|
||||
v-access:code="'/api/v1/sysMenu/save'"
|
||||
@click="showDialog({})"
|
||||
type="primary"
|
||||
>
|
||||
<ElIcon class="mr-1">
|
||||
<Plus />
|
||||
</ElIcon>
|
||||
{{ $t('button.add') }}
|
||||
</ElButton>
|
||||
</div>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<ElTable :data="treeData" row-key="id" v-loading="loading">
|
||||
<ElTableColumn prop="menuType" :label="$t('sysMenu.menuType')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('menuType', row.menuType) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="menuTitle" :label="$t('sysMenu.menuTitle')">
|
||||
<template #default="{ row }">
|
||||
{{ $t(row.menuTitle) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="menuUrl" :label="$t('sysMenu.menuUrl')">
|
||||
<template #default="{ row }">
|
||||
{{ row.menuUrl }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="component" :label="$t('sysMenu.component')">
|
||||
<template #default="{ row }">
|
||||
{{ row.component }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="menuIcon" :label="$t('sysMenu.menuIcon')">
|
||||
<template #default="{ row }">
|
||||
<component class="size-5" :is="createIconifyIcon(row.menuIcon)" />
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="isShow" :label="$t('sysMenu.isShow')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('yesOrNo', row.isShow) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="permissionTag"
|
||||
:label="$t('sysMenu.permissionTag')"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.permissionTag }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="sortNo" :label="$t('sysMenu.sortNo')">
|
||||
<template #default="{ row }">
|
||||
{{ row.sortNo }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysMenu.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn :label="$t('common.handle')" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<div v-access:code="'/api/v1/sysMenu/remove'">
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton type="danger" :icon="Delete" link>
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
187
easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuModal.vue
Normal file
187
easyflow-ui-admin/app/src/views/system/sysMenu/SysMenuModal.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { IconPicker } from '@easyflow/common-ui';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { componentKeys } from '#/router/routes';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
parentId: '',
|
||||
menuType: '',
|
||||
menuTitle: '',
|
||||
menuUrl: '',
|
||||
component: '',
|
||||
menuIcon: '',
|
||||
isShow: '',
|
||||
permissionTag: '',
|
||||
sortNo: '',
|
||||
status: '',
|
||||
remark: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({
|
||||
parentId: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
menuType: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
menuTitle: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
isShow: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post(
|
||||
isAdd.value ? 'api/v1/sysMenu/save' : 'api/v1/sysMenu/update',
|
||||
entity.value,
|
||||
)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="1999"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="parentId" :label="$t('sysMenu.parentId')">
|
||||
<DictSelect
|
||||
:extra-options="[{ label: $t('sysMenu.root'), value: 0 }]"
|
||||
v-model="entity.parentId"
|
||||
dict-code="sysMenu"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="menuType" :label="$t('sysMenu.menuType')">
|
||||
<DictSelect v-model="entity.menuType" dict-code="menuType" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="menuTitle" :label="$t('sysMenu.menuTitle')">
|
||||
<ElInput v-model.trim="entity.menuTitle" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="menuUrl" :label="$t('sysMenu.menuUrl')">
|
||||
<ElInput v-model.trim="entity.menuUrl" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="component" :label="$t('sysMenu.component')">
|
||||
<ElInput v-model.trim="entity.component">
|
||||
<template #append>
|
||||
<ElSelect
|
||||
v-model="entity.component"
|
||||
filterable
|
||||
style="width: 100px"
|
||||
>
|
||||
<ElOption
|
||||
v-for="item in componentKeys"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</ElSelect>
|
||||
</template>
|
||||
</ElInput>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="menuIcon" :label="$t('sysMenu.menuIcon')">
|
||||
<IconPicker v-model="entity.menuIcon" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="isShow" :label="$t('sysMenu.isShow')">
|
||||
<DictSelect v-model="entity.isShow" dict-code="yesOrNo" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="permissionTag" :label="$t('sysMenu.permissionTag')">
|
||||
<ElInput v-model.trim="entity.permissionTag" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="sortNo" :label="$t('sysMenu.sortNo')">
|
||||
<ElInput v-model.trim="entity.sortNo" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysMenu.remark')">
|
||||
<ElInput v-model.trim="entity.remark" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { markRaw, onMounted, ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysPositionModal from './SysPositionModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
initDict();
|
||||
});
|
||||
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const dictStore = useDictStore();
|
||||
const headerButtons = [
|
||||
{
|
||||
key: 'create',
|
||||
text: $t('button.add'),
|
||||
icon: markRaw(Plus),
|
||||
type: 'primary',
|
||||
data: { action: 'create' },
|
||||
permission: '/api/v1/sysPosition/save',
|
||||
},
|
||||
];
|
||||
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('dataStatus');
|
||||
}
|
||||
|
||||
const handleSearch = (params: string) => {
|
||||
// 后端支持 positionName 模糊查询
|
||||
pageDataRef.value.setQuery({ positionName: params });
|
||||
};
|
||||
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
|
||||
function changeStatus(row: any) {
|
||||
const newStatus = row.status === 1 ? 0 : 1;
|
||||
const actionText =
|
||||
newStatus === 1 ? $t('sysPosition.enable') : $t('sysPosition.disable');
|
||||
|
||||
ElMessageBox.confirm(
|
||||
$t('sysPosition.message.title', {
|
||||
actionText,
|
||||
positionName: row.positionName,
|
||||
}),
|
||||
$t('message.noticeTitle'),
|
||||
{
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
},
|
||||
)
|
||||
.then(() => {
|
||||
api
|
||||
.post('/api/v1/sysPosition/changeStatus', {
|
||||
id: row.id,
|
||||
status: newStatus,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success($t('ui.actionMessage.operationSuccess'));
|
||||
pageDataRef.value.reload();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysPosition/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysPositionModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch
|
||||
:buttons="headerButtons"
|
||||
@search="handleSearch"
|
||||
@button-click="showDialog({})"
|
||||
/>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysPosition/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn
|
||||
prop="positionName"
|
||||
:label="$t('sysPosition.positionName') || '岗位名称'"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.positionName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="positionCode"
|
||||
:label="$t('sysPosition.positionCode') || '岗位编码'"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.positionCode }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="sortNo"
|
||||
:label="$t('sysPosition.sortNo') || '排序'"
|
||||
width="80"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.sortNo }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="status"
|
||||
:label="$t('sysPosition.status') || '状态'"
|
||||
width="100"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<ElButton
|
||||
:type="row.status === 1 ? 'success' : 'info'"
|
||||
link
|
||||
@click="changeStatus(row)"
|
||||
>
|
||||
{{
|
||||
dictStore.getDictLabel('dataStatus', row.status) ||
|
||||
(row.status === 1
|
||||
? $t('sysPosition.enable')
|
||||
: $t('sysPosition.disable'))
|
||||
}}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
prop="created"
|
||||
:label="$t('sysPosition.created')"
|
||||
width="180"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" :label="$t('sysPosition.remark')">
|
||||
<template #default="{ row }">
|
||||
{{ row.remark }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<div v-access:code="'/api/v1/sysPosition/remove'">
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton type="danger" :icon="Delete" link>
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElMessage,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
|
||||
const saveForm = ref<FormInstance>();
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
positionName: '',
|
||||
positionCode: '',
|
||||
sortNo: 0,
|
||||
status: 1,
|
||||
remark: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
|
||||
const rules = ref({
|
||||
positionName: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
positionCode: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'change' },
|
||||
],
|
||||
});
|
||||
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
entity.value = { ...row };
|
||||
} else {
|
||||
isAdd.value = true;
|
||||
entity.value = {
|
||||
sortNo: 0,
|
||||
status: 1,
|
||||
};
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
const url = isAdd.value
|
||||
? '/api/v1/sysPosition/save'
|
||||
: '/api/v1/sysPosition/update';
|
||||
api
|
||||
.post(url, entity.value)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
width="500px"
|
||||
>
|
||||
<ElForm
|
||||
label-width="100px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem
|
||||
prop="positionName"
|
||||
:label="$t('sysPosition.positionName') || '岗位名称'"
|
||||
>
|
||||
<ElInput
|
||||
v-model.trim="entity.positionName"
|
||||
:placeholder="$t('sysPosition.placeholder.positionName')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem
|
||||
prop="positionCode"
|
||||
:label="$t('sysPosition.positionCode') || '岗位编码'"
|
||||
>
|
||||
<ElInput
|
||||
v-model.trim="entity.positionCode"
|
||||
:placeholder="$t('sysPosition.placeholder.positionCode')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="sortNo" :label="$t('sysPosition.sortNo') || '排序'">
|
||||
<ElInputNumber
|
||||
v-model="entity.sortNo"
|
||||
:min="0"
|
||||
:max="999"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="status" :label="$t('sysPosition.status') || '状态'">
|
||||
<DictSelect v-model="entity.status" dict-code="dataStatus" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysPosition.remark')">
|
||||
<ElInput v-model.trim="entity.remark" type="textarea" :rows="3" />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
167
easyflow-ui-admin/app/src/views/system/sysRole/SysRoleList.vue
Normal file
167
easyflow-ui-admin/app/src/views/system/sysRole/SysRoleList.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { markRaw, onMounted, ref } from 'vue';
|
||||
|
||||
import { Delete, MoreFilled, Plus } from '@element-plus/icons-vue';
|
||||
import {
|
||||
ElButton,
|
||||
ElDropdown,
|
||||
ElDropdownItem,
|
||||
ElDropdownMenu,
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElTable,
|
||||
ElTableColumn,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
|
||||
import PageData from '#/components/page/PageData.vue';
|
||||
import { $t } from '#/locales';
|
||||
import { useDictStore } from '#/store';
|
||||
|
||||
import SysRoleModal from './SysRoleModal.vue';
|
||||
|
||||
onMounted(() => {
|
||||
initDict();
|
||||
});
|
||||
|
||||
const pageDataRef = ref();
|
||||
const saveDialog = ref();
|
||||
const dictStore = useDictStore();
|
||||
const headerButtons = [
|
||||
{
|
||||
key: 'create',
|
||||
text: $t('button.add'),
|
||||
icon: markRaw(Plus),
|
||||
type: 'primary',
|
||||
data: { action: 'create' },
|
||||
permission: '/api/v1/sysRole/save',
|
||||
},
|
||||
];
|
||||
|
||||
function initDict() {
|
||||
dictStore.fetchDictionary('dataStatus');
|
||||
}
|
||||
function isAdminRole(data: any) {
|
||||
return data?.roleKey === 'super_admin';
|
||||
}
|
||||
const handleSearch = (params: string) => {
|
||||
pageDataRef.value.setQuery({ roleName: params, isQueryOr: true });
|
||||
};
|
||||
function reset(formEl?: FormInstance) {
|
||||
formEl?.resetFields();
|
||||
pageDataRef.value.setQuery({});
|
||||
}
|
||||
function showDialog(row: any) {
|
||||
saveDialog.value.openDialog({ ...row });
|
||||
}
|
||||
function remove(row: any) {
|
||||
ElMessageBox.confirm($t('message.deleteAlert'), $t('message.noticeTitle'), {
|
||||
confirmButtonText: $t('message.ok'),
|
||||
cancelButtonText: $t('message.cancel'),
|
||||
type: 'warning',
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === 'confirm') {
|
||||
instance.confirmButtonLoading = true;
|
||||
api
|
||||
.post('/api/v1/sysRole/remove', { id: row.id })
|
||||
.then((res) => {
|
||||
instance.confirmButtonLoading = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
reset();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
}).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full flex-col gap-6 p-6">
|
||||
<SysRoleModal ref="saveDialog" @reload="reset" />
|
||||
<HeaderSearch
|
||||
:buttons="headerButtons"
|
||||
@search="handleSearch"
|
||||
@button-click="showDialog({ menuCheckStrictly: true })"
|
||||
/>
|
||||
|
||||
<div class="bg-background border-border flex-1 rounded-lg border p-5">
|
||||
<PageData
|
||||
ref="pageDataRef"
|
||||
page-url="/api/v1/sysRole/page"
|
||||
:page-size="10"
|
||||
>
|
||||
<template #default="{ pageList }">
|
||||
<ElTable :data="pageList" border>
|
||||
<ElTableColumn prop="roleName" :label="$t('sysRole.roleName')">
|
||||
<template #default="{ row }">
|
||||
{{ row.roleName }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="roleKey" :label="$t('sysRole.roleKey')">
|
||||
<template #default="{ row }">
|
||||
{{ row.roleKey }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="status" :label="$t('sysRole.status')">
|
||||
<template #default="{ row }">
|
||||
{{ dictStore.getDictLabel('dataStatus', row.status) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="created" :label="$t('sysRole.created')">
|
||||
<template #default="{ row }">
|
||||
{{ row.created }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" :label="$t('sysRole.remark')">
|
||||
<template #default="{ row }">
|
||||
{{ row.remark }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn
|
||||
:label="$t('common.handle')"
|
||||
width="90"
|
||||
align="right"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-3" v-if="!isAdminRole(row)">
|
||||
<ElButton link type="primary" @click="showDialog(row)">
|
||||
{{ $t('button.edit') }}
|
||||
</ElButton>
|
||||
|
||||
<ElDropdown>
|
||||
<ElButton link :icon="MoreFilled" />
|
||||
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
<div v-access:code="'/api/v1/sysRole/remove'">
|
||||
<ElDropdownItem @click="remove(row)">
|
||||
<ElButton type="danger" :icon="Delete" link>
|
||||
{{ $t('button.delete') }}
|
||||
</ElButton>
|
||||
</ElDropdownItem>
|
||||
</div>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
</template>
|
||||
</PageData>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
176
easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue
Normal file
176
easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormInstance } from 'element-plus';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElMessage,
|
||||
ElSwitch,
|
||||
} from 'element-plus';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import DictSelect from '#/components/dict/DictSelect.vue';
|
||||
import Tree from '#/components/tree/Tree.vue';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const emit = defineEmits(['reload']);
|
||||
// vue
|
||||
onMounted(() => {});
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
const saveForm = ref<FormInstance>();
|
||||
// variables
|
||||
const dialogVisible = ref(false);
|
||||
const isAdd = ref(true);
|
||||
const entity = ref<any>({
|
||||
roleName: '',
|
||||
roleKey: '',
|
||||
status: '',
|
||||
remark: '',
|
||||
});
|
||||
const btnLoading = ref(false);
|
||||
const rules = ref({
|
||||
roleName: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
roleKey: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
// functions
|
||||
function openDialog(row: any) {
|
||||
if (row.id) {
|
||||
isAdd.value = false;
|
||||
getMenuIds(row.id);
|
||||
getDeptIds(row.id);
|
||||
}
|
||||
entity.value = row;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
function save() {
|
||||
saveForm.value?.validate((valid) => {
|
||||
if (valid) {
|
||||
btnLoading.value = true;
|
||||
api
|
||||
.post('/api/v1/sysRole/saveRole', entity.value)
|
||||
.then((res) => {
|
||||
btnLoading.value = false;
|
||||
if (res.errorCode === 0) {
|
||||
ElMessage.success(res.message);
|
||||
emit('reload');
|
||||
closeDialog();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function closeDialog() {
|
||||
saveForm.value?.resetFields();
|
||||
isAdd.value = true;
|
||||
entity.value = {};
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
function getMenuIds(roleId: any) {
|
||||
api.get(`/api/v1/sysRole/getRoleMenuIds?roleId=${roleId}`).then((res) => {
|
||||
entity.value.menuIds = res.data;
|
||||
});
|
||||
}
|
||||
function getDeptIds(roleId: any) {
|
||||
api.get(`/api/v1/sysRole/getRoleDeptIds?roleId=${roleId}`).then((res) => {
|
||||
entity.value.deptIds = res.data;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-model="dialogVisible"
|
||||
draggable
|
||||
:title="isAdd ? $t('button.add') : $t('button.edit')"
|
||||
:before-close="closeDialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<ElForm
|
||||
label-width="120px"
|
||||
ref="saveForm"
|
||||
:model="entity"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
>
|
||||
<ElFormItem prop="roleName" :label="$t('sysRole.roleName')">
|
||||
<ElInput v-model.trim="entity.roleName" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="roleKey" :label="$t('sysRole.roleKey')">
|
||||
<ElInput v-model.trim="entity.roleKey" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="status" :label="$t('sysRole.status')">
|
||||
<DictSelect v-model="entity.status" dict-code="dataStatus" />
|
||||
</ElFormItem>
|
||||
<ElFormItem prop="remark" :label="$t('sysRole.remark')">
|
||||
<ElInput v-model.trim="entity.remark" />
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('sysRole.menuPermission')">
|
||||
<ElSwitch
|
||||
v-model="entity.menuCheckStrictly"
|
||||
:active-text="$t('sysRole.checkStrictlyTrue')"
|
||||
:inactive-text="$t('sysRole.checkStrictlyFalse')"
|
||||
/>
|
||||
<Tree
|
||||
data-url="/api/v1/sysMenu/list?asTree=true"
|
||||
v-model="entity.menuIds"
|
||||
:default-props="{
|
||||
label: 'menuTitle',
|
||||
children: 'children',
|
||||
}"
|
||||
:check-strictly="!entity.menuCheckStrictly"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="$t('sysRole.dataPermission')">
|
||||
<DictSelect v-model="entity.dataScope" dict-code="dataScope" />
|
||||
<div v-if="entity.dataScope === 5" style="width: 100%">
|
||||
<ElSwitch
|
||||
v-model="entity.deptCheckStrictly"
|
||||
:active-text="$t('sysRole.checkStrictlyTrue')"
|
||||
:inactive-text="$t('sysRole.checkStrictlyFalse')"
|
||||
/>
|
||||
<Tree
|
||||
data-url="/api/v1/sysDept/list?asTree=true"
|
||||
v-model="entity.deptIds"
|
||||
:default-props="{
|
||||
label: 'deptName',
|
||||
children: 'children',
|
||||
}"
|
||||
:check-strictly="!entity.deptCheckStrictly"
|
||||
/>
|
||||
</div>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
@click="save"
|
||||
:loading="btnLoading"
|
||||
:disabled="btnLoading"
|
||||
>
|
||||
{{ $t('button.save') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user