项目报销选择项目时调整为多选模式

src/api/cw/reimbursementApproval/ReimbursementApprovalService.js

@@ -72,4 +72,11 @@ export default class ReimbursementApprovalService {
       responseType: 'blob'
     })
   }
+  queryByProIds (ids) {
+    return request({
+      url: '/reimbursementApproval/info/queryByProIds',
+      method: 'get',
+      params: {ids: ids}
+    })
+  }
 }

src/api/sys/ReimbursementService.js

@@ -58,4 +58,11 @@ export default class ReimbursementService {
       responseType: 'blob'
     })
   }
+  queryByProIds (ids) {
+    return request({
+      url: '/reimbursement/info/queryByProIds',
+      method: 'get',
+      params: {ids: ids}
+    })
+  }
 }

src/views/modules/cw/reimbursementApproval/info/CwProgramPageForm.vue

@@ -4,86 +4,106 @@
       :title="title"
       :close-on-click-modal="false"
       v-dialogDrag
-      width="1100px"
+      width="1200px"
       height="500px"
       @close="close"
       append-to-body
       @keyup.enter.native=""
       :visible.sync="visible">
-      <div v-if="isShow">
-        <el-radio v-model="checkType" label="1" size="small" style="margin-right: 20px">项目</el-radio>
-        <el-radio v-model="checkType" label="2" size="small" style="margin-right: 20px">其他</el-radio>
-      </div>
-      <div style="height: calc(100% - 80px);" v-if="checkType === '1'">
-        <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-          <!-- 搜索框-->
-          <el-form-item label="项目名称" prop="name">
-            <el-input size="small" v-model="searchForm.projectName" placeholder="请输入项目名称" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="项目编号" prop="no">
-            <el-input size="small" v-model="searchForm.projectNumber" placeholder="请输入项目编号" clearable></el-input>
-          </el-form-item>
-
-          <el-form-item>
-            <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
-            <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
-          </el-form-item>
-        </el-form>
-        <vxe-table
-          border="inner"
-          auto-resize
-          resizable
-          height="400px"
-          :loading="loading"
-          size="small"
-          ref="programTable"
-          show-header-overflow
-          show-overflow
-          highlight-hover-row
-          :menu-config="{}"
-          :print-config="{}"
-          @sort-change=""
-          :sort-config="{remote:true}"
-          :data="dataList"
-          :checkbox-config="{}">
-          <vxe-column type="seq" width="60" title="序号"></vxe-column>
-          <vxe-column type="checkbox" width="40px"></vxe-column>
-          <vxe-column min-width="230" align="center" title="项目名称" field="projectName"></vxe-column>
-          <vxe-column min-width="160" align="center" title="项目编号" field="projectNumber"></vxe-column>
-          <vxe-column min-width="160" align="center" title="合同名称" field="contractName"></vxe-column>
-          <vxe-column min-width="160" align="center" title="创建人" field="createBy.name"></vxe-column>
-          <vxe-column min-width="160" align="center" title="创建时间" field="createDate"></vxe-column>
-<!--          <vxe-column  title="项目名称" field="name"></vxe-column>-->
-<!--          <vxe-column width="200px" title="项目编号" field="no"></vxe-column>-->
-<!--          <vxe-column width="150px" title="登记人" field="createBy"></vxe-column>-->
-<!--          <vxe-column width="100px" title="委托方" field="clientName"></vxe-column>-->
+      <el-container>
+        <el-main style="padding-top: 0;padding-bottom: 0">
+          <div v-if="isShow">
+            <el-radio v-model="checkType" label="1" size="small" style="margin-right: 20px">项目</el-radio>
+            <el-radio v-model="checkType" label="2" size="small" style="margin-right: 20px">其他</el-radio>
+          </div>
+          <div  v-if="checkType === '1'">
+            <el-form style="margin-bottom: 0" size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+              <!-- 搜索框-->
+              <el-form-item label="项目名称" prop="name">
+                <el-input size="small" v-model="searchForm.projectName" placeholder="请输入项目名称" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="项目编号" prop="no">
+                <el-input size="small" v-model="searchForm.projectNumber" placeholder="请输入项目编号" clearable></el-input>
+              </el-form-item>
 
-        </vxe-table>
-        <vxe-pager
-          background
-          size="small"
-          :current-page="tablePage.currentPage"
-          :page-size="tablePage.pageSize"
-          :total="tablePage.total"
-          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
-          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-          @page-change="currentChangeHandle">
-        </vxe-pager>
-      </div>
-      <div style="height: 500px;" v-if="checkType === '2'">
-        <el-form  label-width="80px" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-          <el-row  :gutter="15">
-            <el-col :span="21">
-              <el-form-item label="详情" prop="detail">
-                <el-input style="width: 100%" type="textarea" maxlength="500" v-model="detail" placeholder="请输入详情" show-word-limit></el-input>
+              <el-form-item>
+                <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
+                <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
               </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
+            </el-form>
+            <div v-if="num" style="margin-bottom: 10px"><span style="color: #F56C6C">注：最多选择 10 条数据</span></div>
+            <vxe-table
+              border="inner"
+              auto-resize
+              resizable
+              height="400px"
+              :loading="loading"
+              size="small"
+              ref="programTable"
+              show-header-overflow
+              show-overflow
+              highlight-hover-row
+              :menu-config="{}"
+              :print-config="{}"
+              @checkbox-all="selectAllEvent"
+              @checkbox-change="selectionChangeHandle"
+              @sort-change=""
+              :row-id="rowId"
+              :checkbox-config="{reserve: true}"
+              :sort-config="{remote:true}"
+              :data="dataList">
+              <vxe-column type="seq" width="60" title="序号"></vxe-column>
+              <vxe-column type="checkbox" width="40px"></vxe-column>
+              <vxe-column min-width="230" align="center" title="项目名称" field="projectName"></vxe-column>
+              <vxe-column min-width="160" align="center" title="项目编号" field="projectNumber"></vxe-column>
+              <vxe-column min-width="160" align="center" title="合同名称" field="contractName"></vxe-column>
+              <vxe-column min-width="160" align="center" title="创建人" field="createBy.name"></vxe-column>
+              <vxe-column min-width="160" align="center" title="创建时间" field="createDate"></vxe-column>
+              <!--          <vxe-column  title="项目名称" field="name"></vxe-column>-->
+              <!--          <vxe-column width="200px" title="项目编号" field="no"></vxe-column>-->
+              <!--          <vxe-column width="150px" title="登记人" field="createBy"></vxe-column>-->
+              <!--          <vxe-column width="100px" title="委托方" field="clientName"></vxe-column>-->
+
+            </vxe-table>
+            <vxe-pager
+              background
+              size="small"
+              :current-page="tablePage.currentPage"
+              :page-size="tablePage.pageSize"
+              :total="tablePage.total"
+              :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+              @page-change="currentChangeHandle">
+            </vxe-pager>
+          </div>
+          <div style="height: 500px;" v-if="checkType === '2'">
+            <el-form  label-width="80px" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+              <el-row  :gutter="15">
+                <el-col :span="21">
+                  <el-form-item label="详情" prop="detail">
+                    <el-input style="width: 100%" type="textarea" maxlength="500" v-model="detail" placeholder="请输入详情" show-word-limit></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </el-main>
+        <el-aside width="300px" v-if="checkType === '1' && commonJS.isNotEmpty(dataListAllSelections.length) && dataListAllSelections.length > 0">
+          <el-tag
+            style="margin: 10px 0 0 0"
+            :key="tag.id"
+            v-for="(tag, index) in dataListAllSelections"
+            closable
+            :disable-transitions="false"
+            @close="del(tag, index)">
+            {{tag.projectName.length>20?tag.projectName.substring(0,20)+'...':tag.projectName}}
+          </el-tag>
+        </el-aside>
+      </el-container>
+
       <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
-      <el-button size="small" type="primary" v-if="method != 'view'" @click="getProgram()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
+      <el-button size="small" @click="close()">关闭</el-button>
+      <el-button size="small" type="primary" v-if="method != 'view'" @click="getProgram()" v-noMoreClick>（{{dataListAllSelections.length}}） 确定</el-button>
     </span>
     </el-dialog>
   </div>
@@ -115,6 +135,8 @@
         checkType: '',
         detail: '',
         isShow: true,
+        dataListAllSelections: [],
+        rowId: 'id',
         num: true // num为true是多选，false是单选
       }
     },
@@ -152,23 +174,36 @@
           this.num = false
         }
         this.visible = true
+        this.dataListAllSelections = []
+        this.tablePage.currentPage = 1
+        this.tablePage.pageSize = 10
+        this.searchForm = {
+          projectName: '',
+          projectNumber: '',
+          createBy: ''
+        }
         this.list()
       },
       // 表单提交
       getProgram () {
         let rows
         if (this.checkType === '1') {
-          if (this.commonJS.isEmpty(this.$refs.programTable.getCheckboxRecords())) {
+          if (this.commonJS.isEmpty(this.dataListAllSelections)) {
             this.$message.error('请至少选择一条数据')
             return
           }
           if (this.num === false) {
-            if (this.$refs.programTable.getCheckboxRecords().length > 1) {
+            if (this.dataListAllSelections.length > 1) {
               this.$message.error('最多选择一条数据')
               return
             }
+          } else {
+            if (this.dataListAllSelections.length > 10) {
+              this.$message.error('最多选择10条数据')
+              return
+            }
           }
-          rows = this.$refs.programTable.getCheckboxRecords()
+          rows = this.dataListAllSelections
         } else {
           if (this.commonJS.isEmpty(this.detail)) {
             this.$message.error('请填写开票详情')
@@ -187,10 +222,34 @@
           'size': this.tablePage.pageSize,
           'orders': this.tablePage.orders,
           ...this.searchForm
-        }).then(({data}) => {
+        }).then(async ({data}) => {
           this.dataList = data.records
           this.tablePage.total = data.total
           this.loading = false
+          // 在切换页后，将页面不需要勾选的数据取消勾选
+          let isCheck = []
+          for (let i = 0; i < this.tablePage.pageSize; i++) {
+            for (let j = 0; j < this.dataListAllSelections.length; j++) {
+              if (this.commonJS.isNotEmpty(this.dataList[i]) && this.commonJS.isNotEmpty(this.dataListAllSelections[j])) {
+                if (this.dataList[i].id === this.dataListAllSelections[j].id) { // 符合条件的数据勾选
+                  isCheck.push(this.dataList[i].id)
+                }
+              }
+            }
+          }
+          if (this.commonJS.isNotEmpty(isCheck)) {
+            for (let i = 0; i < this.tablePage.pageSize; i++) {
+              if (isCheck.includes(this.dataList[i].id)) {
+                await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
+              } else {
+                await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
+              }
+            }
+          } else {
+            for (let i = 0; i < this.tablePage.pageSize; i++) {
+              await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
+            }
+          }
         })
       },
       // 当前页
@@ -200,12 +259,74 @@
         this.list()
       },
       resetSearch () {
+        this.dataListAllSelections = []
+        this.searchForm = {
+          projectName: '',
+          projectNumber: '',
+          createBy: ''
+        }
+        this.$refs.programTable.clearCheckboxReserve() // 清除全部页的勾选
         this.$refs.searchForm.resetFields()
         this.list()
       },
       close () {
+        this.$refs.programTable.clearCheckboxReserve()
+        this.dataListAllSelections = []
         this.detail = ''
         this.visible = false
+      },
+      // 全选/取消全选 时，右侧tag标签同步新增或删除改变
+      async selectAllEvent (event) {
+        this.dataListAllSelections = []
+        let thisPageDate = await this.$refs.programTable.getCheckboxRecords()
+        let otherPageDate = await this.$refs.programTable.getCheckboxReserveRecords()
+        if (this.commonJS.isNotEmpty(otherPageDate)) {
+          for (let i = 0; i < otherPageDate.length; i++) {
+            this.dataListAllSelections.push(otherPageDate[i])
+          }
+        }
+        if (this.commonJS.isNotEmpty(thisPageDate)) {
+          for (let i = 0; i < thisPageDate.length; i++) {
+            this.dataListAllSelections.push(thisPageDate[i])
+          }
+        }
+      },
+      // 当前页“选中/取消选中”数据时，“新增/删除”右侧tag标签
+      selectionChangeHandle (event) {
+        if (event.checked) { // 选中触发
+          let delIndex = -1
+          for (let i = 0; i < this.dataListAllSelections.length; i++) {
+            if (this.dataListAllSelections[i].id === event.row.id) {
+              delIndex = i
+            }
+          }
+          if (this.commonJS.isNotEmpty(delIndex) && delIndex === -1) {
+            this.dataListAllSelections.push(event.row)
+          }
+        } else { // 取消选中触发
+          let delIndex = -1
+          for (let i = 0; i < this.dataListAllSelections.length; i++) {
+            if (this.dataListAllSelections[i].id === event.row.id) {
+              delIndex = i
+            }
+          }
+          if (this.commonJS.isNotEmpty(delIndex) && delIndex !== -1) {
+            this.dataListAllSelections.splice(delIndex, 1)
+          }
+        }
+      },
+      // 删除tag标签时，取消勾选当前页对应的数据
+      async del (tag, index) {
+        this.dataListAllSelections.splice(index, 1)
+        let rows = await this.$refs.programTable.getCheckboxRecords()
+        await this.$refs.programTable.clearCheckboxRow()
+        for (let i = 0; i < this.dataList.length; i++) {
+          for (let j = 0; j < rows.length; j++) {
+            if (this.dataList[i].id !== tag.id && this.dataList[i].id === rows[j].id) {
+              await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
+            }
+          }
+        }
       }
     }
   }

src/views/modules/cw/reimbursementApproval/info/InfoList.vue

@@ -195,6 +195,7 @@
         <ProjectRecordsForm ref="projectRecordsForm" @refreshDataList="refreshList"></ProjectRecordsForm>
         <ContractNameForm ref="contractNameForm"></ContractNameForm>
         <InfoUpdateForm ref="infoUpdateForm" @refreshDataList="refreshList"></InfoUpdateForm>
+        <ProjectListForm ref="projectListForm"></ProjectListForm>
       </div>
     </div>
   </div>
@@ -218,6 +219,7 @@
   import ContractNameForm from '../../workContract/ContractNameForm'
   import UserService from '@/api/sys/UserService'
   import InfoUpdateForm from './InfoUpdateForm'
+  import ProjectListForm from './ProgramForm'
   export default {
     data () {
       return {
@@ -273,7 +275,8 @@
       ProjectRecordsForm,
       UserSelect,
       ContractNameForm,
-      InfoUpdateForm
+      InfoUpdateForm,
+      ProjectListForm
     },
     mounted () {
       this.refreshList()
@@ -402,7 +405,7 @@
       // 查看报销项目
       viewProject (id) {
         // this.$refs.projectForm.init('view', id)
-        this.$refs.projectRecordsForm.init('view', id)
+        this.$refs.projectListForm.init(id)
       },
       // 获取数据列表
       refreshList () {

src/views/modules/cw/reimbursementApproval/info/ProgramForm.vue

@@ -0,0 +1,84 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      width="900px"
+      @close="close"
+      append-to-body
+      @keyup.enter.native=""
+      :visible.sync="visible">
+      <vxe-table
+        border="inner"
+        show-overflow
+        show-footer
+        size="small"
+        ref="baseTable"
+        class="vxe-table-element"
+        :data="dataList"
+      >
+        <vxe-table-column type="seq" width="50" title="序号" align="center"></vxe-table-column>
+        <vxe-table-column min-width="300px" field="projectName" align="left" title="项目名称">
+          <template slot-scope="scope">
+            <el-link type="primary" :underline="false" @click="openProjectForm(scope.row.id)" >{{scope.row.projectName}}</el-link>
+          </template>
+        </vxe-table-column>
+        <vxe-table-column width="250px" field="projectNumber" align="center" title="项目编号"></vxe-table-column>
+      </vxe-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
+      </span>
+    </el-dialog>
+    <ProjectForm ref="projectForm"></ProjectForm>
+  </div>
+</template>
+
+<script>
+  import ProjectForm from '@/views/modules/cw/projectRecords/ProjectRecordsForm'
+  import ReimbursementApprovalService from '@/api/cw/reimbursementApproval/ReimbursementApprovalService'
+  export default {
+    data () {
+      return {
+        title: '',
+        method: '',
+        visible: false,
+        loading: false,
+        dataList: ''
+      }
+    },
+    reimbursementApprovalService: null,
+    created () {
+      this.reimbursementApprovalService = new ReimbursementApprovalService()
+    },
+    components: {
+      ProjectForm
+    },
+    methods: {
+      init (id) {
+        this.method = 'view'
+        this.title = '查看项目信息'
+        this.visible = true
+        this.dataList = []
+        if (this.commonJS.isNotEmpty(id)) {
+          this.list(id)
+        }
+      },
+      async list (ids) {
+        this.loading = true
+        let resp = await this.reimbursementApprovalService.queryByProIds(ids)
+        if (resp) {
+          this.dataList = resp.data
+        }
+        this.loading = false
+      },
+      openProjectForm (id) {
+        this.$refs.projectForm.init('view', id)
+      },
+      close () {
+        this.dataList = []
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/modules/cw/reimbursementApproval/info/ReimbursementForm.vue

@@ -103,7 +103,44 @@
           </vxe-table>
         </el-row>
       </div>
-      <div v-if="inputForm.sourceType === '1'">
+      <div v-if="(status === 'audit' || status === 'taskFormDetail') && inputForm.sourceType === '1'">
+        <el-divider content-position="left"><i class="el-icon-document"></i>
+          项目报销详情
+        </el-divider>
+        <el-row  :gutter="15" >
+          <vxe-table
+            border
+            show-footer
+            show-overflow
+            :footer-method="footerMethod"
+            ref="detailTable"
+            :key="detailKey"
+            class="vxe-table-element"
+            :data="inputForm.detailInfos"
+            style="margin-left: 5em"
+            @cell-click=""
+            @edit-closed=""
+            highlight-current-row
+            :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon:'_'}"
+            :edit-rules="validRules"
+          >
+            <vxe-table-column field="userName" title="报销人" ></vxe-table-column>
+            <vxe-table-column field="deptName" title="报销部门" ></vxe-table-column>
+            <vxe-table-column field="typeName" title="报销类别" ></vxe-table-column>
+            <vxe-table-column field="projectName" title="报销项目" >
+              <template slot-scope="scope">
+                <el-link  type="primary" :underline="false" v-if="commonJS.isNotEmpty(scope.row.projectId)" @click="viewProject(scope.row.projectId)">{{scope.row.projectName}}</el-link>
+                <span v-else>{{scope.row.projectName}}</span>
+              </template>
+            </vxe-table-column>
+            <vxe-table-column field="number" title="费用(元)"  ></vxe-table-column>
+            <vxe-table-column field="receiptNumber" title="收据张数" ></vxe-table-column>
+            <vxe-table-column field="days" title="出差天数" ></vxe-table-column>
+            <vxe-table-column field="content" title="内容" ></vxe-table-column>
+          </vxe-table>
+        </el-row>
+      </div>
+      <div v-else-if="(status !== 'audit' && status !== 'taskFormDetail') && inputForm.sourceType === '1'">
         <el-divider content-position="left"><i class="el-icon-document"></i>
           项目报销详情
           <el-button style="margin-left: 20px" type="primary" :disabled="method==='view' || status === 'audit' || status === 'taskFormDetail'" size="mini" @click="insertEvent('detail')" plain>
@@ -571,6 +608,7 @@
     <ReportNoChooseRadio ref="reportNoChooseRadio" @getWorkClientRadioChoose="getWorkClientChoose2"></ReportNoChooseRadio>
     <PurchaseChooseForm  ref="purchaseChooseForm" @getProject="getPurChoose"></PurchaseChooseForm>
     <MaterialManagementDialog ref="materialManagementDialog" @getUpload="getUpload"></MaterialManagementDialog>
+    <ProjectListForm ref="projectListForm"></ProjectListForm>
   </div>
 </template>
 
@@ -596,6 +634,7 @@
   import PurchaseChooseForm from '../../../materialManagement/wareHouse/PurchaseChooseForm'
   import MaterialManagementService from '@/api/materialManagement/MaterialManagementService'
   import MaterialManagementDialog from '../../../materialManagement/file/MaterialManagementDialog'
+  import ProjectListForm from './ProgramForm'
   export default {
     props: {
       businessId: {
@@ -701,7 +740,8 @@
       UserSelectV2,
       WorkContractChooseCom,
       PurchaseChooseForm,
-      MaterialManagementDialog
+      MaterialManagementDialog,
+      ProjectListForm
     },
     computed: {
       bus: {
@@ -1246,7 +1286,7 @@
             this.$refs.cwProgramPageForm.init('2', false)
           } else {
             // 打开单选组件
-            this.$refs.cwProgramPageForm.init('1', false)
+            this.$refs.cwProgramPageForm.init('1', true)
           }
         })
       },
@@ -1288,9 +1328,11 @@
         this.$refs.workContractChooseCom.init(rowIndex)
       },
       getProgram (rows) {
-        this.inputForm.detailInfos[this.indexRow].projectId = rows[0].id
-        this.inputForm.detailInfos[this.indexRow].projectName = rows[0].projectName
-        this.inputForm.detailInfos[this.indexRow].reportNumber = rows[0].reportNumber
+        if (this.commonJS.isNotEmpty(rows)) {
+          this.inputForm.detailInfos[this.indexRow].projectId = rows.map(item => { return item.id }).join(',')
+          this.inputForm.detailInfos[this.indexRow].projectName = rows.map(item => { return item.projectName }).join(',')
+          // this.inputForm.detailInfos[this.indexRow].reportNumber = rows.map(item => { return item.reportNumber }).join(',')
+        }
         this.indexRow = ''
         this.$forceUpdate()
       },
@@ -1670,6 +1712,10 @@
           this.inputForm.preList[index].fileInfoLost = []
         }
         this.$refs.materialManagementDialog.newUpload('view', this.inputForm.preList[index].fileInfoLost, null, null, null, null, null, false, index)
+      },
+      // 查看报销项目
+      viewProject (id) {
+        this.$refs.projectListForm.init(id)
       }
     }
   }

src/views/modules/finance/invoice/ProgramPageForm.vue

@@ -4,84 +4,100 @@
       :title="title"
       :close-on-click-modal="false"
       v-dialogDrag
-      width="1100px"
+      width="1200px"
       height="500px"
       @close="close"
       @keyup.enter.native=""
       :visible.sync="visible">
-      <div v-if="isShow">
-        <el-radio v-model="checkType" label="1" size="small" style="margin-right: 20px">项目</el-radio>
-        <el-radio v-model="checkType" label="2" size="small" style="margin-right: 20px">其他</el-radio>
-      </div>
-      <div style="height: calc(100% - 80px);" v-if="checkType === '1'">
-        <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-          <!-- 搜索框-->
-          <el-form-item label="项目名称" prop="name">
-            <el-input size="small" v-model="searchForm.name" placeholder="请输入项目名称" clearable></el-input>
-          </el-form-item>
-          <el-form-item label="项目编号" prop="no">
-            <el-input size="small" v-model="searchForm.no" placeholder="请输入项目编号" clearable></el-input>
-          </el-form-item>
+      <el-container>
+        <el-main style="padding-top: 0;padding-bottom: 0">
+          <div v-if="isShow">
+            <el-radio v-model="checkType" label="1" size="small" style="margin-right: 20px">项目</el-radio>
+            <el-radio v-model="checkType" label="2" size="small" style="margin-right: 20px">其他</el-radio>
+          </div>
+          <div v-if="checkType === '1'">
+            <el-form style="margin-bottom: 0" size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+              <!-- 搜索框-->
+              <el-form-item label="项目名称" prop="name">
+                <el-input size="small" v-model="searchForm.name" placeholder="请输入项目名称" clearable></el-input>
+              </el-form-item>
+              <el-form-item label="项目编号" prop="no">
+                <el-input size="small" v-model="searchForm.no" placeholder="请输入项目编号" clearable></el-input>
+              </el-form-item>
 
-          <el-form-item>
-            <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
-            <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
-          </el-form-item>
-        </el-form>
-        <vxe-table
-          border="inner"
-          auto-resize
-          resizable
-          height="400px"
-          :loading="loading"
-          size="small"
-          ref="programTable"
-          show-header-overflow
-          show-overflow
-          highlight-hover-row
-          :menu-config="{}"
-          :print-config="{}"
-          @sort-change=""
-          :sort-config="{remote:true}"
-          :data="dataList"
-          :checkbox-config="{}">
-          <vxe-column type="seq" width="60" title="序号"></vxe-column>
-          <vxe-column type="checkbox" width="40px"></vxe-column>
+              <el-form-item>
+                <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
+                <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <div v-if="num" style="margin-bottom: 10px"><span style="color: #F56C6C">注：最多选择 10 条数据</span></div>
+            <vxe-table
+              border="inner"
+              auto-resize
+              resizable
+              height="400px"
+              :loading="loading"
+              size="small"
+              ref="programTable"
+              show-header-overflow
+              show-overflow
+              highlight-hover-row
+              @checkbox-all="selectAllEvent"
+              @checkbox-change="selectionChangeHandle"
+              :row-id="rowId"
+              :checkbox-config="{reserve: true}"
+              :sort-config="{remote:true}"
+              :data="dataList">
+              <vxe-column type="seq" width="60" title="序号"></vxe-column>
+              <vxe-column type="checkbox" width="40px"></vxe-column>
 
-          <vxe-column  title="项目名称" field="name"></vxe-column>
-          <vxe-column width="200px" title="项目编号" field="no"></vxe-column>
-<!--          <vxe-column width="150px" title="报告号" field="clientName"></vxe-column>-->
-          <vxe-column width="150px" title="登记人" field="createBy"></vxe-column>
-<!--          <vxe-column width="150px" title="责任人" field="createDate"></vxe-column>-->
-          <vxe-column width="100px" title="委托方" field="clientName"></vxe-column>
-          <vxe-column width="100px" title="是否开票" field="isInvoice"></vxe-column>
+              <vxe-column min-width="300px" title="项目名称" field="name" align="center"></vxe-column>
+              <vxe-column min-width="110px" title="项目编号" field="no" align="center"></vxe-column>
+    <!--          <vxe-column width="150px" title="报告号" field="clientName"></vxe-column>-->
+              <vxe-column min-width="100px" title="登记人" field="createBy" align="center"></vxe-column>
+    <!--          <vxe-column width="150px" title="责任人" field="createDate"></vxe-column>-->
+              <vxe-column min-width="200px" title="委托方" field="clientName" align="center"></vxe-column>
+              <vxe-column min-width="100px" title="是否开票" field="isInvoice" align="center"></vxe-column>
 
-        </vxe-table>
-        <vxe-pager
-          background
-          size="small"
-          :current-page="tablePage.currentPage"
-          :page-size="tablePage.pageSize"
-          :total="tablePage.total"
-          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
-          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-          @page-change="currentChangeHandle">
-        </vxe-pager>
-      </div>
-      <div style="height: 500px;" v-if="checkType === '2'">
-        <el-form  label-width="80px" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-          <el-row  :gutter="15">
-            <el-col :span="21">
-              <el-form-item label="详情" prop="detail">
-                <el-input style="width: 100%" type="textarea" maxlength="500" v-model="detail" placeholder="请输入详情" show-word-limit></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
+            </vxe-table>
+            <vxe-pager
+              background
+              size="small"
+              :current-page="tablePage.currentPage"
+              :page-size="tablePage.pageSize"
+              :total="tablePage.total"
+              :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+              @page-change="currentChangeHandle">
+            </vxe-pager>
+          </div>
+          <div style="height: 500px;" v-if="checkType === '2'">
+            <el-form  label-width="80px" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+              <el-row  :gutter="15">
+                <el-col :span="21">
+                  <el-form-item label="详情" prop="detail">
+                    <el-input style="width: 100%" type="textarea" maxlength="500" v-model="detail" placeholder="请输入详情" show-word-limit></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </el-main>
+        <el-aside width="300px" v-if="checkType === '1' && commonJS.isNotEmpty(dataListAllSelections.length) && dataListAllSelections.length > 0">
+          <el-tag
+            style="margin: 10px 0 0 0"
+            :key="tag.id"
+            v-for="(tag, index) in dataListAllSelections"
+            closable
+            :disable-transitions="false"
+            @close="del(tag, index)">
+            {{tag.name.length>20?tag.name.substring(0,20)+'...':tag.name}}
+          </el-tag>
+        </el-aside>
+      </el-container>
       <span slot="footer" class="dialog-footer">
-      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
-      <el-button size="small" type="primary" v-if="method != 'view'" @click="getProgram()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
+      <el-button size="small" @click="close()">关闭</el-button>
+      <el-button size="small" type="primary" v-if="method != 'view'" @click="getProgram()" v-noMoreClick>（{{dataListAllSelections.length}}） 确定</el-button>
     </span>
     </el-dialog>
   </div>
@@ -110,6 +126,8 @@
         },
         checkType: '',
         detail: '',
+        dataListAllSelections: [],
+        rowId: 'id',
         isShow: true,
         num: true // num为true是多选，false是单选
       }
@@ -144,23 +162,36 @@
           this.num = false
         }
         this.visible = true
+        this.dataListAllSelections = []
+        this.tablePage.currentPage = 1
+        this.tablePage.pageSize = 10
+        this.searchForm = {
+          projectName: '',
+          projectNumber: '',
+          createBy: ''
+        }
         this.list()
       },
       // 表单提交
       getProgram () {
         let rows
         if (this.checkType === '1') {
-          if (this.commonJS.isEmpty(this.$refs.programTable.getCheckboxRecords())) {
+          if (this.commonJS.isEmpty(this.dataListAllSelections)) {
             this.$message.error('请至少选择一条数据')
             return
           }
           if (this.num === false) {
-            if (this.$refs.programTable.getCheckboxRecords().length > 1) {
+            if (this.dataListAllSelections.length > 1) {
               this.$message.error('最多选择一条数据')
               return
             }
+          } else {
+            if (this.dataListAllSelections.length > 10) {
+              this.$message.error('最多选择10条数据')
+              return
+            }
           }
-          rows = this.$refs.programTable.getCheckboxRecords()
+          rows = this.dataListAllSelections
         } else {
           if (this.commonJS.isEmpty(this.detail)) {
             this.$message.error('请填写开票详情')
@@ -179,10 +210,34 @@
           'size': this.tablePage.pageSize,
           'orders': this.tablePage.orders,
           ...this.searchForm
-        }).then(({data}) => {
+        }).then(async ({data}) => {
           this.dataList = data.records
           this.tablePage.total = data.total
           this.loading = false
+          // 在切换页后，将页面不需要勾选的数据取消勾选
+          let isCheck = []
+          for (let i = 0; i < this.tablePage.pageSize; i++) {
+            for (let j = 0; j < this.dataListAllSelections.length; j++) {
+              if (this.commonJS.isNotEmpty(this.dataList[i]) && this.commonJS.isNotEmpty(this.dataListAllSelections[j])) {
+                if (this.dataList[i].id === this.dataListAllSelections[j].id) { // 符合条件的数据勾选
+                  isCheck.push(this.dataList[i].id)
+                }
+              }
+            }
+          }
+          if (this.commonJS.isNotEmpty(isCheck)) {
+            for (let i = 0; i < this.tablePage.pageSize; i++) {
+              if (isCheck.includes(this.dataList[i].id)) {
+                await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
+              } else {
+                await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
+              }
+            }
+          } else {
+            for (let i = 0; i < this.tablePage.pageSize; i++) {
+              await this.$refs.programTable.setCheckboxRow([this.dataList[i]], false)
+            }
+          }
         })
       },
       // 当前页
@@ -192,12 +247,74 @@
         this.list()
       },
       resetSearch () {
+        this.dataListAllSelections = []
+        this.searchForm = {
+          name: '',
+          no: '',
+          createBy: ''
+        }
+        this.$refs.programTable.clearCheckboxReserve() // 清除全部页的勾选
         this.$refs.searchForm.resetFields()
         this.list()
       },
       close () {
+        this.$refs.programTable.clearCheckboxReserve()
+        this.dataListAllSelections = []
         this.detail = ''
         this.visible = false
+      },
+      // 全选/取消全选 时，右侧tag标签同步新增或删除改变
+      async selectAllEvent (event) {
+        this.dataListAllSelections = []
+        let thisPageDate = await this.$refs.programTable.getCheckboxRecords()
+        let otherPageDate = await this.$refs.programTable.getCheckboxReserveRecords()
+        if (this.commonJS.isNotEmpty(otherPageDate)) {
+          for (let i = 0; i < otherPageDate.length; i++) {
+            this.dataListAllSelections.push(otherPageDate[i])
+          }
+        }
+        if (this.commonJS.isNotEmpty(thisPageDate)) {
+          for (let i = 0; i < thisPageDate.length; i++) {
+            this.dataListAllSelections.push(thisPageDate[i])
+          }
+        }
+      },
+      // 当前页“选中/取消选中”数据时，“新增/删除”右侧tag标签
+      selectionChangeHandle (event) {
+        if (event.checked) { // 选中触发
+          let delIndex = -1
+          for (let i = 0; i < this.dataListAllSelections.length; i++) {
+            if (this.dataListAllSelections[i].id === event.row.id) {
+              delIndex = i
+            }
+          }
+          if (this.commonJS.isNotEmpty(delIndex) && delIndex === -1) {
+            this.dataListAllSelections.push(event.row)
+          }
+        } else { // 取消选中触发
+          let delIndex = -1
+          for (let i = 0; i < this.dataListAllSelections.length; i++) {
+            if (this.dataListAllSelections[i].id === event.row.id) {
+              delIndex = i
+            }
+          }
+          if (this.commonJS.isNotEmpty(delIndex) && delIndex !== -1) {
+            this.dataListAllSelections.splice(delIndex, 1)
+          }
+        }
+      },
+      // 删除tag标签时，取消勾选当前页对应的数据
+      async del (tag, index) {
+        this.dataListAllSelections.splice(index, 1)
+        let rows = await this.$refs.programTable.getCheckboxRecords()
+        await this.$refs.programTable.clearCheckboxRow()
+        for (let i = 0; i < this.dataList.length; i++) {
+          for (let j = 0; j < rows.length; j++) {
+            if (this.dataList[i].id !== tag.id && this.dataList[i].id === rows[j].id) {
+              await this.$refs.programTable.setCheckboxRow([this.dataList[i]], true)
+            }
+          }
+        }
       }
     }
   }

src/views/modules/reimbursement/info/InfoList.vue

@@ -175,6 +175,7 @@
         <InfoForm ref="infoForm" @refreshDataList="refreshList"></InfoForm>
         <ProjectForm ref="projectForm" @refreshDataList="refreshList"></ProjectForm>
         <ContractNameForm ref="contractNameForm"></ContractNameForm>
+        <ProjectListForm ref="projectListForm"></ProjectListForm>
       </div>
     </div>
   </div>
@@ -193,6 +194,7 @@
   import pick from 'lodash.pick'
   import ProjectForm from '@/views/modules/program/registered/ProjectForm'
   import ContractNameForm from '@/views/modules/sys/workContract/WorkContractForm2'
+  import ProjectListForm from './ProgramForm'
   export default {
     data () {
       return {
@@ -239,7 +241,8 @@
       InfoForm,
       ProjectForm,
       UserSelect,
-      ContractNameForm
+      ContractNameForm,
+      ProjectListForm
     },
     mounted () {
       this.refreshList()
@@ -385,7 +388,7 @@
       },
       // 查看报销项目
       viewProject (id) {
-        this.$refs.projectForm.init('view', id)
+        this.$refs.projectListForm.init(id)
       },
       viewContract (id) {
         this.$refs.contractNameForm.init('view', id)

src/views/modules/reimbursement/info/ProgramForm.vue

@@ -0,0 +1,85 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div>
+    <el-dialog
+      :title="title"
+      :close-on-click-modal="false"
+      v-dialogDrag
+      width="1000px"
+      @close="close"
+      append-to-body
+      @keyup.enter.native=""
+      :visible.sync="visible">
+      <vxe-table
+        border="inner"
+        show-overflow
+        show-footer
+        size="small"
+        ref="baseTable"
+        class="vxe-table-element"
+        :data="dataList"
+      >
+        <vxe-table-column type="seq" width="50" title="序号" align="center"></vxe-table-column>
+        <vxe-table-column min-width="300px" field="name" align="left" title="项目名称">
+          <template slot-scope="scope">
+            <el-link type="primary" :underline="false" @click="openProjectForm(scope.row.id)" >{{scope.row.name}}</el-link>
+          </template>
+        </vxe-table-column>
+        <vxe-table-column width="150px" field="no" align="center" title="项目编号"></vxe-table-column>
+        <vxe-table-column width="250px" field="reportNo" align="center" title="报告号"></vxe-table-column>
+      </vxe-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
+      </span>
+    </el-dialog>
+    <ProjectForm ref="projectForm"></ProjectForm>
+  </div>
+</template>
+
+<script>
+  import ProjectForm from '@/views/modules/program/registered/ProjectForm'
+  import ReimbursementApprovalService from '@/api/sys/ReimbursementService'
+  export default {
+    data () {
+      return {
+        title: '',
+        method: '',
+        visible: false,
+        loading: false,
+        dataList: ''
+      }
+    },
+    reimbursementApprovalService: null,
+    created () {
+      this.reimbursementApprovalService = new ReimbursementApprovalService()
+    },
+    components: {
+      ProjectForm
+    },
+    methods: {
+      init (id) {
+        this.method = 'view'
+        this.title = '查看项目信息'
+        this.visible = true
+        this.dataList = []
+        if (this.commonJS.isNotEmpty(id)) {
+          this.list(id)
+        }
+      },
+      async list (ids) {
+        this.loading = true
+        let resp = await this.reimbursementApprovalService.queryByProIds(ids)
+        if (resp) {
+          this.dataList = resp.data
+        }
+        this.loading = false
+      },
+      openProjectForm (id) {
+        this.$refs.projectForm.init('view', id)
+      },
+      close () {
+        this.dataList = []
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/modules/reimbursement/info/ReimbursementForm.vue

@@ -109,7 +109,38 @@
           </vxe-table>
         </el-row>
       </div>
-      <div v-if="inputForm.sourceType === '1'">
+      <div v-if="(status === 'audit' || status === 'taskFormDetail') && inputForm.sourceType === '1'">
+        <el-divider content-position="left"><i class="el-icon-document"></i>项目报销详情</el-divider>
+        <el-row  :gutter="15" >
+          <vxe-table
+            border
+            show-footer
+            show-overflow
+            :footer-method="footerMethod"
+            ref="detailTable"
+            :key="detailKey"
+            class="vxe-table-element"
+            :data="inputForm.detailInfos"
+            style="margin-left: 5em"
+          >
+            <vxe-table-column field="userName" title="报销人" align="center"></vxe-table-column>
+            <vxe-table-column field="deptName" title="报销部门" align="center"></vxe-table-column>
+            <vxe-table-column field="typeName" title="报销类别" align="center"></vxe-table-column>
+            <vxe-table-column field="projectName" title="报销项目" align="center">
+              <template slot-scope="scope">
+                <el-link  type="primary" :underline="false" v-if="commonJS.isNotEmpty(scope.row.projectId)" @click="viewProject(scope.row.projectId)">{{scope.row.projectName}}</el-link>
+                <span v-else>{{scope.row.projectName}}</span>
+              </template>
+            </vxe-table-column>
+            <vxe-table-column field="reportNumber" title="报告号" align="center"></vxe-table-column>
+            <vxe-table-column field="number" title="费用(元)" align="center"></vxe-table-column>
+            <vxe-table-column field="receiptNumber" title="收据张数" align="center"></vxe-table-column>
+            <vxe-table-column field="days" title="出差天数" align="center"></vxe-table-column>
+            <vxe-table-column field="content" title="内容" align="center"></vxe-table-column>
+          </vxe-table>
+        </el-row>
+      </div>
+      <div v-else-if="(status !== 'audit' && status !== 'taskFormDetail') && inputForm.sourceType === '1'">
         <el-divider content-position="left"><i class="el-icon-document"></i>
           项目报销详情
           <el-button style="margin-left: 20px" type="primary" :disabled="method==='view' || status === 'audit' || status === 'taskFormDetail'" size="mini" @click="insertEvent('detail')" plain>
@@ -189,6 +220,7 @@
           </vxe-table>
         </el-row>
       </div>
+
       <div v-if="inputForm.sourceType === '2'">
         <el-divider content-position="left"><i class="el-icon-document"></i>
           合同报销详情
@@ -583,6 +615,7 @@
     <WorkContractChooseCom ref="workContractChooseCom" @getContract="getContract"></WorkContractChooseCom>
     <PurchaseChooseForm  ref="purchaseChooseForm" @getProject="getPurChoose"></PurchaseChooseForm>
     <MaterialManagementDialog ref="materialManagementDialog" @getUpload="getUpload"></MaterialManagementDialog>
+    <ProjectListForm ref="projectListForm"></ProjectListForm>
   </div>
 </template>
 
@@ -604,6 +637,7 @@
   import PurchaseChooseForm from '@/views/modules/materialManagement/wareHouse/PurchaseChooseForm'
   import MaterialManagementService from '@/api/materialManagement/MaterialManagementService'
   import MaterialManagementDialog from '@/views/modules/materialManagement/file/MaterialManagementDialog'
+  import ProjectListForm from './ProgramForm'
   export default {
     data () {
       return {
@@ -707,7 +741,8 @@
       ReimbursementTypePullForm,
       WorkContractChooseCom,
       PurchaseChooseForm,
-      MaterialManagementDialog
+      MaterialManagementDialog,
+      ProjectListForm
     },
     computed: {
       bus: {
@@ -1238,7 +1273,7 @@
             this.$refs.programPageForm.init('2', false)
           } else {
             // 打开单选组件
-            this.$refs.programPageForm.init('1', false)
+            this.$refs.programPageForm.init('1', true)
           }
         })
       },
@@ -1284,9 +1319,11 @@
       //   this.$forceUpdate()
       // },
       getProgram (rows) {
-        this.inputForm.detailInfos[this.indexRow].projectId = rows[0].id
-        this.inputForm.detailInfos[this.indexRow].projectName = rows[0].name
-        this.inputForm.detailInfos[this.indexRow].reportNumber = rows[0].reportNo
+        if (this.commonJS.isNotEmpty(rows)) {
+          this.inputForm.detailInfos[this.indexRow].projectId = rows.map(item => { return item.id }).join(',')
+          this.inputForm.detailInfos[this.indexRow].projectName = rows.map(item => { return item.name }).join(',')
+          this.inputForm.detailInfos[this.indexRow].reportNumber = rows.map(item => { return item.reportNo }).join(',')
+        }
         this.indexRow = ''
         this.$forceUpdate()
       },
@@ -1665,6 +1702,10 @@
             }
           }
         }
+      },
+      // 查看报销项目
+      viewProject (id) {
+        this.$refs.projectListForm.init(id)
       }
     }
   }