<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" :disabled="!isEdit">新增</el-button>
|
<el-button size="small" type="primary" @click="refreshClick">刷新</el-button>
|
<el-button size="small" type="primary" @click="printClick">打印</el-button>
|
</template>
|
</CommonSearch>
|
</div>
|
<div class="body-card">
|
<div class="edit-save">
|
<div class="edit-save-icon" @click="editSaveClick">
|
<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"
|
>
|
</SilkTableList>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SilkTableList from "@/views/systemSetting/silkStandardSetting/components/silkTableList"
|
export default {
|
name: "silkStandardSetting",
|
props: {},
|
components: { SilkTableList },
|
mixins: [],
|
computed: {},
|
data() {
|
return {
|
isEdit: false,
|
silkTableList: {},
|
tableData: [],
|
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 }
|
],
|
columnNum: 0,
|
dataObj: {
|
projectName: "",
|
start: 0,
|
end: 0,
|
price1: 0,
|
price2: 0,
|
price3: 0
|
}
|
}
|
},
|
created() {
|
this.setTableForm()
|
},
|
methods: {
|
setTableForm() {
|
this.silkTableList = {
|
tableData: this.tableData,
|
isReturn: false,
|
tableColumn: this.tableColumn
|
}
|
},
|
// 搜索
|
onFilterSearch(searchText) {
|
console.log(searchText)
|
},
|
// 新增
|
addBtnClick() {
|
this.tableData.push(this.dataObj)
|
},
|
// 刷新
|
refreshClick() {},
|
// 打印
|
printClick() {},
|
// 列表输入回调
|
inputContent(val, prop, row) {
|
console.log(val, prop, row)
|
},
|
// 删除
|
clearupProject(data, index) {
|
console.log(data)
|
this.tableData.splice(index, 1)
|
},
|
// 保存编辑按钮切换
|
editSaveClick() {
|
this.isEdit = !this.isEdit
|
},
|
// 添加列
|
addColumnClick() {
|
let propStr = "trends" + this.columnNum
|
this.tableColumn.splice(2, 0, { label: "", prop: propStr, inputFloat: true, addColumn: true })
|
this.$set(this.dataObj, propStr, 0)
|
console.log(this.tableColumn)
|
this.silkTableList.tableColumn = this.tableColumn
|
this.columnNum += 1
|
},
|
// 删除列
|
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)
|
}
|
}
|
}
|
</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 {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
.edit-save-icon {
|
font-size: 24px;
|
color: #5582f3;
|
cursor: pointer;
|
}
|
.edit-sace-label {
|
margin-left: 10px;
|
font-size: 14px;
|
color: #000000d8;
|
}
|
}
|
}
|
}
|
</style>
|
