增加流程页面包括样式

src/views/permissionApplication/launch.vue

@@ -6,22 +6,23 @@
         <div class="content">
           <span class="base_title">基础信息</span>
           <el-row>
-            <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"> </report-table>
+            <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
           </el-row>
           <el-row>
             <el-form ref="form" :model="applicationForm" label-width="150px"
-                     class="label-input-form" size="medium">
+                     class="label-input-form" size="medium" :rules="applicationFormRule"
+            :disabled="formControl">
               <el-row>
                 <el-col :span="9">
-                  <el-form-item label="申请原因">
+                  <el-form-item label="申请原因:" prop="name">
                     <el-input type="textarea" v-model="applicationForm.name"></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="9" :offset="6">
-                  <el-form-item label="选择申请权限">
-                    <el-select v-model="value" placeholder="请选择">
+                  <el-form-item label="选择申请权限:" prop="send">
+                    <el-select v-model="applicationForm.send" placeholder="">
                       <el-option
-                        v-for="item in options"
+                        v-for="item in PERMISSION"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
@@ -33,62 +34,124 @@
             </el-form>
           </el-row>
         </div>
+        <div class="content">
+          <span class="base_title">审批历史</span>
+          <process-approval-history></process-approval-history>
+        </div>
         <div class="content">
           <span class="base_title">指派信息</span>
           <el-form ref="form" :model="assignForm" label-width="150px"
-                   class="label-input-form" size="medium">
+                 :rules="assignFormRules"  class="label-input-form" size="medium">
             <el-row>
               <el-col :span="9">
-                <el-form-item label="活动名称">
-                  <el-input v-model="assignForm.name"></el-input>
+                <el-form-item label="选择一级审批人员:" prop="name1">
+                  <el-input v-model="assignForm.name1"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="9" :offset="6">
-                <el-form-item label="活动名称">
-                  <el-input v-model="assignForm.name"></el-input>
+
+            </el-row>
+            <el-row>
+              <el-col :span="9" >
+                <el-form-item label="选择二级审批人员:"  prop="name2">
+                  <el-input v-model="assignForm.name2"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24" >
+                <el-form-item label="说明:">
+                  <el-input type="textarea" v-model="assignForm.remark"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
-
           </el-form>
         </div>
       </div>
+    <process-footer
+      showCancel
+      :show-reset="isShowReset"
+      :show-submit="isShowSubmit"
+      :submitLoading="isSubmit"
+      :resetLoading="resetLoading"
+      @reset="handleReset"
+      @submit="handleSubmit"
+    ></process-footer>
     </div>
   </div>
 </template>
 
 <script>
 import processHeader from '@/components/ProcessHeader'
+import processFooter from '@/components/ProcessFooter'
+import processApprovalHistory from '@/components/ProcessApprovalHistory'
 import reportTable from './components/reportTable'
+import { PERMISSION } from '@/utils/Enum/enum'
+
 export default {
   name: 'launch',
   components: {
     processHeader,
-    reportTable
+    reportTable,
+    processFooter,
+    processApprovalHistory
   },
   data () {
     return {
+      isSubmit: false,
+      resetLoading: false,
+      isShowReset: true,
+      isShowSubmit: true,
+      formControl: false,
       assignForm: {},
       tableData: [],
       applicationForm: {},
       q: {
         pageSize: 10000,
         pageNo: 1
+      },
+      PERMISSION,
+      applicationFormRule: {
+        name: [{
+          max: 1000, message: '申请原因最多填写1000字符'
+        }],
+        send: [{
+          required: true,
+          message: '请选择申请权限'
+        }]
+      },
+      assignFormRules: {
+        name1: [{
+          required: true,
+          message: '请选择一级审批人员'
+        }],
+        name2: [{
+          required: true,
+          message: '请选择二级审批人员'
+        }],
+        remark: [{
+          max: 1000, message: '说明最多填写1000字符'
+        }]
       }
     }
   },
   created () {
-    this.reportList()
+    if (this.$route.query.ids) {
+      this.reportList(this.$route.query.ids)
+    }
+    console.log(this.PERMISSION, 'ddd')
   },
   methods: {
     // 获取表格列表 吧查询到的值传给子组件
-    reportList () {
-      this.$api.report.reportList(this.q).then(({ data }) => {
+    reportList (ids) {
+      this.$api.report.reportList({ id: ids }).then(({ data }) => {
         this.tableData = data.records
       })
+    },
+    handleReset () {
+      this.applicationForm = {}
+      this.assignForm = {}
     }
   }
-
 }
 </script>