feat 自定义业务组件

src/components/BCascader.vue

@@ -5,7 +5,6 @@
       label-align="top"
       readonly
       :right-icon="showText ? 'clear' : ''"
-      :required="required"
       :name="name"
       :rules="rules"
       :placeholder="placeholder"
@@ -34,8 +33,8 @@
 // 级联窗口组件
 import { ref } from 'vue'
 
-const { label, placeholder, name, rules = [], required, optionsLevel = 3, options = [], title }
-  = defineProps<{ label: string, placeholder?: string, name: string, rules?: any[], required?: boolean, optionsLevel?: number, options?: any, title?: string }>()
+const { label, placeholder, name, rules = [], optionsLevel = 3, options = [], title }
+  = defineProps<{ label: string, placeholder?: string, name: string, rules?: any[], optionsLevel?: number, options?: any, title?: string }>()
 const fieldNames = ref({
   text: 'name',
   value: 'code',
@@ -55,8 +54,8 @@ const cascaderValue = ref<string>('')
 /**
  * 监听 modelValue 改变
  */
-watch(() => modelValue.value, () => initData())
-watch(() => options, () => initData())
+watch(() => modelValue.value, () => initData(), { immediate: true })
+watch(() => options, () => initData(), { immediate: true })
 /**
  * 初始化处理各项属性
  */
@@ -101,6 +100,9 @@ function onFinish({ selectedOptions }) {
   modelValue.value = selectedOptions.map(option => option.code)
 }
 
+/**
+ * 清除内容
+ */
 function onClear(e) {
   // 阻止冒泡到 @click
   e.stopPropagation()

src/components/BDatePicker.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <!-- 结束日期 -->
+    <van-field
+      v-model="showText"
+      label-align="top"
+      readonly
+      :right-icon="showText ? 'clear' : ''"
+      :name="name"
+      :rules="rules"
+      :placeholder="placeholder"
+      :label="label"
+      @click="open"
+      @click-right-icon="onClear"
+    />
+    <!-- 时间弹窗 -->
+    <van-popup v-model:show="show" destroy-on-close position="bottom">
+      <van-date-picker
+        v-model="datePickerValue"
+        :columns-type="['year', 'month', 'day']"
+        :min-date="new Date(1900, 0, 1)"
+        :max-date="new Date(2099, 0, 1)"
+        @cancel="show = false"
+        @confirm="onFinish"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const { label, placeholder, name, rules = [] }
+  = defineProps<{ label: string, placeholder?: string, name: string, rules?: any[]}>()
+
+const modelValue = defineModel<string>()
+// 显示在 field 上的文本
+const showText = ref<string>('')
+// 显示
+const show = ref<boolean>(false)
+// 绑定的值(默认当前年月一号)
+const datePickerValue = ref<any[]>([new Date().getFullYear(), 0, 1])
+
+// 监听和转换
+watch(() => modelValue.value, () => {
+  if (modelValue.value) {
+    datePickerValue.value = modelValue.value.split('-')
+  }
+  showText.value = modelValue.value as string
+}, { immediate: true })
+
+/**
+ * 打开选择弹窗
+ */
+function open() {
+  show.value = true
+}
+
+/**
+ * 选中函数
+ */
+function onFinish() {
+  show.value = false
+  modelValue.value = datePickerValue.value.join('-')
+}
+
+/**
+ * 清除内容
+ */
+function onClear(e) {
+  // 阻止冒泡到 @click
+  e.stopPropagation()
+  modelValue.value = ''
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/components/BUpload.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { defineProps, ref, watch } from 'vue'
 import { showNotify } from 'vant'
 import { getUploadParams, saveOssFileInfo, uploadFile } from '@/api/FileUpload.api.js'
 import type { WebHeaders } from '#/web'
@@ -20,7 +20,7 @@ const uploadAttachName = ref<string>()
 
 watch(() => picUrl.value, () => {
   buildFileList()
-})
+}, { immediate: true })
 
 /**
  *  上传