生丝定级标准页面接口联调和添加列和列表数据输入的方法修改

yangfeng

2024-03-19 ef06a897369a84e4c1e3a9d5a8aeea5572d973bd

 src/views/systemSetting/silkStandardSetting/index.vue

@@ -5,7 +5,7 @@
        <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>
          <el-button size="small" type="primary" @click="printClick" disabled>打印</el-button>
        </template>
      </CommonSearch>
    </div>
@@ -26,6 +26,7 @@
          @deleteClick="clearupProject"
          @addColumnClick="addColumnClick"
          @clearupColumn="clearupColumn"
          @addColumnInputChange="addColumnInputChange"
        >
        </SilkTableList>
      </div>
@@ -35,6 +36,8 @@

<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: {},
@@ -46,29 +49,90 @@
      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 }
      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: {
        projectName: "",
        start: 0,
        end: 0,
        price1: 0,
        price2: 0,
        price3: 0
      }
        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,
@@ -85,12 +149,33 @@
      this.tableData.push(this.dataObj)
    },
    // 刷新
    refreshClick() {},
    refreshClick() {
      this.getData()
    },
    // 打印
    printClick() {},
    // 列表输入回调
    inputContent(val, prop, row) {
      console.log(val, prop, row)
    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) {
@@ -100,15 +185,53 @@
    // 保存编辑按钮切换
    editSaveClick() {
      this.isEdit = !this.isEdit
      if (!this.isEdit) {
        let params = this.saveParam()
        saveRankStandard({
          rankStandard: params
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success("保存成功")
            this.getData()
          }
        })
      }
    },
    saveParam() {
      let saveList = this.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 = "trends" + this.columnNum
      let propStr = "prop" + 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.$set(this.rankObj, propStr, 0)
      console.log(this.columnInputList)
      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) {
@@ -121,6 +244,27 @@
      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
        }
      })
      console.log(this.columnInputList, "888")
    },
    getCheckItemName(val) {
      if (val) {
        for (let i in this.projectOptions) {
          if (this.projectOptions[i].id == val) {
            return this.projectOptions[i].value
          }
        }
      } else {
        return "--"
      }
    }
  }
}