生丝定级标准页面开发、添加列及添加列输入框、删除列功能开发

yangfeng

2024-03-04 e314f30de574edeb86f27555c275545b7d12b3a0

 src/views/systemSetting/silkStandardSetting/index.vue

@@ -3,7 +3,7 @@
    <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="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>
@@ -24,6 +24,8 @@
          @addProjectClick="addBtnClick"
          @clearupProject="clearupProject"
          @deleteClick="clearupProject"
          @addColumnClick="addColumnClick"
          @clearupColumn="clearupColumn"
        >
        </SilkTableList>
      </div>
@@ -43,7 +45,24 @@
    return {
      isEdit: false,
      silkTableList: {},
      tableData: []
      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() {
@@ -54,14 +73,7 @@
      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 }
        ]
        tableColumn: this.tableColumn
      }
    },
    // 搜索
@@ -70,14 +82,7 @@
    },
    // 新增
    addBtnClick() {
      this.tableData.push({
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      })
      this.tableData.push(this.dataObj)
    },
    // 刷新
    refreshClick() {},
@@ -95,6 +100,27 @@
    // 保存编辑按钮切换
    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)
    }
  }
}