表单、模板分类设置增加筛选

src/business/platform/cat/type/setting-type.vue

@@ -1,39 +1,41 @@
 <template>
-  <el-dialog
-    :title="title"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    class="dialog"
-    :class="className"
-    @close="closeDialog"
-    @open="handleSelectOptions(categoryKey)"
-  >
-    <el-form
-      ref="settingTypeForm"
-      v-loading="dialogLoading"
-      :model="formModel"
-      :element-loading-text="$t('common.loading')"
-      :label-width="formLabelWidth"
-      @submit.native.prevent
+    <el-dialog
+        :title="title"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        append-to-body
+        class="dialog"
+        :class="className"
+        @close="closeDialog"
+        @open="handleSelectOptions(categoryKey)"
     >
-      <el-form-item label="设置分类">
-        <ibps-type-select
-          ref="ibpsTypeSelect"
-          v-model="formModel.typeId"
-          :category-key="categoryKey"
-          clearable
-        />
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="el-dialog--center">
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
-    </div>
-  </el-dialog>
+        <el-form
+            ref="settingTypeForm"
+            v-loading="dialogLoading"
+            :model="formModel"
+            :element-loading-text="$t('common.loading')"
+            :label-width="formLabelWidth"
+            @submit.native.prevent
+        >
+            <el-form-item label="设置分类">
+                <ibps-type-select
+                    ref="ibpsTypeSelect"
+                    v-model="formModel.typeId"
+                    :category-key="categoryKey"
+                    clearable
+                    filterable
+                    filter-label="name"
+                />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar
+                :actions="toolbars"
+                @action-event="handleActionEvent"
+            />
+        </div>
+    </el-dialog>
 </template>
 
 <script>
@@ -41,88 +43,88 @@ import ActionUtils from '@/utils/action'
 import IbpsTypeSelect from '@/business/platform/cat/type/select'
 
 export default {
-  components: {
-    IbpsTypeSelect
-  },
-  props: {
-    className: String,
-    visible: {
-      type: Boolean,
-      default: false
+    components: {
+        IbpsTypeSelect
     },
-    title: {
-      type: String,
-      default: '设置分类'
+    props: {
+        className: String,
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: '设置分类'
+        },
+        categoryKey: String
     },
-    categoryKey: String
-  },
-  data() {
-    return {
-      formName: 'settingTypeForm',
-      formLabelWidth: '120px',
-      dialogVisible: this.visible,
-      dialogLoading: false,
-      formModel: {
-        typeId: ''
-      },
-      rules: {},
-      toolbars: [
-        { key: 'save' },
-        { key: 'cancel' }
-      ]
-    }
-  },
-  computed: {
-    formId() {
-      return this.id
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        if (this.visible) this.formModel.typeId = []
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'save':
-          this.handleSave()
-          break
-        case 'cancel':
-          this.closeDialog()
-          break
-        default:
-          break
-      }
-    },
-    // 保存数据
-    handleSave() {
-      this.$refs[this.formName].validate(valid => {
-        if (valid) {
-          this.saveData()
-        } else {
-          ActionUtils.saveErrorMessage()
+    data () {
+        return {
+            formName: 'settingTypeForm',
+            formLabelWidth: '120px',
+            dialogVisible: this.visible,
+            dialogLoading: false,
+            formModel: {
+                typeId: ''
+            },
+            rules: {},
+            toolbars: [
+                { key: 'save' },
+                { key: 'cancel' }
+            ]
         }
-      })
     },
-    // 提交保存数据
-    saveData() {
-      this.$emit('save', this.formModel.typeId)
+    computed: {
+        formId () {
+            return this.id
+        }
     },
-    // 关闭当前窗口
-    closeDialog() {
-      this.$emit('close', false)
-      this.$refs[this.formName].resetFields()
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+                if (this.visible) this.formModel.typeId = []
+            },
+            immediate: true
+        }
     },
-    handleSelectOptions(params) {
-      if (this.$refs['ibpsTypeSelect']) {
-        this.$refs['ibpsTypeSelect'].loadTreeData(params)
-      }
+    methods: {
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'save':
+                    this.handleSave()
+                    break
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                default:
+                    break
+            }
+        },
+        // 保存数据
+        handleSave () {
+            this.$refs[this.formName].validate(valid => {
+                if (valid) {
+                    this.saveData()
+                } else {
+                    ActionUtils.saveErrorMessage()
+                }
+            })
+        },
+        // 提交保存数据
+        saveData () {
+            this.$emit('save', this.formModel.typeId)
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.$emit('close', false)
+            this.$refs[this.formName].resetFields()
+        },
+        handleSelectOptions (params) {
+            if (this.$refs['ibpsTypeSelect']) {
+                this.$refs['ibpsTypeSelect'].loadTreeData(params)
+            }
+        }
     }
-  }
 }
 </script>

src/business/platform/data/templatebuilder/right-aside/propertys/index.vue

@@ -1,178 +1,185 @@
 <template>
-  <div class="template-property">
-    <el-form
-      ref="dataTemplate"
-      :model="dataTemplate"
-      :rules="rules"
-      size="mini"
-      label-width="80px"
-      @submit.native.prevent
-    >
-      <div class="panel panel-default">
-        <div class="panel-heading">模版属性</div>
-        <div class="panel-body">
-          <el-form-item label="模版标题" prop="name">
-            <el-input
-              v-model="dataTemplate.name"
-              v-pinyin="{vm:dataTemplate}"
-              placeholder="模版标题"
-              :maxlength="64"
-              @input="(val)=>handleInput('name',val)"
-            />
-          </el-form-item>
-          <el-form-item label="模版key" prop="key">
-            <el-input
-              v-model="dataTemplate.key"
-              placeholder="模版key"
-              :maxlength="64"
-              @input="(val)=>handleInput('key',val)"
-            />
-          </el-form-item>
-          <el-form-item label="模版分类" prop="typeId">
-            <ibps-type-select
-              v-model="dataTemplate.typeId"
-              category-key="BO_TYPE"
-              clearable
-              @input="(val)=>handleInput('typeId',val)"
-            />
-          </el-form-item>
-          <el-form-item label="模版类型" prop="type">
-            <el-select
-              v-if="dataTemplate.composeType!=='treeForm'"
-              v-model="dataTemplate.type"
-              style="width:100%;"
-              @change="(val)=>handleInput('type',val)"
-            >
-              <el-option
-                v-for="option in templateTypeOptions"
-                :key="option.value"
-                :value="option.value"
-                :label="option.label"
-              />
-            </el-select>
-            <el-select
-              v-else
-              v-model="dataTemplate.type"
-              style="width:100%;"
-              @change="(val)=>handleInput('type',val)"
-            >
-              <el-option
-                v-for="option in options"
-                :key="option.value"
-                :value="option.value"
-                :label="option.label"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="dataTemplate.type !== 'valueSource'" label="展示形式" prop="showType">
-            <el-select
-              v-model="dataTemplate.showType"
-              style="width:100%;"
-              @change="(val)=>handleInput('showType',val)"
-            >
-              <el-option
-                v-for="option in showTypeOptions"
-                :key="option.value"
-                :value="option.value"
-                :label="option.label"
-              />
-            </el-select>
-          </el-form-item>
+    <div class="template-property">
+        <el-form
+            ref="dataTemplate"
+            :model="dataTemplate"
+            :rules="rules"
+            size="mini"
+            label-width="80px"
+            @submit.native.prevent
+        >
+            <div class="panel panel-default">
+                <div class="panel-heading">模版属性</div>
+                <div class="panel-body">
+                    <el-form-item label="模版标题" prop="name">
+                        <el-input
+                            v-model="dataTemplate.name"
+                            v-pinyin="{vm:dataTemplate}"
+                            placeholder="模版标题"
+                            :maxlength="64"
+                            @input="(val)=>handleInput('name',val)"
+                        />
+                    </el-form-item>
+                    <el-form-item label="模版key" prop="key">
+                        <el-input
+                            v-model="dataTemplate.key"
+                            placeholder="模版key"
+                            :maxlength="64"
+                            @input="(val)=>handleInput('key',val)"
+                        />
+                    </el-form-item>
+                    <el-form-item label="模版分类" prop="typeId">
+                        <ibps-type-select
+                            v-model="dataTemplate.typeId"
+                            category-key="BO_TYPE"
+                            clearable
+                            filterable
+                            filter-label="name"
+                            @input="(val)=>handleInput('typeId',val)"
+                        />
+                    </el-form-item>
+                    <el-form-item label="模版类型" prop="type">
+                        <el-select
+                            v-if="dataTemplate.composeType!=='treeForm'"
+                            v-model="dataTemplate.type"
+                            style="width:100%;"
+                            @change="(val)=>handleInput('type',val)"
+                        >
+                            <el-option
+                                v-for="option in templateTypeOptions"
+                                :key="option.value"
+                                :value="option.value"
+                                :label="option.label"
+                            />
+                        </el-select>
+                        <el-select
+                            v-else
+                            v-model="dataTemplate.type"
+                            style="width:100%;"
+                            @change="(val)=>handleInput('type',val)"
+                        >
+                            <el-option
+                                v-for="option in options"
+                                :key="option.value"
+                                :value="option.value"
+                                :label="option.label"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="dataTemplate.type !== 'valueSource'" label="展示形式" prop="showType">
+                        <el-select
+                            v-model="dataTemplate.showType"
+                            style="width:100%;"
+                            @change="(val)=>handleInput('showType',val)"
+                        >
+                            <el-option
+                                v-for="option in showTypeOptions"
+                                :key="option.value"
+                                :value="option.value"
+                                :label="option.label"
+                            />
+                        </el-select>
+                    </el-form-item>
 
-          <el-form-item v-if="dataTemplate.type !== 'valueSource' && dataTemplate.showType === 'compose'" label="组合形式:" prop="composeType">
-            <el-select
-              v-model="dataTemplate.composeType"
-              style="width:100%;"
-              @change="(val)=>handleInput('composeType',val)"
-            >
-              <el-option
-                v-for="option in composeTypeOptions"
-                :key="option.value"
-                :value="option.value"
-                :label="option.label"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="数据集" prop="datasetKey">
-            <dataset-selector
-              v-model="dataTemplate.datasetKey"
-              value-key="key"
-              @change="changeDataset"
-            />
-          </el-form-item>
-          <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="唯一字段" prop="unique">
-            <el-select
-              v-if="datasetType!=='thirdparty'"
-              v-model="dataTemplate.unique"
-              style="width:100%;"
-              @change="(val)=>handleInput('unique',val)"
-            >
-              <el-option
-                v-for="field in fields"
-                :key="field.name"
-                :value="field.name"
-                :label="field.label"
-              />
-            </el-select>
-            <el-input v-else v-model="dataTemplate.unique" @input="(val)=>handleInput('typeId',val)" />
-          </el-form-item>
-        </div>
-      </div>
-      <!--接口配置 -->
-      <!-- <div v-if="datasetType=='thirdparty'" class="panel panel-default">
-        <div class="panel-heading">第三方接口数据配置</div>
-        <div class="panel-body">
-          <el-button style="width:100%;" type="primary" icon="ibps-icon-file-code-o" @click="thirdpartyConfigDialogVisible=true">第三方接口数据配置</el-button>
-        </div>
-      </div> -->
-      <!-- 扩展属性-->
-      <div v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" class="panel panel-default">
-        <div class="panel-heading">扩展属性</div>
-        <div class="panel-body">
-          <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="绑定表单" prop="form">
-            <form-def-selector
-              v-model="formKey"
-              :data-template-key="dataTemplate.key"
-              :rights-type="rightsType"
-              type="dataTemplate"
-              :is-save="isSave"
-              :value-key="'key'"
-              :toolbar="formToolbar"
-            />
-          </el-form-item>
-          <el-form-item label="打印模版" prop="formPrint">
-            <form-print-selector
-              v-model="dataTemplate.attrs.print_id"
-              :form-key="formKey"
-              @input="(val)=>handleAttrs('print_id',val)"
-            />
-          </el-form-item>
-        </div>
-      </div>
-      <div class="panel panel-default">
-        <div class="panel-heading">模版脚本</div>
-        <div class="panel-body">
-          <el-button style="width:100%;" type="primary" icon="ibps-icon-file-code-o" @click="editTemplateScript('pc')">模版脚本</el-button>
-          <!-- <el-button style="width:100%;margin:16px 0 0 0;" type="primary" icon="ibps-icon-file-code-o" @click="editTemplateScript('mobile')">移动端模版脚本</el-button> -->
-          <template-script
-            :visible="dialogScriptVisible"
-            :title="scriptTitle"
-            :data="script"
-            :show-type="dataTemplate.showType"
-            @callback="handleDialogScript"
-            @close="visible => dialogScriptVisible = visible"
-          />
-        </div>
-      </div>
-    </el-form>
-    <thirdparty-config
-      :visible="thirdpartyConfigDialogVisible"
-      :datasets="data.datasets"
-      :data="dataTemplate.attrs.config"
-      @callback="handleThirdpartyConfigSettingField"
-      @close="visible => settingFieldDialogVisible = visible"
-    />
-  </div>
+                    <el-form-item v-if="dataTemplate.type !== 'valueSource' && dataTemplate.showType === 'compose'" label="组合形式:" prop="composeType">
+                        <el-select
+                            v-model="dataTemplate.composeType"
+                            style="width:100%;"
+                            @change="(val)=>handleInput('composeType',val)"
+                        >
+                            <el-option
+                                v-for="option in composeTypeOptions"
+                                :key="option.value"
+                                :value="option.value"
+                                :label="option.label"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="数据集" prop="datasetKey">
+                        <dataset-selector
+                            v-model="dataTemplate.datasetKey"
+                            value-key="key"
+                            @change="changeDataset"
+                        />
+                    </el-form-item>
+                    <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="唯一字段" prop="unique">
+                        <el-select
+                            v-if="datasetType!=='thirdparty'"
+                            v-model="dataTemplate.unique"
+                            style="width:100%;"
+                            @change="(val)=>handleInput('unique',val)"
+                        >
+                            <el-option
+                                v-for="field in fields"
+                                :key="field.name"
+                                :value="field.name"
+                                :label="field.label"
+                            />
+                        </el-select>
+                        <el-input v-else v-model="dataTemplate.unique" @input="(val)=>handleInput('typeId',val)" />
+                    </el-form-item>
+                </div>
+            </div>
+            <!--接口配置 -->
+            <!-- <div v-if="datasetType=='thirdparty'" class="panel panel-default">
+                <div class="panel-heading">第三方接口数据配置</div>
+                <div class="panel-body">
+                    <el-button
+                        style="width:100%;"
+                        type="primary"
+                        icon="ibps-icon-file-code-o"
+                        @click="thirdpartyConfigDialogVisible=true"
+                    >第三方接口数据配置</el-button>
+                </div>
+            </div> -->
+            <!-- 扩展属性-->
+            <div v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" class="panel panel-default">
+                <div class="panel-heading">扩展属性</div>
+                <div class="panel-body">
+                    <el-form-item v-if="(dataTemplate.showType === 'compose'&&dataTemplate.composeType === 'treeForm')||dataTemplate.showType!== 'compose'" label="绑定表单" prop="form">
+                        <form-def-selector
+                            v-model="formKey"
+                            :data-template-key="dataTemplate.key"
+                            :rights-type="rightsType"
+                            type="dataTemplate"
+                            :is-save="isSave"
+                            :value-key="'key'"
+                            :toolbar="formToolbar"
+                        />
+                    </el-form-item>
+                    <el-form-item label="打印模版" prop="formPrint">
+                        <form-print-selector
+                            v-model="dataTemplate.attrs.print_id"
+                            :form-key="formKey"
+                            @input="(val)=>handleAttrs('print_id',val)"
+                        />
+                    </el-form-item>
+                </div>
+            </div>
+            <div class="panel panel-default">
+                <div class="panel-heading">模版脚本</div>
+                <div class="panel-body">
+                    <el-button style="width:100%;" type="primary" icon="ibps-icon-file-code-o" @click="editTemplateScript('pc')">模版脚本</el-button>
+                    <!-- <el-button style="width:100%;margin:16px 0 0 0;" type="primary" icon="ibps-icon-file-code-o" @click="editTemplateScript('mobile')">移动端模版脚本</el-button> -->
+                    <template-script
+                        :visible="dialogScriptVisible"
+                        :title="scriptTitle"
+                        :data="script"
+                        :show-type="dataTemplate.showType"
+                        @callback="handleDialogScript"
+                        @close="visible => dialogScriptVisible = visible"
+                    />
+                </div>
+            </div>
+        </el-form>
+        <thirdparty-config
+            :visible="thirdpartyConfigDialogVisible"
+            :datasets="data.datasets"
+            :data="dataTemplate.attrs.config"
+            @callback="handleThirdpartyConfigSettingField"
+            @close="visible => settingFieldDialogVisible = visible"
+        />
+    </div>
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -190,181 +197,181 @@ import { mapActions } from 'vuex'
  * 表单属性
  */
 export default {
-  components: {
-    IbpsTypeSelect,
-    DatasetSelector,
-    FormDefSelector,
-    FormPrintSelector,
-    TemplateScript,
-    ThirdpartyConfig
-  },
-  props: {
-    data: {
-      type: Object,
-      required: true
+    components: {
+        IbpsTypeSelect,
+        DatasetSelector,
+        FormDefSelector,
+        FormPrintSelector,
+        TemplateScript,
+        ThirdpartyConfig
     },
-    datasetType: {
-      type: String,
-      default: 'table'
-    },
-    isSave: {
-      type: Boolean,
-      default: false
-    },
-    rightsType: {
-      type: String,
-      default: 'data'
-    }
-  },
-  data() {
-    return {
-      dialogScriptVisible: false,
-      thirdpartyConfigDialogVisible: false,
-      options: [{
-        value: 'default',
-        label: '默认'
-      }],
-      templateTypeOptions: templateTypeOptions,
-      showTypeOptions: showTypeOptions,
-      composeTypeOptions: composeTypeOptions,
-      formToolbar: [{
-        key: 'rechoose',
-        type: 'primary',
-        label: '重选'
-      }, {
-        key: 'remove',
-        type: 'danger',
-        label: '删除'
-      }, {
-        key: 'rights',
-        type: 'success',
-        label: '权限'
-      }],
-      rules: {
-        name: [{ required: true, message: this.$t('validate.required') }],
-        key: [{ required: true, message: this.$t('validate.required') }]
-      },
-      script: '',
-      scriptTitle: '模板脚本设置',
-      scriptType: 'pc',
-      fields: [],
-      formKey: ''
-    }
-  },
-  computed: {
-    ...mapState({
-      datasets: state => state.ibps.dataTemplate.datasets
-    }),
-    // fields() {
-    //   return Utils.getFields(this.datasets, 'unique')
-    // },
-    dataTemplate: {
-      get() {
-        return this.data || {}
-      },
-      set(val) {
-        this.$emit('update', val)
-      }
-    }
-  },
-  watch: {
-    datasets: {
-      handler: function(val, oldVal) {
-        this.$utils.isNotEmpty(val) ? this.fields = Utils.getFields(val, 'unique') : null
-      },
-      deep: true,
-      immediate: true
-    },
-    dataTemplate: {
-      handler(val, oldVal) {
-        if (val !== oldVal) {
-          const attrs = val.attrs
-          if (this.$utils.isNotEmpty(attrs) && this.$utils.isNotEmpty(attrs.form_key)) {
-            this.$nextTick(() => {
-              const curFormKey = attrs.form_key || ''
-              if (this.formKey !== curFormKey) {
-                this.formKey = curFormKey
-              }
-            })
-          }
+    props: {
+        data: {
+            type: Object,
+            required: true
+        },
+        datasetType: {
+            type: String,
+            default: 'table'
+        },
+        isSave: {
+            type: Boolean,
+            default: false
+        },
+        rightsType: {
+            type: String,
+            default: 'data'
         }
-      },
-      deep: true,
-      immediate: true
     },
-    formKey: {
-      handler(val, oldVal) {
-        if (val !== oldVal) {
-          this.handleAttrs('form_key', val)
+    data () {
+        return {
+            dialogScriptVisible: false,
+            thirdpartyConfigDialogVisible: false,
+            options: [{
+                value: 'default',
+                label: '默认'
+            }],
+            templateTypeOptions: templateTypeOptions,
+            showTypeOptions: showTypeOptions,
+            composeTypeOptions: composeTypeOptions,
+            formToolbar: [{
+                key: 'rechoose',
+                type: 'primary',
+                label: '重选'
+            }, {
+                key: 'remove',
+                type: 'danger',
+                label: '删除'
+            }, {
+                key: 'rights',
+                type: 'success',
+                label: '权限'
+            }],
+            rules: {
+                name: [{ required: true, message: this.$t('validate.required') }],
+                key: [{ required: true, message: this.$t('validate.required') }]
+            },
+            script: '',
+            scriptTitle: '模板脚本设置',
+            scriptType: 'pc',
+            fields: [],
+            formKey: ''
         }
-      }
-    }
-  },
-  methods: {
-    ...mapActions({
-      setDatasets: 'ibps/dataTemplate/setDatasets'
-    }),
-    changeDataset(data) {
-      this.dataTemplate.datasetType = data.type
-      this.setDatasets([])
-      if (this.$utils.isEmpty(this.datasets) && this.$utils.isNotEmpty(data)) {
-        this.getUniqueOption(data.key)
-      }
-      if (this.$utils.isEmpty(data)) {
-        this.fields = []
-        this.dataTemplate.unique = ''
-      }
-    },
-    getUniqueOption(key) {
-      buildTree({
-        datasetKey: key
-      }).then(res => {
-        this.setDatasets(res.data)
-        const data = res.data
-        this.fields = data
-      }).catch(err => {
-        console.error(err)
-      })
     },
-    handleInput(key, val) {
-      this.dataTemplate[key] = val
-      this.$emit('update', JSON.parse(JSON.stringify(this.dataTemplate)))
+    computed: {
+        ...mapState({
+            datasets: state => state.ibps.dataTemplate.datasets
+        }),
+        // fields() {
+        //   return Utils.getFields(this.datasets, 'unique')
+        // },
+        dataTemplate: {
+            get () {
+                return this.data || {}
+            },
+            set (val) {
+                this.$emit('update', val)
+            }
+        }
     },
-    handleAttrs(key, val) {
-      if (this.$utils.isEmpty(this.dataTemplate.attrs)) {
-        this.dataTemplate.attrs = {}
-      }
-      this.dataTemplate.attrs[key] = val
-      this.$emit('update', JSON.parse(JSON.stringify(this.dataTemplate)))
+    watch: {
+        datasets: {
+            handler: function (val, oldVal) {
+                this.$utils.isNotEmpty(val) ? this.fields = Utils.getFields(val, 'unique') : null
+            },
+            deep: true,
+            immediate: true
+        },
+        dataTemplate: {
+            handler (val, oldVal) {
+                if (val !== oldVal) {
+                    const attrs = val.attrs
+                    if (this.$utils.isNotEmpty(attrs) && this.$utils.isNotEmpty(attrs.form_key)) {
+                        this.$nextTick(() => {
+                            const curFormKey = attrs.form_key || ''
+                            if (this.formKey !== curFormKey) {
+                                this.formKey = curFormKey
+                            }
+                        })
+                    }
+                }
+            },
+            deep: true,
+            immediate: true
+        },
+        formKey: {
+            handler (val, oldVal) {
+                if (val !== oldVal) {
+                    this.handleAttrs('form_key', val)
+                }
+            }
+        }
     },
-    editTemplateScript(type) {
-      this.scriptType = type
-      if (type === 'pc') {
-        this.scriptTitle = '模板脚本设置'
-        this.script = this.dataTemplate.attrs.script
-      } else if (type === 'mobile') {
-        this.scriptTitle = '移动端模板脚本设置'
-        this.script = this.dataTemplate.attrs.script
-      }
+    methods: {
+        ...mapActions({
+            setDatasets: 'ibps/dataTemplate/setDatasets'
+        }),
+        changeDataset (data) {
+            this.dataTemplate.datasetType = data.type
+            this.setDatasets([])
+            if (this.$utils.isEmpty(this.datasets) && this.$utils.isNotEmpty(data)) {
+                this.getUniqueOption(data.key)
+            }
+            if (this.$utils.isEmpty(data)) {
+                this.fields = []
+                this.dataTemplate.unique = ''
+            }
+        },
+        getUniqueOption (key) {
+            buildTree({
+                datasetKey: key
+            }).then(res => {
+                this.setDatasets(res.data)
+                const data = res.data
+                this.fields = data
+            }).catch(err => {
+                console.error(err)
+            })
+        },
+        handleInput (key, val) {
+            this.dataTemplate[key] = val
+            this.$emit('update', JSON.parse(JSON.stringify(this.dataTemplate)))
+        },
+        handleAttrs (key, val) {
+            if (this.$utils.isEmpty(this.dataTemplate.attrs)) {
+                this.dataTemplate.attrs = {}
+            }
+            this.dataTemplate.attrs[key] = val
+            this.$emit('update', JSON.parse(JSON.stringify(this.dataTemplate)))
+        },
+        editTemplateScript (type) {
+            this.scriptType = type
+            if (type === 'pc') {
+                this.scriptTitle = '模板脚本设置'
+                this.script = this.dataTemplate.attrs.script
+            } else if (type === 'mobile') {
+                this.scriptTitle = '移动端模板脚本设置'
+                this.script = this.dataTemplate.attrs.script
+            }
 
-      this.dialogScriptVisible = true
-    },
-    handleDialogScript(script) {
-      // script 为codemirror中填入的脚本值
-      if (this.scriptType === 'pc') {
-        this.handleAttrs('script', script)
-      } else {
-        this.handleAttrs('mobile_script', script)
-      }
-    },
-    validate(callback) {
-      this.$nextTick(() => {
-        this.$refs.dataTemplate.validate(callback)
-      })
-    },
-    handleThirdpartyConfigSettingField(data) {
+            this.dialogScriptVisible = true
+        },
+        handleDialogScript (script) {
+            // script 为codemirror中填入的脚本值
+            if (this.scriptType === 'pc') {
+                this.handleAttrs('script', script)
+            } else {
+                this.handleAttrs('mobile_script', script)
+            }
+        },
+        validate (callback) {
+            this.$nextTick(() => {
+                this.$refs.dataTemplate.validate(callback)
+            })
+        },
+        handleThirdpartyConfigSettingField (data) {
 
+        }
     }
-  }
 }
 </script>

src/business/platform/form/formbuilder/right-aside/propertys/index.vue

@@ -31,6 +31,8 @@
                             category-key="BO_TYPE"
                             placeholder="请选择表单分类"
                             clearable
+                            filterable
+                            filter-label="name"
                         />
                     </el-form-item>
                     <el-form-item label="表单描述">
@@ -70,11 +72,11 @@
                 </div>
             </div>
             <!-- <div class="panel panel-default">
-        <div class="panel-heading">表单规则<help-tip prop="formRule" /></div>
-        <div class="panel-body">
-          <el-button style="width:100%;" type="primary" @click="editFormRule()">设置表单规则</el-button>
-        </div>
-      </div> -->
+                <div class="panel-heading">表单规则<help-tip prop="formRule" /></div>
+                <div class="panel-body">
+                    <el-button style="width:100%;" type="primary" @click="editFormRule()">设置表单规则</el-button>
+                </div>
+            </div> -->
             <div class="panel panel-default">
                 <div class="panel-heading">表单脚本<help-tip prop="formScript" /></div>
                 <div class="panel-body">
@@ -214,16 +216,16 @@
             </div>
 
             <!-- <div class="panel panel-default">
-        <div class="panel-heading">提交设置<help-tip prop="formSubmit" /></div>
-        <div class="panel-body">
-          <el-form-item label="开启后端验证" label-width="125px">
-            <el-switch v-model="formDef.attrs.validated" />
-          </el-form-item>
-          <el-form-item label="开启提交冲突提示" label-width="125px">
-            <el-switch v-model="formDef.attrs.conflict" />
-          </el-form-item>
-        </div>
-      </div> -->
+                <div class="panel-heading">提交设置<help-tip prop="formSubmit" /></div>
+                <div class="panel-body">
+                    <el-form-item label="开启后端验证" label-width="125px">
+                        <el-switch v-model="formDef.attrs.validated" />
+                    </el-form-item>
+                    <el-form-item label="开启提交冲突提示" label-width="125px">
+                        <el-switch v-model="formDef.attrs.conflict" />
+                    </el-form-item>
+                </div>
+            </div> -->
 
             <div class="panel panel-default">
                 <div class="panel-heading">其他设置</div>
@@ -420,14 +422,14 @@ export default {
             }
         },
         /**
-     * 表单规则
-     */
+         * 表单规则
+         */
         editFormRule () {
 
         },
         /**
-     * 表单脚本
-     */
+         * 表单脚本
+         */
         editFormScript (formType = 'pc') {
             this.formType = formType
             this.formScriptTitle = formType === 'mobile' ? '移动端表单脚本' : '表单脚本'

src/views/platform/form/formDef/create.vue

@@ -1,85 +1,87 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    :title="title"
-    class="dialog form-def-create-dialog"
-    @open="getFormData"
-    @close="closeDialog"
-  >
-    <el-form
-      ref="formDefForm"
-      v-loading="dialogLoading"
-      :element-loading-text="$t('common.loading')"
-      :model="formDef"
-      :rules="rules"
-      :label-width="formLabelWidth"
-      @submit.native.prevent
+    <el-dialog
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        append-to-body
+        :title="title"
+        class="dialog form-def-create-dialog"
+        @open="getFormData"
+        @close="closeDialog"
     >
-	<el-form-item v-if="formDef.mode==='bo'" label="业务对象:" prop="code">
-	  <bo-def-selector
-	    v-model="formDef.code"
-	    value-key="code"
-	    @change="handleCodeDef"
-	  />
-	</el-form-item>
-	<el-form-item v-else label="表名:" prop="code">
-	  <table-config-selector v-model="formDef.code" />
-	</el-form-item>
-      <el-form-item label="表单名称:" prop="name">
-        <el-input v-model="formDef.name" v-pinyin="{vm:formDef}" />
-      </el-form-item>
-      <el-form-item label="表单Key:" prop="key">
-        <el-input v-model="formDef.key" />
-      </el-form-item>
-      <el-form-item label="分类:" prop="typeId">
-        <ibps-type-select
-          v-model="formDef.typeId"
-          category-key="BO_TYPE"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item label="表单模式:" prop="mode">
-        <el-select v-model="formDef.mode" style="width:100%;" @change="changeMode">
-          <el-option value="bo" label="业务对象" />
-          <el-option value="codeGen" label="表配置【代码生成】" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="表单构建模式:" prop="buildMode">
-        <el-select v-model="formDef.buildMode" style="width:100%;">
-          <el-option value="default" label="默认模版" />
-          <!-- <el-option value="template" label="表单模版" />
-          <el-option value="table" label="数据表定义模版" /> -->
-        </el-select>
+        <el-form
+            ref="formDefForm"
+            v-loading="dialogLoading"
+            :element-loading-text="$t('common.loading')"
+            :model="formDef"
+            :rules="rules"
+            :label-width="formLabelWidth"
+            @submit.native.prevent
+        >
+            <el-form-item v-if="formDef.mode==='bo'" label="业务对象:" prop="code">
+                <bo-def-selector
+                    v-model="formDef.code"
+                    value-key="code"
+                    @change="handleCodeDef"
+                />
+            </el-form-item>
+            <el-form-item v-else label="表名:" prop="code">
+                <table-config-selector v-model="formDef.code" />
+            </el-form-item>
+            <el-form-item label="表单名称:" prop="name">
+                <el-input v-model="formDef.name" v-pinyin="{vm:formDef}" />
+            </el-form-item>
+            <el-form-item label="表单Key:" prop="key">
+                <el-input v-model="formDef.key" />
+            </el-form-item>
+            <el-form-item label="分类:" prop="typeId">
+                <ibps-type-select
+                    v-model="formDef.typeId"
+                    category-key="BO_TYPE"
+                    clearable
+                    filterable
+                    filter-label="name"
+                />
+            </el-form-item>
+            <el-form-item label="表单模式:" prop="mode">
+                <el-select v-model="formDef.mode" style="width:100%;" @change="changeMode">
+                    <el-option value="bo" label="业务对象" />
+                    <el-option value="codeGen" label="表配置【代码生成】" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="表单构建模式:" prop="buildMode">
+                <el-select v-model="formDef.buildMode" style="width:100%;">
+                    <el-option value="default" label="默认模版" />
+                    <!-- <el-option value="template" label="表单模版" />
+                    <el-option value="table" label="数据表定义模版" /> -->
+                </el-select>
 
-      </el-form-item>
+            </el-form-item>
 
-    </el-form>
-    <div slot="footer" class="el-dialog--center">
-      <el-button type="primary" icon="ibps-icon-arrow-circle-right" @click="handleNext()">下一步</el-button>
-      <el-button icon="el-icon-circle-close" @click="closeDialog()">取 消</el-button>
-    </div>
-    <form-builder
-      :visible="formbuilderDialogVisible"
-      :data="formDefData"
-      @callback="$emit('callback')"
-      @close="visible => formbuilderDialogVisible = visible"
-    />
-    <select-template
-      :visible="selectTemplateDialogVisible"
-      @callback="design"
-      @close="visible => selectTemplateDialogVisible = visible"
-    />
+        </el-form>
+        <div slot="footer" class="el-dialog--center">
+            <el-button type="primary" icon="ibps-icon-arrow-circle-right" @click="handleNext()">下一步</el-button>
+            <el-button icon="el-icon-circle-close" @click="closeDialog()">取 消</el-button>
+        </div>
+        <form-builder
+            :visible="formbuilderDialogVisible"
+            :data="formDefData"
+            @callback="$emit('callback')"
+            @close="visible => formbuilderDialogVisible = visible"
+        />
+        <select-template
+            :visible="selectTemplateDialogVisible"
+            @callback="design"
+            @close="visible => selectTemplateDialogVisible = visible"
+        />
 
-    <select-table-template
-      :visible="selectTableTemplateDialogVisible"
-      @callback="design"
-      @close="visible => selectTableTemplateDialogVisible = visible"
-    />
+        <select-table-template
+            :visible="selectTableTemplateDialogVisible"
+            @callback="design"
+            @close="visible => selectTableTemplateDialogVisible = visible"
+        />
 
-  </el-dialog>
+    </el-dialog>
 </template>
 
 <script>
@@ -99,147 +101,147 @@ import { testKey } from '@/utils/validate'
 import i18n from '@/utils/i18n'
 
 var validateFormKey = (rule, formKey, callback) => {
-  if (!testKey(formKey)) {
-    callback(new Error(i18n.t('validate.key')))
-  } else {
-    isFormKeyExists({
-      formKey: formKey,
-      formDefId: 'xxx'
-    }).then(response => {
-      if (response.data === true) {
-        callback(new Error(`表单key已经存在`))
-        return
-      }
-      callback()
-    }).catch((err) => {
-      callback(new Error(err))
-    })
-  }
+    if (!testKey(formKey)) {
+        callback(new Error(i18n.t('validate.key')))
+    } else {
+        isFormKeyExists({
+            formKey: formKey,
+            formDefId: 'xxx'
+        }).then(response => {
+            if (response.data === true) {
+                callback(new Error(`表单key已经存在`))
+                return
+            }
+            callback()
+        }).catch((err) => {
+            callback(new Error(err))
+        })
+    }
 }
 
 export default {
-  components: {
-    IbpsTypeSelect,
-    BoDefSelector,
-    TableConfigSelector,
-    FormBuilder,
-    SelectTemplate,
-    SelectTableTemplate
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
+    components: {
+        IbpsTypeSelect,
+        BoDefSelector,
+        TableConfigSelector,
+        FormBuilder,
+        SelectTemplate,
+        SelectTableTemplate
     },
-    title: String,
-    typeId: String
-  },
-  data() {
-    return {
-      formName: 'formDefForm',
-      formLabelWidth: '120px',
-      dialogVisible: this.visible,
-      dialogLoading: false,
-      formbuilderDialogVisible: false,
-      selectTemplateDialogVisible: false,
-      selectTableTemplateDialogVisible: false,
-      defaultForm: {},
-      formDef: {
-        name: '',
-        key: '',
-        typeId: '',
-        mode: 'bo',
-        code: '',
-        busId: '',
-        buildMode: 'default'
-      },
-      rules: {
-        name: [{ required: true, message: this.$t('validate.required') },
-          { min: 1, max: 64, message: '长度不能超过64个字符', trigger: 'blur' }],
-        key: [{ required: true, message: this.$t('validate.required') },
-          { validator: validateFormKey, trigger: 'change' },
-          { min: 1, max: 64, message: '长度不能超过64个字符', trigger: 'blur' }],
-        mode: [{ required: true, message: this.$t('validate.required') }],
-        code: [{ required: true, message: this.$t('validate.required') }]
-      },
-      formDefData: {}
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.defaultForm = JSON.parse(JSON.stringify(this.formDef))
-  },
-  methods: {
-    changeMode() {
-      this.formDef.code = ''
-      this.formDef.busId = ''
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: String,
+        typeId: String
     },
-    handleCodeDef(data) {
-      this.formDef.busId = data.id
-    },
-    // 下一步
-    handleNext() {
-      this.$refs[this.formName].validate(valid => {
-        if (valid) {
-          this.nextData()
-        } else {
-          ActionUtils.saveErrorMessage()
+    data () {
+        return {
+            formName: 'formDefForm',
+            formLabelWidth: '120px',
+            dialogVisible: this.visible,
+            dialogLoading: false,
+            formbuilderDialogVisible: false,
+            selectTemplateDialogVisible: false,
+            selectTableTemplateDialogVisible: false,
+            defaultForm: {},
+            formDef: {
+                name: '',
+                key: '',
+                typeId: '',
+                mode: 'bo',
+                code: '',
+                busId: '',
+                buildMode: 'default'
+            },
+            rules: {
+                name: [{ required: true, message: this.$t('validate.required') },
+                    { min: 1, max: 64, message: '长度不能超过64个字符', trigger: 'blur' }],
+                key: [{ required: true, message: this.$t('validate.required') },
+                    { validator: validateFormKey, trigger: 'change' },
+                    { min: 1, max: 64, message: '长度不能超过64个字符', trigger: 'blur' }],
+                mode: [{ required: true, message: this.$t('validate.required') }],
+                code: [{ required: true, message: this.$t('validate.required') }]
+            },
+            formDefData: {}
         }
-      })
-    },
-    // 下一步数据
-    nextData() {
-      if (this.formDef.buildMode === 'default') {
-        this.design()
-      } else {
-        // TODO: 其他表单模版类型处理
-      }
-    },
-    design(template) {
-      this.formDefData = this.formDef
-      this.formbuilderDialogVisible = true
-      this.closeDialog()
     },
-    // 关闭当前窗口
-    closeDialog() {
-      this.$emit('close', false)
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+            },
+            immediate: true
+        }
     },
-    /**
-     * 表单验证
-     */
-    formValidate() {
-      this.$nextTick(() => {
-        this.$refs[this.formName].validate(() => {})
-      })
+    created () {
+        this.defaultForm = JSON.parse(JSON.stringify(this.formDef))
     },
-    /**
-     * 获取表单数据
-     */
-    getFormData() {
-      if (this.$utils.isEmpty(this.formId)) {
-        // 重置表单
-        this.formDef = JSON.parse(JSON.stringify(this.defaultForm))
-        this.formDef.typeId = this.typeId
-        this.formValidate()
-        return
-      }
-      this.dialogLoading = true
+    methods: {
+        changeMode () {
+            this.formDef.code = ''
+            this.formDef.busId = ''
+        },
+        handleCodeDef (data) {
+            this.formDef.busId = data.id
+        },
+        // 下一步
+        handleNext () {
+            this.$refs[this.formName].validate(valid => {
+                if (valid) {
+                    this.nextData()
+                } else {
+                    ActionUtils.saveErrorMessage()
+                }
+            })
+        },
+        // 下一步数据
+        nextData () {
+            if (this.formDef.buildMode === 'default') {
+                this.design()
+            } else {
+                // TODO: 其他表单模版类型处理
+            }
+        },
+        design (template) {
+            this.formDefData = this.formDef
+            this.formbuilderDialogVisible = true
+            this.closeDialog()
+        },
+        // 关闭当前窗口
+        closeDialog () {
+            this.$emit('close', false)
+        },
+        /**
+         * 表单验证
+         */
+        formValidate () {
+            this.$nextTick(() => {
+                this.$refs[this.formName].validate(() => {})
+            })
+        },
+        /**
+         * 获取表单数据
+         */
+        getFormData () {
+            if (this.$utils.isEmpty(this.formId)) {
+                // 重置表单
+                this.formDef = JSON.parse(JSON.stringify(this.defaultForm))
+                this.formDef.typeId = this.typeId
+                this.formValidate()
+                return
+            }
+            this.dialogLoading = true
+        }
     }
-  }
 
 }
 </script>
 <style lang="scss">
 .form-def-create-dialog{
-  .el-dialog__body{
-    height:  calc(75vh - 150px) !important;
-  }
+    .el-dialog__body{
+        height:  calc(75vh - 150px) !important;
+    }
 }
 </style>