<template>
<el-container style="height: calc(100% - 45px)">
<el-header height="auto">
<!-- <el-tabs v-model="tabActive" @tab-click="searchMain">
<template v-for="(tab,index) in optionConfig.orderOutTab">
<el-tab-pane v-if="tab.show"
:label="tab.value"
:name="tab.key"></el-tab-pane>
</template>
</el-tabs> -->
<div v-show="ShowSearch" style="padding-bottom: 5px">
<el-form size="mini" :model="SearchFormData" label-width="90px" @submit.native.prevent>
<el-row>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="设备编号" style="margin-bottom: 0">
<el-input v-model="SearchFormData.F_DeviceNo" size="mini" clearable @keyup.enter.native="reGetWaitTableData"></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="设备名称" style="margin-bottom: 0">
<el-input v-model="SearchFormData.F_DeviceName" size="mini" clearable @keyup.enter.native="reGetWaitTableData"></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="设备型号" style="margin-bottom: 0">
<el-input v-model="SearchFormData.F_DeviceModel" size="mini" clearable @keyup.enter.native="reGetWaitTableData"></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="保管人" style="margin-bottom: 0">
<el-input v-model="SearchFormData.F_MasterEmpName" size="mini" clearable @keyup.enter.native="reGetWaitTableData"></el-input>
</el-form-item>
</el-col>
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
<el-form-item label="校准日期" style="margin-bottom: 0">
<el-date-picker v-model="date"
type="daterange"
value-format="yyyy-MM-dd"
@change="DateInterval(date)"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" :offset="16" style="text-align:right">
<el-button type="primary" size="mini" @click="reGetWaitTableData">搜索</el-button>
<el-button type="default" size="mini" icon="el-icon-refresh-left" @click="ResetSearchData">重置</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div style="display: flex; justify-content: flex-end; align-items: flex-start;margin: 5px 0">
<el-button type="success" icon="el-icon-plus" @click.native.stop="add" size="mini">新增</el-button>
<el-button type="primary" icon="el-icon-edit" @click.native.stop="edit" size="mini">编辑</el-button>
<el-button type="success" icon="el-icon-copy-document" @click.native.stop="document" size="mini">从老系统同步</el-button>
<el-button type="primary" icon="el-icon-edit" @click.native.stop="CalibrationUpload" size="mini">上传校准证书</el-button>
<el-button type="danger" icon="el-icon-delete" @click.native.stop="deleteEquipment" size="mini">删除</el-button>
@*<el-button type="text" size="small" @click.native.stop="showWaitSearch">{{ waitSearchLabel }}</el-button>*@
</div>
</el-header>
<el-main v-loading="loadingConfig.loadingArea.mainList"
:style="{height: ShowSearch?'calc(100% - 130px)':'calc(100% - 80px)'}"
:element-loading-text="loadingConfig.loadingTxt">
<el-table :data="tableConfig.tableData.localAllData"
size="mini"
border
height="100%"
ref="main_tb"
highlight-current-row
@row-click="handleRowClick">
@*<el-table-column type="selection" width="40" align="center"></el-table-column>*@
<template v-for="(cell,index) in tableConfig.tableCell.main">
<el-table-column v-if="cell.prop === 'F_FilePath'" :sortable="cell.sortable" :property="cell.F_TestMasterName" :label="cell.label" :min-width="cell.width" :fixed="cell.fixed" show-overflow-tooltip>
<template #header="{ scope }">
<span style="float:left;margin-left:10px">附件</span>
<el-tooltip effect="dark" content="设置显示列" placement="top">
<span style="margin-left:5px;font-size:20px;" class="el-icon-setting"
@click="mainTableColumnSetClick"></span>
</el-tooltip>
</template>
<template slot-scope="scope">
<el-button type="success" icon="el-icon-download" @click="download_FilePath(scope.row.F_FilePath)" size="mini">下载</el-button>
</template>
</el-table-column>
<el-table-column v-else-if="cell.show"
:label="cell.label"
:sortable="cell.sortable"
:property="cell.prop"
:min-width="cell.width"
:fixed="cell.fixed"
:show="cell.show"
show-overflow-tooltip
:key="index"
:formatter="cell.formatter ? tableFormatter()[cell.prop] : null">
</el-table-column>
</template>
</el-table>
</el-main>
<el-footer height="45px">
<el-pagination @size-change="pageSizeChange"
@current-change="pageCurrentChange"
:current-page="pageConfig.mainPageData.page"
:page-sizes="[15, 20, 30, 40, 50,100,200,500]"
:page-size="pageConfig.mainPageData.rows"
:total="pageConfig.mainPageData.records"
layout="total, prev, pager, next,sizes"
background
style="margin:6px 10px;float:right">
</el-pagination>
</el-footer>
</el-container>
<template>
<el-dialog width="900px"
:visible.sync="mainTableColumnConfig.modalShow"
:close-on-press-escape="false"
:close-on-click-modal="false"
@opened="mainTableColumnSetModalOpen"
top="8vh">
<template #title>
<span :style="{ fontSize:'16px',fontWeight:'400',color:'rgba(0,0,0,.6)'}">设置表格显示列</span>
</template>
<div class="column-config_container" :style="{ margin:'-20px 0'}">
<template v-for="(column,index) in mainTableColumnConfig.columns">
<el-checkbox v-model="column.show"
border
:key="index"
:label="column.label"
:style="{ width:'calc(20% - 20px)',margin:'5px 20px 0 0' }"
:data-index="index"></el-checkbox>
</template>
</div>
<template #footer>
<el-button-group>
<el-button size="small" @click="mainTableColumnReduction">还原默认</el-button>
<el-button size="small" type="primary" @click="mainTableColumnSetEvent">确 定</el-button>
</el-button-group>
</template>
</el-dialog>
</template>
</template>
<script>
export default {
data: function () {
return {
Priority: [],//优先级数组
textarea2: null,
ReasonForReturn: false,
//是否显示搜索面板
ShowSearch: true,
//搜索数据
SearchFormData: {
F_DeviceNo: null,//设备编号
F_DeviceName: null,//设备名称
F_DeviceModel: null,//设备型号
F_MasterEmpName: null,//保管人
StartTime: null,
EndTime:null,
},
date:[],
tabActive: "1",
SelectTestOutNo: '',
showDetail: false,
expands: [],
loadingConfig: {
loadingTxt: '加载中',
loadingArea: {
fullPage: false,
mainList: false
}
},
tableConfig: {
tableData: {
selectSingleRow: {},
selectRows: [],
localAllData: [],
detailTable: []
},
tableCell: {
main: [
{ label: '附件', prop: "F_FilePath", show: true, showTooltip: true, sortable: false, width: '100', fixed:true },
{ label: '设备状态', prop: 'F_DeviceStatusName', show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '设备编号', prop: "F_DeviceNo", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '设备名称', prop: "F_DeviceName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '型号规格', prop: "F_DeviceModel", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '检测范围', prop: "F_DetectionExplain", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '不确定度或准确度或最大允许误差', prop: "F_LimitRanfge", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '出厂编号', prop: "F_SerialNo", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '使用部门', prop: "F_DepartmentName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '存放地点', prop: "F_Location", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '保管人', prop: "F_MasterEmpNo", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '校准单位', prop: "F_CorrectSupplierNo", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: "校准周期", prop: "F_CorrectCycle", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '上次校准日期', prop: "F_PreCorrectCycle", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '下次校准日期', prop: "F_NextCorrectCycle", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '校准参数', prop: "F_DeviceParams", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '本年度是否计量', prop: "F_IsMeasure", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '证书编号', prop: "F_CertiCode", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '生产厂商', prop: "F_MakeCompany", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '生产国别', prop: "F_MakeCountry", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '购置日期', prop: "F_BuyTime", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '经费说明', prop: "F_FundsNote", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '资产价值', prop: "F_Price", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '档案编号', prop: "F_FileNO", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '供应商', prop: "F_SupplierName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '外部设备', prop: "F_SupplierName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '添加人', prop: "F_CreateUserName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '添加时间', prop: "F_ModifyUserName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '修改人', prop: "F_ModifyUserName", show: true, showTooltip: true, sortable: true, width: '100' },
{ label: '修改时间', prop: "F_ModifyDate", show: true, showTooltip: true, sortable: true, width: '100' }
],
}
},
pageConfig: {
mainPageData: {
rows: '15',
page: '1',
records: '5',
mainId: "F_OrderId",
sidx: "F_CreateDate",
sord: "desc",
total: '1'
}
},
modalConfig: {
orderOutManager: {
modalShow: false,
modalAddShow: false
}
},
apiUrlConfig: {
getList: '/OA/BaseDevice/GetPageList',
},
//加入以后这里需要tab栏，直接把这个放出来
optionConfig: {
orderOutTab: [
{ key: "1", value: '设备管理', show: true },
]
},
mainTableColumnConfig: {
modalShow: false,
dropCell: null,
columns: []
},
}
},
computed: {
waitSearchImgSrc: function () {
return this.ShowSearch ? '/Content/images/no-search.png' : '/Content/images/search.png'
},
waitSearchLabel: function () {
return this.ShowSearch ? '收起搜索' : '条件搜索'
}
},
created() {
this.initData()
},
mounted() {
this.searchMain();
},
methods: function () {
return {
//上传校准证书
CalibrationUpload() {
console.log('选中的', this.tableConfig.tableData.selectRows)
var keyValue = this.tableConfig.tableData.selectRows.F_DeviceId
if (UtSoft.checkrow(keyValue)) {
top.DeviceId = this.tableConfig.tableData.selectRows.F_DeviceId
UtSoft.layerForm({
id: 'calibrationUpload',
title: '校准证书',
url: top.$.rootUrl + '/OA/BaseDevice/CalibrationUpload',
width: 900,
height: 800,
maxmin: true,
callBack: function (id) {
return top[id].acceptClick(function (data) {
that.ResetSearchData()
});
}
});
}
},
// 日期的赋值
DateInterval(a) {
console.log('a', a)
this.SearchFormData.StartTime = a[0]
this.SearchFormData.EndTime = a[1]
},
//附件下载
download_FilePath(a) {
UtSoft.layerForm({
id: a,
title: "附件查看下载",
url: top.$.rootUrl + '/LR_SystemModule/Annexes/DownForm?keyValue=' + a,
width: 600,
height: 400,
maxmin: true,
btn: null
});
},
//新增
add() {
let that = this
UtSoft.layerForm({
id: 'form_add',
title: '设备新增',
url: top.$.rootUrl + '/OA/BaseDevice/Form',
width: 900,
height: 800,
maxmin: true,
callBack: function (id) {
return top[id].acceptClick(function (data) {
that.ResetSearchData()
});
}
});
},
//编辑
edit() {
let that = this
var keyValue = this.tableConfig.tableData.selectRows.F_DeviceId
if (UtSoft.checkrow(keyValue)) {
UtSoft.layerForm({
id: 'form_edit',
title: '设备编辑',
url: top.$.rootUrl + '/OA/BaseDevice/Form?keyValue=' + keyValue,
width: 900,
height: 800,
maxmin: true,
callBack: function (id) {
return top[id].acceptClick(function (data) {
that.ResetSearchData()
});
}
});
}
},
//删除
deleteEquipment() {
let that = this
var keyValue = this.tableConfig.tableData.selectRows.F_DeviceId
if (UtSoft.checkrow(keyValue) && keyValue.length < 38) {
UtSoft.layerConfirm('是否确认删除该项！', function (res) {
if (res) {
UtSoft.deleteForm(top.$.rootUrl + '/OA/BaseDevice/DeleteForm', { keyValue: keyValue }, function () {
that.ResetSearchData()
});
}
});
}
},
//从老系统同步
document() {
let that = this
UtSoft.layerConfirm('确认同步吗？', function (res) {
if (res) {
UtSoft.postForm(top.$.rootUrl + '/OA/BaseDevice/ImportOldSystem', {}, function () {
that.ResetSearchData()
});
}
});
},
///获取数据
getList() {
this.tableConfig.tableData.selectRows = Object.create(null);
let params = {
pagination: JSON.stringify(this.pageConfig.mainPageData),
queryJson: JSON.stringify(this.SearchFormData)
}
this.loadingConfig.loadingArea.mainList = true;
UtSoft.httpAsync('GET', this.apiUrlConfig.getList, params, (data) => {
this.loadingConfig.loadingArea.mainList = false;
if (data) {
//console.log('这个是设备管理的返回数据', data)
this.tableConfig.tableData.localAllData = data.rows;
this.pageConfig.mainPageData.records = data.records;
this.pageConfig.mainPageData.total = data.total;
this.pageConfig.mainPageData.page = data.page;
} else {
this.$notify.error({ title: '错误', message: '获取数据出错,请联系管理员处理' });
}
});
},
///查询页面列表数据,选项卡切换时
searchMain() {
this.pageConfig.mainPageData.records = 0;
this.pageConfig.mainPageData.total = 0;
this.pageConfig.mainPageData.page = 1;
this.pageConfig.mainPageData.rows = 15;
this.getList();
},
//搜索条件显示隐藏
showWaitSearch() {
this.ShowSearch = !this.ShowSearch
},
//搜索
reGetWaitTableData() {
this.pageConfig.mainPageData.page = 1;
this.getList();
},
//重置搜索
ResetSearchData() {
this.SearchFormData = {
F_DeviceNo: null,//设备编号
F_DeviceName: null,//设备名称
F_DeviceModel: null,//设备型号
F_MasterEmpName: null,//保管人
StartTime: null,
EndTime: null,
}
this.date.length = 0
this.date=[]
this.pageConfig.mainPageData.records = 0;
this.pageConfig.mainPageData.total = 0;
this.pageConfig.mainPageData.page = 1;
this.pageConfig.mainPageData.rows = 15;
this.getList();
},
///页大小变化事件
pageSizeChange(limit) {
this.pageConfig.mainPageData.rows = limit;
this.getList();
},
///页码变化事件
pageCurrentChange(offset) {
this.pageConfig.mainPageData.page = offset;
this.getList();
},
///表格值格式化
tableFormatter: function () {
const $vue = this;
return {
F_Priority(row) {
switch (row.F_Priority) {
case 20:
return "一般";
case 10:
return "紧急";
case 0:
return "特急"
}
},
}
},
///表格勾选事件触发 这个是用于多选的，但是目前这个里面没有就隐藏了 @@selection-change="mainSelectionChange"
mainSelectionChange(selection) {
this.tableConfig.tableData.selectRows = JSON.parse(JSON.stringify(selection));
},
//单行点击
handleRowClick(row) {
this.tableConfig.tableData.selectRows = row
//console.log(row, '这个是单行点击事件', this.tableConfig.tableData.selectRows.F_DeviceId.length,this.tableConfig.tableData.selectRows)
},
//刷新
reData() {
this.getList();
},
//初始化列表
initData() {
const localMainTableColumnConfig = this.mainTableColumnConfig_initData().get();
if (localMainTableColumnConfig) {
this.tableConfig.tableColumn = localMainTableColumnConfig;
}
},
/**
* 表格列显示设置点击事件
* */
mainTableColumnSetClick() {
this.mainTableColumnConfig.columns = JSON.parse(JSON.stringify(this.tableConfig.tableCell.main));
this.mainTableColumnConfig.modalShow = true;
},
/**
* 表格列显示设置modal显示open回调
* */
mainTableColumnSetModalOpen() {
this.$nextTick(() => {
const checkBoxs = document.querySelector('.column-config_container');
// Sortable 是 Sortable.js库，需要单独下载
this.mainTableColumnConfig.dropCell = Sortable.create(checkBoxs, {
animation: 180,
delay: 0
})
})
},
/**
* 表格列显示还原默认
* */
mainTableColumnReduction() {
localStorage.removeItem("EquipmentMeasurement");
this.mainTableColumnConfig.modalShow = false;
location.reload();
},
/**
* 表格列显示设置提交
* */
mainTableColumnSetEvent() {
let setColumns = [];
const checkBoxs = document.querySelectorAll('.column-config_container .el-checkbox');
for (let nodeIndex = 0; nodeIndex < checkBoxs.length; nodeIndex++) {
const itemCheckIndex = parseInt(checkBoxs[nodeIndex].dataset.index);
setColumns.push(this.mainTableColumnConfig.columns[itemCheckIndex]);
}
this.mainTableColumnConfig.columns = [];
this.tableConfig.tableCell.main = setColumns;
this.mainTableColumnConfig_initData().set(this.tableConfig.tableCell.main);
this.mainTableColumnConfig.modalShow = false;
this.$nextTick(() => {
this.$refs.main_tb.doLayout();
})
},
///主表表格列显示设置
mainTableColumnConfig_initData() {
const keyName = 'EquipmentMeasurement';
return {
get() {
return !!localStorage[keyName] ? JSON.parse(localStorage[keyName]) : null;
},
set(columnConfig) {
// 往本地存储
localStorage.setItem(keyName, JSON.stringify(columnConfig));
}
}
},
}
}()
}
</script>
<style>
.el-main, .el-header, .el-footer, .el-dialog__body, .el-card__header {
padding: 0;
}
.el-table--mini .el-checkbox {
margin: 0;
}
#EquipmentManagement {
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 10px 10px;
background-color: #FFFFFF;
}
.row-expand-unhas .el-table__expand-column {
pointer-events: none;
}
.row-expand-unhas .el-table__expand-column .el-icon {
visibility: hidden;
}
</style>
04-12
926
926
05-25
1063
1063
11-11
1万+
1万+
04-12
200
200
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
