<template>
|
<div class="silkStandardSetting-container">
|
<div class="filter-card">
|
<CommonSearch :show-add="false" :amount-view="false" placeholder="请输入关键词" @searchClick="onFilterSearch">
|
<template slot="leftButton">
|
<el-button size="small" type="primary" @click="addBtnClick">新增</el-button>
|
<el-button size="small" type="primary" @click="refreshClick">刷新</el-button>
|
<el-button size="small" type="primary" @click="printClick" disabled>打印</el-button>
|
</template>
|
</CommonSearch>
|
</div>
|
<div class="body-card">
|
<div class="edit-save" @click="editSaveClick">
|
<div class="edit-save-icon">
|
<i :class="isEdit ? 'el-icon-unlock' : 'el-icon-lock'"></i>
|
</div>
|
<div class="edit-sace-label">{{ isEdit ? "锁定保存" : "界面设计" }}</div>
|
</div>
|
<div>
|
<SilkTableList
|
:detail-enter="isEdit"
|
:silk-table-list="silkTableList"
|
@inputContent="inputContent"
|
@addProjectClick="addBtnClick"
|
@clearupProject="clearupProject"
|
@deleteClick="clearupProject"
|
@addColumnClick="addColumnClick"
|
@clearupColumn="clearupColumn"
|
@addColumnInputChange="addColumnInputChange"
|
>
|
</SilkTableList>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SilkTableList from "@/views/systemSetting/silkStandardSetting/components/silkTableList"
|
import { getRankStandard, saveRankStandard } from "@/api/systemSetting/silkStandardSetting"
|
import { getDataByType } from "@/api/data"
|
export default {
|
name: "silkStandardSetting",
|
props: {},
|
components: { SilkTableList },
|
mixins: [],
|
computed: {},
|
data() {
|
return {
|
isEdit: false,
|
silkTableList: {},
|
tableData: [],
|
defaultColumn: [
|
{
|
label: "检查项目名称",
|
prop: "checkItem",
|
projectName: true,
|
isCallMethod: true,
|
getCallMethod: this.getCheckItemName
|
},
|
{ label: "开始纤度", prop: "startFineness", inputFloat: true },
|
{ label: "结束纤度", prop: "endFineness", inputFloat: true },
|
{ label: "野纤", prop: "rankA", inputFloat: true },
|
{ label: "大野", prop: "rankB", inputFloat: true },
|
{ label: "特野", prop: "rankC", inputFloat: true }
|
],
|
tableColumn: [],
|
columnNum: 0,
|
dataObj: {
|
checkItem: 1,
|
startFineness: 0,
|
endFineness: 0,
|
rankA: 0,
|
rankB: 0,
|
rankC: 0
|
},
|
projectOptions: getDataByType("projectOptions"),
|
rankObj: {},
|
columnInputList: [],
|
dynamicsRanks: [],
|
}
|
},
|
created() {
|
this.setTableForm()
|
this.getData()
|
},
|
methods: {
|
// 获取数据
|
getData() {
|
getRankStandard().then((res) => {
|
console.log(res)
|
if (res.code === 200) {
|
if (res.data.length > 0) {
|
this.tableData = []
|
this.tableColumn = this.defaultColumn
|
this.columnDataProcess(res.data[0].dynamicsRanks)
|
this.rankObj = {}
|
this.allDataProcess(res.data)
|
}
|
}
|
})
|
},
|
// 整体数据处理
|
allDataProcess(dataList) {
|
let rankList = dataList.map((ite) => {
|
for (let i = 0; i < ite.dynamicsRanks.length; i++) {
|
this.$set(this.rankObj, ite.dynamicsRanks[i].rankProp, ite.dynamicsRanks[i].rankValue)
|
this.$set(this.dataObj, ite.dynamicsRanks[i].rankProp, 0)
|
}
|
return {
|
...ite,
|
...this.rankObj
|
}
|
})
|
this.tableData = rankList || []
|
this.silkTableList.tableData = this.tableData
|
},
|
// 列信息数据处理
|
columnDataProcess(data) {
|
this.columnInputList = data.map((ite) => {
|
return { ...ite }
|
})
|
let list = data.map((item) => {
|
return {
|
label: item.rankName,
|
prop: item.rankProp,
|
inputFloat: true
|
}
|
})
|
this.columnNum = list.length + 1
|
for (let j = 0; j < list.length; j++) {
|
this.tableColumn.splice(2, 0, list[j])
|
}
|
console.log(this.tableColumn)
|
this.silkTableList.tableColumn = this.tableColumn
|
},
|
setTableForm() {
|
this.silkTableList = {
|
tableData: this.tableData,
|
isReturn: false,
|
tableColumn: [
|
{ label: "检查项目名称", prop: "projectName", projectName: true },
|
{ label: "开始纤度", prop: "start", inputFloat: true },
|
{ label: "结束纤度", prop: "end", inputFloat: true },
|
{ label: "野纤", prop: "price1", inputFloat: true },
|
{ label: "大野", prop: "price2", inputFloat: true },
|
{ label: "特野", prop: "price3", inputFloat: true }
|
]
|
}
|
},
|
// 搜索
|
onFilterSearch(searchText) {
|
console.log(searchText)
|
},
|
// 新增
|
addBtnClick() {
|
if(this.isEdit){
|
this.tableData.push({
|
projectName: "",
|
start: 0,
|
end: 0,
|
price1: 0,
|
price2: 0,
|
price3: 0
|
})
|
}else{
|
this.$message.error('请先解锁再新增！')
|
}
|
|
},
|
// 刷新
|
refreshClick() {
|
this.getData()
|
},
|
// 打印
|
printClick() {},
|
// 列表输入回调
|
inputContent(val, prop, scope) {
|
console.log(val, prop, scope)
|
let list = this.tableData.map((item, index) => {
|
let dynamicsRanks = this.columnInputList.map((ite) => {
|
if (ite.rankProp == prop) {
|
ite.rankValue = val
|
}
|
return {
|
...ite
|
}
|
})
|
if (index === scope.$index) {
|
item[prop] = val
|
item.dynamicsRanks = dynamicsRanks
|
}
|
return {
|
...item
|
}
|
})
|
console.log(list)
|
this.tableData = list
|
},
|
// 删除
|
clearupProject(data, index) {
|
console.log(data)
|
this.tableData.splice(index, 1)
|
},
|
// 保存编辑按钮切换
|
editSaveClick() {
|
this.isEdit = !this.isEdit
|
let tableData=JSON.parse(
|
JSON.stringify(this.silkTableList.tableData)
|
);
|
if(tableData.length==0&&!this.isEdit){
|
this.$message.error('请先新增再保存!')
|
return true;
|
}
|
if (!this.isEdit) {
|
let params = this.saveParam(tableData)
|
saveRankStandard({
|
rankStandard: params
|
}).then((res) => {
|
if (res.code == 200) {
|
this.$message.success("保存成功")
|
this.getData()
|
}
|
})
|
}
|
},
|
saveParam(tableData) {
|
for(let i in tableData){
|
tableData[i].dynamicsRanks=[]
|
for(let j in this.columnInputList){
|
tableData[i].dynamicsRanks.push({
|
rankName:this.columnInputList[j].rankName,
|
rankProp:this.columnInputList[j].rankProp,
|
rankValue:tableData[i][this.columnInputList[j].rankProp]
|
})
|
}
|
}
|
let saveList = tableData.map((item) => {
|
return {
|
checkItem: item.checkItem,
|
dynamicsRanks: item.dynamicsRanks,
|
endFineness: item.endFineness,
|
lineId: item.lineId || "",
|
rankA: item.rankA,
|
rankB: item.rankB,
|
rankC: item.rankC,
|
startFineness: item.startFineness
|
}
|
})
|
return saveList
|
},
|
// 添加列
|
addColumnClick() {
|
let propStr = "prop" + this.columnNum
|
this.tableColumn.splice(2, 0, { label: "", prop: propStr, inputFloat: true, addColumn: true })
|
this.$set(this.dataObj, propStr, 0)
|
this.$set(this.rankObj, propStr, 0)
|
this.columnInputList.push({ rankProp: propStr, rankName: "", rankValue: 0 })
|
console.log(this.tableColumn, this.dataObj, "32323", this.columnInputList)
|
this.silkTableList.tableColumn = this.tableColumn
|
this.columnNum += 1
|
let allList = this.tableData.map((item) => {
|
return {
|
...item,
|
[propStr]: 0
|
}
|
})
|
this.tableData = allList
|
this.silkTableList.tableData = allList
|
},
|
// 删除列
|
clearupColumn(prop) {
|
let currentIndex = 0
|
this.tableColumn.map((item, index) => {
|
if (item.prop == prop) {
|
currentIndex = index
|
}
|
})
|
this.tableColumn.splice(currentIndex, 1)
|
this.silkTableList.tableColumn = this.tableColumn
|
this.$delete(this.dataObj, prop)
|
},
|
// 列表头输入回调
|
addColumnInputChange(val, prop) {
|
console.log(val, prop, this.columnInputList)
|
this.columnInputList.forEach((item) => {
|
if (item.rankProp == prop) {
|
item.rankName = val
|
}
|
})
|
},
|
getCheckItemName(val) {
|
if (val) {
|
for (let i in this.projectOptions) {
|
if (this.projectOptions[i].id == val) {
|
return this.projectOptions[i].value
|
}
|
}
|
} else {
|
return "--"
|
}
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.silkStandardSetting-container {
|
height: 100%;
|
.filter-card {
|
margin: 20px 30px;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px 0 20px;
|
border-radius: 4px;
|
background-color: #fff;
|
}
|
.body-card {
|
margin: 0 30px;
|
background-color: #fff;
|
padding: 10px 15px;
|
height: calc(100% - 180px);
|
border-radius: 4px;
|
.edit-save {
|
width:100px;
|
padding:0 10px;
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
cursor: pointer;
|
.edit-save-icon {
|
font-size: 24px;
|
color: #5582f3;
|
}
|
.edit-sace-label {
|
margin-left: 10px;
|
font-size: 14px;
|
color: #000000d8;
|
}
|
}
|
}
|
}
|
</style>
|
