|
|
<template> <div class="mod-config">
<el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()"> <el-form-item :label="'点检模板编码'"> <el-input v-model="searchData.codeNo" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'点检模板名称'"> <el-input v-model="searchData.codeDesc" style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'在用'"> <el-select filterable v-model="searchData.active" style="width: 130px"> <el-option label="全部" value=""></el-option> <el-option label="是" value="Y"></el-option> <el-option label="否" value="N"></el-option> </el-select> </el-form-item> <el-form-item :label="' '"> <el-button @click="getDataList()">查询</el-button> <el-button type="primary" @click="addModal()">新增</el-button> <!-- <el-button type="danger" @click="deleteCode()" :disabled="dataListSelections.length <= 0">批量删除</el-button>--> </el-form-item> </el-form> <el-table :height="height" :data="dataList" border v-loading="dataListLoading"
style="width: 100%;">
<el-table-column v-for="(item,index) in columnList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> <template slot-scope="scope"> <a type="text" size="small" @click="updateModal(scope.row)">修改</a> <a type="text" size="small" @click="deletePropertiesModel(scope.row)">删除</a> </template> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 1000]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> <el-dialog title="点检模板" :close-on-click-modal="false" v-drag :visible.sync="modalFlag" width="430px"> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="点检模板编码:"> <el-input v-model="modalData.codeNo" :disabled="modalDisableFlag" style="width: 120px"></el-input> </el-form-item> <el-form-item label="点检模板名称:"> <el-input v-model="modalData.codeDesc" style="width: 120px"></el-input> </el-form-item> <el-form-item label="是否在用:"> <el-select filterable v-model="modalData.active" style="width: 120px"> <el-option label="是" value="Y"></el-option> <el-option label="否" value="N"></el-option> </el-select> </el-form-item> </el-form> <el-footer style="height:40px;margin-top: 10px;text-align:center"> <el-button type="primary" @click="saveData()">保存</el-button> <el-button type="primary" @click="modalFlag = false">关闭</el-button> </el-footer> </el-dialog>
<el-dialog title="点检项目清单" :close-on-click-modal="false" v-drag :visible.sync="detailModelFlag" width="430px"> <el-table :height="300" :data="detailList" border v-loading="dataListLoading"
style="width: 100%;"> <el-table-column v-for="(item,index) in columnDetailList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="160" label="操作"> <template slot-scope="scope"> <a type="text" size="small" v-if="scope.row.valueChooseFlag=='Y'" @click="chooseModal(scope.row)">可选值</a> </template> </el-table-column> </el-table> <el-footer style="height:40px;margin-top: 20px;text-align:center"> <el-button type="primary" @click="detailModelFlag = false">关闭</el-button> </el-footer> </el-dialog>
<el-dialog title="可选值" :close-on-click-modal="false" v-drag :visible.sync="chooseModalFlag" width="430px"> <el-form :inline="true" label-position="top" style="margin-left: 7px;margin-top: -5px;"> <el-form-item label="点检项目名称:"> <el-input v-model="chooseModalData.itemDesc" disabled style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'检测值类型'"> <el-select filterable v-model="chooseModalData.valueTypeDb" disabled style="width: 120px"> <el-option label="文本" value="T"></el-option> <el-option label="数字" value="N"></el-option> </el-select> </el-form-item> </el-form> <el-table :height="300" :data="chooseTableData" border style="width: 100%"> <el-table-column prop="availableValue" header-align="center" align="left" min-width="200" label="属性值"> </el-table-column> </el-table> </el-dialog> </div></template>
<script> import { eamPropertiesModelSearch, eamPropertiesModelSave, eamPropertiesModelEdit, eamPropertiesModelDelete, searchItemAvailable, } from "@/api/eam/eam.js" export default {
data () { return {
searchData: { codeNo: '', codeDesc: '', active:'Y', functionType:'A', page: 1, limit: 10, }, height: 200, pageIndex: 1, pageSize: 100, totalPage: 0,
modalFlag:false, modalDisableFlag:false, modalData:{ flag:'', codeNo:'', codeDesc:'', active:'', functionType:'A', userId:this.$store.state.user.name },
columnList: [ { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009TableCodeNo', tableId: "101009Table", tableName: "点检模板表", columnProp: 'codeNo', headerAlign: "center", align: "left", columnLabel: '点检模板编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009TableCodeDesc', tableId: "101009Table", tableName: "点检模板表", columnProp: 'codeDesc', headerAlign: "center", align: "left", columnLabel: '点检模板名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 140, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009TableActive', tableId: "101009Table", tableName: "点检模板表", columnProp: 'active', headerAlign: "center", align: "left", columnLabel: '在用', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 40, }, ], detailModelFlag:false, detailList: [], chooseTableData:[], dataListLoading: false, dataListSelections: [],
// modalDisableFlag:false,
chooseModalFlag:false, itemFlag:'text', itemData:{ itemNo:'', valueNo:'', availableValue:'', itemType:'A', createdBy: this.$store.state.user.name }, dataList:[],
departmentList:[], // 展示列集
columnDetailList: [ { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2EamPropertiesItemID', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'itemNo', headerAlign: "center", align: "left", columnLabel: '点检项目编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2EamPropertiesItemDesc', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'itemDesc', headerAlign: "center", align: "left", columnLabel: '点检项目名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 140, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2EamPropertiesItemRemark', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'itemRemark', headerAlign: "center", align: "left", columnLabel: '点检方法说明', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 140, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2ValueType', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'valueType', headerAlign: "center", align: "left", columnLabel: '检测值类型', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2DefaultValue', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'defaultValue', headerAlign: "center", align: "left", columnLabel: '参照值', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2MaxValue', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'maxValue', headerAlign: "center", align: "left", columnLabel: '最大值', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { userId: this.$store.state.user.name, functionId: 101009, serialNumber: '101009Table2MinValue', tableId: "101009Table2", tableName: "点检项目表", columnProp: 'minValue', headerAlign: "center", align: "left", columnLabel: '最小值', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, ], levelList:[], chooseModalData:{ itemNo: '', itemDesc: '', itemType:'A', valueTypeDb:'', }, } }, mounted () { this.$nextTick(() => { this.height = window.innerHeight - 210 }) }, created () { this.getDataList(); }, methods: { // 获取数据列表
getDataList () { this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex eamPropertiesModelSearch(this.searchData).then(({data}) => { if (data.code == 0) { this.dataList = data.page.list this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount } this.dataListLoading = false }) }, // 每页数
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页
currentChangeHandle (val) { this.pageIndex = val this.getDataList() }, addModal(){ this.modalData={ flag:'1', codeNo:'', codeDesc:'', active:'Y', functionType:'A', userId:this.$store.state.user.name }; this.modalDisableFlag=false; this.modalFlag=true; }, updateModal(row){ this.modalData={ flag:'2', codeNo:row.codeNo, codeDesc:row.codeDesc, active:row.active, functionType:'A', userId:this.$store.state.user.name }; this.modalDisableFlag=true; this.modalFlag=true; }, // 删除
deletePropertiesModel (row) { this.$confirm(`是否删除这个点检模板?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
}).then(() => { eamPropertiesModelDelete(row).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }).catch(() => { }) }, saveData(){ if (this.modalData.codeNo == '' || this.modalData.codeNo == null) { this.$alert('请输入点检模板编码！', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.codeDesc == '' || this.modalData.codeDesc == null) { this.$alert('请输入点检模板名称！', '错误', { confirmButtonText: '确定' }) return false } if (this.modalData.active == '' || this.modalData.active == null) { this.$alert('选择是否在用！', '错误', { confirmButtonText: '确定' }) return false } if(this.modalData.flag=='1'){ eamPropertiesModelSave(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.modalFlag=false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) }else { eamPropertiesModelEdit(this.modalData).then(({data}) => { if (data && data.code === 0) { this.getDataList() this.modalFlag=false this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { } }) } else { this.$alert(data.msg, '错误', { confirmButtonText: '确定' }) } }) } },
chooseModal(row){ this.chooseModalData.itemNo=row.itemNo; this.chooseModalData.itemDesc=row.itemDesc; this.chooseModalData.valueTypeDb=row.valueTypeDb; searchItemAvailable(this.chooseModalData).then(({data}) => { this.chooseTableData = data.rows }) this.chooseModalFlag=true; },
} }</script>
|
