v1.1

src/pages/invoice/components/DetailInfo.vue

@@ -1,7 +0,0 @@
-<template>
-<div></div>
-</template>
-<script>
-</script>
-<style>
-</style>

src/pages/invoice/components/InvoiceInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <van-cell-group title="开票单位">
+    <van-field
+      label="开票单位"
+      v-model="props.pdata.orgName"
+      name="orgName"
+      placeholder="请输入开票单位"
+      :rules="[{ required: true, message: '请输入开票单位' }]"
+    />
+    <van-field
+      label="纳 税 号"
+      v-model="props.pdata.taxNo"
+      name="taxNo"
+      placeholder="请输入纳税识别号"
+      :rules="[{ required: true, message: '请输入纳税识别号' }]"
+    />
+    <van-field
+      label="单位地址"
+      v-model="props.pdata.address"
+      name="address"
+      placeholder="请输入单位地址"
+      :rules="[{ required: true, message: '请输入单位地址' }]"
+    />
+    <van-field
+      label="单位电话"
+      v-model="props.pdata.phone"
+      name="phone"
+      placeholder="请输入单位电话"
+      :rules="[{ required: true, message: '请输入单位电话' }]"
+    />
+    <van-field
+      label="开户银行"
+      v-model="props.pdata.bankName"
+      name="bankName"
+      placeholder="请输入开户银行"
+      :rules="[{ required: true, message: '请输入开户银行' }]"
+    />
+    <van-field
+      label="开户账户"
+      v-model="props.pdata.cardNo"
+      name="cardNo"
+      placeholder="请输入开户行账号"
+      :rules="[{ required: true, message: '请输入开户行账号' }]"
+    />
+    <van-field
+      name="mergeRemark"
+      label="是否合开"
+      error-message="如果合开请和报销专员联系"
+    >
+      <template #input>
+        <van-radio-group
+          v-model="props.pdata.mergeRemark"
+          direction="horizontal"
+          :disabled="props.isFinished"
+        >
+          <van-radio name="是">是</van-radio>
+          <van-radio name="否">否</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+  </van-cell-group>
+</template>
+<script setup>
+import { ref, reactive, watch } from 'vue';
+const props = defineProps({
+  isFinished: String,
+  pdata: {
+    type: Object,
+    default: () => ({})
+  }
+})
+</script>
+<style>
+</style>

src/pages/invoice/components/ItemTpl.vue

@@ -0,0 +1,38 @@
+<template>
+<van-cell-group v-if="props.itemList.length != 0" title="报销信息">
+      <div class="itembox" v-for="item in props.itemList" :key="item.invoiceItemId">
+        <van-cell title="报销项目">
+          <template #value>
+            <span style="color: #000">{{ item.name }}</span>
+          </template>
+        </van-cell>
+        <van-cell title="开票金额">
+          <template #value>
+            <span style="color: #000">{{ item.charge }}</span>
+          </template>
+        </van-cell>
+        <div class="lastLine" />
+      </div>
+    </van-cell-group>
+</template>
+<script setup>
+const props = defineProps({
+  itemList: {
+    type: Array,
+    default: () => ({})
+  }
+})
+</script>
+<style lang="less" scoped>
+.lastLine::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: " ";
+  pointer-events: none;
+  right: var(--van-padding-md);
+  bottom: 0;
+  left: var(--van-padding-md);
+  border-bottom: 1px solid var(--van-cell-border-color);
+  transform: scaleY(0.5);
+}
+</style>

src/pages/invoice/components/PersonInfo.vue

@@ -2,7 +2,7 @@
   <van-cell-group title="报销人信息">
     <van-field
       label="所属公司"
-      v-model="data.invoiceOrgName"
+      v-model="value.invoiceOrgName"
       name="invoiceOrgName"
       readonly
       @click="changeOrg"
@@ -15,14 +15,14 @@
       :style="{ height: '100%', width: '80%' }"
     >
       <org-picker
-        v-model="data.invoiceOrgId"
-        :invoiceId="invoiceId"
+        v-model="value.invoiceOrgId"
+        :invoiceId="props.invoiceId"
         @change="onOrgConfirm"
       />
     </van-popup>
     <van-field
       label="报销人"
-      v-model="data.personName"
+      v-model="value.personName"
       name="personName"
       readonly
       @click="showOrgPopup"
@@ -35,43 +35,57 @@
       :style="{ height: '100%', width: '80%' }"
     >
       <person-picker
-        v-model="data.personId"
-        :invoiceId="invoiceId"
-        :orgId="formData.invoiceOrgId"
+        v-model="value.personId"
+        :invoiceId="props.invoiceId"
+        :orgId="value.invoiceOrgId"
         @change="onPersonConfirm"
       />
     </van-popup>
   </van-cell-group>
 </template>
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue';
-const data=reactive({})
+import { ref, reactive, watch } from 'vue';
+import { Dialog } from 'vant'
+
+const value = reactive({});
 const props = defineProps({
   isFinished: String,
-  invoiceId:String,
+  invoiceId: String,
+  pdata: {
+    type: Object,
+    default: () => ({})
+  }
 })
+const emit = defineEmits(['changeOrgValue','changePersonValue'])
+watch(() => props.pdata, (val) => {
+  Object.assign(value, val)
+},
+  { immediate: true, deep: true }
+)
 const showOrgPicker = ref(false)
 const showPersonPicker = ref(false)
+
 //选择企业
 const changeOrg = () => {
-  if (!isFinished) {
+  if (!props.isFinished) {
     showOrgPicker.value = true
   }
 }
 //确认企业
-const onOrgConfirm = (value) => {
-  if (value) {
-    data.invoiceOrgId = value.invoiceOrgId
-    data.invoiceOrgName = value.name
-    data.personName = ''
-    data.invoicePersonId = ''
+const onOrgConfirm = (val) => {
+  if (val) {
+    value.invoiceOrgId = val.invoiceOrgId
+    value.invoiceOrgName = val.name
+    value.personName = undefined
+    value.invoicePersonId = undefined
+    emit('changeOrgValue', value)
   }
   showOrgPicker.value = false;
 };
 //选择报销人
 const showOrgPopup = () => {
-  if (!isFinished) {
-    if (data.invoiceOrgId) {
+  if (!props.isFinished) {
+    if (value.invoiceOrgId) {
       showPersonPicker.value = true
     } else {
       Dialog.alert({
@@ -81,28 +95,13 @@ const showOrgPopup = () => {
   }
 }
 //确认报销人
-const onPersonConfirm = (value) => {
-  if (value) {
-    let data = {
-      invoiceOrgId: data.invoiceOrgId,
-      invoiceOrgName: data.invoiceOrgName
-    }
-    //为了把当前选中报销人员放在请求里
-    data.invoicePersonId = value.invoicePersonId
-    getDetail()
-    //获取详情
-    // emit('change', orgSelected.value)
-    setTimeout(() => {
-      //因为如果客户填错报销人和所属单位 接口返回会默认上次选中的报销人所以需要把当前报销人重新赋值给formData
-      data.invoicePersonId = value.invoicePersonId
-      data.personName = value.name
-      data.invoiceOrgId = data.invoiceOrgId
-      data.invoiceOrgName = data.invoiceOrgName
-    }, 100)
+const onPersonConfirm = (val) => {
+  if (val) {
+    value.invoicePersonId = val.invoicePersonId
+    value.personName = val.name
+    emit('changePersonValue', value)
   }
-  //
   showPersonPicker.value = false;
-  console.log(data);
 };
 </script>
 <style>

src/pages/invoice/fill.vue

@@ -1,126 +1,17 @@
 <template>
   <van-form @failed="onFailed" @submit="onSubmit" :readonly="isFinished">
-    <h2 :style="{ textAlign: 'center' }">{{ formData.invoiceName }}</h2>
-    <van-cell-group title="报销人信息">
-      <van-field
-        label="所属公司"
-        v-model="formData.invoiceOrgName"
-        name="invoiceOrgName"
-        readonly
-        @click="changeOrg"
-        placeholder="请输入所属公司"
-        :rules="[{ required: true, message: '请输入所属公司' }]"
-      />
-      <van-popup
-        v-model:show="showOrgPicker"
-        position="left"
-        :style="{ height: '100%', width: '80%' }"
-      >
-        <org-picker
-          v-model="formData.invoiceOrgId"
-          :invoiceId="fillData.invoiceId"
-          @change="onOrgConfirm"
-        />
-      </van-popup>
-      <van-field
-        label="报销人"
-        v-model="formData.personName"
-        name="personName"
-        readonly
-        @click="showOrgPopup"
-        placeholder="请输入报销人"
-        :rules="[{ required: true, message: '请输入报销人' }]"
-      />
-      <van-popup
-        v-model:show="showPersonPicker"
-        position="left"
-        :style="{ height: '100%', width: '80%' }"
-      >
-        <person-picker
-          v-model="formData.personId"
-          :invoiceId="fillData.invoiceId"
-          :orgId="formData.invoiceOrgId"
-          @change="onPersonConfirm"
-        />
-      </van-popup>
-    </van-cell-group>
+    <h2 :style="{ textAlign: 'center' }">{{ fillData.name }}</h2>
+    <person-info
+      :isFinished="isFinished"
+      :invoiceId="route.query.invoiceId"
+      :pdata="personData"
+      @changeOrgValue="changeOrg"
+      @changePersonValue="changePerson"
+    />
+    <invoice-info :isFinished="isFinished" :pdata="formData" />
 
-    <van-cell-group title="开票单位">
-      <van-field
-        label="开票单位"
-        v-model="formData.orgName"
-        name="orgName"
-        placeholder="请输入开票单位"
-        :rules="[{ required: true, message: '请输入开票单位' }]"
-      />
-      <van-field
-        label="纳 税 号"
-        v-model="formData.taxNo"
-        name="taxNo"
-        placeholder="请输入纳税识别号"
-        :rules="[{ required: true, message: '请输入纳税识别号' }]"
-      />
-      <van-field
-        label="单位地址"
-        v-model="formData.address"
-        name="address"
-        placeholder="请输入单位地址"
-        :rules="[{ required: true, message: '请输入单位地址' }]"
-      />
-      <van-field
-        label="单位电话"
-        v-model="formData.phone"
-        name="phone"
-        placeholder="请输入单位电话"
-        :rules="[{ required: true, message: '请输入单位电话' }]"
-      />
-      <van-field
-        label="开户银行"
-        v-model="formData.bankName"
-        name="bankName"
-        placeholder="请输入开户银行"
-        :rules="[{ required: true, message: '请输入开户银行' }]"
-      />
-      <van-field
-        label="开户账户"
-        v-model="formData.cardNo"
-        name="cardNo"
-        placeholder="请输入开户行账号"
-        :rules="[{ required: true, message: '请输入开户行账号' }]"
-      />
-      <van-field
-        name="radio"
-        label="是否合开"
-        error-message="如果合开请和报销专员联系"
-      >
-        <template #input>
-          <van-radio-group
-            v-model="formData.mergeRemark"
-            direction="horizontal"
-            :disabled="isFinished"
-          >
-            <van-radio name="是">是</van-radio>
-            <van-radio name="否">否</van-radio>
-          </van-radio-group>
-        </template>
-      </van-field>
-    </van-cell-group>
+    <item-tpl :itemList="itemList" />
 
-    <van-cell-group v-if="itemList.length != 0" title="报销信息">
-      <div class="itembox" v-for="item in itemList" :key="item.invoiceItemId">
-        <van-cell title="报销项目">
-          <template #value>
-            <span style="color: #000">{{ item.name }}</span>
-          </template>
-        </van-cell>
-        <van-cell title="开票金额">
-          <template #value>
-            <span style="color: #000">{{ item.charge }}</span>
-          </template>
-        </van-cell>
-        <div class="lastLine" />
-      </div>
-    </van-cell-group>
     <div style="margin: 16px">
       <van-button
         v-show="!isFinished"
@@ -142,36 +33,32 @@ import { Dialog, Toast } from 'vant'
 import dayjs from 'dayjs'
 import { getInvoiceModel, setInvoiceDetail, getInvoiceFill } from '@/services/invoice'
 import { useModel } from '@zjxpcyc/vue-tiny-store'
+import PersonInfo from './components/PersonInfo.vue'
+import InvoiceInfo from './components/InvoiceInfo.vue'
+import ItemTpl from './components/ItemTpl.vue'
 
-const formData = reactive({
-  //班级名称
-  invoiceName: '',
-  invoiceId: undefined,
-  invoicePersonId: undefined,
-  personName: undefined,
-  invoiceOrgId: undefined,
-  invoiceOrgName: undefined,
-  orgName: undefined,
-  taxNo: undefined,
-  address: undefined,
-  phone: undefined,
-  bankName: undefined,
-  cardNo: undefined,
-  mergeRemark: '否',
-  status: undefined
-})
+const formData = reactive({})
+//person组件数据
+const personData = ref({})
 const itemList = ref([])
 const fillData = ref([])
 //是否结束
 const isFinished = ref(false)
-const showOrgPicker = ref(false)
-const showPersonPicker = ref(false)
 const router = useRouter();
 const route = useRoute();
 const { user } = useModel('user')
 
 const personId = computed(() => route.query.personId || user.personId)
 
+const changeOrg = (val) => {
+  personData.value = val
+}
+const changePerson = (val) => {
+  personData.value = val
+  formData.invoicePersonId = val.invoicePersonId
+  getDetail()
+}
+
 onMounted(() => {
   //不是扫码进入
   if (!route.query.invoiceId) {
@@ -194,7 +81,6 @@ onMounted(() => {
       })
     }
     getDetail()
-    formData.invoiceName = res.name
   }).catch(err => {
     console.log(err)
   })
@@ -204,66 +90,20 @@ const onFailed = (errorInfo) => {
   console.log('failed', formData);
 };
 
-//选择企业
-const changeOrg = () => {
-  if (!isFinished.value) {
-    showOrgPicker.value = true
-  }
-}
-//确认企业
-const onOrgConfirm = (value) => {
-  if (value) {
-    formData.invoiceOrgId = value.invoiceOrgId
-    formData.invoiceOrgName = value.name
-    formData.personName = ''
-    formData.invoicePersonId = ''
-  }
-  showOrgPicker.value = false;
-};
-//选择报销人
-const showOrgPopup = () => {
-  if (!isFinished.value) {
-    if (formData.invoiceOrgId) {
-      showPersonPicker.value = true
-    } else {
-      Dialog.alert({
-        message: '请先选择所属公司'
-      }).then(() => { })
-    }
-  }
-}
-//确认报销人
-const onPersonConfirm = (value) => {
-  if (value) {
-    let data = {
-      invoiceOrgId: formData.invoiceOrgId,
-      invoiceOrgName: formData.invoiceOrgName
-    }
-    //为了把当前选中报销人员放在请求里
-    formData.invoicePersonId = value.invoicePersonId
-    getDetail()
-    setTimeout(() => {
-      //因为如果客户填错报销人和所属单位 接口返回会默认上次选中的报销人所以需要把当前报销人重新赋值给formData
-      formData.invoicePersonId = value.invoicePersonId
-      formData.personName = value.name
-      formData.invoiceOrgId = data.invoiceOrgId
-      formData.invoiceOrgName = data.invoiceOrgName
-    }, 100)
-  }
-  showPersonPicker.value = false;
-  console.log(formData);
-};
+
 //获取模板详情
 const getDetail = () => {
   getInvoiceModel(route.query.invoiceId, { invoicePersonId: formData.invoicePersonId, personId: personId.value }).then(res => {
-    let info = {
-      ...(res.detail || res.tpl),
-      invoiceName: fillData.value.name,
-    }
+    let info = res.detail || res.tpl
     info.mergeRemark = info.mergeRemark || formData.mergeRemark
     Object.assign(formData, info)
+    if (!personData.value.invoicePersonId) {
+      personData.value.invoiceOrgId = info.invoiceOrgId
+      personData.value.invoiceOrgName = info.invoiceOrgName
+      personData.value.personName = info.personName
+      personData.value.invoicePersonId = info.invoicePersonId
+    }
     itemList.value = info.itemList
-    console.log(info);
   }).catch(err => {
     console.log(err);
   })
@@ -276,7 +116,9 @@ const onSubmit = (val) => {
     }).then(() => { })
     return;
   }
-  setInvoiceDetail(fillData.value.invoiceId, formData).then(() => {
+  //需要调用中间列表的提交事件获取数据
+  let value = { ...formData, ...val, ...personData.value }
+  setInvoiceDetail(fillData.value.invoiceId, value).then(() => {
     Toast.success('提交成功');
     setTimeout(() => {
       router.back()
@@ -285,24 +127,4 @@ const onSubmit = (val) => {
     console.log(err);
   })
 }
-
-</script>
-<style lang="less" scoped>
-.lastLine::after {
-  position: absolute;
-  box-sizing: border-box;
-  content: " ";
-  pointer-events: none;
-  right: var(--van-padding-md);
-  bottom: 0;
-  left: var(--van-padding-md);
-  border-bottom: 1px solid var(--van-cell-border-color);
-  transform: scaleY(0.5);
-}
-.cellClassName {
-  .van-cell__value {
-    min-width: 80% !important; //可根据自己需求设定值
-    text-align: left !important;
-  }
-}
-</style>
+</script>