saber/src/views/manager/projectinfo/treeTemplate/template/setFormula.vue

<template>
  <div>
    <div class="setInputcss">
      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          元素坐标：
        </el-col>
        <el-col :span="18">
          <avue-input v-model="htmlData.name" placeholder="请输入内容" :disabled='true'></avue-input>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="3.3" style="line-height: 40px">
          参数名称：
        </el-col>
        <el-col :span="18">
          <el-select v-model="value" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.paramName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="text-align: center;margin-top: 15px;">
          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addList">保存入库</el-button>
      </el-row>
      <el-row style="margin-top: 15px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="elementName"
            label="元素位置"
          >
          </el-table-column>
          <el-table-column
            prop="paramName"
            label="参数名称"
           >
          </el-table-column>
        
   
        </el-table>
      </el-row>
   
    </div>

  </div>
</template>
<script>

import {checkParamElement } from '@/api/exctab/exceltab'

import { queryParameterList,submitElement } from "@/api/paramter/parmter.js";
export default {
  props: ['pkeyId1', 'htmlData'],
  


  data() {
    return {
      options: [],
        value: '',
        tableData: [],
        projectId:''
    }
  },
  created() {
    this.projectId = this.$route.query.pid;
    this.getOptionData();
    this.getTableData()
  },
  methods: {
   getOptionData () {
            queryParameterList({
                current: 1,
                size:1000
            }).then((res) => {
              if(res.data.code===200){
                this.options = res.data.data.records;
              }else{
                this.options=[]
              }
                   
            })
    },
    //获取表格数据
    getTableData(){
      checkParamElement({
                pkeyId:this.pkeyId1,
             
            }).then((res) => {
              console.log(res,'res');
              
              if(res.data.code===200){
                this.tableData = res.data.data
               
              }else{
                this.tableData=[]
              }
                   
            })
    },
    addList() {
        try {
          // 检查关键字段是否存在
          if (!this.htmlData || !this.htmlData.keyname || this.value === undefined) {
            console.error('缺少必要的数据字段');
            return;
          }
          console.log(this.htmlData,'this.htmlData');
          
          const {name}=this.htmlData
          const paramId = this.value;
          let type=''
          this.options.forEach(item => {
            if (item.id === paramId) {
              type= item.type;
            }
          });
          // 检查 name 是否已存在于 tableData 中
          const isKeynameExists = this.tableData.some(item => item.elementName === name);
          if (isKeynameExists) {
            this.$message.warning('已存在相同的关键字段，请勿重复添加');
            return;
          }
          let subObj={
             parameterId: paramId,
             type:type,
             elementName:name,
             projectList:[{projectId:this.projectId}]
          }
          
      submitElement([subObj]).then((res) => {
            if(res.data.code==200){
                this.$message.success(res.data.msg)
             
              }else{
                this.$message.error(res.data.msg)
              }
             
              this.getTableData()
            });

        } catch (error) {
          console.error('插入数据时发生错误:', error);
        }
      },
        editClick(index,row){
          this.tableData.forEach((ele) => {
            this.$set(ele,"isEdit", false)
          })
          this.$set(row, "isEdit", true)
          this.htmlData.name=row.site
          this.value=row.name
          
        },
        saveClick(index,row){
          this.$set(row, "isEdit", false)
          this.$set(row, "name", this.value)
        },
        delRow(index,row){
          this.tableData.splice(index,1)
        }
    }
  }
</script>
<style lang="scss" scoped>
.table {
  margin-top: 20px;
  border-radius: 5px;

  color: #101010;
  font-size: 14px;
}

.setInputcss {
  width: 90%;
  height: 100%;
}
</style>