scdky_bianyuanjiance2.0_ui/src/views/plan/components/PlanCheckPoint_master104.vue

<!-- 步骤2  -->
<template>
  <div v-show="currentStep == 1" :class="className">
    <div class="title">测点导入</div>
    <div class="buttons">
      <div class="left">
        <!-- 批量删除 -->
        <div class="clear item">
          <el-button
            class="dark-button"
            icon="el-icon-delete"
            :disabled="!showDel"
            @click="multDelete()"
          >批量删除</el-button>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <!-- 添加新测点 -->
          <el-button
            class="light-button"
            icon="el-icon-refresh-right"
            @click="updataTableData()"
          >刷新</el-button>
        </div>
        <div class="item">
          <!-- 导入即是上传文件 -->
          <el-upload
            ref="upload"
            :action="importCsvActionStr"
            :show-file-list="false"
            :auto-upload="false"
            accept=".csv"
            :on-change="submitUpload"
          >
            <el-button
              class="light-button"
              icon="el-icon-upload2"
            >导入</el-button>
          </el-upload>
        </div>
        <div class="export item">
          <el-button
            class="light-button"
            icon="el-icon-download"
            @click="getPlanExport()"
          >导出</el-button>
        </div>
        <div class="item">
          <!-- 添加新测点 -->
          <el-button
            class="dark-button"
            icon="el-icon-plus"
            @click="addCheckPoint()"
          >添加</el-button>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table ref="multipleTable" v-loading="vloading" class="table-fixed" type="index" :data="tableData" :height="tableHeight" stripe @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
        />
        <!-- <el-table-column prop="id" label="序号" width="100" /> -->
        <el-table-column prop="iec104" label="104点号" width="100">
          <!-- rs.offset -->
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.iec104"
              class="table-column-input"
              type="number"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="* 测点名称" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.name"
              class="table-column-input"
              clearable
              placeholder="请输入名称"
              maxlength="32"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="* 设备名称" width="200">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.groupingName"
              class="table-column-input"
              clearable
              placeholder="请输入设备名称"
              maxlength="32"
            />
          </template>
        </el-table-column>
        <el-table-column prop="range" label="* 点号类型">
          <!-- rs.range -->
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.range"
              class="table-column-input"
              placeholder=""
              :disabled="Boolean(scope.row.id)"
            >
              <el-option
                v-for="item in checkPointFuctionOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="offset" label="* 点号">
          <!-- rs.offset -->
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.offset"
              class="table-column-input"
              type="number"
              :disabled="Boolean(scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="offset" label="关联遥信点号(仅遥控可关联)">
          <!-- rs.offset -->
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.range=='COIL_STATUS'"
              v-model="scope.row.relationTag"
              class="table-column-input"
              placeholder="请输入遥信点号"
              type="number"
            />
          </template>
        </el-table-column>
        <el-table-column prop="offset" label="关联遥测点号(仅遥调可关联)">
          <!-- rs.offset -->
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.range=='HOLDING_REGISTER'"
              v-model="scope.row.relationTag"
              class="table-column-input"
              placeholder="请输入遥测点号"
              type="number"
            />
          </template>
        </el-table-column>
        <el-table-column prop="scaling" label="倍率" width="80">
          <!-- scaling -->
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.scaling"
              class="table-column-input"
              clearable
              type="number"
              maxlength="32"
            />
          </template>
        </el-table-column>
        <el-table-column prop="adjust" label="偏移量" width="80">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.adjust"
              class="table-column-input"
              clearable
              type="number"
              maxlength="32"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              class="table-act"
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="editClick(scope.row, scope.$index)"
            >
              编辑
            </el-button>
            <el-button
              class="table-act"
              type="text"
              icon="el-icon-s-order"
              size="small"
              @click="saveClick(scope.row,scope.$index)"
            >保存</el-button>
            <el-button
              class="table-act"
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="delClick(scope.row, scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑弹出的模态框套表单 -->
    <el-dialog title="测点信息" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form">
        <el-form-item label="*测点名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" maxlength="32" placeholder="请输入测点名称" />
        </el-form-item>
        <el-form-item label="*设备名称" :label-width="formLabelWidth">
          <el-input v-model="form.groupingName" maxlength="20" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item class="modelInput" label="*测点类型" :label-width="formLabelWidth">
          <template slot-scope="scope">
            <el-select
              :key="toString(scope.row)"
              v-model="form.range"
              clearable
              placeholder=""
            >
              <el-option
                v-for="item in checkPointFuctionOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="*点号" :label-width="formLabelWidth">
          <el-input v-model="form.offset" maxlength="6" />
        </el-form-item>
        <el-form-item label="关联遥信点号 (仅遥控可关联)" :label-width="formLabelWidth">
          <el-input v-if="form.range=='COIL_STATUS'" v-model="form.relationTag" maxlength="6" placeholder="请输入遥信点号" />
          <el-input v-else v-model="form.relationTag" disabled />
        </el-form-item>
        <el-form-item label="关联遥测点号 (仅遥调可关联)" :label-width="formLabelWidth">
          <el-input v-if="form.range=='HOLDING_REGISTER'" v-model="form.relationTag" maxlength="6" placeholder="请输入遥测点号" />
          <el-input v-else v-model="form.relationTag" disabled />
        </el-form-item>
        <el-form-item label="倍率" :label-width="formLabelWidth">
          <el-input v-model="form.scaling" maxlength="5" />
        </el-form-item>
        <el-form-item label="偏移量" :label-width="formLabelWidth">
          <el-input v-model="form.adjust" maxlength="6" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <pagination
      background
      layout="pager"
      :limit="pageLimit"
      :total="paginationTotalElements"
      :current-page.sync="paginationNumber"
      :page="paginationNumber"
      @pagination="getPlanCheckPoint"
    />
    <!-- 底部按钮 -->
    <div class="bottom-button">
      <div class="cancel-plan">
        <el-button class="light-button" @click="backStep">上一步</el-button>
      </div>
      <div class="save-plan">
        <el-button class="dark-button" @click="submitPlan()">下一步</el-button>
      </div>
    </div>
    <!-- 检查本地存储是否成功 -->
    <!-- <el-button @click="checkStore()">checkStore</el-button> -->
  </div>
</template>

<script>
import { planExport } from '@/api/plan'
import { dictOptions } from '@/api/dict'
import Pagination from '@/components/Pagination'
import { delRecord, editRow, httpGet, putData } from '@/api/common-action'
export default {
  components: { Pagination },
  props: {
    className: {
      type: String,
      default: 'steps-bar-default'
    },
    currentStep: {
      type: Number,
      default: 1
    },
    currentPlanData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      vloading: true,
      // 表格默认数据
      tableData: [],
      tmpCheckPointId: 0,
      tmpTableData: [],
      // 每页显示多少条
      pageLimit: 20,
      paginationNumber: 1,
      // 一共多少条
      paginationTotalElements: 0,
      // 一共多少页
      // paginationTotalPages: 1,
      // 导入csv 请求参数
      importCsvActionStr: '#',
      // 功能码选项
      checkPointFuctionOptions: [],
      // 值类型列表
      valueTypeVale: '',
      valueTypeOptions: [],
      // 批量删除显示控制
      showDel: false,
      // 选中的arr
      delarr: [],
      dialogFormVisible: false,
      // 模态框内表单
      form: {},
      formLabelWidth: '120px',
      // 模态框表单内数据
      modalFromArr: [],
      stepIndex: '',
      tableHeight: '',
      // 多选框选中数据
      multipleSelection: ''
    }
  },
  watch: {
    multipleSelection(nv, ov) {
      if (nv.length === 0) {
        // console.log('nv = ', nv)
        this.showDel = false
      }
    },
    'tableData': {
      handler() {
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout()
        })
        true
      },
      deep: true
    }
  },
  // computed: {
  //   totalOfEle: () => {
  //     console.log(this.tableData)
  //     return this.tableData.length
  //   }
  // },
  created() {
    const marginBottom = 500
    this.tableHeight = window.innerHeight - marginBottom
  },
  mounted() {
    this.$nextTick(() => {
      const envUrl = process.env.VUE_APP_BASE_API
      // 网页加载完成后执行
      this.importCsvActionStr = envUrl + `/product/model/0/models.csv`
      if (this.currentPlanData.id > 0) {
        // 如果获取到了PlanId再加载详细信息
        this.getPlanCheckPoint()
        this.importCsvActionStr = envUrl + `/product/model/${this.currentPlanData.product}/models.csv`
      }
      this.initFunctions()
    })
  },
  methods: {
    // 检查本地存储是否成功
    // checkStore() {
    //   console.log('checkStore start ')
    //   const planFromDataStorage = localStorage.getItem('planFromData')
    //   console.log('planFromData=',planFromDataStorage)
    // }
    // 文件限制
    // handleExceed(files, fileList) {
    //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    // },
    // 初始化
    async initFunctions() {
      // 获取当前
      // 获取功能码选项 131
      let res = await dictOptions('131')
      this.checkPointFuctionOptions = res
      // 获取值类型列表
      res = await dictOptions('132')
      this.valueTypeOptions = res
      // console.log('获取值类型列表 this.valueTypeOptions=', this.valueTypeOptions)
      this.valueTypeVale = this.valueTypeOptions[0]
    },
    // 上一步
    backStep() {
      let currentStep = this.currentStep
      currentStep--
      this.$emit('changeStep', currentStep)
    },
    // 新加测试点
    addCheckPoint() {
      // console.log('addCheckPoint 新加测试点', this.valueTypeOptions)
      this.tmpCheckPointId++
      const newTable = {
        tmpCheckPointId: this.tmpCheckPointId,
        name: '',
        groupingName: '',
        relationTag: '',
        range: this.checkPointFuctionOptions[0].id,
        offset: 0,
        dataType: this.valueTypeOptions[0].id,
        swapByte: false,
        swapWord: false,
        scaling: 1,
        adjust: 0,
        value: 0,
        // point104: 0,
        id: null
      }
      this.tableData.unshift(newTable)
      // 保存到临时表格数据中
      this.tmpTableData.push(newTable)
      this.tmpTableData.forEach((element) => {
        // console.log(`this.tmpTableData element=${element.tmpCheckPointId}`)
      })
    },
    // 导入
    submitUpload() {
      this.$refs.upload.submit()
      // 上传之后刷新页面查看上传结果
      this.getPlanCheckPoint()
    },
    // 导出
    async getPlanExport() {
      // /product/model/:product/models.csv
      planExport(this.currentPlanData.product).then((response) => {
        const link = document.createElement('a')
        const blob = new Blob([response], {
          type: 'application/vnd.ms-excel;charset=utf-8'
        })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', `导出数据.csv`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // this.msgSuccess('导出成功')
      })
    },
    // 清除
    planClear() {
      // console.log('planClear 清除')
      this.tableData = []
    },
    // 获取测点表格数据
    async getPlanCheckPoint(pageObj) {
      this.vloading = true
      // 翻页时pageObj对象才会有值，属性分别为page和limit
      if (pageObj == null) {
        pageObj = {
          page: 0,
          limit: this.pageLimit
        }
        this.paginationNumber = 0
      } else {
        this.pageLimit = pageObj.limit
      }
      // 返回值
      /* {
          adjust:0   //偏移量
          dataType:null  //值类型
          id:null    //
          name:"中文" //测点名称
          offset:0 //104点号
          range:null //测点类型
          scaling:1  //倍率
          swapByte: 0, //字内交换
          swapWord: 0, //字节交换
          value:0     //先不用管- 测点查询
          "manual": null,    //先不用管 -单测点查询
          "stepSeconds": 0,    //先不用管 -单测点查询
          "pollingCycle": 0,    //先不用管 -单测点查询
          "disable": null    //先不用管 -单测点查询
        }
        totalPages 总页数
        number 第几页
        删除默认 tableData数据 */
      const getUrl = `product/model/${this.currentPlanData.product}/paging?page=${pageObj.page}&size=${pageObj.limit}`
      httpGet(getUrl).then((response) => {
        this.vloading = false
        if (response == null || response.content == null || response.content.length === 0) {
          this.tableData = []
          this.paginationNumber = 0
          this.paginationTotalPages = 0
          this.paginationTotalElements = 0
          return
        }
        // 计算104点号
        // response.content.map((item, index) => {
        //   item.point104 = this.calPoint104(item.range, item.offset)
        // })
        this.tableData = response.content
        this.paginationTotalPages = response.totalPages
        this.paginationTotalElements = parseInt(response.totalElements)
        this.paginationNumber = response.number * 1 + 1
      })
    },
    // 表格重排
    tableLayout() {
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout()
      })
    },
    // input失焦 添加数据
    // inputBlur(inputBlurData) {

    //   // 2023-05-29 应后端要求,取消失焦保存
    //   // console.log('inputBlur inputBlurData=', inputBlurData)
    //   // // 后端不支持多条数据一起添加，所以这里失焦就添加数据，不需要再判断是否是临时添加数据
    //   // // 此处 // /product/model/:product 中的 :product 是上一步添加方案时返回的 product 的值
    //   // const editPath = `/product/model/${this.currentPlanData.product}`
    //   // const editData = this.getSubmitTableRowData(inputBlurData)
    //   // console.log('inputBlur editData=', editData)
    //   // editRow(editPath, editData)

    // },
    async saveClick(row, index) {
      // if (row.offset > 65535) {
      //   this.$message({
      //     type: 'error',
      //     message: `寄存器地址不能大于65535`,
      //     offset: window.screen.height / 3
      //   })
      //   return
      // }
      const editPath = `/product/model/${this.currentPlanData.product}`
      const editData = row
      // const editData = this.getSubmitTableRowData(row)
      // console.log('saveClick editData=', editData)
      // 校验必填项目
      let isNotPassMesage = ''
      let v = editData.name || ''
      v = v.toString().replace(/ /gi, '')
      if (v === '') {
        isNotPassMesage = '必填项(测点名称)不能为空'
      }
      v = editData.groupingName || ''
      v = v.toString().replace(/ /gi, '')
      if (v === '') {
        isNotPassMesage = '必填项(设备名称)不能为空'
      }
      v = editData.range || ''
      v = v.toString().replace(/ /gi, '')
      if (v === '') {
        isNotPassMesage = '必填项(点号类型)不能为空'
      }
      v = editData.offset || ''
      v = v.toString().replace(/ /gi, '')
      if (v === '') {
        isNotPassMesage = '必填项(点号)不能为空'
      }
      if (isNotPassMesage !== '') {
        this.$message({
          type: 'error',
          message: isNotPassMesage,
          offset: window.screen.height / 3
        })
        return
      }
      const res = await editRow(editPath, editData)
      if (res) {
        this.$set(this.tableData[index], 'id', res.id)
        this.$set(this.tableData[index], 'modbus', res.modbus)
        this.$set(this.tableData[index], 'iec104', res.iec104)
        this.$message({
          type: 'success',
          message: `${res.name} 保存成功.`,
          offset: window.screen.height / 3
        })
      }
    },
    delClick(row) {
      // return
      this.$confirm('此操作将永久删除该记录, 是否继续?', `删除:${row.name}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (row.id != null && row.id > 0) {
        //   // :product 产品名称
        //   // :tag 标签编号
          const delUrl = `/product/model/${this.currentPlanData.product}/${row.id}`
          await delRecord(delUrl)
            .then((response) => {
              // console.log('delRecord rs=', response)
              // 后端成功执行后，前端再删除选中行
              // this.tableData.splice(index, 1)
              // this.tableData = this.tableData.filter(item => item.id !== row.id)
              const newData = this.tableData.filter(item => item.id !== row.id)
              this.tableData = [...newData]
            })
        } else {
        // 如果是新增的临时行，直接删除选中行
          // this.tableData.splice(index, 1)
          // this.tableData = this.tableData.filter(item => item.tmpCheckPointId !== row.tmpCheckPointId)
          const newData = this.tableData.filter(item => item.tmpCheckPointId !== row.tmpCheckPointId)
          // console.log('newData=', newData)
          this.tableData = [...newData]
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          offset: window.screen.height / 3
        })
      })
    },
    // 刷新
    updataTableData() {
      this.planClear()
      this.getPlanCheckPoint()
    },
    // 提交
    // 提交 下一步
    submitPlan() {
      // console.log(`this.tmpTableData=`, this.tmpTableData)
      let currentStep = this.currentStep
      const noName = this.tableData.some(item => (!item.groupingName) || (!item.name) || (!item.range) || (!item.offset.toString()))
      if (noName) {
        this.$message({
          type: 'error',
          message: '必填项不能为空',
          offset: window.screen.height / 3
        })
        return
      }

      if (currentStep < 3) {
        // 如果没有数据
        if (!this.tableData.length) {
          currentStep = currentStep + 1
          this.$emit('changeStep', currentStep)
          return
        }
        // 不接受数组提交，只能单条提交，所以使用遍历提交
        this.tableData.forEach((item, index) => {
          const tableRowData = this.getSubmitTableRowData(item)

          // 保存步骤
          const editPath = `/product/model/${this.currentPlanData.product}`
          editRow(editPath, tableRowData).then(res => {
            // console.log('PlanCheckPoint submitPlan currentStep=', currentStep)
            // console.log('PlanCheckPoint submitPlan index=', index)
            if (index === this.tableData.length - 1) {
              // 如果是最后一条数据 提交成功，下一步
              currentStep = currentStep + 1
              this.$emit('changeStep', currentStep)
            }
          })
        })
      } else {
        // 已经是最后一步了
      }
    },
    // 公用函数
    // 获取提交的行数据
    getSubmitTableRowData(rowData) {
      if (rowData.id > 0 || rowData.tmpCheckPointId > 0) {
        let submitRowData = []
        // {
        //   adjust:0   //偏移量
        //   dataType:null  //值类型
        //   id:null    //
        //   name:"中文" //测点名称
        //   offset:0 //寄存器地址
        //   range:null //功能码
        //   scaling:1  //倍率
        //   swapByte: 0, //字内交换
        //   swapWord: 0, //字节交换
        //   value:0     //先不用管- 测点查询
        //   "manual": null,    //先不用管 -单测点查询
        //   "stepSeconds": 0,    //先不用管 -单测点查询
        //   "pollingCycle": 0,    //先不用管 -单测点查询
        //   "disable": null    //先不用管 -单测点查询
        // }
        if (!rowData.id) {
          rowData.id = null
        }
        // 组织出待提交数据
        // {"tmpCheckPointId":2,"name":"","range":"COIL_STATUS","offset":0,"dataType":"BOOL","swapByte":false,"swapWord":false,"scaling":1,"adjust":0,"value":0,"id":null}
        submitRowData = {
          id: rowData.id,
          groupingName: rowData.groupingName,
          relationTag: rowData.relationTag,
          name: rowData.name,
          range: rowData.range,
          offset: rowData.offset,
          dataType: rowData.dataType,
          swapByte: rowData.swapByte,
          swapWord: rowData.swapWord,
          scaling: rowData.scaling,
          adjust: rowData.adjust,
          value: rowData.value
        }

        return submitRowData
      } else {
        return []
      }
    },
    // 批量删除
    async multDelete() {
      /* const delUrl = `/product/model/${this.currentPlanData.product}/${item.id}`
      delRecord(delUrl).then((response) => {
        console.log('delRecord rs=', response)
        // 后端成功执行后，前端再删除选中行
        // this.tableData.splice(index, 1)
        // this.tableData = this.tableData.filter(item => item.id !== row.id)
        const newData = this.tableData.filter(par => par.id !== item.id)
        this.tableData = [...newData]
      }).catch((err) => {
        console.log('delRecord err rs=', err)
      }) */
      // 后端执行完成后，开始前端操作
      // 遍历 `tableData` 数组
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        // 判断当前行数据是否被选中
        if (this.multipleSelection.includes(item)) {
          // 如果选中，则从 开始删除

          if (item.id > 0) {
            // 如果 id > 0 则表示 是已经保存在后端的数据了，需要向后端发送删除请求
            const delUrl = `/product/model/${this.currentPlanData.product}/${item.id}`
            await delRecord(delUrl).then((response) => {
              // 后端成功执行后，前端再删除选中行
              this.tableData.splice(i, 1)
              i-- // 因为 `splice` 方法会修改数组长度，所以需要将 `i` 减去 1，避免漏删下一个元素
            })
          } else {
            // 如果是新增未保存过的数据，直接删除
            this.tableData.splice(i, 1)
            i-- // 因为 `splice` 方法会修改数组长度，所以需要将 `i` 减去 1，避免漏删下一个元素
          }
        }
      }
      // this.showDel = false
    },
    // 多选按钮状态改变 handleSelectionChange
    handleSelectionChange(val) {
      // 选中行存入临时变量中
      this.multipleSelection = val
      // console.log('handleSelectionChange val', val)
      // 批量删除按钮激活
      this.showDel = true
    },
    editClick(row, index) {
      // 单测点查询接口 /product/model/:product/:tag
      // 获取测点详细信息

      if (row.id) {
        const getUrl = `/product/model/${this.currentPlanData.product}/${row.id}`
        // console.log('PlanCheckPoint editClick getUrl=', getUrl)
        httpGet(getUrl).then(res => {
          this.form = res
          // this.form.swapByte = Boolean(res.swapByte)
          // this.form.swapWord = Boolean(res.swapWord)

          // console.log('PlanCheckPoint editClick this.form=', this.form)
        })
      } else {
        this.form = this.tableData[index]
      }
      this.stepIndex = index
      this.dialogFormVisible = true
    },
    saveForm() {
      // 修改测点接口 /product/model/:product
      if (this.form.id) {
        let isNotPassMesage = ''
        let v = this.form.name || ''
        v = v.toString().replace(/ /gi, '')
        if (v === '') {
          isNotPassMesage = '必填项(测点名称)不能为空'
        }
        v = this.form.groupingName || ''
        v = v.toString().replace(/ /gi, '')
        if (v === '') {
          isNotPassMesage = '必填项(设备名称)不能为空'
        }
        v = this.form.range || ''
        v = v.toString().replace(/ /gi, '')
        if (v === '') {
          isNotPassMesage = '必填项(点号类型)不能为空'
        }
        v = this.form.offset || ''
        v = v.toString().replace(/ /gi, '')
        if (v === '') {
          isNotPassMesage = '必填项(点号)不能为空'
        }
        if (isNotPassMesage !== '') {
          this.$message({
            type: 'error',
            message: isNotPassMesage,
            offset: window.screen.height / 3
          })
          return
        }
        const putUrl = `/product/model/${this.currentPlanData.product}`
        putData(putUrl, this.form).then(res => {
          // 保存表单
          // console.log('saveForm putData 1 tableData=', this.tableData)
          if (res == null) {
            return
          }
          // res.point104 = this.calPoint104(res.range, res.offset)
          this.$set(this.tableData, this.stepIndex, res)
          this.dialogFormVisible = false
        })
      } else {
        this.$set(this.tableData, this.stepIndex, this.form)
        this.dialogFormVisible = false
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.plan-check-point {
  // border: 1px #f00 solid;
  text-align: center;
  font-size: 16px;
  width: 100%;
  padding:0 20px;
  .title {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 0;
  }
  .buttons {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding-bottom: 20px;
    .left,.right {
      width: 50%;
    }
    .right{
      display: flex;
      justify-content: right;
    }
    .item {
      margin: 0 10px;
    }
  }
  .modelInput{
    text-align: left;
  }
  // 分页
  .page-bar {
    display: flex;
    justify-content: center;
    // padding: 20px;
    .el-pagination.is-background {
      .el-pager {
        .number {
          color: #00706b;
          border: 1px #00706b solid;
          background-color: #fff;
        }
      }
    }
  }
  // 底部步骤按钮
 .bottom-button{
    margin-top: 20px;
  }
  .table-container{
    height: 100%;
  }

// ::v-deep .pagination-container{
//     margin-top: 0;
//   }
  ::v-deep {
    // 表格输入框
    .table-column-input {
      .el-input__inner {
        border: none;
        background: transparent;
          padding-left: 0;
      }
      .el-input__inner:focus {
        border: 1px #00706b solid;
      }
    }
  }
}
::v-deep input::-webkit-outer-spin-button,
   ::v-deep input::-webkit-inner-spin-button {
       -webkit-appearance: none !important;
     }
   ::v-deep input[type='number'] {
       -moz-appearance: textfield !important;
     }

</style>