JavaProjectRepo/business-css/frontend/src/components/antvx6/materialmodel.vue

<script lang="ts">
export default {
  name: "物料信息",
};
</script>

<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { searchMaterialsPage, addMaterials,updateMaterials} from "@/api/business/database/material";

const emit = defineEmits([ 'closeMaterialModel']);

const props = defineProps({
  projectInfo: {
    required: false,
    type: Object,
    default: {}
  },
  
  deviceInfo:{
    required: false,
    type: Object,
    default: {}
  },
  materialInfo: {
    required: false,
    type: Object,
    default: {}
  },
  materialId: {
    required: false,
    type: String,
    default: ""
  },
  deviceTypetype: {
    required: false,
    type: String,
    default: ''
  },
})
const deviceName:any = ref("") // 设备名称


//新建物料数据-确认按钮/修改按钮
function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      const params = {
        projectId: props.projectInfo.projectId,
        materialId: props.materialId,
        name: info.value.name,
        code: info.value.code,
        uConcentration: info.value.uConcentration,
        uo2Density: info.value.uo2Density,
        uEnrichment: info.value.uEnrichment,
        puConcentration: info.value.puConcentration,
        puo2Density: info.value.puo2Density,
        puIsotope: info.value.puIsotope,
        hno3Acidity: info.value.hno3Acidity,
        h2c2o4Concentration: info.value.h2c2o4Concentration,
        organicRatio: info.value.organicRatio,
        moistureContent: info.value.moistureContent,
        customAttrs: JSON.stringify(customAttrsData.value)
      }
      addMaterials(params).then((res:any) => {
        if(res == true){
          emit('closeMaterialModel', params) 
        }
      });
    }
  });
}
onMounted(() => {
  deviceName.value = props.deviceInfo.name
  editClick(props.materialInfo)

});
const infoForm = ref();
const info: any = ref({
  name: "",
  code: "",
  type: null,
  size: null,
  volume: null,
  flowRate: null,
  pulseVelocity: null
});
const josnInfo: any = ref({}) // 设备信息
const rules = ref({
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
});
const isEdit = ref(false) // 是否编辑设备
function editClick(row: any) {
  info.value = JSON.parse(JSON.stringify(row));

  if(row.size != null){
    josnInfo.value = JSON.parse(row.size);
  }
  isEdit.value = true;
}


// 处理数字输入的过滤
function handleNumberInput(field: string) {
  // 过滤输入，只允许数字和小数点
  info.value[field] = info.value[field].replace(/[^\d.]/g, '');
  // 确保只有一个小数点
  const parts = info.value[field].split('.');
  if (parts.length > 2) {
    info.value[field] = parts[0] + '.' + parts.slice(1).join('');
  }
}
const customAttrsData:any = ref([]) // 自定义属性数据
// 处理数字输入的过滤
function tableNumberInput(index:any, field: string) {
  // 过滤输入，只允许数字和小数点
  customAttrsData.value[index][field] = customAttrsData.value[index][field].replace(/[^\d.]/g, '');
  // 确保只有一个小数点
  const parts = customAttrsData.value[index][field].split('.');
  if (parts.length > 2) {
    customAttrsData.value[index][field] = parts[0] + '.' + parts.slice(1).join('');
  }
}

function removeAttr(index:any){
  customAttrsData.value.splice(index, 1);
}
function addAttr(){
  customAttrsData.value.push({
    name: null,
    value: null,
    unit: null,
  });
}
function handleClose(){
  emit('closeMaterialModel', false) 
}


const isDialogMaterial = ref(false) // 是否显示选择物料弹窗 
const isAcitve:any = ref(-1) // 选中物料索引
const selectedMaterial:any = ref({}) // 选中物料
const ingredientData:any = ref([]) // 自定义属性数据
function dialogMaterialOpen(){
  isAcitve.value = -1
  gettableData()
  isDialogMaterial.value = true
}
function dialogMaterialClose(){
  isDialogMaterial.value = false
}
const materialList:any = ref([]) // 物料列表

function gettableData() { // 获取物料列表
  let params = {
    pageNum: 1,
    pageSize: 99,
  };
  searchMaterialsPage(params).then((result:any) => {
    materialList.value = result.records;
  }).catch((err) => {
  });
}

function handleClick(item:any, index:any){
  ingredientData.value = []

  ingredientData.value.push({
    key: "铀浓度（g/L）",
    value:  item.uConcentration,
    unit: "",
  },{
    key: "氧化铀密度（g/cm3）",
    value:  item.uo2Density,
    unit: "",
  },{
    key: "铀富集度（%）",
    value:  item.uEnrichment,
    unit: "",
  },{
    key: "钚浓度（g/L）",
    value:  item.puConcentration,
    unit: "",
  },{
    key: "氧化钚密度（g/cm3）",
    value:  item.puo2Density,
    unit: "",
  },{
    key: "钚同位素比例（PU-240占比）%",
    value:  item.puIsotope,
    unit: "",
  },{
    key: "硝酸酸度（mol/L）",
    value:  item.hno3Acidity,
    unit: "",
  },{
    key: "草酸浓度（mol/L）",
    value:  item.h2c2o4Concentration,
    unit: "",
  },{
    key: "有机相比例%",
    value:  item.organicRatio,
    unit: "",
  },{
    key: "含水率%",
    value:  item.moistureContent,
    unit: "",
  })
  let tempData = []
  if(item.customAttrs !=null && item.customAttrs != ""){
    tempData = JSON.parse(item.customAttrs)
  }
  for(let i = 0; i < tempData.length; i++){
    let attr = tempData[i]
    ingredientData.value.push({
      key: attr.name,
      value: attr.value,
      unit: attr.unit,
    })
  }
  selectedMaterial.value = item
  isAcitve.value = index

}
function confirmMaterial(){
  info.value = {
    materialId: props.materialId,
    name: selectedMaterial.value.name,
    code: selectedMaterial.value.code,
    uConcentration: selectedMaterial.value.uConcentration,
    uo2Density: selectedMaterial.value.uo2Density,
    uEnrichment: selectedMaterial.value.uEnrichment,
    puConcentration: selectedMaterial.value.puConcentration,
    puo2Density: selectedMaterial.value.puo2Density,
    puIsotope: selectedMaterial.value.puIsotope,
    hno3Acidity: selectedMaterial.value.hno3Acidity,
    h2c2o4Concentration: selectedMaterial.value.h2c2o4Concentration,
    organicRatio: selectedMaterial.value.organicRatio,
    moistureContent: selectedMaterial.value.moistureContent,
    customAttrs: selectedMaterial.value.customAttrs,
  }
  customAttrsData.value = []
  if(selectedMaterial.value.customAttrs !=null && selectedMaterial.value.customAttrs != ""){
    customAttrsData.value = JSON.parse(selectedMaterial.value.customAttrs)
  }
  isDialogMaterial.value = false
}
</script>

<template>
  <div class="materialmodel-box">
    <el-form ref="infoForm" :model="info" :rules="rules" label-width="220px" 
      style="height: calc(100vh - 200px) ; overflow: auto;">
      <div style="display: flex;align-items: center;">
        <el-form-item label="所属设备"label-width="80px" style="margin-right: 60px;">
          <el-input v-model="deviceName" style="width: 300px" placeholder="" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属设备" prop="name" label-width="80px">
          <el-input v-model="info.name" style="width: 300px"  placeholder=""></el-input>
          <el-button type="primary" style="margin-left: 10px" @click="dialogMaterialOpen">选择物料</el-button>
        </el-form-item>
      </div>
    <div style="display: flex;align-items: center;padding: 20px 0;">
      <div class="materialmodel-title-line"></div>
      <div>物料成分</div>
    </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="铀浓度（g/L）" prop="uConcentration">
          <el-input v-model="info.uConcentration" style="width: 100%" placeholder="" @input="handleNumberInput('uConcentration')"></el-input>
        </el-form-item>
        <el-form-item label="氧化铀密度（g/cm3）" prop="uo2Density">
          <el-input v-model="info.uo2Density" style="width: 100%" placeholder="" @input="handleNumberInput('uo2Density')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="铀富集度（%）" prop="uEnrichment">
          <el-input v-model="info.uEnrichment" style="width: 100%" placeholder="" @input="handleNumberInput('uEnrichment')"></el-input>
        </el-form-item>
        <el-form-item label="钚浓度（g/L）" prop="puConcentration">
          <el-input v-model="info.puConcentration" style="width: 100%" placeholder="" @input="handleNumberInput('puConcentration')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="氧化钚密度（g/cm3）" prop="puo2Density">
          <el-input v-model="info.puo2Density" style="width: 100%" placeholder="" @input="handleNumberInput('puo2Density')"></el-input>
        </el-form-item>
        <el-form-item label="钚同位素比例（PU-240占比）%" prop="puIsotope">
          <el-input v-model="info.puIsotope" style="width: 100%" placeholder="" @input="handleNumberInput('puIsotope')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="硝酸酸度（mol/L）" prop="hno3Acidity">
          <el-input v-model="info.hno3Acidity" style="width: 100%" placeholder="" @input="handleNumberInput('hno3Acidity')"></el-input>
        </el-form-item>
        <el-form-item label="草酸浓度（mol/L）" prop="h2c2o4Concentration">
          <el-input v-model="info.h2c2o4Concentration" style="width: 100%" placeholder="" @input="handleNumberInput('h2c2o4Concentration')"></el-input>
        </el-form-item>
      </div>
      <div class="materialmodel_dialog_display">
        <el-form-item label="有机相比例%" prop="organicRatio">
          <el-input v-model="info.organicRatio" style="width: 100%" placeholder="" @input="handleNumberInput('organicRatio')"></el-input>
        </el-form-item>
        <el-form-item label="含水率%" prop="moistureContent">
          <el-input v-model="info.moistureContent" style="width: 100%" placeholder="" @input="handleNumberInput('moistureContent')"></el-input>
        </el-form-item>
      </div>
      <div class="custom_attrs_box">
        <div class="custom_attrs_header">
          <div class="custom_attrs_header1">成分名称</div>
          <div class="custom_attrs_header2">成分参数</div>
          <!-- <div class="custom_attrs_header3">单位</div> -->
          <div class="custom_attrs_header4">操作</div>
        </div>

        <div class="custom_attrs_header" v-for="(item, index) in customAttrsData" :key="index">
          <div class="custom_attrs_content1">
            <el-input v-model="item.key" style="width: 100%" placeholder=""></el-input>
          </div>
          <div class="custom_attrs_content2">
            <el-input v-model="item.value" style="width: 100%" placeholder="" 
              @input="tableNumberInput(index,'value')"></el-input>
          </div>
          <!-- <div class="custom_attrs_content3">
            <el-input v-model="item.unit" style="width: 100%" placeholder=""></el-input>
          </div> -->

          <div class="custom_attrs_content4" @click="removeAttr(index)">
            删除
          </div>
        </div>

      </div>
      <div class="addAttrBox" @click="addAttr">
        <svg t="1766543724217" style="margin-right: 5px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6518" width="16" height="16"><path d="M105 480a8 8 0 0 1 8-8h799a8 8 0 0 1 8 8v64a8 8 0 0 1-8 8H113a8 8 0 0 1-8-8v-64z" fill="#266FFF" p-id="6519"></path><path d="M480 920a8 8 0 0 1-8-8V112a8 8 0 0 1 8-8h64a8 8 0 0 1 8 8v800a8 8 0 0 1-8 8h-64z" fill="#266FFF" p-id="6520"></path></svg>
        添加一行
      </div>
      <span 
        style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;padding-top: 20px;">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
      </span>
    </el-form>
    <el-dialog v-model="isDialogMaterial" :close-on-click-modal="false" :modal="false" draggable 
      :before-close="dialogMaterialClose" title="选择物料"  append-to-body width="950px" class="materialmodel-dialog-box">
      <div style="display: flex;">
        <div class="choiceMateria-left">
          <div class="choiceMateria-left-title">物料列表</div>
          <div style="height: calc(100% - 70px);overflow: auto;margin-top: 10px;">
            <div v-for="(item, index) in materialList" :key="index" class="choiceMateria-left-item"
              :class="{'choiceMateria-item-active': index == isAcitve}"
              @click="handleClick(item, index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div style="width: 100%;">
          <div style="display: flex;justify-content: flex-end;padding-top: 20px;padding-right: 40px;padding-bottom: 20px;">
            <el-button type="primary" @click="confirmMaterial">确 定</el-button>
          </div>
          <div class="custom_attrs_box" style="width: 650px;margin-left: 20px;">
            <div class="custom_attrs_header">
              <div class="custom_attrs_header1" style="width: 60%;">成分名称</div>
              <div class="custom_attrs_header2" style="width: 40%;" >成分参数</div>
            </div>

            <div class="custom_attrs_header" v-for="(item, index) in ingredientData" :key="index">
              <div class="custom_attrs_content1" style="width: 60%;">
                <!-- <el-input v-model="item.key" style="width: 100%" placeholder=""></el-input> -->
                {{ item.key }}
              </div>
              <div class="custom_attrs_content2" style="width: 40%;">
                {{ item.value }}
              </div>
            </div>

          </div>
        </div>
        
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>
.materialmodel-box{
  width: 100%;
  height: calc(100vh - 200px);
}
.materialmodel-title-box{
  display: flex;
  align-items: center;
}
.materialmodel-title-line{
  width: 4px;
  height: 12px;
  background-color: rgba(38, 111, 255, 1);
  margin-right: 4px;
}
.materialmodel-title-text{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
}
.materialmodel_dialog_display{
  display: flex;
  justify-content: space-between;
}
.materialmodel_dialog_display .el-form-item--default{
  width: 48%;
}


.choiceMateria-left{
  width: 240px;
  height: calc(100vh - 200px);
  border-right: 1px solid rgba(240, 240, 240, 1);
  box-sizing: border-box;
}
.choiceMateria-left-title{
  width: 240px;
  height: 44px;
  line-height: 44px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #1B1B1B;
  padding-left: 16px;
  border-bottom: 1px solid rgba(240, 240, 240, 1);
}
.choiceMateria-left-item{
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #333333;
}
.choiceMateria-left-item:hover{
  background-color: #f5f8ff;
}
.choiceMateria-item-active{
    background-color: #f5f8ff;
    color: #266fff;
}
</style>

<style>
.custom_attrs_box{
  width: 100%;
  border: 1px solid #f0f1f2;
  border-bottom: 0px solid #f0f1f2;
  overflow: auto;
}
.custom_attrs_header{
  display: flex;
}
.custom_attrs_header1{
  width: 45%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header2{
  width: 45%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header3{
  width: 20%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_header4{
  width: 10%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f1f2;
}

.custom_attrs_content1{
  width: 45%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content2{
  width: 45%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content3{
  width: 20%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #282828;
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content4{
  width: 10%;
  height: 42px;
  line-height: 40px;
  text-align: center;
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #266FFF;
  border-bottom: 1px solid #f0f1f2;
}
.custom_attrs_content1 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content1 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}
.custom_attrs_content2 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content2 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}
.custom_attrs_content3 .el-input__wrapper{
  box-shadow: 0 0 0 transparent;
}
.custom_attrs_content3 .el-input__wrapper.is-focus{
  box-shadow:inset 0 0 0 1px #266FFF !important;
}

.materialmodel-dialog-box.el-dialog .el-dialog__body{
  padding: 0 !important;
}
</style>