hlq-cli 1.0.0

package/templates/src/components/form/component/datePicker.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-date-picker
+    clearable
+    v-model="formData[config.key]"
+    :type="dateTypeMap.get(config.type)"
+    :placeholder="config.placeholder || '请选择' + config.label"
+    :disabled="disabled"
+    :format="config.format || 'YYYY-MM-DD'"
+    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :disabled-date="config.disabledDate"
+    style="width: 100%"
+    @change="change"
+  />
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormDateConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+
+const dateTypeMap = new Map([
+  ['date', 'datePicker'],
+  ['dates', 'datesPicker'],
+  ['week', 'weekPicker'],
+  ['year', 'yearPicker'],
+  ['years', 'yearsPicker'],
+  ['month', 'monthPicker'],
+  ['months', 'monthsPicker'],
+])
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/dateRange.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-date-picker
+    clearable
+    v-model="formData[config.key]"
+    :type="dateRangeMap.get(config.type)"
+    :start-placeholder="config.startPlaceholder || '开始日期'"
+    :end-placeholder="config.endPlaceholder || '结束日期'"
+    :disabled="disabled"
+    :format="config.format || 'YYYY-MM-DD'"
+    :value-format="config.valueFormat || 'YYYY-MM-DD'"
+    style="width: 100%"
+    @change="change"
+  />
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormDateRangeConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+
+const props = defineProps<Props>()
+const dateRangeMap = new Map([
+  ['dateRange', 'daterange'],
+  ['monthRange', 'monthrange'],
+  ['yearRange', 'yearrange'],
+  ['dateRange', 'datetimerange'],
+])
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/datetimePicker.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-date-picker
+    clearable
+    v-model="formData[config.key]"
+    :type="dateTypeMap.get(config.type)"
+    :placeholder="config.placeholder || '请选择' + config.label"
+    :disabled="disabled"
+    :format="config.format || 'YYYY-MM-DD'"
+    :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+    :disabled-date="config.disabledDate"
+    style="width: 100%"
+    @change="change"
+  />
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormDateConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/fileUpload.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-upload
+    v-model:file-list="state.fileList"
+    action="#"
+    :before-upload="beforeUpload"
+    multiple
+    :limit="config.limit || 10"
+    :accept="config.fileType || ''"
+    :on-preview="handleFileDownload"
+    :on-exceed="handleExceed"
+    :on-success="handleSuccess"
+    :on-remove="handleRemove"
+    :http-request="httpRequest"
+    :show-file-list="true"
+    list-type="text"
+    style="width: 100%"
+    :disabled="disabled"
+    @change="change"
+  >
+    <el-button
+      type="default"
+      :disabled="disabled || state.fileList.length >= (config.limit || 10)"
+    >
+      点击选取文件上传
+    </el-button>
+    <template #tip v-if="config.tip">
+      <div class="el-upload__tip">
+        {{ config.tip }}
+      </div>
+    </template>
+  </el-upload>
+</template>
+<script lang="ts" setup>
+import { upload } from './upload'
+
+interface Props {
+  config: FormUploadConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+const {
+  handleFileDownload,
+  beforeUpload,
+  handleExceed,
+  handleSuccess,
+  handleRemove,
+  httpRequest,
+} = upload(props, props.state)
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped>
+.uploadTip {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+.hideUploadBtn :deep(.el-upload--picture-card),
+.hideUploadBtn :deep(.el-upload.el-upload--text) {
+  display: none;
+}
+/* button 文本列表：文件名可点击下载 */
+.formImageUploadWrap :deep(.el-upload-list--text .el-upload-list__item-name) {
+  color: #409eff;
+  cursor: pointer;
+  &:hover {
+    color: #66b1ff;
+  }
+}
+/* 隐藏「按 Delete 键可删除」提示，保留叉号删除 */
+.formImageUploadWrap :deep(.el-icon--close-tip) {
+  display: none !important;
+}
+</style>

package/templates/src/components/form/component/formFun.ts

@@ -0,0 +1,132 @@
+// 常用公式方法处理器
+type ProcessorFn = (...args: any[]) => any
+type ProcessorMap = {
+  [key: string]: ProcessorFn
+  abs: (val: any) => number
+  trim: (val: any) => string
+  concat: (str: string | undefined, ...args: any[]) => string
+  upper: (val: any) => string
+  lower: (val: any) => string
+  round: (val: any, precision?: number) => string
+  substr: (val: any, start: any, len: undefined) => string
+  replace: (val: any, search: string | RegExp, replacement: string) => string
+  split: (
+    val: any,
+    sep: { [Symbol.split](string: string, limit?: number): string[] },
+  ) => string[]
+  join: (arr: any[], sep: string | undefined) => string
+  length: (val: any) => number
+  parseInt: (val: string, radix?: number) => number
+  parseFloat: (val: string) => number
+}
+const processors: ProcessorMap = {
+  // 取绝对值
+  abs: (val: any) => Math.abs(Number(val)),
+  // 去除字符串首尾空格
+  trim: (val: any) => String(val).trim(),
+  // 用指定分隔符拼接参数
+  concat: (str: string | undefined, ...args: any[]) => {
+    return args.join(str)
+  },
+  // 转大写
+  upper: (val: any) => String(val).toUpperCase(),
+  // 转小写
+  lower: (val: any) => String(val).toLowerCase(),
+  // 四舍五入到指定小数位
+  round: (val: any, precision = 0) => Number(val).toFixed(Number(precision)),
+  // 字符串截取
+  substr: (val: any, start: any, len: undefined) =>
+    String(val).slice(
+      Number(start),
+      len !== undefined ? Number(start) + Number(len) : undefined,
+    ),
+  // 替换字符串
+  replace: (val: any, search: string | RegExp, replacement: string) =>
+    String(val).replace(new RegExp(search, 'g'), replacement),
+  // 分割字符串
+  split: (
+    val: any,
+    sep: { [Symbol.split](string: string, limit?: number): string[] },
+  ) => String(val).split(sep),
+  // 数组/字符串拼接
+  join: (arr: any[], sep: string | undefined) =>
+    Array.isArray(arr) ? arr.join(sep) : String(arr).split(',').join(sep),
+  // 获取长度
+  length: (val: any) => String(val).length,
+  // 字符串转整数
+  parseInt: (val: string, radix = 10) => parseInt(val, Number(radix)),
+  // 字符串转浮点数
+  parseFloat: (val: string) => parseFloat(val),
+}
+const getDataValue = (arg: string, data: any) => {
+  // 如果 arg 是 ${_xxx_} 形式且 xxx 中没有 .
+  if (/^\$\{_(\w+)_\}$/.test(arg)) {
+    const key = arg.match(/^\$\{_(\w+)_\}$/)?.[1]
+    if (key && data && typeof data === 'object' && key in data) {
+      return data[key]
+    }
+  }
+  arg = arg.replace(/\$\{(_\w+(\.\w+)*_)\}/g, (_, key) => `${key}`)
+  // 判断 arg 中是否有 _任意字串.任意_
+  if (/_(\w+(\.\w+)*)_/.test(arg)) {
+    const argReplaced = arg.replace(
+      /_(\w+(\.\w+)*)_/g,
+      (_: any, key: string) => {
+        // 支持多级属性访问
+        const value = key
+          .split('.')
+          .reduce((acc: { [x: string]: any }, cur: string | number) => {
+            console.warn('匹配数值:', acc, cur)
+            if (acc?.[cur] === undefined) {
+              console.error('匹配数值为空请查看配置信息:', key)
+              return ''
+            }
+            return acc?.[cur]
+          }, data)
+        return String(value)
+      },
+    )
+    return getDataValue(argReplaced, data)
+  } else {
+    return arg
+  }
+}
+// ${_userData.id_}
+export const proessParams = (valueStr: string, data: Data) => {
+  let value = getDataValue(valueStr, data) // 递归解析参数
+  if (typeof value !== 'string') {
+    return value
+  }
+  const match = value.match(/(\w+)\((.*?)\)/) // 匹配 "func(arg)"
+  if (match) {
+    const [str, func, arg] = match
+    value = value.replace(str, processors[func]?.(...arg.split(',')))
+    proessParams(value, data)
+  } else {
+    return value
+  }
+}
+export const proessObjParams = (valueStr: Data, data: Data) => {
+  for (const key in valueStr) {
+    if (typeof valueStr[key] === 'string') {
+      valueStr[key] = proessParams(valueStr[key], data)
+    } else if (typeof valueStr[key] === 'object') {
+      valueStr[key] = proessObjParams(valueStr[key], data)
+    }
+  }
+  return valueStr
+}
+export const proessAnyParams = (valueStr: any, data: Data) => {
+  let value
+  if (typeof valueStr === 'string') {
+    value = proessParams(valueStr, data)
+  } else if (typeof valueStr === 'object') {
+    value = proessObjParams(valueStr, data)
+  } else {
+    value = valueStr
+  }
+  if (typeof value === 'string') {
+    value = JSON.parse(value)
+  }
+  return value
+}

package/templates/src/components/form/component/imageUpload.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    class="formImageUploadWrap"
+    :class="{ hideUploadBtn: state.fileList.length >= (config.limit || 10) }"
+  >
+    <!-- picture-card：原卡片图床上传 -->
+    <el-upload
+      v-model:file-list="state.fileList"
+      action="#"
+      :before-upload="beforeUpload"
+      list-type="picture-card"
+      multiple
+      :limit="config.limit || 10"
+      :on-preview="handleFileDownload"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-remove="handleRemove"
+      :http-request="httpRequest"
+      drag
+      accept="image/*"
+      style="width: 100%"
+      :disabled="disabled"
+      @change="change"
+    >
+      <div
+        class="imageBox"
+        :style="{
+          cursor:
+            state.fileList.length >= (config.limit || 10) ? 'not-allowed' : '',
+        }"
+      >
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </div>
+    </el-upload>
+
+    <div v-if="config.tip" class="uploadTip">{{ config.tip }}</div>
+
+    <el-dialog
+      v-model="state.dialogVisible"
+      style="display: flex; justify-content: center; align-items: center"
+    >
+      <img w-full :src="state.dialogImageUrl" />
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Plus } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+import { upload } from './upload'
+
+interface Props {
+  config: FormUploadConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+
+const imageAccept = computed(() => {
+  const ft = props.config.fileType
+  if (!ft || ft === '*') return 'image/*'
+  return ft
+    .split(',')
+    .map((s) => `.${s.trim().toLowerCase()}`)
+    .join(',')
+})
+
+const {
+  handleFileDownload,
+  beforeUpload,
+  handleExceed,
+  handleSuccess,
+  handleRemove,
+  httpRequest,
+} = upload(props, props.state)
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped>
+:deep() {
+  .el-upload-dragger {
+    display: flex;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+}
+</style>

package/templates/src/components/form/component/input.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-input
+    clearable
+    v-model="formData[config.key]"
+    :placeholder="disabled ? '' : config.placeholder || '请输入' + config.label"
+    :disabled="disabled"
+    :parser="parser"
+    :formatter="parser"
+    :show-password="config.type === 'password'"
+    :autocomplete="config.type === 'password' ? 'new-password' : 'on'"
+    @keyup.enter="enter"
+    style="width: 100%"
+    @change="change"
+  ></el-input>
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormInputConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+// 输入框格式化
+const parser = (value: string) => {
+  if (props.config.type === 'number') {
+    return value.replace(/[^0-9.-]/g, '')
+  } else {
+    return value
+  }
+}
+const emits = defineEmits(['enter', 'change'])
+const enter = () => {
+  emits('enter')
+}
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/location.vue

@@ -0,0 +1,79 @@
+<template>
+  <div style="display: flex; gap: 16px" class="w100">
+    <el-input
+      clearable
+      v-model="formData[config.keys[0]]"
+      :placeholder="disabled ? '' : '请输入' + config.labels[0]"
+      :disabled="disabled"
+      style="width: 100%"
+    ></el-input>
+    <el-input
+      clearable
+      v-model="formData[config.keys[1]]"
+      :placeholder="disabled ? '' : '请输入' + config.labels[1]"
+      :disabled="disabled"
+      style="width: 100%"
+    ></el-input>
+    <el-button type="primary" @click="open">查询坐标</el-button>
+  </div>
+
+  <Dialog
+    ref="dialogRef"
+    v-model:modelValue="state.visible"
+    title="请在地图确认对应的位置后,在当前坐标点如下区域点击复制按钮,再关闭弹窗"
+    width="99%"
+    :footerShow="false"
+  >
+    <div style="height: 60vh">
+      <!-- <div>请在地图确认对应的位置后,在当前坐标点如下区域点击复制按钮,再关闭弹窗</div> -->
+      <iframe
+        src="https://api.map.baidu.com/lbsapi/getpoint/index.html"
+        frameborder="0"
+        style="width: 100%; height: 100%"
+        allow="accelerometer 'self'"
+      ></iframe>
+    </div>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import Dialog from "@/components/dialog/index.vue";
+import { reactive, watch } from "vue";
+interface Props {
+  config?: FormLocationConfig;
+  data?: Data;
+  formData: Data;
+  disabled: boolean;
+  state: any;
+}
+const props = withDefaults(defineProps<Props>(), {
+  config: () => {
+    return {
+      type: "location",
+      label: "位置",
+      key: "location",
+      labels: ["经度", "纬度"],
+      keys: ["longitude", "latitude"],
+    };
+  },
+});
+const state = reactive({
+  visible: false,
+});
+const open = () => {
+  state.visible = true;
+};
+watch(
+  () => state.visible,
+  async () => {
+    if (!state.visible) {
+      let val = await navigator.clipboard.readText();
+
+      if (/^-?\d+(\.\d+)?,\-?\d+(\.\d+)?$/.test(val)) {
+        props.formData[props.config.keys[0]] = val.split(",")[0];
+        props.formData[props.config.keys[1]] = val.split(",")[1];
+      }
+    }
+  }
+);
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/radio.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-radio-group
+    v-model="formData[config.key]"
+    style="width: 100%"
+    @change="change"
+    :disabled="disabled"
+  >
+    <el-radio
+      v-for="item in config.options"
+      :key="item.value"
+      :value="item.value"
+    >
+      {{ item.label }}
+    </el-radio>
+  </el-radio-group>
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormCheckBoxConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/select.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-select-v2
+    clearable
+    ref="cascaderRef"
+    v-model="formData[config.key]"
+    :placeholder="config.placeholder || '请选择' + config.label"
+    :disabled="disabled"
+    style="width: 100%"
+    :props="props.state.cascaderProp"
+    :multiple="config.isMore"
+    :options="showList"
+    filterable
+    :filter-method="filterselectMethod"
+    @keyup.enter="selectenter"
+    @change="change"
+  >
+  </el-select-v2>
+</template>
+<script lang="ts" setup>
+import { debounce } from 'lodash'
+import { reactive, ref, watch } from 'vue'
+
+interface Props {
+  config: FormSelectConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+const cascaderRef = ref()
+const showList = ref<Data[]>(props.config.options || [])
+const filterselectMethod = (keyword: string) => {
+  // 正常过滤逻辑
+  showList.value = (
+    props.config.options && props.config.options.length
+      ? props.config.options
+      : props.state.options
+  ).filter((item: any) => {
+    return item[props.state.cascaderProp.label || 'label'].indexOf(keyword) > -1
+  })
+  if (keyword) {
+    selectdebounce()
+  }
+}
+const selectdebounce = debounce(() => {
+  if (showList.value.length > 0) {
+    props.formData[props.config.key] =
+      showList.value[0][props.state.cascaderProp.value || 'value']
+  }
+}, 1000)
+const selectenter = () => {
+  cascaderRef.value.blur()
+}
+const emits = defineEmits(['change'])
+const change = (val: any) => {
+  emits('change', val)
+}
+watch(
+  () => props.state.options,
+  (val) => {
+    showList.value = val
+  },
+)
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/textarea.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-input
+    clearable
+    type="textarea"
+    v-model="formData[config.key]"
+    :placeholder="disabled ? '' : config.placeholder || '请输入' + config.label"
+    :disabled="disabled"
+    style="width: 100%"
+    @change="change"
+  ></el-input>
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormInputConfig;
+  data?: Data;
+  formData: Data;
+  disabled: boolean;
+  state: any;
+}
+const props = defineProps<Props>();
+const emits = defineEmits(["change"]);
+const change = (val: any) => {
+  emits("change", val);
+};
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/timePicker.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-time-picker
+      clearable
+      v-model="formData[config.key]"
+      :placeholder="config.placeholder || '请选择' + config.label"
+      :disabled="disabled"
+      :format="config.format"
+      :value-format="config.valueFormat"
+      style="width: 100%"
+      @change="change"
+    />
+</template>
+<script lang="ts" setup>
+
+interface Props {
+  config: FormDateConfig;
+  data?: Data;
+  formData: Data;
+  disabled: boolean;
+  state: any;
+}
+const props = defineProps<Props>();
+const emits = defineEmits(["change"]);
+const change = (val: any) => {
+  emits("change", val);
+};
+</script>
+<style lang="scss" scoped></style>