af-mobile-client-vue3 1.0.54

package/src/components/data/XCellListFilter/index.vue

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, onMounted, ref, watch } from 'vue'
+import {
+  Button as VanButton,
+  Calendar as VanCalendar,
+  Col as VanCol,
+  Dialog as VanDialog,
+  DropdownItem as VanDropdownItem,
+  DropdownMenu as VanDropdownMenu,
+  Icon as VanIcon,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+  Row as VanRow,
+  showFailToast,
+} from 'vant'
+
+const { orderList, orderVal, sortordVal, formQuery } = defineProps<{
+  orderVal?: string
+  sortordVal?: string
+  orderList?: any[]
+  formQuery?: any[]
+}>()
+
+const emit = defineEmits([
+  'update:orderVal',
+  'update:sortordVal',
+  'update:conditionParams',
+  'onRefresh',
+])
+
+// 下拉菜单元素
+const listFilterMenu = ref(null)
+
+// 排序字段
+const currentOrderVal = ref('')
+// 排序规则
+const currentSortordVal = ref('')
+// 排序规则列表
+const sortordList = ref([
+  { title: '正序', value: 'ascend' },
+  { title: '倒序', value: 'descend' },
+])
+
+// 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
+const conditionParams = ref({})
+
+// 日期选择集合
+const rangePickerList = ref([])
+// 日期区间值
+const calendarVal = ref([])
+// 展示日历选择器
+const calendarShow = ref(false)
+// 当前选择的日期选择器下标
+const rangePickerIndex = ref(0)
+// 最小日期
+const minDate = ref(new Date(2020, 0, 1))
+// 最大日期
+const maxDate = ref(null)
+
+// 格式化日期
+function formatCalendarVal(valList) {
+  const res = []
+  valList.forEach((val) => {
+    const date = new Date(val)
+    const yyyy = date.getFullYear()
+    const mm = (`0${date.getMonth() + 1}`).slice(-2)
+    const dd = (`0${date.getDate()}`).slice(-2)
+    const hh = (`0${date.getHours()}`).slice(-2)
+    const min = (`0${date.getMinutes()}`).slice(-2)
+    const ss = (`0${date.getSeconds()}`).slice(-2)
+    res.push(`${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`)
+  })
+  return res
+}
+
+// 打开日期选择器并获取值
+function getRangePickerValue(item, index) {
+  if (item.value)
+    calendarVal.value = item.calendar
+  calendarShow.value = true
+  rangePickerIndex.value = index
+}
+
+// 选择日期
+function calendarValueOnConfirm(value) {
+  calendarVal.value = value
+}
+
+// 取消选择日期
+function calendarValueOnCancel() {
+  calendarVal.value = rangePickerList.value[rangePickerIndex.value].calendar
+  calendarShow.value = false
+}
+
+// 更新日期值
+function updateRangePickerValue() {
+  rangePickerList.value[rangePickerIndex.value].value = formatCalendarVal(calendarVal.value)
+  rangePickerList.value[rangePickerIndex.value].calendar = calendarVal.value
+  // 给条件参数赋值
+  const key = rangePickerList.value[rangePickerIndex.value].model
+  conditionParams.value[key] = formatCalendarVal(calendarVal.value)
+}
+
+// 重置某个选项
+function resetOptionItem(type, item) {
+  switch (type) {
+    case 'rangePicker':
+      item.value = undefined
+      item.calendar = undefined
+      break
+  }
+}
+
+// 重置所有选项
+function resetOption() {
+  currentOrderVal.value = undefined
+  currentSortordVal.value = undefined
+  // 条件参数
+  conditionParams.value = {}
+  // 日期选择器
+  calendarVal.value = []
+  rangePickerList.value.forEach((item) => {
+    item.value = undefined
+    item.calendar = undefined
+  })
+}
+
+function checkOrderOption() {
+  let isCheck = true
+  if (currentOrderVal.value) {
+    if (!currentSortordVal.value) {
+      showFailToast('排序规则不能为空')
+      isCheck = false
+    }
+  }
+  else if (currentSortordVal.value) {
+    if (!currentOrderVal.value) {
+      showFailToast('排序字段不能为空')
+      isCheck = false
+    }
+  }
+  return isCheck
+}
+
+// 确认筛选条件
+function confirmOption() {
+  const isCheck = checkOrderOption()
+  if (isCheck) {
+    const isEmptyObject = Object.keys(conditionParams.value).length === 0
+    emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
+    emit('onRefresh', {})
+    listFilterMenu.value.toggle(false)
+  }
+}
+
+onMounted(() => {
+  currentOrderVal.value = orderVal
+  currentSortordVal.value = sortordVal
+  disposalData()
+  // 处理最大日期 —— 6个月之后
+  const now = new Date()
+  now.setMonth(now.getMonth() + 6)
+  maxDate.value = now
+})
+
+watch(() => currentOrderVal.value, (val) => {
+  emit('update:orderVal', val)
+})
+
+watch(() => currentSortordVal.value, (val) => {
+  emit('update:sortordVal', val)
+})
+
+// 整理数据formQuery
+function disposalData() {
+  rangePickerList.value = formQuery.filter((item) => {
+    return item.type === 'rangePicker'
+  })
+}
+</script>
+
+<template>
+  <div id="XCellListFilter">
+    <VanDropdownMenu :close-on-click-outside="false">
+      <VanDropdownItem ref="listFilterMenu">
+        <template #title>
+          <VanIcon name="filter-o" size="20" />
+        </template>
+        <div class="order-condition">
+          <VanRow justify="space-between" class="filter-title">
+            <VanCol span="10">
+              排序字段
+            </VanCol>
+            <VanCol span="2">
+              <div class="reset-item" @click.stop="currentOrderVal = undefined">
+                重置
+              </div>
+            </VanCol>
+          </VanRow>
+          <VanRadioGroup v-model="currentOrderVal">
+            <VanRadio
+              v-for="(item) in orderList"
+              :key="item.value"
+              :name="item.value"
+              @click="currentOrderVal = item.value"
+            >
+              <VanButton type="default">
+                <span :class="currentOrderVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
+              </VanButton>
+            </VanRadio>
+          </VanRadioGroup>
+          <VanRow justify="space-between" class="filter-title">
+            <VanCol span="10">
+              排序规则
+            </VanCol>
+            <VanCol span="2">
+              <div class="reset-item" @click.stop="currentSortordVal = undefined">
+                重置
+              </div>
+            </VanCol>
+          </VanRow>
+          <VanRadioGroup v-model="currentSortordVal">
+            <VanRadio
+              v-for="(item) in sortordList"
+              :key="item.value"
+              :name="item.value"
+              @click="currentSortordVal = item.value"
+            >
+              <VanButton type="default">
+                <span :class="currentSortordVal === item.value ? 'filter-active' : ''">{{ item.title }}</span>
+              </VanButton>
+            </VanRadio>
+          </VanRadioGroup>
+          <div v-for="(item, index) in rangePickerList" :key="item.model" class="range-picker-list" @click="getRangePickerValue(item, index)">
+            <VanRow justify="space-between" class="range-picker-title">
+              <VanCol span="10">
+                {{ item.name }}
+              </VanCol>
+              <VanCol span="2">
+                <div class="reset-item" @click.stop="resetOptionItem('rangePicker', item)">
+                  重置
+                </div>
+              </VanCol>
+            </VanRow>
+            <div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
+              {{ item.value ? item.value[0].substr(0, 10) : '开始时间' }}
+            </div>
+            <span>~</span>
+            <div :class="item.value ? 'active-picker-time range-picker-time' : 'range-picker-time'">
+              {{ item.value ? item.value[1].substr(0, 10) : '结束时间' }}
+            </div>
+          </div>
+        </div>
+        <div class="operations-panel">
+          <VanButton type="default" @click="resetOption">
+            重置
+          </VanButton>
+          <VanButton type="primary" @click="confirmOption">
+            确认
+          </VanButton>
+        </div>
+      </VanDropdownItem>
+    </VanDropdownMenu>
+    <!--  日期选择器 —— 日历  -->
+    <div class="rangePicker-comp-box">
+      <VanDialog
+        v-model:show="calendarShow"
+        show-cancel-button
+        @confirm="updateRangePickerValue"
+      >
+        <VanCalendar
+          :poppable="false"
+          :show-confirm="false"
+          switch-mode="year-month"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :default-date="calendarVal"
+          type="range"
+          @confirm="calendarValueOnConfirm"
+          @cancel="calendarValueOnCancel"
+        />
+      </VanDialog>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XCellListFilter {
+  .order-condition {
+    padding-bottom: 10px;
+    max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
+    overflow-y: auto;
+    width: 100%;
+    background-color: white;
+    .filter-title {
+      height: 2rem;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 2rem;
+      margin: 5px 1rem 1px 1rem;
+      color: black;
+    }
+    :deep(.van-radio__icon) {
+      display: none;
+    }
+    :deep(.van-radio) {
+      display: inline;
+    }
+    :deep(.van-button--default) {
+      background: #f8f8f8;
+      border-color: #f8f8f8;
+    }
+    .filter-active {
+      color: #1989fa;
+      font-weight: 600;
+    }
+    :deep(.van-button) {
+      display: inline-block;
+      height: 2rem;
+      font-size: 13px;
+      font-weight: 500;
+    }
+    :deep(.van-cell) {
+      padding: 0 0 1rem 0;
+    }
+    :deep(.van-icon)  {
+      display: none;
+    }
+    .range-picker-list {
+      .range-picker-title {
+        height: 2rem;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 2rem;
+        margin: 5px 1rem 1px 1rem;
+        color: black;
+      }
+      .range-picker-time {
+        display: inline-block;
+        background: #f8f8f8;
+        border-radius: 8px;
+        font-size: 13px;
+        margin: 0 1rem;
+        height: 2rem;
+        line-height: 2rem;
+        width: 40vw;
+        text-align: center;
+      }
+      /* 已完成选择的时间 */
+      .active-picker-time {
+        color: #1989fa;
+        font-weight: 600;
+      }
+    }
+    /* 重置元素按钮 */
+    .reset-item {
+      font-weight: 500;
+      color: #1989fa;
+    }
+  }
+  /* 下拉菜单的操作面板 */
+  .operations-panel {
+    display: flex;
+    overflow: hidden;
+    user-select: none;
+    padding: 10px;
+
+    & > .van-button {
+      flex: 1;
+      margin: 0;
+
+      &:first-child {
+        margin-right: 12px;
+      }
+    }
+  }
+  /* 时间范围组件 */
+  .rangePicker-comp-box {
+    :deep(.van-calendar) {
+      height: 58vh;
+    }
+    :deep(.van-calendar__header-title) {
+      background-color: rgba(25, 137, 250, 0.1);
+      height: 8vh;
+      line-height: 8vh;
+    }
+    :deep(.van-calendar__month-mark) {
+      color: rgba(25, 137, 250, 0.1);
+    }
+  }
+}
+</style>

package/src/components/data/XForm/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import {
+  Button as VanButton,
+  CellGroup as VanCellGroup,
+  Form as VanForm
+} from 'vant'
+import {ref,reactive,computed} from 'vue'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+
+let visible = ref(true)
+let myFormItems = reactive<[{isOnlyAddOrEdit?: boolean, formType?: string, key?: string}]>([
+])
+let rules = reactive({})
+let form = reactive({})
+let myServiceName = ref('')
+let loaded = ref(false)
+let myGetDataParams = reactive({})
+const emits = defineEmits(['onSubmit'])
+
+const realJsonData = computed(()=>{
+  // return myFormItems.filter(item => item.isOnlyAddOrEdit)
+  return myFormItems
+})
+
+const groupJsonData = computed(() => {
+  return myFormItems.filter(item => {
+    return item.formType === 'group'
+  }).map((item)=>{
+    return item
+  })
+})
+function init (params) {
+  const {
+    formItems, serviceName, getDataParams = {}
+  } = params
+  loaded.value = false
+  Object.assign(myFormItems,JSON.parse(JSON.stringify(formItems.column)))
+  myServiceName.value = serviceName
+  const formData = {}
+  for (let i = 0; i < realJsonData.value.length; i++) {
+    const item = realJsonData.value[i]
+    setFormProps(formData, item)
+  }
+  // 处理分组数据表单
+  // for (let i = 0; i < groupJsonData.value.length; i++) {
+  //   const groupItem = groupJsonData.value[i]
+  //   for (let j = 0; j < groupItem.groupItems.length; j++) {
+  //     const item = groupItem.groupItems[j]
+  //     setFormProps(formData, item)
+  //   }
+  // }
+  form = formData
+  myGetDataParams = getDataParams
+  loaded.value = true
+}
+function setFormProps (formData, item) {
+  formData[item.key] = undefined
+  if (item.rule) {
+    rules[item.key] = []
+    switch (item.rule.type) {
+      case 'number':
+      case 'integer':
+      case 'float':
+        let defaultValue
+        let message
+        switch (item.rule.type) {
+          case 'number':
+            message = '数字'
+            defaultValue = 0
+            break
+          case 'integer':
+            message = '整数'
+            defaultValue = 0
+            break
+          case 'float':
+            message = '小数'
+            defaultValue = 0.0
+            break
+        }
+        rules[item.key].push({
+          type: item.rule.type,
+          message: item.title + '必须为' + message,
+          transform: (value) => {
+            if (value && value.length !== 0) {
+              return Number(value)
+            } else {
+              return defaultValue
+            }
+          },
+          trigger: 'blur'
+        })
+        break
+    }
+  }
+}
+function onSubmit() {
+  emits('onSubmit', form)
+}
+defineExpose({init})
+</script>
+
+<template>
+  <div  v-show="visible">
+    <van-form @submit="onSubmit">
+      <van-cell-group inset>
+        <x-form-item
+          v-for="(item, index) in realJsonData"
+          :key="index"
+          :attr="item"
+          v-model="form[item.key]"
+          :service-name="myServiceName"
+          :get-data-params="myGetDataParams"
+        />
+      </van-cell-group>
+      <div style="margin: 16px;">
+        <van-button round block type="primary" native-type="submit">
+          提交
+        </van-button>
+        <slot></slot>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<style scoped>
+
+</style>