|
|
@@ -1,35 +1,42 @@
|
|
|
<template>
|
|
|
<div class="modal">
|
|
|
- <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="modalConfig.dialogWidth || '40%'" center
|
|
|
+ <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="modalConfig.dialogWidth || '80%'" center
|
|
|
@close="handleExcel(ruleFormRef)" :close-on-click-modal="false">
|
|
|
+ <template #header>
|
|
|
+ <pageTitle :title="dialogTitle"></pageTitle>
|
|
|
+ </template>
|
|
|
<div class="form">
|
|
|
<el-form ref="ruleFormRef" :rules="modalConfig.formRules" :model="formData"
|
|
|
:label-width="modalConfig.labelWidth || '100px'" size="large">
|
|
|
- <template v-for="item in modalConfig.formItems" :key="item.prop">
|
|
|
- <el-form-item :label="item.label" :prop="item.prop">
|
|
|
- <template v-if="item.type === 'input'">
|
|
|
- <el-input :disabled="item.disabled" v-model="formData[item.prop]"
|
|
|
- :placeholder="item.placeholder" />
|
|
|
- </template>
|
|
|
- <template v-if="item.type === 'number'">
|
|
|
- <el-input v-model="formData[item.prop]" type="number" :min="0" :max="999999999999"
|
|
|
- :disabled="item.disabled" :placeholder="item.placeholder"/>
|
|
|
- </template>
|
|
|
- <template v-if="item.type === 'select'">
|
|
|
- <el-select v-model="formData[item.prop]" :placeholder="item.placeholder"
|
|
|
- style="width: 100%" :disabled="item.disabled">
|
|
|
- <template v-for="(val, index) in item.options" :key="index">
|
|
|
- <el-option :value="val.value" :label="val.label" />
|
|
|
+ <el-row :gutter="12">
|
|
|
+ <template v-for="item in modalConfig.formItems" :key="item.prop">
|
|
|
+ <el-col :span="item.span || 12">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop">
|
|
|
+ <template v-if="item.type === 'input'">
|
|
|
+ <el-input :disabled="item.disabled" v-model="formData[item.prop]"
|
|
|
+ :placeholder="item.placeholder" />
|
|
|
</template>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <template v-if="item.type === 'date-picker'">
|
|
|
- <el-date-picker :type="item.dateType || 'daterange'" range-separator="-"
|
|
|
- start-placeholder="开始时间" end-placeholder="结束时间" v-model="formData[item.prop]"
|
|
|
- :disabled="item.disabled" />
|
|
|
- </template>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
+ <template v-if="item.type === 'number'">
|
|
|
+ <el-input v-model="formData[item.prop]" type="number" :min="0" :max="999999999999"
|
|
|
+ :disabled="item.disabled" :placeholder="item.placeholder"/>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 'select'">
|
|
|
+ <el-select v-model="formData[item.prop]" :placeholder="item.placeholder"
|
|
|
+ style="width: 100%" :disabled="item.disabled">
|
|
|
+ <template v-for="(val, index) in item.options" :key="index">
|
|
|
+ <el-option :value="val.value" :label="val.label" />
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 'date-picker'">
|
|
|
+ <el-date-picker :type="item.dateType || 'daterange'" range-separator="-"
|
|
|
+ start-placeholder="开始时间" end-placeholder="结束时间" v-model="formData[item.prop]"
|
|
|
+ :disabled="item.disabled" />
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
@@ -48,6 +55,7 @@ import { reactive, ref } from 'vue';
|
|
|
import type { FormInstance } from 'element-plus';
|
|
|
import useSystemStore from '@/store/main';
|
|
|
import { outTypeList } from '@/libs/commonMeth';
|
|
|
+import { template } from 'lodash';
|
|
|
// 定义props
|
|
|
interface IProps {
|
|
|
modalConfig: {
|
Liuzhenyu