<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" >删除</el-button>
|
<el-button size="small" type="primary" @click="addBtnClick" >修改</el-button>
|
<el-button size="small" type="primary" @click="refreshClick">刷新</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 class="list-view">
|
<SilkTableList
|
:detail-enter="isEdit"
|
:silk-table-list="silkTableList"
|
@inputContent="inputContent"
|
@addProjectClick="addBtnClick"
|
@clearupProject="clearupProject"
|
@deleteClick="clearupProject"
|
@addColumnClick="addColumnClick"
|
@clearupColumn="clearupColumn"
|
>
|
</SilkTableList>
|
</div>
|
<div class="btn-pager">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SilkTableList from "@/views/systemSetting/workshopManage/components/silkTableList"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
export default {
|
name: "encodeManage",
|
props: {},
|
components: { SilkTableList },
|
mixins: [pageMixin],
|
computed: {},
|
data() {
|
return {
|
isEdit: false,
|
silkTableList: {},
|
tableData: [],
|
tableColumn: [
|
{ label: "编码名称", prop: "projectName", projectName: true },
|
{ label: "编码类型", prop: "start", inputFloat: true },
|
{ label: "描述", prop: "end", 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() {
|
if(this.isEdit){
|
this.$message.warning("请先保存当前编辑")
|
}else{
|
this.isEdit = true
|
// array.splice(index, 0, item)
|
this.tableData.splice(0,0,{
|
projectName: "",
|
start: 0,
|
end: 0,
|
price1: 0,
|
price2: 0,
|
price3: 0,
|
isAdd:true,
|
})
|
}
|
|
|
},
|
// 保存
|
saveBtnClick(){
|
this.tableData.forEach((item)=>{
|
item.isAdd=false
|
})
|
this.isEdit = false
|
},
|
// 刷新
|
refreshClick() {},
|
// 打印
|
printClick() {},
|
// 列表输入回调
|
inputContent(val, prop, row) {
|
console.log(val, prop, row,"列表打印回调")
|
},
|
// 删除
|
clearupProject(data, index) {
|
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)
|
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;
|
}
|
}
|
}
|
}
|
.list-view {
|
height: calc(100% - 60px);
|
overflow: hidden;
|
}
|
.btn-pager {
|
display: flex;
|
margin-top: 10px;
|
.page {
|
margin-left: auto;
|
}
|
}
|
</style>
|
