<script setup>
|
import request from "@/utils/request"
|
import {onMounted, ref, watch} from "vue";
|
import {useI18n} from "vue-i18n"
|
import {ElMessage} from "element-plus"
|
import {useRouter,useRoute} from "vue-router"
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
|
|
let basic = ref({
|
basicType : ['',''],
|
input:'',
|
nickname:''
|
})
|
let options=ref([
|
{ "label": t('orderBasicData.order'),
|
"value": "order",
|
"children": [
|
{
|
"label": t('orderBasicData.orderType'),
|
"value": "orderType"
|
},
|
{
|
"label": t('orderBasicData.orderClassify'),
|
"value": "orderClassify"
|
},
|
{
|
"label": t('orderBasicData.icon'),
|
"value": "icon"
|
},
|
{
|
"label": t('orderBasicData.packType'),
|
"value": "packType"
|
},
|
{
|
"label": t('orderBasicData.alType'),
|
"value": "alType"
|
},
|
{
|
"label": t('orderBasicData.saleMan'),
|
"value": "saleMan"
|
}
|
]
|
},
|
{
|
"label": t('orderBasicData.product'),
|
"value": "product",
|
"children": [
|
{
|
"label": t('orderBasicData.stuffThickness'),
|
"value": "stuffThickness"
|
},
|
{
|
"label": t('orderBasicData.stuffColor'),
|
"value": "stuffColor"
|
},
|
{
|
"label": t('orderBasicData.stuffCraft'),
|
"value": "stuffCraft"
|
},
|
{
|
"label": t('orderBasicData.stuffPosition'),
|
"value": "stuffPosition"
|
},
|
{
|
"label": t('orderBasicData.stuffLowE'),
|
"value": "stuffLowE"
|
},
|
{
|
"label": t('orderBasicData.InterlayerThickness'),
|
"value": "InterlayerThickness"
|
},
|
{
|
"label": t('orderBasicData.InterlayerType'),
|
"value": "InterlayerType"
|
},
|
{
|
"label": t('orderBasicData.InterlayerColor'),
|
"value": "InterlayerColor"
|
},
|
{
|
"label": t('orderBasicData.process'),
|
"value": "process"
|
},
|
{
|
"label": t('orderBasicData.hollowThickness'),
|
"value": "hollowThickness"
|
},
|
{
|
"label": t('orderBasicData.hollowGasType'),
|
"value": "hollowGasType"
|
},
|
{
|
"label": t('orderBasicData.hollowType'),
|
"value": "hollowType"
|
},
|
{
|
"label": t('orderBasicData.hollowGlueDepth'),
|
"value": "hollowGlueDepth"
|
}
|
]
|
},
|
{
|
"children": [
|
{
|
"label": t('orderBasicData.paymentTerms'),
|
"value": "paymentTerms"
|
},
|
{
|
"label": t('orderBasicData.payMethod'),
|
"value": "payMethod"
|
}
|
],
|
"label": t('orderBasicData.delivery'),
|
"value": "delivery"
|
}
|
])
|
|
let props = defineProps({
|
rowIndex:{
|
Object,
|
default: null
|
}
|
})
|
onMounted(() =>{
|
if(props.rowIndex){
|
basic.value.basicType[0] = props.rowIndex.basicType
|
basic.value.basicType[1] = props.rowIndex.basicCategory
|
basic.value.input = props.rowIndex.basicName
|
basic.value.nickname = props.rowIndex.nickname
|
}
|
})
|
|
const emit = defineEmits(['gaveParent'])
|
const saveBasicData = () =>{
|
if(basic.value.basicType[1]==="hollowThickness"||basic.value.basicType[1]==="stuffThickness"||basic.value.basicType[1]==="InterlayerThickness"){
|
if(!basic.value.input.includes("mm")){
|
basic.value.input=basic.value.input+"mm"
|
}
|
}
|
basic.value.input=basic.value.input.trim()
|
request.post(`/basicData/addBasicData`, basic.value).then(res => {
|
if (res.data) {
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
emit('gaveParent', true)
|
}
|
})
|
}
|
const updateBasicData = () =>{
|
if(basic.value.basicType[1]==="hollowThickness"||basic.value.basicType[1]==="stuffThickness"||basic.value.basicType[1]==="InterlayerThickness"){
|
if(!basic.value.input.includes("mm")){
|
basic.value.input=basic.value.input+"mm"
|
}
|
}
|
let submitArr = props.rowIndex
|
submitArr.basicType = basic.value.basicType[0]
|
submitArr.basicCategory = basic.value.basicType[1]
|
submitArr.basicName = basic.value.input.trim()
|
submitArr.nickname = basic.value.nickname
|
request.post(`/basicData/updateBasicData`, submitArr).then(res => {
|
if (res.data) {
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
emit('gaveParent', true)
|
}
|
})
|
|
}
|
|
const handleChange = (value) => {
|
const filterArr = options.value.filter((item) =>item.value === value[0]
|
).map((item) =>item.children.filter((item) =>item.value === value[1]))
|
}
|
|
const changeFile = (file) => {
|
const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' ;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isJPG) {
|
ElMessage.warning(t('orderBasicData.msg2'))
|
return
|
}
|
if (!isLt2M) {
|
ElMessage.warning(t('orderBasicData.msg1'))
|
return
|
}
|
|
return new Promise((resolve, reject) => {
|
let reader = new FileReader();
|
reader.readAsDataURL(file.raw);
|
reader.onload = (e) => {
|
resolve(e.target.result);
|
basic.value.nickname=e.target.result;
|
};
|
});
|
}
|
|
|
</script>
|
|
<template>
|
<div>
|
<el-row>
|
<el-col :span="4">{{ $t('orderBasicData.page.searchOrderBasicData') }}:</el-col>
|
<el-col :span="12">
|
<el-cascader
|
v-model="basic.basicType"
|
@change="handleChange"
|
:options="options"
|
:placeholder="$t('processCard.pleaseSelect')"
|
:disabled="props.rowIndex"
|
/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">{{ $t('orderBasicData.name') }}:</el-col>
|
<el-col :span="12">
|
<el-input v-model="basic.input"/>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4">{{ $t('orderBasicData.alias') }}:</el-col>
|
<el-col :span="12">
|
<el-input v-if="basic.basicType.length>0 && basic.basicType[1]!=='process'" v-model="basic.nickname"/>
|
<el-select v-model="basic.nickname" v-else>
|
<el-option :label="$t('orderBasicData.commonProcess')" value="" />
|
<el-option :label="$t('orderBasicData.laminatingProcessA')" value="stepA" />
|
<el-option :label="$t('orderBasicData.laminatingProcessB')" value="stepB" />
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-row v-if="basic.basicType.length!==0 && basic.basicType[1]==='icon'" >
|
<el-col :span="4"></el-col>
|
<el-col :span="12">
|
<el-upload
|
v-model="basic.nickname"
|
:limit="1"
|
:on-change="changeFile"
|
class="upload-demo"
|
ref="upload"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:file-list="fileList"
|
:auto-upload="false">
|
<el-button slot="trigger" size="small" type="primary" >{{ $t('orderBasicData.selectFile') }}</el-button>
|
<div slot="tip" class="el-upload__tip">{{ $t('orderBasicData.msg3') }}</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="4"></el-col>
|
<el-col :span="12">
|
<el-button v-show="!props.rowIndex" @click="saveBasicData" type="primary">{{ $t('basicData.insert') }}</el-button>
|
<el-button v-show="props.rowIndex" @click="updateBasicData" type="primary">{{ $t('basicData.update') }}</el-button>
|
|
</el-col>
|
</el-row>
|
|
</div>
|
</template>
|
|
<style scoped>
|
div{
|
text-align: center;
|
}
|
.el-row{
|
margin-top: 10px;
|
}
|
</style>
|
