增加流程页面包括样式

src/api/modules/process.js

@@ -0,0 +1,9 @@
+import { instance as request } from '@/utils/request'
+
+export function getUserOrgDept (data) {
+  return request({
+    url: '/api/sys/role/getUserAndOrg',
+    method: 'get',
+    params: data
+  })
+}

src/assets/css/process.scss

@@ -28,6 +28,7 @@
   border-bottom: 3px solid #409eff;
   margin-bottom: 20px;
 }
+
 // 表单的样式
 .label-input-form{
   padding-right: 80px;
@@ -36,9 +37,21 @@
     font-size: 15px;
     color:#555 !important;
   }
-  .el-form-item.el-input__inner{
+  .el-form-item.el-input__inner,.el-form-item {
     height: 40px;
     line-height: 40px;
   }
+  .el-select{
+    width: 100%;
+  }
+  .add-form-item{
+    .el-input{
+      width: 100%;
+    }
+    .el-input__inner{
+      height: 40px;
+      line-height: 40px;
+    }
+  }
 }
 

src/components/ProcessApprovalHistory.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="table-box">
+    <el-table
+      :data="standTableList"
+      style="width: 100%;margin-bottom: 30px"
+      max-height="402"
+      v-loading="loading"
+      :header-cell-style="{ color: '#606266', fontSize: '13px',
+       height: '48px'}"
+      @sort-change="sortChange">
+      <el-table-column
+        show-overflow-tooltip
+        prop="orgName"
+        align="center"
+        label="审批人所在部门">
+        <template slot-scope="scope">
+          <span >{{ scope.row.orgName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="assignee"
+        align="center"
+        label="审批人员">
+        <template slot-scope="scope">
+          <span>{{ scope.row.assignee }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="standStateShow"
+        label="审批结果"
+        align="center"
+      >
+        <template slot-scope="scope">
+                      <span v-if="scope.row.approvalResult == '1' || scope.row.approvalResult == '3' ">
+                           同意
+                      </span>
+          <span v-else-if="scope.row.approvalResult == '2'">
+                           不同意
+                      </span>
+          <span v-else></span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="approvalOpinion"
+        align="center"
+        show-overflow-tooltip
+        label="审批意见">
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        width="160px"
+        align="center"
+        label="开始时间"
+        prop="startTime"
+        sortable="custom">
+        <template slot-scope="scope">
+          <span>{{ scope.row.startTime ? formatIssueDate(scope.row.startTime) : '' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        width="160px"
+        align="center"
+        label="完成时间"
+        prop="endTime"
+        sortable="custom">
+        <template slot-scope="scope">
+          <span>{{ scope.row.endTime ? formatIssueDate(scope.row.endTime) : '' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        width="150px"
+        align="center"
+        label="审批处理时长（天）">
+        <template slot-scope="scope">
+          <span>{{scope.row.endTime ? scope.row.approvalTime : ''}}</span>
+        </template>
+      </el-table-column>
+      <!--              <el-table-column-->
+      <!--                      show-overflow-tooltip-->
+      <!--                      align="center"-->
+      <!--                      prop="approvalFile"-->
+      <!--                      width="150px"-->
+      <!--                      label="附件">-->
+      <!--                  <template slot-scope="scope">-->
+      <!--&lt;!&ndash;                      <span>{{ scope.row.approvalFile }}</span>&ndash;&gt;-->
+      <!--                       <span class="lookFile" @click="lookFile(scope.row.approvalFile)" v-if="scope.row.approvalFile">查看附件</span>-->
+      <!--                       <span v-else>-</span>-->
+      <!--                  </template>-->
+      <!--              </el-table-column>-->
+    </el-table>
+    <el-dialog
+      width='400px'
+      :visible.sync="importModalshowflagtemp"
+      title="查看附件"
+      @close="defaultFileList = []"
+    >
+      <div class="fileList" v-for="(item,index) in defaultFileList" :key="index">
+        <span class="filename" :title="item.name">{{item.name}}</span>
+        <span class="fileDown" @click="fileDown(item.id)">下载</span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'approvalHistory',
+  props: ['query'],
+  data () {
+    return {
+      loading: false,
+      standTableList: [],
+      importModalshowflagtemp: false,
+      defaultFileList: [],
+      uploadPath: 'api/att/attFile/upload'// 上传文件
+    }
+  },
+  created () {
+    this.getListByInstance({})
+  },
+  methods: {
+    // 表格排序
+    sortChange (column, prop, order) {
+      const form = {}
+      form.sortWord = column.prop
+      if (column.order === 'ascending') {
+        form.shunxu = 'asc'
+      } else if (column.order === 'descending') {
+        form.shunxu = 'desc'
+      } else {
+        form.shunxu = ''
+        form.sortWord = ''
+      }
+      this.getListByInstance(form)
+    },
+    formatIssueDate (str) {
+      const momentDate = this.$moment(str)
+      if (momentDate.isValid()) {
+        return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
+      } else {
+        return str
+      }
+    },
+    getListByInstance (form) {
+      this.$http.get('lawss/activiti/get_list_by_instance', {
+        prcNum: this.query.prcNum,
+        ...form
+      }, {
+        _this: this,
+        loading: 'loading'
+      }, res => {
+        this.standTableList = res
+      }, e => {
+      })
+    },
+    lookFile (approvalFile) {
+      this.importModalshowflagtemp = true
+      this.clickButtonToUpload(approvalFile)
+    },
+    fileDown (id) {
+      window.location.href = '/api/att/attFile/downloadFile?fileId=' + id
+      // this.$http.get('att/attFile/downloadFile', {
+      //     fileId: id
+      // }, {
+      //     _this: this
+      // }, res => {
+      //
+      // }, e => {
+      // })
+    },
+    clickButtonToUpload (current) {
+      if (current) {
+        this.$http.get('att/attFile/getMultiFileInfos', {
+          fileIds: current
+        }, {
+          _this: this
+        }, res => {
+          res.data.map(item => {
+            item.name = item.oldFileName
+          })
+          this.defaultFileList = res.data || []
+        }, e => {
+        })
+      } else {
+        this.defaultFileList = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-box{
+  width: 100%;
+  .el-table{
+    border: 1px solid #e5e5e5;
+  }
+}
+.lookFile{
+  color: #0c91e5;
+}
+.lookFile:hover{
+  cursor: pointer;
+}
+.fileList{
+  width: 100%;
+  line-height: 2;
+}
+.filename{
+  width: 90%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  white-space:nowrap;
+}
+.fileDown{
+  color: #0c91e5;
+  position: absolute;
+}
+.fileDown:hover{
+  cursor: pointer;
+}
+
+.file .el-upload{
+  display: none!important;
+}
+</style>

src/components/ProcessChooseTree.vue

@@ -0,0 +1,790 @@
+<!-- 分页从全公司选择人员 -->
+<template>
+  <div>
+    <!-- 弹窗,dialogModel则作为单独组件使用 -->
+    <el-dialog
+      append-to-body
+      :title="showTitle"
+      :visible.sync="isVisible"
+      :close-on-click-modal="false"
+      class="org-table"
+      @close="handleClose">
+      <div class="search-area">
+        <el-form
+          :model="searchForm"
+          inline
+          class="label-input-form"
+          @keyup.enter.native="handleSearch">
+          <el-form-item label="部门" class="search-item">
+            <el-input v-model="searchForm.orgId" v-show="false"/>
+            <el-popover
+                placement="bottom"
+                popper-class="user-dept-popper"
+                trigger="click"
+                :value="false"
+            >
+              <el-input
+                  @mouseenter.native="handleMouseEnter"
+                  @mouseleave.native="handleMouseLeave"
+                  slot="reference"
+                  v-model="searchForm.orgName"
+                  placeholder="根据部门查询"
+                  readonly
+                  clearable
+                  id="orgInput">
+                <i slot="suffix"
+                   class="org el-icon-circle-close"
+                   @click.stop="handleOrgDel"
+                   v-show="visibleOrgClearBtn"></i>
+              </el-input>
+              <div class="api">
+                <laws-tree
+                  :zNodes="orgZNodes"
+                  ref="orgTree"
+                  :editable="false"
+                  treeDivId="orgTree"
+                  deptSelect
+                  @treeDblClick="handleSearchOrgChecked"
+                  style="width: 200px;height: 400px;overflow: auto;">
+                </laws-tree>
+              </div>
+            </el-popover>
+          </el-form-item>
+          <el-form-item label="姓名" class="search-item">
+            <el-input
+                v-model="searchForm.uname"
+                placeholder="根据姓名查询"
+                clearable></el-input>
+          </el-form-item>
+          <el-form-item class="search-item btn-box">
+            <el-button
+                :loading="loading.searching"
+                type="primary"
+                class="common-button-primary"
+                size="small" icon="el-icon-search"
+                @click="handleSearch">查询
+<!--                <img src="@/assets/images/btn/search.png" alt="">-->
+            </el-button>
+            <el-button
+                class="common-button-default"
+                size="small" icon="el-icon-refresh-left"
+                @click="handleReset">重置
+<!--                <img src="@/assets/images/btn/reset.png" alt="">-->
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="org-user">
+        <el-table
+            ref="orgTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+            border
+            stripe
+            :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
+            height="350"
+            v-loading="loading.loadData"
+            :cell-class-name="cellClassName"
+            @select="selectionRow"
+            @select-all="selectionRowAll">
+            <el-table-column v-if="maxSelected && maxSelected == 1" label="" width="55" align="center">
+                <template slot-scope="scope">
+                    <el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)" :label="scope.row.userId">{{null}}</el-radio>
+                </template>
+            </el-table-column>
+          <el-table-column
+              v-else
+              type="selection"
+              width="55"
+              align="center"
+              :selectable="isSelectable">
+          </el-table-column>
+          <el-table-column
+              label="姓名"
+              width="120"
+              prop="userName"
+              align="center">
+          </el-table-column>
+          <el-table-column
+              v-if="workNumFlag"
+              label="工号"
+              width="120"
+              prop="workNum"
+              align="center">
+          </el-table-column>
+          <el-table-column
+              prop="email"
+              label="邮箱"
+              align="center"
+              show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+              prop="roleNames"
+              label="角色"
+              align="center">
+<!--            <template slot-scope="scope">-->
+<!--              <div class="tag-wrap">-->
+<!--                <el-tag-->
+<!--                  size="small"-->
+<!--                  v-for="(tag, index) in scope.row.roleName.split(',')"-->
+<!--                  :key="index">{{ tag }}</el-tag>-->
+<!--              </div>-->
+<!--            </template>-->
+          </el-table-column>
+          <el-table-column
+            label="部门"
+            align="center">
+            <template #default="{ row }">{{ row.departmentName || row.departName || row.orgName }}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+          :page="page"
+          :pageSize="pageSize"
+          :total="total"
+          @pageChange="handlePageChange"
+          @pageSizeChange="handlePageSizeChange"
+      ></pagination>
+
+      <!-- 已选择的用户 -->
+      <el-divider content-position="left">已选择</el-divider>
+      <div class="checked-user-list">
+        <el-tag
+          size="medium"
+          closable
+          v-for="item in checkedList"
+          :key="item.usid || item.userId || item.id"
+          @close="handleRemove(item)">{{ item.uname || item.userName || item.name }}</el-tag>
+        <el-button
+          type="danger"
+          size="mini"
+          @click="handleCleanChecked"
+          v-show="checkedIdList.length > 1">全部删除</el-button>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button
+            type="primary"
+            class="common-button-primary"
+            size="small"
+            @click="handleConfirm">确 定</el-button>
+        <el-button
+            size="small"
+            class="common-button-default"
+            @click="handleCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 非弹窗模式使用 -->
+    <el-col :span="span" v-if="!dialogModel">
+      <el-form-item
+          :label="config.attrName"
+          :prop="config.attrField"
+          :label-width="labelWidth"
+          class="add-form-item expand-form-item"
+          :class="{'form-item-disabled': disabled}"
+      >
+        <el-input
+            v-model="checkedName"
+            :placeholder="'请选择' + config.attrName"
+            readonly
+            :disabled="disabled"
+            :id="config.attrField"
+            @click.native="handleChooseByDialog"
+        />
+      </el-form-item>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'OrgTable',
+  mixins: [],
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: '组织机构'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 弹窗模式选取
+    dialogModel: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object
+    },
+    value: {
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 栅格比例
+    span: {
+      type: Number,
+      default: 24
+    },
+    // 原数据对象
+    dataModel: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    labelWidth: {
+      type: String,
+      default: '152px'
+    },
+    maxSelected: {
+      type: Number
+    },
+    maxSelectedTips: {
+      type: String
+    },
+    // 不可选人员
+    excludeUser: {
+      type: [Array, String]
+    },
+    defaultCheck: {
+      type: Object
+    },
+    deptZNodes: {
+      type: Array
+    },
+    orgId: {
+      type: String
+    },
+    roleName: {
+      type: String
+    },
+    searchVal: {
+      type: Object
+    },
+    workNumFlag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isVisible: false,
+      visibleOrgClearBtn: false,
+      searchForm: {
+        orgId: '',
+        orgName: '',
+        userName: '',
+        uname: ''
+      },
+      tableData: [],
+      tableChecked: null,
+      tableDataSelectedList: [],
+      page: 1,
+      pageSize: this.configContent,
+      total: 0,
+      checkedList: [],
+      loading: {
+        searching: false,
+        loadData: false
+      },
+      orgZNodes: [],
+      // 选中节点id集合
+      checkedIdList: [],
+      // 非弹窗模式
+      treeCheckNode: [],
+      checkedName: '',
+      zNodesRole: [],
+      roleList: [],
+      repeatFlag: false
+    }
+  },
+  methods: {
+    handleClose () {
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        userName: '',
+        uname: ''
+      }
+      this.page = 1
+      this.checkedList = []
+      this.checkedIdList = []
+      this.$refs.orgTable.clearSelection()
+    },
+
+    handleCancel () {
+      this.isVisible = false
+    },
+
+    handleConfirm () {
+      if (this.dialogModel) {
+        if (this.maxSelected && this.maxSelected > -1 && this.checkedList.length > this.maxSelected) {
+          this.$message.warning(this.maxSelectedTips || `${this.title} 只能选择一个用户`)
+        } else {
+          const checkedIdList = []
+          this.checkedList.map(chkItem => {
+            checkedIdList.push(chkItem.usid || chkItem.userId || chkItem.id)
+          })
+          this.$emit('confirm', this.checkedList, checkedIdList)
+          this.isVisible = false
+        }
+      } else {
+        switch (this.config.attrType) {
+          // 多选
+          case 'SEL_OPTS':
+            break
+          // 单选
+          default:
+            if (this.checkedList.length > 1) {
+              this.$message.warning(`${this.config.attrName} 只能选择一个用户`)
+            } else {
+              const dataItem = this.checkedList[0]
+              this.checkedName = dataItem.uname || dataItem.userName || dataItem.orgName
+              const id = dataItem.id || dataItem.userId || dataItem.usid
+              this.$emit('input', id)
+              this.$emit('on-checked', this.checkedName)
+              this.$emit('on-dept', dataItem.pOrgId, dataItem.pOrgName)
+              setTimeout(() => {
+                this.isVisible = false
+              }, 100)
+            }
+        }
+      }
+    },
+
+    handlePageChange (page) {
+      this.page = page
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handlePageSizeChange (pageSize) {
+      this.pageSize = pageSize
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearch () {
+      this.page = 1
+      this.loading.searching = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleReset () {
+      this.page = 1
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        userName: '',
+        uname: ''
+      }
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearchOrgChecked (treeId, treeNode) {
+      this.searchForm.orgId = treeNode.id
+      this.searchForm.orgName = treeNode.oldname || treeNode.name
+      $('#orgInput').click()
+    },
+
+    /**
+     * @description: 获取组织机构
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 14:40:59
+     */
+    getOrg () {
+      this.$http.get('sys/org/getTree', {}, { _this: this },
+        res => {
+          if (res.ok) {
+            res.data.map(item => {
+              item.name = item.orgName
+              item.icon = 'static/images/dept.png'
+            })
+            this.orgZNodes = res.data
+          }
+        }, e => {})
+    },
+
+    /**
+     * @description: 分页查询用户
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 17:08:06
+     */
+    getRoleAndUserByOrgIdPage () {
+      this.loading.loadData = true
+      if (this.orgId) {
+        if (this.searchForm.orgId === '') {
+          this.searchForm.orgId = this.orgId
+        }
+      }
+
+      this.$api.process.getRoleAndUserByOrgIdPage({
+        page: this.page,
+        pageSize: this.pageSize,
+        ...this.searchForm,
+        roleName: this.roleName,
+        notUserId: JSON.parse(localStorage.getItem('userInfo')).userId
+      }).then(res => {
+        this.loading.loadData = false
+        this.loading.searching = false
+        if (res.ok) {
+          this.total = res.data.count
+          this.tableData = res.data.list
+
+          const checkedRow = []
+          this.tableData.map(dataItem => {
+            const id = dataItem.usid || dataItem.userId || dataItem.orgId || dataItem.id
+            if (this.checkedIdList.includes(id)) {
+              checkedRow.push(dataItem)
+            }
+          })
+          this.checkedRow(checkedRow)
+        }
+      }).catch(e => {
+        this.loading.loadData = false
+        this.loading.searching = false
+      })
+    },
+
+    // handleRowSelect(selection, row) {
+    //   const id = row.userId || row.id
+    //   // 当前行选中/取消选中,其他相同用户(角色不同)被选中/取消选中
+    //   this.tableData.map(dataItem => {
+    //     if (dataItem.userId === id || dataItem.id === id) {
+    //       this.$refs['orgTable'].toggleRowSelection(dataItem, selection.includes(row))
+    //     }
+    //   })
+    //   console.log(this.checkedList)
+    // },
+    radioChange (e) {
+      // console.log(e)
+      this.checkedIdList = []
+      this.checkedList = []
+      this.checkedIdList.push(e.userId)
+      this.checkedList.push(e)
+    },
+    selectionRow (selection, row) {
+      const selected = selection.length && selection.indexOf(row) !== -1 // 为true时选中，为 0 时（false）未选中
+      if (selected) {
+        selection.map(selItem => {
+          const id = selItem.userId
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(row)
+          }
+        })
+      } else {
+        this.handleRemove(row, 'table')
+      }
+    },
+    selectionRowAll (selection) {
+      if (selection.length > 0) {
+        selection.map(selItem => {
+          const id = selItem.userId
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(selItem)
+          }
+        })
+      } else {
+        this.tableData.map(selItem => {
+          this.handleRemove(selItem, 'table')
+        })
+      }
+    },
+
+    handleSelectionChange (selection) {
+      if (selection.length) {
+        selection.map(selItem => {
+          const id = selItem.usid || selItem.userId || selItem.orgId || selItem.id
+          // 如果exclude不含当前行
+          if (!this.excludeIdList.includes(id)) {
+            // 如果下面列表没有,就填到下面列表里
+            if (!this.checkedIdList.includes(id)) {
+              this.checkedList.push(selItem)
+              this.checkedIdList.push(id)
+            }
+          } else {
+            // 如果exclude含当前行,当前行置为未选中状态
+            // this.$message.warning('主起草人/其他起草人不能为同一个人')
+            // this.$nextTick(() => {
+            //   this.$refs['orgTable'].toggleRowSelection(selItem, false)
+            // })
+          }
+        })
+      }
+    },
+
+    handleRemove (user, type) {
+      let delIndex = -1
+      this.checkedList.map((checkedItem, chkIndex) => {
+        if (user.userId === checkedItem.userId) {
+          delIndex = chkIndex
+          if (type !== 'table') {
+            this.checkedRow([checkedItem])
+          }
+          return false
+        }
+      })
+      this.checkedList.splice(delIndex, 1)
+      this.checkedIdList.splice(delIndex, 1)
+    },
+
+    handleOrgDel () {
+      this.searchForm.orgId = ''
+      this.searchForm.orgName = ''
+    },
+
+    /**
+     * @description: 设置选中状态
+     * @author: chenxiaoxi
+     * @time: 2021-03-22 10:06:03
+     */
+    checkedRow (rows) {
+      this.$nextTick(() => {
+        if (rows.length) {
+          rows.forEach(row => {
+            this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(row)
+          })
+        } else {
+          this.$refs.orgTable && this.$refs.orgTable.clearSelection()
+        }
+      })
+    },
+
+    cellClassName ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 3) {
+        return 'tag-column'
+      }
+    },
+
+    isSelectable (row, index) {
+      return !this.excludeIdList.includes(row.userId)
+    },
+
+    handleChooseByDialog () {
+      if (!this.dialogModel) {
+        this.checkedName = this.config.valueName || ''
+        if (this.config.value) {
+          this.checkedList = [{
+            userId: this.config.value,
+            userName: this.config.valueName
+          }]
+        }
+        const idList = this.config.value === '' || !this.config.value ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+      this.isVisible = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleMouseEnter () {
+      if (this.searchForm.orgName !== '') {
+        this.visibleOrgClearBtn = true
+      }
+    },
+
+    handleMouseLeave () {
+      this.visibleOrgClearBtn = false
+    },
+
+    handleCleanChecked () {
+      this.$confirm('您是否确定移除全部已选中', '确定移除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+
+        type: 'warning'
+      }).then(() => {
+        this.checkedList = []
+        this.checkedIdList = []
+        this.$refs.orgTable.clearSelection()
+      }).catch(e => {})
+    }
+  },
+  computed: {
+    configContent () {
+      return this.userInfo.configContent
+    },
+
+    placeholder () {
+      return !this.dialogModel && `请选择${this.config.attrName}`
+    },
+    showMessage () {
+      return !this.dialogModel && `${this.config.attrName}不能为空`
+    },
+    isRequired () {
+      return !this.dialogModel && !!this.config.isMust
+    },
+    isString (str) {
+      return (typeof str === 'string') && str.constructor === String
+    },
+    isFO () {
+      return !this.dialogModel && this.config.attrField === 'FO'
+    },
+    ZRBM () {
+      return this.dataModel.ZRBM || ''
+    },
+    showTitle () {
+      return this.dialogModel ? this.title : this.config.attrName
+    },
+    excludeIdList () {
+      return this.excludeUser && this.excludeUser !== '' ? (this.excludeUser instanceof Array ? this.excludeUser : this.excludeUser.split(',')) : []
+    },
+    ...mapGetters(['userInfo'])
+  },
+  watch: {
+    visible (val) {
+      this.isVisible = val
+      this.tableChecked = null
+      if (val) {
+        if (this.config.value && this.config.value !== '') {
+          const idListDepartment = []
+          const nameListDepartment = []
+          const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+          const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+          if (this.config.valueDepartment) {
+            const idListDepartment = this.config.valueDepartment instanceof Array ? this.config.valueDepartment : (this.config.valueDepartment === '' ? [] : this.config.valueDepartment.split(','))
+            const nameListDepartment = this.config.valueNameDepartment instanceof Array ? this.config.valueNameDepartment.split(',') : (this.config.valueNameDepartment === '' ? [] : this.config.valueNameDepartment.split(','))
+          }
+          this.checkedIdList = idList
+          const checkedList = []
+          idList.map((id, index) => {
+            checkedList.push({
+              userId: id,
+              userName: nameList[index],
+              orgId: idListDepartment[index],
+              orgName: nameListDepartment[index]
+            })
+          })
+          if (this.maxSelected == 1) this.tableChecked = this.config.value
+          // console.log(checkedList,'checkedList','idListDepartment===',idListDepartment,'nameListDepartment===',nameListDepartment)
+          this.checkedList = checkedList
+        }
+        if (this.searchVal && this.searchVal.type == 'qcrbm') {
+          this.searchForm.orgId = this.searchVal.OrgId
+          this.searchForm.orgName = this.searchVal.orgName
+        } else {
+          this.searchForm.orgId = ''
+          this.searchForm.orgName = ''
+        }
+        this.getRoleAndUserByOrgIdPage()
+      }
+    },
+    isVisible (val) {
+      this.$emit('update:visible', val)
+    },
+    value (newVal, oldVal) {
+      this.checkedName = newVal !== '' ? this.checkedName : ''
+    },
+    deptZNodes: {
+      handler (val) {
+        this.orgZNodes = val
+      }
+    }
+  },
+  mounted () {
+    this.isVisible = this.visible
+
+    if (!this.dialogModel) {
+      this.checkedName = this.config.valueName || ''
+      if (this.config.value !== '') {
+        this.checkedList = [{
+          userId: this.config.value,
+          userName: this.config.valueName
+        }]
+        const idList = this.config.value === '' ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+    } else {
+      const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+      const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+      this.checkedIdList = idList
+      const checkedList = []
+      idList.map((id, index) => {
+        checkedList.push({
+          userId: id,
+          userName: nameList[index]
+        })
+      })
+      this.checkedList = checkedList
+    }
+
+    this.getOrg()
+    // this.getRoleAndUserByOrgIdPage()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.org-table {
+  ::v-deep .el-dialog__header {
+    padding: 0 20px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+  }
+  ::v-deep .el-dialog__body {
+    padding: 15px 20px 20px 20px;
+  }
+  .search-area {
+    padding: 0;
+    ::v-deep .el-form-item__label {
+      line-height: 35px;
+    }
+    ::v-deep .el-form-item__content {
+      line-height: 35px;
+      .el-input__inner {
+        height: 35px;
+        line-height: 35px;
+      }
+    }
+  }
+  .pagination {
+    position: static;
+  }
+  .checked-user-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    .el-tag {
+      margin: 0 10px 10px 0;
+    }
+    .el-button--mini {
+      padding: 0 15px;
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+}
+::v-deep .el-popover__reference-wrapper {
+  .el-input__suffix {
+    padding-right: 5px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+::v-deep .tag-column {
+  .cell {
+    padding: 5px 10px;
+    overflow: visible;
+    text-overflow: clip;
+    .tag-wrap {
+      .el-tag {
+        height: auto;
+        white-space: normal;
+        text-align: left;
+      }
+    }
+  }
+}
+</style>

src/components/ProcessFooter.vue

@@ -0,0 +1,420 @@
+<!-- ProcessFooter -->
+<template>
+  <div class="process-footer" v-if="showSave || showSubmit || showCancel">
+    <div class="footer-line"></div>
+    <div class="btn-group-wrap" style="text-align: center">
+      <slot></slot>
+      <el-button
+        type="warning"
+        size="small"
+        class="common-button-warning"
+        @click="handleOnLineEdit"
+        v-if="showEdit">在线编辑</el-button>
+      <!--      <el-button-->
+      <!--        type="primary"-->
+      <!--        round-->
+      <!--        class="common-button-primary"-->
+      <!--        @click="handleEntrust"-->
+      <!--        :loading="isSubmit"-->
+      <!--        v-if="showEntrust">-->
+      <!--        <i class="iconfont" style="font-size: 12px;">&#xe615;</i>-->
+      <!--        委托</el-button>-->
+      <el-button
+        type="primary"
+        size="small"
+        class="common-button-primary"
+        @click="handleSendEmail"
+        :loading="sendEmailLoading"
+        v-if="showSendEmail"
+      >发送邮件</el-button>
+      <el-button
+        type="danger"
+        class="common-button-danger"
+        size="small"
+        @click="handleOver"
+        :loading="submitLoading"
+        v-if="showOver"
+      >撤销申请</el-button>
+      <el-button
+        type="danger"
+        size="small"
+        class="common-button-danger"
+        @click="beforeBack"
+        :loading="isSubmit"
+        v-if="showBack">
+
+        {{ backBTNText }}</el-button>
+      <div style="display: inline-block;">
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary"
+          @click="handleTransfer"
+          :loading="TransferLoading"
+          v-if="showTransfer"
+        >转办</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          class="common-button-primary"
+          @click="handleSave"
+          :loading="saveLoading"
+          v-if="showSave">
+          保存
+        </el-button>
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary"
+          @click="handleReset"
+          :loading="resetLoading"
+          v-if="showReset">
+          重置
+        </el-button>
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary"
+          @click="handleSubmit"
+          :loading="submitLoading"
+          v-if="showSubmit"
+        >{{ submitBTNTextShow }}</el-button>
+      </div>
+      <!--      <el-button-->
+      <!--              style="float:right;margin-top: 12px;"-->
+      <!--              type="danger"-->
+      <!--              round-->
+      <!--              class="common-button-danger"-->
+      <!--              @click="cancel"-->
+      <!--              :loading="isSubmit"-->
+      <!--              v-if="showCancel">-->
+      <!--        <i class="iconfont" style="font-size: 12px;">&#xe615;</i>-->
+      <!--        取消 </el-button>-->
+    </div>
+
+    <!-- 组织机构树 -->
+    <!--    <ProcessChooseTree-->
+    <!--      :visible.sync="visibleTree"-->
+    <!--      show-user-->
+    <!--      :dept-select="false"-->
+    <!--      @dblClick="handleAssigneeNew"-->
+    <!--    ></ProcessChooseTree>-->
+
+    <!-- 在线编辑 -->
+<!--    <only-office-edit ref="onlyOffice" :visible.sync="visibleOnlyOffice"></only-office-edit>-->
+
+    <!-- 从全公司选人,2021-03-22(上汽大数据量人员解决方案) -->
+    <org-table
+      v-if="showEntrust"
+      :visible.sync="visibleTree"
+      :config="{
+          value: this.orgTableVal,
+          valueName: this.orgTableName
+        }"
+      title="委托"
+      :exclude-user="userId"
+      :max-selected="1"
+      max-selected-tips="当前任务只能委托给一个人"
+      dialog-model
+      @confirm="handleAssigneeNew"
+    ></org-table>
+  </div>
+</template>
+
+<script>
+import ProcessChooseTree from './ProcessChooseTree'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ProcessFooter',
+  mixins: [],
+  props: {
+    // 是否显示结束流程按钮
+    showOver: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示保存按钮
+    showSave: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示重置按钮
+    showReset: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示发送邮件按钮
+    showSendEmail: {
+      type: Boolean,
+      default: false
+    },
+    // 发送邮件按钮loading
+    sendEmailLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示提交按钮
+    showSubmit: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示委托按钮
+    showEntrust: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示退回按钮
+    showBack: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示转办按钮
+    showTransfer: {
+      type: Boolean,
+      default: false
+    },
+    // 提交按钮loading
+    submitLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 保存按钮loading
+    saveLoading: {
+      type: Boolean,
+      default: false
+    },
+    resetLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 转办按钮loading
+    TransferLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否默认委托事件
+    defaultEntrust: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示在线编辑按钮
+    showEdit: {
+      type: Boolean,
+      default: false
+    },
+    // 标准编号(在线编辑)
+    standNo: {
+      type: String
+    },
+    // 未选择标准编号/企标编号进行在线编辑的提示
+    noStandNoTip: {
+      type: String,
+      default: '请选择或输入企标编号后进行在线编辑'
+    },
+    // 审批节点
+    approval: {
+      type: Boolean,
+      default: false
+    },
+    // 带有退回/驳回意见
+    opinion: {
+      type: Boolean,
+      default: false
+    },
+    submitBTNText: {
+      type: String
+    }
+  },
+  components: {
+    ProcessChooseTree
+  },
+  data () {
+    return {
+      isSubmit: false,
+      visibleTree: false,
+      visibleOnlyOffice: false,
+      orgTableVal: '',
+      orgTableName: ''
+    }
+  },
+  methods: {
+    /**
+     * @description: 委托
+     * @date: 2020-12-14 15:51:10
+     * @auth: chenxiaoxi
+     */
+    changeAssigneeNew (treeNode) {
+      changeAssigneeNew({
+        taskId: this.$store.getters.getHandleInfo.taskIds, // 任务id
+        assignee: treeNode.id, // 被委托人
+        userId: this.$store.getters.userInfo.userId, // 委托人
+        pId: this.$store.getters.getHandleInfo.prcId // 流程实例
+      }).then(res => {
+        if (res.success) {
+          this.$message.success('委托成功')
+          setTimeout(() => {
+            this.$router.push('/processCenter')
+          }, 100)
+          this.visibleTree = false
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    handleOver () {
+      this.$emit('over')
+    },
+    handleSave () {
+      this.$emit('save')
+    },
+    handleReset () {
+      this.$emit('reset')
+    },
+    handleSubmit () {
+      this.$emit('submit')
+    },
+    cancel () {
+      if (this.$store.state.detailMap !== '') {
+        this.$router.push({
+          path: this.$store.state.detailMap,
+          query: {
+            tabsName: this.$store.getters.getHandleInfo.tabsName
+          }
+        })
+        this.$store.commit('setDetailMap', '')
+      } else {
+        this.$router.push({
+          name: 'ProcessCenter',
+          query: {
+            tabsName: 'ProcessCenter'
+          }
+        })
+      }
+      // this.$emit('cancel')
+    },
+    handleSendEmail () {
+      this.$emit('sendEmail')
+    },
+    handleTransfer () {
+      this.$emit('transfer')
+    },
+    handleEntrust () {
+      if (this.defaultEntrust) {
+        this.visibleTree = true
+      } else {
+        this.$emit('entrust')
+      }
+    },
+    handleBack () {
+      if (!this.opinion) {
+        this.$confirm(`您确定要${this.approval ? '驳回' : '退回'}该任务吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          confirmButtonClass: 'common-button-primary'
+
+        }).then(() => {
+          this.$emit('back')
+        }).catch(() => {})
+      } else {
+        this.$emit('back')
+      }
+    },
+
+    /**
+     * @description: 委托
+     * @date: 2020-12-16 10:11:31
+     * @auth: chenxiaoxi
+     */
+    handleAssigneeNew (checkedList, checkedIdList) {
+      if (!checkedList.length) { return false }
+      const assignee = checkedIdList[0]
+      const assigneeUserName = checkedList[0].userName
+      this.$confirm(`您确定要委托 ${assigneeUserName} 完成该任务吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'common-button-primary'
+
+      }).then(() => {
+        changeAssigneeNew({
+          taskId: this.$store.getters.getHandleInfo.taskIds, // 任务id
+          assignee, // 被委托人
+          userId: this.$store.getters.userInfo.userId, // 委托人
+          pId: this.$store.getters.getHandleInfo.prcId // 流程实例
+        }).then(res => {
+          if (res.success) {
+            this.$message.success('委托成功')
+            setTimeout(() => {
+              this.$router.push({
+                name: 'ProcessCenter'
+              })
+            }, 100)
+            this.visibleTree = false
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
+      }).catch(() => {})
+    },
+
+    /**
+     * @description: 在线编辑
+     * @date: 2021-01-08 10:32:16
+     * @auth: chenxiaoxi
+     */
+    handleOnLineEdit () {
+      if (!this.standNo || this.standNo === '') {
+        this.$message.warning(this.noStandNoTip)
+      } else {
+        this.visibleOnlyOffice = true
+        this.$nextTick(() => {
+          this.$refs.onlyOffice.officeInit(this.standNo, this.standId)
+        })
+      }
+    },
+
+    beforeBack () {
+      this.handleBack()
+    }
+  },
+  computed: {
+    // 提交按钮文字
+    submitBTNTextShow () {
+      return this.submitBTNText ? this.submitBTNText : this.approval ? '同意' : '提交'
+    },
+    // 退回按钮文字
+    backBTNText () {
+      return this.approval ? '驳回' : '退回'
+    },
+    userId () {
+      return this.userInfo.userId
+    },
+    ...mapGetters(['userInfo'])
+  },
+  watch: {},
+  mounted () {
+    console.log(this.showCancel)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-footer {
+  line-height: 50px;
+  text-align: right;
+  background: #fff;
+  z-index: 999;
+  margin-top: 20px;
+  padding: 0;
+  .footer-line {
+    height: 1px;
+    box-shadow: 0 -1px 2px 0px #e8e8e8;
+  }
+}
+</style>

src/main.js

@@ -12,6 +12,7 @@ import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 // ElementUI
 import ElementUI from 'element-ui'
+
 import './assets/css/element-variables.scss'
 // ECharts
 import 'echarts'

src/router/modules/permission.js

@@ -15,7 +15,7 @@ const routes = [
       {
         path: 'step2',
         name: 'urlIndex',
-        component: () => import('../../views/permissionApplication/launch'),
+        component: () => import('../../views/permissionApplication/examine'),
         meta: {
           crumb: ['权限申请']
         }
@@ -23,7 +23,7 @@ const routes = [
       {
         path: 'step3',
         name: 'urlIndex',
-        component: () => import('../../views/permissionApplication/launch'),
+        component: () => import('../../views/permissionApplication/examine'),
         meta: {
           crumb: ['权限申请']
         }

src/utils/Enum/enum.js

@@ -0,0 +1,8 @@
+// 定义枚举
+import Esenum from './index.js'
+// 权限申请
+export const PERMISSION = new Esenum([
+  { label: '预览', value: 0 },
+  { label: '下载', value: 1 },
+  { label: '预览+下载', value: 2 }
+])

src/utils/Enum/index.js

@@ -0,0 +1,103 @@
+export default class EsEunm {
+  constructor (obj) {
+    if (!obj) {
+      return
+    }
+    Object.keys(obj).forEach(key => {
+      const item = obj[key]
+      this.addAll(key, item)
+    })
+    return this
+  }
+
+  /**
+   * 添加枚举
+   * @param key
+   * @param item
+   */
+  addAll (key, item) {
+    this[key] = item
+  }
+
+  /**
+   * 获取到所有的枚举值列表
+   * @return {Array} list集合
+   */
+  getItemList () {
+    const optionList = []
+    for (const key in this) {
+      const item = this[key]
+      const option = {}
+      Object.assign(option, item)
+      option.key = key
+      optionList.push(option)
+    }
+    optionList.sort((a, b) => {
+      const value1 = a.index
+      const value2 = b.index
+      return value1 - value2
+    })
+    return optionList
+  }
+
+  /**
+   * 过滤掉不需要的值
+   * @params {Array,String} val 需要过滤掉的枚举对象的name值
+   * @return {Array} list集合
+   */
+  getFilterItemList (val = []) {
+    let filterList = []
+    let valueArr = [] // 接受参数的整理
+    if (Array.isArray(val)) {
+      valueArr = val
+    } else {
+      valueArr.push(val)
+    }
+    const optionList = this.getItemList() // 得到的是list
+    filterList = optionList.filter(item => {
+      if (valueArr.includes(item.name)) {
+        return false
+      }
+      return true
+    })
+    return filterList
+  }
+
+  /**
+   * 根据name获取到index
+   * @params {String} name 枚举的name值
+   * @return {Number} name对应的index值
+   */
+  nameOfIndex (uname) {
+    if (!uname) {
+      return null
+    }
+    let index = ''
+    const optionList = this.getItemList()
+    optionList.forEach(item => {
+      if (uname.toString() === item.name.toString()) {
+        index = +item.index
+      }
+    })
+    return index
+  }
+
+  /**
+   * 根据index获取到name
+   * @params {Number} index 枚举的index值
+   * @return {String} index对应的name值
+   */
+  indexOfName (index) {
+    if (index == undefined) {
+      return null
+    }
+    let uname = ''
+    const optionList = this.getItemList()
+    optionList.forEach(item => {
+      if (item.index !== undefined && item.index !== null && item.index == index) {
+        uname = item.name
+      }
+    })
+    return uname
+  }
+}

src/views/Report/ReportList.vue

@@ -87,9 +87,14 @@
                 </el-col>
             </el-row>
         </div>
+        <el-row class="tag-btn">
+          <el-button type="primary" size="big" @click="permissionApp">权限申请</el-button>
+        </el-row>
         <div class="table">
-            <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
-                <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+            <vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'"
+                       @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
+              <vxe-column type="checkbox" width="60"></vxe-column>
+              <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
                     <template #default="{ row, rowIndex }">
                         {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
                     </template>
@@ -208,10 +213,29 @@ export default {
         }
       },
       dialogPreview: false, // 预览
-      content: ''
+      content: '',
+      checkIds: []
     }
   },
   methods: {
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    permissionApp () {
+      this.$router.push({
+        path: '/permission/step1',
+        query: { id: 'AEHJB8YNJ3', ids: this.checkIds.toString() }
+      })
+    },
     init () {
       this.labelList()
       this.reportDateList()
@@ -354,7 +378,9 @@ export default {
             color: #262626;
         }
     }
-
+    .tag-btn{
+      padding: 10px 13px;
+    }
     .tag-search {
         padding-top: 9px;
 

src/views/Report/ReportManager.vue

@@ -50,8 +50,7 @@
             </el-row>
         </div>
         <div class="table">
-          {{tagsForm}}
-            <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
+            <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
                 <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
                     <template #default="{ row, rowIndex }">
                         {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
@@ -488,6 +487,18 @@ export default {
     }
   },
   methods: {
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
     /*  权限全选  */
     selectAll () {
       this.reportF.reportUserIdList = []

src/views/permissionApplication/components/Assign.vue

@@ -1,211 +0,0 @@
-<template>
-    <div class="box">
-        <el-divider content-position="left">指派信息</el-divider>
-        <el-form
-                ref="processForms"
-                :model="processForm"
-                :rules="processFormRules" label-width="230px"
-                class="label-input-form prc-content-border">
-            <el-row :gutter="24">
-                <el-col :span="24">
-                    <el-form-item label="选择牵头人：" prop="personLiable" class="add-form-item"
-                                  :class="{'form-item-disabled': formdisableflag}">
-                        <el-input :maxlength='100'
-                                  readonly
-                                  @click.native="handleDrafterName('xzqtr')"
-                                  v-model="processForm.personLiableName"
-                                  :disabled="formdisableflag"
-                                  placeholder="请选择牵头人"
-                                  clearable></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row :gutter="24">
-                <el-col :span="24">
-                    <el-form-item label="选择会签人员：" prop="countersign" class="add-form-item"
-                                  :class="{'form-item-disabled': formdisableflag}">
-                        <el-input :maxlength='100'
-                                  readonly
-                                  @click.native="handleDrafterName('hqry')"
-                                  v-model="processForm.countersignName"
-                                  :disabled="formdisableflag"
-                                  placeholder="请选择会签人员"
-                                  clearable></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <el-row :gutter="24" v-if="processNode.length > 0" v-for="item in processNode" :key="item.id"
-            >
-                <el-col :span="24">
-                    <el-form-item :label="item.remark + '：'" prop="" class="add-form-item"
-                                  required :class="{'form-item-disabled': formdisableflag, 'add-form-item': true}">
-                        <el-input :maxlength='100'
-                                  readonly
-                                  v-model="item.userName"
-                                  :disabled="true"
-                                  :placeholder="'请选择' + item.remark"
-                        ></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <el-row :gutter="24">
-                <el-col :span="24">
-                    <el-form-item label="说明：" prop="" class="add-form-item"
-                                  :class="{'form-item-disabled': formdisableflag}">
-                        <el-input :maxlength='1000'
-                                  type="textarea"
-
-                                  v-model="processForm.remarks"
-                                  :disabled="formdisableflag"
-                                  :autosize="{ minRows: 2, maxRows: 4}"
-                                  placeholder="请输入说明"
-                                  clearable></el-input>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-        <org-table :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
-            value: orgTableVal,
-            valueName: orgTableValName
-            }" :workNumFlag="true" :maxSelected="100" @confirm="isTreeOk">
-        </org-table>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "Assign",
-        props: {
-            processNode:{
-                required:true
-            },
-            personLiable:{
-                type:String
-            },
-            personLiableName:{
-                type:String
-            },
-            countersign:{},
-            countersignName:{},
-             remarks:{}
-
-        }
-        ,
-
-        data(){
-            return {
-                formdisableflag:false,
-                visibleOrgTable:false,
-                processForm: {
-                    personLiable: this.personLiable ||'',
-                    personLiableName:this.personLiableName||'',
-                    countersign:this.countersign||'',
-                    countersignName:this.countersignName||''
-                },
-                processFormRules: {
-                    procedureName: [
-                        {required: true, type: 'string', message: '流程名称不能为空', trigger: 'change'},
-                    ],
-                    personLiable:[
-                        {required:true,message: '牵头人不能为空', trigger: 'change'}
-                    ],
-                    countersign:[
-                        {required:true,message: '会签人员不能为空', trigger: 'change'}
-
-                    ]
-
-                },
-                orgTableVal: '',
-                orgTableValName: '',
-            }
-        },
-        methods:{
-            handleDrafterName(val) {
-                // if (this.disabled) return false;
-                this.treeType = val;
-                this.orgTableVal = '';
-                this.orgTableValName = '';
-                this.sarTask = ''
-                this.len = 1
-                if(val==='cyqcdw'){
-                    this.len=100
-                }
-                this.visibleOrgTable = true
-            },
-            isTreeOk(checkedList) {
-                // console.log(checkedList)
-                const parts = []
-                const partsName = []
-                const departmentName = []
-                let department=[]
-                let partsWorknum=[]
-                // const departments = []
-                // if (checkedList.length === 0) {
-                // this.$message({
-                // 	message: '请选择要分享的人！',
-                // 	type: 'warning'
-                // })
-                // }
-
-                checkedList.map((item, index) => {
-                    parts.push(item.userId);
-                    partsName.push(item.uname);
-                    // if(!departments.includes(item.orgId) && item.orgId){
-                    // departments.push(item.orgId)
-                    // }
-                    partsWorknum.push(item.account)
-                    if(!departmentName.includes(item.orgName) && item.orgName){
-                    departmentName.push(item.orgName)
-                    department.push(item.orgId)
-
-
-                    }
-                })
-                this.qcrList = checkedList
-                if (this.treeType == 'zrr') {
-                    this.projectList.responsiblePerson =parts.toString()
-                    this.projectList.responsiblePersonName= partsName.toString()
-                    // // this.standardsFrom.drafter = parts.toString()
-                    // this.budget.applicantOrgName = this.budget.applicantOrgName ? departmentName.toString() : departmentName.toString()
-                    this.projectList.responsiblePersonWorkNum = partsWorknum.toString()
-                    // // this.orgTableVal = this.standardsFrom.drafter
-                } else if (this.treeType == 'zrld') {
-                    this.projectList.responsibleLeadership =parts.toString()
-                    this.projectList.responsibleLeadershipName= partsName.toString()
-                    this.projectList.responsibleLeadershipWorkNum = partsWorknum.toString()
-                } else if (this.treeType == 'bzzrr') {
-                    this.projectList.standardizationResponsiblePerson =parts.toString()
-                    this.projectList.standardizationResponsiblePersonName= partsName.toString()
-                    this.projectList.standardizationResponsiblePersonWorkNum = partsWorknum.toString()
-                } else if (this.treeType == 'zyqcdw') {
-                    this.projectList.mainDraftingUnit =department.toString()
-                    this.projectList.mainDraftingUnitName= departmentName.toString()
-                }
-                else if (this.treeType == 'cyqcdw') {
-                    this.projectList.unitsInvolvedInDrafting= department.toString()
-                    this.projectList.unitsInvolvedInDraftingName= departmentName.toString()
-                }else if (this.treeType == 'qtr') {
-                    this.projectList.leader =parts.toString()
-                    this.projectList.leaderName= partsName.toString()
-                    this.projectList.leaderWorkNum = partsWorknum.toString()
-                }
-                else if (this.treeType == 'xzqtr') {
-                    this.processForm.personLiable =parts.toString()
-                    this.processForm.personLiableName= partsName.toString()
-                    this.processForm.personLiableWorkNum = partsWorknum.toString()
-                }
-                else if (this.treeType == 'hqry') {
-                    this.processForm.countersign =parts.toString()
-                    this.processForm.countersignName= partsName.toString()
-
-                }
-
-            },
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

src/views/permissionApplication/components/AuditOperation.vue

@@ -5,12 +5,25 @@
                 :model="examineForm"
                 :rules="examineFormRules"
                 class="label-input-form prc-content-border">
+          <el-row :gutter="24">
+            <el-col :span="9">
+              <el-form-item label="选择赋权时间" prop="date"
+                            label-width="132px" class="add-form-item"
+                            :class="{'form-item-disabled': formdisableflag}">
+                <el-date-picker
+                  v-model="examineForm.date"
+                  type="date"
+                  placeholder="选择赋权时间">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
             <el-row :gutter="24">
                 <el-col :span="24">
                     <el-form-item label="审批结果" prop="flag"
                                   label-width="132px" class="add-form-item"
                                   :class="{'form-item-disabled': formdisableflag}">
-                        <el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" style="margin-top: 8px">
+                        <el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" >
                             <el-radio :label="'1'">同意</el-radio>
                             <el-radio :label="'2'">不同意</el-radio>
                         </el-radio-group>
@@ -47,394 +60,61 @@
 <!--                </el-col>-->
 <!--            </el-row>-->
         </el-form>
-        <el-drawer
-                title="责任部门"
-                :wrapperClosable="false"
-                :visible.sync="visible.visibleTree">
-            <div class="demo-drawer-content">
-                <dept-tree
-                        v-if="visible.visibleTree"
-                        deptSelect
-                        allDept
-                        check-enable
-                        treeDivId="deptTreeOrg"
-                        only-checked
-                        :chkboxType="{ 'Y': '', 'N': '' }"
-                        :editable="false"
-                        :checkIdList="checkIdList"
-                        orgType="DEPART"
-                        ref="deptTreeOrg"
-                        @treeOnCheck="handleEOCheck">
-                </dept-tree>
-            </div>
-            <div class="demo-drawer-footer">
-                <el-button size="small"
-                        class="common-button-primary"
-                        type="primary"
-                        @click="handleTaskBreakDrawerConfirm">确定
-                </el-button>
-                <el-button
-                        class="common-button-default"
-                        size="small"
-                        @click="handleTaskBreakDrawerCancel">取消
-                </el-button>
-            </div>
-        </el-drawer>
-        <el-drawer
-                title="指派人员"
-                :wrapperClosable="false"
-                :visible.sync="visible.visibleLLRTree"
-                @closed="onLLRTreeClosed">
-            <div class="demo-drawer-content">
-                <laws-tree
-                        ref="manageTree"
-                        :zNodes="manageZNodes"
-                        treeDivId="manageTree"
-                        :editable="false"
-                        expandAll
-                        onlyChecked
-                        initExpand
-                        check-enable
-                        personCheck
-                        :chkboxType="{ 'Y': '', 'N': '' }"
-                        :check-id-list="manageId"
-                        @treeOnCheck="dblClick"
-                ></laws-tree>
-            </div>
-            <div class="demo-drawer-footer">
-                <el-button size="small"
-                        class="common-button-primary"
-                        type="primary"
-                        @click="handleLLRTreeConfirm">确定
-                </el-button>
-                <el-button size="small"
-                        class="common-button-default"
-                        @click="handleLLRTreeCancel">取消
-                </el-button>
-            </div>
-        </el-drawer>
-        <upload ref="upload" :disabled="formdisableflag" :uploadPath="uploadPath" :title="'上传文件'" @uploadSuccess="uploadSuccess"/>
+
     </div>
 </template>
 
 <script>
-    import upload from '@/components/upload/upload'
-    import {
-        getRoleAndUserByOrgId,
-    } from 'api/process'
-    import {mapGetters} from "vuex";
 
-    export default {
-        name: "AuditOperation",
-        props: ['query'],
-        components: {
-            upload
-        },
-        computed: {
-            ...mapGetters(['userInfo']),
-        },
-        data() {
-            return {
-                examineForm: {
-                    planReasonFile: '',
-                    oldName:'',
-                    flag: '1',
-                },
-                examineFormRules: {
-                    oldName: [
-                        {required: true, message: '添加指派不能为空', trigger: 'change'}
-                    ],
-                    flag: [
-                        {required: true, message: '审核结果不能为空', trigger: 'change'}
-                    ],
-                    approvalOpinion: [
-                        {type: 'string', max: 1000, message: '审批意见不能超过1000个字符', trigger: 'blur'}
-                    ],
-                },
-                formdisableflag: false,
-                uploadPath: 'api/att/attFile/upload',//上传文件的接口
-                uploadName: '',  //当前表单对应的文件名称
-                isTaskReception: false, //是否显示指派人员以及确认任务
-                isDesignated: false, //是否显示指派人员
-                isInitiation: false, //是的显示指派部门
-                visible: {
-                    visibleTree: false,
-                    visibleLLRTree: false,
-                },
-                checkIdList: [],
-                LLRTreeChecked: [],
-                FGLLRRoleId: [],
-                manageZNodes: [],
-                manageId: [],
-                userList: [],
-                isApproval: false,
-            }
-        },
-        created() {
-            if (this.query) {
-                if (this.query.type == '1' ||
-                    !this.query.taskDefinitionKey ||
-                    this.query.taskDefinitionKey  == 'null' ||
-                    this.query.taskDefinitionKey == 'fqrxg' ||
-                    this.query.taskDefinitionKey == 'bzfggcsfq' ||
-                    this.query.taskDefinitionKey == 'bzfggcsfq-1' ||
-                    this.query.taskDefinitionKey == 'bzfggcsfq-2' ||
-                    this.query.taskDefinitionKey == 'bzfggcsfq-3') {
-                    this.isInitiation = true
-                } else {
-                    this.isInitiation = false
-                }
-                if (this.query.taskDefinitionKey == 'bzhskzshlc' ||
-                    this.query.taskDefinitionKey == 'bzhskzsh-1' ||
-                    this.query.taskDefinitionKey == 'bzhskzsh-2' ||
-                    this.query.taskDefinitionKey == 'bzhskzsh-3' ||
-                    this.query.taskDefinitionKey == 'bzhskzsh' ||
-                    this.query.taskDefinitionKey == 'sjbskzsh' ||
-                    this.query.taskDefinitionKey == 'cpfxzxkzsh' ||
-                    this.query.taskDefinitionKey == 'bzhsszpz' ||
-                    this.query.taskDefinitionKey == 'sjbsszpz' ||
-                    this.query.taskDefinitionKey == 'cpfxzxkzpz') {
-                    this.isApproval = true
-                } else {
-                    this.isApproval = false
-                }
-                if (this.query.taskDefinitionKey == 'bzhsszqr' ||
-                    this.query.taskDefinitionKey == 'sjbsszqr' ||
-                    this.query.taskDefinitionKey == 'cpfxzxszqr') {
-                    this.isTaskReception = true
-                } else {
-                    this.isTaskReception = false
-                }
-            }
-            if (this.query.isViewDetails && this.query.isViewDetails == 1) {
-                this.examineForm = this.query
-                this.formdisableflag = true
-                if (this.isTaskReception && this.query.flag == '1'){
-                    this.isDesignated = true
-                }
-            }
-            this.getRoleAndUserByOrgId()
-        },
-        methods: {
-            getData(data){
-                this.examineForm.oldName = data.oldName
-                this.examineForm.userName = data.userName
-                this.examineForm.orgId = data.orgId
-                this.examineForm.userId = data.userId
-            },
-            /** 上传文件的回调
-             *  获取接口中的数据进行反显
-             * */
-            clickButtonToUpload(current) {
-                this.$refs.upload.importModalshowflagtemp = true
-                this.uploadName = current
-                if (this.examineForm[current]) {
-                    this.$http.get('att/attFile/getMultiFileInfos', {
-                        fileIds: this.examineForm[current]
-                    }, {
-                        _this: this
-                    }, res => {
-                        this.$refs.upload.ids = []
-                        res.data.map(item => {
-                            item.name = item.oldFileName
-                            this.$refs.upload.ids.push(item.id)
-                        })
-                        this.$refs.upload.defaultFileList = res.data || []
-                    }, e => {
-                    })
-                } else {
-                    this.$refs.upload.defaultFileList = []
-                }
-            },
+export default {
+  name: 'AuditOperation',
+  props: ['query'],
 
-            /** 上传文件的回调 */
-            uploadSuccess(data) {
-                /** 赋值给当前对应的表单文件 */
-                this.examineForm[this.uploadName] = data
-                this.examineForm = {...this.examineForm}
-            },
+  data () {
+    return {
+      examineForm: {
+        planReasonFile: '',
+        oldName: '',
+        flag: '1'
+      },
+      examineFormRules: {
+        oldName: [
+          { required: true, message: '添加指派不能为空', trigger: 'change' }
+        ],
+        flag: [
+          { required: true, message: '审核结果不能为空', trigger: 'change' }
+        ],
+        approvalOpinion: [
+          { type: 'string', max: 1000, message: '审批意见不能超过1000个字符', trigger: 'blur' }
+        ]
+      },
+      formdisableflag: false
 
-            /** 审核时通过或不通过的事件；显示 */
-            flagchange(value) {
-                this.isDesignated = value == 1 ? true : false
-                if (this.isDesignated) {
-                    /** 必填或者部必填 */
-                    this.examineFormRules.userName = [
-                        {required: true, message: '指派人员不能为空', trigger: 'change'}
-                    ]
-                } else {
-                    this.examineFormRules.userName = [
-                        {required: false, message: '指派人员不能为空', trigger: 'change'}
-                    ]
-                }
-            },
-
-            /** 在选择完责任部门点击确定的事件 */
-            handleTaskBreakDrawerConfirm() {
-                if (this.EOCheckList.length) {
-                    this.handleQueryPersonByDept()
-                } else {
-                    this.$message.warning('请选择责任部门')
-                }
-            },
-
-            /** 在选择完责任部门点击取消的事件 */
-            handleTaskBreakDrawerCancel() {
-                this.visible.visibleTree = false
-                this.EOCheckList = []
-                this.EOCheckId = []
-            },
-
-            /** 在选择完责任部门点击确定的事件
-             *  调用此方法获取到当前的选中数据的id；通过id去查找人员进行反显
-             * */
-            async handleQueryPersonByDept() {
-                const parts = []
-                const partsName = []
-                this.EOCheckList.map(item => {
-                    parts.push(item.id)
-                    if (item.oldname) {
-                        partsName.push(item.oldname)
-                    } else {
-                        partsName.push(item.name)
-                    }
-                })
-                this.examineForm.oldName = partsName.join(',')
-                this.examineForm.orgId = parts.join(',')
-                const orgIds = parts.join(',')
-                const res = await getRoleAndUserByOrgId({
-                    orgId: orgIds,
-                    pageNo: 1,
-                    pageSize: 10000
-                })
-                const userId = []
-                const userName = []
-                /** 遍历截取所长和部长 */
-                let nodeUserInfoEOs = []
-                for (let i = 0; i < parts.length; i++) {
-                    res.data.map(person => {
-                        if (person.pOrgId === parts[i]) {
-                            if (person.roleName.slice(person.roleName.length - 2, person.roleName.length) == '所长' ||
-                                person.roleName.slice(person.roleName.length - 2, person.roleName.length) == '部长') {
-                                console.log(person);
-                                if (person.roleName == '标准化所所长') {
-                                    nodeUserInfoEOs.push({
-                                        "nodeId": "zijsglbbzqr", "parentFlow": "zcfgrklc", "userId": person.userId,
-                                    })
-                                } else if (person.roleName == '产品分析中心所长') {
-                                    nodeUserInfoEOs.push({
-                                        "nodeId": "zicpfxzxszqr", "parentFlow": "zcfgrklc", "userId": person.userId,
-                                    })
-                                } else if (person.roleName == '设计部所所长') {
-                                    nodeUserInfoEOs.push({
-                                        "nodeId": "zisjbsszqr", "parentFlow": "zcfgrklc", "userId": person.userId,
-                                    })
-                                }
-                                userId.push(person.userId)
-                                userName.push(person.userName)
-                            }
-                        }
-                    })
-                }
-                this.examineForm.userName = userName.join(',')
-                this.examineForm.userId = userId.join(',')
-                this.examineForm.nodeUserInfoEOs = nodeUserInfoEOs
-                this.examineForm = {...this.examineForm}
-                this.visible.visibleTree = false
-            },
-
-            /** 点击选择部门的弹框 */
-            handleVisibleDept(id) {
-                /** 如果有数据进行反显 */
-                this.checkIdList = id === undefined ? [] : id.split(',')
-                this.visible.visibleTree = true
-            },
-
-            /** 获取选中部门的数据 进行赋值*/
-            handleEOCheck(checkedList) {
-                this.EOCheckList = checkedList
-            },
-
-            /** 关闭指派人员的弹框*/
-            onLLRTreeClosed() {
-                this.LLRTreeChecked = []
-            },
-
-            /** 关闭指派人员的弹框*/
-            handleLLRTreeCancel() {
-                this.visible.visibleLLRTree = false
-            },
-
-            /** 在提交表单的校验 通过继续执行 */
-            submit() {
-                this.isSubmit = false
-                this.$refs['examineForm'].validate((valid) => {
-                    if (valid) {
-                        this.isSubmit = true
-                    } else {
-                        this.$message.warning('请检查表单是否填写正确')
-                    }
-                })
-            },
-
-            /** 打开选择人员的弹框 */
-            handleVisiblePersonnel(id) {
-                /** 有数据时赋值 */
-                this.manageId = id === undefined ? [] : id.split(',')
-                this.visible.visibleLLRTree = true
-            },
-
-            /** 获取当前选中的人员的数据 */
-            dblClick(checkedList) {
-                this.userList = checkedList
-            },
-
-            /** 点击选择人员弹框的确认按钮 进行遍历选中数据反显表单*/
-            handleLLRTreeConfirm() {
-                if (this.userList.length > 0) {
-                    let parts = []
-                    let partsName = []
-                    this.userList.map(item => {
-                        parts.push(item.id)
-                        if (item.oldname) {
-                            partsName.push(item.oldname)
-                        } else {
-                            partsName.push(item.name)
-                        }
-                    })
-                    this.examineForm.userName = partsName.join(',')
-                    this.examineForm.userId = parts.join(',')
-                    this.examineForm = {...this.examineForm}
-                    this.visible.visibleLLRTree = false
-                } else {
-                    this.$message.warning('请选择指派人员')
-                }
-            },
-            /** 通过当前登录人的orgId去获取这个部门下面的人员*/
-            getRoleAndUserByOrgId() {
-                getRoleAndUserByOrgId({
-                    orgId: this.userInfo.orgId,
-                }).then(res => {
-                    const manageIdList = []
-                    const manageNameList = []
-                    const zNodes = JSON.parse(JSON.stringify(res.data))
-                    res.data.map(item => {
-                        manageIdList.push(item.userId)
-                        manageNameList.push(item.userName)
-                    })
-                    /** 重组数据*/
-                    zNodes.map(item => {
-                        item.name = item.userName
-                        item.id = item.userId
-                        item.icon = 'static/images/user.png'
-                        item.iconSkin = 'org-user'
-                        item.pId = item.orgId
-                    })
-                    this.manageZNodes = zNodes
-                })
-            },
-        },
     }
+  },
+  created () {
+    // 判断穿过来的query里的参数 是不是查看
+    if (this.query.isViewDetails && this.query.isViewDetails === 1) {
+      this.examineForm = this.query
+      this.formdisableflag = true
+    }
+  },
+  methods: {
+
+    /** 在提交表单的校验 通过继续执行 */
+    submit () {
+      this.isSubmit = false
+      this.$refs.examineForm.validate((valid) => {
+        if (valid) {
+          this.isSubmit = true
+        } else {
+          this.$message.warning('请检查表单是否填写正确')
+        }
+      })
+    }
+
+  }
+}
 </script>
 
 <style scoped>

src/views/permissionApplication/examine.vue

@@ -0,0 +1,139 @@
+<template>
+<!--  此页面主要展示审核和已完成-->
+  <div class="process">
+    <div class="process_box">
+      <process-header :title="'发起流程'"></process-header>
+      <div class="procedure">
+        <div class="content">
+          <span class="base_title">基础信息</span>
+          <el-row>
+            <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" :rules="applicationFormRule"
+                     :disabled="formControl">
+              <el-row>
+                <el-col :span="9">
+                  <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="选择申请权限:" prop="send">
+                    <el-select v-model="applicationForm.send" placeholder="">
+                      <el-option
+                        v-for="item in PERMISSION"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </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>
+          <audit-operation></audit-operation>
+        </div>
+      </div>
+      <process-footer
+        showCancel
+        :show-transfer="isShowTran"
+        :show-submit="isShowSubmit"
+        :submitLoading="isSubmit"
+        :TransferLoading="tranLoading"
+        @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 auditOperation from './components/AuditOperation'
+import reportTable from './components/reportTable'
+import { PERMISSION } from '@/utils/Enum/enum'
+
+export default {
+  name: 'launch',
+  components: {
+    processHeader,
+    reportTable,
+    processFooter,
+    processApprovalHistory,
+    auditOperation
+  },
+  data () {
+    return {
+      isSubmit: false,
+      tranLoading: false,
+      isShowTran: 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 () {
+    if (this.$route.query.ids) {
+      this.reportList(this.$route.query.ids)
+    }
+    console.log(this.PERMISSION, 'ddd')
+  },
+  methods: {
+    // 获取表格列表 吧查询到的值传给子组件
+    reportList (ids) {
+      this.$api.report.reportList({ id: ids }).then(({ data }) => {
+        this.tableData = data.records
+      })
+    },
+    handleReset () {
+      this.applicationForm = {}
+      this.assignForm = {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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>