<template>
|
<div>
|
<div class="param-basic">
|
<el-form style="width:100%;margin-top: 20px;" class="l-mes" :inline="true" :model="searchForm">
|
<el-row>
|
<el-col :span="4">
|
<el-form-item label="参数项:">
|
<el-input clearable style="width:200px" v-model="searchForm.param" placeholder="参数项"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="参数编号:">
|
<el-input clearable style="width:200px" v-model="searchForm.code" placeholder="参数编号"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item class="btn-group">
|
<el-button type="" @click="onSearch">查询</el-button>
|
<el-button type="primary" @click="addOrUpdateHandle">新增</el-button>
|
<el-button @click="showImportDialog">导入</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<basic-container>
|
<avue-crud :data="tableData"
|
ref="crud"
|
:option="option"
|
:span-method="spanMethod"
|
@refresh-change="getData"
|
:page="page"
|
:table-loading="loading"
|
@row-update="updateParam"
|
@row-del="delParam">
|
<template #menu="{row,index}">
|
<el-button type="text" icon="el-icon-edit" size="small" @click="showEdit(row,index)">编辑</el-button>
|
<el-button type="text" icon="el-icon-delete" size="small" @click="showDel(row,index)">删除</el-button>
|
</template>
|
<template slot-scope="scope" slot="paramTypeForm">
|
<el-select v-model="scope.row.paramType" @change="changeType(scope.row)"
|
filterable placeholder="请选择参数类型" :disabled="formDisabled">
|
<el-option v-for="(item,index) in typeOptions"
|
:key="index" :label="item.label" :value="item.value"/>
|
</el-select>
|
</template>
|
<template slot="paramFormatLabel" slot-scope="scope">
|
<span v-if="scope.row.paramType!='2'">参数格式</span>
|
<span v-else>数据字典</span>
|
</template>
|
<template slot-scope="scope" slot="paramFormatForm">
|
<el-input v-if="scope.row.paramType!='2'" v-model="scope.row.paramFormat"
|
placeholder="请输入参数格式" :disabled="formDisabled"/>
|
<el-select v-else v-model="scope.row.paramFormat" filterable
|
placeholder="请选择数据字典" :disabled="formDisabled">
|
<el-option v-for="(item,index) in dictOptions"
|
:key="index" :label="item.description" :value="item.type"/>
|
</el-select>
|
</template>
|
</avue-crud>
|
</basic-container>
|
<!-- 弹窗, 新增 / 修改 -->
|
<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getData"></table-form>
|
<el-dialog
|
title="导入"
|
:visible.sync="importDialog"
|
width="22%">
|
<el-upload ref="upload" style="width:100%;" class="upload-demo" drag action="#"
|
:multiple="false" :file-list="fileList" :auto-upload="false" show-file-list
|
:on-change="handleUpload">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">
|
只能上传xls/xlsx文件，且不超过10MB
|
<el-button type="text" style="font-size:15px;text-decoration: underline;"
|
@click="downloadTemplate">下载模板</el-button>
|
</div>
|
</el-upload>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="importDialog = false">取 消</el-button>
|
<el-button type="primary" @click="confirmImport()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { fetchList, delObj,putObj,uploadParam } from '@/api/basic/param'
|
import { uploadTemplate } from '@/api/basic/template'
|
import TableForm from './param-form'
|
import { mapGetters } from 'vuex'
|
import { remote,fetchList as fetchDictList } from '@/api/admin/dict'
|
export default {
|
data() {
|
return {
|
fileList: [],
|
importDialog: false,
|
formDisabled: false,
|
dictOptions: [],
|
typeOptions: [],
|
searchForm: {
|
param: null,
|
code: null
|
},
|
loading: true,
|
page:{
|
total: 10,
|
currentPage: 1,
|
pageSize: 10
|
},
|
tableData: [],
|
option: {
|
height: 585,
|
columnBtn: false,
|
index: true,
|
indexLabel: '序号',
|
menuAlign: 'center',
|
editBtn: false,
|
delBtn: false,
|
addBtn: false,
|
border: true,
|
align: 'center',
|
column: [
|
{
|
label: '参数编号',
|
prop: 'code',
|
disabled: true
|
},
|
{
|
label: '参数项',
|
prop: 'paramItem',
|
disabled: true
|
},
|
{
|
label: '二级参数',
|
prop: 'paramItemTwo',
|
disabled: true
|
},
|
{
|
label: '三级参数',
|
prop: 'paramItemThree',
|
disabled: true
|
},
|
{
|
label: '参数类型',
|
prop: 'paramType',
|
formslot: true,
|
rules:[{
|
required: true,
|
message: "请选择参数类型",
|
trigger: "change"
|
}]
|
},
|
{
|
label: '参数格式',
|
prop: 'paramFormat',
|
formslot: true,
|
labelslot: true
|
}, {
|
label: '单位',
|
prop: 'unit',
|
rules:[{
|
required: true,
|
message: "单位不能为空",
|
trigger: "blur"
|
}]
|
},
|
]
|
},
|
spanArr: [{
|
prop: 'code',
|
span: []
|
},{
|
prop: 'paramItem',
|
span: []
|
}, {
|
prop: 'paramItemTwo',
|
span: []
|
}],
|
addOrUpdateVisible: false
|
}
|
},
|
components: {
|
TableForm
|
},
|
computed: {
|
...mapGetters(['permissions'])
|
},
|
created() {
|
this.getData()
|
this.getParamType()
|
},
|
beforeUpdate(){
|
console.log("updated");
|
this.rowSort()
|
this.rowCalc()
|
this.loading = false
|
},
|
watch:{ },
|
methods: {
|
//下载模板
|
downloadTemplate() {
|
uploadTemplate('param').then((response) => {
|
const blob = new Blob([response.data], {
|
type: 'application/force-download'
|
})
|
const filename = decodeURI('参数模板.xlsx')
|
// 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
|
const elink = document.createElement('a')
|
elink.download = filename
|
elink.style.display = 'none'
|
elink.href = URL.createObjectURL(blob)
|
document.body.appendChild(elink)
|
elink.click()
|
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
document.body.removeChild(elink)
|
})
|
},
|
// 文件上传
|
handleUpload(file, fileList) {
|
const maxSize = 10 * 1024 * 1024 * 1024;//10MB
|
const xlsType = "application/vnd.ms-excel";
|
const xlsxType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
if(file.raw.type != xlsType && file.raw.type != xlsxType){
|
this.$message.warning("导入文件格式不符！");
|
fileList.pop()
|
return;
|
}
|
if(Number.parseInt(file.size) > maxSize){
|
this.$message.warning("导入文件过大！");
|
fileList.pop()
|
return;
|
}
|
if(fileList.length > 1){
|
this.$message.warning("只能导入单个文件!")
|
fileList.pop()
|
}
|
this.fileList = fileList;
|
// this.importFile = file;
|
},
|
showImportDialog(){
|
this.importDialog = true
|
},
|
//确定导入
|
confirmImport(){
|
console.log(this.fileList)
|
const fileData = new FormData();
|
fileData.append('file', this.fileList[0].raw);
|
uploadParam(fileData).then((res)=>{
|
console.log(res);
|
// this.exportLoading = false;
|
}).catch()
|
},
|
// 修改参数类型
|
changeType(row) {
|
if (row.paramType === '1') {
|
row.paramFormat = '#.0000'
|
} else if(row.paramType === '2'){
|
this.getDictOptions()
|
}else {
|
row.paramFormat = ''
|
}
|
},
|
// 获取所有字典
|
getDictOptions() {
|
fetchDictList(
|
Object.assign({
|
current: 1,
|
size: 9999
|
})
|
).then((response) => {
|
if (response.data.code === 0) {
|
this.dictOptions = response.data.data.records
|
}
|
})
|
},
|
showEdit(row,index){
|
this.option.column.forEach(item=>{
|
if(row.paramItemThree=="" && item.prop=='paramItemThree'){
|
item.display = false
|
}
|
if(row.paramItemTwo=="" && item.prop=='paramItemTwo'){
|
item.display = false
|
}
|
})
|
this.$refs.crud.rowEdit(row,index)
|
},
|
showDel(row,index){
|
this.$refs.crud.rowDel(row,index)
|
},
|
updateParam(row,index,done,loading){
|
// this.formDisabled = true
|
let data = {
|
dict: '',
|
id: 0,
|
parameterFormat: '',
|
parameterItem: '',
|
type: row.paramType,
|
unit: row.unit,
|
}
|
row.paramType=='2' ? data.dict=row.paramFormat : data.parameterFormat=row.paramFormat
|
if(row.threeId){
|
data.id = row.threeId
|
data.parameterItem = row.paramItemThree
|
}else{
|
if(row.twoId){
|
data.id = row.twoId
|
data.parameterItem = row.paramItemTwo
|
}else{
|
data.id = row.oneId
|
data.parameterItem = row.paramItem
|
}
|
}
|
console.log(data)
|
putObj(data).then(res=>{
|
if(res.data.data.code==0){
|
this.$message.success("更新成功")
|
}else{
|
this.$message.error(res.data.data.msg)
|
}
|
this.getData()
|
done(row)
|
}).catch(error=>{
|
console.log(error)
|
})
|
},
|
delParam(row){
|
let id;
|
if(row.threeId){
|
id = row.threeId
|
}else{
|
if(row.twoId){
|
id = row.twoId
|
}else{
|
id = row.oneId
|
}
|
}
|
this.$confirm('是否确认删除编号为【' + row.code+'】的数据?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delObj(id).then(res=>{
|
if(res.data.code==0){
|
this.$message.success("删除成功")
|
}else{
|
this.$message.error("删除失败")
|
}
|
this.getData()
|
})
|
}).catch(() => {});
|
},
|
// 获取工序参数类型
|
getParamType() {
|
remote('technology_param').then((response) => {
|
if (response.data.code === 0) {
|
this.typeOptions = response.data.data
|
this.optionType = response.data.data
|
}
|
})
|
},
|
onSearch() {
|
this.getData()
|
},
|
// 新增 / 修改
|
addOrUpdateHandle(row) {
|
this.addOrUpdateVisible = true
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(row == null ? null : row.id)
|
})
|
},
|
// 获取数据列表
|
getData() {
|
this.loading = true
|
let param = {
|
code: this.searchForm.code,
|
size: 20,
|
current: 1,
|
parameterItem: this.searchForm.param
|
}
|
fetchList(param).then((res) => {
|
this.tableData = res.data.data.records
|
this.page.total = res.data.data.total
|
this.page.currentPage = res.data.data.records.pages
|
})
|
},
|
//动态合并方法
|
rowCalc () {
|
this.spanArr.forEach((ele, index) => {
|
let parent
|
if (index !== 0) parent = this.spanArr[ele.parent || index - 1].span
|
ele.span = this.rowSpan(ele.prop, parent)
|
})
|
},
|
rowSort (list) {
|
let propList = this.spanArr.map(ele => ele.prop)
|
this.spanArr.forEach((ele, index) => {
|
let key = ele.prop
|
this.tableData = this.tableData.sort((a, b) => {
|
let flag = true;
|
for (let i = 0; i < index; i++) {
|
let prop = this.spanArr[i].prop
|
flag = flag && a[prop] == b[prop]
|
}
|
if (flag) {
|
if (a[key] < b[key]) { return 1; }
|
else if (a[key] > b[key]) { return -1; }
|
return 0;
|
}
|
return 0;
|
})
|
})
|
},
|
rowSpan (key, parent) {
|
let list = [];
|
let position = 0;
|
this.tableData.forEach((item, index) => {
|
if (index === 0) {
|
list.push(1)
|
let position = 0;
|
} else {
|
if (this.tableData[index][key] === this.tableData[index - 1][key]) {
|
if (parent && parent[index] !== 0) {
|
list.push(1)
|
position = index
|
} else {
|
list[position] += 1;
|
list.push(0)
|
}
|
} else {
|
list.push(1)
|
position = index
|
}
|
}
|
})
|
return list
|
},
|
spanMethod ({ row, column, rowIndex, columnIndex }) {
|
for (let i = 0; i < this.spanArr.length; i++) {
|
const ele = this.spanArr[i]
|
if (column.property == ele.prop) {
|
const _row = ele.span[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col
|
}
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.grid-header {
|
display: none;
|
}
|
.param-basic {
|
margin: 0 10px;
|
border-radius: 0px;
|
background-color: #fff;
|
height: 100px;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 20px;
|
border: 1px solid #ddd;
|
box-sizing: border-box;
|
}
|
|
.btn-group .el-button,
|
.btn-custom .el-button {
|
border-radius: 0;
|
padding: 9px 30px;
|
}
|
|
.btn-group .el-dropdown .el-button {
|
border-radius: 0;
|
padding: 9px 20px;
|
}
|
|
/*自定义disabled状态下checkbox的样式*/
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
+ span.el-checkbox__label {
|
color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
.el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
+ span.el-checkbox__label {
|
color: #606266;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
|
.structure-detail-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.structure-detail-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.final-product-checkout .el-card__header {
|
padding: 0px 20px;
|
border-bottom: 0px;
|
}
|
|
.final-product-checkout .el-card__body {
|
padding: 0px 20px 20px;
|
}
|
|
.orimaterial-quantity .el-card__header {
|
padding: 0px 20px;
|
border-bottom: 0px;
|
}
|
|
.orimaterial-quantity .el-card__body {
|
padding: 0px 20px 20px;
|
}
|
|
.GooFlow .ico .ico_start:before {
|
color: red;
|
}
|
.highlight-tab-class {
|
color: #006eff;
|
background: #e4e7ed;
|
border-top: 1px solid #006eff;
|
}
|
.unhighlight-tab-class {
|
border: 1px solid #e4e7ed;
|
border-bottom: none;
|
}
|
|
</style>
|
