廖井涛
2024-03-13 5ca512048bcb9fa1e29fa924a468ba1302c6c243
north-glass-erp/northglass-erp/src/views/sd/product/CreateProduct.vue
@@ -1,4 +1,16 @@
<script setup>
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import {ElMessage} from "element-plus"
import {computed, onMounted, ref} from "vue"
import  useUserInfo from "@/stores/userInfo"
import {useRouter,useRoute} from "vue-router"
import GlassType from "@/components/sd/product/GlassType.vue"
import useProductGlassTypeStore from "@/stores/sd/product/productGlassType"
const router = useRouter()
const route = useRoute()
let  userInfo = useUserInfo()
const disposeList = $ref([
  '彩釉',
  '蒙砂',
@@ -7,22 +19,368 @@
  '喷砂',
  '磨边'
])
let processList = $ref([
    '磨边',
    '镀膜',
    '倒角',
    '清洗',
    '打孔',
    '挖缺',
    '挖槽',
    '水切割',
    '丝印',
    '半钢化',
    '钢化',
    '夹层',
    '中空',
    '包装'
])
let BasicData = ref({
  stuffColor:null,
  stuffCraft:null,
  stuffLowE:null,
  stuffPosition:null,
  stuffThickness:null,
  //夹层数据
  InterlayerType:null,
  InterlayerThickness:null,
  InterlayerColor:null,
  //中空数据
  hollowGasType:null,
  hollowGlueDepth:null,
  hollowThickness:null,
  hollowType:null,
  //流程
  process:null
})
let stuff = ref({
  thickness:'',
  color:'',
  craft:'',
  position:'',
  lowE:''
})
let processChecked = ref([])
let hollowBasic = ref({
  thickness:"",
  gasType:"",
  Type:"",
  GlueDepth:""
})
let InterlayerBasic = ref({
  thickness:"",
  color:"",
  type:""
})
let productDetailList = ref([])
let productTotal = ref({
  productName:'',
  query:'',
  remarks:'',
  thickness:'',
  totalThickness:'',
  typeId:'',
  creator:userInfo.user.userName
})
let productGlassTypeStore = useProductGlassTypeStore()
productGlassTypeStore.GlassType=['','']
//页面加载请求
request.get(`/basicData/BasicDataByType/product`).then((res) => {
  if(res.code==200){
    BasicData.value = res.data
  }else{
    ElMessage.warning(res.msg)
  }
})
onMounted(()=>{
  const str = route.query.id
  if (typeof str === 'undefined' || str === null || str === '' || str === '\n' || str === '\r'){
    return
  }
  request.post(`/product/selectProductById/${str}`).then((res) => {
    if(res.code==200){
      productDetailList.value =  res.data.detail
      productDetailList.value.forEach((item)=>{
        item.separation = JSON.parse(item.separation)
      })
      productTotal.value = res.data.title
      //BasicData.value = res.data
    }else{
      ElMessage.warning(res.msg)
    }
  })
})
const saveProduct = () => {
  if(productDetailList.value.length===0){
    ElMessage.warning("请添加产品详情")
    return
  }else if(productDetailList.value[productDetailList.value.length-1].detailType!=='glass'){
    ElMessage.warning("产品详情最后一条不是玻璃,请完善")
    return
  }else if(productGlassTypeStore.GlassType[1]==='' || productGlassTypeStore.GlassType[1]===null){
    ElMessage.warning("请选择产品类别")
    return
  }
  productTotal.value.typeId =  productGlassTypeStore.GlassType[1]
  let productName = ""
  productDetailList.value.forEach(item =>{
    switch(item.detailType){
      case 'glass' :{
        productName+=item.detail
        break
      }
      case 'Interlayer' :{
        productName+='+'+item.detail+"+"
        break
      }
      case 'hollow' :{
        productName+='*'+item.detail+"*"
        break
      }
    }
  })
  productTotal.value.productName=productName
  let product = {
    title: productTotal.value,
    detail:productDetailList.value
  }
  request.post(`/product/saveProduct`,product).then((res) =>{
    if(res.code==200){
      ElMessage.success("创建成功")
      router.push("/main/product/selectProduct")
    }
  })
}
//审核产品状态
const updateProductState =  (state) => {
  request.post(`/product/updateProductStateById/${productTotal.value.id}/${state}`).then((res) =>{
    if(res.code==200){
      ElMessage.success("操作成功")
      //router.go(0)
      router.push({path:'/main/product/createProduct',query:{id:productTotal.value.id,random:Math.random()}})
    }else{
      ElMessage.error("操作失败")
    }
  })
}
const reset = () => {
  processChecked.value=[]
  Object.keys(stuff.value).forEach((item,index)=>{
    stuff.value[item]=''
  })
}
const glassSure =  () => {
  let childName = ''
  Object.keys(stuff.value).forEach((item,index)=>{
    childName+=stuff.value[item]
  })
  let rege = /^\s*$/
  if(rege.test(childName) || processChecked.value.length===0){
    ElMessage.warning('请输入产品材料属性与工艺属性')
    return
  }
  let productDetail = {
    detailType:'glass',
    detail:childName,
    process:processChecked.value.join('->'),
    separation:Object.assign({}, stuff.value)
  }
  if(glassFlag.value.flag){
    if(productDetailList.value.length ===0 ){
      productDetailList.value.push(productDetail)
    }else{
      if (productDetailList.value[productDetailList.value.length-1].detailType === 'glass') {
        ElMessage.warning('请先选择间隔物')
        return
      }
      productDetailList.value.push(productDetail)
    }
  }else{
    productDetailList.value[glassFlag.value.index] = productDetail
  }
  reset()
}
//添加中空间隔物
const addHollow = () => {
  let childName = ''
  try {
    Object.keys(hollowBasic.value).forEach((item, index) => {
      if (hollowBasic.value[item] === '') {
        throw new Error("请选择全部中空间隔物下拉框")
      }
      childName += hollowBasic.value[item]
    })
  }catch (e){
    ElMessage.warning(e.message)
    return
  }
  let hollowDetail = {
    detailType:'hollow',
    detail:childName,
    separation:Object.assign({}, hollowBasic.value)
  }
  if(hollowFlag.value.flag){
    if (productDetailList.value.length ===0) {
      ElMessage.warning('请先选择产品')
      return
    }else if(productDetailList.value[productDetailList.value.length-1].detailType !== 'glass'){
      ElMessage.warning('请先选择产品')
      return
    }
    productDetailList.value.push(Object.assign({},hollowDetail))
  }else {
    productDetailList.value[hollowFlag.value.index] = hollowDetail
  }
  Object.keys(hollowBasic.value).forEach((item,index)=>{
    hollowBasic.value[item]=''
  })
}
//添加夹层间隔物
const addInterlayer = () => {
  let childName = ''
  try {
    Object.keys(InterlayerBasic.value).forEach((item, index) => {
      if (InterlayerBasic.value[item] === '') {
        throw new Error("请选择全部中空间隔物下拉框")
      }
      childName += InterlayerBasic.value[item]
    })
  }catch (e){
    ElMessage.warning(e.message)
    return
  }
  let InterlayerDetail = {
    detailType:'Interlayer',
    detail:childName,
    separation:Object.assign({}, InterlayerBasic.value)
  }
  if(InterlayerFlag.value.flag){
    if (productDetailList.value.length ===0) {
      ElMessage.warning('请先选择产品')
      return
    }else if(productDetailList.value[productDetailList.value.length-1].detailType !== 'glass'){
      ElMessage.warning('请先选择产品')
      return
    }
    productDetailList.value.push(Object.assign({},InterlayerDetail))
  }else{
    productDetailList.value[InterlayerFlag.value.index] = InterlayerDetail
  }
  Object.keys(InterlayerBasic.value).forEach((item,index)=>{
    InterlayerBasic.value[item]=''
  })
}
const deleteProductDetail =  (index) => {
  const detailType = productDetailList.value[index].detailType
  switch (detailType) {
    case 'glass':{
      glassFlag.value = {
        flag:true,
        index:null
      }
      break
    }
    case 'Interlayer':{
      InterlayerFlag.value = {
        flag:true,
        index:null
      }
      break
    }
    case 'hollow':{
      hollowFlag.value = {
        flag:true,
        index:null
      }
    }
  }
  productDetailList.value.splice(index,1)
}
let glassFlag = ref({
  flag:true,
  index:null
})
const updateGlass = (index) => {
  Object.keys(stuff.value).forEach((item)=>{
    stuff.value[item]=productDetailList.value[index].separation[item]
  })
  processChecked.value = productDetailList.value[index].process.split("->")
  glassFlag.value.flag=false
  glassFlag.value.index=index
}
const updateGlassSure = ()=> {
  glassSure()
  glassFlag.value.flag=true
  glassFlag.value.index=null
}
let InterlayerFlag = ref({
  flag:true,
  index:null
})
const updateInterlayer  = (index) => {
  Object.keys(InterlayerBasic.value).forEach((item)=>{
    InterlayerBasic.value[item]=productDetailList.value[index].separation[item]
  })
  InterlayerFlag.value.flag=false
  InterlayerFlag.value.index=index
}
const updateInterlayerSure = () => {
  addInterlayer()
  InterlayerFlag.value.flag=true
  InterlayerFlag.value.index=null
}
let  hollowFlag = ref({
  flag:true,
  index:null
})
const updateHollow = (index) => {
  Object.keys(hollowBasic.value).forEach((item)=>{
    hollowBasic.value[item]=productDetailList.value[index].separation[item]
  })
  hollowFlag.value.flag=false
  hollowFlag.value.index=index
}
const updateHollowSure = () => {
  addHollow()
  hollowFlag.value.flag=true
  hollowFlag.value.index=null
}
const productName = computed(() =>{
  let productName = ""
  productDetailList.value.forEach(item =>{
    switch(item.detailType){
      case 'glass' :{
        productName+=item.detail
        break
      }
      case 'Interlayer' :{
        productName+='+'+item.detail+"+"
        break
      }
      case 'hollow' :{
        productName+='*'+item.detail+"*"
        break
      }
    }
  })
  return productName
})
</script>
@@ -33,67 +391,102 @@
          boxShadow: `var(--el-box-shadow-lighter)`,
        }"
    >
      <div class="glass-dispose">
        <!--        <h5>表面处理</h5>-->
<!--        <h5>玻璃类别</h5>-->
        <div class="glass-dispose-detail">
          <glass-type   style="float: left;margin-left: -0.5rem" />
          <!--          <div v-for="n in 2" class="glass-dispose-detail-1">
                      <p style="writing-mode: vertical-rl;">
                        {{n===1?'第一面':'第二面'}}
                      </p>
                      <div class="glass-dispose-detail-list"
                           v-for="(item,index) in disposeList"
                      >
                        <el-checkbox
                            :label="item" size="large" />
                        <el-input
                            v-if="index==0 && n==1"
                            class="dispose-input"
                            size="small"
                            clearable />
                      </div>
                    </div>-->
        </div>
      </div>
      <div class="line"/>
      <div class="glass-type">
        <h5>材料属性</h5>
        <el-row :gutter="50">
<!--          <el-col :span="6"></el-col>-->
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
              <el-select size="small" clearable placeholder="*厚度:" />
              <el-select v-model="stuff.thickness" size="small" clearable placeholder="*厚度:" >
                <el-option v-for="item in BasicData.stuffThickness"
                           :key="item.id"
                           :label="item.basicName"
                           :value="item.basicName"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content ep-bg-purple" >
              <el-select v-model="stuff.color" size="small" clearable placeholder="*颜色:"  filterable>
                <el-option v-for="item in BasicData.stuffColor"
                           :key="item.id"
                           :label="item.basicName"
                           :value="item.basicName"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
              <el-select size="small" clearable placeholder="*颜色:" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" >
              <el-select size="small" clearable placeholder="*工艺属性:" />
              <el-select v-model="stuff.craft" size="small" clearable placeholder="*工艺属性:" >
                <el-option v-for="item in BasicData.stuffCraft"
                           :key="item.id"
                           :label="item.basicName"
                           :value="item.basicName"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
              <el-select size="small"  clearable placeholder="位置:" />
              <el-select v-model="stuff.position" size="small"  clearable placeholder="位置:" >
                <el-option v-for="item in BasicData.stuffPosition"
                           :key="item.id"
                           :label="item.basicName"
                           :value="item.basicName"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" >
              <el-select size="small"  clearable placeholder="LOW-E面:" />
              <el-select v-model="stuff.lowE" size="small"  clearable placeholder="LOW-E面:" >
                <el-option v-for="item in BasicData.stuffLowE"
                           :key="item.id"
                           :label="item.basicName"
                           :value="item.basicName"
                />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="line"/>
      <div class="glass-dispose">
        <h5>表面处理</h5>
        <div class="glass-dispose-detail">
          <div v-for="n in 2" class="glass-dispose-detail-1">
            <p style="writing-mode: vertical-rl;">
              {{n===1?'第一面':'第二面'}}
            </p>
            <div class="glass-dispose-detail-list"
                 v-for="(item,index) in disposeList"
            >
              <el-checkbox
                  :label="item" size="large" />
              <el-input
                  v-if="index==0 && n==1"
                  class="dispose-input"
                  size="small"
                  clearable />
            </div>
          </div>
        </div>
      </div>
      <div class="line"/>
      <div class="glass-process">
        <h5>材料属性</h5>
        <h5>工艺属性</h5>
        <el-checkbox
            v-for="item in processList"
            :label="item"
            v-model="processChecked"
            v-for="item in BasicData.process"
            :label="item.basicName"
            class="glass-process-checkbox"
             size="small" />
      </div>
@@ -101,45 +494,110 @@
      <div class="glass-spacer">
        <div class="glass-spacer-jc">
          <el-select
              v-model="hollowBasic.thickness"
              size="small"
              style="width: 100px"
              clearable placeholder="*中空厚度:" />
              clearable placeholder="*中空厚度:" >
            <el-option v-for="item in BasicData.hollowThickness"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-select
              v-model="hollowBasic.gasType"
              size="small"
              style="width: 100px"
              clearable placeholder="*充气方式:" />
              clearable placeholder="*充气方式:" >
            <el-option v-for="item in BasicData.hollowGasType"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-select
              v-model="hollowBasic.Type"
              size="small"
              style="width: 100px"
              clearable placeholder="*封胶:" />
              clearable placeholder="*封胶:" >
            <el-option v-for="item in BasicData.hollowType"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-select
              v-model="hollowBasic.GlueDepth"
              size="small"
              style="width: 100px"
              clearable placeholder="*默认胶深:" />
              clearable placeholder="*默认胶深:" >
            <el-option v-for="item in BasicData.hollowGlueDepth"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-button
              v-if="hollowFlag.flag"
              @click="addHollow"
              size="small"
              type="primary"
              round>中空间隔物</el-button>
          <el-button
              v-else
              @click="updateHollowSure"
              size="small"
              type="primary"
              round>中空间隔物修改</el-button>
        </div>
        <div class="glass-spacer-zk">
          <el-select
              v-model="InterlayerBasic.thickness"
              size="small"
              style="width: 100px"
              clearable placeholder="*夹层厚度:" />
              clearable placeholder="*夹层厚度:" >
            <el-option v-for="item in BasicData.InterlayerThickness"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-select
              v-model="InterlayerBasic.type"
              size="small"
              style="width: 100px"
              clearable placeholder="*类型:" />
              clearable placeholder="*类型:" >
            <el-option v-for="item in BasicData.InterlayerType"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-select
              v-model="InterlayerBasic.color"
              size="small"
              style="width: 100px"
              clearable placeholder="*颜色:" />
              clearable placeholder="*颜色:" >
            <el-option v-for="item in BasicData.InterlayerColor"
                       :key="item.id"
                       :label="item.basicName"
                       :value="item.basicName"
            />
          </el-select>
          <el-button
              v-if="InterlayerFlag.flag"
              @click="addInterlayer"
              size="small"
              type="primary"
              style="margin-left: 100px"
              round>夹层间隔物</el-button>
          <el-button
              v-else
              @click="updateInterlayerSure"
              size="small"
              type="primary"
              style="margin-left: 100px"
              round>夹层间隔物修改</el-button>
        </div>
      </div>
      <div class="line"/>
@@ -153,12 +611,13 @@
            </el-col>
            <el-col :span="13">
              <div class="grid-content ep-bg-purple" >
                <el-input size="small" disabled  />
                <el-input :value="stuff.thickness+stuff.color+stuff.craft+stuff.position+stuff.lowE" size="small" disabled  />
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content ep-bg-purple" >
                <el-button
                    @click="reset"
                    size="small"
                    type="primary"
                    round>重置</el-button>
@@ -175,15 +634,21 @@
            </el-col>
            <el-col :span="13">
              <div class="grid-content ep-bg-purple" >
                <el-input size="small" disabled  />
                <el-input :value="processChecked.join('->')" size="small" disabled  />
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content ep-bg-purple" >
                <el-button
                <el-button v-if="glassFlag.flag"
                    @click="glassSure"
                    size="small"
                    type="primary"
                    round>确认</el-button>
                <el-button v-else
                           @click="updateGlassSure"
                           size="small"
                           type="primary"
                           round>修改</el-button>
              </div>
            </el-col>
          </el-row>
@@ -197,7 +662,7 @@
                       style="margin-left: 0.5rem;text-align: center">
                快速查询:
              </el-text>
              <el-input size="small" disabled  />
              <el-input v-model="productTotal.query" size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
@@ -206,7 +671,7 @@
                       style="margin-left: 0.5rem;text-align: center">
                计重厚度:
              </el-text>
              <el-input size="small" disabled  />
              <el-input v-model="productTotal.thickness" size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
@@ -215,7 +680,7 @@
                       style="margin-left: 0.5rem;text-align: center">
                厚度:
              </el-text>
              <el-input size="small" disabled  />
              <el-input v-model="productTotal.totalThickness"  size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
@@ -224,7 +689,7 @@
                       style="margin-left: 0.5rem;text-align: center">
                备注:
              </el-text>
              <el-input size="small" disabled  />
              <el-input v-model="productTotal.remarks"  size="small"   />
            </div>
          </el-col>
        </el-row>
@@ -246,65 +711,77 @@
          </el-col>
          <el-col :span="20">
            <div class="grid-content ep-bg-purple" >
              <el-input size="large" disabled  />
              <el-input :value="productName" size="large" disabled  />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="glass-part-detail">
        <el-row style="width: 90%" >
          <el-col :span="4">
        <el-row style="width: 90%"  v-for="(item,index) in productDetailList">
          <el-col :span="4" v-show="item.detailType === 'glass'">
            <el-button
                @click = "updateGlass(index)"
                size="small"
                type="primary"
                round>修改玻璃</el-button>
                type="primary">修改玻璃</el-button>
          </el-col>
          <el-col :span="4" v-show="item.detailType === 'Interlayer'">
            <el-button
                @click = "updateInterlayer(index)"
                size="small"
                type="primary">修改夹层</el-button>
          </el-col>
          <el-col :span="4" v-show="item.detailType === 'hollow'">
            <el-button
                @click = "updateHollow(index)"
                size="small"
                type="primary">修改中空</el-button>
          </el-col>
          <el-col :span="16">
            <el-input
                value="5mm白玻"
                :value="item.detail"
                size="small"
                disabled  />
          </el-col>
        </el-row>
        <el-row style="width: 90%" >
          <el-col :span="4">
          <el-col
              v-show="index+1 === productDetailList.length"
              :span="4">
            <el-button
                @click="deleteProductDetail(index)"
                size="small"
                type="primary"
                round>修改夹层</el-button>
          </el-col>
          <el-col :span="16">
            <el-input
                value="5mmPVB透明"
                size="small"
                disabled  />
          </el-col>
        </el-row>
        <el-row style="width: 90%" >
          <el-col :span="4">
            <el-button
                size="small"
                type="primary"
                round>修改玻璃</el-button>
          </el-col>
          <el-col :span="16">
            <el-input
                value="5mm白玻"
                size="small"
                disabled  />
                type="primary">删除</el-button>
          </el-col>
        </el-row>
      </div>
      <el-button
          :disabled="productTotal.state===1"
          @click="saveProduct"
          style="float: right;
          margin-right: 0.5rem;"
          size="large"
          type="primary"
          round>重置</el-button>
          round>{{productTotal.id?'修改':'创建'}}</el-button>
      <el-button
          v-if="productTotal.state===0"
          @click="updateProductState(1)"
          style="float: right;
          margin-right: 0.5rem;"
          size="large"
          type="primary"
          round>审核</el-button>
      <el-button
          v-else-if="productTotal.state===1"
          @click="updateProductState(0)"
          style="float: right;
          margin-right: 0.5rem;"
          size="large"
          type="primary"
          round>反审</el-button>
    </div>
  </div>
</template>
@@ -330,7 +807,7 @@
  }
  .glass-dispose{
    width: 100%;
    height: 20%;
    height: 5%;
  }
  .glass-dispose-detail{
    margin-top: 0.5rem;