增加列表显示字段类型，增加排序字段个数

src/business/platform/data/templatebuilder/right-aside/components/button.vue

@@ -1,113 +1,113 @@
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <span>{{ title }}</span>
-      <div class="ibps-fr ibps-pr-10">
-        <el-dropdown :hide-on-click="false" trigger="click" @command="addButton">
-          <el-tooltip :content="'添加按钮'" placement="top">
-            <span class="el-dropdown-link">
-              <i class="el-icon-circle-plus el-icon--right" />
-            </span>
-          </el-tooltip>
-          <el-dropdown-menu slot="dropdown">
-            <el-scrollbar
-              tag="div"
-              wrap-class="el-select-dropdown__wrap"
-              view-class="el-select-dropdown__list"
-            >
-              <el-dropdown-item
-                v-for="(button,index) in functionButtons"
-                :key="button[buttonKey]+index"
-                :disabled="isDisabled(button[buttonKey])"
-                :command="button"
-              >
-                {{ button.label }}
-              </el-dropdown-item>
-            </el-scrollbar>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <el-divider direction="vertical" />
-        <!-- 快捷权限设置-->
-        <el-dropdown trigger="click" @command="settingRights">
-          <el-tooltip content="快捷权限设置" placement="top">
-            <span class="el-dropdown-link">
-              <i class="ibps-icon ibps-icon-shield" />
-            </span>
-          </el-tooltip>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-              v-for="(rightsType,index) in rightsTypes"
-              :key="rightsType.value+index"
-              :command="rightsType.value"
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <span>{{ title }}</span>
+            <div class="ibps-fr ibps-pr-10">
+                <el-dropdown :hide-on-click="false" trigger="click" @command="addButton">
+                    <el-tooltip :content="'添加按钮'" placement="top">
+                        <span class="el-dropdown-link">
+                            <i class="el-icon-circle-plus el-icon--right" />
+                        </span>
+                    </el-tooltip>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-scrollbar
+                            tag="div"
+                            wrap-class="el-select-dropdown__wrap"
+                            view-class="el-select-dropdown__list"
+                        >
+                            <el-dropdown-item
+                                v-for="(button,index) in functionButtons"
+                                :key="button[buttonKey]+index"
+                                :disabled="isDisabled(button[buttonKey])"
+                                :command="button"
+                            >
+                                {{ button.label }}
+                            </el-dropdown-item>
+                        </el-scrollbar>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <el-divider direction="vertical" />
+                <!-- 快捷权限设置-->
+                <el-dropdown trigger="click" @command="settingRights">
+                    <el-tooltip content="快捷权限设置" placement="top">
+                        <span class="el-dropdown-link">
+                            <i class="ibps-icon ibps-icon-shield" />
+                        </span>
+                    </el-tooltip>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item
+                            v-for="(rightsType,index) in rightsTypes"
+                            :key="rightsType.value+index"
+                            :command="rightsType.value"
+                        >
+                            {{ rightsType.label }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </div>
+        <div class="panel-body">
+            <vue-draggable
+                v-if="buttons && buttons.length >0"
+                v-model="buttons"
+                v-bind="draggableOptions"
+                class="list-group"
+                @start="isDragging = true"
+                @end="()=>{isDragging= false}"
             >
-              {{ rightsType.label }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-    </div>
-    <div class="panel-body">
-      <vue-draggable
-        v-if="buttons && buttons.length >0"
-        v-model="buttons"
-        v-bind="draggableOptions"
-        class="list-group"
-        @start="isDragging = true"
-        @end="()=>{isDragging= false}"
-      >
-        <div v-for="(button,i) in buttons" :key="button[buttonKey]+i" class="list-group-item">
-          <div class="actions-left">
-            {{ button.label }}
-          </div>
-          <el-button-group class="actions">
-            <el-button size="small" type="text" title="设置" icon="ibps-icon-cog" @click="settingButton(i)" />
-            <el-button size="small" type="text" title="删除" icon="el-icon-delete" @click="removeButton(i)" />
-            <el-button class="draggable" title="拖动排序" data-role="sort_choice" size="small" type="text" icon="ibps-icon-arrows" />
-          </el-button-group>
+                <div v-for="(button,i) in buttons" :key="button[buttonKey]+i" class="list-group-item">
+                    <div class="actions-left">
+                        {{ button.label }}
+                    </div>
+                    <el-button-group class="actions">
+                        <el-button size="small" type="text" title="设置" icon="ibps-icon-cog" @click="settingButton(i)" />
+                        <el-button size="small" type="text" title="删除" icon="el-icon-delete" @click="removeButton(i)" />
+                        <el-button class="draggable" title="拖动排序" data-role="sort_choice" size="small" type="text" icon="ibps-icon-arrows" />
+                    </el-button-group>
+                </div>
+            </vue-draggable>
+            <div v-else>
+                <el-alert
+                    :closable="false"
+                    :title="'未设置'+title"
+                    type="info"
+                    center
+                />
+            </div>
         </div>
-      </vue-draggable>
-      <div v-else>
-        <el-alert
-          :closable="false"
-          :title="'未设置'+title"
-          type="info"
-          center
+        <el-dialog
+            ref="editFormDialog"
+            :visible.sync="dialogVisible"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :title="title"
+            class="edit-dialog"
+            top="5vh"
+            width="60%"
+            append-to-body
+            @close="closeDialog"
+        >
+            <slot v-if="dialogVisible" :data.sync="editData" name="edit" />
+            <div slot="footer" class="el-dialog--center">
+                <ibps-toolbar
+                    :actions="toolbars"
+                    @action-event="handleActionEvent"
+                />
+            </div>
+        </el-dialog>
+        <rights-config
+            :visible="dialogRightsVisible"
+            title="权限配置"
+            @callback="handleRightsConfirm"
+            @close="visible => dialogRightsVisible = visible"
         />
-      </div>
-    </div>
-    <el-dialog
-      ref="editFormDialog"
-      :visible.sync="dialogVisible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :title="title"
-      class="edit-dialog"
-      top="5vh"
-      width="60%"
-      append-to-body
-      @close="closeDialog"
-    >
-      <slot v-if="dialogVisible" :data.sync="editData" name="edit" />
-      <div slot="footer" class="el-dialog--center">
-        <ibps-toolbar
-          :actions="toolbars"
-          @action-event="handleActionEvent"
+        <export-column
+            :visible="exportFieldDialogVisible"
+            :data="data"
+            @callback="handleExportColumn"
+            @close="(visible)=>exportFieldDialogVisible=visible"
         />
-      </div>
-    </el-dialog>
-    <rights-config
-      :visible="dialogRightsVisible"
-      title="权限配置"
-      @callback="handleRightsConfirm"
-      @close="visible => dialogRightsVisible = visible"
-    />
-    <export-column
-      :visible="exportFieldDialogVisible"
-      :data="data"
-      @callback="handleExportColumn"
-      @close="(visible)=>exportFieldDialogVisible=visible"
-    />
-  </div>
+    </div>
 </template>
 <script>
 import ActionUtils from '@/utils/action'
@@ -119,235 +119,233 @@ import ButtonsConstants from '@/business/platform/data/constants/buttons'
 import ExportColumn from './export-column'
 
 export default {
-  components: {
-    VueDraggable,
-    RightsConfig,
-    ExportColumn
-  },
-  props: {
-    title: {
-      type: String
-    },
-    prop: {
-      type: String
-    },
-    data: {
-      type: Object
-    },
-    callModule: {
-      type: String
-    },
-    template: { // 模版
-      type: Object,
-      default: () => {}
+    components: {
+        VueDraggable,
+        RightsConfig,
+        ExportColumn
     },
-    types: {
-      type: Array
+    props: {
+        title: {
+            type: String
+        },
+        prop: {
+            type: String
+        },
+        data: {
+            type: Object
+        },
+        callModule: {
+            type: String
+        },
+        template: { // 模版
+            type: Object,
+            default: () => {}
+        },
+        types: {
+            type: Array
+        },
+        defaultValue: { // 默认值
+            type: Object,
+            default: () => {
+                return {
+                    rights: [{ type: 'all' }]
+                }
+            }
+        }
     },
-    defaultValue: { // 默认值
-      type: Object,
-      default: () => {
+    data () {
         return {
-          rights: [{ type: 'all' }]
+            isDragging: false,
+            exportFieldDialogVisible: false,
+            draggableOptions: {
+                handle: '.draggable',
+                ghostClass: 'sortable-ghost',
+                distance: 1,
+                disabled: false,
+                animation: 200,
+                axis: 'y'
+            },
+            rightsTypes: rightsTypes,
+            buttonKey: 'button_type',
+            dialogVisible: false,
+            editData: {},
+            editIndex: -1,
+            dialogRightsVisible: false,
+            toolbars: [
+                { key: 'confirm' },
+                { key: 'cancel' }
+            ]
         }
-      }
-    }
-  },
-  data() {
-    return {
-      isDragging: false,
-      exportFieldDialogVisible: false,
-      draggableOptions: {
-        handle: '.draggable',
-        ghostClass: 'sortable-ghost',
-        distance: 1,
-        disabled: false,
-        animation: 200,
-        axis: 'y'
-      },
-      rightsTypes: rightsTypes,
-      buttonKey: 'button_type',
-      dialogVisible: false,
-      editData: {},
-      editIndex: -1,
-      dialogRightsVisible: false,
-      toolbars: [
-        { key: 'confirm' },
-        { key: 'cancel' }
-      ]
-    }
-  },
-  computed: {
-    buttons: {
-      get() {
-        return this.template[this.prop] || []
-      },
-      set(value) {
-        this.handleInput(value)
-      }
     },
-    functionButtons() {
-      const buttons = []
-      this.types.forEach(type => {
-        const button = ButtonsConstants[type]
-        if (!button) {
-          console.error('Undefined type:' + type)
-          return false
+    computed: {
+        buttons: {
+            get () {
+                return this.template[this.prop] || []
+            },
+            set (value) {
+                this.handleInput(value)
+            }
+        },
+        functionButtons () {
+            const buttons = []
+            this.types.forEach(type => {
+                const button = ButtonsConstants[type]
+                if (!button) {
+                    console.error('Undefined type:' + type)
+                    return false
+                }
+                button[this.buttonKey] = type
+                buttons.push(button)
+            })
+            return buttons
         }
-        button[this.buttonKey] = type
-        buttons.push(button)
-      })
-      return buttons
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'confirm':
-          this.handleConfirm()
-          break
-        case 'cancel':
-          this.closeDialog()
-          break
-        default:
-          break
-      }
-    },
-    // 添加按钮
-    addButton(button) {
-      if (button.button_type === 'export') {
-        this.exportFieldDialogVisible = true
-      }
-      const buttons = this.buttons
-      buttons.push({
-        label: button.label,
-        [this.buttonKey]: button[this.buttonKey]
-      })
-      this.handleInput(buttons)
-    },
-    // 设置按钮
-    settingButton(i) {
-      this.editData = defaultsDeep(JSON.parse(JSON.stringify(this.buttons[i])), this.defaultValue)
-      this.editIndex = i
-      this.dialogVisible = true
-    },
-    // 删除按钮
-    removeButton(i) {
-      this.buttons.splice(i, 1)
-      this.handleInput(this.buttons)
-    },
-    settingRights(type) {
-      if (this.buttons.length === 0) { return }
-      if (type === 'none' || type === 'all') {
-        const data = [{ type: type }]
-        this.setRightsData(data)
-      } else {
-        this.dialogRightsVisible = true
-      }
     },
-    handleRightsConfirm(data) {
-      if (data.length === 0) {
-        data = [{ type: 'none' }]
-      }
-      this.setRightsData(data)
-    },
-    setRightsData(data) {
-      const buttons = this.buttons.map((button) => {
-        button.rights = data
-        return button
-      })
-      this.handleInput(buttons)
-      ActionUtils.success('设置权限成功')
-    },
-    // 是否禁用
-    isDisabled(key) {
-      if (key === 'custom' || key === 'sefStartFlow' || !this.buttons) {
-        return
-      }
-      return !!this.buttons.find((button) => {
-        return button[this.buttonKey] === key
-      })
-    },
-    // 关闭当前窗口
-    closeDialog() {
-      this.dialogVisible = false
-    },
-    handleConfirm() {
-      const componentInstance = this.callModule === 'list' || this.callModule === 'dialog' || this.callModule === 'tree-edit' ? this.$refs.editFormDialog.$slots.default[0].componentInstance : this.$refs.editFormDialog.$slots.default[0].children[0].componentInstance
-      componentInstance.getFormData((data) => {
-        if (!data) {
-          ActionUtils.saveErrorMessage()
-          return
+    methods: {
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'confirm':
+                    this.handleConfirm()
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        // 添加按钮
+        addButton (button) {
+            if (button.button_type === 'export') {
+                this.exportFieldDialogVisible = true
+            }
+            const buttons = this.buttons
+            buttons.push({
+                label: button.label,
+                [this.buttonKey]: button[this.buttonKey]
+            })
+            this.handleInput(buttons)
+        },
+        // 设置按钮
+        settingButton (i) {
+            this.editData = defaultsDeep(JSON.parse(JSON.stringify(this.buttons[i])), this.defaultValue)
+            this.editIndex = i
+            this.dialogVisible = true
+        },
+        // 删除按钮
+        removeButton (i) {
+            this.buttons.splice(i, 1)
+            this.handleInput(this.buttons)
+        },
+        settingRights (type) {
+            if (this.buttons.length === 0) { return }
+            if (type === 'none' || type === 'all') {
+                const data = [{ type: type }]
+                this.setRightsData(data)
+            } else {
+                this.dialogRightsVisible = true
+            }
+        },
+        handleRightsConfirm (data) {
+            if (data.length === 0) {
+                data = [{ type: 'none' }]
+            }
+            this.setRightsData(data)
+        },
+        setRightsData (data) {
+            const buttons = this.buttons.map((button) => {
+                button.rights = data
+                return button
+            })
+            this.handleInput(buttons)
+            ActionUtils.success('设置权限成功')
+        },
+        // 是否禁用
+        isDisabled (key) {
+            if (key === 'custom' || key === 'sefStartFlow' || !this.buttons) {
+                return
+            }
+            return !!this.buttons.find((button) => {
+                return button[this.buttonKey] === key
+            })
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.dialogVisible = false
+        },
+        handleConfirm () {
+            const componentInstance = this.callModule === 'list' || this.callModule === 'dialog' || this.callModule === 'tree-edit' ? this.$refs.editFormDialog.$slots.default[0].componentInstance : this.$refs.editFormDialog.$slots.default[0].children[0].componentInstance
+            componentInstance.getFormData((data) => {
+                if (!data) {
+                    ActionUtils.saveErrorMessage()
+                    return
+                }
+                this.buttons.splice(this.editIndex, 1, data)
+                this.handleInput(this.buttons)
+                this.closeDialog()
+            })
+        },
+        handleInput (value) {
+            this.$emit('input', this.prop, value)
+        },
+        handleExportColumn (data) {
+            this.$emit('callbackField', 'export_columns', data)
         }
-        this.buttons.splice(this.editIndex, 1, data)
-        this.handleInput(this.buttons)
-        this.closeDialog()
-      })
-    },
-    handleInput(value) {
-      this.$emit('input', this.prop, value)
-    },
-    handleExportColumn(data) {
-      this.$emit('callbackField', 'export_columns', data)
     }
-  }
 }
 </script>
-
 <style lang="scss" scoped>
-  .list-group {
-    display: flex;
-    flex-direction: column;
-    padding-left: 0;
-    margin-bottom: 0;
-  .list-group-item {
-    position: relative;
-    display: block;
-    padding: 5px;
-    margin: 5px;
-    border: 1px solid #ddd;
-    .actions-left{
-      height: 24px;
-      line-height: 24px;
-      margin-left: 5px;
-    }
+    .list-group {
+        display: flex;
+        flex-direction: column;
+        padding-left: 0;
+        margin-bottom: 0;
+        .list-group-item {
+            position: relative;
+            display: block;
+            padding: 5px;
+            margin: 5px;
+            border: 1px solid #ddd;
+            .actions-left{
+                height: 24px;
+                line-height: 24px;
+                margin-left: 5px;
+            }
 
-    .actions {
-      position: absolute;
-      width: 60px;
-      top: 2px;
-      right: 0;
-      line-height: 20px;
-      padding-left: 1px;
-      .el-button {
-        padding-right: 4px;
-        // margin-right: 2px;
-      }
-      [data-role="sort_choice"]{
-          cursor: move
-      }
-    }
-  }
+            .actions {
+                position: absolute;
+                width: 60px;
+                top: 2px;
+                right: 0;
+                line-height: 20px;
+                padding-left: 1px;
+                .el-button {
+                    padding-right: 4px;
+                    // margin-right: 2px;
+                }
+                [data-role="sort_choice"]{
+                    cursor: move
+                }
+            }
+        }
 
-  .flip-list-move {
-    transition: transform 0.5s;
-  }
-  .no-move {
-    transition: transform 0s;
-  }
-  .sortable-ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-  }
-}
-  .more-actions {
-    text-align: right;
-    margin-top: 5px;
-    margin-right:10px;
-    .el-button {
-      padding-right: 0;
-      margin-right: 0;
+        .flip-list-move {
+            transition: transform 0.5s;
+        }
+        .no-move {
+            transition: transform 0s;
+        }
+        .sortable-ghost {
+            opacity: 0.5;
+            background: #c8ebfb;
+        }
+    }
+    .more-actions {
+        text-align: right;
+        margin-top: 5px;
+        margin-right:10px;
+        .el-button {
+            padding-right: 0;
+            margin-right: 0;
+        }
     }
-  }
-
 </style>

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

@@ -271,8 +271,8 @@ export default {
         label: field.label,
         name: field.name
       }
-      if (this.prop === 'sort_columns' && columns.length >= 2) {
-        ActionUtils.warning('排序字段不能超过2个字段')
+      if (this.prop === 'sort_columns' && columns.length >= 3) {
+        ActionUtils.warning('排序字段不能超过3个字段')
         return
       }
       if (this.prop === 'sort_columns') {

src/business/platform/data/templatebuilder/right-aside/constants/editor-column.js

@@ -1,136 +1,180 @@
-export const queryFieldTypeOptions = [{
-  value: 'text',
-  label: '单行文本'
-}, {
-  value: 'hidden',
-  label: '隐藏域'
-}, {
-  value: 'number',
-  label: '数字'
-}, {
-  value: 'numberRange',
-  label: '数字范围'
-}, {
-  value: 'datePicker',
-  label: '日期控件'
-}, {
-  value: 'dateRange',
-  label: '日期范围'
-}, {
-  value: 'select',
-  label: '下拉框'
-}, {
-  value: 'dictionary',
-  label: '数据字典'
-}, {
-  value: 'selector',
-  label: '选择器'
-}, {
-  value: 'customDialog',
-  label: '自定义对话框'
-}
-// {
-//   value: 'linkdata',
-//   label: '关联数据'
-// }
+export const queryFieldTypeOptions = [
+    {
+        value: 'text',
+        label: '单行文本'
+    },
+    {
+        value: 'hidden',
+        label: '隐藏域'
+    },
+    {
+        value: 'number',
+        label: '数字'
+    },
+    {
+        value: 'numberRange',
+        label: '数字范围'
+    },
+    {
+        value: 'datePicker',
+        label: '日期控件'
+    },
+    {
+        value: 'dateRange',
+        label: '日期范围'
+    },
+    {
+        value: 'select',
+        label: '下拉框'
+    },
+    {
+        value: 'dictionary',
+        label: '数据字典'
+    },
+    {
+        value: 'selector',
+        label: '选择器'
+    },
+    {
+        value: 'customDialog',
+        label: '自定义对话框'
+    }
+    // {
+    //   value: 'linkdata',
+    //   label: '关联数据'
+    // }
 ]
 
-export const displayFieldTypeOptions = [{
-  value: 'text',
-  label: '原样输出'
-}, {
-  value: 'hidden',
-  label: '隐藏'
-}, {
-  value: 'datePicker',
-  label: '日期格式'
-}, {
-  value: 'number',
-  label: '数字格式'
-}, {
-  value: 'select',
-  label: '枚举值格式'
-}, {
-  value: 'editor',
-  label: '富文本格式'
-}, {
-  value: 'dictionary',
-  label: '数据字典格式'
-}, {
-  value: 'selector',
-  label: '选择器格式'
-}, {
-  value: 'customDialog',
-  label: '自定义对话框'
-}, {
-  value: 'attachment',
-  label: '附件格式'
-}
-// {
-  //   value: 'linkdata',
-  //   label: '关联数据'
-  // }
+export const displayFieldTypeOptions = [
+    {
+        value: 'text',
+        label: '原样输出'
+    },
+    {
+        value: 'textarea',
+        label: '多行文本'
+    },
+    {
+        value: 'hidden',
+        label: '隐藏'
+    },
+    {
+        value: 'datePicker',
+        label: '日期格式'
+    },
+    {
+        value: 'number',
+        label: '数字格式'
+    },
+    {
+        value: 'select',
+        label: '枚举值格式'
+    },
+    {
+        value: 'editor',
+        label: '富文本格式'
+    },
+    {
+        value: 'dictionary',
+        label: '数据字典格式'
+    },
+    {
+        value: 'selector',
+        label: '选择器格式'
+    },
+    {
+        value: 'customDialog',
+        label: '自定义对话框'
+    },
+    {
+        value: 'attachment',
+        label: '附件格式'
+    }
+    // {
+    //   value: 'linkdata',
+    //   label: '关联数据'
+    // }
 ]
 
-export const resultFieldTypeOptions = [{
-  value: 'orig',
-  label: '原样输出'
-}, {
-  value: 'datePicker',
-  label: '日期格式'
-}, {
-  value: 'select',
-  label: '枚举值格式'
-}, {
-  value: 'dictionary',
-  label: '数据字典格式'
-}, {
-  value: 'selector',
-  label: '选择器格式'
-}, {
-  value: 'attachment',
-  label: '附件格式'
-}
-// {
-  //   value: 'linkdata',
-  //   label: '关联数据'
-  // }
+export const resultFieldTypeOptions = [
+    {
+        value: 'orig',
+        label: '原样输出'
+    },
+    {
+        value: 'datePicker',
+        label: '日期格式'
+    },
+    {
+        value: 'select',
+        label: '枚举值格式'
+    },
+    {
+        value: 'dictionary',
+        label: '数据字典格式'
+    },
+    {
+        value: 'selector',
+        label: '选择器格式'
+    },
+    {
+        value: 'attachment',
+        label: '附件格式'
+    }
+    // {
+    //   value: 'linkdata',
+    //   label: '关联数据'
+    // }
 ]
 
-export const numberTypeOptions = [{
-  value: 'orig',
-  label: '原样输出'
-}, {
-  value: 'integer',
-  label: '整型'
-}, {
-  value: 'number',
-  label: '数字'
-}, {
-  value: 'currency',
-  label: '货币'
-}]
-export const numberFormatOptions = [{
-  value: 'orig',
-  label: '原样输出'
-}, {
-  value: 'thousands',
-  label: '千分位'
-}, {
-  value: 'capital',
-  label: '人民币大写'
-}, {
-  value: 'percent',
-  label: '百分比'
-}]
+export const numberTypeOptions = [
+    {
+        value: 'orig',
+        label: '原样输出'
+    },
+    {
+        value: 'integer',
+        label: '整型'
+    },
+    {
+        value: 'number',
+        label: '数字'
+    },
+    {
+        value: 'currency',
+        label: '货币'
+    }
+]
+export const numberFormatOptions = [
+    {
+        value: 'orig',
+        label: '原样输出'
+    },
+    {
+        value: 'thousands',
+        label: '千分位'
+    },
+    {
+        value: 'capital',
+        label: '人民币大写'
+    },
+    {
+        value: 'percent',
+        label: '百分比'
+    }
+]
 
-export const storageFormatOptions = [{
-  value: 'json',
-  label: 'json'
-}, {
-  value: 'id',
-  label: '仅ID'
-}, {
-  value: 'bind',
-  label: '绑定ID'
-}]
+export const storageFormatOptions = [
+    {
+        value: 'json',
+        label: 'json'
+    },
+    {
+        value: 'id',
+        label: '仅ID'
+    },
+    {
+        value: 'bind',
+        label: '绑定ID'
+    }
+]

src/business/platform/data/templatebuilder/right-aside/editors/filter-condition.vue

@@ -1,248 +1,248 @@
 <template>
-  <el-form
-    ref="form"
-    :model="formData"
-    :rules="rules"
-    style="height:400px;"
-    label-width="120px"
-    size="mini"
-    @submit.native.prevent
-  >
-    <el-form-item label="过滤名称" prop="label">
-      <el-input v-model="formData.label" placeholder="过滤名称" />
-    </el-form-item>
-    <!-- <el-form-item label="权限" prop="rights">
-      <rights-selector v-model="formData.rights" />
-    </el-form-item> -->
-    <el-form-item style="margin-bottom: 5px;">
-      <div slot="label">过滤规则：<ibps-help content="设置为空时不会出现为null数据；设置为null时不会出现为空数据。" /></div>
-    </el-form-item>
-   <el-form-item prop="rules" label-width="0">
-      <ibps-query-builder
-        ref="queryBuilder"
-        :value="formData.filter"
-        :filters="filters"
-        :conditions="conditions"
-        :control-types="controlTypes"
-      />
-    </el-form-item>
-  </el-form>
+    <el-form
+        ref="form"
+        :model="formData"
+        :rules="rules"
+        style="height:400px;"
+        label-width="120px"
+        size="mini"
+        @submit.native.prevent
+    >
+        <el-form-item label="过滤名称" prop="label">
+            <el-input v-model="formData.label" placeholder="过滤名称" />
+        </el-form-item>
+        <!-- <el-form-item label="权限" prop="rights">
+            <rights-selector v-model="formData.rights" />
+        </el-form-item> -->
+        <el-form-item style="margin-bottom: 5px;">
+            <div slot="label">过滤规则：<ibps-help content="设置为空时不会出现为null数据；设置为null时不会出现为空数据。" /></div>
+        </el-form-item>
+        <el-form-item prop="rules" label-width="0">
+            <ibps-query-builder
+                ref="queryBuilder"
+                :value="formData.filter"
+                :filters="filters"
+                :conditions="conditions"
+                :control-types="controlTypes"
+            />
+        </el-form-item>
+    </el-form>
 </template>
 <script>
 // import RightsSelector from '@/business/platform/rights/config/selector'
 import IbpsQueryBuilder from '@/components/ibps-query-builder'
 
 export default {
-  components: {
-    // RightsSelector,
-    IbpsQueryBuilder
-  },
-  props: {
-    data: {
-      type: Object
+    components: {
+        // RightsSelector,
+        IbpsQueryBuilder
     },
-    fields: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      conditions: {
-        'AND': '并且',
-        'OR': '或者'
-      },
-      controlTypes: {
-        'text': '单行文本',
-        'number': '数字',
-        'radio': '单选框',
-        'checkbox': '多选框',
-        'select': '下拉框',
-        'datePicker': '日期控件',
-        'dictionary': '数据字典',
-        'selector': '选择器',
-        'customDialog': '自定义对话框',
-        'linkdata': '关联数据'
-      },
-      formName: 'form',
-      formData: {
-        label: '默认条件',
-        key: '',
-        rights: [],
-        filter: {}
-      },
-      rules: {
-        label: [{ required: true, message: this.$t('validate.required') }],
-        filter: [{ required: true, message: this.$t('validate.required') }]
-      }
-    }
-  },
-  computed: {
-    filters() {
-      const filters = []
-      if (this.fields.length === 0) return []
-      this.fields.forEach(field => {
-        // // 屏蔽附件/签名
-        if (field.field_type !== 'attachment' && field.field_type !== 'signature') {
-          filters.push(this.getFilter(field))
+    props: {
+        data: {
+            type: Object
+        },
+        fields: {
+            type: Array,
+            default: () => []
         }
-      })
-      return filters
-    }
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val) {
-          this.formData = JSON.parse(JSON.stringify(val))
-          console.log(val.filter)
+    },
+    data () {
+        return {
+            conditions: {
+                'AND': '并且',
+                'OR': '或者'
+            },
+            controlTypes: {
+                'text': '单行文本',
+                'number': '数字',
+                'radio': '单选框',
+                'checkbox': '多选框',
+                'select': '下拉框',
+                'datePicker': '日期控件',
+                'dictionary': '数据字典',
+                'selector': '选择器',
+                'customDialog': '自定义对话框',
+                'linkdata': '关联数据'
+            },
+            formName: 'form',
+            formData: {
+                label: '默认条件',
+                key: '',
+                rights: [],
+                filter: {}
+            },
+            rules: {
+                label: [{ required: true, message: this.$t('validate.required') }],
+                filter: [{ required: true, message: this.$t('validate.required') }]
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getFilter(field) {
-      const filter = {
-        id: field.name,
-        label: field.label,
-        field: field.name
-      }
-      let type = this.getType(field.type)
-      const options = field['field_options'] ? field['field_options']['options'] || [] : []
-      const values = {}
-      if (type === 'date' && field.field_type !== 'datePicker') {
-        field.field_type = 'datePicker'
-      } else if (type === 'number') {
-        field.field_type = 'number'
-      }
+    },
+    computed: {
+        filters () {
+            const filters = []
+            if (this.fields.length === 0) return []
+            this.fields.forEach(field => {
+                // // 屏蔽附件/签名
+                if (field.field_type !== 'attachment' && field.field_type !== 'signature') {
+                    filters.push(this.getFilter(field))
+                }
+            })
+            return filters
+        }
+    },
+    watch: {
+        data: {
+            handler (val) {
+                if (val) {
+                    this.formData = JSON.parse(JSON.stringify(val))
+                    console.log(val.filter)
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        getFilter (field) {
+            const filter = {
+                id: field.name,
+                label: field.label,
+                field: field.name
+            }
+            let type = this.getType(field.type)
+            const options = field['field_options'] ? field['field_options']['options'] || [] : []
+            const values = {}
+            if (type === 'date' && field.field_type !== 'datePicker') {
+                field.field_type = 'datePicker'
+            } else if (type === 'number') {
+                field.field_type = 'number'
+            }
 
-      let input = 'text'
-      switch (field.field_type) { // 字段控件类型
-        case 'text':
-        case 'textarea':
-          type = 'string'
-          break
-        case 'editor':
+            let input = 'text'
+            switch (field.field_type) { // 字段控件类型
+                case 'text':
+                case 'textarea':
+                    type = 'string'
+                    break
+                case 'editor':
 
-          input = 'text'
-          filter.operators = [
-            'contains',
-            'not_contains',
-            'is_empty',
-            'is_not_empty',
-            'is_null',
-            'is_not_null']
-          break
-        case 'number':
-          input = 'number'
-          filter.operators = [
-            'equal', 'not_equal',
-            'less', 'less_or_equal',
-            'greater', 'greater_or_equal',
-            'between', 'not_between',
-            'is_null', 'is_not_null']
-          break
-        case 'datePicker':
-          type = 'date'
-          input = field.field_options && field.field_options.datefmt !== 'custom' ? field.field_options.datefmt || 'datetime' : 'datetime'
-          filter.operators = [
-            'equal',
-            'not_equal',
-            'less',
-            'less_or_equal',
-            'between',
-            'not_between',
-            'greater',
-            'greater_or_equal',
-            'is_null',
-            'is_not_null']
+                    input = 'text'
+                    filter.operators = [
+                        'contains',
+                        'not_contains',
+                        'is_empty',
+                        'is_not_empty',
+                        'is_null',
+                        'is_not_null']
+                    break
+                case 'number':
+                    input = 'number'
+                    filter.operators = [
+                        'equal', 'not_equal',
+                        'less', 'less_or_equal',
+                        'greater', 'greater_or_equal',
+                        'between', 'not_between',
+                        'is_null', 'is_not_null']
+                    break
+                case 'datePicker':
+                    type = 'date'
+                    input = field.field_options && field.field_options.datefmt !== 'custom' ? field.field_options.datefmt || 'datetime' : 'datetime'
+                    filter.operators = [
+                        'equal',
+                        'not_equal',
+                        'less',
+                        'less_or_equal',
+                        'between',
+                        'not_between',
+                        'greater',
+                        'greater_or_equal',
+                        'is_null',
+                        'is_not_null']
 
-          break
-        case 'radio':
-        case 'checkbox':
-        case 'select':
-          filter.operators = ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
-          options.forEach(option => {
-            values[option.val] = option.label
-          })
-          filter.values = values
-          break
-        case 'dictionary':
-          type = 'string'
-          filter.operators = [
-            'equal',
-            'not_equal',
-            'in',
-            'not_in',
-            'is_empty',
-            'is_not_empty',
-            'is_null',
-            'is_not_null']
-          break
-        case 'selector':
-          type = 'string'
-          filter.operators = [
-            'equal',
-            'not_equal',
-            'contains',
-            'not_contains',
-            'in',
-            'not_in',
-            'is_empty',
-            'is_not_empty',
-            'is_null',
-            'is_not_null'
-          ]
-          break
-      }
-      filter.input = input
-      filter.type = type
+                    break
+                case 'radio':
+                case 'checkbox':
+                case 'select':
+                    filter.operators = ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
+                    options.forEach(option => {
+                        values[option.val] = option.label
+                    })
+                    filter.values = values
+                    break
+                case 'dictionary':
+                    type = 'string'
+                    filter.operators = [
+                        'equal',
+                        'not_equal',
+                        'in',
+                        'not_in',
+                        'is_empty',
+                        'is_not_empty',
+                        'is_null',
+                        'is_not_null']
+                    break
+                case 'selector':
+                    type = 'string'
+                    filter.operators = [
+                        'equal',
+                        'not_equal',
+                        'contains',
+                        'not_contains',
+                        'in',
+                        'not_in',
+                        'is_empty',
+                        'is_not_empty',
+                        'is_null',
+                        'is_not_null'
+                    ]
+                    break
+            }
+            filter.input = input
+            filter.type = type
 
-      return filter
-    },
-    getType: function(dataType) {
-      var type = 'string'
-      switch (dataType) { // 字段数据类型
-        case 'number':
-          type = 'number'
-          break
-        case 'date':
-          type = 'date'
-          break
-        default:
-          type = 'string'
-      }
-      return type
-    },
-    // 获取表单数据
-    getFormData(callback) {
-      this.$refs[this.formName].validate((valid) => {
-        if (valid) {
-          // TODO: 验证过滤条件
-          const data = this.$refs.queryBuilder.getData()
-          if (!data || this.$utils.isEmpty(data.rules)) {
-            this.$message({
-              message: '请设置过滤条件',
-              type: 'warning'
-            })
-            return
-          }
-          const hasErrors = this.$refs.queryBuilder.getErrors()
-          if (hasErrors) {
-            this.$message({
-              message: '请检查过滤条件是否填写正确',
-              type: 'warning'
+            return filter
+        },
+        getType: function (dataType) {
+            var type = 'string'
+            switch (dataType) { // 字段数据类型
+                case 'number':
+                    type = 'number'
+                    break
+                case 'date':
+                    type = 'date'
+                    break
+                default:
+                    type = 'string'
+            }
+            return type
+        },
+        // 获取表单数据
+        getFormData (callback) {
+            this.$refs[this.formName].validate((valid) => {
+                if (valid) {
+                    // TODO: 验证过滤条件
+                    const data = this.$refs.queryBuilder.getData()
+                    if (!data || this.$utils.isEmpty(data.rules)) {
+                        this.$message({
+                            message: '请设置过滤条件',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    const hasErrors = this.$refs.queryBuilder.getErrors()
+                    if (hasErrors) {
+                        this.$message({
+                            message: '请检查过滤条件是否填写正确',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    this.formData.filter = data
+                    callback(this.formData)
+                } else {
+                    callback()
+                }
             })
-            return
-          }
-          this.formData.filter = data
-          callback(this.formData)
-        } else {
-          callback()
         }
-      })
     }
-  }
 }
 </script>