48 changed files with 315 additions and 3810 deletions
@ -1,528 +0,0 @@ |
|||||
<template> |
|
||||
<q-form ref="formRef" v-bind="extractFormProps(formProps)"> |
|
||||
<div class="grid gap-2" :class="formLayoutComputed"> |
|
||||
<template v-for="(field, index) in formFields as any" :key="String(index)"> |
|
||||
<q-input |
|
||||
v-if="field.type === 'dateRange' && index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
v-model="formData[field.fmtModelName]" |
|
||||
:label="field.required ? '* ' + field.label : field.label" |
|
||||
:rules="fieldRulesFun(field.required, field)" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
> |
|
||||
<template #append> |
|
||||
<q-icon :name="PlatformIconEnum.日期范围" class="cursor-pointer"> |
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale"> |
|
||||
<q-date |
|
||||
v-model="formData[field.modelName]" |
|
||||
range |
|
||||
:mask="field.mask ? field.mask : 'YYYY-MM-DD'" |
|
||||
:readonly="formStatus === 'view' || field.readonly ? true : false" |
|
||||
> |
|
||||
<div class="row items-center justify-end"> |
|
||||
<q-btn v-close-popup label="关闭" color="primary" flat /> |
|
||||
</div> |
|
||||
</q-date> |
|
||||
</q-popup-proxy> |
|
||||
</q-icon> |
|
||||
</template> |
|
||||
</q-input> |
|
||||
<q-input |
|
||||
v-else-if="field.type === 'date' && index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
v-model="formData[field.modelName]" |
|
||||
:label="field.required ? '* ' + field.label : field.label" |
|
||||
:rules="fieldRulesFun(field.required, field)" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
> |
|
||||
<template #append> |
|
||||
<q-icon :name="PlatformIconEnum.日期" class="cursor-pointer"> |
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale"> |
|
||||
<q-date |
|
||||
v-model="formData[field.modelName]" |
|
||||
today-btn |
|
||||
:mask="field.mask ? field.mask : 'YYYY-MM-DD'" |
|
||||
:readonly="formStatus === 'view' || field.readonly ? true : false" |
|
||||
> |
|
||||
<div class="row items-center justify-end"> |
|
||||
<q-btn v-close-popup label="关闭" color="primary" flat /> |
|
||||
</div> |
|
||||
</q-date> |
|
||||
</q-popup-proxy> |
|
||||
</q-icon> |
|
||||
</template> |
|
||||
</q-input> |
|
||||
<q-select |
|
||||
v-else-if="field.type === 'select' && index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
v-model="formData[field.modelName]" |
|
||||
:label="field.required ? '* ' + field.label : field.label" |
|
||||
:rules="fieldRulesFun(field.required, field)" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
@filter="field.filterFun" |
|
||||
@focus="field.focusFun" |
|
||||
> |
|
||||
<template v-if="field.afterButton" #after> |
|
||||
<q-btn |
|
||||
:round="field.afterButton.round" |
|
||||
:dense="field.afterButton.dense" |
|
||||
:flat="field.afterButton.flat" |
|
||||
:unelevated="field.afterButton.unelevated" |
|
||||
:outline="field.afterButton.outline" |
|
||||
:color="field.afterButton.color" |
|
||||
:icon="field.afterButton.icon" |
|
||||
:label="field.afterButton.label" |
|
||||
:disable="formStatus === PageStatusEnum.查看 || field.afterButton.disable ? true : false" |
|
||||
@click="field.afterButton.click" |
|
||||
/> |
|
||||
</template> |
|
||||
</q-select> |
|
||||
<q-checkbox |
|
||||
v-else-if="field.type === 'checkbox' && index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
v-model="formData[field.modelName]" |
|
||||
:label="field.required ? '* ' + field.label : field.label" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
/> |
|
||||
<div |
|
||||
v-else-if="field.type === 'optionGroup' && index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
class="border-solid border" |
|
||||
> |
|
||||
<span class="p-2.5">{{ field.label }}</span> |
|
||||
<q-option-group |
|
||||
v-model="formData[field.modelName]" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
/> |
|
||||
</div> |
|
||||
<q-input |
|
||||
v-else-if="index < queryFormShowFieldNumber" |
|
||||
v-show="!field.hasOwnProperty('hide') || !field.hide" |
|
||||
v-model="formData[field.modelName]" |
|
||||
:label="field.required ? '* ' + field.label : field.label" |
|
||||
:rules="fieldRulesFun(field.required, field)" |
|
||||
v-bind="extractFormItemComponentProps(field.type, field)" |
|
||||
:readonly="formStatus === PageStatusEnum.查看 || field.readonly ? true : false" |
|
||||
@update:model-value="field.changeFun" |
|
||||
> |
|
||||
<template v-if="field.afterButton" #after> |
|
||||
<q-btn |
|
||||
round |
|
||||
dense |
|
||||
flat |
|
||||
:disable="formStatus === PageStatusEnum.查看 || field.afterButton.disable ? true : false" |
|
||||
:icon="field.afterButton.icon" |
|
||||
@click="field.afterButton.click" |
|
||||
/> |
|
||||
</template> |
|
||||
</q-input> |
|
||||
</template> |
|
||||
</div> |
|
||||
<slot></slot> |
|
||||
</q-form> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, reactive, watch, computed, toRaw, defineProps } from 'vue'; |
|
||||
import { |
|
||||
extractFormProps, |
|
||||
extractFormItemComponentProps, |
|
||||
arrayToMap, |
|
||||
PlatformIconEnum, |
|
||||
FormComponentValidateEnum, |
|
||||
PageStatusEnum, |
|
||||
isEmpty, |
|
||||
} from '@/platform/components/utils'; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
formProps: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return { autofocus: false, greedy: true }; |
|
||||
}, |
|
||||
}, |
|
||||
formColsNumber: { type: Number, default: 3 }, |
|
||||
formColsAuto: { type: Boolean, default: true }, |
|
||||
formFields: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
queryFormShowFieldNumber: { type: Number, default: 999 }, |
|
||||
}); |
|
||||
|
|
||||
const formRef = ref(); |
|
||||
const formStatus = ref('add'); |
|
||||
const formFieldsMap = arrayToMap('modelName', props.formFields); |
|
||||
|
|
||||
// 由于采用字符串拼接 class 名称，tailwind 无法生效，模板文件中必须出现完整的类名，最终构建的css文件中才会包含进去。 |
|
||||
const formLayoutComputed = computed(() => { |
|
||||
let className = ''; |
|
||||
switch (props.formColsNumber) { |
|
||||
case 1: |
|
||||
className = !props.formColsAuto ? 'grid-cols-1' : 'xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'; |
|
||||
break; |
|
||||
case 2: |
|
||||
className = !props.formColsAuto ? 'grid-cols-2' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'; |
|
||||
break; |
|
||||
case 4: |
|
||||
className = !props.formColsAuto ? 'grid-cols-4' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-6'; |
|
||||
break; |
|
||||
case 5: |
|
||||
className = !props.formColsAuto ? 'grid-cols-5' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-6'; |
|
||||
break; |
|
||||
case 6: |
|
||||
className = !props.formColsAuto ? 'grid-cols-6' : 'xs:grid-cols-1 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-6 xl:grid-cols-6'; |
|
||||
break; |
|
||||
case 7: |
|
||||
className = !props.formColsAuto ? 'grid-cols-7' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-7 xl:grid-cols-7'; |
|
||||
break; |
|
||||
case 8: |
|
||||
className = !props.formColsAuto ? 'grid-cols-8' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-8 lg:grid-cols-8 xl:grid-cols-8'; |
|
||||
break; |
|
||||
case 9: |
|
||||
className = !props.formColsAuto ? 'grid-cols-9' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-9 lg:grid-cols-9 xl:grid-cols-9'; |
|
||||
break; |
|
||||
case 10: |
|
||||
className = !props.formColsAuto ? 'grid-cols-10' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-10 lg:grid-cols-10 xl:grid-cols-10'; |
|
||||
break; |
|
||||
case 11: |
|
||||
className = !props.formColsAuto ? 'grid-cols-11' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-11 lg:grid-cols-11 xl:grid-cols-11'; |
|
||||
break; |
|
||||
case 12: |
|
||||
className = !props.formColsAuto ? 'grid-cols-12' : 'xs:grid-cols-1 sm:grid-cols-4 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12'; |
|
||||
break; |
|
||||
default: |
|
||||
className = !props.formColsAuto ? 'grid-cols-3' : 'xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'; |
|
||||
} |
|
||||
return className; |
|
||||
}); |
|
||||
|
|
||||
const selectDefaultValue = (field) => { |
|
||||
if (field.hasOwnProperty('defaultValue') && field.defaultValue !== null) { |
|
||||
if (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'boolean' || typeof field.defaultValue === 'number') { |
|
||||
const dftValue = field.options.filter((item) => { |
|
||||
return item.value === field.defaultValue; |
|
||||
}); |
|
||||
if (dftValue && dftValue.length > 0) { |
|
||||
return field.multiple ? [dftValue[0]] : dftValue[0]; |
|
||||
} else { |
|
||||
return field.multiple ? [] : ''; |
|
||||
} |
|
||||
} else if (Array.isArray(field.defaultValue)) { |
|
||||
const dftValue = field.options.filter((item) => { |
|
||||
return field.defaultValue.filter((val) => { |
|
||||
return val === item.value; |
|
||||
}); |
|
||||
}); |
|
||||
return field.multiple ? dftValue : dftValue[0]; |
|
||||
} |
|
||||
} else { |
|
||||
return field.multiple ? [] : ''; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const numberDefaultValue = (field) => { |
|
||||
if (field.hasOwnProperty('defaultValue') && typeof field.defaultValue === 'number') { |
|
||||
return field.defaultValue; |
|
||||
} else { |
|
||||
return ''; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const checkboxDefaultValue = (field) => { |
|
||||
if (field.hasOwnProperty('defaultValue')) { |
|
||||
return field.defaultValue; |
|
||||
} else { |
|
||||
return false; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const optionGroupDefaultValue = (field) => { |
|
||||
if (field.hasOwnProperty('defaultValue')) { |
|
||||
return field.defaultValue; |
|
||||
} else if (field.optionGroupType && field.optionGroupType === 'checkbox') { |
|
||||
return []; |
|
||||
} else { |
|
||||
return ''; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const textDefaultValue = (field) => { |
|
||||
if (field.hasOwnProperty('defaultValue')) { |
|
||||
return field.defaultValue; |
|
||||
} else { |
|
||||
return ''; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const formModel: any = {}; |
|
||||
for (const field of props.formFields as any) { |
|
||||
if (field.type === 'dateRange') { |
|
||||
formModel[field.fmtModelName] = ''; |
|
||||
} else if (field.type === 'select') { |
|
||||
formModel[field.modelName] = selectDefaultValue(field); |
|
||||
} else if (field.type === 'number') { |
|
||||
formModel[field.modelName] = numberDefaultValue(field); |
|
||||
} else if (field.type === 'checkbox') { |
|
||||
formModel[field.modelName] = checkboxDefaultValue(field); |
|
||||
} else if (field.type === 'optionGroup') { |
|
||||
formModel[field.modelName] = optionGroupDefaultValue(field); |
|
||||
} else { |
|
||||
formModel[field.modelName] = textDefaultValue(field); |
|
||||
} |
|
||||
} |
|
||||
const formData = reactive(formModel); |
|
||||
for (const field of props.formFields as any) { |
|
||||
if (field.type === 'dateRange') { |
|
||||
watch( |
|
||||
() => formData[field.modelName], |
|
||||
(newVal, oldVal) => { |
|
||||
if (!newVal || newVal.from === '') { |
|
||||
formData[field.fmtModelName] = ''; |
|
||||
} else { |
|
||||
formData[field.fmtModelName] = newVal.from + ' 至 ' + newVal.to; |
|
||||
} |
|
||||
}, |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const isNumber = (num) => { |
|
||||
return !isNaN(parseFloat(num)) && isFinite(num); |
|
||||
}; |
|
||||
|
|
||||
const fieldRulesFun = (required, field) => { |
|
||||
let resultRules = <any>[]; |
|
||||
if (field.type === 'select' && field.multiple && required) { |
|
||||
resultRules.push((val) => { |
|
||||
if (val !== null && val.length > 0) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '该字段为必填项'; |
|
||||
} |
|
||||
}); |
|
||||
} else if (required) { |
|
||||
resultRules.push((val) => (val !== null && val !== '') || '该字段为必填项'); |
|
||||
} |
|
||||
if (field.rules && field.rules.length > 0) { |
|
||||
field.rules.forEach((rule) => { |
|
||||
if (typeof rule === 'string' && rule === FormComponentValidateEnum.字符串不能包含空格校验) { |
|
||||
// 字符串不能包含空格校验 |
|
||||
resultRules.push((val) => { |
|
||||
if (isEmpty(val) || val.indexOf(' ') === -1) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '不能包含空格'; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'string' && rule === FormComponentValidateEnum.默认日期格式校验) { |
|
||||
resultRules.push((val) => { |
|
||||
if (isEmpty(val) || /^(\d{4})-(\d{2})-(\d{2})$/.test(val)) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '日期格式校验未通过'; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'string' && rule === FormComponentValidateEnum.必须为整数校验) { |
|
||||
// 必须为整数校验 |
|
||||
resultRules.push((val) => { |
|
||||
const tmp = String(val); |
|
||||
if (val === null || (tmp.indexOf('.') === -1 && Number.isInteger(parseInt(tmp)))) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '只能输入整数'; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.字符串最大长度校验) { |
|
||||
// 字符串最大长度校验 |
|
||||
resultRules.push((val) => { |
|
||||
const tmp = String(val); |
|
||||
if (val === null || tmp.length <= rule.value) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '最大允许输入的长度为：' + rule.value; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.最大小数位数校验) { |
|
||||
// 最大小数位数校验 |
|
||||
resultRules.push((val) => { |
|
||||
const tmp = String(val); |
|
||||
if (val === null || tmp.indexOf('.') === -1 || tmp.substring(tmp.indexOf('.') + 1).length <= rule.value) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '最大允许输入的小数位数为：' + rule.value; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.数字最小值校验) { |
|
||||
// 数字最小值校验 |
|
||||
resultRules.push((val) => { |
|
||||
const tmp = String(val); |
|
||||
if (val === null || parseFloat(tmp) >= rule.value) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '最小允许输入的值为：' + rule.value; |
|
||||
} |
|
||||
}); |
|
||||
} else if (typeof rule === 'object' && rule.name === FormComponentValidateEnum.数字最大值校验) { |
|
||||
// 数字最大值校验 |
|
||||
resultRules.push((val) => { |
|
||||
const tmp = String(val); |
|
||||
if (val === null || parseFloat(tmp) <= rule.value) { |
|
||||
return true; |
|
||||
} else { |
|
||||
return '最大允许输入的值为：' + rule.value; |
|
||||
} |
|
||||
}); |
|
||||
} else { |
|
||||
resultRules.push(rule); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
return resultRules; |
|
||||
}; |
|
||||
|
|
||||
const formValidateFun = async () => { |
|
||||
const v = await formValidate(); |
|
||||
return v; |
|
||||
}; |
|
||||
const formValidate = async () => { |
|
||||
let validate = false; |
|
||||
await formRef.value.validate().then((success) => { |
|
||||
if (success) { |
|
||||
validate = true; |
|
||||
} |
|
||||
}); |
|
||||
return validate; |
|
||||
}; |
|
||||
|
|
||||
const getFormDataFun = () => { |
|
||||
const data = { ...toRaw(formData) }; |
|
||||
const selectFields = props.formFields.filter((item: any) => { |
|
||||
return item.type === 'select'; |
|
||||
}); |
|
||||
selectFields.forEach((item: any) => { |
|
||||
let selectValues = ''; |
|
||||
if (item.multiple && data[item.modelName] && data[item.modelName].length > 0) { |
|
||||
data[item.modelName].forEach((val) => { |
|
||||
selectValues = selectValues + ',' + val.value; |
|
||||
}); |
|
||||
selectValues = selectValues.substring(1, selectValues.length); |
|
||||
} else if (data[item.modelName]) { |
|
||||
selectValues = data[item.modelName].value ?? data[item.modelName]; |
|
||||
} |
|
||||
data[item.modelName] = selectValues; |
|
||||
}); |
|
||||
return data; |
|
||||
}; |
|
||||
|
|
||||
const setFormDataFun = (record) => { |
|
||||
for (const field of props.formFields as any) { |
|
||||
if (field.type === 'select') { |
|
||||
if (field.multiple && record[field.modelName].indexOf(',') > -1) { |
|
||||
const recordSelectValues = record[field.modelName].split(','); |
|
||||
const selectValues = <any>[]; |
|
||||
recordSelectValues.forEach((item) => { |
|
||||
selectValues.push(setSelectValue(field.options, item)); |
|
||||
}); |
|
||||
formData[field.modelName] = selectValues; |
|
||||
} else { |
|
||||
formData[field.modelName] = setSelectValue(field.options, record[field.modelName]); |
|
||||
} |
|
||||
} else if (field.type === 'optionGroup') { |
|
||||
if (record[field.modelName]) { |
|
||||
formData[field.modelName] = record[field.modelName]; |
|
||||
} else { |
|
||||
formData[field.modelName] = []; |
|
||||
} |
|
||||
} else { |
|
||||
formData[field.modelName] = record[field.modelName]; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const setSelectValue = (options, val) => { |
|
||||
const opt = options.filter((option) => { |
|
||||
return option.value === val; |
|
||||
}); |
|
||||
if (opt && opt.length > 0) { |
|
||||
return opt[0]; |
|
||||
} else { |
|
||||
return val; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const setFieldValueFun = (fieldName, value) => { |
|
||||
const field = formFieldsMap.get(fieldName); |
|
||||
if (field.type === 'select') { |
|
||||
if (field.multiple && Array.isArray(value)) { |
|
||||
const selectValues = <any>[]; |
|
||||
value.forEach((item) => { |
|
||||
selectValues.push(setSelectValue(field.options, item)); |
|
||||
}); |
|
||||
formData[field.modelName] = selectValues; |
|
||||
} else { |
|
||||
formData[field.modelName] = setSelectValue(field.options, value); |
|
||||
} |
|
||||
} else { |
|
||||
formData[field.modelName] = value; |
|
||||
} |
|
||||
}; |
|
||||
const getFieldValueFun = (fieldName) => { |
|
||||
return formData[fieldName]; |
|
||||
}; |
|
||||
|
|
||||
const resetFormDataFun = () => { |
|
||||
Object.keys(formData).forEach((key) => { |
|
||||
switch (typeof formData[key]) { |
|
||||
case 'string': |
|
||||
formData[key] = ''; |
|
||||
break; |
|
||||
case 'boolean': |
|
||||
formData[key] = false; |
|
||||
break; |
|
||||
case 'number': |
|
||||
formData[key] = ''; |
|
||||
break; |
|
||||
default: |
|
||||
formData[key] = undefined; |
|
||||
break; |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const setFormStatusFun = (status) => { |
|
||||
formStatus.value = status; |
|
||||
}; |
|
||||
|
|
||||
const getFormStatusFun = () => { |
|
||||
return toRaw(formStatus.value); |
|
||||
}; |
|
||||
|
|
||||
const getFormFieldMapFun = () => { |
|
||||
return formFieldsMap; |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ |
|
||||
formValidateFun, |
|
||||
getFormDataFun, |
|
||||
setFormDataFun, |
|
||||
getFormStatusFun, |
|
||||
setFormStatusFun, |
|
||||
resetFormDataFun, |
|
||||
setFieldValueFun, |
|
||||
getFieldValueFun, |
|
||||
getFormFieldMapFun, |
|
||||
}); |
|
||||
</script> |
|
||||
@ -1,15 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<q-icon v-if="value" :name="IconEnum.是状态" color="green" size="sm"> </q-icon> |
|
||||
<q-icon v-else-if="!value && showNoEnable" :name="IconEnum.否状态" color="red" size="sm"> </q-icon> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { IconEnum } from '@/platform/enums'; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
value: { type: Boolean, default: false }, // 值 |
|
||||
showNoEnable: { type: Boolean, default: false }, // 不可用是否显示 |
|
||||
}); |
|
||||
</script> |
|
||||
File diff suppressed because it is too large
@ -1,30 +0,0 @@ |
|||||
<template> |
|
||||
<div :ref="(node) => drag(drop(node as any))" :class="borderClass"> |
|
||||
<q-icon v-if="typeof tdValue[0] === 'boolean' && tdValue[0]" :name="PlatformIconEnum.是状态" color="green" size="sm"> </q-icon> |
|
||||
<template v-else-if="typeof tdValue[0] === 'boolean' && !tdValue[0]"> </template> |
|
||||
<template v-else> |
|
||||
{{ tdValue[0] }} |
|
||||
</template> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { computed, unref } from 'vue'; |
|
||||
import { toRefs } from '@vueuse/core'; |
|
||||
import { PlatformIconEnum } from '@/platform/components/utils'; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
tdValue: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
rowIndex: { type: Number, default: 0 }, |
|
||||
}); |
|
||||
const emit = defineEmits(['tableSortFun']); |
|
||||
|
|
||||
export interface DropResult { |
|
||||
name: string; |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,123 +0,0 @@ |
|||||
<template> |
|
||||
<div class="flex flex-nowrap py-2"> |
|
||||
<div ref="titleContainerRef" class="flex items-end text-subtitle2 text-no-wrap">{{ title }}</div> |
|
||||
<q-space /> |
|
||||
<div ref="actionContainerRef" class="flex flex-nowrap"> |
|
||||
<!-- baseActions --> |
|
||||
<template v-for="(action, index) in baseActions" :key="'baseAction_' + index"> |
|
||||
<q-separator |
|
||||
v-if="action.separator" |
|
||||
vertical |
|
||||
class="class-action-item" |
|
||||
:style="{ |
|
||||
'margin-left': '5px', |
|
||||
'margin-right': '5px', |
|
||||
}" |
|
||||
/> |
|
||||
<q-btn |
|
||||
v-else |
|
||||
v-bind="action" |
|
||||
:id="action.name" |
|
||||
:disable="action.enableIf ? !action.enableIf() : false" |
|
||||
no-wrap |
|
||||
class="class-action-item" |
|
||||
:style="{ |
|
||||
'margin-left': '5px', |
|
||||
'margin-right': '5px', |
|
||||
}" |
|
||||
@click="action.click" |
|
||||
/> |
|
||||
</template> |
|
||||
|
|
||||
<!-- moreActions --> |
|
||||
<q-btn-dropdown v-if="moreActions && moreActions.length > 0" :label="$t('more')" class="class-action-item" style="margin-left: 5px"> |
|
||||
<q-list> |
|
||||
<template v-for="(action, index) in moreActions" :key="'moreAction_' + index"> |
|
||||
<q-separator v-if="action.separator" /> |
|
||||
<q-item v-else v-close-popup clickable @click="action.click"> |
|
||||
<q-item-section avatar style="min-width: 28px; padding-right: 0px"> |
|
||||
<q-icon :name="action.icon" size="20px" /> |
|
||||
</q-item-section> |
|
||||
<q-item-section> |
|
||||
<q-item-label :v-bind="action">{{ action.label }}</q-item-label> |
|
||||
</q-item-section> |
|
||||
</q-item> |
|
||||
</template> |
|
||||
</q-list> |
|
||||
</q-btn-dropdown> |
|
||||
</div> |
|
||||
<q-resize-observer @resize="onResize" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
import { ref } from 'vue'; |
|
||||
import { Tools } from '@/platform/utils'; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
title: { type: String, default: '' }, |
|
||||
noActionIcon: { type: Boolean, default: false }, |
|
||||
actions: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
const titleContainerRef = ref(); |
|
||||
const actionContainerRef = ref(); |
|
||||
|
|
||||
const actions = props.actions; |
|
||||
if (actions && actions.length > 0 && props.noActionIcon) { |
|
||||
for (const action of actions) { |
|
||||
action.icon = undefined; |
|
||||
} |
|
||||
} |
|
||||
const baseActions = ref(actions); |
|
||||
const moreActions = ref([]); |
|
||||
const isActionWidthInitializedRef = ref(false); |
|
||||
const moreActionWidth = 100; |
|
||||
|
|
||||
const onResize = (size) => { |
|
||||
if (Tools.isUndefinedOrNull(titleContainerRef.value) || Tools.isUndefinedOrNull(actionContainerRef.value)) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
if (!isActionWidthInitializedRef.value) { |
|
||||
const nodes = actionContainerRef.value.getElementsByClassName('class-action-item'); |
|
||||
for (let i = 0; i < actions.length; i++) { |
|
||||
actions[i].width = nodes[i].clientWidth + 10; |
|
||||
} |
|
||||
isActionWidthInitializedRef.value = true; |
|
||||
} |
|
||||
|
|
||||
const _baseActions = []; |
|
||||
const _moreActions = []; |
|
||||
const length = actions.length; |
|
||||
let availableWidth = size.width - titleContainerRef.value.clientWidth; |
|
||||
let width = 0; |
|
||||
let index = 0; |
|
||||
|
|
||||
for (; index < length; index++) { |
|
||||
if (width + actions[index].width > availableWidth) { |
|
||||
availableWidth -= moreActionWidth; |
|
||||
while (width > availableWidth) { |
|
||||
index--; |
|
||||
width -= actions[index].width; |
|
||||
_baseActions.pop(); |
|
||||
} |
|
||||
break; |
|
||||
} else { |
|
||||
_baseActions.push(actions[index]); |
|
||||
width += actions[index].width; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
for (; index < length; index++) { |
|
||||
_moreActions.push(actions[index]); |
|
||||
} |
|
||||
|
|
||||
baseActions.value = _baseActions; |
|
||||
moreActions.value = _moreActions; |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,53 +0,0 @@ |
|||||
<template> |
|
||||
<q-tr> |
|
||||
<q-td v-for="(col, index) in cols" :key="col.name" :style="{ 'padding-left': index == 0 ? '2px' : '7px' }"> |
|
||||
<div class="flex flex-nowrap items-center"> |
|
||||
<template v-if="index == 0"> |
|
||||
<!--层级占位符--> |
|
||||
<span :style="`width:${27 * props.level}px;`"></span> |
|
||||
<!--展开按钮--> |
|
||||
<q-btn |
|
||||
v-if="data.children && data.children.length > 0" |
|
||||
flat |
|
||||
size="16px" |
|
||||
dense |
|
||||
padding="0px 0px" |
|
||||
:icon="data.expand ? 'bi-dash' : 'bi-plus'" |
|
||||
@click="data.expand = !data.expand" |
|
||||
/> |
|
||||
<!--展开按钮占位符--> |
|
||||
<span v-else style="width: 27px"></span> |
|
||||
<!--选择框--> |
|
||||
<q-checkbox v-model="data.selected" flat size="40px" dense /> |
|
||||
<!--文件夹图标--> |
|
||||
<q-icon v-if="data.children && data.children.length > 0" name="sym_o_folder_open" size="20px" class="px-1"></q-icon> |
|
||||
<!--文件图标--> |
|
||||
<q-icon v-else name="bi-file-earmark" size="16px" class="px-1"></q-icon> |
|
||||
</template> |
|
||||
<div v-dompurify-html="col.format ? col.format(data[col.name], data) : col.value"></div> |
|
||||
</div> |
|
||||
</q-td> |
|
||||
</q-tr> |
|
||||
<template v-for="child in data.children" :key="child.id"> |
|
||||
<TableRow v-if="data.expand" :cols="cols" :data="child" :level="props.level + 1"></TableRow> |
|
||||
</template> |
|
||||
</template> |
|
||||
<script setup lang="ts"> |
|
||||
const props = defineProps({ |
|
||||
level: { type: Number, default: 0 }, |
|
||||
cols: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
data: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {}; |
|
||||
}, |
|
||||
}, |
|
||||
}); |
|
||||
const cols = props.cols; |
|
||||
const data = props.data; |
|
||||
</script> |
|
||||
@ -1,306 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div class="row q-gutter-x-md q-gutter-y-sm"> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense :options="['ksdjlfsd', 'sdkjfklsd']" /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
<q-input label="loginName" outlined dense /> |
|
||||
</div> |
|
||||
<TableAction title="User List" :no-action-icon="props.noActionIcon" :actions="tableActions"></TableAction> |
|
||||
|
|
||||
<q-table flat bordered separator="cell" :rows="data" :columns="columns" row-key="name"> |
|
||||
<template #header="headerProps"> |
|
||||
<q-tr :props="headerProps"> |
|
||||
<q-th v-for="col in headerProps.cols" :key="col.name" :props="headerProps"> |
|
||||
{{ col.label }} |
|
||||
</q-th> |
|
||||
</q-tr> |
|
||||
</template> |
|
||||
|
|
||||
<template #body="bodyProps"> |
|
||||
<TableRow :cols="bodyProps.cols" :data="bodyProps.row"></TableRow> |
|
||||
</template> |
|
||||
</q-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, computed, onMounted } from 'vue'; |
|
||||
import { useI18n } from 'vue-i18n'; |
|
||||
import { axios, Tools, TreeBuilder } from '@/platform'; |
|
||||
import TableAction from './TableAction.vue'; |
|
||||
import TableRow from './TableRow.vue'; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
tree: { type: Boolean, default: false }, |
|
||||
title: { type: String, default: '' }, |
|
||||
noActionIcon: { type: Boolean, default: false }, |
|
||||
targetObjectName: { type: String, default: '' }, |
|
||||
actions: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
columns: { |
|
||||
type: Array, |
|
||||
default: () => { |
|
||||
return []; |
|
||||
}, |
|
||||
}, |
|
||||
autoFetchData: { type: Boolean, default: false }, |
|
||||
dataUrl: { type: String, default: undefined }, |
|
||||
fetchDataUrl: { type: String, default: undefined }, |
|
||||
addDataUrl: { type: String, default: undefined }, |
|
||||
removeDataUrl: { type: String, default: undefined }, |
|
||||
updateDataUrl: { type: String, default: undefined }, |
|
||||
}); |
|
||||
|
|
||||
const { t } = useI18n(); |
|
||||
|
|
||||
const defaultTableActions = { |
|
||||
separator: { |
|
||||
separator: true, |
|
||||
}, |
|
||||
query: { |
|
||||
name: 'query', |
|
||||
label: t('query'), |
|
||||
icon: 'bi-search', |
|
||||
click: () => { |
|
||||
console.log('query'); |
|
||||
}, |
|
||||
}, |
|
||||
refresh: { |
|
||||
name: 'refresh', |
|
||||
label: t('refresh'), |
|
||||
icon: 'bi-arrow-clockwise', |
|
||||
click: () => { |
|
||||
console.log('refresh'); |
|
||||
}, |
|
||||
}, |
|
||||
add: { |
|
||||
name: 'add', |
|
||||
label: t('addNew'), |
|
||||
icon: 'bi-plus-lg', |
|
||||
click: () => { |
|
||||
console.log('add'); |
|
||||
}, |
|
||||
}, |
|
||||
clone: { |
|
||||
name: 'clone', |
|
||||
label: t('clone'), |
|
||||
icon: 'content_copy', |
|
||||
click: () => { |
|
||||
console.log('clone'); |
|
||||
}, |
|
||||
}, |
|
||||
edit: { |
|
||||
name: 'edit', |
|
||||
label: t('edit'), |
|
||||
icon: 'bi-pencil-square', |
|
||||
click: () => { |
|
||||
console.log('edit'); |
|
||||
}, |
|
||||
}, |
|
||||
remove: { |
|
||||
name: 'remove', |
|
||||
label: t('delete'), |
|
||||
icon: 'bi-x-lg', |
|
||||
click: () => { |
|
||||
console.log('remove'); |
|
||||
}, |
|
||||
}, |
|
||||
removeAll: { |
|
||||
name: 'removeAll', |
|
||||
label: t('deleteAll'), |
|
||||
click: () => { |
|
||||
console.log('removeAll'); |
|
||||
}, |
|
||||
}, |
|
||||
detail: { |
|
||||
name: 'detail', |
|
||||
label: t('detail'), |
|
||||
icon: 'bi-info-circle', |
|
||||
click: () => { |
|
||||
console.log('detail'); |
|
||||
}, |
|
||||
}, |
|
||||
expandAll: { |
|
||||
name: 'expandAll', |
|
||||
label: t('expandAll'), |
|
||||
icon: 'bi-plus-square', |
|
||||
click: () => { |
|
||||
console.log('expandAll'); |
|
||||
}, |
|
||||
}, |
|
||||
selectAll: { |
|
||||
name: 'selectAll', |
|
||||
label: t('selectAll'), |
|
||||
icon: 'bi-check-square', |
|
||||
click: () => { |
|
||||
console.log('selectAll'); |
|
||||
}, |
|
||||
}, |
|
||||
addTop: { |
|
||||
name: 'addTop', |
|
||||
label: t('addTop', { object: props.targetObjectName }), |
|
||||
icon: 'addTop', |
|
||||
click: () => { |
|
||||
console.log('addTop'); |
|
||||
}, |
|
||||
}, |
|
||||
addChild: { |
|
||||
name: 'addChild', |
|
||||
label: t('addChild', { object: props.targetObjectName }), |
|
||||
icon: 'addChild', |
|
||||
click: () => { |
|
||||
console.log('addChild'); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const tableActions = []; |
|
||||
if (props.actions && props.actions.length > 0) { |
|
||||
for (const action of props.actions) { |
|
||||
if (Tools.isString(action)) { |
|
||||
tableActions.push(defaultTableActions[action]); |
|
||||
} else if (Tools.isObject(action)) { |
|
||||
tableActions.push(action); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const data = ref([]); |
|
||||
if (props.autoFetchData) { |
|
||||
axios.get(props.fetchDataUrl ? props.fetchDataUrl : props.dataUrl).then((response) => { |
|
||||
if (props.tree) { |
|
||||
data.value = TreeBuilder.build(response.data); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
const selected = ref([]); |
|
||||
const val2 = ref(true); |
|
||||
|
|
||||
const rows = ref([ |
|
||||
{ |
|
||||
name: 'Frozen Yogurt', |
|
||||
calories: 159, |
|
||||
fat: 6.0, |
|
||||
carbs: 24, |
|
||||
protein: 4.0, |
|
||||
sodium: 87, |
|
||||
calcium: '14%', |
|
||||
iron: '1%', |
|
||||
selected: true, |
|
||||
children: [ |
|
||||
{ |
|
||||
name: 'Ice cream sandwich3', |
|
||||
calories: 237, |
|
||||
fat: 9.0, |
|
||||
carbs: 37, |
|
||||
protein: 4.3, |
|
||||
sodium: 129, |
|
||||
calcium: '8%', |
|
||||
iron: '1%', |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Ice cream sandwich', |
|
||||
calories: 237, |
|
||||
fat: 9.0, |
|
||||
carbs: 37, |
|
||||
protein: 4.3, |
|
||||
sodium: 129, |
|
||||
calcium: '8%', |
|
||||
iron: '1%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Eclair', |
|
||||
calories: 262, |
|
||||
fat: 16.0, |
|
||||
carbs: 23, |
|
||||
protein: 6.0, |
|
||||
sodium: 337, |
|
||||
calcium: '6%', |
|
||||
iron: '7%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Cupcake', |
|
||||
calories: 305, |
|
||||
fat: 3.7, |
|
||||
carbs: 67, |
|
||||
protein: 4.3, |
|
||||
sodium: 413, |
|
||||
calcium: '3%', |
|
||||
iron: '8%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Gingerbread', |
|
||||
calories: 356, |
|
||||
fat: 16.0, |
|
||||
carbs: 49, |
|
||||
protein: 3.9, |
|
||||
sodium: 327, |
|
||||
calcium: '7%', |
|
||||
iron: '16%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Jelly bean', |
|
||||
calories: 375, |
|
||||
fat: 0.0, |
|
||||
carbs: 94, |
|
||||
protein: 0.0, |
|
||||
sodium: 50, |
|
||||
calcium: '0%', |
|
||||
iron: '0%', |
|
||||
}, |
|
||||
{ |
|
||||
name: '<span style="color: red">This should be red.</span>', |
|
||||
calories: 392, |
|
||||
fat: 0.2, |
|
||||
carbs: 98, |
|
||||
protein: 0, |
|
||||
sodium: 38, |
|
||||
calcium: '0%', |
|
||||
iron: '2%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Honeycomb', |
|
||||
calories: 408, |
|
||||
fat: 3.2, |
|
||||
carbs: 87, |
|
||||
protein: 6.5, |
|
||||
sodium: 562, |
|
||||
calcium: '0%', |
|
||||
iron: '45%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Donut', |
|
||||
calories: 452, |
|
||||
fat: 25.0, |
|
||||
carbs: 51, |
|
||||
protein: 4.9, |
|
||||
sodium: 326, |
|
||||
calcium: '2%', |
|
||||
iron: '22%', |
|
||||
}, |
|
||||
{ |
|
||||
name: 'KitKat', |
|
||||
calories: 518, |
|
||||
fat: 26.0, |
|
||||
carbs: 65, |
|
||||
protein: 7, |
|
||||
sodium: 54, |
|
||||
calcium: '12%', |
|
||||
iron: '6%', |
|
||||
}, |
|
||||
]); |
|
||||
</script> |
|
||||
@ -0,0 +1,20 @@ |
|||||
|
import { Tools } from '.'; |
||||
|
|
||||
|
class VueTools { |
||||
|
/** |
||||
|
* 将 vue 组件导出的方法和属性直接挂接到 vue 组件的实例上, 便于使用 |
||||
|
* @param instance vue 组件实例对象 |
||||
|
*/ |
||||
|
public static expose2Instance(instance: any): void { |
||||
|
const exposeds = instance.exposed || {}; |
||||
|
for (const exposed in exposeds) { |
||||
|
if (Tools.isUndefinedOrNull(instance[exposed])) { |
||||
|
instance[exposed] = exposeds[exposed]; |
||||
|
} else { |
||||
|
console.warn(exposed + ' already exists in component insatance!'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export { VueTools }; |
||||
@ -0,0 +1,34 @@ |
|||||
|
<template> |
||||
|
<q-btn label="OK" @click="click"></q-btn> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { getCurrentInstance } from 'vue'; |
||||
|
import { VueTools } from 'platform-core'; |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
( |
||||
|
e: 'wsp', // 行点击事件 |
||||
|
evt: Event, // 第一个参数，JS 事件对象 |
||||
|
row: any, // 第二个参数, 点击的行对象 |
||||
|
index: number, // 第三个参数, 当前页中行的索引 |
||||
|
): void; |
||||
|
}>(); |
||||
|
|
||||
|
const click = () => { |
||||
|
emit('wsp', instance, 'kdsjlfj'); |
||||
|
}; |
||||
|
|
||||
|
const ok = () => { |
||||
|
return 'ok'; |
||||
|
}; |
||||
|
|
||||
|
const hello = 'hello'; |
||||
|
|
||||
|
defineExpose({ |
||||
|
ok, |
||||
|
hello, |
||||
|
}); |
||||
|
|
||||
|
const instance = getCurrentInstance(); |
||||
|
VueTools.expose2Instance(instance); |
||||
|
</script> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<q-chip v-if="enable && !accountExpired && !accountLocked && !credentialsExpired" color="green" text-color="white" :label="$t('normal')" dense></q-chip> |
||||
|
<q-chip v-if="!enable" color="red" text-color="white" :label="$t('disable')" dense></q-chip> |
||||
|
<q-chip v-if="accountExpired" color="red" text-color="white" :label="$t('accountExpired')" dense></q-chip> |
||||
|
<q-chip v-if="accountLocked" color="red" text-color="white" :label="$t('accountLocked')" dense></q-chip> |
||||
|
<q-chip v-if="credentialsExpired" color="red" text-color="white" :label="$t('credentialsExpired')" dense></q-chip> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
const props = defineProps({ |
||||
|
enable: { type: Boolean, default: true }, |
||||
|
accountExpired: { type: Boolean, default: false }, |
||||
|
accountLocked: { type: Boolean, default: false }, |
||||
|
credentialsExpired: { type: Boolean, default: false }, |
||||
|
}); |
||||
|
</script> |
||||
Loading…
Reference in new issue