whj hace 1 año
padre
commit
b9d0cecc3e

+ 53 - 55
src/api/custom/form.js

@@ -8,13 +8,13 @@ import { stringify } from 'qs'
  * @returns {*}
  */
 export function getCustomFormPage (parameter) {
-    return axios({
-        url: '/custom/form/page?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/custom/form/page?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -24,15 +24,15 @@ export function getCustomFormPage (parameter) {
  * @returns {*}
  */
 export function addCustomForm (parameter) {
-    return axios({
-        url: '/custom/form',
-        method: 'POST',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json;charset=UTF-8'
-        },
-        data: parameter
-    })
+  return axios({
+    url: '/custom/form',
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    data: parameter
+  })
 }
 
 /**
@@ -42,14 +42,13 @@ export function addCustomForm (parameter) {
  * @returns {*}
  */
 export function updateCustomForm (parameter) {
-    return axios({
-        url: '/custom/form/' + parameter.id,
-        method: 'PUT',
-        data: parameter
-    })
+  return axios({
+    url: '/custom/form/' + parameter.id,
+    method: 'PUT',
+    data: parameter
+  })
 }
 
-                                            
 /**
  * fetch single func
  * parameter: { }
@@ -57,13 +56,13 @@ export function updateCustomForm (parameter) {
  * @returns {*}
  */
 export function fetchCustomForm (parameter) {
-    return axios({
-        url: '/custom/form/' + parameter.id,
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/custom/form/' + parameter.id,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -73,13 +72,13 @@ export function fetchCustomForm (parameter) {
  * @returns {*}
  */
 export function queryCustomForm (parameter) {
-    return axios({
-        url: '/custom/form?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/custom/form?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -89,11 +88,11 @@ export function queryCustomForm (parameter) {
  * @returns {*}
  */
 export function deleteCustomForms (parameter) {
-    return axios({
-        url: '/custom/form',
-        method: 'DELETE',
-        data: parameter
-    })
+  return axios({
+    url: '/custom/form',
+    method: 'DELETE',
+    data: parameter
+  })
 }
 
 /**
@@ -103,14 +102,13 @@ export function deleteCustomForms (parameter) {
  * @returns {*}
  */
 export function deleteCustomForm (parameter) {
-    return axios({
-        url: '/custom/form/' + parameter.id,
-        method: 'DELETE',
-        data: parameter
-    })
+  return axios({
+    url: '/custom/form/' + parameter.id,
+    method: 'DELETE',
+    data: parameter
+  })
 }
 
-
 /**
  * export file
  * parameter: { }
@@ -118,12 +116,12 @@ export function deleteCustomForm (parameter) {
  * @returns {*}
  */
 export function exportCustomForm (parameter) {
-    return axios({
-        url: '/custom/form/export?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        },
-        responseType: 'blob'
-    })
+  return axios({
+    url: '/custom/form/export?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
 }

+ 19 - 45
src/views/test/Test1.vue

@@ -4,7 +4,7 @@
       <a-card title="基础">
         <a-row>
           <VueDraggable
-            v-model="list1"
+            v-model="componentList"
             :animation="150"
             :group="{ name: 'people', pull: 'clone', put: false }"
             :sort="false"
@@ -12,7 +12,7 @@
           >
             <a-col
               :span="12"
-              v-for="item in list1"
+              v-for="item in componentList"
               :key="item.id">
               <div
                 class="hover type"
@@ -33,31 +33,27 @@
           :form="form"
           :labelCol="BaseTool.Constant.labelCol"
           :wrapperCol="BaseTool.Constant.wrapperCol">
-          <row-list :col="2">
-
+          <a-row>
             <VueDraggable
               v-model="list2"
               :animation="150"
               group="people"
             >
-              <row-item
+              <MComponent
                 class="hover"
                 v-for="item in list2"
                 :key="item.id"
-              >
-                <MComponent
-                  :detail="item"
-                  @select="handleSelect"
-                />
-              </row-item>
-
+                :config="config"
+                :detail="item"
+                @select="handleSelect"
+              />
             </VueDraggable>
-          </row-list>
+          </a-row>
         </a-form>
       </a-card>
     </a-col>
     <a-col :span="4">
-      <Detail ref="detail"/>
+      <Detail :config="config" ref="detail"/>
     </a-col>
   </a-row>
 </template>
@@ -66,6 +62,7 @@
 import { VueDraggable } from 'vue-draggable-plus'
 import Detail from './modules/Detail.vue'
 import MComponent from './modules/Component.vue'
+import { componentList } from './modules/components'
 export default {
   name: 'Test1',
   components: {
@@ -76,39 +73,16 @@ export default {
   data () {
     return {
       form: this.$form.createForm(this),
-      list1: [
-        {
-          id: 1,
-          name: '单行文本',
-          type: 'input',
-          value: 'input',
-          dependentId: false,
-          required: true,
-          label: 'label',
-          attrs: {
-            placeholder: '请输入'
-          }
-        },
-        {
-          id: 2,
-          name: '多行文本',
-          type: 'textarea',
-          value: 'textarea',
-          dependentId: false,
-          required: true,
-          label: 'label',
-          attrs: {
-            placeholder: '请输入'
-          }
-        }
-      ],
+      componentList,
       list2: [],
-
-      detail: {}
+      detail: {},
+      config: {
+        layout: 2
+      }
     }
   },
-  created () {
-
+  mounted () {
+    this.handleSelect({}, this.config)
   },
   methods: {
     onClone (element) {
@@ -124,7 +98,7 @@ export default {
       console.log(val)
     },
     handleSelect (item) {
-      this.$refs.detail.base(item)
+      this.$refs.detail.base(item, this.config)
     }
   }
 }

+ 26 - 3
src/views/test/modules/Component.vue

@@ -1,10 +1,29 @@
 <template>
-  <div @click="handleSelect">
-    <a-form-item :label="detail.label" >
+  <a-col @click="handleSelect" :span="detail.type==='divider'?24:24/config.layout">
+    <a-form-item :label="detail.label" v-if="detail.type!=='divider'">
+      <!-- 输入框 -->
       <a-input v-if="detail.type==='input'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+      <!-- 数字输入框 -->
+      <a-input-number style="width:100%" v-if="detail.type==='number'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+      <!-- 文本域 -->
       <a-textarea v-if="detail.type==='textarea'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+      <!-- 下拉框 -->
+      <a-select v-if="detail.type==='select'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" >
+        <a-select-option value="lucy">
+          Lucy
+        </a-select-option>
+      </a-select>
+      <!-- 日期时间 -->
+      <!-- 文件上传 -->
+      <!-- 图片上传 -->
     </a-form-item>
-  </div>
+    <!-- 分割线 -->
+    <a-divider v-if="detail.type==='divider'">
+      <template v-if="detail.label">
+        {{ detail.label }}
+      </template>
+    </a-divider>
+  </a-col>
 </template>
 
 <script>
@@ -15,6 +34,10 @@ export default {
       type: Object,
       required: true,
       default: () => {}
+    },
+    config: {
+      type: Object,
+      required: true
     }
   },
   methods: {

+ 74 - 4
src/views/test/modules/Detail.vue

@@ -1,9 +1,61 @@
 <template>
-  <a-card title="组件信息">
-    <a-form>
+  <a-card
+    :tab-list="tabList"
+    size="small"
+    :active-tab-key="selectKey"
+    @tabChange="onTabChange">
+    <a-form
+      size="small"
+      v-if="selectKey === '0'">
       <a-form-item label="标题">
         <a-input v-model="model.label" />
       </a-form-item>
+      <template v-if="model.type!=='divider'">
+        <a-form-item label="字段名称">
+          <a-input v-model="model.value" />
+        </a-form-item>
+        <a-form-item label="是否必填">
+          <a-switch v-model="model.required" />
+        </a-form-item>
+        <a-form-item label="默认提示">
+          <a-input v-model="model.attrs.placeholder" />
+        </a-form-item>
+      </template>
+      <!-- 数字输入框 -->
+      <template v-if="model.type === 'number'">
+        <a-form-item label="最小值">
+          <a-input-number v-model="model.min" />
+        </a-form-item>
+        <a-form-item label="最大值">
+          <a-input-number v-model="model.max" />
+        </a-form-item>
+        <a-form-item label="数值精度">
+          <a-input-number v-model="model.precision" />
+        </a-form-item>
+      </template>
+      <!-- 下拉框 -->
+      <template v-if="model.type === 'select'">
+        <a-form-item label="">
+          <a-input v-model="model.min" />
+        </a-form-item>
+      </template>
+    </a-form>
+    <a-form
+      size="small"
+      v-if="selectKey === '1'">
+      <a-form-item label="布局">
+        <a-radio-group name="radioGroup" v-model="config.layout">
+          <a-radio :value="1">
+            单列
+          </a-radio>
+          <a-radio :value="2">
+            双列
+          </a-radio>
+          <a-radio :value="3">
+            三列
+          </a-radio>
+        </a-radio-group>
+      </a-form-item>
       <a-form-item label="组件描述">
         <a-input v-model="model.desc" />
       </a-form-item>
@@ -16,14 +68,32 @@
 export default {
   data () {
     return {
-      model: {}
+      model: {
+        attrs: {}
+      },
+      config: {},
+      selectKey: '0',
+      tabList: [
+        {
+          key: '0',
+          tab: '字段属性'
+        },
+        {
+          key: '1',
+          tab: '表单属性'
+        }
+      ]
     }
   },
   created () {
   },
   methods: {
-    base (val) {
+    base (val, config) {
       this.model = val
+      this.config = config
+    },
+    onTabChange (key) {
+      this.selectKey = key
     }
   }
 }

+ 101 - 0
src/views/test/modules/components.js

@@ -0,0 +1,101 @@
+export const componentList = [
+  {
+    id: 1,
+    name: '单行文本',
+    type: 'input',
+    value: 'input',
+    dependentId: false,
+    required: true,
+    label: '单行文本',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 2,
+    name: '多行文本',
+    type: 'textarea',
+    value: 'textarea',
+    dependentId: false,
+    required: true,
+    label: '多行文本',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 3,
+    name: '数字',
+    type: 'number',
+    value: 'number',
+    dependentId: false,
+    required: true,
+    label: '数字',
+    attrs: {
+      placeholder: '请输入',
+      max: Infinity,
+      min: -Infinity,
+      precision: 2
+    }
+  },
+  {
+    id: 4,
+    name: '下拉框',
+    type: 'select',
+    value: 'select',
+    dependentId: false,
+    required: true,
+    label: '下拉框',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 5,
+    name: '日期时间',
+    type: 'date',
+    value: 'date',
+    dependentId: false,
+    required: true,
+    label: '日期时间',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 6,
+    name: '文件上传',
+    type: 'uploadFile',
+    value: 'uploadFile',
+    dependentId: false,
+    required: true,
+    label: '文件上传',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 7,
+    name: '图片上传',
+    type: 'uploadImg',
+    value: 'uploadImg',
+    dependentId: false,
+    required: true,
+    label: '图片上传',
+    attrs: {
+      placeholder: '请输入'
+    }
+  },
+  {
+    id: 8,
+    name: '分割线',
+    type: 'divider',
+    value: 'divider',
+    dependentId: false,
+    required: true,
+    label: '分割线',
+    attrs: {
+      placeholder: '请输入'
+    }
+  }
+]