feature:调整送样逻辑，不计费不需要填写样本

src/view/instr/appointList/SampleAppointList.vue

@@ -52,7 +52,7 @@
           <van-tag :type="getStatusType(v.deliverStatus)">{{ setStatus(v.deliverStatus) }}</van-tag>
         </div>
         <!-- Detection Info Clickable -->
-        <div class="flex mb20" v-if="v.sampleItem || v.testSampleItem">
+        <div class="flex mb20" v-if="v.sampleItem !== '[]' || v.testSampleItem">
           <div class="equ-tit">
             <span class="fontSize14 bold">检测信息：</span>
           </div>

src/view/instr/sampleAppoint.vue

@@ -10,73 +10,31 @@
   <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: false }]"
-        />
-        <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: true, 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-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">
+      <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="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
-            />
+            <van-stepper v-model="v.count" min="0" integer />
           </div>
           <div class="flex flex-between mb10">
             <span class="label">单价：</span>
@@ -89,192 +47,150 @@
         </div>
       </div>
 
-      <CustomForm
-        ref="customFormRef"
-        :formData="state.form.sampleForm"
-      ></CustomForm>
+      <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-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 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 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 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 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 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 } 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[],
-    },
-  })
+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'
 
-  // 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 = `${dateStr} ${timeStr}`
-  state.form.testTime = `${dateStr} ${timeStr}`
-
-
-  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 CustomForm = defineAsyncComponent(() => import('/@/components/CustomForm.vue'))
+const route = useRoute()
+const router = useRouter()
+const projApi = useProApi()
+const instApi = useInstrApi()
+const sampleApi = useSampleApi()
 
-    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 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)
 
-  const init = async () => {
-    getSampleConfig()
-    getChargeConfig()
-  }
+// 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 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 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
+// 计费配置信息
+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) {
     state.form.sampleItem = res?.data?.config?.sampleItemPrice || []
     state.form.sampleItem = state.form.sampleItem.map((item) => {
       return {
@@ -282,163 +198,175 @@
         count: 1,
       }
     })
-    await getMyProjectInfo()
   }
+  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 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 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 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 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
   }
 
-  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
+  }
 
-    if (state.InstCfgCharge && !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 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),
     }
+  })
 
-    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 || [])
+  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()
-    }
+  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()
-  })
+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;
+.container {
+  flex: 1;
+  padding: 10px;
+  background-color: #f7f8fa;
+  overflow-y: auto;
 
-    h4 {
+  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;
-      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;
-      }
+      background-color: #1c9bfd;
+      margin-right: 4px;
+      vertical-align: middle;
     }
   }
-  .card-wrap {
-    padding-bottom: 20px;
+}
+
+.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;
   }
-  .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;
     }
-    .value {
-      color: #323233;
-      font-size: 14px;
-      &.bold {
-        font-weight: bold;
-      }
-      &.price {
-        color: #ee0a24;
-      }
+
+    &.price {
+      color: #ee0a24;
     }
   }
-  .flex {
-    display: flex;
-  }
-  .flex-between {
-    justify-content: space-between;
-  }
-  .flex-center {
-    align-items: center;
-  }
-  .mb10 {
-    margin-bottom: 10px;
-  }
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-between {
+  justify-content: space-between;
+}
+
+.flex-center {
+  align-items: center;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
 </style>