修改

src/views/oa/renewal/DataList.vue

@@ -1,40 +1,38 @@
 <template>
   <div class="container">
     <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="80px">
-      <el-form-item label="续签人">
-        <el-input v-model="queryParams.loginName" placeholder="续签人" clearable style="width: 250px"
+      <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="员工编号">
-        <el-input v-model="queryParams.loginId" placeholder="员工编号" clearable style="width: 250px"
-                  @keyup.enter.native="handleQuery"/>
-      </el-form-item>
-      <el-form-item label="部门">
+      <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="职位">
-        <el-select v-model="queryParams.position" placeholder="职位" clearable style="width: 250px">
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+      <el-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="审批状态">
-        <el-select v-model="queryParams.auditStatus" placeholder="审批状态" clearable style="width: 250px">
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-        </el-select>
+      <el-form-item 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="申请人">
+      <el-form-item label="申请人"prop="creator">
         <el-input v-model="queryParams.creator" placeholder="申请人" clearable style="width: 250px"
                   @keyup.enter.native="handleQuery"/>
       </el-form-item>
     
-      <el-form-item label="申请时间">
-        <el-date-picker
-      v-model="queryParams.createTime"
-      style="width: 250px"
-      type="datetime"
-      value-format="yyyy-MM-dd HH:mm:ss"
-      placeholder="选择申请时间">
-    </el-date-picker>
+      <el-form-item 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>
@@ -50,20 +48,25 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="roleList" @row-click="handdle">
-      <el-table-column label="续签人" prop="loginName" min-width="120" />
-      <el-table-column label="员工编号" prop="loginId" min-width="150" />
-      <el-table-column label="部门" prop="deptId" min-width="150" />
-      <el-table-column label="职位" prop="position" min-width="150" />
+    <el-table 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="续签开始日期" prop="renewContractStartDate" min-width="100" />
       <el-table-column label="续签结束日期" prop="renewContractEndDate" min-width="100" />
-      <el-table-column label="审批状态" prop="auditStatus" min-width="150" />
-      <el-table-column label="申请人" prop="creator" min-width="150" />
-      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
+      <el-table-column label="申请人" prop="creator" 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"
@@ -81,16 +84,7 @@
 </template>
 
 <script>
-import {
-  addRole,
- 
-  exportRole,
-  getRole,
-  listRole,
-  updateRole
-} from "@/api/system/role";
-import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
-import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import { getListData,exportList }  from "@/api/oa/turnJust"
 import detail from "./detail.vue";
 import edit from "./edit.vue";
 import Treeselect from "@riophae/vue-treeselect";
@@ -106,23 +100,8 @@ export default {
   },
   data() {
     return {
-        // 部门树选项
-        posOptions: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
+      detailLoading:false,
+        posOptions: [],
       id:'',
       // 遮罩层
       loading: true,
@@ -133,53 +112,24 @@ export default {
       // 总条数
       total: 0,
       // 角色表格数据
-      roleList: [],
+      dataList: [],
       openEdit: false,
       openDetail: false,
-      // 是否显示弹出层（数据权限）
-      openDataScope: false,
-      // 是否显示弹出层（菜单权限）
-      openMenu: false,
-      menuExpand: false,
-      menuNodeAll: false,
-      deptExpand: true,
-      deptNodeAll: false,
-      // 菜单列表
-      menuOptions: [],
       // 部门列表
       deptOptions: [], // 部门属性结构
-      depts: [], // 部门列表
       // 查询参数
       queryParams: {
         pageNo: 1,
         pageSize: 10,
+        employeeName: undefined,
+        deptId: undefined,
+        position: undefined,
+        employeePhone: undefined,
+        creator: undefined,
+        createTime: [],
+        auditStatus: undefined,
+        
       },
-      // 表单参数
-      form: {},
-      defaultProps: {
-        label: "name",
-        children: "children"
-      },
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
-        ],
-        code: [
-          { required: true, message: "角色标识不能为空", trigger: "blur" }
-        ],
-        sort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
-      },
-
-      // 枚举
-      SysCommonStatusEnum: CommonStatusEnum,
-      SysDataScopeEnum: SystemDataScopeEnum,
-      // 数据字典
-      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
     };
   },
   created() {
@@ -206,61 +156,28 @@ export default {
     },
     handdle(row) {
       this.id = row.id;
-      if(row.sort==0){
+      if(row.auditStatus==0){
         this.openEdit = true;
       }else{
         this.openDetail = true;
       }
-      
-      // const id = row.id
-      // getRole(id).then(response => {
-      //   this.form = response.data;
-      //   this.open = true;
-      //   this.title = "入职审批详情";
-      // });
+    },
+    closeEdit() {
+      this.openEdit = false;
+      this.getList();
     },
 
-    /** 查询角色列表 */
+    /** 查询列表 */
     getList() {
       this.loading = true;
-      listRole(this.queryParams).then(
+      getListData(this.queryParams).then(
         response => {
-          this.roleList = response.data.list;
+          this.dataList = response.data.list;
           this.total = response.data.total;
           this.loading = false;
         }
       );
     },
-
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-
-    // 表单重置
-    reset() {
-      if (this.$refs.menu !== undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
-      this.menuExpand = false;
-      this.menuNodeAll = false;
-      this.deptExpand = true;
-      this.deptNodeAll = false;
-      this.form = {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        sort: 0,
-        deptIds: [],
-        menuIds: [],
-        dataScope: undefined,
-        deptCheckStrictly: false,
-        menuCheckStrictly: true,
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
@@ -274,37 +191,18 @@ export default {
 
 
 
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updateRole(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addRole(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
+ 
 
 
 
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
+      this.$modal.confirm('是否确认导出所有数据项?').then(function() {
           this.exportLoading = true;
-          return exportRole(queryParams);
+          return exportList(queryParams);
         }).then(response => {
-          this.$download.excel(response, '角色数据.xls');
+          this.$download.excel(response, '通用审批数据.xls');
           this.exportLoading = false;
       }).catch(() => {});
     }

src/views/oa/renewal/detail.vue

@@ -7,12 +7,12 @@
           <div class="field-name">续签人</div>
         </div>
         <div class="field-component">
-          <span :title="form.loginName">{{ form.loginName }}</span>
+          <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 class="field-name">部门</div>
         </div>
         <div class="field-component">
           <span :title="form.deptName">{{ form.deptName }}</span>
@@ -20,7 +20,7 @@
       </div>
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
-          <div class="field-name">部门</div>
+          <div class="field-name">职位</div>
         </div>
         <div class="field-component">
           <span :title="form.position">{{ form.position }}</span>
@@ -28,10 +28,10 @@
       </div>
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
-          <div class="field-name">职位</div>
+          <div class="field-name">手机号</div>
         </div>
         <div class="field-component">
-          <span :title="form.employeeTypeName">{{ form.employeeTypeName }}</span>
+          <span :title="form.employeePhone">{{ form.employeePhone }}</span>
         </div>
       </div>
       <div class="fx-field x-grid-col-12">
@@ -110,7 +110,9 @@
           <div class="field-name">附件</div>
         </div>
         <div class="field-component">
-          <span style="color: #5094d5;cursor: pointer;">附件1</span>
+          <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">
@@ -122,7 +124,7 @@
         </div>
       </div>
 
-      <div class="fx-field x-grid-col-12">
+      <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>
@@ -149,9 +151,9 @@
               <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="margin-left: 30px;font-weight: normal">耗时：</label>
               <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
-                {{ getDateStar(item.durationInMillis) }} </label>
+                {{ getDateStar(item.durationInMillis) }} </label> -->
               <p v-if="item.reason">
                 <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
               </p>
@@ -160,10 +162,13 @@
         </el-timeline>
       </div>
       <div class="fx-field x-grid-col-12">
-        <div style="float: right;">
-          <el-button @click="handleAudit(false)">拒绝</el-button>
-          <el-button type="primary" @click="handleAudit(true)">同意</el-button>
-        </div>
+        <div 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>
@@ -171,70 +176,56 @@
 </template>
 
 <script>
-import { getLeave } from "@/api/bpm/leave"
-import {
-  approveTask,
-  rejectTask,
-} from "@/api/bpm/task";
+import { getDetail,agree,disagree,revocation } from "@/api/oa/renewal"
+import {getDate} from "@/utils/dateUtils";
 export default {
   props: {
     id: {
       type: [String, Number],
       default: undefined
     },
+    name: {
+      type: String,
+      default: undefined
+    },
   },
   data() {
     return {
-      entryId: undefined, // 编号
+      fullscreenLoading:false,
+      loading:false,
       reason: '',
       auditRule: {
         reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
       },
-      tasks: [
-        {
-          "id": "f514d489-0afd-11ed-a881-427d68986255",
-          "name": "领导审批",
-          "claimTime": null,
-          "createTime": 1658632137000,
-          "suspensionState": null,
-          "processInstance": {
-            "id": "f51374f1-0afd-11ed-a881-427d68986255",
-            "name": "OA 请假",
-            "startUserId": 1,
-            "startUserNickname": "芋道源码",
-            "processDefinitionId": "oa_leave:3:f07c1280-0afd-11ed-a881-427d68986255"
-          },
-          "endTime": null,
-          "durationInMillis": null,
-          "result": 1,
-          "reason": null,
-          "definitionKey": "task-01",
-          "assigneeUser": {
-            "id": 1,
-            "nickname": "芋道源码",
-            "deptId": 103,
-            "deptName": "研发部门"
-          },
-          "parentTaskId": null,
-          "children": null
-        }
-      ],
-      peopleList: ['林动', '萧炎', '叶凡'],
+      tasks: [],
       // 表单参数
-      form: {
-        loginName: '张三',
-        dept: '软件工程院',
-      },
+      form: {},
     };
   },
   created() {
-    this.entryId = this.id || this.$route.query.id;
-    console.log(this.entryId);
-    // this.getDetail();
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        this.getDetail(val);
+      }
+    }
   },
   methods: {
-    handleEdit() {
-      this.$router.push({ path: '/oa/entry/edit' })
+    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) {
@@ -246,31 +237,29 @@ export default {
         return;
       } else {
         const data = {
-          id: '12',
-          reason: this.reason
+          id: this.form.taskId,
+          reason: this.reason,
         }
         if (pass) {
-          this.$modal.msgSuccess({
+          this.fullscreenLoading = true;
+          agree(data).then(response => {
+            this.fullscreenLoading = false;
+            this.$parent.$parent.closeEdit();
+            this.$modal.msgSuccess({
               message: '审批通过成功！',
               customClass: 'myBox'
             });
-          // approveTask(data).then(response => {
-          //   this.$modal.msgSuccess({
-          //     message: '审批通过成功！',
-          //     customClass: 'myBox'
-          //   });
-          // });
+          });
         } else {
-          this.$modal.msgSuccess({
-              message: '审批不通过成功！',
+          this.fullscreenLoading = true;
+          disagree(data).then(response => {
+            this.fullscreenLoading = false;
+            this.$parent.$parent.closeEdit();
+            this.$modal.msgSuccess({
+              message: '驳回成功！',
               customClass: 'myBox'
             });
-          // rejectTask(data).then(response => {
-          //   this.$modal.msgSuccess({
-          //     message: '审批不通过成功！',
-          //     customClass: 'myBox'
-          //   });
-          // });
+          });
         }
       }
     },
@@ -313,10 +302,13 @@ export default {
       }
       return '';
     },
-    /** 获得请假信息 */
-    getDetail() {
-      getLeave(this.entryId).then(response => {
+    /** 获得详情信息 */
+    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;
       });
     },
   }

src/views/oa/renewal/edit.vue

@@ -1,173 +1,208 @@
 <template>
-    <div class="container">
-      <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
-              <el-form-item label="续签人" prop="loginName">
-                <el-input v-model="form.loginName" placeholder='点击选择' readonly @click.native="openSingle"></el-input>
-              </el-form-item>
-              <el-form-item label="员工编号">
-                <el-input v-model="form.loginId" placeholder='员工编号' disabled></el-input>
-              </el-form-item>
-              <el-form-item label="部门">
-                <el-input v-model="form.deptId" 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.oldContractStartDate" placeholder='原合同开始日期' disabled></el-input>
-               
-              </el-form-item>
-              <el-form-item label="原合同结束日期">
-                <el-input v-model="form.oldContractEndDate" placeholder='原合同结束日期' disabled></el-input>
-               
-              </el-form-item>
-              <el-form-item label="续签合同期限" prop="renewPeriod">
-                  <el-select v-model="form.renewPeriod" placeholder="请选择" style="width: 100%;">
-                  <el-option v-for="item in posOptions" :key="item.value" :label="item.label" :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="续签开始日期" prop="renewContractStartDate">
-                <el-date-picker value-format="yyyy-MM-dd" v-model="form.renewContractStartDate" type="date" placeholder="选择日期" style="width: 100%;">
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="续签结束日期" prop="renewContractEndDate">
-                <el-date-picker value-format="yyyy-MM-dd" v-model="form.renewContractEndDate" type="date" placeholder="选择日期" style="width: 100%;">
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="转正申请理由" prop="renewReason">
-                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.renewReason" placeholder='申请理由'></el-input>
-              </el-form-item>
+  <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="原合同开始日期">
+        <el-input v-model="form.oldContractStartDate" placeholder='原合同开始日期' disabled></el-input>
 
-             
-              <el-form-item label="工作总结">
-                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.workPerformance" placeholder='请输入'></el-input>
-              </el-form-item>
-            
-              <el-form-item label="附件">
-                <!-- <FileUpload v-model="form.files" :limit="1"/> -->
-            <el-upload
-              action=""
-              ref="privateKeyContentFile"
-              :limit="1"
-              :http-request="appCertUpload"
-              :before-upload="fileBeforeUpload">
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
-            </el-upload>
-          </el-form-item>
-              <el-form-item label="备注">
-                <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入" />
-              </el-form-item>
-              <el-form-item label="审批人" prop="peopleList">
-                <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
-                <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
-                <span :key="tag" v-for="tag in peopleList">
-                  <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="原合同结束日期">
+        <el-input v-model="form.oldContractEndDate" placeholder='原合同结束日期' disabled></el-input>
 
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit()">提交</el-button>
-                <el-button @click="onSave()">暂存</el-button>
-              </el-form-item>
-            </el-form>
-            <PeopleSelect ref="peopleSelect" type="multiple" :isCheck="true" :open="multiplePeopleOpen" @cancel="multiplePeopleOpen = false"
-          @submit="submitMultiple"></PeopleSelect>
-          <PeopleSelect ref="peopleSelect" type="single" :isCheck="true" :open="singlePeopleOpen" @cancel="singlePeopleOpen = false"
-            @submit="submitSingle"></PeopleSelect>
-           
-    </div>
+      </el-form-item>
+      <el-form-item label="续签合同期限" prop="renewPeriod">
+        <el-select v-model="form.renewPeriod" placeholder="请选择" style="width: 100%;">
+          <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="续签开始日期" prop="renewContractStartDate">
+        <el-date-picker value-format="yyyy-MM-dd" v-model="form.renewContractStartDate" type="date" placeholder="选择日期"
+          style="width: 100%;">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="续签结束日期" prop="renewContractEndDate">
+        <el-date-picker value-format="yyyy-MM-dd" v-model="form.renewContractEndDate" type="date" placeholder="选择日期"
+          style="width: 100%;">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="转正申请理由" prop="renewReason">
+        <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.renewReason"
+          placeholder='申请理由'></el-input>
+      </el-form-item>
+
+
+      <el-form-item label="工作总结">
+        <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.workPerformance"
+          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 { getLeave }  from "@/api/bpm/leave"
+import { getDetail, create,reCommit, save, deleteById,closeById } from "@/api/oa/renewal"
+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 FileUpload from "@/components/FileUpload";
+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,
-    FileUpload,
+    Treeselect,
   },
   props: {
     id: {
       type: [String, Number],
       default: undefined
     },
+    name: {
+      type: String,
+      default: undefined
+    },
   },
   data() {
     return {
-      entryId: undefined, // 编号
+      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: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
-      peopleList: [],
+      posOptions: [],
+      deptOptions: [],
+      nikeNamelist: [],
       form: {
-        loginName: undefined,
-        loginId: undefined,
-        deptId: undefined,
+        employeeName: undefined,
+        employeeId: undefined,
+        deptName: undefined,
         position: undefined,
+        employeePhone:undefined,
         oldContractStartDate: undefined,
 
         oldContractEndDate: undefined,
         renewPeriod: undefined,
         renewContractStartDate: undefined,
         renewContractEndDate: undefined,
-        renewReason:undefined,
+        renewReason: undefined,
 
         workPerformance: undefined,
         files: undefined,
         remarks: undefined,
         peopleList: '',
       },
-   
-        
+
+
       rules: {
         loginName: [
-            { required: true, message: '请选择' },
-          ],
-          renewPeriod: [
-            { required: true, message: '请选择', trigger: 'change' }
-          ],
-          renewContractStartDate: [
-            { required: true, message: '请选择日期', trigger: 'change' }
-          ],
-          renewContractEndDate: [
-            { required: true, message: '请选择日期', trigger: 'change' }
-          ],
-          renewReason: [
-            { required: true, trigger: "blur", message: "请输入转正申请理由"  }
-          ],
-          peopleList:[
-            { required: true, message: '请选择审批人', }
-          ]
-        },
+          { required: true, message: '请选择' },
+        ],
+        renewPeriod: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        renewContractStartDate: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        renewContractEndDate: [
+          { required: true, message: '请选择日期', trigger: 'change' }
+        ],
+        renewReason: [
+          { required: true, trigger: "blur", message: "请输入转正申请理由" }
+        ],
+        peopleList: [
+          { required: true, message: '请选择审批人', }
+        ]
+      },
       status: true,
-
-     //是否打开选人组件，默认不打开
-     multiplePeopleOpen: false,
+      //是否打开选人组件，默认不打开
+      multiplePeopleOpen: false,
       singlePeopleOpen: false,
-      fileAccept: ".crt",
       queryParams: {
         name: undefined,
         status: undefined
@@ -176,99 +211,301 @@ export default {
   },
 
   created() {
-    this.entryId = this.id || this.$route.query.id;
-    console.log(this.entryId);
-    // this.getDetail();
+    this.getDeptList();
+  },
+  watch: {
+    id: {
+      immediate: true,
+      handler(val) {
+        if(val){
+          this.getDetail(val);
+        }else{
+          // this.getUser();
+        }
+      }
+    }
   },
   methods: {
+    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() {
-      getLeave(this.entryId).then(response => {
+    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:[];
+        
       });
     },
-    fileBeforeUpload(file) {
-      // let format = '.' + file.name.split(".")[1];
-      // if (format !== this.fileAccept) {
-      //   this.$message.error('请上传指定格式"' + this.fileAccept + '"文件');
-      //   return false;
-      // }
-      let isRightSize = file.size / 1024 / 1024 < 5
-      if (!isRightSize) {
-        this.$message.error('文件大小超过 5MB')
-      }
-      return isRightSize
+    /** 查询部门列表 */
+    getDeptList() {
+      listDept(this.queryParams).then(response => {
+        this.deptOptions = this.handleTree(response.data, "id");
+      });
     },
-    appCertUpload(event) {
-      console.log(event);
-      // const file = event.file;
-      const readFile = new FileReader()
-      readFile.onload = (e) => {
-        this.form.files = e.target.result
-        console.log(this.form.files);
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
       }
-      readFile.readAsText(event.file);
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
     },
     //提交
     onSubmit() {
-       this.$refs.form.validate(valid => {
-          if (valid) {
-            console.log(this.form);
-            this.$message.success('提交成功')
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      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(() => { });
     },
-    // 关闭标签
-    handleClose(tag) {
-      this.peopleList.splice(this.peopleList.indexOf(tag), 1);
+     //暂存删除
+     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(() => { });
     },
-   //打开选人弹窗
-   openSingle() {
+
+     // 关闭标签
+     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(peopleList,nikeNamelist) {
-      console.log(peopleList);
-      console.log(nikeNamelist);
-      this.peopleList = nikeNamelist;
-      this.form.peopleList = nikeNamelist.join(',');
+    submitMultiple(userNamelist, nikeNamelist,userIdList) {
+      console.log(userNamelist);
+      this.nikeNamelist = nikeNamelist;
+      this.form.peopleList = userIdList.join(',');
       this.multiplePeopleOpen = false;
     },
-    submitSingle(peopleList,nikeNamelist) {
-      console.log(peopleList);
-      console.log(nikeNamelist);
-      this.form.loginName = nikeNamelist.join();
+    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{
+.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;
+  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;
 }
@@ -280,4 +517,12 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
+
+ul {
+  padding-left: 0px !important;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
 </style>

src/views/oa/renewal/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class='fixed-header'>
-      <oabar />
+      <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">
+        <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>
@@ -43,7 +43,8 @@ export default {
   },
   data() {
     return {
-      status: 1
+      editLoading:false,
+      status: 1,
     }
   },
 
@@ -54,6 +55,7 @@ export default {
     //获取状态
     setStatus(status) {
       this.status = status
+      this.$refs.oabar.status = status;
     },
   }
 }

src/views/oa/turnJust/DataList.vue

@@ -62,7 +62,7 @@
       <el-table-column label="入职日期" align="center" prop="entryDate" min-width="100" />
       <el-table-column label="转正日期" align="center" prop="conversionDate" min-width="100" />
       <el-table-column label="申请人" prop="creator" min-width="80" />
-      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150">
+      <el-table-column label="申请时间" align="center" prop="createTime" min-width="150">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>