装备流转记录页面完善

src/api/EquipmentRoamRecord/index.js

@@ -8,3 +8,12 @@ export const getRoamRecordListAPI = (data) => {
         params: data,
     })
 }
+
+// 获取出库记录单
+export const getOutRecordListAPI = (data) => {
+    return request({
+        url: '/material-mall/decChange/getDevDetails',
+        method: 'POST',
+        data,
+    })
+}

src/views/EquipmentRoamRecord/index.vue

@@ -2,32 +2,49 @@
     <!-- 装备流转记录  -->
     <div class="app-container">
         <el-row>
-            <el-form ref="queryForm" size="small" label-width="auto" :model="queryParams">
+            <el-form ref="queryForm" size="small" inline label-width="auto" :model="queryParams">
-                <el-row :gutter="10" style="display: flex; justify-content: space-between">
+                <el-form-item prop="keyword">
-                    <el-col>
+                    <el-input
-                        <el-form-item>
+                        clearable
-                            <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
+                        style="width: 240px"
+                        placeholder="请输入关键字"
+                        v-model.trim="queryParams.keyWord"
+                    />
                 </el-form-item>
-                    </el-col>
-                    <el-col>
-                        <el-form-item>
-                            <el-input v-model="queryParams.deptName" placeholder="请输入操作类型" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col>
-                        <el-form-item>
-                            <el-input v-model="queryParams.deptName" placeholder="请输入操作时间" clearable />
-                        </el-form-item>
-                    </el-col>
 
-                    <el-col style="text-align: right">
+                <el-form-item prop="type">
-                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
+                    <el-select
+                        clearable
+                        filterable
+                        style="width: 240px"
+                        v-model="queryParams.type"
+                        placeholder="请选择操作类型"
+                    >
+                        <el-option label="入库" value="1" />
+                        <el-option label="出库" value="2" />
+                        <el-option label="退役" value="3" />
+                        <el-option label="维修" value="4" />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-date-picker
+                        v-model="dateRange"
+                        type="datetimerange"
+                        range-separator="至"
+                        style="width: 240px"
+                        value-format="yyyy-MM-dd"
+                        end-placeholder="结束日期"
+                        start-placeholder="开始日期"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="onHandleQuery">
                         查询
                     </el-button>
-                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="onHandleReset">重置</el-button>
-                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">导出数据</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="onHandleExport">导出数据</el-button>
-                    </el-col>
+                </el-form-item>
-                </el-row>
             </el-form>
 
             <el-table :data="tableData" style="width: 100%">
@@ -35,7 +52,9 @@
                 <el-table-column align="center" show-overflow-tooltip prop="createUser" label="操作人" />
                 <el-table-column align="center" show-overflow-tooltip prop="type" label="操作类型">
                     <template slot-scope="scope">
-                        <el-tag v-if="scope.row.type == 2" size="mini">出库</el-tag>
+                        <el-tag v-if="scope.row.type == 2" size="mini">
+                            {{ typeInfo[scope.row.type] }}
+                        </el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column align="center" show-overflow-tooltip prop="createTime" label="操作时间" />
@@ -48,26 +67,102 @@
                 <el-table-column align="center" show-overflow-tooltip prop="proName" label="使用项目" />
                 <el-table-column align="center" show-overflow-tooltip prop="proLocation" label="地址" />
                 <el-table-column align="center" show-overflow-tooltip prop="devNum" label="装备数量" />
-                <el-table-column align="center" show-overflow-tooltip prop="address" label="操作" />
+                <el-table-column align="center" show-overflow-tooltip prop="address" label="操作">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="onHandleOutRecord(scope.row)">出库记录单</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
         </el-row>
+
+        <!-- 出库记录单 -->
+        <el-dialog title="出库记录单" :visible.sync="outRecordVisible" width="80%" append-to-body>
+            <el-row>
+                <el-button size="mini" type="primary" @click="onHandleDownload">下载</el-button>
+                <el-button size="mini" type="primary" @click="onHandlePrint">打印</el-button>
+                <el-button size="mini" type="primary" @click="onHandleClose">关闭</el-button>
+            </el-row>
+            <el-row class="record-row">
+                <el-col :span="12">
+                    <div> 流转前使用单位：{{ outRecordParams.changeUnit }} </div>
+                </el-col>
+                <el-col :span="8">
+                    <div> 流转后使用单位：{{ outRecordParams.useUint }} </div>
+                </el-col>
+                <el-col :span="4">
+                    <div> 流转前使用工程：/</div>
+                </el-col>
+            </el-row>
+            <el-row class="record-row">
+                <el-col :span="12">
+                    <div> 流转后使用工程： {{ outRecordParams.proName }} </div>
+                </el-col>
+                <el-col :span="8">
+                    <div> 装备数量： {{ outRecordParams.devNum }} </div>
+                </el-col>
+            </el-row>
+
+            <vue-easy-print ref="recordPrintRef" tableShow style="width: 100%">
+                <el-table :data="outRecordData" style="width: 100%">
+                    <el-table-column align="center" show-overflow-tooltip type="index" label="序号" />
+                    <el-table-column align="center" show-overflow-tooltip prop="devName" label="装备名称" />
+                    <!-- <el-table-column align="center" show-overflow-tooltip prop="createUser" label="装备系列" /> -->
+                    <el-table-column align="center" show-overflow-tooltip prop="devModel" label="规格型号" />
+                    <el-table-column align="center" show-overflow-tooltip prop="devCode" label="装备编码" />
+                </el-table>
+            </vue-easy-print>
+
+            <el-row class="record-row" style="margin-top: 10px">
+                <el-col :span="24" style="text-align: right">
+                    <div>
+                        操作人：
+                        <span style="margin-right: 30px"> {{ outRecordParams.createUser }}</span>
+                        操作时间：
+                        {{ outRecordParams.createTime }}
+                    </div>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
 <script>
-import { getRoamRecordListAPI } from '@/api/EquipmentRoamRecord'
+import { getRoamRecordListAPI, getOutRecordListAPI } from '@/api/EquipmentRoamRecord'
+import vueEasyPrint from 'vue-easy-print'
 export default {
+    components: {
+        vueEasyPrint,
+    },
     data() {
         return {
             total: 0,
             tableData: [],
+            dateRange: [],
+            typeInfo: {
+                1: '入库',
+                2: '出库',
+                3: '退役',
+                4: '维修',
+            },
             queryParams: {
-                keyword: '', // 关键字
+                keyWord: '', // 关键字
-                handleType: '', // 操作类型
+                type: '', // 操作类型
-                handleTime: '', // 操作时间
+                startTime: '', // 操作时间
+                endTime: '', // 操作时间
                 pageNum: 1,
                 pageSize: 10,
             },
+
+            // 出库记录单
+            outRecordVisible: false,
+            outRecordParams: {
+                changeUnit: '',
+                useUint: '',
+                proName: '',
+                devNum: '',
+            },
+            outRecordData: [],
+            recordId: '',
         }
     },
     created() {
@@ -76,13 +171,73 @@ export default {
     methods: {
         // 获取流转记录列表
         async getRoamRecordList() {
+            if (this.dateRange.length > 0) {
+                this.queryParams.startTime = this.dateRange[0]
+                this.queryParams.endTime = this.dateRange[1]
+            }
             const res = await getRoamRecordListAPI(this.queryParams)
-            console.log(res, '流转记录列表')
             this.tableData = res.rows
             this.total = res.total || 0
         },
+
+        // 出库记录单
+        async onHandleOutRecord(row) {
+            const { changeUnit, useUint, proName, devNum, id, createUser, createTime } = row
+            this.outRecordParams = { changeUnit, useUint, proName, devNum, createUser, createTime }
+            this.recordId = id
+            const res = await getOutRecordListAPI({ id })
+            this.outRecordData = res.data
+            this.outRecordVisible = true
+        },
+
+        // 查询
+        onHandleQuery() {
+            this.getRoamRecordList()
+        },
+
+        // 重置
+        onHandleReset() {
+            this.queryParams = { keyWord: '', type: '', startTime: '', endTime: '', pageNum: 1, pageSize: 10 }
+            this.dateRange = []
+            this.getRoamRecordList()
+        },
+
+        // 导出数据
+        onHandleExport() {
+            // this.downLo
+            this.download(
+                'material-mall/decChange/export',
+                {
+                    ...this.queryParams,
+                },
+                `装备流转记录.xlsx`,
+            )
+        },
+
+        // 下载
+        onHandleDownload() {
+            this.download('material-mall/decChange/exportDetails', { id: this.recordId }, `出库记录单.xlsx`)
+        },
+
+        // 打印
+        onHandlePrint() {
+            this.$refs.recordPrintRef.print()
+        },
+
+        // 关闭
+        onHandleClose() {
+            this.outRecordVisible = false
+        },
     },
 }
 </script>
 
-<style></style>
+<style scoped>
+.record-row {
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    line-height: 40px;
+}
+</style>