136 lines
5.4 KiB
Vue
136 lines
5.4 KiB
Vue
<script lang="ts" setup>
|
|
import BasePageableTable from "@/components/base/base-pageable-table/BasePageableTable.vue";
|
|
import DefaultToolButton from "@/components/base/default-tool-button/DefaultToolButton.vue";
|
|
import DefaultOperateButtonColumn from "@/components/base/default-column/DefaultOperateButtonColumn.vue";
|
|
import { usePage } from "@/composables/use-page";
|
|
import BaseForm from "@/components/base/base-form/BaseForm.vue";
|
|
import { $t } from "@/common/languages";
|
|
import type { FormInstance, FormRules } from "element-plus";
|
|
import { formatDate, formatRoleType } from "@/common/utils/format-utils";
|
|
import DefaultStatusSwitchColumn from "@/components/base/default-column/DefaultStatusSwitchColumn.vue";
|
|
import StatusSwitch from "@/components/base/base-switch/StatusSwitch.vue";
|
|
import { roleType } from "@/common/enums/system-enum";
|
|
import BaseTree from "@/components/base/base-tree/BaseTree.vue";
|
|
|
|
/**
|
|
* 必须要的变量
|
|
*/
|
|
|
|
const getPageUrl = "/sys/sysrole/getSysRolePage";
|
|
const addUrl = "/sys/sysrole/addSysRole";
|
|
const editUrl = "/sys/sysrole/updateSysRole";
|
|
const removeUrl = "/sys/sysrole/deleteSysRole";
|
|
const statusUrl = "/sys/sysrole/setStatus";
|
|
const treeUrl = "/sys/syspermission/getPermissionTree";
|
|
const searchers = [{ name: "roleName", type: "text" as const, placeholder: $t("_prop.systemset.sysrole.roleName") }];
|
|
const rules = reactive<FormRules>({
|
|
roleName: [{ required: true, message: $t("_message.systemset.sysrole.input_roleName"), trigger: "blur" }],
|
|
roleType: [{ required: true, message: $t("_message.systemset.sysrole.input_roleType"), trigger: "blur" }],
|
|
remark: [{ required: true, message: $t("_message.systemset.sysrole.input_remark"), trigger: "blur" }],
|
|
});
|
|
/**
|
|
* 基本不变通用变量
|
|
*/
|
|
const tableRef = ref<InstanceType<typeof BasePageableTable> | null>(null);
|
|
const treeRef = ref();
|
|
const { useAdd, useEdit, useRemove, useGeneralPageRef } = usePage(tableRef);
|
|
const { title, visible, formType, form } = useGeneralPageRef();
|
|
/**
|
|
* 可以自定义的变量
|
|
*/
|
|
|
|
const add = () => {
|
|
form.value = {};
|
|
title.value = "_title.systemset.sysrole.add";
|
|
treeRef.value?.clear();
|
|
visible.value = true;
|
|
formType.value = false;
|
|
};
|
|
const edit = (row: any) => {
|
|
title.value = "_title.systemset.sysrole.edit";
|
|
form.value = { ...row };
|
|
visible.value = true;
|
|
formType.value = true;
|
|
};
|
|
const remove = (row: any) => {
|
|
useRemove(removeUrl, row.id, "_message.systemset.sysrole.delete_message");
|
|
};
|
|
const submit = (form: any, formRef: FormInstance | undefined) => {
|
|
if (formRef !== undefined) {
|
|
formRef.validate(valid => {
|
|
if (valid) {
|
|
if (formType.value) useEdit(editUrl, form, visible);
|
|
else useAdd(addUrl, form, visible);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const topButtonClick = (eventName: string) => {
|
|
switch (eventName) {
|
|
case "add":
|
|
add();
|
|
break;
|
|
}
|
|
};
|
|
const operateButtonClick = (eventName: string, row: any) => {
|
|
switch (eventName) {
|
|
case "edit":
|
|
edit(row);
|
|
break;
|
|
case "remove":
|
|
remove(row);
|
|
break;
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<BasePageableTable :url="getPageUrl" :searchers="searchers" ref="tableRef">
|
|
<template #tool-button>
|
|
<DefaultToolButton @top-button-click="topButtonClick" />
|
|
</template>
|
|
<template #columns>
|
|
<el-table-column :label="$t('_prop.systemset.sysrole.roleName')" prop="roleName" />
|
|
<el-table-column :label="$t('_prop.systemset.sysrole.roleType')" prop="roleType" :formatter="formatRoleType" />
|
|
<el-table-column :label="$t('_prop.common.remark')" prop="remark" />
|
|
<el-table-column :label="$t('_prop.common.createDate')" prop="createDate" :formatter="formatDate" />
|
|
<DefaultStatusSwitchColumn :url="statusUrl" />
|
|
<DefaultOperateButtonColumn @operate-button-click="operateButtonClick" />
|
|
</template>
|
|
</BasePageableTable>
|
|
<BaseForm v-model:visible="visible" @submit="submit" v-model:form="form" :title="$t(title)" :rules="rules">
|
|
<template #form-items>
|
|
<el-form-item prop="id" v-if="false"><el-input v-model="form.id" /></el-form-item>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('_prop.systemset.sysrole.roleName')" prop="roleName">
|
|
<el-input v-model="form.roleName" :placeholder="$t('_message.systemset.sysrole.input_roleName')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('_prop.systemset.sysrole.roleType')" prop="roleType">
|
|
<el-select v-model="form.roleType" :placeholder="$t('_message.systemset.sysrole.select_roleType')">
|
|
<el-option v-for="item in roleType" :key="item.code" :label="item.description" :value="item.code" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('_prop.common.remark')" prop="remark">
|
|
<el-input v-model="form.remark" :placeholder="$t('_message.common.input_remark')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item :label="$t('_prop.common.status')" prop="status">
|
|
<StatusSwitch v-model="form.status" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<br />
|
|
<el-form-item style="max-height: 400px; overflow: auto">
|
|
<BaseTree ref="treeRef" :url="treeUrl" :show-checkbox="true" v-model="form.permissionIds" />
|
|
</el-form-item>
|
|
</template>
|
|
</BaseForm>
|
|
</template>
|