labsop_h5/src/view/instr/sampleAppoint.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-24 09:17:15
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-28 11:44:38
 * @FilePath: \labsop_h5\src\view\instr\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <van-form ref="formRef" required="auto">
      <van-cell-group>
        <van-field v-model="state.form.deliverTime" is-link readonly label="送样时间" placeholder="请选择计划送样时间"
          @click="state.showDeliverTime = true" :rules="[{ required: true, message: '送样时间不能为空' }]" />
        <van-field v-model="state.form.testTime" is-link readonly label="检测时间" placeholder="请选择检测时间"
          @click="state.showTestTime = true" :rules="[{ required: true, message: '检测时间不能为空' }]" />
        <van-field label="课题" placeholder="课题" readonly v-model="state.form.projectName"
          :rules="[{ required: false }]" />
        <van-field v-if="state.InstCfgCharge" label="经费卡" placeholder="请选择经费卡" is-link readonly
          @click="state.showExpenseCard = true" v-model="state.form.expenseCardName"
          :rules="[{ required: isRequiredExpense, message: '经费卡不能为空' }]"></van-field>
        <van-field label="样品说明" placeholder="输入样品说明" v-model="state.form.sampleDesc"
          :rules="[{ required: false }]"></van-field>
        <van-field label="联系电话" placeholder="输入联系电话" v-model="state.form.userContact"
          :rules="[{ required: false }]"></van-field>
      </van-cell-group>

      <div class="mt10 card-wrap" v-if="state.form.sampleItem.length > 0">
        <h4>检测信息</h4>
        <div class="card-item" v-for="(v, i) in state.form.sampleItem" :key="i">
          <div class="flex flex-between mb10">
            <span class="label">检测项：</span>
            <span class="value bold">{{ v.name }}</span>
          </div>
          <div class="flex flex-between mb10 flex-center">
            <span class="label">样本数量：</span>
            <van-stepper v-model="v.count" min="0" integer />
          </div>
          <div class="flex flex-between mb10">
            <span class="label">单价：</span>
            <span class="value price">¥{{ v.price }}</span>
          </div>
          <div class="flex flex-between">
            <span class="label">总金额：</span>
            <span class="value price bold">¥{{ (v.count * v.price).toFixed(2) }}</span>
          </div>
        </div>
      </div>

      <CustomForm ref="customFormRef" :formData="state.form.sampleForm"></CustomForm>
    </van-form>
  </div>
  <van-action-bar placeholder>
    <van-action-bar-button class="w100" type="primary" text="保存" @click="onClickButton" :loading="state.loading" />
  </van-action-bar>

  <!-- 送样时间 -->
  <van-popup v-model:show="state.showDeliverTime" position="bottom">
    <van-date-picker v-model="state.currentDate" title="选择送样时间" @confirm="onConfirmDeliverDate"
      @cancel="state.showDeliverTime = false" />
  </van-popup>
  <van-popup v-model:show="state.showDeliverTimeTime" position="bottom">
    <van-time-picker v-model="state.currentTime" title="选择送样时间" @confirm="onConfirmDeliverTime"
      @cancel="state.showDeliverTimeTime = false" />
  </van-popup>

  <!-- 检测时间 -->
  <van-popup v-model:show="state.showTestTime" position="bottom">
    <van-date-picker v-model="state.currentDateTest" title="选择检测时间" @confirm="onConfirmTestDate"
      @cancel="state.showTestTime = false" />
  </van-popup>
  <van-popup v-model:show="state.showTestTimeTime" position="bottom">
    <van-time-picker v-model="state.currentTimeTest" title="选择检测时间" @confirm="onConfirmTestTime"
      @cancel="state.showTestTimeTime = false" />
  </van-popup>

  <!-- 选择经费卡 -->
  <van-popup v-model:show="state.showExpenseCard" position="bottom">
    <van-picker :columns="fundsList" :columns-field-names="{ text: 'finAccount', value: 'id' }"
      @confirm="pickExpenseCard" @cancel="state.showExpenseCard = false" />
  </van-popup>
</template>

<script lang="ts" setup>
import to from 'await-to-js'
import { useRoute, useRouter } from 'vue-router'
import { useInstrApi } from '/@/api/instr'
import { defineAsyncComponent, onMounted, reactive, ref, computed } from 'vue'
import { formatDate } from '/@/utils/formatTime'
import { showNotify, showToast } from 'vant'
import { useProApi } from '/@/api/project'
import { useSampleApi } from '/@/api/instr/sample'

const CustomForm = defineAsyncComponent(() => import('/@/components/CustomForm.vue'))
const route = useRoute()
const router = useRouter()
const projApi = useProApi()
const instApi = useInstrApi()
const sampleApi = useSampleApi()

const fundsList = ref([])
const formRef = ref()
const customFormRef = ref()

const state = reactive({
  loading: false,
  InstCfgCharge: false,
  showDeliverTime: false,
  showDeliverTimeTime: false,
  currentDate: [],
  currentTime: [],
  showTestTime: false,
  showTestTimeTime: false,
  currentDateTest: [],
  currentTimeTest: [],
  showExpenseCard: false,
  form: {
    instId: 0,
    deliverTime: '',
    testTime: '',
    projectName: '',
    projectId: null,
    expenseCardId: 0,
    expenseCardName: '',
    sampleDesc: '',
    sampleItem: [] as any[],
    userContact: '',
    sampleForm: [] as any[],
  },
})
const isRequiredExpense = computed(() => state.InstCfgCharge && state.form.sampleItem && state.form.sampleItem.length > 0)

// Determine Default Time
const now = new Date()
const dateStr = formatDate(now, 'YYYY-mm-dd')
const timeStr = formatDate(now, 'HH:MM')
state.currentDate = dateStr.split('-')
state.currentTime = timeStr.split(':')
state.currentDateTest = dateStr.split('-')
state.currentTimeTest = timeStr.split(':')
state.form.deliverTime = ''
state.form.testTime = ''


const onConfirmDeliverDate = ({ selectedValues }) => {
  state.currentDate = selectedValues
  state.showDeliverTime = false
  state.showDeliverTimeTime = true
}
const onConfirmDeliverTime = ({ selectedValues }) => {
  state.currentTime = selectedValues
  state.form.deliverTime = `${state.currentDate.join('-')} ${state.currentTime.join(':')}`
  state.showDeliverTimeTime = false
}

const onConfirmTestDate = ({ selectedValues }) => {
  state.currentDateTest = selectedValues
  state.showTestTime = false
  state.showTestTimeTime = true
}
const onConfirmTestTime = ({ selectedValues }) => {
  state.currentTimeTest = selectedValues
  state.form.testTime = `${state.currentDateTest.join('-')} ${state.currentTimeTest.join(':')}`
  state.showTestTimeTime = false
}


const init = async () => {
  getSampleConfig()
  getChargeConfig()
}

// 送样配置信息
const getSampleConfig = async () => {
  const params = {
    instId: state.form.instId,
    code: 'InstCfgSample',
  }
  const [err, res]: ToResponse = await to(instApi.getSettingDetail({ ...params }))
  if (err) return
  state.form.sampleForm = res?.data?.config.sampleForm ? JSON.parse(res.data.config.sampleForm) : []
}

// 计费配置信息
const getChargeConfig = async () => {
  const params = {
    instId: state.form.instId,
    code: 'InstCfgCharge',
  }
  const [err, res]: ToResponse = await to(instApi.getSettingDetail({ ...params }))
  if (err) return
  state.InstCfgCharge = res?.data.config.enable && !res?.data.config.sampleFreeEnable
  if (res?.data?.config?.sampleCountEnable && res?.data?.config?.enable) {
    state.form.sampleItem = res?.data?.config?.sampleItemPrice || []
    state.form.sampleItem = state.form.sampleItem.map((item) => {
      return {
        ...item,
        count: 1,
      }
    })
  }
  await getMyProjectInfo()
}

const getMyProjectInfo = async () => {
  const [err, res]: ToResponse = await to(projApi.getMySelfProjectGroup({}))
  if (err) return
  state.form.projectName = res?.data.pgName || ''
  state.form.projectId = res?.data.id || null
  if (state.form.projectId) {
    getFundsData()
    getTestList()
  }
}

const getFundsData = async () => {
  const [err, res]: ToResponse = await to(projApi.getFinanceAccountList({ projId: state.form.projectId }))
  if (err) return
  fundsList.value = res?.data.list ? [res?.data.list] : []
  if (fundsList.value && fundsList.value.length > 0 && fundsList.value[0].length > 0) {
    state.form.expenseCardId = fundsList.value[0][0].id
    state.form.expenseCardName = fundsList.value[0][0].finAccount
  }
}

const getTestList = async () => {
  const [err, res]: ToResponse = await to(
    sampleApi.getSampleTestOption({
      instId: state.form.instId,
      projectId: state.form.projectId,
    }),
  )
  if (err) return
  if (res.data.length > 0) {
    state.form.sampleItem.forEach((item) => {
      item.price = res.data.find((price) => price.name === item.name)?.price || 0
    })
  }
}

// 经费卡选择
const pickExpenseCard = ({ selectedOptions }) => {
  state.form.expenseCardId = selectedOptions[0].id
  state.form.expenseCardName = selectedOptions[0].finAccount
  state.showExpenseCard = false
}

const onClickButton = async () => {
  state.loading = true
  const [errValid] = await to(formRef.value.validate())
  if (errValid) {
    state.loading = false
    return
  }

  if (isRequiredExpense.value && !state.form.expenseCardId) {
    showNotify({ type: 'warning', message: '请选择经费卡' })
    state.loading = false
    return
  }

  const customForm = customFormRef.value.getFormData()
  if (state.form.sampleForm.length > 0 && !customForm) {
    state.loading = false
    return
  }

  const sampleItem = state.form.sampleItem.map((item) => {
    return {
      name: item.name,
      count: Number(item.count),
    }
  })

  let params: any = Object.assign({}, state.form)
  params.sampleItem = sampleItem
  params.sampleForm = JSON.stringify(customForm || [])

  const [err, res]: ToResponse = await to(sampleApi.add(params))
  state.loading = false
  if (err) return
  if (res && res.code == 200) {
    showToast({
      type: 'success',
      message: '提交成功'
    })
    router.back()
  }
}

onMounted(() => {
  state.form.instId = route.query.id ? +route.query.id : 0
  init()
})
</script>

<style lang="scss" scoped>
.container {
  flex: 1;
  padding: 10px;
  background-color: #f7f8fa;
  overflow-y: auto;

  h4 {
    height: 18px;
    line-height: 18px;
    display: flex;
    margin: 10px 0;

    span {
      font-weight: normal;
      margin-left: auto;
    }

    &::before {
      display: inline-block;
      content: '';
      width: 3px;
      height: 18px;
      background-color: #1c9bfd;
      margin-right: 4px;
      vertical-align: middle;
    }
  }
}

.card-wrap {
  padding-bottom: 20px;
}

.card-item {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .label {
    color: #646566;
    font-size: 14px;
  }

  .value {
    color: #323233;
    font-size: 14px;

    &.bold {
      font-weight: bold;
    }

    &.price {
      color: #ee0a24;
    }
  }
}

.flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.flex-center {
  align-items: center;
}

.mb10 {
  margin-bottom: 10px;
}
</style>