875 lines
25 KiB
Vue
875 lines
25 KiB
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, saveOrUpdate, materialsById} from "@/api/business/database/material";
|
||
import { getToken } from '@/utils/auth'
|
||
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,
|
||
ePu238: info.value.ePu238,
|
||
ePu239: info.value.ePu239,
|
||
ePu240: info.value.ePu240,
|
||
ePu241: info.value.ePu241,
|
||
ePu242: info.value.ePu242,
|
||
hno3Acidity: info.value.hno3Acidity,
|
||
h2c2o4Concentration: info.value.h2c2o4Concentration,
|
||
organicRatio: info.value.organicRatio,
|
||
moistureContent: info.value.moistureContent,
|
||
customAttrs: JSON.stringify(customAttrsData.value),
|
||
iconBase64: info.value.iconBase64,
|
||
}
|
||
saveOrUpdate(params).then((res:any) => {
|
||
if(res == true){
|
||
emit('closeMaterialModel', params)
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
deviceName.value = props.deviceInfo.name
|
||
if(props.materialId != null){
|
||
materialsById(props.materialId).then((res:any) => {
|
||
|
||
if(res!= null && res != ""){
|
||
editClick(res)
|
||
info.value.iconBase64 = res.iconBase64;
|
||
}
|
||
|
||
});
|
||
}else{
|
||
editClick(props.materialInfo)
|
||
}
|
||
|
||
|
||
|
||
});
|
||
const infoForm = ref();
|
||
const info: any = ref({
|
||
code: "",
|
||
type: null,
|
||
size: {},
|
||
name: "",
|
||
description: "",
|
||
uConcentration: "",
|
||
uo2Density: "",
|
||
uEnrichment: "",
|
||
puConcentration: "",
|
||
puo2Density: "",
|
||
ePu238: "",
|
||
ePu239: "",
|
||
ePu240: "",
|
||
ePu241: "",
|
||
ePu242: "",
|
||
hno3Acidity: "",
|
||
h2c2o4Concentration: "",
|
||
organicRatio: "",
|
||
moistureContent: "",
|
||
iconBase64: ""
|
||
});
|
||
const josnInfo: any = ref({}) // 设备信息
|
||
const validator1 = (rule: any, value: any, callback: any) => {
|
||
if (!value || value === '') {
|
||
callback();
|
||
return;
|
||
}
|
||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||
callback(new Error('请输入有效的数字或小数'));
|
||
} else if (parseFloat(value) <= 0) {
|
||
callback(new Error('数字必须大于 0'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
const validator2 = (rule: any, value: any, callback: any) => {
|
||
if (!value || value === '') {
|
||
callback();
|
||
return;
|
||
}
|
||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||
callback(new Error('请输入有效的数字或小数'));
|
||
} else if (parseFloat(value) <= 0) {
|
||
callback(new Error('必须大于 0'));
|
||
}else if (parseFloat(value) > 1) {
|
||
callback(new Error('必须小于等于 1'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
const validator3 = (rule: any, value: any, callback: any) => {
|
||
if (!value || value === '') {
|
||
callback();
|
||
return;
|
||
}
|
||
let ePu238 = 0;
|
||
let ePu239 = 0;
|
||
let ePu240 = 0;
|
||
let ePu241 = 0;
|
||
let ePu242 = 0;
|
||
if(info.value.ePu238 != null && info.value.ePu238 != ""){
|
||
ePu238 = parseFloat(info.value.ePu238);
|
||
}
|
||
if(info.value.ePu239 != null && info.value.ePu239 != ""){
|
||
ePu239 = parseFloat(info.value.ePu239);
|
||
}
|
||
if(info.value.ePu240 != null && info.value.ePu240 != ""){
|
||
ePu240 = parseFloat(info.value.ePu240);
|
||
}
|
||
if(info.value.ePu241 != null && info.value.ePu241 != ""){
|
||
ePu241 = parseFloat(info.value.ePu241);
|
||
}
|
||
if(info.value.ePu242 != null && info.value.ePu242 != ""){
|
||
ePu242 = parseFloat(info.value.ePu242);
|
||
}
|
||
|
||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||
callback(new Error('请输入有效的数字或小数'));
|
||
} else if (parseFloat(value) <= 0) {
|
||
callback(new Error('请输入小数'));
|
||
}else if (ePu238 + ePu239 + ePu240 + ePu241 + ePu242 > 1.005 || ePu238 + ePu239 + ePu240 + ePu241 + ePu242 <0.995) {
|
||
callback(new Error(' PU占比相加必须等于1'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
//新建物料数据
|
||
const rules = ref({
|
||
name: [{ required: true, message: "请输入物料数据名称", trigger: "blur" }],
|
||
uConcentration: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
uo2Density: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
uEnrichment: [{
|
||
validator: validator2,
|
||
trigger: 'blur'
|
||
}],
|
||
puConcentration: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
puo2Density: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ePu238: [
|
||
{
|
||
validator: validator3,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ePu239: [
|
||
{
|
||
validator: validator3,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ePu240: [
|
||
{
|
||
validator: validator3,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ePu241: [
|
||
{
|
||
validator: validator3,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
ePu242: [
|
||
{
|
||
validator: validator3,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
|
||
|
||
|
||
|
||
hno3Acidity: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
h2c2o4Concentration: [
|
||
{
|
||
validator: validator1,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
organicRatio: [
|
||
{
|
||
validator: validator2,
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
moistureContent: [
|
||
{
|
||
validator: validator2,
|
||
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) => {
|
||
});
|
||
}
|
||
const iconBase64:any = ref("") // 物料颜色
|
||
function handleClick(item:any, index:any){
|
||
iconBase64.value = item.iconBase64
|
||
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-238占比",
|
||
value: item.ePu238,
|
||
unit: "",
|
||
},{
|
||
key: "PU-239占比",
|
||
value: item.ePu239,
|
||
unit: "",
|
||
},{
|
||
key: "PU-240占比",
|
||
value: item.ePu240,
|
||
unit: "",
|
||
},{
|
||
key: "PU-241占比",
|
||
value: item.ePu241,
|
||
unit: "",
|
||
},{
|
||
key: "PU-242占比",
|
||
value: item.ePu242,
|
||
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.key,
|
||
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,
|
||
ePu238: selectedMaterial.value.ePu238,
|
||
ePu239: selectedMaterial.value.ePu239,
|
||
ePu240: selectedMaterial.value.ePu240,
|
||
ePu241: selectedMaterial.value.ePu241,
|
||
ePu242: selectedMaterial.value.ePu242,
|
||
hno3Acidity: selectedMaterial.value.hno3Acidity,
|
||
h2c2o4Concentration: selectedMaterial.value.h2c2o4Concentration,
|
||
organicRatio: selectedMaterial.value.organicRatio,
|
||
moistureContent: selectedMaterial.value.moistureContent,
|
||
customAttrs: selectedMaterial.value.customAttrs,
|
||
iconBase64: iconBase64.value,
|
||
}
|
||
customAttrsData.value = []
|
||
if(selectedMaterial.value.customAttrs !=null && selectedMaterial.value.customAttrs != ""){
|
||
customAttrsData.value = JSON.parse(selectedMaterial.value.customAttrs)
|
||
}
|
||
isDialogMaterial.value = false
|
||
}
|
||
|
||
function uploadIconBaseChange(file:any){
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(file.raw);
|
||
reader.onload = () => {
|
||
info.value.iconBase64 =reader.result
|
||
};
|
||
reader.onerror = function(error) {
|
||
console.log("Error: ", error);
|
||
};
|
||
}
|
||
function delIconBase(){
|
||
info.value.iconBase64 = " "
|
||
}
|
||
|
||
</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: 280px" 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-238占比" prop="ePu238">
|
||
<el-input v-model="info.ePu238" style="width: 100%" placeholder="" @input="handleNumberInput('ePu238')"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<div class="materialmodel_dialog_display">
|
||
<el-form-item label="PU-239占比" prop="ePu239">
|
||
<el-input v-model="info.ePu239" style="width: 100%" placeholder="" @input="handleNumberInput('ePu239')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="PU-240占比" prop="ePu240">
|
||
<el-input v-model="info.ePu240" style="width: 100%" placeholder="" @input="handleNumberInput('ePu240')"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="materialmodel_dialog_display">
|
||
<el-form-item label="PU-241占比" prop="ePu241">
|
||
<el-input v-model="info.ePu241" style="width: 100%" placeholder="" @input="handleNumberInput('ePu241')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="PU-242占比" prop="ePu242">
|
||
<el-input v-model="info.ePu242" style="width: 100%" placeholder="" @input="handleNumberInput('ePu242')"></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>
|
||
<el-form-item label="物料颜色">
|
||
<el-color-picker-panel v-model="info.iconBase64" />
|
||
<div style="width: 240px;height: 100px;margin-left: 20px;" :style="{backgroundColor: info.iconBase64}"></div>
|
||
</el-form-item>
|
||
|
||
<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%; height: calc(100vh - 100px); overflow: auto;">
|
||
<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;margin-bottom: 10px;">
|
||
<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 class="custom_attrs_header" style="height: 90px;" v-if="ingredientData.length>0">
|
||
<div class="custom_attrs_content1" style="width: 60%;height: 90px;display: flex;align-items: center;justify-content: center;">颜色</div>
|
||
<div class="custom_attrs_content2" style="width: 40%;height: 90px;display: flex;align-items: center;justify-content: center;" >
|
||
<div style="width: 240px;height: 40px;" :style="{backgroundColor: iconBase64}"></div>
|
||
</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;
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
}
|
||
.materialmodel-iconBase64 img{
|
||
max-width: 200px;
|
||
max-height: 80px;
|
||
}
|
||
|
||
</style>
|
||
<style>
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
.newavatar-uploader-icon{
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 100px;
|
||
text-align: center;
|
||
}
|
||
.newavatar-uploader-text{
|
||
width: 100%;text-align: center;line-height: 20px;
|
||
font-family: 'Arial Normal', 'Arial';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #949494;
|
||
}
|
||
</style>
|
||
|
||
|