转正申请

src/components/AppList/index.vue

@@ -39,26 +39,26 @@ export default {
           name: 'OA',
           type: 'first',
           list: [
+            // {
+            //   type: 1,
+            //   path: 'https://www.baidu.com/',
+            //   title: '自定义应用',
+            //   icon: 'zidingyi',
+            // },
             {
               type: 1,
-              path: 'https://www.baidu.com/',
-              title: '自定义应用',
-              icon: 'zidingyi',
-            },
-            {
-              type: 2,
               path: '/oa/entry',
               title: '入职审批',
               icon: 'qingjia',
             },
             {
               type: 2,
-              path: '/task/my',
-              title: '出差',
+              path: '/oa/turnJust',
+              title: '转正申请',
               icon: 'chuchai',
             },
             {
-              type: 2,
+              type: 3,
               path: '/system/menu',
               title: '系统管理',
               icon: 'chuchai',

src/router/index.js

@@ -45,8 +45,8 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/oa/entry/edit',
-    component: (resolve) => require(['@/views/oa/entry/edit'], resolve),
+    path: '/oa/turnJust',
+    component: (resolve) => require(['@/views/oa/turnJust/index'], resolve),
     hidden: true
   },
   {

src/views/oa/turnJust/DataList.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="container">
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="80px">
+      <el-form-item label="续签人">
+        <el-input v-model="queryParams.loginName" placeholder="续签人" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="员工编号">
+        <el-input v-model="queryParams.loginId" placeholder="员工编号" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="部门">
+        <treeselect style="width: 250px" :default-expand-level="1" v-model="queryParams.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
+      </el-form-item>
+      <el-form-item label="职位">
+        <el-select v-model="queryParams.position" placeholder="职位" clearable style="width: 250px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="转正日期">
+        <el-date-picker style="width: 250px" value-format="yyyy-MM-dd" v-model="queryParams.conversionDate" type="date" placeholder="入职日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="审批状态">
+        <el-select v-model="queryParams.auditStatus" placeholder="审批状态" clearable style="width: 250px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="申请人">
+        <el-input v-model="queryParams.creator" placeholder="申请人" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+    
+      <el-form-item label="申请时间">
+        <el-date-picker
+      v-model="queryParams.createTime"
+      style="width: 250px"
+      type="datetime"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      placeholder="选择申请时间">
+    </el-date-picker>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:role:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList" @row-click="handdle">
+      <el-table-column label="续签人" prop="loginName" min-width="120" />
+      <el-table-column label="员工编号" prop="loginId" min-width="150" />
+      <el-table-column label="部门" prop="deptId" min-width="150" />
+      <el-table-column label="职位" prop="position" min-width="150" />
+      <el-table-column label="转正日期" prop="conversionDate" min-width="100" />
+      <el-table-column label="审批状态" prop="auditStatus" min-width="150" />
+      <el-table-column label="申请人" prop="creator" min-width="150" />
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 修改 -->
+    <el-dialog title="转正申请(修改)" :visible.sync="openEdit" width="800px" append-to-body>
+      <edit :id="id"></edit>
+    </el-dialog>
+    <!-- 详情 -->
+    <el-dialog title="转正申请(详情)" :visible.sync="openDetail" width="800px" append-to-body>
+      <detail :id="id"></detail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  addRole,
+ 
+  exportRole,
+  getRole,
+  listRole,
+  updateRole
+} from "@/api/system/role";
+import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import detail from "./detail.vue";
+import edit from "./edit.vue";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { listDept } from "@/api/system/dept";
+
+export default {
+  name: "SystemRole",
+  components: {
+    detail,
+    edit,
+    Treeselect,
+  },
+  data() {
+    return {
+        // 部门树选项
+        posOptions: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      id:'',
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      openEdit: false,
+      openDetail: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      // 是否显示弹出层（菜单权限）
+      openMenu: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      depts: [], // 部门列表
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: undefined,
+        code: undefined,
+        status: undefined,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        label: "name",
+        children: "children"
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        code: [
+          { required: true, message: "角色标识不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      SysCommonStatusEnum: CommonStatusEnum,
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
+    };
+  },
+  created() {
+    this.getList();
+    this.getListDept();
+  },
+  methods: {
+      /** 查询部门列表 */
+      getListDept() {
+      listDept().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
+      };
+    },
+    handdle(row) {
+      this.id = row.id;
+      if(row.sort==0){
+        this.openEdit = true;
+      }else{
+        this.openDetail = true;
+      }
+      
+      // const id = row.id
+      // getRole(id).then(response => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "入职审批详情";
+      // });
+    },
+
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.queryParams).then(
+        response => {
+          this.roleList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    // 表单重置
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        sort: 0,
+        deptIds: [],
+        menuIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+        menuCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+
+
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateRole(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRole(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+
+
+
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
+          this.exportLoading = true;
+          return exportRole(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '角色数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/oa/turnJust/detail.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="widget-wrapper">
+    <div class="widget-list">
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">入职人</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.loginName">{{ form.loginName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">部门</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.deptName">{{ form.deptName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">职位</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.position">{{ form.position }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">员工类型</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.employeeTypeName">{{ form.employeeTypeName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">性别</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.gender">{{ form.gender }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">出生日期</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.birthday }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">联系电话</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.contactNumber }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">电子邮箱</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.email }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">教育背景</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.education }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">工作经验</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.workExperience }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">入职日期</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.startDate }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">附件</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday" style="color: #5094d5;cursor: pointer;">附件1</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">备注</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.remarks }}</span>
+        </div>
+      </div>
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">审批意见</div>
+        </div>
+
+        <el-input type="textarea" v-model="reason" placeholder="请输入审批建议" />
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">流程动态</div>
+        </div>
+        <el-timeline>
+          <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
+            :type="getTimelineItemType(item)">
+            <p style="font-weight: 700">任务：{{ item.name }}</p>
+            <el-card :body-style="{ padding: '10px' }">
+              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
+                审批人：{{ item.assigneeUser.nickname }}
+                <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+              </label>
+              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+              <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
+              <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
+              <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
+                parseTime(item.endTime)
+                }}</label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
+              <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
+                {{ getDateStar(item.durationInMillis) }} </label>
+              <p v-if="item.reason">
+                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+              </p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div style="float: right;">
+          <el-button @click="handleAudit(false)">拒绝</el-button>
+          <el-button type="primary" @click="handleAudit(true)">同意</el-button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { getLeave } from "@/api/bpm/leave"
+import {
+  approveTask,
+  rejectTask,
+} from "@/api/bpm/task";
+export default {
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+  },
+  data() {
+    return {
+      entryId: undefined, // 编号
+      reason: '',
+      auditRule: {
+        reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
+      },
+      tasks: [
+        {
+          "id": "f514d489-0afd-11ed-a881-427d68986255",
+          "name": "领导审批",
+          "claimTime": null,
+          "createTime": 1658632137000,
+          "suspensionState": null,
+          "processInstance": {
+            "id": "f51374f1-0afd-11ed-a881-427d68986255",
+            "name": "OA 请假",
+            "startUserId": 1,
+            "startUserNickname": "芋道源码",
+            "processDefinitionId": "oa_leave:3:f07c1280-0afd-11ed-a881-427d68986255"
+          },
+          "endTime": null,
+          "durationInMillis": null,
+          "result": 1,
+          "reason": null,
+          "definitionKey": "task-01",
+          "assigneeUser": {
+            "id": 1,
+            "nickname": "芋道源码",
+            "deptId": 103,
+            "deptName": "研发部门"
+          },
+          "parentTaskId": null,
+          "children": null
+        }
+      ],
+      peopleList: ['林动', '萧炎', '叶凡'],
+      // 表单参数
+      form: {
+        loginName: '张三',
+        dept: '软件工程院',
+      },
+    };
+  },
+  created() {
+    this.entryId = this.id || this.$route.query.id;
+    console.log(this.entryId);
+    // this.getDetail();
+  },
+  methods: {
+    handleEdit() {
+      this.$router.push({ path: '/oa/entry/edit' })
+    },
+    handleAudit(pass) {
+      if (!this.reason) {
+        this.$message({
+          message: '请填写审批意见',
+          type: 'warning',
+          customClass: 'myBox'
+        });
+        return;
+      } else {
+        const data = {
+          id: '12',
+          reason: this.reason
+        }
+        if (pass) {
+          this.$modal.msgSuccess({
+              message: '审批通过成功！',
+              customClass: 'myBox'
+            });
+          // approveTask(data).then(response => {
+          //   this.$modal.msgSuccess({
+          //     message: '审批通过成功！',
+          //     customClass: 'myBox'
+          //   });
+          // });
+        } else {
+          this.$modal.msgSuccess({
+              message: '审批不通过成功！',
+              customClass: 'myBox'
+            });
+          // rejectTask(data).then(response => {
+          //   this.$modal.msgSuccess({
+          //     message: '审批不通过成功！',
+          //     customClass: 'myBox'
+          //   });
+          // });
+        }
+      }
+    },
+    getTimelineItemIcon(item) {
+      if (item.result === 1) {
+        return 'el-icon-time';
+      }
+      if (item.result === 2) {
+        return 'el-icon-check';
+      }
+      if (item.result === 3) {
+        return 'el-icon-close';
+      }
+      if (item.result === 4) {
+        return 'el-icon-remove-outline';
+      }
+      if (item.result === 5) {
+        return 'el-icon-back'
+      }
+      return '';
+    },
+    getTimelineItemType(item) {
+      if (item.result === 1) {
+        return 'primary';
+      }
+      if (item.result === 2) {
+        return 'success';
+      }
+      if (item.result === 3) {
+        return 'danger';
+      }
+      if (item.result === 4) {
+        return 'info';
+      }
+      if (item.result === 5) {
+        return 'warning';
+      }
+      if (item.result === 6) {
+        return 'default'
+      }
+      return '';
+    },
+    /** 获得请假信息 */
+    getDetail() {
+      getLeave(this.entryId).then(response => {
+        this.form = response.data;
+      });
+    },
+  }
+};
+</script>
+<style>
+/* .el-timeline-item__wrapper {
+  top: -12px !important;
+} */
+</style>
+<style lang="scss" scoped>
+.widget-wrapper>.widget-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.x-grid-col-6 {
+  width: 50%;
+}
+
+.x-grid-col-12 {
+  width: 100%;
+}
+
+.fx-field {
+  line-height: 20px;
+  padding: 7px 12px 12px;
+  position: relative;
+}
+
+.fx-field .field-label {
+  word-wrap: break-word;
+  color: #141e31;
+  display: flex;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 5px 0;
+  position: relative;
+  word-break: break-word;
+}
+
+.fx-field .field-label .field-required {
+  color: #eb5050;
+  margin-left: -6px;
+  position: relative;
+}
+
+.fx-field .field-label .field-name {
+  overflow: hidden;
+}
+
+.field-component {
+  word-wrap: break-word;
+  background: #f5f6f8;
+  border-radius: 2px;
+  color: #141e31;
+  font-size: 14px;
+  line-height: 20px;
+  min-height: 32px;
+  padding: 6px 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+ul {
+  padding-left: 0px !important;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+</style>

src/views/oa/turnJust/edit.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="container">
+      <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
+              <el-form-item label="转正人" prop="loginName">
+                <el-input v-model="form.loginName" placeholder='点击选择转正人' readonly @click.native="openSingle"></el-input>
+              </el-form-item>
+              <el-form-item label="员工编号">
+                <el-input v-model="form.loginId" placeholder='员工编号' readonly></el-input>
+              </el-form-item>
+              <el-form-item label="部门">
+                <el-input v-model="form.deptId" placeholder='部门' readonly></el-input>
+                <!-- <treeselect :default-expand-level="1" v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" /> -->
+              </el-form-item>
+              <el-form-item label="职位">
+                <el-input v-model="form.position" placeholder='职位' readonly></el-input>
+                <!-- <el-select v-model="form.position" placeholder="请选择" style="width: 100%;">
+                  <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="入职日期" prop="loginName">
+                <el-input v-model="form.startDate" placeholder='入职日期' readonly></el-input>
+                <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%;">
+                </el-date-picker> -->
+              </el-form-item>
+              <el-form-item label="试用期结束日期" prop="probationEndDate">
+                <el-input v-model="form.probationEndDate" placeholder='试用期结束日期' readonly></el-input>
+                <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%;">
+                </el-date-picker> -->
+              </el-form-item>
+              <el-form-item label="转正日期" prop="conversionDate">
+                <el-date-picker value-format="yyyy-MM-dd" v-model="form.conversionDate" type="date" placeholder="转正日期" style="width: 100%;">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="转正申请理由" prop="conversionReason">
+                <el-input maxlength="500" rows="4" show-word-limit type="textarea" v-model="form.conversionReason" placeholder='转正申请理由'></el-input>
+              </el-form-item>
+
+             
+              <el-form-item label="工作总结">
+                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.workSummary" placeholder='工作总结'></el-input>
+              </el-form-item>
+            
+              <el-form-item label="附件">
+                <!-- <FileUpload v-model="form.files" :limit="1"/> -->
+            <el-upload
+              action=""
+              ref="privateKeyContentFile"
+              :limit="1"
+              :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 maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入备注" />
+              </el-form-item>
+              <el-form-item label="审批人" prop="peopleList">
+                <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
+                <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
+                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                  @close="handleClose(tag)">
+                  {{ tag }}
+                </el-tag>
+
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit()">提交</el-button>
+                <el-button @click="onSave()">暂存</el-button>
+              </el-form-item>
+            </el-form>
+            <PeopleSelect ref="peopleSelect" type="multiple" :isCheck="true" :open="multiplePeopleOpen" @cancel="multiplePeopleOpen = false"
+          @submit="submitMultiple"></PeopleSelect>
+          <PeopleSelect ref="peopleSelect" type="single" :isCheck="true" :open="singlePeopleOpen" @cancel="singlePeopleOpen = false"
+            @submit="submitSingle"></PeopleSelect>
+           
+    </div>
+
+</template>
+
+<script>
+import { getLeave }  from "@/api/bpm/leave"
+import { listDept } from "@/api/system/dept";
+import PeopleSelect from "@/components/PeopleSelect/index.vue";
+import FileUpload from "@/components/FileUpload";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: 'Index',
+  components: {
+    PeopleSelect,
+    FileUpload,
+    Treeselect,
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+  },
+  data() {
+    return {
+      entryId: undefined, // 编号
+      // 部门树选项
+      posOptions: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      deptOptions: [],
+      peopleList: [],
+      form: {
+        loginName: undefined,
+        loginId: undefined,
+        deptId: undefined,
+        position: undefined,
+        startDate: undefined,
+
+        probationEndDate: undefined,
+        conversionDate: undefined,
+        conversionReason: undefined,
+        workSummary: undefined,
+        files:undefined,
+
+        remarks: undefined,
+        peopleList: '',
+      },
+   
+        
+      rules: {
+        loginName: [
+            { required: true, message: '请输入活动名称' },
+            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          employeeType: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          gender: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          birthday: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          contactNumber: [
+          { required: true, trigger: "blur", message: "联系电话不能为空" },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[0-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value) === false) {
+                callback(new Error("联系电话格式错误"));
+              } else {
+                callback();
+              }
+            }, trigger: "blur"
+          }
+          ],
+          email: [
+          {
+            required: true,
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        startDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          probationEndDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          conversionDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          conversionReason: [
+            { required: true, trigger: "blur", message: "请输入转正申请理由"  }
+          ],
+          peopleList:[
+            { required: true, message: '请选择审批人', }
+          ]
+        },
+      status: true,
+
+     //是否打开选人组件，默认不打开
+     multiplePeopleOpen: false,
+      singlePeopleOpen: false,
+      fileAccept: ".crt",
+      queryParams: {
+        name: undefined,
+        status: undefined
+      },
+    }
+  },
+
+  created() {
+    this.entryId = this.id || this.$route.query.id;
+    console.log(this.entryId);
+    // this.getDetail();
+    this.getList();
+  },
+  methods: {
+    /** 获得表单信息 */
+    getDetail() {
+      getLeave(this.entryId).then(response => {
+        this.form = response.data;
+      });
+    },
+    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 < 5
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 5MB')
+      }
+      return isRightSize
+    },
+    appCertUpload(event) {
+      console.log(event);
+      // const file = event.file;
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.files = e.target.result
+        console.log(this.form.files);
+      }
+      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() {
+       this.$refs.form.validate(valid => {
+          if (valid) {
+            console.log(this.form);
+            this.$message.success('提交成功')
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+    },
+    //暂存
+    onSave() {
+
+    },
+    // 关闭标签
+    handleClose(tag) {
+      this.peopleList.splice(this.peopleList.indexOf(tag), 1);
+    },
+   //打开选人弹窗
+   openSingle() {
+      this.singlePeopleOpen = true;
+    },
+    openMultiple() {
+      this.multiplePeopleOpen = true;
+    },
+    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+    submitMultiple(peopleList,nikeNamelist) {
+      console.log(peopleList);
+      console.log(nikeNamelist);
+      this.peopleList = nikeNamelist;
+      this.form.peopleList = nikeNamelist;
+      this.multiplePeopleOpen = false;
+    },
+    submitSingle(peopleList,nikeNamelist) {
+      console.log(peopleList);
+      console.log(nikeNamelist);
+      this.form.loginName = nikeNamelist;
+      this.singlePeopleOpen = false;
+    },
+    //获取状态
+    setStatus(status) {
+      this.status = status
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+
+.button-new-tag {
+  margin-right: 10px;
+  height: 32px;
+  line-height: 32px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>

src/views/oa/turnJust/index.vue

@@ -0,0 +1,380 @@
+<template>
+  <div>
+    <div class='fixed-header'>
+      <oabar />
+    </div>
+    <div class="dashboard-container">
+      <div v-if="status" class="apply-box">
+        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
+          <div class="from-box">
+            <div class="title">转正申请</div>
+            <el-divider></el-divider>
+            <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
+              <el-form-item label="转正人" prop="loginName">
+                <el-input v-model="form.loginName" placeholder='点击选择转正人' readonly @click.native="openSingle"></el-input>
+              </el-form-item>
+              <el-form-item label="员工编号">
+                <el-input v-model="form.loginId" placeholder='员工编号' readonly></el-input>
+              </el-form-item>
+              <el-form-item label="部门">
+                <el-input v-model="form.deptId" placeholder='部门' readonly></el-input>
+                <!-- <treeselect :default-expand-level="1" v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" /> -->
+              </el-form-item>
+              <el-form-item label="职位">
+                <el-input v-model="form.position" placeholder='职位' readonly></el-input>
+                <!-- <el-select v-model="form.position" placeholder="请选择" style="width: 100%;">
+                  <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="入职日期" prop="loginName">
+                <el-input v-model="form.startDate" placeholder='入职日期' readonly></el-input>
+                <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%;">
+                </el-date-picker> -->
+              </el-form-item>
+              <el-form-item label="试用期结束日期" prop="probationEndDate">
+                <el-input v-model="form.probationEndDate" placeholder='试用期结束日期' readonly></el-input>
+                <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择日期" style="width: 100%;">
+                </el-date-picker> -->
+              </el-form-item>
+              <el-form-item label="转正日期" prop="conversionDate">
+                <el-date-picker value-format="yyyy-MM-dd" v-model="form.conversionDate" type="date" placeholder="转正日期" style="width: 100%;">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="转正申请理由" prop="conversionReason">
+                <el-input maxlength="500" rows="4" show-word-limit type="textarea" v-model="form.conversionReason" placeholder='转正申请理由'></el-input>
+              </el-form-item>
+
+             
+              <el-form-item label="工作总结">
+                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.workSummary" placeholder='工作总结'></el-input>
+              </el-form-item>
+            
+              <el-form-item label="附件">
+                <!-- <FileUpload v-model="form.files" :limit="1"/> -->
+            <el-upload
+              action=""
+              ref="privateKeyContentFile"
+              :limit="1"
+              :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 maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入备注" />
+              </el-form-item>
+              <el-form-item label="审批人" prop="peopleList">
+                <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
+                <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
+                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                  @close="handleClose(tag)">
+                  {{ tag }}
+                </el-tag>
+
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="onSubmit()">提交</el-button>
+                <el-button @click="onSave()">暂存</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <PeopleSelect ref="peopleSelect" type="multiple" :isCheck="true" :open="multiplePeopleOpen" @cancel="multiplePeopleOpen = false"
+          @submit="submitMultiple"></PeopleSelect>
+          <PeopleSelect ref="peopleSelect" type="single" :isCheck="true" :open="singlePeopleOpen" @cancel="singlePeopleOpen = false"
+            @submit="submitSingle"></PeopleSelect>
+        </el-card>
+
+      </div>
+      <div v-else class="data-list-box">
+        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
+          <div class="dataList-box">
+            <DataList></DataList>
+          </div>
+        </el-card>
+
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+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";
+import FileUpload from "@/components/FileUpload";
+
+export default {
+  name: 'Index',
+  components: {
+    Oabar,
+    PeopleSelect,
+    DataList,
+    Treeselect,
+    FileUpload,
+  },
+  data() {
+    return {
+      // 部门树选项
+      posOptions: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      deptOptions: [],
+      peopleList: [],
+      form: {
+        loginName: undefined,
+        loginId: undefined,
+        deptId: undefined,
+        position: undefined,
+        startDate: undefined,
+
+        probationEndDate: undefined,
+        conversionDate: undefined,
+        conversionReason: undefined,
+        workSummary: undefined,
+        files:undefined,
+
+        remarks: undefined,
+        peopleList: '',
+      },
+   
+        
+      rules: {
+        loginName: [
+            { required: true, message: '请输入活动名称' },
+            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          employeeType: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          gender: [
+            { required: true, message: '请选择', trigger: 'change' }
+          ],
+          birthday: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          contactNumber: [
+          { required: true, trigger: "blur", message: "联系电话不能为空" },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[0-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value) === false) {
+                callback(new Error("联系电话格式错误"));
+              } else {
+                callback();
+              }
+            }, trigger: "blur"
+          }
+          ],
+          email: [
+          {
+            required: true,
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        startDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          probationEndDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          conversionDate: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          conversionReason: [
+            { required: true, trigger: "blur", message: "请输入转正申请理由"  }
+          ],
+          peopleList:[
+            { required: true, message: '请选择审批人', }
+          ]
+        },
+      status: true,
+
+      //是否打开选人组件，默认不打开
+      multiplePeopleOpen: false,
+      singlePeopleOpen: 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 < 5
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 5MB')
+      }
+      return isRightSize
+    },
+    appCertUpload(event) {
+      console.log(event);
+      // const file = event.file;
+      const readFile = new FileReader()
+      readFile.onload = (e) => {
+        this.form.files = e.target.result
+        console.log(this.form.files);
+      }
+      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() {
+       this.$refs.form.validate(valid => {
+          if (valid) {
+            console.log(this.form);
+            this.$message.success('提交成功')
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+    },
+    //暂存
+    onSave() {
+
+    },
+    // 关闭标签
+    handleClose(tag) {
+      this.peopleList.splice(this.peopleList.indexOf(tag), 1);
+    },
+    //打开选人弹窗
+    openSingle() {
+      this.singlePeopleOpen = true;
+    },
+    openMultiple() {
+      this.multiplePeopleOpen = true;
+    },
+    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+    submitMultiple(peopleList,nikeNamelist) {
+      console.log(peopleList);
+      console.log(nikeNamelist);
+      this.peopleList = nikeNamelist;
+      this.form.peopleList = nikeNamelist;
+      this.multiplePeopleOpen = false;
+    },
+    submitSingle(peopleList,nikeNamelist) {
+      console.log(peopleList);
+      console.log(nikeNamelist);
+      this.form.loginName = nikeNamelist;
+      this.singlePeopleOpen = false;
+    },
+    //获取状态
+    setStatus(status) {
+      this.status = status
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: 100%;
+  transition: width 0.28s;
+}
+
+.dashboard-container {
+  background: #f5f6f8;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 60px;
+  padding: 32px;
+
+  .apply-box {
+    width: 50%;
+    margin: 0 auto;
+  }
+
+  .data-list-box {
+    width: 100%;
+    margin: 0 auto;
+  }
+}
+
+.from-box {
+  padding: 20px 0;
+
+  .title {
+    font-weight: bold;
+    font-size: 26px;
+    margin-bottom: 20px;
+  }
+}
+
+.dataList-box {
+  padding: 10px 40px;
+}
+
+
+
+
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+
+.button-new-tag {
+  margin-right: 10px;
+  height: 32px;
+  line-height: 32px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>