增加修试查询菜单 （退料查询，维修配件查询，一机一档案查询）静态页面
This commit is contained in:
BianLzhaoMin
parent
638080ca7d
commit
a4357cd8bd
|
|
@ -0,0 +1,18 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取列表
|
||||
export const getTableListApi = data => {
|
||||
return request({
|
||||
url: '/***',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
// 获取退料数量详情
|
||||
export const getReturnNumDetailsApi = data => {
|
||||
return request({
|
||||
url: '/***',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取列表
|
||||
export const getTableListApi = data => {
|
||||
return request({
|
||||
url: '/***',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取列表
|
||||
export const getTableListApi = data => {
|
||||
return request({
|
||||
url: '/***',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取使用数量详情
|
||||
export const getUseNumDetailsApi = data => {
|
||||
return request({
|
||||
url: '/***',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 退料数量弹框页面 -->
|
||||
<el-dialog title="查看详情" :visible.sync="outerVisible" @before-close="onClose" width="70%">
|
||||
<!-- 查询表单 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表数据 -->
|
||||
<el-table :data="tableList" border>
|
||||
<el-table-column align="center" label="序号" type="index" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="col.label"
|
||||
:label="col.label"
|
||||
:show-overflow-tooltip="col.show"
|
||||
v-for="col in tableColumn"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<template v-if="col.isSlot">
|
||||
<el-image
|
||||
:key="img"
|
||||
:src="img"
|
||||
fit="cover"
|
||||
class="img-box"
|
||||
v-for="img in row[col.prop]"
|
||||
:preview-src-list="previewSrcList"
|
||||
@click="onHandleViewImg(row[col.prop])"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReturnNumDetailsApi } from '@/api/repair-testing/material-return'
|
||||
export default {
|
||||
props: {
|
||||
// 外层 Dialog 的可见性
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewSrcList: [], // 预览时的数据源
|
||||
queryParams: {
|
||||
keyword: ''
|
||||
},
|
||||
tableList: [
|
||||
{
|
||||
title: '测试1',
|
||||
num: 10,
|
||||
imgSrc: [
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 1,
|
||||
imgSrc: [
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 17,
|
||||
imgSrc: [
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 5,
|
||||
imgSrc: [
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
|
||||
]
|
||||
}
|
||||
],
|
||||
tableColumn: [
|
||||
{ label: '机具名称', prop: 'title', show: true },
|
||||
{ label: '规格型号', prop: 'title', show: true },
|
||||
{ label: '退料总数', prop: 'title', show: true },
|
||||
{ label: '合格数量', prop: 'title', show: true },
|
||||
{ label: '不合格数量', prop: 'title', show: true },
|
||||
{ label: '不合格原因', prop: 'title', show: true },
|
||||
{ label: '不合格图片', prop: 'imgSrc', isSlot: true, show: false }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
outerVisible: {
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
},
|
||||
get() {
|
||||
return this.visible
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取详情
|
||||
async getReturnNumDetailsFun() {
|
||||
const res = await getReturnNumDetailsApi(this.queryParams)
|
||||
},
|
||||
// 查询
|
||||
onHandleSearch() {
|
||||
console.log('查询')
|
||||
},
|
||||
// 关闭外侧弹框
|
||||
onClose() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
// 点击图片
|
||||
onHandleViewImg(imgList) {
|
||||
this.previewSrcList = imgList
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getReturnNumDetailsFun()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<!-- 修试查询 -- 退料查询 -->
|
||||
<div class="app-container">
|
||||
<!-- 查询表单 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="queryParams.unit"
|
||||
placeholder="请选择往来单位"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择工程名称"
|
||||
v-model="queryParams.project"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="typeName">
|
||||
<el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="specs">
|
||||
<el-input v-model="queryParams.specs" placeholder="请输入规格型号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
<el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableList" border>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="col.label"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip
|
||||
v-for="col in tableColumn"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<template v-if="col.isSlot">
|
||||
<span class="num-box" @click="onHandleViewDetails(row)">
|
||||
{{ row[col.prop] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getTableList"
|
||||
/>
|
||||
|
||||
<!-- 二级页面弹框 -->
|
||||
<DialogModel :visible.sync="visible" v-if="visible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTableListApi } from '@/api/repair-testing/material-return'
|
||||
import DialogModel from './components/dialogModel.vue'
|
||||
export default {
|
||||
components: {
|
||||
DialogModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 0, // 总条数
|
||||
time: [], // 日期数据源
|
||||
visible: false, // 二级页面弹框
|
||||
tableList: [
|
||||
{
|
||||
title: '测试1',
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 1
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 5
|
||||
}
|
||||
], // 列表数据源
|
||||
// 查询条件
|
||||
queryParams: {
|
||||
keyword: '',
|
||||
unit: '',
|
||||
project: '',
|
||||
typeName: '',
|
||||
specs: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: '标题', prop: 'title' },
|
||||
{ label: '协议号', prop: 'title' },
|
||||
{ label: '工程名称', prop: 'title' },
|
||||
{ label: '往来单位', prop: 'title' },
|
||||
{ label: '类型名称', prop: 'title' },
|
||||
{ label: '规格型号', prop: 'title' },
|
||||
{ label: '计量单位', prop: 'title' },
|
||||
{ label: '退料单号', prop: 'title' },
|
||||
{ label: '维修单号', prop: 'title' },
|
||||
{ label: '设备编码', prop: 'title' },
|
||||
{ label: '退料数量', prop: 'num', isSlot: true },
|
||||
{ label: '退料人员', prop: 'title' },
|
||||
{ label: '退料时间', prop: 'title' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableList() {
|
||||
const queryParams = {
|
||||
...this.queryParams,
|
||||
startTime: this.time && this.time.length > 0 ? this.time[0] : '',
|
||||
endTime: this.time && this.time.length > 0 ? this.time[1] : ''
|
||||
}
|
||||
|
||||
const res = await getTableListApi(queryParams)
|
||||
},
|
||||
// 查询
|
||||
onHandleSearch() {
|
||||
this.getTableList()
|
||||
},
|
||||
// 重置
|
||||
onHandleReset() {
|
||||
this.time = []
|
||||
this.$refs.queryFormRef.resetFields()
|
||||
this.getTableList()
|
||||
},
|
||||
// 导出
|
||||
onHandleExport() {},
|
||||
// 列表内点击数量跳转详情
|
||||
onHandleViewDetails(row) {
|
||||
console.log(row, '详情')
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.num-box {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<!-- 修试查询 -- 一机一档案查询 -->
|
||||
<div class="app-container">
|
||||
<!-- 查询表单 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="queryParams.unit"
|
||||
placeholder="请选择往来单位"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择工程名称"
|
||||
v-model="queryParams.project"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="typeName">
|
||||
<el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="specs">
|
||||
<el-input v-model="queryParams.specs" placeholder="请输入规格型号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
<el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableList" border>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="col.label"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip
|
||||
v-for="col in tableColumn"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<template v-if="col.isSlot">
|
||||
<span class="num-box" @click="onHandleViewDetails(row)">
|
||||
{{ row[col.prop] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getTableList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTableListApi } from '@/api/repair-testing/one-machine'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
total: 0, // 总条数
|
||||
time: [], // 日期数据源
|
||||
tableList: [
|
||||
{
|
||||
title: '测试1',
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 1
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 5
|
||||
}
|
||||
], // 列表数据源
|
||||
// 查询条件
|
||||
queryParams: {
|
||||
keyword: '',
|
||||
unit: '',
|
||||
project: '',
|
||||
typeName: '',
|
||||
specs: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: '协议号', prop: 'title' },
|
||||
{ label: '单位名称', prop: 'title' },
|
||||
{ label: '工程名称', prop: 'title' },
|
||||
{ label: '类型名称', prop: 'title' },
|
||||
{ label: '规格型号', prop: 'title' },
|
||||
{ label: '设备编码', prop: 'title' },
|
||||
{ label: '单号', prop: 'title' },
|
||||
{ label: '操作人', prop: 'title' },
|
||||
{ label: '操作日期', prop: 'title' },
|
||||
{ label: '操作类型', prop: 'num' },
|
||||
{ label: '操作信息', prop: 'title' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableList() {
|
||||
const queryParams = {
|
||||
...this.queryParams,
|
||||
startTime: this.time && this.time.length > 0 ? this.time[0] : '',
|
||||
endTime: this.time && this.time.length > 0 ? this.time[1] : ''
|
||||
}
|
||||
|
||||
const res = await getTableListApi(queryParams)
|
||||
},
|
||||
// 查询
|
||||
onHandleSearch() {
|
||||
this.getTableList()
|
||||
},
|
||||
// 重置
|
||||
onHandleReset() {
|
||||
this.time = []
|
||||
this.$refs.queryFormRef.resetFields()
|
||||
this.getTableList()
|
||||
},
|
||||
// 导出
|
||||
onHandleExport() {},
|
||||
// 列表内点击数量跳转详情
|
||||
onHandleViewDetails(row) {
|
||||
console.log(row, '详情')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.num-box {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 使用数量弹框页面 -->
|
||||
<el-dialog title="查看详情" :visible.sync="outerVisible" @before-close="onClose" width="70%">
|
||||
<!-- 查询表单 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表数据 -->
|
||||
<el-table :data="tableList" border>
|
||||
<el-table-column align="center" label="序号" type="index" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="col.label"
|
||||
:label="col.label"
|
||||
:show-overflow-tooltip="col.show"
|
||||
v-for="col in tableColumn"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<template v-if="col.isSlot"></template>
|
||||
<template v-else>
|
||||
{{ row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUseNumDetailsApi } from '@/api/repair-testing/repair-accessory'
|
||||
export default {
|
||||
props: {
|
||||
// 外层 Dialog 的可见性
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewSrcList: [], // 预览时的数据源
|
||||
queryParams: {
|
||||
keyword: ''
|
||||
},
|
||||
tableList: [
|
||||
{
|
||||
title: '测试1',
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 1
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 5
|
||||
}
|
||||
],
|
||||
tableColumn: [
|
||||
{ label: '配件名称', prop: 'title', show: true },
|
||||
{ label: '规格型号', prop: '', show: true },
|
||||
{ label: '使用数量', prop: '', show: true },
|
||||
{ label: '单价(元)', prop: '', show: true },
|
||||
{ label: '收费金额(元)', prop: '', show: true },
|
||||
{ label: '不收费金额(元)', prop: '', show: true }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
outerVisible: {
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
},
|
||||
get() {
|
||||
return this.visible
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取详情
|
||||
async getUseNumDetailsFun() {
|
||||
const res = await getUseNumDetailsApi(this.queryParams)
|
||||
},
|
||||
// 查询
|
||||
onHandleSearch() {
|
||||
console.log('查询')
|
||||
},
|
||||
// 关闭外侧弹框
|
||||
onClose() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
// 点击图片
|
||||
onHandleViewImg(imgList) {
|
||||
this.previewSrcList = imgList
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getUseNumDetailsFun()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.img-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<!-- 修试查询 -- 维修配件查询 -->
|
||||
<div class="app-container">
|
||||
<!-- 查询表单 -->
|
||||
<el-form size="small" :model="queryParams" ref="queryFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-DD"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
v-model="queryParams.unit"
|
||||
placeholder="请选择往来单位"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%"
|
||||
placeholder="请选择工程名称"
|
||||
v-model="queryParams.project"
|
||||
>
|
||||
<el-option label="全部" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="typeName">
|
||||
<el-input v-model="queryParams.typeName" placeholder="请输入类型名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="specs">
|
||||
<el-input v-model="queryParams.specs" placeholder="请输入规格型号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
|
||||
<el-button icon="el-icon-download" @click="onHandleExport">导出数据</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<el-table :data="tableList" border>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="col.label"
|
||||
:label="col.label"
|
||||
show-overflow-tooltip
|
||||
v-for="col in tableColumn"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<template v-if="col.isSlot">
|
||||
<span class="num-box" @click="onHandleViewDetails(row)">
|
||||
{{ row[col.prop] }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getTableList"
|
||||
/>
|
||||
|
||||
<!-- 二级页面弹框 -->
|
||||
<DialogModel :visible.sync="visible" v-if="visible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTableListApi } from '@/api/repair-testing/repair-accessory'
|
||||
import DialogModel from './components/dialogModel.vue'
|
||||
export default {
|
||||
components: {
|
||||
DialogModel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 0, // 总条数
|
||||
time: [], // 日期数据源
|
||||
visible: false,
|
||||
tableList: [
|
||||
{
|
||||
title: '测试1',
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 1
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 17
|
||||
},
|
||||
{
|
||||
title: '测试1',
|
||||
num: 5
|
||||
}
|
||||
], // 列表数据源
|
||||
// 查询条件
|
||||
queryParams: {
|
||||
keyword: '',
|
||||
unit: '',
|
||||
project: '',
|
||||
typeName: '',
|
||||
specs: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
tableColumn: [
|
||||
{ label: '维修单号', prop: 'title' },
|
||||
{ label: '退料单位', prop: '' },
|
||||
{ label: '工程名称', prop: '' },
|
||||
{ label: '类型名称', prop: '' },
|
||||
{ label: '规格型号', prop: '' },
|
||||
{ label: '设备编码', prop: '' },
|
||||
{ label: '维修数量', prop: '' },
|
||||
{ label: '单位', prop: '' },
|
||||
{ label: '配件名称', prop: '' },
|
||||
{ label: '配件规格', prop: '' },
|
||||
{ label: '使用数量', prop: 'num', isSlot: true },
|
||||
{ label: '维修人员', prop: '' },
|
||||
{ label: '维修时间', prop: '' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableList() {
|
||||
const queryParams = {
|
||||
...this.queryParams,
|
||||
startTime: this.time && this.time.length > 0 ? this.time[0] : '',
|
||||
endTime: this.time && this.time.length > 0 ? this.time[1] : ''
|
||||
}
|
||||
|
||||
const res = await getTableListApi(queryParams)
|
||||
},
|
||||
// 查询
|
||||
onHandleSearch() {
|
||||
this.getTableList()
|
||||
},
|
||||
// 重置
|
||||
onHandleReset() {
|
||||
this.time = []
|
||||
this.$refs.queryFormRef.resetFields()
|
||||
this.getTableList()
|
||||
},
|
||||
// 导出
|
||||
onHandleExport() {},
|
||||
// 列表内点击数量跳转详情
|
||||
onHandleViewDetails(row) {
|
||||
console.log(row, '详情')
|
||||
this.visible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTableList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.num-box {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue