tianheng-ui 0.0.48 → 0.0.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.48",
+  "version": "0.0.51",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/dialog/index.vue

@@ -27,7 +27,10 @@
       </div>
     </div>
     <slot></slot>
-    <span slot="footer">
+    <slot v-if="$slots.footer" slot="footer">
+      <slot name="footer"></slot>
+    </slot>
+    <span v-else slot="footer">
       <el-button
         v-if="showAffirm"
         type="primary"

package/packages/formMaking/Container.vue

@@ -359,7 +359,8 @@ export default {
         "select",
         "switch",
         "slider",
-        "text"
+        "text",
+        "button"
       ]
     },
     advanceFields: {
@@ -418,7 +419,7 @@ export default {
           console.log("callback", response, file, fileList);
         }
       },
-      widgetModels: {table:[{name:'这是'}]},
+      widgetModels: { table: [{ name: "这是" }] },
       blank: "",
       htmlTemplate: "",
       vueTemplate: "",

package/packages/formMaking/GenerateForm.vue

@@ -108,7 +108,7 @@ export default {
           }
         }
       });
-      console.log(this.models)
+      // console.log(this.models)
     },
     generateRules(item) {
       if (this.rules[item.model]) {

package/packages/formMaking/GenerateFormItem.vue

@@ -1,5 +1,6 @@
 <template>
   <el-form-item
+    :class="widget.model"
     :label="widget.options.hideLabel || hideLabel ? '' : widget.name"
     :label-width="
       widget.options.hideLabel
@@ -568,7 +569,10 @@
     </template>
 
     <template v-if="widget.type == 'divider'">
-      <el-divider :content-position="widget.options.contentPosition">
+      <el-divider
+        :content-position="widget.options.contentPosition"
+        :style="{ height: `${widget.options.height}px` }"
+      >
         {{ widget.name }}
       </el-divider>
     </template>
@@ -602,7 +606,7 @@ export default {
     return {
       dataModel: this.models[this.widget.model],
       dialogVisible: false,
-      dialogImageUrl: "",
+      dialogImageUrl: ""
     };
   },
   created() {

package/packages/formMaking/WidgetConfig.vue

@@ -475,12 +475,15 @@
         label="默认值"
         v-if="
           Object.keys(data.options).indexOf('defaultValue') >= 0 &&
-            (data.type == 'textarea' ||
-              data.type == 'input' ||
-              data.type == 'rate' ||
-              data.type == 'color' ||
-              data.type == 'switch' ||
-              data.type == 'text')
+            [
+              'textarea',
+              'input',
+              'rate',
+              'color',
+              'switch',
+              'text',
+              'select'
+            ].includes(data.type)
         "
       >
         <el-input
@@ -490,23 +493,24 @@
           v-model="data.options.defaultValue"
         ></el-input>
         <el-input
-          v-if="data.type == 'input'"
+          v-if="data.type == 'input' || data.type == 'select'"
           v-model="data.options.defaultValue"
         ></el-input>
-        <el-rate
-          v-if="data.type == 'rate'"
-          style="display:inline-block;vertical-align: middle;"
-          :max="data.options.max"
-          :allow-half="data.options.allowHalf"
-          v-model="data.options.defaultValue"
-        ></el-rate>
-        <el-button
-          type="text"
-          v-if="data.type == 'rate'"
-          style="display:inline-block;vertical-align: middle;margin-left: 10px;"
-          @click="data.options.defaultValue = 0"
-          >清空</el-button
-        >
+        <template v-if="data.type == 'rate'">
+          <el-rate
+            style="display:inline-block;vertical-align: middle;"
+            :max="data.options.max"
+            :allow-half="data.options.allowHalf"
+            v-model="data.options.defaultValue"
+          ></el-rate>
+          <el-button
+            type="text"
+            style="display:inline-block;vertical-align: middle;margin-left: 10px;"
+            @click="data.options.defaultValue = 0"
+            >清空</el-button
+          >
+        </template>
+
         <el-color-picker
           v-if="data.type == 'color'"
           v-model="data.options.defaultValue"

package/packages/formMaking/WidgetFormItem.vue

@@ -4,7 +4,9 @@
     v-if="element && element.key"
     :class="{
       active: selectWidget.key == element.key,
-      is_req: element.options.required
+      is_req: element.options.required,
+      'widget-col': ['grid','tabs','table'].includes(element.type),
+      [element.model]: true
     }"
     :label="
       data.type == 'table' || element.options.hideLabel ? '' : element.name
@@ -466,7 +468,11 @@
     </template>
 
     <template v-if="element.type == 'tabs'">
-      <el-tabs v-model="element.options.defaultValue" :type="element.options.type" :tab-position="element.options.tabPosition">
+      <el-tabs
+        v-model="element.options.defaultValue"
+        :type="element.options.type"
+        :tab-position="element.options.tabPosition"
+      >
         <el-tab-pane
           v-for="(tabItem, tabIndex) in element.tabs"
           :key="tabItem.value"
@@ -730,13 +736,19 @@ export default {
       }
 
       if (row.tabs[colIndex].list[newIndex].type === "grid") {
-        this.$set(row.tabs[colIndex].list, newIndex, JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex])));
+        this.$set(
+          row.tabs[colIndex].list,
+          newIndex,
+          JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex]))
+        );
       }
 
       if (row.tabs[colIndex].list[newIndex].type === "table") {
         this.$set(row.tabs[colIndex].list, newIndex, {
           ...row.tabs[colIndex].list[newIndex],
-          list: row.tabs[colIndex].list[newIndex].list.map(item => ({ ...item }))
+          list: row.tabs[colIndex].list[newIndex].list.map(item => ({
+            ...item
+          }))
         });
       }
 

package/packages/formMaking/componentsConfig.js

@@ -314,9 +314,38 @@ export const basicComponents = [
     options: {
       labelWidth: 100,
       isLabelWidth: false,
-      defaultValue: "This is a text",
+      hideLabel: true,
+      defaultValue: "文字内容",
       customClass: ""
     }
+  },
+  {
+    type: "button",
+    icon: "icon-button",
+    options: {
+      customClass: "",
+      disabled: false,
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      hidden: false,
+      dataBind: false,
+      buttonSize: "small",
+      buttonType: "",
+      buttonPlain: false,
+      buttonRound: false,
+      buttonCircle: false,
+      buttonName: "Button",
+      width: "",
+      remoteFunc: "",
+      remoteOption: "",
+      tableColumn: false
+    },
+    events: {
+      onClick: ""
+    },
+    name: "按钮",
+    rules: []
   }
 ];
 

package/packages/formMaking/generateCode.js

@@ -1,24 +1,32 @@
-function findRemoteFunc (list, funcList, tokenFuncList, blankList) {
+function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
   for (let i = 0; i < list.length; i++) {
-    if (list[i].type == 'grid') {
+    if (list[i].type == "grid") {
       list[i].columns.forEach(item => {
-        findRemoteFunc(item.list, funcList, tokenFuncList, blankList)
-      })
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
+      });
+    } else if (list[i].type == "tabs") {
+      list[i].tabs.forEach(item => {
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
+      });
+    } else if (list[i].type == "table") {
+      // list[i].tabs.forEach(item => {
+      findRemoteFunc(list[i].list, funcList, tokenFuncList, blankList);
+      // })
     } else {
-      if (list[i].type == 'blank') {
+      if (list[i].type == "blank") {
         if (list[i].model) {
           blankList.push({
             name: list[i].model,
             label: list[i].name
-          })
+          });
         }
-      } else if (list[i].type == 'imgupload') {
+      } else if (list[i].type == "imgupload") {
         if (list[i].options.tokenFunc) {
           tokenFuncList.push({
             func: list[i].options.tokenFunc,
             label: list[i].name,
             model: list[i].model
-          })
+          });
         }
       } else {
         if (list[i].options.remote && list[i].options.remoteFunc) {
@@ -26,45 +34,44 @@ function findRemoteFunc (list, funcList, tokenFuncList, blankList) {
             func: list[i].options.remoteFunc,
             label: list[i].name,
             model: list[i].model
-          })
+          });
         }
       }
     }
   }
 }
 
-export default function (data, type = 'vue') {
-
-  const funcList = []
+export default function(data, type = "vue") {
+  const funcList = [];
 
-  const tokenFuncList = []
+  const tokenFuncList = [];
 
-  const blankList = []
+  const blankList = [];
 
-  findRemoteFunc(JSON.parse(data).list, funcList, tokenFuncList, blankList)
+  findRemoteFunc(JSON.parse(data).list, funcList, tokenFuncList, blankList);
 
-  let funcTemplate = ''
+  let funcTemplate = "";
 
-  let blankTemplate = ''
+  let blankTemplate = "";
 
-  for(let i = 0; i < funcList.length; i++) {
+  for (let i = 0; i < funcList.length; i++) {
     funcTemplate += `
             ${funcList[i].func} (resolve) {
               // ${funcList[i].label} ${funcList[i].model}
               // Call callback function once get the data from remote server
               // resolve(data)
             },
-    `
+    `;
   }
 
-  for(let i = 0; i < tokenFuncList.length; i++) {
+  for (let i = 0; i < tokenFuncList.length; i++) {
     funcTemplate += `
             ${tokenFuncList[i].func} (resolve) {
               // ${tokenFuncList[i].label} ${tokenFuncList[i].model}
               // Call callback function once get the token
               // resolve(token)
             },
-    `
+    `;
   }
 
   for (let i = 0; i < blankList.length; i++) {
@@ -73,11 +80,12 @@ export default function (data, type = 'vue') {
           <!-- ${blankList[i].label} -->
           <!-- use v-model="scope.model.${blankList[i].name}" to bind data -->
         </template>
-    `
+    `;
   }
 
-  if (type == 'vue') {
-    return `<template>
+  if (type == "vue") {
+    return `
+<template>
   <div>
     <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
       ${blankTemplate}
@@ -108,7 +116,7 @@ export default function (data, type = 'vue') {
       }
     }
   }
-</script>`
+</script>`;
   } else {
     return `<!DOCTYPE html>
   <html>
@@ -150,6 +158,6 @@ export default function (data, type = 'vue') {
       })
     </script>
   </body>
-  </html>`
+  </html>`;
   }
-}
+}

package/packages/table/search.vue

@@ -1,40 +1,63 @@
 <template>
   <div class="th-table-search">
-    <template v-for="(item, index) in options">
-      <div
-        class="th-table-search-item"
+    <div
+      class="th-table-search-item"
+      v-for="(item, index) in options"
+      :key="index"
+    >
+      <span class="th-table-search-item-title">{{ item.options.name }}：</span>
+      <el-input
         v-if="item.type === 'input'"
-        :key="index"
-      >
-        <span class="th-table-search-item-title">{{ item.props.label }}：</span>
-        <el-input
-          v-model="params[item.props.prop]"
-          :style="{ width: item.width + 'px' }"
-          :placeholder="item.placeholder || '请输入'"
-          :size="item.size"
-          clearable
-        ></el-input>
-      </div>
-      <div
-        class="th-table-search-item"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :placeholder="item.options.placeholder || '请输入'"
+        :disabled="item.options.disabled"
+        clearable
+      ></el-input>
+      <el-date-picker
         v-if="item.type === 'date'"
-        :key="index"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :type="item.options.dateType || 'date'"
+        :format="item.options.format"
+        :value-format="item.options.valueFormat"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        clearable
       >
-        <span class="th-table-search-item-title">{{ item.props.label }}：</span>
-        <el-date-picker
-          v-model="params[item.props.prop]"
-          :style="{ width: item.width + 'px' }"
-          :type="item.dateType || 'date'"
-          :format="item.format"
-          :value-format="item.valueFormat"
-          :size="item.size"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
-        </el-date-picker>
-      </div>
-    </template>
+      </el-date-picker>
+      <el-select
+        v-if="item.type === 'select'"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :placeholder="item.options.placeholder || '请选择'"
+        :multiple="item.options.multiple"
+        :multiple-limit="item.options.multipleLimit"
+        :filterable="item.options.filterable"
+        :disabled="item.options.disabled"
+        clearable
+      >
+        <template v-if="item.options.remote">
+          <el-option
+            v-for="option in item.options.options"
+            :key="option[item.option.props.value]"
+            :label="option[item.option.props.label]"
+            :value="option[item.option.props.value]"
+          >
+          </el-option>
+        </template>
+        <template v-else>
+          <el-option
+            v-for="option in item.options.options"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          >
+          </el-option>
+        </template>
+      </el-select>
+    </div>
 
     <el-button type="primary" icon="el-icon-search" plain @click="doSearch"
       >查询</el-button
@@ -94,12 +117,14 @@ export default {
 
 <style lang="less" scoped>
 .th-table-search {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   &-item {
     display: inline-block;
     margin-right: 15px;
+    margin-bottom: 10px;
+    &-title {
+      font-size: 14px;
+    }
   }
   .th-table-search-item:last-child {
     margin-right: 20px !important;