修改

src/api/oa/leave.js

@@ -0,0 +1,95 @@
+import request from '@/utils/request'
+
+// 创建流程
+export function create(data) {
+  return request({
+    url: '/bpm/oa-leave/commit',
+    method: 'post',
+    data: data
+  })
+}
+//驳回或撤回后再次提交通用用事项审批流程信息
+export function reCommit(data) {
+  return request({
+    url: '/bpm/oa-leave/reCommit',
+    method: 'post',
+    data: data
+  })
+}
+// 暂存数据保存
+export function save(data) {
+  return request({
+    url: '/bpm/oa-leave/staging',
+    method: 'post',
+    data: data
+  })
+}
+// 暂存数据删除
+export function deleteById(id) {
+  return request({
+    url: 'bpm/oa-leave/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 关闭审批流程信息
+export function closeById(id) {
+  return request({
+    url: '/bpm/oa-leave/close?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得详情
+export function getDetail(id) {
+  return request({
+    url: '/bpm/oa-leave/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得列表
+export function getListData(query) {
+  return request({
+    url: '/bpm/oa-leave/page',
+    method: 'get',
+    params: query
+  })
+}
+// 导出列表
+export function exportList(query) {
+  return request({
+    url: '/bpm/oa-leave/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}
+
+//审批同意通用事项审批流程信息
+export function agree(data) {
+  return request({
+    url: '/bpm/oa-leave/agree',
+    method: 'post',
+    data: data
+  })
+}
+
+//驳回通用事项审批流程信息
+export function disagree(data) {
+  return request({
+    url: '/bpm/oa-leave/disagree',
+    method: 'post',
+    data: data
+  })
+}
+
+//撤回通用事项审批流程信息
+export function revocation(data) {
+  return request({
+    url: '/bpm/oa-leave/revocation',
+    method: 'post',
+    data: data
+  })
+}
+

src/router/index.js

@@ -64,13 +64,18 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/oa/renew/index'], resolve),
     hidden: true
   },
- 
   //离职申请
   {
     path: '/oa/turnover',
     component: (resolve) => require(['@/views/oa/turnover/index'], resolve),
     hidden: true
   },
+    //请假申请
+    {
+      path: '/oa/leave',
+      component: (resolve) => require(['@/views/oa/leave/index'], resolve),
+      hidden: true
+    },
   {
     path: '/password/forget',
     component: (resolve) => require(['@/views/password/forget'], resolve),

src/views/oa/leave/DataList.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="container">
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="80px">
+      <el-form-item label="请假人" prop="employeeName">
+        <el-input v-model="queryParams.employeeName" placeholder="请输入请假人" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="部门" prop="deptId">
+        <treeselect style="width: 250px" :default-expand-level="1" v-model="queryParams.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
+      </el-form-item>
+      <el-form-item label="职位" prop="position">
+        <el-select v-model="queryParams.position" placeholder="请选择"
+        style="width: 250px">
+          <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="employeePhone">
+        <el-input v-model="queryParams.employeePhone" placeholder="请输入手机号" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="请假类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择"
+        style="width: 250px">
+          <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="startData">
+            <el-date-picker v-model="queryParams.startData" style="width: 250px" value-format="yyyy-MM-dd HH:mm:ss"
+              type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']" />
+          </el-form-item>
+          <el-form-item label="结束日期" prop="endData">
+            <el-date-picker v-model="queryParams.endData" style="width: 250px" value-format="yyyy-MM-dd HH:mm:ss"
+              type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']" />
+          </el-form-item>
+          <el-form-item label="申请时间" prop="createTime">
+            <el-date-picker v-model="queryParams.createTime" style="width: 250px" value-format="yyyy-MM-dd HH:mm:ss"
+              type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']" />
+          </el-form-item>
+      <el-form-item label="审批状态" prop="auditStatus">
+        <el-select v-model="queryParams.auditStatus" placeholder="审批状态" clearable style="width: 250px">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </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="dataList" @row-click="handdle">
+      <el-table-column label="请假人" align="center" prop="employeeName" min-width="100" />
+      <el-table-column label="部门" align="center" prop="deptName" min-width="100" />
+      <el-table-column label="职位" align="center" prop="position" min-width="100" />
+      <el-table-column label="手机号" align="center" prop="employeePhone" min-width="100" />
+      <el-table-column label="请假类型" align="center" prop="type" min-width="100" />
+      <el-table-column label="开始日期" align="center" prop="startData" min-width="120" />
+      <el-table-column label="结束日期" align="center" prop="endData" min-width="120" />
+      <el-table-column label="请假天数" align="center" prop="day" min-width="100" />
+      <el-table-column label="申请时间"  align="center" prop="createTime" min-width="120">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="审批状态" align="center" prop="auditStatus" min-width="100">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.BPM_TASK_AUDIT_STATUS" :value="scope.row.auditStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="当前处理人" align="center" prop="currentAuditEmployeeName" min-width="100" />
+    </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" v-loading="detailLoading">
+      <edit :id="id"></edit>
+    </el-dialog>
+    <!-- 详情 -->
+    <el-dialog title="请假申请(详情)" :visible.sync="openDetail" width="800px" v-loading="detailLoading">
+      <detail :id="id"></detail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getListData,exportList }  from "@/api/oa/universal"
+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 {
+      detailLoading:false,
+        posOptions: [],
+      id:'',
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      dataList: [],
+      openEdit: false,
+      openDetail: false,
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        employeeName: undefined,
+        deptId: undefined,
+        position: undefined,
+        employeePhone: undefined,
+        type: undefined,
+        startData: [],
+        endData: [],
+        auditStatus: undefined,
+        createTime: []
+      },
+    };
+  },
+  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.auditStatus==0){
+        this.openEdit = true;
+      }else{
+        this.openDetail = true;
+      }
+    },
+    closeEdit() {
+      this.openEdit = false;
+      this.getList();
+    },
+
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      getListData(this.queryParams).then(
+        response => {
+          this.dataList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+
+
+ 
+
+
+
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有数据项?').then(function() {
+          this.exportLoading = true;
+          return exportList(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '通用审批数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
+};
+</script>

src/views/oa/leave/detail.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="widget-wrapper">
+    <div class="widget-list" v-loading="loading">
+      <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.employeeName }}</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.employeePhone">{{ form.employeePhone }}</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.type">{{ form.type }}</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.startData">{{ form.startData }}</span>
+          &nbsp;
+          <span>{{ form.concreteDay1=='am'?'上午':'下午' }}</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.startData">{{ form.endData }}</span>
+          &nbsp;
+          <span>{{ form.concreteDay2=='am'?'上午':'下午' }}</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.day">{{ form.day }}</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.education">{{ form.reason }}</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">
+          <div v-for="(item, index) in form.fileList" :key="index">
+            <a :href="item.url" target="_blank" :title="item.name" style="color: #5094d5;">{{ item.name }}</a>
+          </div>
+        </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.remarks">{{ form.remarks }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="widget-list">
+      <div class="fx-field x-grid-col-12" v-if="(form.auditStatus==2 || form.auditStatus==1) && name=='todo'">
+        <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 v-if="name=='todo'">
+          <el-button type="primary" @click="handleAudit(true)" v-loading.fullscreen.lock="fullscreenLoading">同意</el-button>
+            <el-button @click="handleAudit(false)" v-loading.fullscreen.lock="fullscreenLoading">驳回</el-button>
+          </div>
+          <div v-if="name=='my'">
+            <el-button v-if="form.auditStatus==1" type="warning" @click="handleRevocation()" v-loading.fullscreen.lock="fullscreenLoading">撤回</el-button>
+          </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetail,agree,disagree,revocation } from "@/api/oa/universal"
+import {getDate} from "@/utils/dateUtils";
+export default {
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+    name: {
+      type: String,
+      default: undefined
+    },
+  },
+  data() {
+    return {
+      fullscreenLoading:false,
+      loading:false,
+      reason: '',
+      auditRule: {
+        reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
+      },
+      tasks: [],
+      // 表单参数
+      form: {},
+    };
+  },
+  created() {
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        this.getDetail(val);
+      }
+    }
+  },
+  methods: {
+    getDateStar(ms) {
+      return getDate(ms);
+    },
+    handleRevocation(){
+      console.log(this.form.taskId);
+      this.$modal.confirm('是否确认撤回?').then(() => {
+        this.fullscreenLoading = true;
+        revocation({id:this.form.taskId}).then(response => {
+          this.fullscreenLoading = false;
+          this.$modal.msgSuccess("撤回成功");
+          this.$parent.$parent.closeEdit();
+        })
+      }).catch(() => { });
+    },
+    handleAudit(pass) {
+      if (!this.reason) {
+        this.$message({
+          message: '请填写审批意见',
+          type: 'warning',
+          customClass: 'myBox'
+        });
+        return;
+      } else {
+        const data = {
+          id: this.form.taskId,
+          reason: this.reason,
+        }
+        if (pass) {
+          this.fullscreenLoading = true;
+          agree(data).then(response => {
+            this.fullscreenLoading = false;
+            this.$parent.$parent.closeEdit();
+            this.$modal.msgSuccess({
+              message: '审批通过成功！',
+              customClass: 'myBox'
+            });
+          });
+        } else {
+          this.fullscreenLoading = true;
+          disagree(data).then(response => {
+            this.fullscreenLoading = false;
+            this.$parent.$parent.closeEdit();
+            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(val) {
+      this.$parent.$parent.detailLoading = true
+      getDetail(val).then(response => {
+        this.$parent.$parent.detailLoading = false
+        this.form = response.data;
+        this.tasks = response.data.auditRecordList;
+      });
+    },
+  }
+};
+</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/leave/edit.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="container">
+    <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
+      <el-form-item label="请假人">
+        <el-input v-model="form.employeeName" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="部门">
+        <el-input v-model="form.deptName" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="职位">
+        <el-input v-model="form.position" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="form.employeePhone" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="请假类型" prop="type">
+        <el-select v-model="form.type" filterable allow-create default-first-option 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="startData">
+        <el-date-picker value-format="yyyy-MM-dd" v-model="form.startData" type="date" placeholder="选择日期"
+          style="width: 100%;" @change="upDay">
+        </el-date-picker>
+        <el-radio-group v-model="form.concreteDay1" @change="upDay">
+          <el-radio label="am">上午</el-radio>
+          <el-radio label="pm">下午</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- <el-form-item label="开始时段" prop="concreteDay1">
+        <el-radio-group v-model="form.concreteDay1">
+          <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
+            :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item> -->
+      <el-form-item label="结束日期" prop="endData">
+        <el-date-picker value-format="yyyy-MM-dd" v-model="form.endData" type="date" placeholder="选择日期"
+          style="width: 100%;" @change="upDay">
+        </el-date-picker>
+        <el-radio-group v-model="form.concreteDay2" @change="upDay">
+          <el-radio label="am">上午</el-radio>
+          <el-radio label="pm">下午</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- <el-form-item label="结束时段" prop="concreteDay2">
+        <el-radio-group v-model="form.concreteDay2">
+          <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
+            :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item> -->
+      <el-form-item label="请假天数">
+        <el-input v-model="form.day" placeholder='请假天数' @input="changeDay()"></el-input>
+      </el-form-item>
+      <el-form-item label="请假原因" prop="reason">
+        <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.reason"
+          placeholder='请输入请假原因'></el-input>
+      </el-form-item>
+      <el-form-item label="附件">
+        <el-upload :action="fileUrl" :headers="headers" :file-list="files" :on-success="handleFileSuccessCite"
+          :before-upload="beforeUploadFile" :on-remove="handleRemove">
+          <el-button size="small" type="primary">点击上传</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 v-model="form.peopleList" style="display: none;" />
+        <el-button class="button-new-tag" @click="openPS">+ 添加</el-button>
+        <span v-for="(tag, index) in nikeNamelist" :key="index">
+          <i class="el-icon-arrow-right"></i>
+          <el-tag type="info" closable :disable-transitions="false" @close="handleClose(index)">
+            <span class="user-avatar">{{ tag.substring(0, 1) || 'U' }}</span>
+            {{ tag }}
+          </el-tag>
+        </span>
+      </el-form-item>
+      <el-form-item label="流程动态" v-if="tasks.length > 0">
+        <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>
+      </el-form-item>
+      <el-form-item>
+        <div v-if="name == 'todo'">
+          <el-button type="primary" @click="onReCommit()" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
+          <el-button type="warning" @click="onClose()" v-loading.fullscreen.lock="fullscreenLoading">关闭</el-button>
+        </div>
+        <div v-else>
+          <el-button type="primary" @click="onSubmit()" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
+          <el-button @click="onSave()" v-loading.fullscreen.lock="fullscreenLoading">暂存</el-button>
+          <el-button v-if="form.auditStatus == 0" type="danger" @click="onDelete()"
+            v-loading.fullscreen.lock="fullscreenLoading">删除</el-button>
+        </div>
+
+      </el-form-item>
+    </el-form>
+    <PeopleSelect ref="peopleSelect" :type="type" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen = false"
+      @submit="submitPeople"></PeopleSelect>
+
+  </div>
+
+</template>
+
+<script>
+import { getDetail, create, reCommit, save, deleteById, closeById } from "@/api/oa/universal"
+import { getDate } from "@/utils/dateUtils";
+import { getUserProfile } from "@/api/system/user";
+import { listDept } from "@/api/system/dept";
+import PeopleSelect from "@/components/PeopleSelect/index.vue";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getBaseHeader } from "@/utils/request";
+export default {
+  name: 'Index',
+  components: {
+    PeopleSelect,
+    Treeselect,
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+    name: {
+      type: String,
+      default: undefined
+    },
+  },
+  data() {
+    return {
+      fullscreenLoading: false,
+      tasks: [],
+      loading: false,
+      files: [],
+      // 设置上传的请求头部
+      headers: getBaseHeader(),
+      // 上传的地址
+      fileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/uploaData',
+      // fileUrl: 'http://192.168.100.249:48080/admin-api/infra/file/uploaData',
+      // 部门树选项
+      posOptions: [],
+      deptOptions: [],
+      nikeNamelist: [],
+      form: {
+        employeeName: undefined,
+        deptName: undefined,
+        position: undefined,
+        employeePhone: undefined,
+
+
+        type: undefined,
+        startData: undefined,
+        concreteDay1: 'am',
+        entData: undefined,
+        concreteDay2: 'am',
+        day: undefined,
+        reason: undefined,
+        fileIdList: undefined,
+        remarks: undefined,
+        peopleList: '',
+      },
+      rules: {
+        type: [
+          { required: true, message: '请选择请假类型', trigger: 'change' },
+        ],
+        startData: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        endData: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        reason: [
+          { required: true, message: '请输入请假原因', trigger: 'blur' }
+        ],
+        peopleList: [
+          { required: true, message: '请选择审批人', }
+        ]
+      },
+      status: true,
+
+      type: 'multiple',
+      //是否打开选人组件，默认不打开
+      peopleOpen: false,
+      queryParams: {
+        name: undefined,
+        status: undefined
+      },
+    }
+  },
+
+  created() {
+    this.getDeptList();
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.getDetail(val);
+        } else {
+          this.getUser();
+        }
+      }
+    }
+  },
+  methods: {
+    changeDay(){
+      let num = this.form.day;
+      this.form.day = this.NumberCheck(num);
+    },
+    NumberCheck(num) {
+      console.log(num);
+      var str = num;
+      var len1 = str.substr(0, 1);
+      var len2 = str.substr(1, 1);
+      //如果第一位是0，第二位不是点，就用数字把点替换掉
+      if (str.length > 1 && len1 == 0 && len2 != ".") {
+        str = str.substr(1, 1);
+      }
+      //第一位不能是.
+      if (len1 == ".") {
+        str = "";
+      }
+      //限制只能输入一个小数点
+      if (str.indexOf(".") != -1) {
+        var str_ = str.substr(str.indexOf(".") + 1);
+        if (str_.indexOf(".") != -1) {
+          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
+        }
+      }
+      //正则替换，保留数字和小数点
+      // str = str.replace(/[^\d^\.]+/g,'')
+      //如果需要保留小数点后一位，则用下面公式
+      str = str.replace(/\.\d\d$/,'')
+      return str;
+    },
+    upDay() {
+      if (this.form.startData && this.form.endData) {
+        let leaveDays = this.calLeaveDays();
+        if (leaveDays < 0) {
+          this.form.startData = "";
+          this.form.endData = "";
+          this.form.day = "";
+          this.$message.warning("起始日期小于结束日期，请重新选择！");
+          return;
+        } else if (leaveDays == 0) {
+          this.form.startData = "";
+          this.form.endData = "";
+          this.form.day = "";
+          this.$message.warning("工作日天数为0，请重新选择！");
+          return;
+        } else {
+          this.form.day = leaveDays;
+        }
+      }
+
+    },
+    calLeaveDays() {
+      var start_date = new Date();
+      var end_date = new Date();
+      if (this.form.concreteDay1 == 'am') {
+        start_date = new Date(this.form.startData + " 00:00:00");
+      } else {
+        start_date = new Date(this.form.startData + " 12:00:00");
+      }
+
+      if (this.form.concreteDay2 == 'am') {
+        end_date = new Date(this.form.endData + " 12:00:00");
+      } else {
+        end_date = new Date(this.form.endData + " 24:00:00");
+      }
+      console.log(start_date);
+      console.log(end_date);
+      //转成毫秒数，两个日期相减
+      var days = end_date.getTime() - start_date.getTime();
+      //转换成天数
+      var day = days / (1000 * 60 * 60 * 24);
+      console.log("day = ", day);
+      return day;
+    },
+
+    getDateStar(ms) {
+      return getDate(ms);
+    },
+    getUser() {
+      getUserProfile().then(response => {
+        let userInfo = response.data;
+        this.form.employeeName = userInfo.nickname;
+        this.form.deptName = userInfo.dept.name;
+        this.form.position = userInfo.posts[0].name;
+        this.form.employeePhone = userInfo.mobile;
+      });
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+      let fileIds = [];
+      for (let i in fileList) {
+        let id = fileList[i].response.data.id;
+        fileIds.push(id);
+      }
+      this.form.fileIdList = fileIds;
+    },
+    beforeUploadFile(file) {
+      console.log(file);
+      const size = file.size / 1024 / 1024;
+      console.log(size);
+      if (size > 5) {
+        this.$message.error("文件大小不能超过5MB！");
+        return false;
+      }
+    },
+    handleFileSuccessCite(res, file, fileList) {
+      console.log(file, fileList);
+      console.log("------", "==========");
+      console.log("res = ", res);
+
+      let fileIds = [];
+      for (let i in fileList) {
+        let response = fileList[i].response;
+        if (response.errno && response.errno != "0") {
+          this.$message.error("该文件上传失败,已被移除,请重新上传!");
+          // 上传失败移除该 file 对象
+          fileList.splice(i, 1);
+        } else {
+          let id = fileList[i].response.data.id;
+          fileIds.push(id);
+        }
+      }
+      this.form.fileIdList = fileIds;
+    },
+    /** 获得表单信息 */
+    getDetail(val) {
+      this.$parent.$parent.detailLoading = true;
+      getDetail(val).then(response => {
+        this.$parent.$parent.detailLoading = false;
+        this.form = response.data;
+        let files = response.data.fileList;
+        if (files) {
+          this.files = [];
+          for (let i in files) {
+            let url = files[i].url;
+            let name = files[i].name;
+            let id = files[i].id;
+
+            this.files.push({
+              name: name,
+              url: url,
+              response: { error: "0", data: { url: url, id: id } },
+            });
+          }
+        }
+
+        if (response.data.auditUserList) {
+          let auditUserList = response.data.auditUserList;
+          let peopleList = [];
+          let nikeNamelist = [];
+          auditUserList.map(item => {
+            peopleList.push(item.id);
+            nikeNamelist.push(item.nickname)
+          });
+          this.$set(this.form, 'peopleList', peopleList.join(','));
+          this.nikeNamelist = nikeNamelist;
+        } else {
+          this.$set(this.form, 'peopleList', '');
+          this.nikeNamelist = [];
+        }
+        this.tasks = response.data.auditRecordList ? response.data.auditRecordList : [];
+
+      });
+    },
+    /** 查询部门列表 */
+    getDeptList() {
+      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() {
+      console.log(this.form);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          console.log(this.form);
+          this.form.startUserSelectAssignees = this.form.peopleList.split(',');
+          this.form.auditPass = true;
+          this.fullscreenLoading = true;
+          create(this.form).then(response => {
+            this.fullscreenLoading = false;
+            this.$modal.msgSuccess("提交成功");
+            if (this.id) {
+              this.$parent.$parent.closeEdit();
+            } else {
+              this.$parent.$parent.setStatus(2);
+            }
+          });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //驳回或撤回后再次提交通用用事项审批流程信息
+    onReCommit() {
+      console.log(this.form);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          console.log(this.form);
+          this.form.startUserSelectAssignees = this.form.peopleList.split(',');
+          this.form.auditPass = true;
+          this.fullscreenLoading = true;
+          reCommit(this.form).then(response => {
+            this.fullscreenLoading = false;
+            this.$modal.msgSuccess("提交成功");
+            if (this.id) {
+              this.$parent.$parent.closeEdit();
+            } else {
+              this.$parent.$parent.setStatus(2);
+            }
+          });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    //暂存
+    onSave() {
+      if (this.form.peopleList) {
+        this.form.startUserSelectAssignees = this.form.peopleList.split(',');
+      }
+      this.form.auditPass = false;
+      this.fullscreenLoading = true;
+      save(this.form).then(response => {
+        this.fullscreenLoading = false;
+        this.$modal.msgSuccess("暂存成功");
+        if (this.id) {
+          this.$parent.$parent.closeEdit();
+        } else {
+          this.$parent.$parent.setStatus(2);
+        }
+      });
+    },
+    //暂存删除
+    async onDelete() {
+      this.$modal.confirm('是否确认删除?').then(() => {
+        this.fullscreenLoading = true;
+        deleteById(this.id).then(response => {
+          this.fullscreenLoading = false;
+          this.$modal.msgSuccess("删除成功");
+          this.$parent.$parent.closeEdit();
+        })
+      }).catch(() => { });
+    },
+    //暂存删除
+    async onClose() {
+      this.$modal.confirm('是否确认关闭?').then(() => {
+        this.fullscreenLoading = true;
+        closeById(this.id).then(response => {
+          this.fullscreenLoading = false;
+          this.$modal.msgSuccess("流程已关闭");
+          this.$parent.$parent.closeEdit();
+        })
+      }).catch(() => { });
+    },
+    // 关闭标签
+    handleClose(index) {
+      this.nikeNamelist.splice(index, 1);
+      let peopleList = this.form.peopleList.split(',');
+      peopleList.splice(index, 1);
+      this.form.peopleList = peopleList.join(',');
+    },
+    //打开选人弹窗
+    openPS() {
+      this.peopleOpen = true;
+    },
+    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+    submitPeople(userNamelist, nikeNamelist, userIdList) {
+      console.log(userNamelist);
+      this.nikeNamelist = nikeNamelist;
+      this.form.peopleList = userIdList.join(',');
+      this.peopleOpen = false;
+    },
+    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 '';
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.user-avatar {
+  width: 22px;
+  height: 22px;
+  line-height: 19px;
+  font-size: 12px;
+  background: #46c26f;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  color: #fff;
+  display: inline-block;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+  margin-bottom: 2px;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+
+.button-new-tag {
+  margin-right: 10px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+ul {
+  padding-left: 0px !important;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+</style>

src/views/oa/leave/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class='fixed-header'>
+      <oabar ref="oabar"/>
+    </div>
+    <div class="dashboard-container">
+      <div v-if="status==1" class="apply-box">
+        <el-card class="box-card" style="min-height: 800px;border-radius: 10px" v-loading="editLoading">
+          <div class="from-box">
+            <div class="title">请假申请</div>
+            <el-divider></el-divider>
+             <edit></edit>
+          </div>
+         
+        </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 DataList from "./DataList.vue";
+import edit from "./edit.vue";
+
+export default {
+  name: 'Index',
+  components: {
+    Oabar,
+    DataList,
+    edit,
+  },
+  data() {
+    return {
+      editLoading:false,
+      status: 1,
+    }
+  },
+
+  created() {
+    
+  },
+  methods: {
+    //获取状态
+    setStatus(status) {
+      this.status = status;
+      this.$refs.oabar.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: 70%;
+    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;
+}
+</style>