岗位
This commit is contained in:
parent
8596dda8f4
commit
714cb0f6e2
39
src/views/system/position/columns.ts
Normal file
39
src/views/system/position/columns.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { h } from 'vue';
|
||||
import { ElTag } from 'element-plus';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
},
|
||||
{
|
||||
label: '岗位名称',
|
||||
prop: 'name',
|
||||
},
|
||||
{
|
||||
label: '岗位状态',
|
||||
prop: 'status',
|
||||
render(record) {
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
type: record.row.status ==1 ? 'success' : 'danger',
|
||||
},
|
||||
{
|
||||
default: () => (record.row.status ==1 ? '正常' : '禁用'),
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '排序',
|
||||
prop: 'sort',
|
||||
},
|
||||
{
|
||||
label: '创建人',
|
||||
prop: 'createUser',
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
},
|
||||
];
|
112
src/views/system/position/edit.vue
Normal file
112
src/views/system/position/edit.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="props.visible"
|
||||
:title="props.positionId?'编辑':'新增'"
|
||||
:append-to-body="true"
|
||||
width="500"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="dialogClose"
|
||||
>
|
||||
<el-form
|
||||
class="ls-form"
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="名称"
|
||||
prop="name"
|
||||
:rules="{ required: true, message: '请输入名称', trigger: 'blur' }"
|
||||
>
|
||||
<el-input
|
||||
class="ls-input"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位状态" prop="status">
|
||||
<el-radio-group v-model="formData.status" name="status">
|
||||
<el-radio :value="1">正常</el-radio>
|
||||
<el-radio :value="2">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogClose">取消</el-button>
|
||||
<el-button :loading="subLoading" type="primary" @click="submit">
|
||||
确定
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type {FormInstance} from "element-plus";
|
||||
import {getPositionDetail,positionAdd,positionUpdate} from "@/api/system/position";
|
||||
import {onMounted, reactive, shallowRef} from "vue";
|
||||
import {message} from "@/utils/auth";
|
||||
import {useLockFn} from "@/utils/useLockFn";
|
||||
|
||||
const emit = defineEmits(["success", "update:visible"]);
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
name: "",
|
||||
status: 1,
|
||||
sort: 0,
|
||||
note:'',
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
positionId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
props.positionId ? await positionUpdate(formData) : await positionAdd(formData);
|
||||
message("操作成功");
|
||||
emit("update:visible", false);
|
||||
emit("success");
|
||||
};
|
||||
|
||||
const dialogClose = () => {
|
||||
emit("update:visible", false);
|
||||
};
|
||||
|
||||
const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);
|
||||
|
||||
|
||||
const setFormData = async () => {
|
||||
const data = await getPositionDetail(props.positionId);
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.positionId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
161
src/views/system/position/index.vue
Normal file
161
src/views/system/position/index.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<el-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
|
||||
</el-card>
|
||||
<el-card :bordered="false" class="proCard">
|
||||
<BasicTable
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="tableRef"
|
||||
:actionColumn="actionColumn"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<el-icon class="el-input__icon">
|
||||
<PlusOutlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
添加岗位
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
|
||||
<template #icon>
|
||||
<el-icon class="el-input__icon">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</template>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #action>
|
||||
<TableAction />
|
||||
</template>
|
||||
</BasicTable>
|
||||
</el-card>
|
||||
|
||||
<editDialog
|
||||
v-if="editVisible"
|
||||
:positionId="positionId"
|
||||
v-model:visible="editVisible"
|
||||
@success="reloadTable"
|
||||
>
|
||||
</editDialog>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, h,nextTick,defineAsyncComponent } from 'vue';
|
||||
import { ColProps } from 'element-plus';
|
||||
import { schemas } from './querySchemas';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { BasicTable, TableAction } from '@/components/Table';
|
||||
import { getPositionList,positionDelete,positionBatchDelete } from '@/api/system/position';
|
||||
import { columns } from './columns';
|
||||
import { PlusOutlined } from '@vicons/antd';
|
||||
import {message,confirm} from "@/utils/auth";
|
||||
const editDialog = defineAsyncComponent(() =>
|
||||
import('./edit.vue')
|
||||
)
|
||||
const positionId =ref(0)
|
||||
const editVisible=ref(false)
|
||||
const selectionData = ref([])
|
||||
const tableRef = ref();
|
||||
const formParams = reactive({
|
||||
name:'',
|
||||
status:''
|
||||
});
|
||||
const actionColumn = reactive({
|
||||
width: 250,
|
||||
label: '操作',
|
||||
prop: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'warning',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
// auth: ['basic_list'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'danger',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
// 根据业务控制是否显示 isShow 和 auth 是并且关系
|
||||
ifShow: () => {
|
||||
return true;
|
||||
},
|
||||
// 根据权限控制是否显示: 有权限,会显示,支持多个
|
||||
// auth: ['basic_list'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const loadDataTable = async (res: any) => {
|
||||
const result = await getPositionList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function reloadTable() {
|
||||
tableRef.value.reload();
|
||||
}
|
||||
const [register, {}] = useForm({
|
||||
labelWidth: 80,
|
||||
layout: 'horizontal',
|
||||
colProps: { span: 6 } as ColProps,
|
||||
submitOnReset:true,
|
||||
schemas
|
||||
});
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
if (values[key] != null && values[key] != undefined) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
for (const key in formParams) {
|
||||
formParams[key] ='';
|
||||
}
|
||||
}
|
||||
const handleAdd = async () => {
|
||||
positionId.value=0
|
||||
await nextTick();
|
||||
editVisible.value=true
|
||||
};
|
||||
|
||||
const handleEdit = async (record: Recordable) => {
|
||||
positionId.value=record.row.id
|
||||
await nextTick();
|
||||
editVisible.value=true
|
||||
};
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
let ids = []
|
||||
if(!record){
|
||||
ids = selectionData.value.map(({id}) => id);
|
||||
}
|
||||
await confirm('确定要删除?');
|
||||
record? await positionDelete(record.row.id):await positionBatchDelete(ids);
|
||||
message("删除成功");
|
||||
reloadTable()
|
||||
}
|
||||
function onSelectionChange(value){
|
||||
selectionData.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
29
src/views/system/position/querySchemas.ts
Normal file
29
src/views/system/position/querySchemas.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'name',
|
||||
component: 'Input',
|
||||
label: '岗位名称',
|
||||
componentProps: {
|
||||
placeholder: '请输入岗位名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
@ -102,9 +102,7 @@ const uploadHeaders = reactive({
|
||||
});
|
||||
const formParams = reactive({
|
||||
realname: '',
|
||||
mobile: '',
|
||||
role:'',
|
||||
email: '',
|
||||
status:'',
|
||||
});
|
||||
|
||||
|
@ -20,15 +20,6 @@ export const schemas: FormSchema[] = [
|
||||
placeholder: '请输入用户名',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'mobile',
|
||||
component: 'Input',
|
||||
label: '手机',
|
||||
componentProps: {
|
||||
placeholder: '请输入手机号码',
|
||||
showButton: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'role',
|
||||
component: 'BasicSelect',
|
||||
@ -43,15 +34,6 @@ export const schemas: FormSchema[] = [
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
component: 'Input',
|
||||
label: '邮箱',
|
||||
componentProps: {
|
||||
placeholder: '请输入邮箱',
|
||||
showButton: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'Select',
|
||||
|
Loading…
Reference in New Issue
Block a user