af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import {
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+  Rate as VanRate,
+  Slider as VanSlider,
+  Stepper as VanStepper,
+  Switch as VanSwitch,
+  TimePicker as VanTimePicker,
+  DatePicker as VanDatePicker,
+  Area as VanArea,
+  Calendar as VanCalendar,
+  Checkbox as VanCheckbox,
+  CheckboxGroup as vanCheckboxGroup,
+} from 'vant'
+import {reactive,ref,watch,onBeforeMount} from 'vue'
+import { areaList } from '@vant/area-data'
+import {runLogic} from '@af-mobile-client-vue3/services/api/common'
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
+import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
+
+const props = defineProps({
+  attr: {
+    type: Object
+  },
+  datePickerFilter: {
+    type: Function,
+    default: () => true
+  },
+  datePickerFormatter: {
+    type: Function,
+    default: (type, val) => val
+  },
+  mode: {
+    type: String,
+    default: '查询'
+  },
+  serviceName: {
+    type: String,
+    default: undefined
+  },
+  // 调用logic获取数据源的追加参数
+  getDataParams: {
+    type: Object,
+    default: undefined
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Array, Object],
+    default: undefined
+  }
+})
+let {attr,mode,serviceName,getDataParams,disabled,modelValue} = props
+let calendarShow = ref(false)
+let option = reactive([])
+let localValue = ref<any>()
+let pickerValue = ref(undefined)
+let datePickerValue = ref(undefined)
+let timePickerValue = ref(undefined)
+let area = ref<any>(undefined)
+let calendarValue = ref<any>('')
+let showPicker = ref(false)
+let showDatePicker = ref(false)
+let showTimePicker = ref(false)
+let showArea = ref(false)
+if (modelValue) {
+  localValue.value = ref(modelValue)
+} else {
+  switch (attr.formType) {
+    case 'switch':
+      localValue.value = false
+      break
+    case 'checkbox':
+      localValue.value = ''
+      break
+    case 'checkboxGroup':
+      localValue.value = []
+      break
+    case 'radio':
+      localValue.value = ''
+      break
+    case 'stepper':
+      localValue.value = 1
+      break
+    case 'rate':
+      localValue.value = 0
+      break
+    case 'slider':
+      localValue.value = 0
+      break
+    case 'uploader':
+      localValue.value = []
+      break
+    case 'picker':
+      localValue.value = undefined
+      break
+    case 'datePicker':
+      localValue.value = []
+      break
+    case 'timePicker':
+      localValue.value = []
+      break
+    case 'area':
+      localValue.value = ''
+      break
+    case 'calendar':
+      localValue.value = ''
+      break
+    case 'select':
+      localValue.value = []
+      break
+    case 'mul-select':
+      localValue.value = []
+      break
+    case 'textarea':
+      localValue.value = ''
+      break
+    case 'input':
+      localValue.value = ''
+      break
+    default:
+      localValue.value = undefined
+      break
+  }
+}
+const emits = defineEmits(['update:modelValue'])
+onBeforeMount(()=>{
+  init()
+})
+function onCalendarConfirm(values) {
+  if (attr.calendarType === 'range'){
+    const [start, end] = values;
+    calendarValue.value = formatDate(start) + '至' + formatDate(end)
+    emits('update:modelValue', calendarValue.value)
+  } else {
+    calendarValue.value = formatDate(values)
+    emits('update:modelValue', calendarValue.value)
+  }
+  calendarShow.value = false;
+}
+const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+function dateInit(date){
+  return new Date(date)
+}
+watch(()=> localValue,(newValue, oldValue)=>{
+  localValue = newValue
+  emits('update:modelValue', localValue.value)
+},{deep:true})
+function init () {
+  if (attr.keyName && attr.keyName.indexOf('logic@') !== -1) {
+    getData({}, res => {
+      option = res
+      initRadioValue()
+    })
+  } else {
+    initRadioValue()
+  }
+}
+function initRadioValue () {
+  if (mode === '新增/修改' && attr.formType === 'radio' && !localValue) {
+    if (attr.keys && attr.keys.length > 0) {
+      localValue = attr.keys[0].value
+    } else if (option && option.length > 0) {
+      localValue = option[0].value
+    }
+  }
+}
+function getData (value, callback) {
+  if (value !== '') {
+    const logicName = attr.keyName
+    const logic = logicName.substring(6)
+    // 调用logic前设置参数
+    if (getDataParams && getDataParams[attr.model]) {
+      Object.assign(value, getDataParams[attr.model])
+    }
+    runLogic(logic, value, serviceName).then(res => {
+      callback(res)
+    })
+  }
+}
+function onPickerConfirm({ selectedOptions }) {
+  showPicker.value = false;
+  pickerValue.value = selectedOptions[0].text;
+  emits('update:modelValue', [selectedOptions[0].text])
+}
+function onDatePickerConfirm({ selectedValues }) {
+  showDatePicker.value = false;
+  datePickerValue.value = selectedValues.join('-');
+  emits('update:modelValue', datePickerValue.value)
+}
+function onTimePickerConfirm({ selectedValues }) {
+  showTimePicker.value = false;
+  timePickerValue.value = selectedValues.join(':');
+  emits('update:modelValue', timePickerValue.value)
+}
+function onAreaConfirm({ selectedOptions }) {
+  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
+  showArea.value = false;
+  emits('update:modelValue', {
+    province: selectedOptions[0].text,
+    city: selectedOptions[1].text,
+    district: selectedOptions[2].text
+  })
+}
+function handleInput(e) {
+  localValue.value = e
+  emits('update:modelValue', e)
+}
+function clickShowPicker() {
+  showPicker.value = true;
+}
+function updateFile(files, index) {
+  files.forEach((file) => {
+    if (file.content)
+      delete file.content
+    if (file.file)
+      delete file.file
+    if (file.objectUrl)
+      delete file.objectUrl
+  })
+  localValue.value = files
+  emits('update:modelValue', localValue.value)
+}
+</script>
+
+<template>
+  <div>
+    <van-field
+      v-if="attr.formType === 'switch'"
+      name="switch"
+      :label="attr.title">
+      <template #input>
+        <van-switch v-model="localValue" @update:model-value="(value) => emits('update:modelValue', value)"/>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'checkbox'"
+      name="checkbox"
+      :label="attr.title">
+      <template #input>
+        <van-checkbox v-model="localValue" :shape="attr.rule.square" @change="(value) => emits('update:modelValue', value)">
+          {{attr.title}}
+        </van-checkbox>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'checkboxGroup'"
+      name="checkboxGroup"
+      :label="attr.title">
+      <template #input>
+        <van-checkbox-group v-model="localValue" direction="horizontal" @change="(value) => emits('update:modelValue', value)">
+          <van-checkbox style="padding: 2px" :name="item.value" :shape="attr.rule.shape" v-for="(item,index) in attr.selectKey" :key="index" :value="item.value">{{ item.label }}</van-checkbox>
+        </van-checkbox-group>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'radio'"
+      name="radio"
+      :label="attr.title">
+      <template #input>
+        <van-radio-group v-model="localValue" direction="horizontal" @change="(value) => emits('update:modelValue', value)">
+          <van-radio style="padding: 2px" :name="item.value" v-for="(item,index) in attr.selectKey" :key="index" :value="item.value">{{ item.label }}</van-radio>
+        </van-radio-group>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'stepper'"
+      name="stepper"
+      v-model="localValue"
+      :label="attr.title">
+      <template #input>
+        <van-stepper v-model="localValue" @change="(value) => emits('update:modelValue', value)"/>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'rate'"
+      name="rate"
+      :label="attr.title">
+      <template #input>
+        <van-rate v-model="localValue" @change="(value) => emits('update:modelValue', value)"/>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'slider'"
+      name="slider"
+      :label="attr.title">
+      <template #input>
+        <van-slider v-model="localValue" @change="(value) => emits('update:modelValue', value)"/>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'uploader'"
+      name="uploader"
+      :label="attr.title">
+      <template #input>
+        <!--      <van-uploader v-model="localValue" />-->
+        <uploader
+          upload-mode="oss"
+          :image-list="localValue"
+          authority="admin"
+          @update-file-list="updateFile"/>
+      </template>
+    </van-field>
+
+    <van-field
+      v-if="attr.formType === 'picker'"
+      name="picker"
+      :label="attr.title"
+      is-link
+      readonly
+      v-model="pickerValue"
+      :placeholder="attr.placeholder"
+      @click="clickShowPicker">
+    </van-field>
+    <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
+      <van-picker
+        v-model="localValue"
+        :title="attr.title"
+        :columns="attr.selectKey"
+        :readonly="attr.readonly"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+        :columns-field-names="attr.customFieldName ? attr.customFieldName : {text: 'text',value: 'value',children: 'children'}"
+        :confirm-button-text="attr.confirmButtonText || attr.confirmButtonText === '' ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText || attr.cancelButtonText === '' ? attr.cancelButtonText : '取消'"
+      />
+    </van-popup>
+
+    <van-field
+      v-if="attr.formType === 'datePicker'"
+      name="datePicker"
+      :label="attr.title"
+      is-link
+      readonly
+      v-model="datePickerValue"
+      :placeholder="attr.placeholder"
+      @click="showDatePicker=true">
+    </van-field>
+    <van-popup v-model:show="showDatePicker" v-show="attr.formType === 'datePicker'" position="bottom" teleport="body">
+      <van-date-picker
+        :title="attr.lable"
+        v-model="localValue"
+        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
+        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+        :readonly="attr.readonly ? attr.readonly : false"
+        @cancel="showDatePicker = false"
+        @confirm="onDatePickerConfirm"
+      />
+    </van-popup>
+
+    <van-field
+      v-if="attr.formType === 'timePicker'"
+      name="timePicker"
+      is-link
+      v-model="timePickerValue"
+      readonly
+      :placeholder="attr.placeholder"
+      :label="attr.title"
+      @click="showTimePicker = true">
+    </van-field>
+    <van-popup v-model:show="showTimePicker" v-show="attr.formType === 'timePicker'" position="bottom" teleport="body">
+      <van-time-picker
+        v-model="localValue"
+        :title="attr.lable"
+        :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
+        :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+        :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+        :readonly="attr.readonly ? attr.readonly : false"
+        @cancel="showTimePicker = false"
+        @confirm="onTimePickerConfirm"
+      />
+    </van-popup>
+
+    <van-field
+      v-if="attr.formType === 'area'"
+      name="area"
+      v-model="area"
+      is-link
+      readonly
+      :placeholder="attr.placeholder"
+      :label="attr.title"
+      @click="showArea = true">
+    </van-field>
+    <van-popup v-model:show="showArea" position="bottom" teleport="body">
+      <van-area
+        v-model="localValue" :title="attr.title" :area-list="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showArea = false"
+      />
+    </van-popup>
+    <van-field
+      v-if="attr.formType === 'calendar'"
+      v-model="calendarValue"
+      is-link
+      readonly
+      name="calendar"
+      :label="attr.title"
+      :placeholder="attr.placeholder"
+      @click="calendarShow = true"
+    />
+    <van-calendar v-model:show="calendarShow" @confirm="onCalendarConfirm" :type="attr.calendarType" teleport="body" :show-confirm="attr.showConfirm"/>
+
+    <XSelect
+      v-if="attr.formType === 'select'"
+      clearable
+      :rules="attr.rule"
+      v-model="localValue"
+      :placeholder="attr.placeholder ? attr.placeholder : '请选择' + attr.title"
+      :columns="attr.selectKey"
+      :option="attr.option ? attr.option : {label:'label', value:'value'}"
+    >
+    </XSelect>
+
+    <XMultiSelect
+      v-if="attr.formType === 'mul-select'"
+      v-model="localValue"
+      :placeholder="attr.placeholder ? attr.placeholder : '请选择' + attr.title"
+      :columns="attr.itemList"
+      :label-width="attr.labelWidth? attr.labelWidth: 100"
+      :option="attr.option ? attr.option : {label:'label', value:'value'}"
+    >
+    </XMultiSelect>
+
+    <van-field
+      v-if="attr.formType === 'textarea'"
+      v-model="localValue"
+      rows="3"
+      autosize
+      :label="attr.title"
+      type="textarea"
+      :maxlength="attr.maxlength"
+      :placeholder="attr.placeholder ? attr.placeholder : '请输入' + attr.title"
+      show-word-limit
+      label-align="top"
+      @update:model-value="handleInput"
+    />
+
+    <van-field
+      v-if="attr.formType === 'input'"
+      v-model="localValue"
+      :rules="attr.rules"
+      :label="attr.title"
+      :required="attr.required"
+      :type="attr.formType"
+      :readonly="attr.readonly"
+      :disabled="attr.disabled"
+      :placeholder="attr.placeholder ? attr.placeholder : '请输入' + attr.title"
+      :error-message="attr.errorMessage"
+      :clearable="attr.clearable"
+      @update:model-value="handleInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/data/XReportForm/XReportFormJsonRender.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import {
+  Cell as vanCell,
+  CellGroup as vanCellGroup,
+  Field as vanField,
+  Form as vanForm,
+  Image as vanImage,
+} from 'vant'
+import { reactive, ref } from 'vue'
+
+const props = defineProps({
+  jsonConfig: Object,
+})
+
+const receivedFunction = reactive([])
+const contentForMobile = ref([])
+
+function formatConfig() {
+  for (let i = 0; i < props.jsonConfig.content.length; i++) {
+    let tempObj = {
+      label: undefined,
+      value: undefined,
+      valueType: 'str',
+    }
+    const item = props.jsonConfig.content[i]
+    if (item.type === 'jsonKey') {
+      if (receivedFunction[i].labelFunction(props.jsonConfig).type === 'key')
+        tempObj.label = props.jsonConfig.data[receivedFunction[i].labelFunction(props.jsonConfig).content]
+      else if (receivedFunction[i].labelFunction(props.jsonConfig).type === 'value')
+        tempObj.label = receivedFunction[i].labelFunction(props.jsonConfig).content
+
+      if (receivedFunction[i].valueFunction(props.jsonConfig).type === 'key') {
+        tempObj.value = props.jsonConfig.data[receivedFunction[i].valueFunction(props.jsonConfig).content]
+      }
+      else if (receivedFunction[i].valueFunction(props.jsonConfig).type === 'value') {
+        tempObj.value = receivedFunction[i].valueFunction(props.jsonConfig).content
+      }
+      else if (receivedFunction[i].valueFunction(props.jsonConfig).type === 'img') {
+        tempObj.valueType = 'img'
+        tempObj.value = receivedFunction[i].valueFunction(props.jsonConfig).content
+      }
+      contentForMobile.value.push(tempObj)
+      tempObj = {
+        label: undefined,
+        value: undefined,
+        valueType: 'str',
+      }
+    }
+    else if (item.type === 'jsonArray') {
+      for (let j = 0; j < props.jsonConfig.data[item.jsonArrayDataIndex].length; j++) {
+        const jsonArrayItem = props.jsonConfig.data[item.jsonArrayDataIndex][j]
+        if (receivedFunction[i].labelFunction(props.jsonConfig, jsonArrayItem).type === 'key')
+          tempObj.label = jsonArrayItem[receivedFunction[i].labelFunction(props.jsonConfig, jsonArrayItem).content]
+        else if (receivedFunction[i].labelFunction(props.jsonConfig, jsonArrayItem).type === 'value')
+          tempObj.label = receivedFunction[i].labelFunction(props.jsonConfig, jsonArrayItem).content
+
+        if (receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).type === 'key') {
+          tempObj.value = jsonArrayItem[receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).content]
+        }
+        else if (receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).type === 'value') {
+          tempObj.value = receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).content
+        }
+        else if (receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).type === 'img') {
+          tempObj.valueType = 'img'
+          tempObj.value = receivedFunction[i].valueFunction(props.jsonConfig, jsonArrayItem).content
+        }
+
+        contentForMobile.value.push(tempObj)
+        tempObj = {
+          label: undefined,
+          value: undefined,
+          valueType: 'str',
+        }
+      }
+    }
+  }
+}
+// -------------------------  初始化  -------------------------
+initComponent()
+
+function initComponent() {
+  for (let i = 0; i < props.jsonConfig.content.length; i++) {
+    receivedFunction.push({
+      // eslint-disable-next-line no-eval
+      labelFunction: eval(`(${props.jsonConfig.content[i].customFunctionForLabel})`),
+      // eslint-disable-next-line no-eval
+      valueFunction: eval(`(${props.jsonConfig.content[i].customFunctionForValue})`),
+    })
+  }
+  formatConfig()
+}
+</script>
+
+<template>
+  <div class="main">
+    <!--  标题  -->
+    <template v-if="jsonConfig.title">
+      <template v-if="jsonConfig.title.type === 'titleKey'">
+        <h2 class="title" v-html="jsonConfig.data[jsonConfig.title.value]" />
+      </template>
+      <template v-else-if="jsonConfig.title.type === 'titleValue'">
+        <h2 class="title" v-html="jsonConfig.title.value" />
+      </template>
+    </template>
+    <!--  内容  -->
+    <van-form>
+      <van-cell-group inset class="cell_group">
+        <template v-for="(row, rowIndex) in contentForMobile" :key="rowIndex">
+          <template v-if="row.valueType === 'str'">
+            <van-cell center :title="row.label" :value="row.value ? row.value : '无'" />
+          </template>
+          <template v-else-if="row.valueType === 'img'">
+            <template v-for="(img, imgIndex) in row.value" :key="imgIndex">
+              <van-field :name="row.label" :label="row.label">
+                <template #input>
+                  <div style="width: 100%;text-align: right">
+                    <van-image :src="img" width="100" height="100" fit="cover" />
+                  </div>
+                </template>
+              </van-field>
+            </template>
+          </template>
+        </template>
+      </van-cell-group>
+    </van-form>
+  </div>
+</template>
+
+<style scoped lang="less">
+.main{
+  padding-top: 4vh;
+  width: 100vw;
+  height: 100vh;
+  background-color: #eff2f5;
+
+  .title{
+    padding-bottom: 2vh;
+    color: rgb(50, 50, 51);
+    text-align: center;
+    margin: 0 0 3vh;
+  }
+
+  .text_box{
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  .main_text{
+    padding-left: 16px;
+    font-weight: 400;
+    line-height: 1.6;
+    margin: 0 0 40px;
+    color: #969799;
+    font-size: 14px;
+  }
+
+  .show_value_item{
+    text-align: center;
+    font-size: 1.2em;
+  }
+
+  .cell_group{
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+  }
+
+  .form_item{
+    margin-top: 2vh;
+  }
+
+  .button_group{
+    text-align: center;
+    margin-top: 3vh;
+    margin-bottom: 3vh;
+  }
+
+  .button_group>:first-child {
+    margin-right: 3vw;
+  }
+
+  .divider{
+    color: #1989fa;
+    border-color: #1989fa;
+    padding: 0 16px
+  }
+
+  .submit_button{
+    background-color: #eff2f5;
+    padding: 5vh;
+  }
+}
+
+.skeleton{
+  margin-top: 5vh
+}
+.my-cell-group{
+  margin: 0 0 10px 0
+}
+:deep(.van-collapse-item__content) {
+  background-color: #eff2f5;
+  padding: 10px 0;
+}
+:deep(.van-cell-group__title){
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+:deep(.van-field__label) {
+  font-weight: 600;
+}
+:deep(.van-cell__title) {
+  font-weight: 600;
+}
+:deep(.van-uploader__wrapper){
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; /* 水平方向上左右分散对齐 */
+  align-items: center; /* 垂直方向上上下中心对齐 */
+}
+</style>