|
|
@@ -10,11 +10,57 @@
|
|
|
<div class="title">入职审批</div>
|
|
|
<el-divider></el-divider>
|
|
|
<el-form :model="form" label-position="top" label-width="80px">
|
|
|
- <el-form-item label="入职员工姓名">
|
|
|
- <el-input v-model="form.name" placeholder='给应用命名,例如‘‘客户管理系统’’'></el-input>
|
|
|
+ <el-form-item label="入职人">
|
|
|
+ <el-input v-model="form.name" placeholder='请输入'></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="用人部门">
|
|
|
- <el-input v-model="form.url" placeholder='应用访问地址,例如‘‘https://www.baidu.com/’’'></el-input>
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="职位">
|
|
|
+ <el-select v-model="form.employeeType" placeholder="请选择">
|
|
|
+ <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别">
|
|
|
+ <el-select v-model="form.gender" placeholder="请选择">
|
|
|
+ <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="出生日期">
|
|
|
+ <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话">
|
|
|
+ <el-input v-model="form.contactNumber" placeholder='请输入'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电子邮箱">
|
|
|
+ <el-input v-model="form.email" placeholder='请输入'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="教育背景">
|
|
|
+ <el-input v-model="form.education" placeholder='请输入'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工作经验">
|
|
|
+ <el-input v-model="form.workExperience" placeholder='请输入'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="入职日期">
|
|
|
+ <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件">
|
|
|
+ <el-upload
|
|
|
+ action=""
|
|
|
+ ref="privateKeyContentFile"
|
|
|
+ :limit="1"
|
|
|
+ :accept="fileAccept"
|
|
|
+ :http-request="appCertUpload"
|
|
|
+ :before-upload="fileBeforeUpload">
|
|
|
+ <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="审批人">
|
|
|
<el-button class="button-new-tag" @click="openPS">+ 添加</el-button>
|
|
|
@@ -22,7 +68,7 @@
|
|
|
@close="handleClose(tag)">
|
|
|
{{ tag }}
|
|
|
</el-tag>
|
|
|
-
|
|
|
+
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit()">提交</el-button>
|
|
|
@@ -54,39 +100,112 @@ import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
|
|
|
import Oabar from '../../../layout/components/Oabar.vue'
|
|
|
import PeopleSelect from "@/components/PeopleSelect/index.vue";
|
|
|
import DataList from "./DataList.vue";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import { listDept } from "@/api/system/dept";
|
|
|
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
components: {
|
|
|
Oabar,
|
|
|
PeopleSelect,
|
|
|
- DataList
|
|
|
+ DataList,
|
|
|
+ Treeselect
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 部门树选项
|
|
|
+ posOptions: [{
|
|
|
+ value: '选项1',
|
|
|
+ label: '黄金糕'
|
|
|
+ }, {
|
|
|
+ value: '选项2',
|
|
|
+ label: '双皮奶'
|
|
|
+ }, {
|
|
|
+ value: '选项3',
|
|
|
+ label: '蚵仔煎'
|
|
|
+ }, {
|
|
|
+ value: '选项4',
|
|
|
+ label: '龙须面'
|
|
|
+ }, {
|
|
|
+ value: '选项5',
|
|
|
+ label: '北京烤鸭'
|
|
|
+ }],
|
|
|
+ deptOptions: [],
|
|
|
peopleList: [],
|
|
|
form: {
|
|
|
- name: '',
|
|
|
- url: '',
|
|
|
+ name: undefined,
|
|
|
+ deptId: undefined,
|
|
|
+ position: undefined,
|
|
|
+ employeeType: undefined,
|
|
|
+ gender: undefined,
|
|
|
+ birthday: undefined,
|
|
|
+ contactNumber: undefined,
|
|
|
+ email: undefined,
|
|
|
+ education: undefined,
|
|
|
+ workExperience: undefined,
|
|
|
+ startDate: undefined,
|
|
|
+ remarks: undefined,
|
|
|
},
|
|
|
status: true,
|
|
|
|
|
|
type: 'single',
|
|
|
//是否打开选人组件,默认不打开
|
|
|
peopleOpen: false,
|
|
|
+ fileAccept: ".crt",
|
|
|
+ queryParams: {
|
|
|
+ name: undefined,
|
|
|
+ status: undefined
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ fileBeforeUpload(file) {
|
|
|
+ let format = '.' + file.name.split(".")[1];
|
|
|
+ if (format !== this.fileAccept) {
|
|
|
+ this.$message.error('请上传指定格式"' + this.fileAccept + '"文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let isRightSize = file.size / 1024 / 1024 < 2
|
|
|
+ if (!isRightSize) {
|
|
|
+ this.$message.error('文件大小超过 2MB')
|
|
|
+ }
|
|
|
+ return isRightSize
|
|
|
+ },
|
|
|
+ appCertUpload(event) {
|
|
|
+ const readFile = new FileReader()
|
|
|
+ readFile.onload = (e) => {
|
|
|
+ this.formData.config.appCertContent = e.target.result
|
|
|
+ }
|
|
|
+ readFile.readAsText(event.file);
|
|
|
+ },
|
|
|
+ /** 查询部门列表 */
|
|
|
+ getList() {
|
|
|
+ listDept(this.queryParams).then(response => {
|
|
|
+ this.deptOptions = this.handleTree(response.data, "id");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 转换部门数据结构 */
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.name,
|
|
|
+ children: node.children
|
|
|
+ };
|
|
|
+ },
|
|
|
//提交
|
|
|
- onSubmit(){
|
|
|
+ onSubmit() {
|
|
|
|
|
|
},
|
|
|
//暂存
|
|
|
- onSave(){
|
|
|
+ onSave() {
|
|
|
|
|
|
},
|
|
|
// 关闭标签
|
|
|
@@ -140,16 +259,18 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
-.from-box{
|
|
|
+
|
|
|
+.from-box {
|
|
|
padding: 20px 50px;
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
font-weight: bold;
|
|
|
font-size: 26px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.dataList-box{
|
|
|
+.dataList-box {
|
|
|
padding: 10px 40px;
|
|
|
}
|
|
|
|