【update】数据模板增加垂直对齐配置、多选内容分隔符配置功能，增加显示标识字段

src/business/platform/data/templatebuilder/right-aside/constants/default-value.js

@@ -1,92 +1,94 @@
 // 查询字段默认值
 export const queryDefaultValue = {
-  label: '',
-  rights: [{ type: 'all' }],
-  common: 'Y',
-  same: 'Y',
-  field_type: 'text',
-  field_options: {
-    selector_type: 'user',
-    datefmt_type: 'date',
-    datefmt: 'yyyy-MM-dd',
-    options: [{
-      val: '',
-      label: ''
-    }],
-    dictionary: ''
-  }
+    label: '',
+    rights: [{ type: 'all' }],
+    common: 'Y',
+    same: 'Y',
+    field_type: 'text',
+    field_options: {
+        selector_type: 'user',
+        datefmt_type: 'date',
+        datefmt: 'yyyy-MM-dd',
+        options: [{
+            val: '',
+            label: ''
+        }],
+        dictionary: ''
+    }
 }
 
 // 显示字段默认值
 export const displayDefaultValue = {
-  rights: [{ type: 'all' }],
-  noRightStyle: '',
-  align: 'left',
-  sortable: true,
-  width: '',
-  same: 'Y',
-  field_type: 'text',
-  field_options: {
-    datefmt_type: 'date',
-    datefmt: 'yyyy-MM-dd',
-    selector_type: 'user',
-    number_type: 'orig',
-    options: [{
-      val: '',
-      label: ''
-    }],
-    store: 'id',
-    dictionary: ''
-  }
+    rights: [{ type: 'all' }],
+    noRightStyle: '',
+    align: 'left',
+    vertical: 'middle',
+    sortable: true,
+    width: '',
+    same: 'Y',
+    field_type: 'text',
+    field_options: {
+        datefmt_type: 'date',
+        datefmt: 'yyyy-MM-dd',
+        selector_type: 'user',
+        number_type: 'orig',
+        options: [{
+            val: '',
+            label: ''
+        }],
+        store: 'id',
+        storeSeparator: ',',
+        dictionary: ''
+    }
 }
 
 export const displayTreeDefaultValue = {
-  id_key: '',
-  pid_key: '',
-  name_key: '',
-  root_pid: '',
-  root_label: '',
-  is_script: false
+    id_key: '',
+    pid_key: '',
+    name_key: '',
+    root_pid: '',
+    root_label: '',
+    is_script: false
 }
 
 export const filterConditionDefaultValue = {
-  label: '默认条件',
-  key: '',
-  type: 'condition',
-  rights: [{ type: 'all' }],
-  filter: {
-    condition: 'AND', // 操作符
-    rules: []
-  }
+    label: '默认条件',
+    key: '',
+    type: 'condition',
+    rights: [{ type: 'all' }],
+    filter: {
+        condition: 'AND', // 操作符
+        rules: []
+    }
 }
 
 // 结果字段默认值
 export const resultDefaultValue = {
-  rights: [{ type: 'all' }],
-  same: 'Y',
-  field_type: 'orig',
-  field_options: {
-    datefmt_type: 'date',
-    datefmt: 'yyyy-MM-dd',
-    selector_type: 'user',
-    options: [{
-      val: '',
-      label: ''
-    }],
-    store: 'id',
-    dictionary: '',
-    dictionary_name: ''
-  }
+    rights: [{ type: 'all' }],
+    same: 'Y',
+    field_type: 'orig',
+    field_options: {
+        datefmt_type: 'date',
+        datefmt: 'yyyy-MM-dd',
+        selector_type: 'user',
+        options: [{
+            val: '',
+            label: ''
+        }],
+        store: 'id',
+        dictionary: '',
+        dictionary_name: ''
+    }
 }
 export const sortDefaultValue = {
-  label: '',
-  name: '',
-  direction: 'asc'
+    label: '',
+    name: '',
+    direction: 'asc'
 }
 
 export const fucntionButtonDefaultValue = {
-  rights: [{ type: 'all' }],
-  position: 'all'
+    rights: [{ type: 'all' }],
+    position: 'all'
 }
 
 export const functionListButtonTypes = ['search', 'resetSearch', 'add', 'remove', 'edit', 'detail', 'print', 'import', 'export', 'sefStartFlow', 'custom', 'exportMuBan']

src/business/platform/data/templatebuilder/right-aside/editors/display-column.vue

@@ -1,292 +1,311 @@
 <template>
-  <el-form
-    ref="form"
-    :model="formData"
-    :rules="rules"
-    label-width="120px"
-    size="mini"
-    class="template-display-column"
-    @submit.native.prevent
-  >
-    <el-form-item label="显示名称" prop="label">
-      <el-input v-model="formData.label" placeholder="显示名称" />
-    </el-form-item>
-    <template v-if="datasetType === 'thirdparty'">
-      <el-form-item label="标识（name）" prop="name">
-        <el-input v-model="formData.name" placeholder="标识（name）" />
-      </el-form-item>
-    </template>
-    <el-form-item label="权限" prop="rights">
-      <rights-selector v-model="formData.rights" />
-    </el-form-item>
-    <el-form-item label="无权限样式" prop="noRightStyle">
-      <el-select v-model="formData.noRightStyle" placeholder="无权限样式">
-        <el-option value="" label="不显示" />
-        <el-option value="asterisk" label="星号(*)" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="允许排序" prop="sortable">
-      <el-switch v-model="formData.sortable" />
-    </el-form-item>
-    <el-form-item label="对齐方式" prop="align">
-      <el-radio-group v-model="formData.align">
-        <el-radio-button label="left">左对齐</el-radio-button>
-        <el-radio-button label="center">居中对齐</el-radio-button>
-        <el-radio-button label="right">右对齐</el-radio-button>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="宽度" prop="width">
-      <el-input v-model="formData.width" type="number" />
-    </el-form-item>
-    <el-form-item label="跟字段控件一致" prop="same">
-      <el-switch v-model="formData.same" active-value="Y" inactive-value="N" />
-    </el-form-item>
-    <!--控件类型-->
-    <template v-if="formData.same === 'N'">
-      <el-form-item label="显示格式" prop="field_type">
-        <el-select v-model="formData.field_type" @change="changeFieldType">
-          <el-option
-            v-for="item in displayFieldTypeOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <!-- 数字格式 -->
-      <template v-if="formData.field_type === 'number'">
-        <el-form-item label="数字类型" prop="number_type">
-          <el-select v-model="formData.field_options.number_type">
-            <el-option
-              v-for="item in numberTypeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+    <el-form
+        ref="form"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+        size="mini"
+        class="template-display-column"
+        @submit.native.prevent
+    >
+        <el-form-item label="显示名称" prop="label">
+            <el-input v-model="formData.label" placeholder="显示名称" />
         </el-form-item>
-
-        <el-form-item
-          v-if="formData.field_options.number_type ==='integer' ||formData.field_options.number_type ==='number'||formData.field_options.number_type ==='currency'"
-          label="数字格式"
-          prop="number_type"
-        >
-          <el-select v-model="formData.field_options.number_format">
-            <el-option
-              v-for="item in numberFormatOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.field_options.number_type ==='number' ||formData.field_options.number_type ==='currency'"
-          label="小数精确位数"
-          prop="decimal_places"
-        >
-          <el-input-number v-model="formData.field_options.decimal_places" />
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.field_options.number_type ==='number'||formData.field_options.number_type ==='currency'"
-          label="不足时补0"
-          prop="decimal_scale"
-        >
-          <el-switch v-model="formData.field_options.decimal_scale" />
+        <!-- 默认显示标识 -->
+        <template v-if="1 || datasetType === 'thirdparty'">
+            <el-form-item label="标识（name）" prop="name">
+                <el-input v-model="formData.name" placeholder="标识（name）" readonly />
+            </el-form-item>
+        </template>
+        <el-form-item label="权限" prop="rights">
+            <rights-selector v-model="formData.rights" />
         </el-form-item>
-
-        <el-form-item
-          v-if="formData.field_options.number_type ==='currency'"
-          label="前缀"
-          prop="prefix"
-        >
-          <el-input v-model="formData.field_options.prefix" />
+        <el-form-item label="无权限样式" prop="noRightStyle">
+            <el-select v-model="formData.noRightStyle" placeholder="无权限样式">
+                <el-option value="" label="不显示" />
+                <el-option value="asterisk" label="星号(*)" />
+            </el-select>
         </el-form-item>
-
-        <el-form-item
-          v-if="formData.field_options.number_type ==='currency'"
-          label="后缀"
-          prop="suffix"
-        >
-          <el-input v-model="formData.field_options.suffix" />
+        <el-form-item label="允许排序" prop="sortable">
+            <el-switch v-model="formData.sortable" />
         </el-form-item>
-      </template>
-
-      <!-- 枚举值格式 -->
-      <template v-if="formData.field_type === 'select'">
-        <el-form-item label-width="0" prop="options">
-          <field-options v-model="formData.field_options.options" />
+        <el-form-item label="水平对齐" prop="align">
+            <el-radio-group v-model="formData.align">
+                <el-radio-button label="left">左对齐</el-radio-button>
+                <el-radio-button label="center">居中对齐</el-radio-button>
+                <el-radio-button label="right">右对齐</el-radio-button>
+            </el-radio-group>
         </el-form-item>
-      </template>
-      <!-- 日期格式 -->
-      <el-form-item v-if="formData.field_type === 'datePicker'" label="日期格式" prop="datefmt_type">
-        <el-select v-model="formData.field_options.datefmt_type">
-          <el-option
-            v-for="(item,index) in datefmtTypeOptions"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-input
-          v-if="formData.field_options.datefmt_type ==='custom'"
-          v-model="formData.field_options.datefmt"
-        />
-      </el-form-item>
-
-      <!-- 数据字典 -->
-      <el-form-item v-if="formData.field_type === 'dictionary'" label="数据字典" prop="dictionary">
-        <ibps-type-select
-          v-model="formData.field_options.dictionary"
-          category-key="DIC_TYPE"
-          node-key="typeKey"
-          clearable
-        />
-      </el-form-item>
-      <!-- 选择器 -->
-      <template v-if="formData.field_type === 'selector'">
-        <el-form-item label="选择器类型" prop="selector_type">
-          <el-select v-model="formData.field_options.selector_type">
-            <el-option
-              v-for="item in selectorTypeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+        <el-form-item label="垂直对齐" prop="vertical">
+            <el-radio-group v-model="formData.vertical">
+                <el-radio-button label="top">顶部对齐</el-radio-button>
+                <el-radio-button label="middle">垂直居中</el-radio-button>
+                <el-radio-button label="bottom">底部对齐</el-radio-button>
+            </el-radio-group>
         </el-form-item>
-        <el-form-item label="存储格式" prop="store">
-          <el-select v-model="formData.field_options.store">
-            <el-option
-              v-for="item in selectorStoreOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
+        <el-form-item label="宽度" prop="width">
+            <el-input v-model="formData.width" type="number" />
         </el-form-item>
-        <el-form-item>
-          <template slot="label">是否多选</template>
-          <el-switch
-            v-model="formData.field_options.multiple"
-            active-value="Y"
-            inactive-value="N"
-          />
+        <el-form-item label="跟字段控件一致" prop="same">
+            <el-switch v-model="formData.same" active-value="Y" inactive-value="N" />
         </el-form-item>
-      </template>
+        <!--控件类型-->
+        <template v-if="formData.same === 'N'">
+            <el-form-item label="显示格式" prop="field_type">
+                <el-select v-model="formData.field_type" @change="changeFieldType">
+                    <el-option
+                        v-for="item in displayFieldTypeOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <!-- 数字格式 -->
+            <template v-if="formData.field_type === 'number'">
+                <el-form-item label="数字类型" prop="number_type">
+                    <el-select v-model="formData.field_options.number_type">
+                        <el-option
+                            v-for="item in numberTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
 
-      <!-- 自定义对话框 -->
-      <template v-if="formData.field_type === 'customDialog'">
-        <el-form-item>
-          <template slot="label">自定义对话框</template>
-          <ibps-data-template-selector2
-            v-model="formData.field_options.dialog"
-            type="dialog"
-            placeholder="请选择自定义对话框"
-          />
-        </el-form-item>
-        <el-form-item>
-          <template slot="label">是否多选</template>
-          <el-switch
-            v-model="formData.field_options.multiple"
-            active-value="Y"
-            inactive-value="N"
-          />
-        </el-form-item>
-        <el-form-item>
-          <template slot="label">存储格式</template>
-          <el-select v-model="formData.field_options.store" style="width:100%;">
-            <el-option
-              v-for="item in dialogStoreOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </template>
-      <!-- end -->
-    </template>
-  </el-form>
+                <el-form-item
+                    v-if="formData.field_options.number_type ==='integer' ||formData.field_options.number_type ==='number'||formData.field_options.number_type ==='currency'"
+                    label="数字格式"
+                    prop="number_type"
+                >
+                    <el-select v-model="formData.field_options.number_format">
+                        <el-option
+                            v-for="item in numberFormatOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item
+                    v-if="formData.field_options.number_type ==='number' ||formData.field_options.number_type ==='currency'"
+                    label="小数精确位数"
+                    prop="decimal_places"
+                >
+                    <el-input-number v-model="formData.field_options.decimal_places" />
+                </el-form-item>
+
+                <el-form-item
+                    v-if="formData.field_options.number_type ==='number'||formData.field_options.number_type ==='currency'"
+                    label="不足时补0"
+                    prop="decimal_scale"
+                >
+                    <el-switch v-model="formData.field_options.decimal_scale" />
+                </el-form-item>
+
+                <el-form-item
+                    v-if="formData.field_options.number_type ==='currency'"
+                    label="前缀"
+                    prop="prefix"
+                >
+                    <el-input v-model="formData.field_options.prefix" />
+                </el-form-item>
+
+                <el-form-item
+                    v-if="formData.field_options.number_type ==='currency'"
+                    label="后缀"
+                    prop="suffix"
+                >
+                    <el-input v-model="formData.field_options.suffix" />
+                </el-form-item>
+            </template>
+
+            <!-- 枚举值格式 -->
+            <template v-if="formData.field_type === 'select'">
+                <el-form-item label-width="0" prop="options">
+                    <field-options v-model="formData.field_options.options" />
+                </el-form-item>
+            </template>
+            <!-- 日期格式 -->
+            <el-form-item v-if="formData.field_type === 'datePicker'" label="日期格式" prop="datefmt_type">
+                <el-select v-model="formData.field_options.datefmt_type">
+                    <el-option
+                        v-for="(item,index) in datefmtTypeOptions"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+                <el-input
+                    v-if="formData.field_options.datefmt_type ==='custom'"
+                    v-model="formData.field_options.datefmt"
+                />
+            </el-form-item>
+
+            <!-- 数据字典 -->
+            <el-form-item v-if="formData.field_type === 'dictionary'" label="数据字典" prop="dictionary">
+                <ibps-type-select
+                    v-model="formData.field_options.dictionary"
+                    category-key="DIC_TYPE"
+                    node-key="typeKey"
+                    clearable
+                />
+            </el-form-item>
+            <!-- 选择器 -->
+            <template v-if="formData.field_type === 'selector'">
+                <el-form-item label="选择器类型" prop="selector_type">
+                    <el-select v-model="formData.field_options.selector_type">
+                        <el-option
+                            v-for="item in selectorTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="存储格式" prop="store">
+                    <el-select v-model="formData.field_options.store">
+                        <el-option
+                            v-for="item in selectorStoreOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <template slot="label">是否多选</template>
+                    <el-switch
+                        v-model="formData.field_options.multiple"
+                        active-value="Y"
+                        inactive-value="N"
+                    />
+                </el-form-item>
+            </template>
+
+            <!-- 自定义对话框 -->
+            <template v-if="formData.field_type === 'customDialog'">
+                <el-form-item>
+                    <template slot="label">自定义对话框</template>
+                    <ibps-data-template-selector2
+                        v-model="formData.field_options.dialog"
+                        type="dialog"
+                        placeholder="请选择自定义对话框"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <template slot="label">是否多选</template>
+                    <el-switch
+                        v-model="formData.field_options.multiple"
+                        active-value="Y"
+                        inactive-value="N"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <template slot="label">存储格式</template>
+                    <el-select v-model="formData.field_options.store" style="width:100%;">
+                        <el-option
+                            v-for="item in dialogStoreOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item v-if="formData.field_options.multiple === 'Y'">
+                    <template slot="label">分隔符</template>
+                    <el-select v-model="formData.field_options.storeSeparator" style="width:100%;">
+                        <el-option
+                            v-for="item in dialogStoreSeparatorOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <!-- end -->
+        </template>
+    </el-form>
 </template>
 <script>
 import RightsSelector from '@/business/platform/rights/config/selector'
 
 import { displayFieldTypeOptions, numberTypeOptions, numberFormatOptions } from '../constants/editor-column'
-import { datefmtTypeOptions, selectorTypeOptions, selectorStoreOptions, dialogStoreOptions } from '@/business/platform/form/constants/fieldOptions'
+import { datefmtTypeOptions, selectorTypeOptions, selectorStoreOptions, dialogStoreOptions, dialogStoreSeparatorOptions } from '@/business/platform/form/constants/fieldOptions'
 import FieldTypeMixin from '../mixins/field-type'
 import FieldOptions from '@/business/platform/data/components/field/options'
 import IbpsTypeSelect from '@/business/platform/cat/type/select'
 import IbpsDataTemplateSelector2 from '@/business/platform/data/dataTemplate/selector2'
 
 export default {
-  components: {
-    RightsSelector,
-    FieldOptions,
-    IbpsTypeSelect,
-    IbpsDataTemplateSelector2
-  },
-  mixins: [FieldTypeMixin],
-  props: {
-    data: {
-      type: Object
+    components: {
+        RightsSelector,
+        FieldOptions,
+        IbpsTypeSelect,
+        IbpsDataTemplateSelector2
     },
-    datasetType: {
-      type: String,
-      default: 'table'
-    }
-  },
-  data() {
-    return {
-      displayFieldTypeOptions,
-      numberTypeOptions,
-      numberFormatOptions,
-      datefmtTypeOptions,
-      selectorTypeOptions,
-      selectorStoreOptions,
-      dialogStoreOptions,
-
-      formName: 'form',
-      formData: {
-        label: ''
-      },
-      rules: {
-        name: [{ required: true, message: this.$t('validate.required') }],
-        label: [{ required: true, message: this.$t('validate.required') }]
-      }
-    }
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val) {
-          this.formData = val
+    mixins: [FieldTypeMixin],
+    props: {
+        data: {
+            type: Object
+        },
+        datasetType: {
+            type: String,
+            default: 'table'
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-  // 获取表单数据
-    getFormData(callback) {
-      this.$refs[this.formName].validate((valid) => {
-        if (valid) {
-          callback(this.formData)
-        } else {
-          callback()
+    },
+    data () {
+        return {
+            displayFieldTypeOptions,
+            numberTypeOptions,
+            numberFormatOptions,
+            datefmtTypeOptions,
+            selectorTypeOptions,
+            selectorStoreOptions,
+            dialogStoreOptions,
+            dialogStoreSeparatorOptions,
+            formName: 'form',
+            formData: {
+                label: ''
+            },
+            rules: {
+                name: [{ required: true, message: this.$t('validate.required') }],
+                label: [{ required: true, message: this.$t('validate.required') }]
+            }
+        }
+    },
+    watch: {
+        data: {
+            handler (val) {
+                if (val) {
+                    this.formData = val
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        // 获取表单数据
+        getFormData (callback) {
+            this.$refs[this.formName].validate((valid) => {
+                if (valid) {
+                    callback(this.formData)
+                } else {
+                    callback()
+                }
+            })
         }
-      })
     }
-  }
 }
 </script>
 
 <style lang="scss">
-.template-display-column {
-  .el-select {
-    width:100%;
-  }
-}
+    .template-display-column {
+        .el-select {
+            width:100%;
+        }
+    }
 </style>

src/business/platform/data/templatebuilder/template-main/templates/list.vue

@@ -1,34 +1,34 @@
 <template>
-  <div>
-    <ibps-crud
-      :data="data"
-      :toolbars="listConfig.toolbars"
-      :search-form="listConfig.searchForm"
-      :pk-key="pkKey"
-      :columns="listConfig.columns"
-      :show-pagination="showPagination"
-      :pagination="pagination"
-      :index-row="indexRow"
-      :height="height"
-      :style="{
-        width:width+'px'
-      }"
-    >
-      <!--自定义查询条件-->
-      <template v-slot:searchForm>
-        <search-form
-          v-if="listConfig.searchForm && listConfig.searchForm.forms "
-          ref="searchForm"
-          :forms="listConfig.searchForm.forms||[]"
-          :size="listConfig.searchForm.size"
-          :fuzzy="listConfig.searchForm.fuzzy"
-          :inline="listConfig.searchForm.inline"
-          :label-width="listConfig.searchForm.labelWidth"
-          :item-width="listConfig.searchForm.itemWidth"
-        />
-      </template>
-    </ibps-crud>
-  </div>
+    <div>
+        <ibps-crud
+            :data="data"
+            :toolbars="listConfig.toolbars"
+            :search-form="listConfig.searchForm"
+            :pk-key="pkKey"
+            :columns="listConfig.columns"
+            :show-pagination="showPagination"
+            :pagination="pagination"
+            :index-row="indexRow"
+            :height="height"
+            :style="{
+                width:width+'px'
+            }"
+        >
+            <!--自定义查询条件-->
+            <template v-slot:searchForm>
+                <search-form
+                    v-if="listConfig.searchForm && listConfig.searchForm.forms "
+                    ref="searchForm"
+                    :forms="listConfig.searchForm.forms||[]"
+                    :size="listConfig.searchForm.size"
+                    :fuzzy="listConfig.searchForm.fuzzy"
+                    :inline="listConfig.searchForm.inline"
+                    :label-width="listConfig.searchForm.labelWidth"
+                    :item-width="listConfig.searchForm.itemWidth"
+                />
+            </template>
+        </ibps-crud>
+    </div>
 
 </template>
 <script>
@@ -37,113 +37,114 @@ import ButtonsConstants from '@/business/platform/data/constants/buttons'
 import { isIE } from '@/plugins/element-ui/src/utils/util'
 
 export default {
-  components: {
-    SearchForm
-  },
-  props: {
-    template: Object
-  },
-  data() {
-    const flexWidth = isIE() ? 20 : 0
-    return {
-      width: document.body.clientWidth - 570 - flexWidth,
-      data: [],
-      pkKey: 'id',
-      indexRow: false,
-      height: 350,
-      listConfig: {
-        // 工具栏
-        toolbars: [
-          { key: 'search' },
-          { key: 'add' },
-          { key: 'edit' },
-          { key: 'remove' }
-        ],
-        columns: [],
-        searchForm: null,
-        rowHandle: {
-          actions: [{
-            key: 'edit'
-          }]
+    components: {
+        SearchForm
+    },
+    props: {
+        template: Object
+    },
+    data () {
+        const flexWidth = isIE() ? 20 : 0
+        return {
+            width: document.body.clientWidth - 570 - flexWidth,
+            data: [],
+            pkKey: 'id',
+            indexRow: false,
+            height: 350,
+            listConfig: {
+                // 工具栏
+                toolbars: [
+                    { key: 'search' },
+                    { key: 'add' },
+                    { key: 'edit' },
+                    { key: 'remove' }
+                ],
+                columns: [],
+                searchForm: null,
+                rowHandle: {
+                    actions: [{
+                        key: 'edit'
+                    }]
+                }
+            },
+            showPagination: true,
+            pagination: {
+                page: 1,
+                limit: 20
+            }
         }
-      },
-      showPagination: true,
-      pagination: {
-        page: 1,
-        limit: 20
-      }
-    }
-  },
-  watch: {
-    template: {
-      handler(val, oldVal) {
-        if (!this.template) { return }
+    },
+    watch: {
+        template: {
+            handler (val, oldVal) {
+                if (!this.template) { return }
 
-        const toolbarButtons = this.template.buttons ? this.template.buttons.function_buttons || [] : []
+                const toolbarButtons = this.template.buttons ? this.template.buttons.function_buttons || [] : []
 
-        // 工具栏
-        const toolbars = []
-        toolbarButtons.forEach((button, i) => {
-          const defaultButton = ButtonsConstants[button.button_type] || {}
-          toolbars.push({
-            key: button.button_type + i,
-            label: button.label || defaultButton.label,
-            // position的值有:toolbar manage search eidt all
-            hidden: button.position === 'manage' || button.position === 'search' || button.position === 'eidt',
-            icon: button.icon ? 'ibps-icon-' + button.icon : defaultButton.icon,
-            type: button.style || defaultButton.style,
-            disabled: true
-          })
-        })
+                // 工具栏
+                const toolbars = []
+                toolbarButtons.forEach((button, i) => {
+                    const defaultButton = ButtonsConstants[button.button_type] || {}
+                    toolbars.push({
+                        key: button.button_type + i,
+                        label: button.label || defaultButton.label,
+                        // position的值有:toolbar manage search eidt all
+                        hidden: button.position === 'manage' || button.position === 'search' || button.position === 'eidt',
+                        icon: button.icon ? 'ibps-icon-' + button.icon : defaultButton.icon,
+                        type: button.style || defaultButton.style,
+                        disabled: true
+                    })
+                })
 
-        // 显示字段
-        const columns = []
-        const displayColumns = this.template.display_columns || []
-        displayColumns.forEach(column => {
-          columns.push({
-            prop: column.name,
-            label: column.label,
-            align: column.align,
-            sortable: column.sortable
-          })
-        })
+                // 显示字段
+                const columns = []
+                const displayColumns = this.template.display_columns || []
+                displayColumns.forEach(column => {
+                    columns.push({
+                        prop: column.name,
+                        label: column.label,
+                        align: column.align,
+                        vertical: column.vertical,
+                        sortable: column.sortable
+                    })
+                })
 
-        // 查询字段
-        const searchForms = []
-        const queryColumns = this.template.query_columns || []
-        queryColumns.forEach(column => {
-          const fieldType = column.field_type || 'input'
-          searchForms.push({
-            prop: column.name,
-            label: column.label,
-            fieldType: fieldType === 'datePicker' ? 'date' : (fieldType === 'dateRange' ? 'daterange' : fieldType),
-            options: column.field_options ? column.field_options.options || [] : [],
-            field_options: column.field_options || {},
-            modelValue: column.name,
-            disabled: true
-          })
-        })
+                // 查询字段
+                const searchForms = []
+                const queryColumns = this.template.query_columns || []
+                queryColumns.forEach(column => {
+                    const fieldType = column.field_type || 'input'
+                    searchForms.push({
+                        prop: column.name,
+                        label: column.label,
+                        fieldType: fieldType === 'datePicker' ? 'date' : (fieldType === 'dateRange' ? 'daterange' : fieldType),
+                        options: column.field_options ? column.field_options.options || [] : [],
+                        field_options: column.field_options || {},
+                        modelValue: column.name,
+                        disabled: true
+                    })
+                })
 
-        this.listConfig = {
-          toolbars: toolbars,
-          columns: columns
-        }
-        this.listConfig.searchForm = null
-        if (searchForms.length > 0) {
-          this.listConfig.searchForm = {
-            forms: searchForms
-          }
-        }
+                this.listConfig = {
+                    toolbars: toolbars,
+                    columns: columns
+                }
+                this.listConfig.searchForm = null
+                if (searchForms.length > 0) {
+                    this.listConfig.searchForm = {
+                        forms: searchForms
+                    }
+                }
 
-        this.showPagination = this.template.attrs ? this.template.attrs.need_page === 'Y' : true
-        // 分页
-        this.pagination.limit = this.template.attrs ? parseInt(this.template.attrs.page_size, 10) || 20 : 20
+                this.showPagination = this.template.attrs ? this.template.attrs.need_page === 'Y' : true
+                // 分页
+                this.pagination.limit = this.template.attrs ? parseInt(this.template.attrs.page_size, 10) || 20 : 20
 
-        this.indexRow = this.template.attrs ? this.template.attrs.indexRow || false : false
-      },
-      deep: true,
-      immediate: true
+                this.indexRow = this.template.attrs ? this.template.attrs.indexRow || false : false
+            },
+            deep: true,
+            immediate: true
+        }
     }
-  }
 }
 </script>

src/business/platform/data/templaterender/templates/list.vue

@@ -96,6 +96,7 @@
                     :template-key="scope.column.field_options.dialog"
                     :multiple="$utils.toBoolean(scope.column.field_options.multiple, true)"
                     :store="scope.column.field_options.store"
+                    :store-separator="scope.column.field_options.storeSeparator"
                     :dynamic-params="getLinkDynamicParams(scope.column.field_options, scope.row)"
                     :icon="scope.column.field_options.icon ? 'ibps-icon-' + scope.column.field_options.icon : ''"
                     :type="scope.column.field_options.dialog_type"
@@ -965,7 +966,8 @@ export default {
         getResponseData (buttonType, ids, exportColumns) {
             const { template, dataTemplate, fields, pagination, sorts } = this
             const params = {}
-            template.filter_conditions = []
+            // 取消重置过滤条件
+            // template.filter_conditions = []
             let response_data = JSON.parse(JSON.stringify(dataTemplate))
             if (this.$utils.isEmpty(template.export_columns)) {
                 const arr = dataTemplate.datasets.filter((d) => d.type !== 'table')
@@ -1422,6 +1424,7 @@ export default {
                 prop: field.name,
                 label: field.label,
                 align: field.align,
+                vertical: field.vertical,
                 width: field.width,
                 hidden: field['field_type'] === 'hidden'
             }

src/business/platform/form/constants/fieldOptions.js

@@ -2,229 +2,229 @@
  * 默认值
  */
 export const defauleValueTypeOptions = [{
-  value: 'fixed',
-  label: '固定值'
+    value: 'fixed',
+    label: '固定值'
 }, {
-  value: 'today',
-  label: '填写当前时间'
+    value: 'today',
+    label: '填写当前时间'
 }, {
-  value: 'present',
-  label: '预设值'
+    value: 'present',
+    label: '预设值'
 },
 {
-  value: 'dynamic',
-  label: '动态脚本'
+    value: 'dynamic',
+    label: '动态脚本'
 },
 {
-  value: 'linkage',
-  label: '联动数据'
+    value: 'linkage',
+    label: '联动数据'
 },
 {
-  value: 'formula',
-  label: '公式编辑'
+    value: 'formula',
+    label: '公式编辑'
 },
 {
-  value: 'javascript',
-  label: 'javascript脚本'
+    value: 'javascript',
+    label: 'javascript脚本'
 }
 ]
 export const numberFormatOptions = [{
-  value: 'orig',
-  label: '原样输出'
+    value: 'orig',
+    label: '原样输出'
 }, {
-  value: 'integer',
-  label: '整型'
+    value: 'integer',
+    label: '整型'
 }, {
-  value: 'number',
-  label: '数字'
+    value: 'number',
+    label: '数字'
 }, {
-  value: 'currency',
-  label: '货币'
+    value: 'currency',
+    label: '货币'
 }]
 
 export const selectorScopeOption = [
-  {
-    value: '1',
-    label: '全部'
-  },
-  {
-    value: '2',
-    label: '所在范围'
-  },
-  {
-    value: '3',
-    label: '指定范围'
-  },
-  {
-    value: 'script',
-    label: '脚本'
-  }]
+    {
+        value: '1',
+        label: '全部'
+    },
+    {
+        value: '2',
+        label: '所在范围'
+    },
+    {
+        value: '3',
+        label: '指定范围'
+    },
+    {
+        value: 'script',
+        label: '脚本'
+    }]
 /**
  * 日期格式
  */
 export const datefmtTypeOptions = [
-  {
-    value: 'date',
-    label: '日期(yyyy-MM-dd)'
-  }, {
-    value: 'datetime',
-    label: '日期时间(yyyy-MM-dd HH:mm:ss)'
-  },
-  {
-    value: 'time',
-    label: '时间(HH:mm:ss)'
-  }, {
-    value: 'custom',
-    label: '自定义'
-  }
+    {
+        value: 'date',
+        label: '日期(yyyy-MM-dd)'
+    }, {
+        value: 'datetime',
+        label: '日期时间(yyyy-MM-dd HH:mm:ss)'
+    },
+    {
+        value: 'time',
+        label: '时间(HH:mm:ss)'
+    }, {
+        value: 'custom',
+        label: '自定义'
+    }
 ]
 
 /**
  * 时间格式
  */
 export const timefmtTypeOptions = [
-  {
-    value: 'time',
-    label: '时间(HH:mm:ss)'
-  }, {
-    value: 'custom',
-    label: '自定义'
-  }
+    {
+        value: 'time',
+        label: '时间(HH:mm:ss)'
+    }, {
+        value: 'custom',
+        label: '自定义'
+    }
 ]
 
 /**
  * 流程范围
  */
 export const bpmDefScopeOptions = [
-  {
-    value: 'all',
-    label: '全部'
-  }, {
-    value: 'spec',
-    label: '指定范围'
-  },
-  {
-    value: 'script',
-    label: '脚本'
-  }
+    {
+        value: 'all',
+        label: '全部'
+    }, {
+        value: 'spec',
+        label: '指定范围'
+    },
+    {
+        value: 'script',
+        label: '脚本'
+    }
 ]
 
 /**
  * 发起人范围
  */
 export const starterScopeOptions = [
-  {
-    value: 'current',
-    label: '当前用户'
-  }, {
-    value: 'spec',
-    label: '指定范围'
-  },
-  {
-    value: 'all',
-    label: '全部'
-  }
+    {
+        value: 'current',
+        label: '当前用户'
+    }, {
+        value: 'spec',
+        label: '指定范围'
+    },
+    {
+        value: 'all',
+        label: '全部'
+    }
 ]
 
 /**
  * 关系类型
  */
 export const bpmLinkTypeOptions = [
-  {
-    value: 'current',
-    label: '当前流程'
-  }, {
-    value: 'postposition',
-    label: '后置流程'
-  }
+    {
+        value: 'current',
+        label: '当前流程'
+    }, {
+        value: 'postposition',
+        label: '后置流程'
+    }
 ]
 
 /**
  * 存储格式
  */
 export const scriptOptions = [
-  {
-    value: 'json',
-    label: 'JSON'
-  }
+    {
+        value: 'json',
+        label: 'JSON'
+    }
 ]
 
 /**
  * 文件类型
  */
 export const fileTypeOptions = [{
-  value: 'images',
-  label: '图片类'
+    value: 'images',
+    label: '图片类'
 }, {
-  value: 'videos',
-  label: '视频类'
+    value: 'videos',
+    label: '视频类'
 },
 {
-  value: 'audios',
-  label: '音频类'
+    value: 'audios',
+    label: '音频类'
 }, {
-  value: 'docs',
-  label: '文档类'
+    value: 'docs',
+    label: '文档类'
 }, {
-  value: 'compress',
-  label: '压缩包'
+    value: 'compress',
+    label: '压缩包'
 }, {
-  value: 'seal',
-  label: '盖章文件'
+    value: 'seal',
+    label: '盖章文件'
 }, {
-  value: 'custom',
-  label: '自定义'
+    value: 'custom',
+    label: '自定义'
 }
 ]
 /**
  * 图片类型
  */
 export const imageTypeOptions = [{
-  value: '.jpeg',
-  label: 'jpeg'
+    value: '.jpeg',
+    label: 'jpeg'
 },
 {
-  value: '.png',
-  label: 'png'
+    value: '.png',
+    label: 'png'
 },
 {
-  value: '.bmp',
-  label: 'bmp'
+    value: '.bmp',
+    label: 'bmp'
 },
 {
-  value: '.gif',
-  label: 'gif'
+    value: '.gif',
+    label: 'gif'
 },
 {
-  value: '.jpg',
-  label: 'jpg'
+    value: '.jpg',
+    label: 'jpg'
 },
 {
-  value: '.tiff',
-  label: 'tiff'
+    value: '.tiff',
+    label: 'tiff'
 }
 ]
 /**
  * 上传方式
  */
 export const uploadTypeOptions = [{
-  value: 'default',
-  label: '直接上传'
+    value: 'default',
+    label: '直接上传'
 },
 {
-  value: 'attachment',
-  label: '附件上传'
+    value: 'attachment',
+    label: '附件上传'
 }
 ]
 /**
  * 文件存储格式
  */
 export const fileStoreOptions = [{
-  value: 'id',
-  label: '仅存ID'
+    value: 'id',
+    label: '仅存ID'
 }, {
-  value: 'json',
-  label: 'JSON格式'
+    value: 'json',
+    label: 'JSON格式'
 }
 // , {
 //   value: 'path',
@@ -236,20 +236,20 @@ export const fileStoreOptions = [{
  * 选择器类型
  */
 export const selectorTypeOptions = [{
-  value: 'user',
-  label: '用户'
+    value: 'user',
+    label: '用户'
 },
 {
-  value: 'org',
-  label: '组织'
+    value: 'org',
+    label: '组织'
 },
 {
-  value: 'position',
-  label: '岗位'
+    value: 'position',
+    label: '岗位'
 },
 {
-  value: 'role',
-  label: '角色'
+    value: 'role',
+    label: '角色'
 }
 ]
 
@@ -257,62 +257,70 @@ export const selectorTypeOptions = [{
  * 选择器存储格式
  */
 export const selectorStoreOptions = [{
-  value: 'id',
-  label: '仅存ID'
+    value: 'id',
+    label: '仅存ID'
 }, {
-  value: 'json',
-  label: 'JSON格式'
+    value: 'json',
+    label: 'JSON格式'
 }, {
-  value: 'bind',
-  label: '绑定标识'
+    value: 'bind',
+    label: '绑定标识'
 }]
 /**
  * 选择器存储格式-需要存储得值[用户]
  */
 export const bindValueEmployeeOptions = [{
-  value: 'id',
-  label: 'id'
+    value: 'id',
+    label: 'id'
 }, {
-  value: 'account',
-  label: 'account'
+    value: 'account',
+    label: 'account'
 }]
 /**
  * 选择器存储格式-需要存储得值[角色]
  */
 export const bindValueOtherOptions = [{
-  value: 'id',
-  label: 'id'
+    value: 'id',
+    label: 'id'
 }, {
-  value: 'alias',
-  label: 'alias'
+    value: 'alias',
+    label: 'alias'
 }]
 
 export const dialogStoreOptions = [{
-  value: 'id',
-  label: '仅存ID'
+    value: 'id',
+    label: '仅存ID'
+}, {
+    value: 'json',
+    label: 'JSON格式'
+}]
+
+export const dialogStoreSeparatorOptions = [{
+    value: '.',
+    label: '英文句号'
 }, {
-  value: 'json',
-  label: 'JSON格式'
+    value: ',',
+    label: '英文逗号'
 }]
 
 /**
  * 区域
  */
 export const areaOptions = [{
-  value: 'country',
-  label: '国家'
+    value: 'country',
+    label: '国家'
 },
 {
-  value: 'province',
-  label: '省/自治区/直辖市'
+    value: 'province',
+    label: '省/自治区/直辖市'
 },
 {
-  value: 'city',
-  label: '市'
+    value: 'city',
+    label: '市'
 },
 {
-  value: 'district',
-  label: '区/县'
+    value: 'district',
+    label: '区/县'
 }
 ]
 
@@ -320,89 +328,98 @@ export const areaOptions = [{
  * 默认工具栏
  */
 export const defaultToolbars = [
-  'source', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'pasteplain', '|',
-  'forecolor', 'backcolor', 'selectall', 'cleardoc', 'fontfamily', 'fontsize'
+    'source', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'pasteplain', '|',
+    'forecolor', 'backcolor', 'selectall', 'cleardoc', 'fontfamily', 'fontsize'
 ]
 /**
-     * 日期格式
-     */
+ * 日期格式
+ */
 export const dateTypes = [{
-  value: 'specific',
-  label: '特定日期'
+    value: 'specific',
+    label: '特定日期'
 },
 {
-  value: 'form',
-  label: '表单字段'
+    value: 'form',
+    label: '表单字段'
 },
 {
-  value: 'today',
-  label: '填写当前日期'
+    value: 'today',
+    label: '填写当前日期'
 }, {
-  value: 'before',
-  label: '当天日期前'
+    value: 'before',
+    label: '当天日期前'
 }, {
-  value: 'after',
-  label: '当天日期后'
+    value: 'after',
+    label: '当天日期后'
 }]
 
 export const intervalTypes = [{
-  value: 'y',
-  label: '年'
+    value: 'y',
+    label: '年'
 }, {
-  value: 'm',
-  label: '月'
+    value: 'm',
+    label: '月'
 }, {
-  value: 'd',
-  label: '日'
+    value: 'd',
+    label: '日'
 }, {
-  value: 'h',
-  label: '时'
+    value: 'h',
+    label: '时'
 }, {
-  value: 'mi',
-  label: '分'
+    value: 'mi',
+    label: '分'
 }, {
-  value: 's',
-  label: '秒'
+    value: 's',
+    label: '秒'
 }]
 
+/**
+ * 子表分页大小选项
+ */
+export const defaultPageSize = 10
+/**
+ * 子表分页大小选项
+ */
+export const pageSizeOptions = [10, 15, 20, 30, 50, 100]
+
 /**
  * 数据格式【校验】
  */
 export const dataFormatOptions = [{
-  value: 'phone',
-  label: '手机号',
-  // eslint-disable-next-line no-useless-escape
-  regexp: /^((\(\d{2,3}\))|(\d{3}\-))?1\d{10}$/
+    value: 'phone',
+    label: '手机号',
+    // eslint-disable-next-line no-useless-escape
+    regexp: /^((\(\d{2,3}\))|(\d{3}\-))?1\d{10}$/
 },
 {
-  value: 'telephone',
-  label: '电话号码',
-  // eslint-disable-next-line no-useless-escape
-  regexp: /^((\(0[0-9]{2,3}\))|(0[0-9]{2,3})\-)?([2-9][0-9]{6,7})(\-[0-9]{1,4})?$/
+    value: 'telephone',
+    label: '电话号码',
+    // eslint-disable-next-line no-useless-escape
+    regexp: /^((\(0[0-9]{2,3}\))|(0[0-9]{2,3})\-)?([2-9][0-9]{6,7})(\-[0-9]{1,4})?$/
 },
 {
-  value: 'zip',
-  label: '邮编',
-  regexp: /^\d{6}$/
+    value: 'zip',
+    label: '邮编',
+    regexp: /^\d{6}$/
 },
 {
-  value: 'idcard',
-  label: '身份证',
-  regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+    value: 'idcard',
+    label: '身份证',
+    regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
 },
 {
-  value: 'email',
-  label: '邮箱',
-  // eslint-disable-next-line no-useless-escape
-  regexp: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
+    value: 'email',
+    label: '邮箱',
+    // eslint-disable-next-line no-useless-escape
+    regexp: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
 },
 {
-  value: 'custom',
-  label: '自定义'
+    value: 'custom',
+    label: '自定义'
 }]
 const dataFormatMap1 = {}
 dataFormatOptions.forEach(item => {
-  dataFormatMap1[item.value] = item
+    dataFormatMap1[item.value] = item
 })
 
 export const dataFormatMap = dataFormatMap1