428 lines
14 KiB
Vue
428 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-dialog
|
||
|
|
v-if="dialogVisible"
|
||
|
|
v-loading="isLoading"
|
||
|
|
:visible.sync="dialogVisible"
|
||
|
|
width="65%"
|
||
|
|
:modal="false"
|
||
|
|
class="dlg-box"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<!-- 自定义title -->
|
||
|
|
<i class="close-btn" @click="dialogVisible = false" />
|
||
|
|
<div class="dlg-title">全量装备</div>
|
||
|
|
|
||
|
|
<!-- 表单 -->
|
||
|
|
<el-form
|
||
|
|
v-show="showSearch"
|
||
|
|
:model="queryParams"
|
||
|
|
ref="queryForm"
|
||
|
|
size="small"
|
||
|
|
inline
|
||
|
|
label-width="100px"
|
||
|
|
@submit.native.prevent
|
||
|
|
>
|
||
|
|
<el-form-item label="装备范围" prop="equipRange">
|
||
|
|
<el-select v-model="queryParams.equipRange" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in equipRangeList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="地市公司" prop="dsCompName">
|
||
|
|
<el-select v-model="queryParams.dsCompName" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in dsCompNameList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="装备名称" prop="equipName">
|
||
|
|
<el-input v-model="queryParams.equipName" placeholder="请输入" clearable style="width: 240px" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="装备系列" prop="equipSeries">
|
||
|
|
<el-select v-model="queryParams.equipSeries" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in equipSeriesList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="装备编号" prop="equipCode">
|
||
|
|
<el-input v-model="queryParams.equipCode" placeholder="请输入" clearable style="width: 240px" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="装备状态" prop="equipStatus">
|
||
|
|
<el-select v-model="queryParams.equipStatus" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in equipStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="所在项目" prop="projectName">
|
||
|
|
<el-select v-model="queryParams.projectName" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in projectNameList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- 日期范围 -->
|
||
|
|
<el-form-item label="采购日期" prop="purchaseDate">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryParams.purchaseDate"
|
||
|
|
type="date"
|
||
|
|
placeholder="请选择"
|
||
|
|
clearable
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
format="yyyy-MM-dd"
|
||
|
|
style="width: 240px"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="出厂日期" prop="factoryDate">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryParams.factoryDate"
|
||
|
|
type="date"
|
||
|
|
placeholder="请选择"
|
||
|
|
clearable
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
format="yyyy-MM-dd"
|
||
|
|
style="width: 240px"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="使用年限" prop="usefulLife">
|
||
|
|
<el-select v-model="queryParams.usefulLife" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in usefulLifeList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="产权单位" prop="propertyUnit">
|
||
|
|
<el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in propertyUnitList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="生产厂家" prop="manufacturer">
|
||
|
|
<el-select v-model="queryParams.manufacturer" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in manufacturerList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="资产原值" prop="assetValue">
|
||
|
|
<el-input v-model="queryParams.assetValue" placeholder="请输入" clearable style="width: 240px" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="下次检测日期" prop="nextCheckDate">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="queryParams.nextCheckDate"
|
||
|
|
type="date"
|
||
|
|
placeholder="请选择"
|
||
|
|
clearable
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
format="yyyy-MM-dd"
|
||
|
|
style="width: 240px"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="特征项" prop="featureItem">
|
||
|
|
<el-input v-model="queryParams.featureItem" placeholder="请输入" clearable style="width: 240px" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="特征值" prop="featureValue">
|
||
|
|
<el-select v-model="queryParams.featureValue" placeholder="请选择" clearable style="width: 240px">
|
||
|
|
<el-option v-for="item in featureValueList" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<!-- 表单按钮 -->
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||
|
|
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<el-row :gutter="10" class="mb8">
|
||
|
|
<el-col :span="1.5">
|
||
|
|
<el-button class="btn" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
|
||
|
|
</el-col>
|
||
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-table
|
||
|
|
v-loading="isLoading"
|
||
|
|
:data="tableList"
|
||
|
|
stripe
|
||
|
|
highlight-current-row
|
||
|
|
style="width: 100%"
|
||
|
|
:max-height="650"
|
||
|
|
class="table-container"
|
||
|
|
>
|
||
|
|
<el-table-column
|
||
|
|
type="index"
|
||
|
|
width="55"
|
||
|
|
label="序号"
|
||
|
|
align="center"
|
||
|
|
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||
|
|
/>
|
||
|
|
<el-table-column
|
||
|
|
v-for="(column, index) in tableColumns"
|
||
|
|
show-overflow-tooltip
|
||
|
|
:key="index"
|
||
|
|
:label="column.label"
|
||
|
|
:prop="column.prop"
|
||
|
|
align="center"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- 操作 -->
|
||
|
|
<el-table-column label="操作" align="center" width="130">
|
||
|
|
<template slot-scope="{ row }">
|
||
|
|
<el-button type="text" size="mini" @click="" style="color: #409eff">查看详情</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<!-- 分页 -->
|
||
|
|
<pagination
|
||
|
|
v-show="total > 0"
|
||
|
|
:total="88"
|
||
|
|
:page.sync="queryParams.pageNum"
|
||
|
|
:limit.sync="queryParams.pageSize"
|
||
|
|
@pagination="getList"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isLoading: false,
|
||
|
|
dialogVisible: false,
|
||
|
|
showSearch: true,
|
||
|
|
queryParams: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
equipRange: '', // 装备范围
|
||
|
|
dsCompName: '', // 地市公司
|
||
|
|
equipName: '', // 装备名称
|
||
|
|
equipSeries: '', // 装备系列
|
||
|
|
equipCode: '', // 装备编号
|
||
|
|
equipStatus: '', // 装备状态
|
||
|
|
projectName: '', // 所在项目
|
||
|
|
purchaseDate: '', // 采购日期
|
||
|
|
factoryDate: '', // 出厂日期
|
||
|
|
usefulLife: '', // 使用年限
|
||
|
|
propertyUnit: '', // 产权单位
|
||
|
|
manufacturer: '', // 生产厂家
|
||
|
|
assetValue: '', // 资产原值
|
||
|
|
nextCheckDate: '', // 下次检测日期
|
||
|
|
featureItem: '', // 特征项
|
||
|
|
featureValue: '', // 特征值
|
||
|
|
},
|
||
|
|
equipRangeList: [
|
||
|
|
{ label: '全网省', value: 1 },
|
||
|
|
{ label: '合肥市', value: 2 },
|
||
|
|
],
|
||
|
|
dsCompNameList: [
|
||
|
|
{ label: '全网省', value: 1 },
|
||
|
|
{ label: '合肥市', value: 2 },
|
||
|
|
],
|
||
|
|
equipSeriesList: [
|
||
|
|
{ label: '全网省', value: 1 },
|
||
|
|
{ label: '合肥市', value: 2 },
|
||
|
|
],
|
||
|
|
equipStatusList: [
|
||
|
|
{ label: '在库', value: 1 },
|
||
|
|
{ label: '在用', value: 2 },
|
||
|
|
],
|
||
|
|
projectNameList: [
|
||
|
|
{ label: '全网省', value: 1 },
|
||
|
|
{ label: '合肥市', value: 2 },
|
||
|
|
],
|
||
|
|
usefulLifeList: [
|
||
|
|
{ label: '5年', value: 1 },
|
||
|
|
{ label: '10年', value: 2 },
|
||
|
|
],
|
||
|
|
propertyUnitList: [
|
||
|
|
{ label: '单位1', value: 1 },
|
||
|
|
{ label: '单位2', value: 2 },
|
||
|
|
],
|
||
|
|
manufacturerList: [
|
||
|
|
{ label: '单位1', value: 1 },
|
||
|
|
{ label: '单位2', value: 2 },
|
||
|
|
],
|
||
|
|
assetValueList: [
|
||
|
|
{ label: '原值1', value: 1 },
|
||
|
|
{ label: '原值2', value: 2 },
|
||
|
|
],
|
||
|
|
featureValueList: [
|
||
|
|
{ label: '特征1', value: 1 },
|
||
|
|
{ label: '特征2', value: 2 },
|
||
|
|
],
|
||
|
|
|
||
|
|
tableColumns: [
|
||
|
|
{ label: '公司名称', prop: 'compName' },
|
||
|
|
{ label: '工程专业', prop: 'proFee' },
|
||
|
|
{ label: '施工主工序', prop: 'process' },
|
||
|
|
{ label: '装备名称', prop: 'equipName' },
|
||
|
|
{ label: '装备型号', prop: 'equipType' },
|
||
|
|
{ label: '装备编号', prop: 'equipCode' },
|
||
|
|
{ label: '计量单位', prop: 'unitName' },
|
||
|
|
{ label: '产权单位', prop: 'propertyUnit' },
|
||
|
|
{ label: '资产原值（元）', prop: 'unitPrice' },
|
||
|
|
{ label: '采购日期', prop: 'purchaseDate' },
|
||
|
|
],
|
||
|
|
tableList: [
|
||
|
|
// { id: 1, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 2, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 3, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 4, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 5, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 6, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 7, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 8, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 9, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
// { id: 10, equipName: '测试1', equipType: '测试1', equipCode: '测试1' },
|
||
|
|
],
|
||
|
|
total: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
methods: {
|
||
|
|
openDialog() {
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
getList() {},
|
||
|
|
// 查询
|
||
|
|
handleQuery() {
|
||
|
|
this.queryParams.pageNum = 1
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
// 重置
|
||
|
|
handleReset() {
|
||
|
|
this.$refs.queryForm.resetFields()
|
||
|
|
this.queryParams.pageNum = 1
|
||
|
|
this.queryParams.pageSize = 10
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
// 导出数据
|
||
|
|
handleExport() {
|
||
|
|
// 提示
|
||
|
|
this.$message({
|
||
|
|
type: 'warning',
|
||
|
|
message: '导出功能开发中，敬请期待！',
|
||
|
|
})
|
||
|
|
try {
|
||
|
|
let fileName = `导出_${formatTime(new Date())}.xLsx`
|
||
|
|
let url = '/material/backstage/costPush/exportPushCheck'
|
||
|
|
const params = { ...this.queryParams }
|
||
|
|
console.log('🚀 ~ 导出 ~ params:', params)
|
||
|
|
// this.derive(url, params, fileName)
|
||
|
|
// this.download(url, params, fileName)
|
||
|
|
} catch (error) {
|
||
|
|
console.log('导出数据失败', error)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
::v-deep .el-dialog {
|
||
|
|
background: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-dialog .el-dialog__body {
|
||
|
|
background-image: url('../../img/all-dialog.png');
|
||
|
|
background-size: 100% auto;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
::v-deep .el-dialog__header {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
// 输入框
|
||
|
|
::v-deep .el-input__inner {
|
||
|
|
background: rgba(3, 16, 44, 0.5) !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-button--primary {
|
||
|
|
background: #3165d6;
|
||
|
|
border-color: #3165d6;
|
||
|
|
}
|
||
|
|
::v-deep .el-button--mini.is-circle {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
// 表格 - 单元格
|
||
|
|
::v-deep .el-table th.el-table__cell {
|
||
|
|
color: #fff;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
// 表格 - 每一行
|
||
|
|
::v-deep .el-table tr {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
// 表头
|
||
|
|
::v-deep .el-table thead tr {
|
||
|
|
background: url('../../img/all-table-tr.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
// 点击后背景色
|
||
|
|
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||
|
|
.el-table__body tr.selection-row > td.el-table__cell {
|
||
|
|
background: #10264a;
|
||
|
|
}
|
||
|
|
// 鼠标移入
|
||
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
|
|
background-color: rgba(16, 37, 81, 0.9);
|
||
|
|
}
|
||
|
|
// stripe - 斑马线
|
||
|
|
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||
|
|
background-color: #0d214580;
|
||
|
|
}
|
||
|
|
// 分页背景
|
||
|
|
::v-deep .pagination-container {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
// 分页-按钮-选中
|
||
|
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||
|
|
background-color: #3165d6;
|
||
|
|
}
|
||
|
|
// 分页-按钮-未选中
|
||
|
|
::v-deep .el-pagination.is-background .el-pager li {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
}
|
||
|
|
// 分页-上一页
|
||
|
|
::v-deep .el-pagination.is-background .btn-prev {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
}
|
||
|
|
// 分页-下一页
|
||
|
|
::v-deep .el-pagination.is-background .btn-next {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
// --
|
||
|
|
.btn {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
// 选中颜色
|
||
|
|
&:hover {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
}
|
||
|
|
// 点击颜色
|
||
|
|
&:active {
|
||
|
|
background-color: rgba(16, 37, 81, 0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.table-container {
|
||
|
|
color: #fff;
|
||
|
|
background-color: #04112a80;
|
||
|
|
//#071934
|
||
|
|
/* background: url('../../img/tableTr.png') no-repeat center center;
|
||
|
|
background-size: 100% 100%; */
|
||
|
|
}
|
||
|
|
.dlg-box {
|
||
|
|
position: absolute;
|
||
|
|
.close-btn {
|
||
|
|
width: 39px;
|
||
|
|
height: 39px;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
background-image: url('../../img/close.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.dlg-title {
|
||
|
|
margin-top: -25px;
|
||
|
|
margin-bottom: 45px;
|
||
|
|
font-size: 21px;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|