修改

src/api/oa/out.js

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

src/router/index.js

@@ -70,18 +70,24 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/oa/turnover/index'], resolve),
     hidden: true
   },
-    //请假申请
-    {
-      path: '/oa/leave',
-      component: (resolve) => require(['@/views/oa/leave/index'], resolve),
-      hidden: true
-    },
-    //出差申请
-    {
-      path: '/oa/business',
-      component: (resolve) => require(['@/views/oa/business/index'], resolve),
-      hidden: true
-    },
+  //请假申请
+  {
+    path: '/oa/leave',
+    component: (resolve) => require(['@/views/oa/leave/index'], resolve),
+    hidden: true
+  },
+  //出差申请
+  {
+    path: '/oa/business',
+    component: (resolve) => require(['@/views/oa/business/index'], resolve),
+    hidden: true
+  },
+  //公务外出
+  {
+    path: '/oa/out',
+    component: (resolve) => require(['@/views/oa/out/index'], resolve),
+    hidden: true
+  },
   {
     path: '/password/forget',
     component: (resolve) => require(['@/views/password/forget'], resolve),
@@ -185,11 +191,11 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'type/data/:dictId(\\d+)',
-        component: (resolve) => require(['@/views/system/dict/data'], resolve),
-        name: 'SystemDictData',
-        meta: {title: '字典数据', icon: '', activeMenu: '/system/dict'}
-      }
+      path: 'type/data/:dictId(\\d+)',
+      component: (resolve) => require(['@/views/system/dict/data'], resolve),
+      name: 'SystemDictData',
+      meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' }
+    }
     ]
   },
   {
@@ -197,11 +203,11 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'historyData/:Id(\\d+)',
-        component: (resolve) => require(['@/views/presonnel/employee/data'], resolve),
-        name: 'EmployeeHistoryData',
-        meta: {title: '员工信息修改记录', icon: '', activeMenu: '/presonnel/employee'}
-      }
+      path: 'historyData/:Id(\\d+)',
+      component: (resolve) => require(['@/views/presonnel/employee/data'], resolve),
+      name: 'EmployeeHistoryData',
+      meta: { title: '员工信息修改记录', icon: '', activeMenu: '/presonnel/employee' }
+    }
     ]
   },
   {
@@ -209,22 +215,22 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'log',
-        component: (resolve) => require(['@/views/infra/job/log'], resolve),
-        name: 'InfraJobLog',
-        meta: {title: '调度日志', activeMenu: '/infra/job'}
-      }
+      path: 'log',
+      component: (resolve) => require(['@/views/infra/job/log'], resolve),
+      name: 'InfraJobLog',
+      meta: { title: '调度日志', activeMenu: '/infra/job' }
+    }
     ]
   }, {
     path: '/codegen',
     component: Layout,
     hidden: true,
     children: [{
-        path: 'edit/:tableId(\\d+)',
-        component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
-        name: 'InfraCodegenEditTable',
-        meta: {title: '修改生成配置', activeMenu: '/infra/codegen'}
-      }
+      path: 'edit/:tableId(\\d+)',
+      component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
+      name: 'InfraCodegenEditTable',
+      meta: { title: '修改生成配置', activeMenu: '/infra/codegen' }
+    }
     ]
   },
   {
@@ -233,16 +239,16 @@ export const constantRoutes = [
     hidden: true,
     redirect: 'noredirect',
     children: [{
-        path: 'oa/leave/create',
-        component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
-        name: 'BpmOALeaveCreate',
-        meta: {title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave'}
-      }, {
-        path: 'oa/leave/detail',
-        component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
-        name: 'BpmOALeaveDetail',
-        meta: {title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave'}
-      }
+      path: 'oa/leave/create',
+      component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
+      name: 'BpmOALeaveCreate',
+      meta: { title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave' }
+    }, {
+      path: 'oa/leave/detail',
+      component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
+      name: 'BpmOALeaveDetail',
+      meta: { title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave' }
+    }
     ]
   },
   {
@@ -250,31 +256,31 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'manager/form/edit',
-        component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
-        name: 'BpmFormEditor',
-        meta: {title: '流程表单-编辑', activeMenu: '/bpm/manager/form'}
-      }, {
-        path: 'manager/definition',
-        component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
-        name: 'BpmProcessDefinition',
-        meta: {title: '流程定义', activeMenu: '/bpm/manager/model'}
-      }, {
-        path: 'manager/model/design',
-        component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
-        name: 'BpmModelEditor',
-        meta: {title: '设计流程', activeMenu: '/bpm/manager/model'}
-      }, {
-        path: 'process-instance/create',
-        component: (resolve) => require(['@/views/bpm/processInstance/create/index'], resolve),
-        name: 'BpmProcessInstanceCreate',
-        meta: {title: '发起流程', activeMenu: '/bpm/task/my'}
-      }, {
-        path: 'process-instance/detail',
-        component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
-        name: 'BpmProcessInstanceDetail',
-        meta: {title: '流程详情', activeMenu: '/bpm/task/my'}
-      }
+      path: 'manager/form/edit',
+      component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
+      name: 'BpmFormEditor',
+      meta: { title: '流程表单-编辑', activeMenu: '/bpm/manager/form' }
+    }, {
+      path: 'manager/definition',
+      component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
+      name: 'BpmProcessDefinition',
+      meta: { title: '流程定义', activeMenu: '/bpm/manager/model' }
+    }, {
+      path: 'manager/model/design',
+      component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
+      name: 'BpmModelEditor',
+      meta: { title: '设计流程', activeMenu: '/bpm/manager/model' }
+    }, {
+      path: 'process-instance/create',
+      component: (resolve) => require(['@/views/bpm/processInstance/create/index'], resolve),
+      name: 'BpmProcessInstanceCreate',
+      meta: { title: '发起流程', activeMenu: '/bpm/task/my' }
+    }, {
+      path: 'process-instance/detail',
+      component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
+      name: 'BpmProcessInstanceDetail',
+      meta: { title: '流程详情', activeMenu: '/bpm/task/my' }
+    }
     ]
   },
   {
@@ -285,7 +291,7 @@ export const constantRoutes = [
       path: 'value/:propertyId(\\d+)',
       component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
       name: 'ProductPropertyValue',
-      meta: {title: '商品属性值', icon: '', activeMenu: '/product/property'}
+      meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
     }
     ]
   },
@@ -297,14 +303,14 @@ export const constantRoutes = [
       path: 'edit/:spuId(\\d+)',
       component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
       name: 'ProductSpuUpdate',
-      meta: {title: '修改商品', activeMenu: '/product/spu'}
+      meta: { title: '修改商品', activeMenu: '/product/spu' }
     },
-      {
-        path: 'add',
-        component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
-        name: 'ProductSpuCreate',
-        meta: {title: '添加商品', activeMenu: '/product/spu'}
-      }
+    {
+      path: 'add',
+      component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
+      name: 'ProductSpuCreate',
+      meta: { title: '添加商品', activeMenu: '/product/spu' }
+    }
     ]
   },
   {
@@ -347,6 +353,6 @@ Router.prototype.push = function push(location) {
 export default new Router({
   base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
   mode: 'history', // 去掉url中的#
-  scrollBehavior: () => ({y: 0}),
+  scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })

src/views/oa/out/DataList.vue

@@ -0,0 +1,223 @@
+<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="destination">
+        <el-input v-model="queryParams.destination" placeholder="请输入外出地点" clearable style="width: 250px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+            <el-date-picker v-model="queryParams.startTime" 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="endTime">
+            <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="destination" min-width="150" />
+      <el-table-column label="外出开始时间" align="center" prop="startTime" min-width="120" />
+      <el-table-column label="外出结束时间" align="center" prop="endTime" min-width="120" />
+      <el-table-column label="外出时长" align="center" prop="hour" min-width="100" />
+      <el-table-column label="申请时间"  align="center" prop="createTime" min-width="150">
+        <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/out"
+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,
+        destination: undefined,
+        startTime: [],
+        endTime: [],
+        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/out/detail.vue

@@ -0,0 +1,365 @@
+<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.destination">{{ form.destination }}</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.startTime">{{ form.startTime }}</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.endTime">{{ form.endTime }}</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.hour">{{ form.hour }}</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.purpose">{{ form.purpose }}</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/out"
+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/out/edit.vue

@@ -0,0 +1,528 @@
+<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="destination">
+        <el-input maxlength="20" v-model="form.destination" placeholder='外出地点'></el-input>
+      </el-form-item>
+      <el-form-item label="外出开始时间" prop="startTime">
+        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" default-time="09:00:00" v-model="form.startTime" type="datetime" placeholder="选择时间"
+          style="width: 100%;" @change="upHour">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="外出结束时间" prop="endTime">
+        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" default-time="18:00:00" v-model="form.endTime" type="datetime" placeholder="选择时间"
+          style="width: 100%;" @change="upHour">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="外出时长">
+        <el-input v-model="form.hour" placeholder='外出时长' oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
+      </el-form-item>
+      <el-form-item label="外出事由" prop="purpose">
+        <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.purpose" placeholder="请输入备注" />
+      </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/out"
+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,
+
+
+        destination: undefined,
+        startTime: undefined,
+        endTime: undefined,
+        hour: undefined,
+        purpose: undefined,
+        fileIdList: undefined,
+        remarks: undefined,
+        peopleList: '',
+      },
+      rules: {
+        destination: [
+          { required: true, message: '请填写外出地点', trigger: 'change' },
+        ],
+        startTime: [
+          { required: true, message: '请选择开始时间', trigger: 'change' }
+        ],
+        endTime: [
+          { required: true, message: '请选择结束时间', trigger: 'change' }
+        ],
+        purpose: [
+          { 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: {
+    upHour() {
+      if (this.form.startTime && this.form.endTime) {
+        let Hours = this.calLeaveDays();
+        this.form.hour = Math.ceil(Hours);
+        if (Hours < 0) {
+          this.form.startTime = "";
+          this.form.endTime = "";
+          this.form.hour = "";
+          this.$message.warning("开始时间小于结束时间，请重新选择！");
+          return;
+        } else if (Hours == 0) {
+          this.form.startTime = "";
+          this.form.endTime = "";
+          this.form.hour = "";
+          this.$message.warning("外出时间为0，请重新选择！");
+          return;
+        } 
+      }
+
+    },
+    calLeaveDays() {
+      var start_time = new Date();
+      var end_time = new Date();
+      start_time = new Date(this.form.startTime);
+      end_time = new Date(this.form.endTime );
+      console.log(start_time);
+      console.log(end_time);
+      //转成毫秒数，两个日期相减
+      var hours = end_time.getTime() - start_time.getTime();
+      //转换成小时
+      var hour = hours / (1000 * 60 * 60);
+      console.log("hour = ", hour);
+      return hour;
+    },
+
+    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/out/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>

src/views/oa/renew/edit.vue

@@ -25,7 +25,7 @@
 
       </el-form-item>
       <el-form-item label="续签合同期限(月)" prop="renewPeriod">
-        <el-input v-model="form.renewPeriod" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder='续签合同期限'></el-input>
+        <el-input v-model="form.renewPeriod" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder='续签合同期限'></el-input>
       </el-form-item>
       <el-form-item label="续签开始日期" prop="renewContractStartDate">
         <el-date-picker value-format="yyyy-MM-dd" v-model="form.renewContractStartDate" type="date" placeholder="选择日期"