feat: 完成申请审批输入框与文本框组件封装

src/pages.json

@@ -63,6 +63,14 @@
       "path": "pages/application-list/application-list",
       "type": "page"
     },
+    {
+      "path": "pages/approval/approval-detail",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "disableScroll": true
+      }
+    },
     {
       "path": "pages/approval/approval",
       "type": "page",
@@ -71,6 +79,14 @@
         "disableScroll": true
       }
     },
+    {
+      "path": "pages/approval/create-application",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "disableScroll": true
+      }
+    },
     {
       "path": "pages/attendance/allowed-time",
       "type": "page",

src/pages/approval/components/Components.vue

@@ -0,0 +1,42 @@
+<template>
+  <view>
+    <view class="mx-4 p-2 rounded-2">
+      <Input
+        :id="0"
+        value="单行"
+        title="单行文本"
+        :required="true"
+        placeholder="单行文本"
+        @change="inputChange"
+      ></Input>
+      <wd-divider color="#bcbfbe"></wd-divider>
+      <Textarea
+        :id="1"
+        title="多行文本"
+        :required="false"
+        placeholder="多行文本"
+        @change="textareaChange"
+      ></Textarea>
+      <wd-divider color="#bcbfbe"></wd-divider>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import Input from '@/pages/approval/components/Input.vue'
+  import Textarea from '@/pages/approval/components/Textarea.vue'
+
+  const inputChange = e => {
+    console.log('inputChange', e)
+  }
+
+  const textareaChange = e => {
+    console.log('textareaChange', e)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wd-divider {
+    padding: 0 0.5rem;
+  }
+</style>

src/pages/approval/components/Input.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view class="flex flex-items-center pos-relative">
+      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+      <view>{{ title }}</view>
+    </view>
+    <view class="pt-2">
+      <wd-input
+        custom-class="!bg-transparent"
+        :placeholder="placeholder"
+        :maxlength="30"
+        v-model="text"
+        @input="change(id, $event)"
+      ></wd-input>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const emits = defineEmits(['change'])
+
+  const text = ref<string>('')
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  })
+
+  onMounted(() => {
+    text.value = props.value
+  })
+
+  const change = (id, data) => {
+    emits('change', { id, value: data.value })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wd-input::after {
+    height: 0 !important;
+  }
+
+  :deep(.wd-input__inner) {
+    font-size: 0.875rem;
+  }
+</style>

src/pages/approval/components/Textarea.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="px-2 text-3.5">
+    <view class="flex flex-items-center pos-relative">
+      <view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
+      <view>{{ title }}</view>
+    </view>
+    <view class="pt-2">
+      <wd-textarea
+        custom-class="!bg-transparent"
+        custom-textarea-class="h-16"
+        :placeholder="placeholder"
+        :maxlength="250"
+        v-model="text"
+        show-word-limit
+        @input="change(id, $event)"
+      ></wd-textarea>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  const emits = defineEmits(['change'])
+
+  const text = ref<string>('')
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    }
+  })
+
+  onMounted(() => {
+    text.value = props.value
+  })
+
+  const change = (id, data) => {
+    emits('change', { id, value: data.value })
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.wd-textarea__value),
+  :deep(.wd-textarea__count) {
+    background: transparent !important;
+  }
+
+  :deep(.wd-textarea__inner) {
+    font-size: 0.875rem;
+  }
+
+  .wd-textarea {
+    padding: 0;
+  }
+</style>

src/pages/approval/create-application.vue

@@ -0,0 +1,40 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    disableScroll: true
+  }
+}
+</route>
+<template>
+  <view class="h-100vh flex flex-col">
+    <TopNavigation :title="title"></TopNavigation>
+    <scroll-view class="flex-1 box-border" :scroll-y="true">
+      <Components></Components>
+    </scroll-view>
+    <view class="pb-safe border-#eef0f5 border-t-solid">
+      <view class="flex flex-items-center flex-justify-around py-3 px-3">
+        <view class="py-2 w-45% text-center bg-#e2e5ea custom-color-blue rounded-2">保存草稿</view>
+        <view class="opacity-60% py-2 w-45% text-center custom-bg-blue color-white rounded-2">
+          提交
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import Components from '@/pages/approval/components/Components.vue'
+
+  const title = ref<string>('')
+  const id = ref<number>(null)
+
+  onLoad(options => {
+    if (options.title) {
+      title.value = options.title
+    }
+    if (options.id) {
+      id.value = Number(options.id)
+    }
+  })
+</script>

src/types/uni-pages.d.ts

@@ -6,7 +6,9 @@
 interface NavigateToOptions {
   url: "/pages/home/home" |
        "/pages/application-list/application-list" |
+       "/pages/approval/approval-detail" |
        "/pages/approval/approval" |
+       "/pages/approval/create-application" |
        "/pages/attendance/allowed-time" |
        "/pages/attendance/attendance-rules" |
        "/pages/attendance/attendance" |