yos_web/buildAnnexation/ZB/questJs/Servicesupport.js

const { createApp, ref ,onMounted,createVNode, render,computed,watch} = Vue

createApp({
  setup() {
    watch(() => tool.loading,(to, from) => {
    })
    onMounted(()=>{
      serviceOption()
      getEnterpriseData()
    })
    const formData = ref({
        sa_endcustserviceorderid:0,
        siteid:"HY",
        servicetype:"",
        sys_enterpriseid:"0",
        enterprisename:"",
        class1:"",
        class2:"",
        province:"",
        city:"",
        county:"",
        address:"",
        name:"",
        phonenumber:"",
        scenecontactphonenumber:'',
        hassncode:false,
        sncodereason:"",
        remarks:'',
        sncodeinfos0:'',
        sncodeinfos:[{
          "sa_endcustserviceorder_snid": 0,
          "sncode":"",
          "sa_orderid":"",  //后期不用传，前期测试传
          "sonum":""  //后期不用传
        }]
    })

    const restForm = ()=>{
      formData.value = {
        sa_endcustserviceorderid:0,
        siteid:"HY",
        servicetype:"",
        sys_enterpriseid:"0",
        enterprisename:"",
        class1:"",
        class2:"",
        province:"",
        city:"",
        county:"",
        address:"",
        name:"",
        phonenumber:"",
        scenecontactphonenumber:'',
        hassncode:false,
        sncodereason:"",
        remarks:'',
        sncodeinfos0:'',
        sncodeinfos:[{
          "sa_endcustserviceorder_snid": 0,
          "sncode":"",
          "sa_orderid":"",  //后期不用传，前期测试传
          "sonum":""  //后期不用传
        }]
      }
    }
    // 判断是否登陆,根据登陆角色类型跳转不同页面
    const isLogin = (type)=>{
      sessionStorage.setItem('supporttype',type)
      if (!sessionStorage.getItem('loginInfo')){
        $('#myModal').modal('show')
      } else {
        let user = sessionStorage.getItem('loginInfo')
        user = JSON.parse(user)
        if (type == 'apply') {
          $('#myModal').modal('hide')
          let link = {
            Official:'./ServiceOfficialApplyForm.html',
            tourist:'./ServiceOfficial.html'
          }
          linkOf(link[user.type])
        } else {
          let link = {
            Official:'./ServiceOfficialApplyList.html',
            tourist:'./ServiceOfficialReservation.html'
          }
          linkOf(link[user.type])
        }
      }
    }
    
    // 跳转
    const linkOf = (url)=> {
      window.location.href = url
    }

    // 登陆账号验证码数据
    const form = ref({
      phoneNumber:'',
      verifyCode:''
    })
    const isSend = computed(()=>{
      return time.value === 0 ? false : true
    })

    // 服务类型数据
    const serviceOptionData = ref({})
    const serviceOption = async ()=>{
      const res = await instance.post('',{
        "id":20240902102603,
        "content": {
          "siteid":"HY",
          "customerphone":JSON.parse(sessionStorage.getItem('loginInfo')).customerphone,
        }
      })
      serviceOptionData.value = res.data.data
    }
    // 选择服务类型
    const onChangeService = (item,key)=>{
      formData.value[key] = item
      console.log(formData.value)
    }
    
    // 客诉大类数据
    const serviceKSOptionData = ["内漏", "外漏", "性能失效", "配件损坏或遗失", "外观问题", "异响或抖动", "打不开/不通水", "扭矩大", "其他"]

    // 应用系统数据

    const serviceSysOptionData = ["暖通系统", "消防系统", "其他"]

    //无码原因

    const noCodeReasonData = ['sn码丢失','sn码模糊','其他']

    // 根据登录手机查询企业信息

    const getEnterpriseData = async ()=>{
      if (!JSON.parse(sessionStorage.getItem('loginInfo'))) return false
      const res = await instance.post('',{
        "id":20240902144803,
        "content": {
          "siteid":"HY",
          "phonenumber":JSON.parse(sessionStorage.getItem('loginInfo')).customerphone,
        }
      })
      if (res.data.data[0]) {
        const {rowindex, ...obj } = res.data.data[0]

        formData.value = Object.assign({},formData.value,obj)
      }
    }
    // 监听sn码切换
    const onCheckbox = ()=>{
      sncodeBool.value = true
      sncodeinfos.value = formData.value.sncodeinfos = [{
        "sa_endcustserviceorder_snid": 0,
        "sncode":"",
        "sa_orderid":"",  //后期不用传，前期测试传
        "sonum":""  //后期不用传
      }]
    }
    // 插入SN码
    const addSNcode = ()=>{
      formData.value.sncodeinfos.push({
        "sa_endcustserviceorder_snid": 0,
        "sncode":"",
        "sa_orderid":"",  //后期不用传，前期测试传
        "sonum":""  //后期不用传
      })
      formData.value.sncodeinfos.forEach((e,index)=>{
        formData.value['sncodeinfos' + index] = e
      })
    }

    //删除SN码
    const deleteSNinput = (index)=>{
      formData.value.sncodeinfos.splice(index,1)
      delete formData.value[`sncodeinfos${index}`]
      snChange()
    }
    // 监听SN码输入
    const snChange = (data,index)=>{
      formData.value['sncodeinfos' + index] = data
      if (!data) return false
      querySnCode(data,index)
    }
    const sncodeinfos = ref([])
    const sncodeBool = ref(false)
    // 查询SNcode有效性
    const querySnCode = async (data,index)=>{
      if (formData.value.sncodeinfos.map(e=>e.sncode).lenght == 0) return false
      const res = await instance.post('',{
        "id":20240921142903,
        "content": {
          "siteid":"HY",
          "sa_endcustserviceorderid":0,
          "sncodes":formData.value.sncodeinfos.map(e=>e.sncode)
        }
      })
      if (res.data.code == 1) {
        sncodeBool.value = true
        sncodeinfos.value = res.data.data.sncodeinfos
        formData.value.sys_enterpriseid = res.data.data.sys_enterpriseid
      } else {
        sncodeBool.value = false
        alert(res.data.msg)
      }
    }
    // 附件上传

    const previewList = ref([])
    const fileChange = ()=>{
      tool.fileChange((rs)=>{

        // 监听loading变化
        function createObservable(obj) {
          return new Proxy(obj, {
              get(target, property) {
                  return target[property];
              },
              set(target, property, value) {
                  previewList.value = previewList.value.filter(e=>{if(e.file.name == rs.file.name){e.loading = rs.loading} return e})
                  target[property] = value;
                  return true;
              }
          });
        }
        rs.createObservable = createObservable
        // tool.getUploadUrl(rs)
        previewList.value.push(rs)
      })
    }
    

    // 提交单据

    const submitData = async ()=>{
      if (!sncodeBool.value) return tool.alert('未填写SN码')
      if (!sessionStorage.getItem('loginInfo')){
        $('#myModal').modal('show')
      } else {
        const rs = await tool.validateFormData(formData.value)
        if (!rs) return false

        formData.value.phonenumber = JSON.parse(sessionStorage.getItem('loginInfo')).customerphone
        formData.value.sncodeinfos = sncodeinfos.value
        const res = await instance.post('',{
          "id":20240902095803,
          "content":  formData.value
        })
        if (res.data.code == 1) {
          // alert('提交成功')
          // tool.alert('提交成功')
          beginUpload(res.data.data.sa_endcustserviceorderid)
        } else {
          alert(res.data.msg)
        }
      }
      
    }

    // 数据提交后开始附件上传
    const beginUpload = (id)=>{
      if (previewList.value.length == 0 ){
        localStorage.clear()
        sessionStorage.clear()
        alert('提交成功')
        tool.linkOf('./Servicesupport.html')
      } else {
        previewList.value.forEach(e=>{
          e.loading = true
          e.dataid = id 
          tool.getUploadUrl(e,'sa_endcustserviceorder',()=>{
            localStorage.clear()
            sessionStorage.clear()
            alert('提交成功')
            tool.linkOf('./Servicesupport.html')
          })
        })
      }
      
    }

    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];

    const deleteFile = (index)=>{
      previewList.value.splice(index,1)
      console.log(previewList.value)
      document.getElementById('fileInput').value = '';
    }
    const chineseToEnglishMapArr = ref({})
    return {
      isLogin,
      linkOf,
      onChangeService,
      formData,
      serviceOptionData,
      serviceKSOptionData,
      serviceSysOptionData,
      noCodeReasonData,
      addSNcode,
      onCheckbox,
      fileChange,
      previewList,
      submitData,
      snChange,
      querySnCode,
      imageExtensions,
      deleteFile,
      deleteSNinput,
      restForm,
    }
  }
}).mount('#app')