|
|
<template>
|
|
|
<div class="main">
|
|
|
<a-row>
|
|
|
<!-- 组织架构 -->
|
|
|
<a-col :span="4" class="left-tree">
|
|
|
<a-input-search
|
|
|
style="margin-bottom: 8px"
|
|
|
placeholder="请输入搜索信息"
|
|
|
@change="onChange"
|
|
|
/>
|
|
|
<a-space>
|
|
|
<a-button type="link">+ 新建分组</a-button>
|
|
|
<a-button type="link" icon="form"> </a-button>
|
|
|
<a-button type="link" style="color:#FF4D4F" icon="delete" @click="del()"> </a-button>
|
|
|
</a-space>
|
|
|
<a-tree
|
|
|
checkable
|
|
|
v-model="checkedKeys"
|
|
|
:expanded-keys="expandedKeys"
|
|
|
:auto-expand-parent="autoExpandParent"
|
|
|
:selected-keys="selectedKeys"
|
|
|
:tree-data="treeData"
|
|
|
@expand="onExpand"
|
|
|
@select="onSelect"
|
|
|
/>
|
|
|
</a-col>
|
|
|
<!-- right 员工 -->
|
|
|
<a-col :span="20">
|
|
|
<div class="search-box">
|
|
|
<a-space size="large">
|
|
|
<a-input placeholder="请输入申请人/公司名" />
|
|
|
<a-select style="width: 200px" placeholder="选择状态" />
|
|
|
<a-button type="primary">查 询</a-button>
|
|
|
<a-button>重 置</a-button>
|
|
|
</a-space>
|
|
|
</div>
|
|
|
<!-- 表格 -->
|
|
|
<div id="commonTable">
|
|
|
<div style="margin-bottom: 16px">
|
|
|
<a-space size="large">
|
|
|
<a-button type="primary" :loading="loading" @click="addStaff()">
|
|
|
新增员工
|
|
|
</a-button>
|
|
|
<a-button :disabled="!hasSelected" :loading="loading">
|
|
|
批量操作
|
|
|
</a-button>
|
|
|
</a-space>
|
|
|
<span style="margin-left: 8px">
|
|
|
<template v-if="hasSelected">
|
|
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
|
|
</template>
|
|
|
</span>
|
|
|
</div>
|
|
|
<a-table
|
|
|
:scroll="{ x: 1300 }"
|
|
|
:columns="columns"
|
|
|
:data-source="tableData"
|
|
|
:pagination="pagination"
|
|
|
@change="handleTableChange"
|
|
|
:row-selection="{
|
|
|
selectedRowKeys: selectedRowKeys,
|
|
|
onChange: onSelectChange,
|
|
|
}"
|
|
|
:row-key="
|
|
|
(record, index) => {
|
|
|
return index;
|
|
|
}
|
|
|
"
|
|
|
>
|
|
|
<!-- 操作 -->
|
|
|
<span slot="action" slot-scope="scope">
|
|
|
<a @click="detail(scope)">详情</a>
|
|
|
<span style="margin: 5px">|</span>
|
|
|
<a-switch size="small"></a-switch>
|
|
|
<span style="margin: 5px">|</span>
|
|
|
<a @click="detail(scope)">重置密码</a>
|
|
|
</span>
|
|
|
<span slot="formatter" slot-scope="scope">{{
|
|
|
scope === 1 ? "可" : ""
|
|
|
}}</span>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<!-- 添加员工信息 -->
|
|
|
<a-drawer
|
|
|
title="添加员工信息"
|
|
|
:width="720"
|
|
|
:visible="show.addStaffShow"
|
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
|
@close="addStaffClose"
|
|
|
>
|
|
|
<div class="drawer-content">
|
|
|
<a-form-model
|
|
|
title='1d2'
|
|
|
layout='vertical'
|
|
|
ref="ruleForm"
|
|
|
:model="form"
|
|
|
:rules="rules"
|
|
|
:wrapper-col="{span:18}"
|
|
|
>
|
|
|
<div>基本信息</div>
|
|
|
<a-divider></a-divider>
|
|
|
<a-row>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="真实姓名" prop="actualName">
|
|
|
<a-input v-model="form.actualName" placeholder="请输入真实姓名"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="性别" prop="sex">
|
|
|
<a-select v-model="form.sex" placeholder="请选择性别"></a-select>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="身份证号" prop="idCard">
|
|
|
<a-input v-model="form.idCard" placeholder="请输入身份证号"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item ref="tel" label="手机号" prop="tel">
|
|
|
<a-input v-model="form.tel" placeholder="请输入身份证号" @blur="()=>{$refs.tel.onFieldBlur();}"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="出生日期" prop="birthday">
|
|
|
<a-date-picker v-model="form.birthday"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="密码" prop="password">
|
|
|
<a-input type="password" placeholder='不输入默认为手机号后6位' v-model="form.password"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="电子邮箱" prop="email">
|
|
|
<a-input placeholder='请输入电子邮箱' v-model="form.email"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="居住地址" prop="address">
|
|
|
<a-input placeholder='请输入居住地址' v-model="form.address"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col>
|
|
|
<a-form-model-item label="">
|
|
|
<template>
|
|
|
上传身份证照片
|
|
|
<a-upload
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
list-type="picture-card"
|
|
|
:file-list="fileList"
|
|
|
@preview="handlePreview"
|
|
|
@change="handleChange"
|
|
|
>
|
|
|
<div v-if="fileList.length < 2">
|
|
|
<a-icon type="plus" />
|
|
|
<div class="ant-upload-text">
|
|
|
点击上传
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-upload>
|
|
|
<span style='color:#00000073'>单张最多不超过4M，最多上传2张，支持JPG,PNG格式</span>
|
|
|
</template>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<div>入职信息</div>
|
|
|
<a-divider></a-divider>
|
|
|
<a-row>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="岗位" prop="address">
|
|
|
<a-select placeholder='请选择' v-model="form.address"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="入职时间" prop="entryDate">
|
|
|
<a-date-picker placeholder='请选择入职时间' v-model="form.entryDate"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="薪资" prop="salary">
|
|
|
<a-input placeholder='请输入薪资' v-model="form.salary"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='24'>
|
|
|
<div>上传资料</div>
|
|
|
<a-upload
|
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
|
list-type="picture"
|
|
|
:default-file-list="fileList"
|
|
|
>
|
|
|
<a-button> <a-icon type="upload" /> 点击上传 </a-button>
|
|
|
</a-upload>
|
|
|
<span style='color:#00000073'>支持上传PNG，JPG,PDF文件</span>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<div style='margin-top:20px'>联系信息</div>
|
|
|
<a-divider></a-divider>
|
|
|
<a-row>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="紧急联系人" prop="emergencyContact">
|
|
|
<a-input placeholder='请输入紧急联系人' v-model="form.emergencyContact"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="紧急联系电话" prop="emergencyContactNumber">
|
|
|
<a-input placeholder='请输入紧急联系电话' v-model="form.emergencyContactNumber"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='24'>
|
|
|
<a-form-model-item label="紧急联系地址" prop="emergencyContactAddress">
|
|
|
<a-input placeholder='请输入紧急联系地址' v-model="form.emergencyContactAddress"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<div>其他信息</div>
|
|
|
<a-divider></a-divider>
|
|
|
<a-row>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="婚姻状态" prop="maritalStatus">
|
|
|
<a-select placeholder='请选择婚姻状态' v-model="form.maritalStatus"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="民族" prop="nation">
|
|
|
<a-select placeholder='请输入民族' v-model="form.nation"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="政治面貌" prop="politicalOutlook">
|
|
|
<a-select placeholder='请选择政治面貌' v-model="form.politicalOutlook"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='12'>
|
|
|
<a-form-model-item label="户口类型" prop="accountType">
|
|
|
<a-select placeholder='请选择类型' v-model="form.accountType"/>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
<a-col :span='24'>
|
|
|
<a-form-model-item label="备注" prop="remake">
|
|
|
<a-textarea v-model="form.remake" placeholder="请输入备注"></a-textarea>
|
|
|
</a-form-model-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form-model>
|
|
|
</div>
|
|
|
<div class="drawer-footer">
|
|
|
<a-button :style="{ marginRight: '8px' }" @click="addStaffClose">
|
|
|
关闭
|
|
|
</a-button>
|
|
|
<a-button type="primary" @click="addStaffClose"> 提交 </a-button>
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
function getBase64(file) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const reader = new FileReader();
|
|
|
reader.readAsDataURL(file);
|
|
|
reader.onload = () => resolve(reader.result);
|
|
|
reader.onerror = error => reject(error);
|
|
|
});
|
|
|
}
|
|
|
const treeData = [
|
|
|
{
|
|
|
title: "0-0",
|
|
|
key: "0-0",
|
|
|
children: [
|
|
|
{
|
|
|
title: "0-0-0",
|
|
|
key: "0-0-0",
|
|
|
children: [
|
|
|
{ title: "0-0-0-0", key: "0-0-0-0" },
|
|
|
{ title: "0-0-0-1", key: "0-0-0-1" },
|
|
|
{ title: "0-0-0-2", key: "0-0-0-2" },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
title: "0-0-1",
|
|
|
key: "0-0-1",
|
|
|
children: [
|
|
|
{ title: "0-0-1-0", key: "0-0-1-0" },
|
|
|
{ title: "0-0-1-1", key: "0-0-1-1" },
|
|
|
{ title: "0-0-1-2", key: "0-0-1-2" },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
title: "0-0-2",
|
|
|
key: "0-0-2",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
title: "0-1",
|
|
|
key: "0-1",
|
|
|
children: [
|
|
|
{ title: "0-1-0-0", key: "0-1-0-0" },
|
|
|
{ title: "0-1-0-1", key: "0-1-0-1" },
|
|
|
{ title: "0-1-0-2", key: "0-1-0-2" },
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
title: "0-2",
|
|
|
key: "0-2",
|
|
|
},
|
|
|
];
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
previewVisible: false,
|
|
|
previewImage: '',
|
|
|
fileList: [
|
|
|
],
|
|
|
form: {
|
|
|
actualName: "",
|
|
|
sex: null,
|
|
|
idCard: "",
|
|
|
tel: "",
|
|
|
},
|
|
|
rules: {
|
|
|
actualName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
|
|
|
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
|
|
idCard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
|
|
|
tel: [
|
|
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
|
|
{ min: 11, max: 11, message: "手机号只能为11位", trigger: "blur" },
|
|
|
],
|
|
|
},
|
|
|
show: {
|
|
|
addStaffShow: false,
|
|
|
},
|
|
|
expandedKeys: [],
|
|
|
autoExpandParent: true,
|
|
|
checkedKeys: [],
|
|
|
selectedKeys: [],
|
|
|
treeData,
|
|
|
// 搜索项
|
|
|
searchForm: {
|
|
|
name: "",
|
|
|
code: "",
|
|
|
},
|
|
|
// 列
|
|
|
columns: [
|
|
|
{
|
|
|
title: "真实名称",
|
|
|
dataIndex: "actualName",
|
|
|
width: "200",
|
|
|
},
|
|
|
{
|
|
|
title: "手机号",
|
|
|
dataIndex: "tel",
|
|
|
width: "200",
|
|
|
},
|
|
|
{
|
|
|
title: "所属部门",
|
|
|
dataIndex: "departmentName",
|
|
|
width: "200",
|
|
|
},
|
|
|
{
|
|
|
title: "岗位",
|
|
|
dataIndex: "positionName",
|
|
|
width: "200",
|
|
|
},
|
|
|
{
|
|
|
title: "备注",
|
|
|
dataIndex: "remake",
|
|
|
width: "300",
|
|
|
},
|
|
|
{
|
|
|
title: "操作",
|
|
|
dataIndex: "action",
|
|
|
key: "action",
|
|
|
width: "180",
|
|
|
fixed: "right",
|
|
|
scopedSlots: { customRender: "action" },
|
|
|
},
|
|
|
],
|
|
|
// 数据
|
|
|
tableData: [],
|
|
|
// 分页
|
|
|
pagination: {
|
|
|
current: 1,
|
|
|
total: 0,
|
|
|
pageSize: 10,
|
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
|
showSizeChanger: true,
|
|
|
showQuickJumper: true,
|
|
|
},
|
|
|
loading: false,
|
|
|
selectedRowKeys: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
// 新增组织架构
|
|
|
del() {
|
|
|
this.$confirm({
|
|
|
title: "是否删除",
|
|
|
// okText:'删除',
|
|
|
// cancelText:'取消',
|
|
|
icon: "",
|
|
|
onOk: function () {
|
|
|
console.log(1);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
// 新增员工
|
|
|
addStaff() {
|
|
|
this.show.addStaffShow = true;
|
|
|
},
|
|
|
onSubmit() {
|
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
alert("submit!");
|
|
|
} else {
|
|
|
console.log("error submit!!");
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
resetForm() {
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
},
|
|
|
addStaffClose() {
|
|
|
this.show.addStaffShow = false;
|
|
|
},
|
|
|
onExpand(expandedKeys) {
|
|
|
console.log("onExpand", expandedKeys);
|
|
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
|
// or, you can remove all expanded children keys.
|
|
|
this.expandedKeys = expandedKeys;
|
|
|
this.autoExpandParent = false;
|
|
|
},
|
|
|
onCheck(checkedKeys) {
|
|
|
console.log("onCheck", checkedKeys);
|
|
|
this.checkedKeys = checkedKeys;
|
|
|
},
|
|
|
onSelect(selectedKeys, info) {
|
|
|
console.log("onSelect", info);
|
|
|
this.selectedKeys = selectedKeys;
|
|
|
},
|
|
|
detail(data) {
|
|
|
console.log(data);
|
|
|
this.$router.push({ name: "settle_detail" });
|
|
|
},
|
|
|
onSelectChange(selectedRowKeys) {
|
|
|
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
|
|
this.selectedRowKeys = selectedRowKeys;
|
|
|
},
|
|
|
handleTableChange(pagination) {
|
|
|
console.log(pagination);
|
|
|
const pager = { ...this.pagination };
|
|
|
pager.current = pagination.current;
|
|
|
pager.pageSize = pagination.pageSize;
|
|
|
this.pagination = pager;
|
|
|
},
|
|
|
onChange() {},
|
|
|
handleCancel() {
|
|
|
this.previewVisible = false;
|
|
|
},
|
|
|
async handlePreview(file) {
|
|
|
if (!file.url && !file.preview) {
|
|
|
file.preview = await getBase64(file.originFileObj);
|
|
|
}
|
|
|
this.previewImage = file.url || file.preview;
|
|
|
this.previewVisible = true;
|
|
|
},
|
|
|
handleChange({ fileList }) {
|
|
|
this.fileList = fileList;
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
hasSelected() {
|
|
|
return this.selectedRowKeys.length > 0;
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
checkedKeys(val) {
|
|
|
console.log("onCheck", val);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.left-tree {
|
|
|
padding: 10px;
|
|
|
border-right: 1px solid #0000000f;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
#commonTable {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
</style> |
