入职审批页面编写

src/App.vue

@@ -45,8 +45,8 @@ export default {
 /* 全局设置 element ui dialog水平垂直居中 */
 .el-dialog {
   left: 50%;
-  top: 20%;
-  transform: translate(-50%, -20%);
+  /* top: 5%; */
+  transform: translate(-50%, -5%);
   margin: 0px !important;
 }
 .el-dialog {
@@ -59,4 +59,8 @@ export default {
 .el-dialog__footer{
   border-top: 1px solid #D7D9DC;
 }
+/* 自定义Message 消息提示最小宽度 */
+.myBox {
+  min-width: 30px !important;
+}
 </style>

src/components/PeopleSelect/index.vue

@@ -165,13 +165,9 @@
   
     import { listUser } from '@/api/system/user';
     import {listSimpleDepts} from "@/api/system/dept";
-    import Treeselect from '@riophae/vue-treeselect';
-    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
   
     export default {
       name: 'PeopleSelect',
-      dicts: ['sys_normal_disable', 'sys_user_sex'],
-      components: { Treeselect },
       props: {
         width: {
           type: String,

src/views/oa/entry/DataList.vue

@@ -1,43 +1,49 @@
 <template>
   <div class="container">
     <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="80px">
-      <el-form-item label="入职人" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable style="width: 250px"
+      <el-form-item label="入职人">
+        <el-input v-model="queryParams.loginName" placeholder="请输入入职人" clearable style="width: 250px"
                   @keyup.enter.native="handleQuery"/>
       </el-form-item>
-      <el-form-item label="部门" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable style="width: 250px"
-                  @keyup.enter.native="handleQuery"/>
+      <el-form-item label="部门">
+        <treeselect style="width: 250px" :default-expand-level="1" v-model="queryParams.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
       </el-form-item>
-      <el-form-item label="职位" prop="status">
-        <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 250px">
+      <el-form-item label="职位">
+        <el-select v-model="queryParams.position" placeholder="职位" clearable style="width: 250px">
           <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="员工类型" 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 label="员工类型">
+        <el-select v-model="queryParams.employeeType" placeholder="员工类型" clearable style="width: 250px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
       </el-form-item>
-      <el-form-item label="性别" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable style="width: 250px"
-                  @keyup.enter.native="handleQuery"/>
+      <el-form-item label="性别">
+        <el-select v-model="queryParams.gender" placeholder="性别" clearable style="width: 250px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
       </el-form-item>
-      <el-form-item label="联系电话" prop="code">
-        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable style="width: 250px"
+      <el-form-item label="联系电话">
+        <el-input v-model="queryParams.contactNumber" placeholder="联系电话" clearable style="width: 250px"
                   @keyup.enter.native="handleQuery"/>
       </el-form-item>
-      <el-form-item label="入职日期" prop="status">
-        <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 250px">
+      <el-form-item label="入职日期">
+        <el-date-picker style="width: 250px" value-format="yyyy-MM-dd" v-model="queryParams.startDate" type="date" placeholder="入职日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="审批状态">
+        <el-select v-model="queryParams.auditStatus" placeholder="审批状态" clearable style="width: 250px">
           <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="审批状态" 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="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 label="创建时间">
+        <el-date-picker
+      v-model="queryParams.createTime"
+      style="width: 250px"
+      type="datetime"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      placeholder="选择创建时间">
+    </el-date-picker>
       </el-form-item>
       <el-form-item label="">
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -72,8 +78,12 @@
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
 
-    <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+    <!-- 修改 -->
+    <el-dialog title="入职审批(修改)" :visible.sync="openEdit" width="800px" append-to-body>
+      <edit :id="id"></edit>
+    </el-dialog>
+    <!-- 详情 -->
+    <el-dialog title="入职审批(详情)" :visible.sync="openDetail" width="800px" append-to-body>
       <detail :id="id"></detail>
     </el-dialog>
   </div>
@@ -91,14 +101,37 @@ import {
 import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import detail from "./detail.vue";
+import edit from "./edit.vue";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { listDept } from "@/api/system/dept";
 
 export default {
   name: "SystemRole",
   components: {
-    detail
+    detail,
+    edit,
+    Treeselect,
   },
   data() {
     return {
+        // 部门树选项
+        posOptions: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
       id:'',
       // 遮罩层
       loading: true,
@@ -110,10 +143,8 @@ export default {
       total: 0,
       // 角色表格数据
       roleList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+      openEdit: false,
+      openDetail: false,
       // 是否显示弹出层（数据权限）
       openDataScope: false,
       // 是否显示弹出层（菜单权限）
@@ -166,16 +197,41 @@ export default {
   },
   created() {
     this.getList();
+    this.getListDept();
   },
   methods: {
-    handdle(row, event, column) {
-      const id = row.id
-      getRole(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "入职审批详情";
+      /** 查询部门列表 */
+      getListDept() {
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data, "id");
       });
     },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+    handdle(row) {
+      this.id = row.id;
+      if(row.sort==0){
+        this.openEdit = true;
+      }else{
+        this.openDetail = true;
+      }
+      
+      // const id = row.id
+      // getRole(id).then(response => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "入职审批详情";
+      // });
+    },
 
     /** 查询角色列表 */
     getList() {

src/views/oa/entry/detail.vue

@@ -1,80 +1,173 @@
 <template>
-  <div class="container">
-    <el-form ref="auditForm" label-position="top" :model="auditForm" :rules="auditRule" label-width="80px">
-      <el-form-item label="入职人">
-        {{ form.loginName }}
-      </el-form-item>
-      <el-form-item label="部门">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="职位">
-        {{ form.loginName }}
-      </el-form-item>
-      <el-form-item label="员工类型">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="性别">
-        {{ form.loginName }}
-      </el-form-item>
-      <el-form-item label="出生日期">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="联系电话">
-        {{ form.loginName }}
-      </el-form-item>
-      <el-form-item label="电子邮箱">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="教育背景">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="工作经验">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="入职日期">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="附件">
-        {{ form.deptId }}
-      </el-form-item>
-      <el-form-item label="备注">
-        {{ form.deptId }}
-      </el-form-item>
-
-      <el-form-item label="审批意见" prop="reason">
-        <el-input type="textarea" v-model="auditForm.reason" placeholder="请输入审批建议" />
-      </el-form-item>
-      <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-button @click="handleEdit()">修改</el-button>
-
-      <div style="float: right;">
-        <el-button @click="handleAudit(false)">拒绝</el-button>
-        <el-button type="primary" @click="handleAudit(true)">同意</el-button>
-      </div>
-    </el-form>
+  <div class="widget-wrapper">
+    <div class="widget-list">
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">入职人</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.loginName">{{ form.loginName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">部门</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.deptName">{{ form.deptName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">职位</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.position">{{ form.position }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">员工类型</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.employeeTypeName">{{ form.employeeTypeName }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">性别</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.gender">{{ form.gender }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">出生日期</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.birthday }}</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">联系电话</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.contactNumber }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">电子邮箱</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.email }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">教育背景</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.education }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">工作经验</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.workExperience }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">入职日期</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.startDate }}</span>
+        </div>
+      </div>
+
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">附件</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday" style="color: #5094d5;cursor: pointer;">附件1</span>
+        </div>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">备注</div>
+        </div>
+        <div class="field-component">
+          <span :title="form.birthday">{{ form.remarks }}</span>
+        </div>
+      </div>
+
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <span class="field-required">*</span>
+          <div class="field-name">审批意见</div>
+        </div>
+
+        <el-input type="textarea" v-model="reason" placeholder="请输入审批建议" />
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div class="field-label">
+          <div class="field-name">流程动态</div>
+        </div>
+        <el-timeline>
+          <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
+            :type="getTimelineItemType(item)">
+            <p style="font-weight: 700">任务：{{ item.name }}</p>
+            <el-card :body-style="{ padding: '10px' }">
+              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
+                审批人：{{ item.assigneeUser.nickname }}
+                <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
+              </label>
+              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+              <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
+              <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
+              <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
+                parseTime(item.endTime)
+                }}</label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
+              <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
+                {{ getDateStar(item.durationInMillis) }} </label>
+              <p v-if="item.reason">
+                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+              </p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+      <div class="fx-field x-grid-col-12">
+        <div style="float: right;">
+          <el-button @click="handleAudit(false)">拒绝</el-button>
+          <el-button type="primary" @click="handleAudit(true)">同意</el-button>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -85,11 +178,16 @@ import {
   rejectTask,
 } from "@/api/bpm/task";
 export default {
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
+  },
   data() {
     return {
-      auditForm: {
-        reason: '',
-      },
+      entryId: undefined, // 编号
+      reason: '',
       auditRule: {
         reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }],
       },
@@ -123,7 +221,6 @@ export default {
         }
       ],
       peopleList: ['林动', '萧炎', '叶凡'],
-      id: undefined, // 编号
       // 表单参数
       form: {
         loginName: '张三',
@@ -132,38 +229,51 @@ export default {
     };
   },
   created() {
-    // this.leaveId = this.id || this.$route.query.id;
-    // if (!this.leaveId) {
-    //   this.$message.error('未传递 id 参数，无法查看 OA 请假信息');
-    //   return;
-    // }
+    this.entryId = this.id || this.$route.query.id;
+    console.log(this.entryId);
     // this.getDetail();
   },
   methods: {
-    handleEdit(){
-      this.$router.push({path: '/oa/entry/edit'})
+    handleEdit() {
+      this.$router.push({ path: '/oa/entry/edit' })
     },
     handleAudit(pass) {
-      this.$refs.auditForm.validate(valid => {
-        if (!valid) {
-          return;
-        }
+      if (!this.reason) {
+        this.$message({
+          message: '请填写审批意见',
+          type: 'warning',
+          customClass: 'myBox'
+        });
+        return;
+      } else {
         const data = {
           id: '12',
-          reason: this.auditForms.reason
+          reason: this.reason
         }
         if (pass) {
-          approveTask(data).then(response => {
-            this.$modal.msgSuccess("审批通过成功！");
-            // this.getDetail(); // 获得最新详情
-          });
+          this.$modal.msgSuccess({
+              message: '审批通过成功！',
+              customClass: 'myBox'
+            });
+          // approveTask(data).then(response => {
+          //   this.$modal.msgSuccess({
+          //     message: '审批通过成功！',
+          //     customClass: 'myBox'
+          //   });
+          // });
         } else {
-          rejectTask(data).then(response => {
-            this.$modal.msgSuccess("审批不通过成功！");
-            // this.getDetail(); // 获得最新详情
-          });
+          this.$modal.msgSuccess({
+              message: '审批不通过成功！',
+              customClass: 'myBox'
+            });
+          // rejectTask(data).then(response => {
+          //   this.$modal.msgSuccess({
+          //     message: '审批不通过成功！',
+          //     customClass: 'myBox'
+          //   });
+          // });
         }
-      });
+      }
     },
     getTimelineItemIcon(item) {
       if (item.result === 1) {
@@ -206,7 +316,7 @@ export default {
     },
     /** 获得请假信息 */
     getDetail() {
-      getLeave(this.leaveId).then(response => {
+      getLeave(this.entryId).then(response => {
         this.form = response.data;
       });
     },
@@ -219,6 +329,59 @@ export default {
 } */
 </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;
 }

src/views/oa/entry/edit.vue

@@ -1,20 +1,11 @@
 <template>
-  <div>
-    <div class='fixed-header'>
-      <oabar />
-    </div>
-    <div class="dashboard-container">
-      <div v-if="status" class="apply-box">
-        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
-          <div class="from-box">
-            <div class="title">入职审批</div>
-            <el-divider></el-divider>
-            <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
+    <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='请输入'></el-input>
               </el-form-item>
               <el-form-item label="部门">
-                <treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
+                <treeselect :default-expand-level="1" v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
               </el-form-item>
               <el-form-item label="职位">
                 <el-select v-model="form.position" placeholder="请选择" style="width: 100%;">
@@ -55,15 +46,15 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="附件">
-                <FileUpload v-model="form.files" :limit="1"/>
-            <!-- <el-upload
+                <!-- <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-upload>
           </el-form-item>
               <el-form-item label="备注">
                 <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入备注" />
@@ -82,47 +73,36 @@
                 <el-button @click="onSave()">暂存</el-button>
               </el-form-item>
             </el-form>
-          </div>
           <PeopleSelect ref="peopleSelect" :type="type" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen = false"
             @submit="submitPeople"></PeopleSelect>
-        </el-card>
-
-      </div>
-      <div v-else class="data-list-box">
-        <el-card class="box-card" style="min-height: 800px;border-radius: 10px">
-          <div class="dataList-box">
-            <DataList></DataList>
-          </div>
-        </el-card>
-
-      </div>
-
+           
     </div>
 
-  </div>
 </template>
 
 <script>
-import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
-import Oabar from '../../../layout/components/Oabar.vue'
+import { getLeave }  from "@/api/bpm/leave"
+import { listDept } from "@/api/system/dept";
 import PeopleSelect from "@/components/PeopleSelect/index.vue";
-import DataList from "./DataList.vue";
+import FileUpload from "@/components/FileUpload";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { listDept } from "@/api/system/dept";
-import FileUpload from "@/components/FileUpload";
-
 export default {
   name: 'Index',
   components: {
-    Oabar,
     PeopleSelect,
-    DataList,
-    Treeselect,
     FileUpload,
+    Treeselect,
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      default: undefined
+    },
   },
   data() {
     return {
+      entryId: undefined, // 编号
       // 部门树选项
       posOptions: [{
         value: '选项1',
@@ -213,9 +193,18 @@ export default {
   },
 
   created() {
+    this.entryId = this.id || this.$route.query.id;
+    console.log(this.entryId);
+    // this.getDetail();
     this.getList();
   },
   methods: {
+    /** 获得表单信息 */
+    getDetail() {
+      getLeave(this.entryId).then(response => {
+        this.form = response.data;
+      });
+    },
     fileBeforeUpload(file) {
       // let format = '.' + file.name.split(".")[1];
       // if (format !== this.fileAccept) {
@@ -294,53 +283,6 @@ export default {
 }
 </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: 80%;
-    margin: 0 auto;
-  }
-
-  .data-list-box {
-    width: 100%;
-    margin: 0 auto;
-  }
-}
-
-.from-box {
-  padding: 20px 50px;
-
-  .title {
-    font-weight: bold;
-    font-size: 26px;
-    margin-bottom: 20px;
-  }
-}
-
-.dataList-box {
-  padding: 10px 40px;
-}
-
-
-
-
 
 .el-tag+.el-tag {
   margin-left: 10px;
@@ -353,10 +295,4 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

src/views/oa/entry/index.vue

@@ -14,7 +14,7 @@
                 <el-input v-model="form.loginName" placeholder='请输入'></el-input>
               </el-form-item>
               <el-form-item label="部门">
-                <treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
+                <treeselect :default-expand-level="1" v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
               </el-form-item>
               <el-form-item label="职位">
                 <el-select v-model="form.position" placeholder="请选择" style="width: 100%;">
@@ -55,15 +55,15 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="附件">
-                <FileUpload v-model="form.files" :limit="1"/>
-            <!-- <el-upload
+                <!-- <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-upload>
           </el-form-item>
               <el-form-item label="备注">
                 <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请输入备注" />
@@ -103,7 +103,6 @@
 </template>
 
 <script>
-import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
 import Oabar from '../../../layout/components/Oabar.vue'
 import PeopleSelect from "@/components/PeopleSelect/index.vue";
 import DataList from "./DataList.vue";
@@ -314,7 +313,7 @@ export default {
   padding: 32px;
 
   .apply-box {
-    width: 80%;
+    width: 50%;
     margin: 0 auto;
   }
 
@@ -325,7 +324,7 @@ export default {
 }
 
 .from-box {
-  padding: 20px 50px;
+  padding: 20px 0;
 
   .title {
     font-weight: bold;