修改

src/api/oa/business.js

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

src/router/index.js

@@ -76,6 +76,12 @@ export const constantRoutes = [
       component: (resolve) => require(['@/views/oa/leave/index'], resolve),
       hidden: true
     },
+    //出差申请
+    {
+      path: '/oa/business',
+      component: (resolve) => require(['@/views/oa/business/index'], resolve),
+      hidden: true
+    },
   {
     path: '/password/forget',
     component: (resolve) => require(['@/views/password/forget'], resolve),

src/views/oa/business/DataList.vue

@@ -0,0 +1,234 @@
+<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="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="applyEmployeeName">
+        <el-input v-model="queryParams.applyEmployeeName" placeholder="申请人" clearable style="width: 250px"
+          @keyup.enter.native="handleQuery" />
+      </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="80" />
+      <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="120" />
+      <el-table-column label="开始日期" align="center" prop="startData" min-width="100" />
+      <el-table-column label="结束日期" align="center" prop="endData" min-width="100" />
+      <el-table-column label="出差天数" align="center" prop="day" min-width="100" />
+      <el-table-column label="预估费用" align="center" prop="purchaseMoney" min-width="100" />
+      <el-table-column label="申请人" align="center" prop="applyEmployeeName" min-width="80" />
+      <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="120" />
+    </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 v-loading="detailLoading">
+      <edit :id="id"></edit>
+    </el-dialog>
+    <!-- 详情 -->
+    <el-dialog title="出差申请(详情)" :visible.sync="openDetail" width="800px" append-to-body v-loading="detailLoading">
+      <detail :id="id"></detail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getListData, exportList } from "@/api/oa/business"
+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,
+
+        startData: [],
+        endData: [],
+        applyEmployeeName: undefined,
+        createTime: [],
+        auditStatus: undefined,
+
+      },
+    };
+  },
+  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/business/detail.vue

@@ -0,0 +1,366 @@
+<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.employeeName">{{ 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">
+          <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.startData">{{ form.startData }}</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.endData">{{ form.endData }}</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.purchaseMoney">{{ form.purchaseMoney }}</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.birthday">{{ form.remarks }}</span>
+        </div>
+      </div>
+
+      <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/business"
+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/business/edit.vue

@@ -0,0 +1,592 @@
+<template>
+  <div class="container">
+    <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
+      <el-form-item label="出差人" prop="employeeName">
+        <el-input v-model="form.employeeName" placeholder='点击选择' readonly @click.native="openSingle"></el-input>
+      </el-form-item>
+      <el-form-item label="Id" style="display: none;">
+        <el-input v-model="form.employeeId" placeholder='Id' disabled></el-input>
+      </el-form-item>
+      <el-form-item label="部门">
+        <el-input v-model="form.deptName" placeholder='部门' disabled></el-input>
+      </el-form-item>
+      <el-form-item label="职位">
+        <el-input v-model="form.position" placeholder='职位' disabled></el-input>
+      </el-form-item>
+       <el-form-item label="手机号">
+        <el-input v-model="form.employeePhone" placeholder='手机号' 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="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-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-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="purchaseMoney">
+        <el-input v-model="form.purchaseMoney" placeholder='预估费用' @input="changeMoney()"></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-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 type="textarea" v-model="form.peopleList" style="display: none;" />
+        <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
+        <span :key="tag" v-for="tag in nikeNamelist">
+          <i class="el-icon-arrow-right"></i>
+          <el-tag type="info" closable :disable-transitions="false" @close="handleClose(tag)">
+            <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="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 { getDetail, create,reCommit, save, deleteById,closeById } from "@/api/oa/business"
+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,
+        employeeId: undefined,
+        deptName: undefined,
+        position: undefined,
+        employeePhone:undefined,
+        destination: undefined,
+
+        startData: undefined,
+        endData: undefined,
+        day: undefined,
+        purchaseMoney: undefined,
+        purpose: undefined,
+
+        fileIdList: undefined,
+        remarks: undefined,
+        peopleList: '',
+      },
+
+
+      rules: {
+        employeeName: [
+          { required: true, message: '请选择', trigger: 'change' },
+        ],
+        destination: [
+          { required: true, message: '请填写出差地点', trigger: 'blur' },
+        ],
+        startData: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        endData: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        purchaseMoney: [
+          { required: true, message: "请填写预估费用", trigger: "blur" }
+        ],
+        purpose: [
+          { required: true, message: "请填写出差事由", trigger: "blur" }
+        ],
+        peopleList: [
+          { required: true, message: '请选择审批人', }
+        ]
+      },
+      status: true,
+      //是否打开选人组件，默认不打开
+      multiplePeopleOpen: false,
+      singlePeopleOpen: false,
+      queryParams: {
+        name: undefined,
+        status: undefined
+      },
+    }
+  },
+
+  created() {
+    this.getDeptList();
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        if(val){
+          this.getDetail(val);
+        }else{
+          // this.getUser();
+        }
+      }
+    }
+  },
+  methods: {
+    changeMoney(){
+      let purchaseMoney = this.form.purchaseMoney;
+      this.form.purchaseMoney = this.NumberCheck(purchaseMoney,2);
+    },
+    changeDay(){
+      let day = this.form.day;
+      this.form.day = this.NumberCheck(day,1);
+    },
+
+    NumberCheck(num,type) {
+      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);
+        }
+      }
+      //正则替换，保留数字和小数点
+      if(type==0){
+        str = str.replace(/[^\d^\.]+/g,'')
+      }
+       //如果需要保留小数点后一位，则用下面公式
+      if(type==1){
+        str = str.match(/^\d+(?:\.\d{0,1})?/)
+      }
+       //如果需要保留小数点后两位，则用下面公式
+      if(type==2){
+        str = str.match(/^\d+(?:\.\d{0,2})?/)
+      }
+      return str;
+    },
+    upDay() {
+      if (this.form.startData && this.form.endData) {
+        debugger
+        let Days = this.calLeaveDays();
+        this.form.day = Days;
+        console.log(this.form.day);
+        if (Days <= 0) {
+          this.form.startData = "";
+          this.form.endData = "";
+          this.form.day = "";
+          this.$message.warning("起始日期小于结束日期，请重新选择！");
+          return;
+        }
+      }
+
+    },
+    calLeaveDays() {
+      var start_date = new Date();
+      var end_date = new Date();
+      start_date = new Date(this.form.startData + " 00:00:00");
+      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(',');
+    },
+    //打开选人弹窗
+    openSingle() {
+      this.singlePeopleOpen = true;
+    },
+    openMultiple() {
+      this.multiplePeopleOpen = true;
+    },
+    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+    submitMultiple(userNamelist, nikeNamelist,userIdList) {
+      console.log(userNamelist);
+      this.nikeNamelist = nikeNamelist;
+      this.form.peopleList = userIdList.join(',');
+      this.multiplePeopleOpen = false;
+    },
+    submitSingle(userNamelist, nikeNamelist,userIdList) {
+      console.log(userNamelist);
+      this.form.employeeName = nikeNamelist.join();
+      this.form.employeeId = userIdList.join();
+      this.singlePeopleOpen = 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/business/index.vue

@@ -0,0 +1,106 @@
+<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/conversion/DataList.vue

@@ -208,7 +208,7 @@ export default {
           this.exportLoading = true;
           return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '通用审批数据.xls');
+          this.$download.excel(response, '转正申请数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }

src/views/oa/entry/DataList.vue

@@ -214,11 +214,11 @@ export default {
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
+      this.$modal.confirm('是否确认导出所有数据项?').then(function() {
           this.exportLoading = true;
           return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '角色数据.xls');
+          this.$download.excel(response, '入职审批数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }

src/views/oa/leave/DataList.vue

@@ -70,7 +70,7 @@
       <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">
+      <el-table-column label="申请时间"  align="center" prop="createTime" min-width="150">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -98,7 +98,7 @@
 </template>
 
 <script>
-import { getListData,exportList }  from "@/api/oa/universal"
+import { getListData,exportList }  from "@/api/oa/leave"
 import detail from "./detail.vue";
 import edit from "./edit.vue";
 import Treeselect from "@riophae/vue-treeselect";
@@ -217,7 +217,7 @@ export default {
           this.exportLoading = true;
           return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '通用审批数据.xls');
+          this.$download.excel(response, '请假申请数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }

src/views/oa/leave/detail.vue

@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { getDetail,agree,disagree,revocation } from "@/api/oa/universal"
+import { getDetail,agree,disagree,revocation } from "@/api/oa/leave"
 import {getDate} from "@/utils/dateUtils";
 export default {
   props: {

src/views/oa/leave/edit.vue

@@ -125,7 +125,7 @@
 </template>
 
 <script>
-import { getDetail, create, reCommit, save, deleteById, closeById } from "@/api/oa/universal"
+import { getDetail, create, reCommit, save, deleteById, closeById } from "@/api/oa/leave"
 import { getDate } from "@/utils/dateUtils";
 import { getUserProfile } from "@/api/system/user";
 import { listDept } from "@/api/system/dept";

src/views/oa/renew/DataList.vue

@@ -202,7 +202,7 @@ export default {
           this.exportLoading = true;
           return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '通用审批数据.xls');
+          this.$download.excel(response, '续签申请数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }

src/views/oa/turnover/DataList.vue

@@ -210,7 +210,7 @@ export default {
           this.exportLoading = true;
           return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '通用审批数据.xls');
+          this.$download.excel(response, '离职申请数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }