zgty-mas-m/pages/material/useRecord/index.vue

<template>
  <navbar-back title="危化品使用记录"></navbar-back>
  <view class="pl8 pr8 pt8">
    <view class="x-f">
      <text class="pl6">监督人：</text>
      <uni-data-select v-model="selectUserId" :localdata="range" placeholder="请选择监督人人"></uni-data-select>
    </view>
    <view class="x-f mt12">
      <text class="pl6">是否配置：</text>
      <up-switch v-model="hazardousMakeFlag" :activeValue="1" :inactiveValue="0"></up-switch>
    </view>
    <UseForm ref="useFromRef" v-if="hazardousMakeFlag === 0" />
    <template v-else>
     
      
      <uni-section type="line" title="配置信息" titleFontSize="15px" />
      <view class="x-f">
        <text class="pl6">配置后危化品：</text>
        <uni-data-select v-model="configInfo.productId" :localdata="hazardousRange" placeholder="请选择配置后危化品" />
      </view>
	  <view class="x-f mt8 pl8"
	    ><view class="pr16">参与配置危化品选择：</view
	    ><u-icon :name="`/static/images/add.png`" size="40" @click="handleAddConfigDetail"
	  /></view>
	  <uni-section type="line" title="参与配置明细" titleFontSize="15px">
	    <template #right> <up-text type="error" size="18" bold :text="configDetail.length"></up-text></template>
	    <up-swipe-action>
	      <up-swipe-action-item
	        v-for="(item, index) in configDetail"
	        :key="index"
	        :index="index"
	        :options="options"
	        @click="configDetailSwipeClick"
	      >
	        <view class="border-b">
	          <view class="">
	            <view
	              >危化品名称：<text class="black">{{ item.name }}</text></view
	            >
	          </view>
	          <view class="mt4">
	            <view
	              >规格型号：<text class="black">{{ item.modelNo }}</text></view
	            >
	          </view>
	          <view class="mt4">
	            <view
	              >使用量：<text class="black">{{ item.operationQuantity }}</text></view
	            >
	          </view>
	        </view>
	      </up-swipe-action-item>
	    </up-swipe-action>
	  </uni-section>
	  <view class="p6 x-f"
	    ><view class="pr16">配置体积：</view><text>{{ configVolume }}</text></view
	  >
	  <view class="p6 x-f"
	    ><view class="pr16">备注：</view><up-input placeholder="请输入备注" v-model="configInfo.remark"></up-input
	  ></view>
    </template>
    <up-button
      class="mt20"
      v-if="useFormInfo?.infomationId || configVolume > 0"
      type="primary"
      :loading="btnLoading"
      style="width: 50%"
      text="提交"
      @click="handleSubmit"
    ></up-button>

    <up-popup :show="addConfigShow" round="10" @close="addConfigShow = false">
      <view style="height: 80vh">
        <UseForm showAction :configInfo="{reason:selectConfigMaterial.text}" @close="addConfigShow = false" @confirm="configAdd" />
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { computed, ref, toRefs, watch, onMounted } from 'vue'
import nx from '@/nx'
import { onLoad, onShow } from '@dcloudio/uni-app'
import UseForm from './useForm.vue'

const options = [
  {
    text: '删除',
    style: {
      fontSize: '14px',
      backgroundColor: 'rgb(255,58,49)'
    }
  }
]
const btnLoading = ref(false)

const range = ref([])

const userInfo = computed(() => nx.$store('user').userInfo)

const selectUserId = ref('')

const useFromRef = ref()

const hazardousMakeFlag = ref(0)

const addConfigShow = ref(false)
let configDetail = ref([])
const hazardousRange = ref([])
async function getHazardousRange() {
  const data = await nx.$api.material.queryMaterialCategory({ nodeType: 'data', hazardous: 1 })
  hazardousRange.value = data.map(item => ({ text: item.name, value: item.id }))
}
watch(hazardousMakeFlag, val => {
  if (val === 1) {
    getHazardousRange()
  }
})
const configInfo = ref({
  productId: '',
  remark: ''
})

const useFormInfo = computed(() => {
  return useFromRef.value?.formData
})
const configVolume = computed(() => {
  return configDetail.value.reduce((pre, cur) => {
    return pre + Number(cur.operationQuantity)
  }, 0)
})

function handleAddConfigDetail() {
	if (!configInfo.value.productId) {
	  return uni.showToast({
	    title: '请选择配置后危化品',
	    icon: 'none'
	  })
	}
  addConfigShow.value = true
}
function configAdd(data) {
  configDetail.value.push(data)
}
const configDetailSwipeClick = ({ index }) => {
  configDetail.value.splice(index, 1)
  uni.showToast({ title: '删除成功！', icon: 'none' })
}
function handleReset() {
  selectUserId.value = ''
  if (hazardousMakeFlag.value === 1) {
    configDetail.value = []
    configInfo.value = {}
  } else {
    useFromRef.value.handleReset()
  }
}

const selectUser = computed(() => {
  return range.value.find(item => item.value === selectUserId.value)
})
const selectConfigMaterial = computed(()=>{
	return hazardousRange.value.find(item=>item.value === configInfo.value.productId)
})
async function handleSubmit() {
  let params = {}
  if (selectUserId.value === '') {
    return uni.showToast({
      title: '请选择监督人',
      icon: 'none'
    })
  }
  if (hazardousMakeFlag.value === 1) {
    if (configDetail.value.length === 0) {
      return uni.showToast({
        title: '请选择配置的危化品',
        icon: 'none'
      })
    }
    params = {
      records: configDetail.value,
      ...configInfo.value,
      supervisorId: selectUser.value.value,
      supervisorName: selectUser.value.text
    }
  } else {
    if (!useFromRef.value.operationQuantity) return uni.showToast({ title: '请填写使用数量', icon: 'none' })
    params = {
      ...useFormInfo.value,
      hazardousMakeFlag: 0,
      supervisorId: selectUser.value.value,
      supervisorName: selectUser.value.text
    }
  }
  uni.showModal({
    title: '提示',
    content: '确定要提交使用吗？',
    success: async function (res) {
      if (res.confirm) {
        btnLoading.value = true
        let Api = hazardousMakeFlag.value === 1 ? nx.$api.material.addHazardousMake : nx.$api.material.addUseRecord
        await Api(params).finally(() => {
          btnLoading.value = false
        })
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        handleReset()
      }
    }
  })
}
onMounted(async () => {
  const data = await nx.$api.user.getAssignUserList()
  range.value = data.map(item => ({ text: item.nickname, value: item.id }))
})
</script>

<style lang="scss" scoped>
.sample-item {
  position: relative;
  pointer-events: none;
}
:deep(.uni-select__input-placeholder) {
  font-size: 16px;
}
</style>