feats

src/components/OrgPicker/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="org-picker">
+    <div class="picker-search">
+      <van-search v-model="searchValue" placeholder="请输入公司名称" @search="onSearch" />
+    </div>
+    <div class="picker-list">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="我们是有底线的" @load="onLoad">
+        <van-cell v-for="org in orgList" :key="org.orgId" :title="org.name" @click="onClick(org)">
+          <template #right-icon v-if="org.orgId === orgSelected.orgId">
+            <van-icon name="success" />
+          </template>
+        </van-cell>
+      </van-list>
+    </div>
+    <div class="picker-action">
+      <van-button type="primary" @click="onSubmit" block>确定</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch, ref, onMounted } from 'vue'
+import { getOrgList } from '@/services/org'
+
+
+const searchValue = ref('')
+const orgSelected = ref({})
+const orgResult = ref({})
+const loading = ref(false)
+const finished = ref(false)
+const pageSize = 20
+
+const props = defineProps({
+  modelValue: String
+})
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const orgList = computed(() => orgResult.value.records || [])
+watch(props.modelValue, (val) => {
+  orgSelected.value = { orgId: val }
+})
+
+const queryData = (params) => {
+  getOrgList({ ...params, isSystem: true })
+    .then((res) => {
+      const first = res.current === 1
+      if (first) {
+        orgResult.value = res
+      } else {
+        orgResult.value = {
+          ...res,
+          records: orgResult.value.records.concat(res.records)
+        }
+      }
+
+      loading.value = false
+      finished.value = res.current >= res.pages
+    })
+    .catch(() => {
+      loading.value = false
+      finished.value = true
+    })
+}
+
+const onSearch = (val) => {
+  queryData({ pageNum: 1, pageSize, name: val })
+}
+
+const onCancel = () => {
+  queryData({ pageNum: 1, pageSize })
+}
+
+// 组件加载, onLoad 就会执行一次
+// 所以 onMounted 里面不需要初始化执行了
+const onLoad = () => {
+  const pageNum = orgResult.value.current ? orgResult.value.current + 1 : 1
+  queryData({ pageNum, pageSize, name: searchValue.value })
+}
+
+const onClick = (org) => {
+  orgSelected.value = org
+}
+
+const onSubmit = () => {
+  emit('update:modelValue', orgSelected.value.orgId)
+  if (orgSelected.value.orgId && orgSelected.value.orgName) {
+    emit('change', orgSelected.value)
+  } else {
+    emit('change')
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.org-picker {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+
+  .picker-search {
+    flex: none;
+  }
+  .picker-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .picker-action {
+    flex: none;
+    box-sizing: border-box;
+    padding: 4px 8px;
+  }
+}
+</style>

src/pages/index.vue

@@ -1,54 +1,7 @@
 <template>
-  <div>
-    <van-search
-      v-model="value"
-      show-action
-      placeholder="请输入单位名称"
-      @search="onSearch"
-    >
-      <template #action>
-        <div @click="onSearch">搜索</div>
-      </template>
-    </van-search>
-    <van-list
-      v-model:loading="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
-      <van-cell v-for="item in list" :key="item" :title="item" />
-    </van-list>
-  </div>
+  <OrgPicker />
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
-const value = ref()
-const list = ref([]);
-const loading = ref(false);
-const finished = ref(false);
-
-const onLoad = () => {
-  // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 10; i++) {
-      list.value.push(list.value.length + 1);
-    }
-
-    // 加载状态结束
-    loading.value = false;
-
-    // 数据全部加载完成
-    if (list.value.length >= 40) {
-      finished.value = true;
-    }
-  }, 1000);
-};
-
-const onSearch = (val) => {
-  const text = val || value.value
-}
-
+import OrgPicker from '@/components/OrgPicker/index.vue'
 </script>

src/pages/invoice/fill.vue

@@ -0,0 +1,133 @@
+<template>
+  <van-form @failed="onFailed">
+    <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-cell-group>
+
+    <van-cell-group title="报销信息">
+      <van-cell title="报销项目">
+        <template #value>
+          <span style="color: #000">培训费</span>
+        </template>
+      </van-cell>
+      <van-cell title="开票金额">
+        <template #value>
+          <span style="color: #f00">600.00</span>
+        </template>
+      </van-cell>
+      <van-cell title="报销项目">
+        <template #value>
+          <span style="color: #000">住宿费</span>
+        </template>
+      </van-cell>
+      <van-cell title="开票金额">
+        <template #value>
+          <span style="color: #f00">1200.00</span>
+        </template>
+      </van-cell>
+      <van-cell title="报销项目">
+        <template #value>
+          <span style="color: #000">餐费</span>
+        </template>
+      </van-cell>
+      <van-cell title="开票金额">
+        <template #value>
+          <span style="color: #f00">600.00</span>
+        </template>
+      </van-cell>
+    </van-cell-group>
+    <div style="margin: 16px;">
+      <van-button round block type="primary" native-type="submit">
+        提交
+      </van-button>
+    </div>
+  </van-form>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const formData = reactive({
+    detailId: undefined,
+    invoiceId: undefined,
+    invoicePersonId: undefined,
+    personId: undefined,
+    personName: undefined,
+    invoiceOrgId: undefined,
+    orgId: undefined,
+    orgName: undefined,
+    taxNo: undefined,
+    address: undefined,
+    phone: undefined,
+    bankId: undefined,
+    bankName: undefined,
+    cardNo: undefined,
+    invoiceItemTplId: undefined,
+    itemName: undefined,
+    charge: undefined,
+    mergeRemark: undefined,
+    stayRemark: undefined,
+  })
+
+  // 校验函数返回 true 表示校验通过，false 表示不通过
+  const validator = (val) => /1\d{10}/.test(val);
+
+  // 校验函数可以直接返回一段错误提示
+  const validatorMessage = (val) => `${val} 不合法，请重新输入`;
+
+  // 校验函数可以返回 Promise，实现异步校验
+  const asyncValidator = (val) =>
+    new Promise((resolve) => {
+      Toast.loading('验证中...');
+
+      setTimeout(() => {
+        Toast.clear();
+        resolve(val === '1234');
+      }, 1000);
+    });
+
+  const onFailed = (errorInfo) => {
+    console.log('failed', errorInfo);
+  };
+</script>

src/router/index.js

@@ -5,6 +5,7 @@ import store from '@/store';
 
 const routes = [
   { path: '/', name: 'index', component: () => import('@/pages/index.vue') },
+  { path: '/invoice/fill', name: 'invoice.fill', component: () => import('@/pages/invoice/fill.vue') },
   { path: '/login', name: 'login', component: () => import('@/pages/login.vue') },
 ];
 

src/services/org.js

@@ -0,0 +1,6 @@
+import request from "@/utils/request";
+
+// 获取组织列表
+export function getOrgList(params) {
+  return request.get('/org', { params } )
+}

src/vant.js

@@ -4,8 +4,11 @@ import {
   Cell,
   CellGroup,
   Dialog,
+  Form,
+  Field,
   Loading,
   List,
+  Icon,
   Notify,
   ImagePreview,
   Search,
@@ -22,7 +25,10 @@ export default function vant(app) {
   app.use(Cell);
   app.use(CellGroup);
   app.use(Dialog);
+  app.use(Form);
+  app.use(Field);
   app.use(Loading);
+  app.use(Icon);
   app.use(List);
   app.use(Notify);
   app.use(ImagePreview);