hand-acid-web/src/components/home/Receive/index.vue

<script setup lang="ts">
import { addLog } from 'apis/log'
import { editSols, getSolsList, saveSols } from 'apis/solution'
import { userList as userListApi } from 'apis/user'
import FtButton from 'components/common/FTButton/index.vue'
import { FtMessage } from 'libs/message'
import { useSystemStore } from 'stores/systemStore'
import { inject, onMounted, ref } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

const emits = defineEmits(['ok', 'cancel'])

const systemStore = useSystemStore()

onMounted(async () => {
  await getUserList()
  await getSolutionList()
})

const form = ref<Log.LogItem>({})
const formRef = ref()

const rules = {
  name: [
    { required: true, message: '请输入溶液名称', trigger: 'blur' },
  ],
}
const userList = ref<User.User[]>([])
const getUserList = async () => {
  userList.value = (await userListApi()).list
}

const solutionList = ref<Solution.SolutionItem[]>([])

const getSolutionList = async () => {
  solutionList.value = (await getSolsList()).list
}

const okHandle = async () => {
  try {
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }

    const params = {
      ...form.value,
      channelCode: props.data.channelCode,
    }
    await addLog(params)
    FtMessage.success('保存成功')
    emits('ok', params)
  }
  catch (error) {
    console.log(error)
  }
}
const cancel = () => {
  emits('cancel')
}

const channelMap = {
  CHANNEL_1: '通道1',
  CHANNEL_2: '通道2',
  CHANNEL_3: '通道3',
  CHANNEL_4: '通道4',
}
</script>

<template lang="pug">
  FtDialog(visible :title="`${channelMap[data?.channelCode]}-领取`" width="30%" :ok-handle="okHandle" @cancel="cancel")
    el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
      el-form-item(label="溶液名称" prop="solutionId")
        el-select(v-model="form.solutionId" placeholder="请选择溶液")
          el-option(v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id")
      el-form-item(label="溶液浓度" prop="concentration")
        ft-input(v-model="form.concentration" placeholder="请输入溶液浓度" layoutName="number")
          template(#append)
            span %
      el-form-item(label="发放人" prop="issuerId")
        el-select(v-model="form.issuerId" placeholder="请选择发放人")
          el-option(v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id")
      el-form-item(label="领取人" prop="receiverId")
        el-tag {{systemStore.systemStatus.currentUser.nickname}}
      el-form-item(label="容量" prop="receivedVolume")
        ft-input(v-model="form.receivedVolume" placeholder="请输入容量" layoutName="number")
          template(#append)
            span mL
</template>

<style lang="stylus" scoped>
.el-tag
  margin-right 5px
</style>