Merge branch 'master' of http://10.153.19.25:10101/r/ERP_override

廖井涛

2024-03-13 5ca512048bcb9fa1e29fa924a468ba1302c6c243

 north-glass-erp/northglass-erp/src/views/sd/product/CreateProduct.vue

New file
@@ -0,0 +1,912 @@
<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([
  '彩釉',
  '蒙砂',
  '镀膜',
  '贴膜',
  '喷砂',
  '磨边'
])
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>

<template>
  <div id="main-div">
    <div class="glass-param inline-flex"
         :style="{
          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 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 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 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 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-process">
        <h5>工艺属性</h5>
        <el-checkbox
            v-model="processChecked"
            v-for="item in BasicData.process"
            :label="item.basicName"
            class="glass-process-checkbox"
             size="small" />
      </div>
      <div class="line"/>
      <div class="glass-spacer">
        <div class="glass-spacer-jc">
          <el-select
              v-model="hollowBasic.thickness"
              size="small"
              style="width: 100px"
              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="*充气方式:" >
            <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="*封胶:" >
            <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="*默认胶深:" >
            <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="*夹层厚度:" >
            <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="*类型:" >
            <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="*颜色:" >
            <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"/>
      <div class="glass-oneSlice">
        <div class="glass-oneSlice-type">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content ep-bg-purple" >
                <el-text class="mx-1"  style="margin-left: 0.5rem" >单片玻璃属性：</el-text>
              </div>
            </el-col>
            <el-col :span="13">
              <div class="grid-content ep-bg-purple" >
                <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>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="glass-oneSlice-type">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content ep-bg-purple" >
                <el-text class="mx-1"  style="margin-left: 0.5rem"  >工艺流程属性：</el-text>
              </div>
            </el-col>
            <el-col :span="13">
              <div class="grid-content ep-bg-purple" >
                <el-input :value="processChecked.join('->')" size="small" disabled  />
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content ep-bg-purple" >
                <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>
        </div>
      </div>
      <div class="glass-other">
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1"
                       style="margin-left: 0.5rem;text-align: center">
                快速查询：
              </el-text>
              <el-input v-model="productTotal.query" size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1"
                       style="margin-left: 0.5rem;text-align: center">
                计重厚度：
              </el-text>
              <el-input v-model="productTotal.thickness" size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1"
                       style="margin-left: 0.5rem;text-align: center">
                厚度：
              </el-text>
              <el-input v-model="productTotal.totalThickness"  size="small" disabled  />
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1"
                       style="margin-left: 0.5rem;text-align: center">
                备注：
              </el-text>
              <el-input v-model="productTotal.remarks"  size="small"   />
            </div>
          </el-col>
        </el-row>

      </div>
    </div>


    <div class="glass-part inline-flex"
         :style="{
          boxShadow: `var(--el-box-shadow-lighter)`,
        }">
      <div class="glass-part-all">
        <el-row >
          <el-col :span="4">
            <div class="grid-content ep-bg-purple" >
              <el-text class="mx-1" size="large"  >产品名称：</el-text>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content ep-bg-purple" >
              <el-input :value="productName" size="large" disabled  />
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="glass-part-detail">
        <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">修改玻璃</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="item.detail"
                size="small"
                disabled  />
          </el-col>
          <el-col
              v-show="index+1 === productDetailList.length"
              :span="4">
            <el-button
                @click="deleteProductDetail(index)"
                size="small"
                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>{{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>

<style scoped >
  #main-div{
    width: 100%;
    height: 100%;
  }
  .glass-param{
    height: 100%;
    width: 59.5%;
    float: left;
  }
  .glass-part{
    height: 100%;
    width: 39.5%;
    float: right;
  }
  .glass-type{
    width: 100%;
    height: 12%;

  }
  .glass-dispose{
    width: 100%;
    height: 5%;
  }
  .glass-dispose-detail{
    margin-top: 0.5rem;
    margin-left: 0.5rem;

  }
  .glass-dispose-detail-1{
    width:50%;
    height: 15vh;
    float: left;
  }
  .glass-dispose-detail-1 p{
    height: 80%;
    float: left;
    margin-top: 2%;
  }
  .glass-dispose-detail-list{
    width: 45%;
    float: left;
    height: 25px;
  }
  .dispose-input{
    width:70px;
    margin-left: 1rem;
  }
  .glass-process{
    width: 100%;
    height: 25%;
  }
  .glass-process-checkbox{
    margin-left: 0.5rem;
    float: left;
  }
  .glass-spacer{
    width: 100%;
    height: 15%;
    margin-bottom: 0;
  }
  .glass-spacer div{
    width: 100%;
    height: 50%;
  }
  .glass-oneSlice{
    width: 100%;
    height: 10%;
    //background-color: #1890FF;
  }
  .glass-oneSlice-type{
    width: 100%;
    height: 20%;
  }
  .glass-other{
    width: 100%;
    height: 10%;
  }
  .glass-part-all{
    margin-left: 2%;
    margin-top: 2%;
    width: 96%;
    height: 10%;
  }
  .glass-part-detail{
    margin-left: 2%;
    margin-top: 2%;
    width: 96%;
    height: 75%;
  }



  /*玻璃组合明细 glass-part*/

  h5{
    margin-top: 0.5rem;
    margin-left: 0.5rem;
  }
/*布局css*/
  .el-row {
    margin-bottom: 20px;
    margin-top: 1rem;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
/*  .el-col{
    background-color: #1890FF;
  }*/
  .line {
    width: 100%;
    height: 0;
    border-top: 2px solid var(--el-border-color);
  }

</style>