313 lines
10 KiB
Vue
313 lines
10 KiB
Vue
<template>
|
||
<!-- 基础页面 -->
|
||
<div class="app-container" shadow="never">
|
||
<el-card v-show="showSearch" style="margin-bottom: 20px">
|
||
<el-form :model="queryParams" ref="queryForm" label-width="120px" inline @submit.native.prevent>
|
||
<el-form-item label="项目名称" prop="proCode">
|
||
<el-select
|
||
clearable
|
||
filterable
|
||
placeholder="请选择项目名称"
|
||
v-model="queryParams.proCode"
|
||
style="width: 240px"
|
||
popper-class="my-select-dropdown"
|
||
>
|
||
<el-option
|
||
:key="item.proCode"
|
||
:label="item.proName"
|
||
:value="item.proCode"
|
||
v-for="item in useProjectList"
|
||
>
|
||
<el-tooltip
|
||
effect="dark"
|
||
:content="item.proName"
|
||
placement="right"
|
||
>
|
||
<span class="option-text">{{ item.proName }}</span>
|
||
</el-tooltip>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="任务状态" prop="taskStatus">
|
||
<el-select
|
||
v-model="queryParams.taskStatus"
|
||
placeholder="请选择任务状态"
|
||
clearable
|
||
filterable
|
||
style="width: 240px"
|
||
>
|
||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
|
||
<!-- 日期范围 -->
|
||
<el-form-item label="申请日期">
|
||
<el-date-picker
|
||
v-model="timeRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
clearable
|
||
unlink-panels
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
style="width: 240px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 表单按钮 -->
|
||
<el-form-item style="float: right">
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card class="content-box" shadow="never">
|
||
<el-row :gutter="10" class="mb8" justify="end">
|
||
<el-col :span="6" style="display: flex;align-items: center;">
|
||
<span style="font-size: 20px; font-weight: 800;margin-right: 48px;">出库审核列表</span>
|
||
<span style="font-size: 16px;color: #808080;">共{{tableList.length}}条记录</span>
|
||
</el-col>
|
||
<el-col :span="18" style="display: flex; justify-content: flex-end; gap: 10px">
|
||
<el-button
|
||
v-if="selectedRows.length > 0"
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-check"
|
||
@click="handleBatchApprove"
|
||
>
|
||
批量审批（{{ selectedRows.length }}）
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-table
|
||
v-loading="isLoading"
|
||
:data="tableList"
|
||
highlight-current-row
|
||
border
|
||
stripe
|
||
class="my-table"
|
||
style="width: 100%"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="55"
|
||
align="center"
|
||
:selectable="row => row.taskStatus == '0'"
|
||
/>
|
||
<el-table-column
|
||
type="index"
|
||
width="55"
|
||
label="序号"
|
||
align="center"
|
||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||
/>
|
||
<el-table-column label="申请单号" align="center" prop="code" :show-overflow-tooltip="true" />
|
||
<el-table-column label="项目名称" align="center" prop="proName" :show-overflow-tooltip="true" />
|
||
<el-table-column label="申请装备数" align="center" prop="devNum" :show-overflow-tooltip="true" width="120px"/>
|
||
<el-table-column label="申请工具数" align="center" prop="toolNum" :show-overflow-tooltip="true" />
|
||
<el-table-column label="任务状态" align="center" prop="taskStatus" :show-overflow-tooltip="true" >
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.taskStatus == '0'" type="info" @click="openDialog(scope.row)" style="cursor: pointer">待审批</el-tag>
|
||
<el-tag v-if="scope.row.taskStatus == '1'" type="warning" @click="openDialog(scope.row)" style="cursor: pointer">审批中</el-tag>
|
||
<el-tag v-if="scope.row.taskStatus == '2'" type="success" @click="openDialog(scope.row)" style="cursor: pointer">已审批</el-tag>
|
||
<el-tag v-if="scope.row.taskStatus == '3'" type="danger" @click="openDialog(scope.row)" style="cursor: pointer">审批驳回</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="申请人" align="center" prop="createBy" :show-overflow-tooltip="true" width="140px"/>
|
||
<el-table-column label="申请时间" align="center" prop="createTime" width="160px"/>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="{ row }">
|
||
<el-button v-if="row.taskStatus != 0" type="text" style="color: #2CBAB2;" @click="handleView(row)">查看</el-button>
|
||
<el-button v-if="row.taskStatus == 0" type="text" style="color: #2CBAB2;" @click="handleEdit(row)">审核</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<pagination
|
||
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</el-card>
|
||
|
||
<ApproveDialog ref="approveDialog" />
|
||
<BatchApproveDialog ref="batchApproveDialog" @success="handleBatchApproveSuccess" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getListApi, } from '@/api/business'
|
||
import {
|
||
getUseProjectListAPI,
|
||
} from '@/api/EquipmentLedger/equ-out'
|
||
import ApproveDialog from '@/views/business/components/ApproveDialog'
|
||
import BatchApproveDialog from '@/views/business/components/BatchApproveDialog'
|
||
|
||
export default {
|
||
name: 'AuditList',
|
||
components: {
|
||
ApproveDialog,
|
||
BatchApproveDialog,
|
||
},
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
showSearch: true,
|
||
timeRange: [],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
status: null,
|
||
createBy: null,
|
||
startTime: null,
|
||
endTime: null,
|
||
},
|
||
statusList: [
|
||
{ label: '待审批', value: '0' },
|
||
{ label: '审批中', value: '1' },
|
||
{ label: '已审批', value: '2' },
|
||
{ label: '审批驳回', value: '3' },
|
||
],
|
||
total: 0, // 总条数
|
||
// 表格数据
|
||
tableList: [],
|
||
useProjectList: [], // 使用项目下拉选
|
||
selectedRows: [], // 选中的行
|
||
}
|
||
},
|
||
created() {
|
||
this.getUseProjectList()
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
// 获取使用项目的下拉选
|
||
async getUseProjectList() {
|
||
const res = await getUseProjectListAPI()
|
||
this.useProjectList = res.data
|
||
},
|
||
|
||
// 查询
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
// 重置
|
||
handleReset() {
|
||
this.queryParams.pageNum = 1
|
||
this.queryParams.pageSize = 10
|
||
this.queryParams.parentId = '0'
|
||
this.queryParams.level = '1'
|
||
this.timeRange = []
|
||
this.$refs.queryForm.resetFields()
|
||
this.getList()
|
||
},
|
||
// 获取列表
|
||
async getList() {
|
||
console.log('列表-查询', this.queryParams)
|
||
this.isLoading = true
|
||
this.queryParams.startTime = this.timeRange && this.timeRange[0] ? this.timeRange[0] : null
|
||
this.queryParams.endTime = this.timeRange && this.timeRange[1] ? this.timeRange[1] : null
|
||
try {
|
||
const params = { ...this.queryParams }
|
||
const res = await getListApi(params)
|
||
this.tableList = res.data.rows || []
|
||
this.total = res.data.total || 0
|
||
} catch (error) {
|
||
this.tableList = []
|
||
this.total = 0
|
||
} finally {
|
||
this.isLoading = false
|
||
}
|
||
},
|
||
// 新增
|
||
handleAdd() {
|
||
this.$router.push({ path: '/business/addAudit' })
|
||
},
|
||
// 查看
|
||
handleView(row) {
|
||
this.$router.push({ path: '/business/addAudit', query: { id: row.id, isView: true } })
|
||
},
|
||
// 审核
|
||
handleEdit(row) {
|
||
this.$router.push({ path: '/business/addAudit', query: { id: row.id, isEdit: true } })
|
||
},
|
||
openDialog(row) {
|
||
this.$refs.approveDialog.openDialog(row.id, 'EQUIPMENT_OUT')
|
||
},
|
||
// 选择行变化
|
||
handleSelectionChange(selection) {
|
||
this.selectedRows = selection
|
||
},
|
||
// 批量审批
|
||
handleBatchApprove() {
|
||
if (this.selectedRows.length === 0) {
|
||
this.$message.warning('请先选择要审批的项目')
|
||
return
|
||
}
|
||
this.$refs.batchApproveDialog.openDialog(this.selectedRows)
|
||
},
|
||
// 批量审批成功后的回调
|
||
handleBatchApproveSuccess() {
|
||
this.selectedRows = []
|
||
this.getList()
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-container{
|
||
background: #F0F0F0;
|
||
}
|
||
::v-deep.el-button--primary{
|
||
background-color: #2CBAB2;
|
||
border-color: #2CBAB2;
|
||
}
|
||
::v-deep.el-button--danger{
|
||
background-color: #FF5129;
|
||
border-color: #FF5129;
|
||
}
|
||
::v-deep.el-tag.el-tag--info {
|
||
background-color: #F5F5F5;
|
||
border-color: #B3B3B3;
|
||
color: #B3B3B3;
|
||
}
|
||
::v-deep.el-tag.el-tag--warn{
|
||
background-color: rgba(255,171,41,0.1);;
|
||
border: #FFAB29;
|
||
color: #FFAB29;
|
||
}
|
||
::v-deep.el-tag.el-tag--success {
|
||
background-color: rgba(52,226,199,0.1);
|
||
border-color: #34E2C7;
|
||
color: #34E2C7;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 0; /* 取消form-item的默认下边距 */
|
||
}
|
||
.content-box {
|
||
border-radius: 8px;
|
||
//height: calc(100vh - 220px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
::v-deep .el-card__body {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
height: 100% !important;
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|