342 lines
11 KiB
HTML
342 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
<link rel="stylesheet" href="../lib/css/modern-normalize.css" />
|
|
<script src="../lib/js/vue.global.js"></script>
|
|
<script src="../lib/js/element-plus.full.js"></script>
|
|
<script src="../lib/js/element-plus-zh-cn.js"></script>
|
|
<!-- element-plus icon -->
|
|
<script src="../lib/js/element-plus-icon-vue.js"></script>
|
|
<!-- element-plus style -->
|
|
<link rel="stylesheet" href="../lib/css/element-plus-index.css" />
|
|
|
|
<style>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
<title>人员信息管理</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="app-container">
|
|
<el-form
|
|
:model="queryParams"
|
|
ref="queryFormRef"
|
|
v-show="showSearch"
|
|
:inline="true"
|
|
>
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input
|
|
v-model="queryParams.name"
|
|
placeholder="请输入姓名"
|
|
clearable
|
|
size="default"
|
|
style="width: 240px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="需求内容" prop="content">
|
|
<el-input
|
|
v-model="queryParams.content"
|
|
placeholder="请输入需求内容"
|
|
clearable
|
|
size="default"
|
|
style="width: 240px"
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
icon="search"
|
|
size="default"
|
|
@click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
<el-button icon="Refresh" size="default" @click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="plus"
|
|
size="default"
|
|
@click="handleAdd"
|
|
>新增</el-button
|
|
>
|
|
<el-button type="warning" plain size="default" @click="handleAdd"
|
|
>修改</el-button
|
|
>
|
|
<el-button type="danger" plain size="default" @click="handleAdd"
|
|
>删除</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="dataList" style="width: 100%">
|
|
<el-table-column
|
|
label="编号"
|
|
prop="id"
|
|
align="center"
|
|
width="80"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="姓名"
|
|
prop="nickname"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column label="性别" prop="gender" align="center">
|
|
<template #default="{row}"> {{genderDict[row.gender]}} </template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="身份证号"
|
|
prop="idCard"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="所属公司"
|
|
prop="company"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="职务"
|
|
prop="post"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="姓名"
|
|
prop="role"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="{row}">
|
|
<el-link
|
|
type="primary"
|
|
icon="Edit"
|
|
size="small"
|
|
@click="handleEdit(row.id)"
|
|
>编辑</el-link
|
|
>
|
|
<el-link
|
|
type="danger"
|
|
icon="Delete"
|
|
size="small"
|
|
@click="handleDelete(row.id)"
|
|
>删除</el-link
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-model:currentPage="queryParams.page"
|
|
v-model:page-size="queryParams.limit"
|
|
background
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
></el-pagination>
|
|
<el-dialog title="查看" v-model="showEditDialog" width="500px">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="姓名:" prop="nickname">
|
|
<el-input v-model="form.nickname" />
|
|
</el-form-item>
|
|
<el-form-item label="性别:" prop="gender">
|
|
<el-radio-group v-model="form.gender">
|
|
<el-radio :label="0">男</el-radio>
|
|
<el-radio :label="1">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="省份证号:" prop="idCard">
|
|
<el-input v-model="form.idCard" />
|
|
</el-form-item>
|
|
<el-form-item label="所属公司:" prop="company">
|
|
<el-input v-model="form.company" />
|
|
</el-form-item>
|
|
<el-form-item label="职务:" prop="post">
|
|
<el-input v-model="form.post" />
|
|
</el-form-item>
|
|
<el-form-item label="项目角色:" prop="role">
|
|
<el-input v-model="form.role" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const { createApp, ref, reactive, toRefs } = Vue;
|
|
|
|
const app = createApp({
|
|
setup() {
|
|
const data = reactive({
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
form: {},
|
|
rules: {
|
|
role: [{ required: true, trigger: "blur", message: "角色必填" }],
|
|
gender: [
|
|
{ required: true, trigger: "blur", message: "性别必选" },
|
|
],
|
|
nickname: [
|
|
{ required: true, trigger: "blur", message: "姓名必填" },
|
|
],
|
|
idCard: [
|
|
{ required: true, trigger: "blur", message: "省份证号必填" },
|
|
],
|
|
company: [
|
|
{ required: true, trigger: "blur", message: "所属公司必填" },
|
|
],
|
|
post: [{ required: true, trigger: "blur", message: "岗位必填" }],
|
|
},
|
|
});
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
const dataList = ref([]);
|
|
const showSearch = ref(true);
|
|
const showEditDialog = ref(false);
|
|
const loading = ref(false);
|
|
const formRef = ref();
|
|
const total = ref(0);
|
|
const genderDict = reactive({
|
|
0: "男",
|
|
1: "女",
|
|
});
|
|
// 取消按钮
|
|
const cancel = () => {
|
|
showEditDialog.value = false;
|
|
reset();
|
|
};
|
|
// 表单重置
|
|
const reset = () => {
|
|
form.value = {};
|
|
if (formRef.value) {
|
|
formRef.value.resetFields();
|
|
}
|
|
};
|
|
const handleQuery = () => {};
|
|
const resetQuery = () => {};
|
|
const handleDelete = async (id) => {
|
|
fetch(`http://120.48.8.98:16948/personnels/${id}`, {
|
|
method: "DELETE",
|
|
}).then(() => {
|
|
console.log("删除成功");
|
|
getList();
|
|
});
|
|
};
|
|
const handleAdd = async () => {
|
|
reset();
|
|
showEditDialog.value = true;
|
|
};
|
|
const handleEdit = (id) => {
|
|
reset();
|
|
fetch(`http://120.48.8.98:16948/personnels/${id}`)
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
form.value = data.data;
|
|
showEditDialog.value = true;
|
|
});
|
|
};
|
|
const submitForm = async () => {
|
|
await formRef.value.validate();
|
|
if (form.value.id) {
|
|
fetch(`http://120.48.8.98:16948/personnels/${form.value.id}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(form.value),
|
|
})
|
|
.then((resp) => resp.json())
|
|
.then(() => {
|
|
cancel();
|
|
getList();
|
|
});
|
|
} else {
|
|
fetch(`http://120.48.8.98:16948/personnels`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(form.value),
|
|
})
|
|
.then((resp) => resp.json())
|
|
.then(() => {
|
|
cancel();
|
|
getList();
|
|
// ElMessage.success("新增成功");
|
|
// ELEMENT.message.success("下载成功");
|
|
});
|
|
}
|
|
};
|
|
const getList = async () => {
|
|
const resp = fetch(
|
|
`http://120.48.8.98:16948/personnels?pageNum=${queryParams.value.pageNum}&pageSize=${queryParams.value.pageSize}`
|
|
)
|
|
.then((resp) => resp.json())
|
|
.then((data) => {
|
|
console.log(data);
|
|
dataList.value = data.rows;
|
|
total.value = data.total;
|
|
});
|
|
};
|
|
const handleSizeChange = () => {};
|
|
const handleCurrentChange = (value) => {
|
|
queryParams.value.pageNum = value;
|
|
getList();
|
|
};
|
|
getList();
|
|
return {
|
|
cancel,
|
|
reset,
|
|
queryParams,
|
|
dataList,
|
|
showSearch,
|
|
loading,
|
|
form,
|
|
rules,
|
|
submitForm,
|
|
handleQuery,
|
|
resetQuery,
|
|
handleDelete,
|
|
handleAdd,
|
|
showEditDialog,
|
|
formRef,
|
|
handleEdit,
|
|
genderDict,
|
|
total,
|
|
handleSizeChange,
|
|
handleCurrentChange,
|
|
};
|
|
},
|
|
});
|
|
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
|
|
// 注册所有图标
|
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
app.component(key, component);
|
|
}
|
|
app.mount("#app");
|
|
</script>
|
|
</body>
|
|
</html>
|