|
@@ -131,87 +131,86 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { ref, toRefs } from 'vue';
|
|
|
|
-import type { FormInstance } from 'element-plus';
|
|
|
|
-import _ from 'lodash';
|
|
|
|
|
|
+import { ref, toRefs } from 'vue'
|
|
|
|
+import type { FormInstance } from 'element-plus'
|
|
|
|
+import _ from 'lodash'
|
|
// #region 传递
|
|
// #region 传递
|
|
interface fieldsItem {
|
|
interface fieldsItem {
|
|
- model: string;
|
|
|
|
- type: string;
|
|
|
|
- options: object;
|
|
|
|
- custom: string;
|
|
|
|
- required: string;
|
|
|
|
- limit: number | undefined;
|
|
|
|
- url: string;
|
|
|
|
|
|
+ model: string
|
|
|
|
+ type: string
|
|
|
|
+ options: object
|
|
|
|
+ custom: string
|
|
|
|
+ required: string
|
|
|
|
+ limit: number | undefined
|
|
|
|
+ url: string
|
|
}
|
|
}
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
fields: { type: Array<fieldsItem>, default: () => [] },
|
|
fields: { type: Array<fieldsItem>, default: () => [] },
|
|
rules: { type: Object, default: () => {} },
|
|
rules: { type: Object, default: () => {} },
|
|
labelWidth: { type: String, default: '120px' },
|
|
labelWidth: { type: String, default: '120px' },
|
|
- submitText: { type: String, default: '保存' },
|
|
|
|
|
|
+ submitText: { type: String, default: '提交保存' },
|
|
form: { type: Object, default: () => {} },
|
|
form: { type: Object, default: () => {} },
|
|
reset: { type: Boolean, default: false },
|
|
reset: { type: Boolean, default: false },
|
|
isSave: { type: Boolean, default: true },
|
|
isSave: { type: Boolean, default: true },
|
|
span: { type: Number, default: 24 }, // 限制两侧的距离,24就是整行全用
|
|
span: { type: Number, default: 24 }, // 限制两侧的距离,24就是整行全用
|
|
disabled: { type: Boolean, default: false }
|
|
disabled: { type: Boolean, default: false }
|
|
-});
|
|
|
|
-const { fields } = toRefs(props);
|
|
|
|
-const { rules } = toRefs(props);
|
|
|
|
-const { labelWidth } = toRefs(props);
|
|
|
|
-const { submitText } = toRefs(props);
|
|
|
|
-const { form } = toRefs(props);
|
|
|
|
-const { reset } = toRefs(props);
|
|
|
|
-const { isSave } = toRefs(props);
|
|
|
|
-const { span } = toRefs(props);
|
|
|
|
-const { disabled } = toRefs(props);
|
|
|
|
-const formRef = ref<FormInstance>();
|
|
|
|
|
|
+})
|
|
|
|
+const { fields } = toRefs(props)
|
|
|
|
+const { rules } = toRefs(props)
|
|
|
|
+const { labelWidth } = toRefs(props)
|
|
|
|
+const { submitText } = toRefs(props)
|
|
|
|
+const { form } = toRefs(props)
|
|
|
|
+const { reset } = toRefs(props)
|
|
|
|
+const { isSave } = toRefs(props)
|
|
|
|
+const { span } = toRefs(props)
|
|
|
|
+const { disabled } = toRefs(props)
|
|
|
|
+const formRef = ref<FormInstance>()
|
|
const getField = (item: string, data: any) => {
|
|
const getField = (item: string, data: any) => {
|
|
- let res: string | null | boolean = _.get(data, item, null);
|
|
|
|
- if (item === 'type') res = res === null ? `text` : res;
|
|
|
|
- if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res;
|
|
|
|
- if (item === `selectplaceholder`) res = res === null ? `请选择${data.label}` : res;
|
|
|
|
- if (item === 'required') res = res === null ? false : res;
|
|
|
|
- if (item === `error`) res = res === null ? `${data.label}错误` : res;
|
|
|
|
- return res;
|
|
|
|
-};
|
|
|
|
|
|
+ let res: string | null | boolean = _.get(data, item, null)
|
|
|
|
+ if (item === 'type') res = res === null ? `text` : res
|
|
|
|
+ if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res
|
|
|
|
+ if (item === `selectplaceholder`) res = res === null ? `请选择${data.label}` : res
|
|
|
|
+ if (item === 'required') res = res === null ? false : res
|
|
|
|
+ if (item === `error`) res = res === null ? `${data.label}错误` : res
|
|
|
|
+ return res
|
|
|
|
+}
|
|
|
|
|
|
const getDateFormat = (e: string) => {
|
|
const getDateFormat = (e: string) => {
|
|
- if (e === 'year') return 'YYYY';
|
|
|
|
- if (e === 'month') return 'MM';
|
|
|
|
- if (e === 'date') return 'YYYY-MM-DD';
|
|
|
|
- if (e === 'daterange') return 'YYYY-MM-DD';
|
|
|
|
- if (e === 'datetime') return 'YYYY-MM-DD HH:mm:ss';
|
|
|
|
- if (e === 'datetimerange') return 'YYYY-MM-DD HH:mm:ss';
|
|
|
|
- if (e === 'time') return 'HH:mm:ss';
|
|
|
|
-};
|
|
|
|
-const emit = defineEmits(['save', 'dataChange']);
|
|
|
|
-const clear = ref<any>();
|
|
|
|
|
|
+ if (e === 'year') return 'YYYY'
|
|
|
|
+ if (e === 'month') return 'MM'
|
|
|
|
+ if (e === 'date') return 'YYYY-MM-DD'
|
|
|
|
+ if (e === 'daterange') return 'YYYY-MM-DD'
|
|
|
|
+ if (e === 'datetime') return 'YYYY-MM-DD HH:mm:ss'
|
|
|
|
+ if (e === 'datetimerange') return 'YYYY-MM-DD HH:mm:ss'
|
|
|
|
+ if (e === 'time') return 'HH:mm:ss'
|
|
|
|
+}
|
|
|
|
+const emit = defineEmits(['save', 'dataChange'])
|
|
|
|
+const clear = ref<any>()
|
|
// 提交
|
|
// 提交
|
|
const save = async (formEl: FormInstance | undefined) => {
|
|
const save = async (formEl: FormInstance | undefined) => {
|
|
- if (!formEl) return;
|
|
|
|
|
|
+ if (!formEl) return
|
|
await formEl.validate((valid, fields) => {
|
|
await formEl.validate((valid, fields) => {
|
|
if (valid) {
|
|
if (valid) {
|
|
- emit('save', form.value);
|
|
|
|
- if (reset.value) clear.value.resetFields();
|
|
|
|
|
|
+ emit('save', form.value)
|
|
|
|
+ if (reset.value) clear.value.resetFields()
|
|
} else {
|
|
} else {
|
|
- console.log('error submit!', fields);
|
|
|
|
|
|
+ console.log('error submit!', fields)
|
|
}
|
|
}
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+ })
|
|
|
|
+}
|
|
const display = (field: any) => {
|
|
const display = (field: any) => {
|
|
- let dis = _.get(field, `display`);
|
|
|
|
- if (!_.isFunction(dis)) return true;
|
|
|
|
- else return dis(field, form);
|
|
|
|
-};
|
|
|
|
|
|
+ let dis = _.get(field, `display`)
|
|
|
|
+ if (!_.isFunction(dis)) return true
|
|
|
|
+ else return dis(field, form)
|
|
|
|
+}
|
|
const dataChange = (model: string) => {
|
|
const dataChange = (model: string) => {
|
|
- const value = form.value[model];
|
|
|
|
- emit('dataChange', { model, value });
|
|
|
|
-};
|
|
|
|
-const sss =()=>{
|
|
|
|
- console.log(1);
|
|
|
|
-
|
|
|
|
|
|
+ const value = form.value[model]
|
|
|
|
+ emit('dataChange', { model, value })
|
|
|
|
+}
|
|
|
|
+const sss = () => {
|
|
|
|
+ console.log(1)
|
|
}
|
|
}
|
|
-defineExpose({ sss });
|
|
|
|
|
|
+defineExpose({ sss })
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|