初始化
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user