hlq-cli 1.0.0

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

@@ -0,0 +1,20 @@
+export const upload = (props: any, state: any) => {
+  const handlePreview = (file: UploadUserFile) => {}
+  const handleFileDownload = (file: UploadUserFile) => {}
+  const beforeUpload = (file: UploadUserFile) => {}
+  const handleExceed = (file: UploadUserFile) => {}
+  const handleSuccess = (file: UploadUserFile) => {}
+  const handleRemove = (file: UploadUserFile) => {}
+  const httpRequest = (file: UploadUserFile) => {}
+  const handlePictureCardPreview = (file: UploadUserFile) => {}
+  return {
+    handlePreview,
+    handleFileDownload,
+    beforeUpload,
+    handleExceed,
+    handleSuccess,
+    handleRemove,
+    httpRequest,
+    handlePictureCardPreview,
+  }
+}

package/templates/src/components/form/formInterface.ts

@@ -0,0 +1,115 @@
+// 下拉框数据结构
+interface selectItem {
+  value: string | number // 唯一编码
+  label: string // 名称
+}
+// 级联框数据结构
+interface cascaderItem {
+  value: string | number // 唯一编码
+  label: string // 名称
+  children?: Array<cascaderItem>
+}
+
+// 表单配置
+interface FormConfig {
+  labelPosition?: 'left' | 'right' | 'top' // 标签位置
+  inline?: boolean // 是否内联
+}
+
+// 表单子项配置
+type FormItemConfig = FormItemDataConfig | FormEmptyConfig | FormCostomConfig
+// 表单子项配置(非空)
+type FormItemDataConfig =
+  | FormInputConfig
+  | FormSelectConfig
+  | FormCascaderConfig
+  | FormDateConfig
+  | FormDateRangeConfig
+  | FormUploadConfig
+  | FormCheckBoxConfig
+  | FormLocationConfig
+// 表单子项公共配置
+interface FormBaseConfig {
+  label: string // 名称
+  key: string // 字段
+  type: string // 类型
+  placeholder?: string // 占位符
+  disabled?: boolean
+  defaultValue?: string | number | boolean | Array<string | number>
+  span?: number // 布局
+  required?: boolean // 是否必填
+  rules?: Array<Data> // 特殊规则
+  show?: string // 显示规则
+  linkage?: Array<{
+    key: string | string[] // 关联字段
+    type: 'clear' | 'filter' | 'show' // 联动类型
+  }> // 联动属性
+  describe?: string // 描述
+}
+interface FormOptionsConfig {
+  options: Array<selectItem> // 选项
+  optionsProps?: any
+}
+
+interface FormInputConfig extends FormBaseConfig {
+  type: 'input' | 'textarea' | 'number' | 'password' // 类型
+}
+interface FormLocationConfig extends FormBaseConfig {
+  type: 'location' // 类型
+  labels: string[] // 标签名称
+  keys: string[] // 字段名称
+}
+interface FormSelectConfig extends FormBaseConfig, FormOptionsConfig {
+  type: 'select' // 类型
+  isMore?: boolean // 是否多选
+}
+interface FormCascaderConfig extends FormBaseConfig, FormOptionsConfig {
+  type: 'cascader' // 类型
+  isMore?: boolean // 是否多选
+}
+interface FormDateConfig extends FormBaseConfig {
+  type:
+    | 'datePicker'
+    | 'datetimePicker'
+    | 'datesPicker'
+    | 'weekPicker'
+    | 'yearPicker'
+    | 'yearsPicker'
+    | 'monthPicker'
+    | 'monthsPicker'
+    | 'timePicker' // 类型
+  format?: string // 展示格式
+  valueFormat?: string // 绑定格式
+  disabledDate?: (date: Date) => boolean
+}
+interface FormDateRangeConfig extends FormBaseConfig {
+  type: 'dateRange' | 'monthRange' | 'yearRange' // 类型
+  startPlaceholder?: string // 占位符
+  endPlaceholder?: string // 占位符
+  format?: string // 展示格式
+  valueFormat?: string // 绑定格式
+}
+interface FormCheckBoxConfig extends FormBaseConfig, FormOptionsConfig {
+  type: 'checkbox' | 'radio' // 类型
+}
+interface FormUploadConfig extends FormBaseConfig {
+  type: 'fileUpload' | 'imageUpload' // 类型
+  fileType?: string // 文件类型(以,分隔) 视频:video/* 图片:image/*
+  tip?: string // 提示文字
+  limit?: number // 最大上传数量(默认10)
+}
+interface FormEmptyConfig {
+  span?: number
+  type: 'empty'
+  show?: string // 显示规则
+}
+interface FormCostomConfig {
+  type: 'custom'
+  propsCode: string // 自定义组件标识
+  span?: number
+  show?: string // 显示规则
+  label: string // 名称
+  key: string // 字段
+  required?: boolean // 是否必填
+  rules?: Array<Data> // 特殊规则
+}

package/templates/src/components/form/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="formBox">
+    <!-- <div class="clearBox">
+      <el-button type="danger" size="small" @click="clear">全部重置</el-button>
+    </div> -->
+    <el-form
+      ref="formRef"
+      :model="form"
+      label-width="auto"
+      :labelPosition="formConfig.labelPosition"
+      :inline="true"
+      :rules="rules"
+    >
+      <div class="inlineBox">
+        <template v-for="item in state.formItemConfig">
+          <el-col
+            :span="item.span || 24"
+            v-show="item.show ? getShow(item.show, form) : true"
+          >
+            <el-form-item
+              :prop="item.key"
+              :label="item.label + ':'"
+              v-if="item.type !== 'empty'"
+            >
+              <!-- type为costom时，使用插槽，外部传入组件 -->
+              <template v-if="item.type === 'custom'">
+                <slot :name="item.propsCode"></slot>
+              </template>
+              <template v-else>
+                <formItem
+                  :config="item"
+                  :formData="form"
+                  :onlyRead="onlyRead"
+                ></formItem>
+                <template v-if="item.describe">
+                  <div
+                    style="
+                      margin-top: 4px;
+                      color: #aaa;
+                      font-size: 12px;
+                      line-height: 14px;
+                    "
+                    v-html="item.describe"
+                  ></div>
+                </template>
+              </template>
+            </el-form-item>
+          </el-col>
+        </template>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import formItem from './item.vue'
+import type { FormRules } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { PublicData } from '@/utils/crypto/index.js'
+
+interface Props {
+  formItemConfig?: FormItemConfig[]
+  formConfig?: FormConfig
+  formData?: Data
+  onlyRead?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  formConfig: () => {
+    return {}
+  },
+  formItemConfig: () => [],
+})
+const form = ref<Data>({ ...props.formData })
+const rules = ref<FormRules>({})
+const formRef = ref()
+const state = reactive({
+  formItemConfig: [] as FormItemConfig[],
+  oldFormData: {},
+})
+const clear = () => {
+  // formRef.value?.resetFields();
+  form.value = { ...state.oldFormData }
+}
+let fundata
+const getShow = (val: string, data: Data) => {
+  fundata = data
+  return eval(val)
+}
+// 校验
+const valid = async () => {
+  return new Promise(async (resolve) => {
+    await formRef.value.validate((valid: boolean) => {
+      resolve(valid)
+    })
+  })
+}
+const getFormData = () => {
+  const formData = cloneDeep(form.value)
+  state.formItemConfig.forEach((item: FormItemConfig) => {
+    if (item.type === 'password') {
+      if (formData[item.key].length > 20) {
+      } else {
+        formData[item.key] = formData[item.key]
+          ? PublicData(formData[item.key])
+          : ''
+      }
+    }
+  })
+  return formData
+}
+const getFormBefore = () => {
+  return form.value
+}
+const init = () => {
+  state.formItemConfig.forEach((item: FormItemConfig) => {
+    if (item.type === 'empty' || item.type === 'custom') {
+      return
+    }
+    if (item.rules || item.required) {
+      rules.value[item.key] = item.rules || []
+      switch (item.type) {
+        case 'input':
+        case 'textarea':
+          if (item.required) {
+            ;(rules.value[item.key] as Array<Data>).push({
+              required: true,
+              message: '请输入' + item.label,
+              trigger: 'blur',
+            })
+          }
+          break
+        default:
+          if (item.required) {
+            ;(rules.value[item.key] as Array<Data>).push({
+              required: true,
+              message: '请输入' + item.label,
+              trigger: 'blur',
+            })
+          }
+          break
+      }
+    }
+  })
+}
+const emits = defineEmits(['dataChange'])
+defineExpose({ getFormData, valid, clear, getFormBefore })
+watch(
+  () => props.formData,
+  (val) => {
+    form.value = { ...val }
+    state.oldFormData = { ...val }
+  },
+  {
+    deep: true,
+  },
+)
+watch(
+  () => form.value,
+  (val) => {
+    emits('dataChange', val)
+  },
+  {
+    deep: true,
+  },
+)
+watch(
+  () => props.formItemConfig,
+  () => {
+    state.formItemConfig = cloneDeep(props.formItemConfig)
+    init()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+</script>
+<style lang="scss" scoped>
+:deep() {
+  .el-form-item {
+    width: 100%;
+    margin: 0 0 24px 0;
+  }
+}
+.inlineBox {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.clearBox {
+  margin-bottom: 12px;
+}
+</style>

package/templates/src/components/form/item.vue

@@ -0,0 +1,323 @@
+<template>
+  <template
+    v-if="
+      config.type === 'input' ||
+      config.type === 'number' ||
+      config.type === 'password'
+    "
+  >
+    <FormInput
+      :config="config"
+      :formData="formData"
+      :disabled="disabled"
+      :state="state"
+      @enter="enter"
+      @change="change"
+    ></FormInput>
+  </template>
+  <template v-if="config.type === 'textarea'">
+    <FormTextarea
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormTextarea>
+  </template>
+  <template v-else-if="config.type === 'select'">
+    <FormSelect
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormSelect>
+  </template>
+  <template v-else-if="config.type === 'cascader'">
+    <FormCascader
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormCascader>
+  </template>
+  <template
+    v-else-if="
+      config.type === 'datePicker' ||
+      config.type === 'datesPicker' ||
+      config.type === 'weekPicker' ||
+      config.type === 'yearPicker' ||
+      config.type === 'yearsPicker' ||
+      config.type === 'monthPicker' ||
+      config.type === 'monthsPicker'
+    "
+  >
+    <FormDatePicker
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormDatePicker>
+  </template>
+  <template v-if="config.type === 'datetimePicker'">
+    <FormDateTimePicker
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormDateTimePicker>
+  </template>
+  <template v-if="config.type === 'timePicker'">
+    <FormTimePicker
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormTimePicker>
+  </template>
+  <template
+    v-else-if="
+      config.type === 'dateRange' ||
+      config.type === 'monthRange' ||
+      config.type === 'yearRange'
+    "
+  >
+    <FormDateRange
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormDateRange>
+  </template>
+  <template v-else-if="config.type === 'fileUpload'">
+    <FormFileUpload
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormFileUpload>
+  </template>
+  <template v-else-if="config.type === 'imageUpload'">
+    <FormImageUpload
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormImageUpload>
+  </template>
+  <template v-else-if="config.type === 'checkbox'">
+    <FormCheckbox
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormCheckbox>
+  </template>
+  <template v-else-if="config.type === 'radio'">
+    <FormRadio
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormRadio>
+  </template>
+  <template v-else-if="config.type === 'location'">
+    <FormLocation
+      :config="config"
+      :formData="formData"
+      :state="state"
+      :disabled="disabled"
+      @change="change"
+    ></FormLocation>
+  </template>
+</template>
+<script lang="ts" setup>
+import { type UploadUserFile } from 'element-plus'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { isEmpty } from 'lodash'
+import { useUserStore } from '@/store/user'
+import FormInput from './component/input.vue'
+import FormTextarea from './component/textarea.vue'
+import FormCascader from './component/cascader.vue'
+import FormDateRange from './component/dateRange.vue'
+import FormTimePicker from './component/timePicker.vue'
+import FormFileUpload from './component/fileUpload.vue'
+import FormImageUpload from './component/imageUpload.vue'
+import FormSelect from './component/select.vue'
+import FormCheckbox from './component/checkbox.vue'
+import FormRadio from './component/radio.vue'
+import FormDatePicker from './component/datePicker.vue'
+import FormDateTimePicker from './component/datetimePicker.vue'
+import FormLocation from './component/location.vue'
+import { proessParams } from './component/formFun'
+const userStore = useUserStore()
+interface Props {
+  config: FormItemDataConfig
+  formData: Data
+  onlyRead: boolean
+}
+const props = defineProps<Props>()
+
+const state = reactive({
+  fileList: [] as UploadUserFile[],
+  options: [] as Data[],
+  cascaderProp: {
+    emitPath: false,
+    checkStrictly: true,
+    label: 'label',
+    value: 'value',
+  } as Data,
+  hasDynamicState: [] as string[],
+})
+const emits = defineEmits(['enter'])
+const disabled = computed(
+  () =>
+    props.onlyRead ||
+    (userStore.otherMessage &&
+    userStore.otherMessage.roleCodeList &&
+    userStore.otherMessage.roleCodeList.find(
+      (item: string) => item === 'superAdmin',
+    )
+      ? false
+      : props.config.disabled || false),
+)
+const enter = () => {
+  emits('enter')
+}
+// 默认值赋值
+const setDefaultValue = () => {
+  const value = props.formData[props.config.key]
+  if (
+    (props.config.defaultValue || props.config.defaultValue === false) &&
+    ((typeof value === 'object' && isEmpty(value)) || value === undefined)
+  ) {
+    if (
+      typeof props.config.defaultValue === 'string' &&
+      !/\$\{.*?\}/.test(props.config.defaultValue)
+    ) {
+      changeDafultValue()
+    } else {
+      props.formData[props.config.key] = props.config.defaultValue
+    }
+  }
+}
+// 获取选项数据
+const getOptions = async () => {
+  if (props.config.type === 'select' || props.config.type === 'cascader') {
+  }
+}
+// 初始化
+const init = () => {
+  setDefaultValue()
+  if (props.config.type === 'select' || props.config.type === 'cascader') {
+    if (props.config.isMore) {
+      state.cascaderProp.multiple = true
+    }
+  }
+  getOptions()
+}
+
+const changeDafultValue = () => {
+  if (!props.config.defaultValue) {
+    return
+  }
+  props.formData[props.config.key] = props.config.defaultValue
+}
+const setFileList = async () => {
+  if (
+    props.config.type === 'fileUpload' ||
+    props.config.type === 'imageUpload'
+  ) {
+    state.fileList = [] as any
+    const data = props.formData[props.config.key]
+  }
+}
+onMounted(async () => {
+  await setFileList()
+})
+// watch(
+//   () => props.formData[props.config.key],
+//   async () => {
+//     await setFileList()
+//   },
+//   {
+//     immediate: true,
+//     deep: true,
+//   },
+// )
+// 表单值改变,根据联动属性完成对应修改操作
+// 清空/增加查询值/显隐
+const change = () => {
+  const linkage = props.config.linkage || []
+  linkage.forEach((item) => {
+    if (Array.isArray(item.key)) {
+      item.key.forEach((key) => {
+        if (item.type === 'clear') {
+          props.formData[key] = ''
+        } else if (item.type === 'filter') {
+          getOptions()
+        } else if (item.type === 'show') {
+          props.config.show = props.config.show || ''
+        }
+      })
+    } else {
+      if (item.type === 'clear') {
+        props.formData[item.key] = ''
+      } else if (item.type === 'filter') {
+      } else if (item.type === 'show') {
+        props.config.show = props.config.show || ''
+      }
+    }
+  })
+}
+watch(
+  () => props.config,
+  () => {
+    init()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+watch(
+  () => state.hasDynamicState.map((key) => props.formData[key]),
+  () => {
+    changeDafultValue()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+defineExpose({ state })
+</script>
+<style lang="scss" scoped>
+:deep() {
+  .el-upload-dragger {
+    border: none;
+    padding: 0;
+    line-height: normal;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+  }
+}
+.imageBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+</style>