tianheng-ui 0.0.46 → 0.0.49

package/packages/formMaking/GenerateFormItem.vue

@@ -1,5 +1,21 @@
 <template>
-  <el-form-item :label="widget.name" :prop="widget.model">
+  <el-form-item
+    :class="widget.model"
+    :label="widget.options.hideLabel || hideLabel ? '' : widget.name"
+    :label-width="
+      widget.options.hideLabel
+        ? '0'
+        : widget.options.isLabelWidth
+        ? `${widget.options.labelWidth}px`
+        : ''
+    "
+    :prop="
+      tableInfo
+        ? `${tableInfo.data.model}.${tableInfo.index}.${widget.model}`
+        : widget.model
+    "
+    :rules="rules[widget.model]"
+  >
     <template v-if="widget.type == 'input'">
       <el-input
         v-if="
@@ -10,7 +26,7 @@
         type="number"
         v-model.number="dataModel"
         :placeholder="widget.options.placeholder"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :disabled="widget.options.disabled"
         :readonly="widget.options.readonly"
         :clearable="widget.options.clearable"
@@ -24,7 +40,7 @@
         type="text"
         v-model="dataModel"
         :placeholder="widget.options.placeholder"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :disabled="widget.options.disabled"
         :readonly="widget.options.readonly"
         :clearable="widget.options.clearable"
@@ -49,7 +65,7 @@
         v-model="dataModel"
         :disabled="widget.options.disabled"
         :placeholder="widget.options.placeholder"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :maxlength="widget.options.maxlength"
         :clearable="widget.options.clearable"
         :show-word-limit="widget.options.showWordLimit"
@@ -63,7 +79,7 @@
     <template v-if="widget.type == 'number'">
       <el-input-number
         v-model="dataModel"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :step="widget.options.step"
         :controls-position="widget.options.controlsPosition ? 'right' : ''"
         :disabled="widget.options.disabled"
@@ -76,7 +92,7 @@
     <template v-if="widget.type == 'radio'">
       <el-radio-group
         v-model="dataModel"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :disabled="widget.options.disabled"
       >
         <template v-if="widget.options.buttonType">
@@ -121,7 +137,7 @@
     <template v-if="widget.type == 'checkbox'">
       <el-checkbox-group
         v-model="dataModel"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :disabled="widget.options.disabled"
         :min="widget.options.min"
         :max="widget.options.max"
@@ -179,7 +195,7 @@
         :clearable="widget.options.clearable"
         :arrowControl="widget.options.arrowControl"
         :value-format="widget.options.format"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
       >
       </el-time-picker>
       <template v-else>
@@ -195,7 +211,7 @@
           :editable="widget.options.editable"
           :clearable="widget.options.clearable"
           :arrowControl="widget.options.arrowControl"
-          :style="{ width: widget.options.width }"
+          :style="{ width: width ? width : widget.options.width }"
           :picker-options="widget.options.stretTimePickerOptions"
           @change="e => handleTimePicker(e)"
         >
@@ -209,7 +225,7 @@
           :editable="widget.options.editable"
           :clearable="widget.options.clearable"
           :arrowControl="widget.options.arrowControl"
-          :style="{ width: widget.options.width }"
+          :style="{ width: width ? width : widget.options.width }"
           :picker-options="widget.options.endTimePickerOptions"
         >
         </el-time-select>
@@ -228,7 +244,7 @@
         :disabled="widget.options.disabled"
         :editable="widget.options.editable"
         :clearable="widget.options.clearable"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
       >
       </el-date-picker>
     </template>
@@ -264,7 +280,7 @@
         :filterable="
           widget.options.allowCreate ? true : widget.options.filterable
         "
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
       >
         <el-option
           v-for="item in widget.options.remote
@@ -302,7 +318,10 @@
         :step="widget.options.step"
         :show-input="widget.options.showInput"
         :range="widget.options.range"
-        :style="{ width: widget.options.width, height: widget.options.height }"
+        :style="{
+          width: width ? width : widget.options.width,
+          height: widget.options.height
+        }"
         :show-tooltip="widget.options.showTooltip"
         :format-tooltip="
           val => formatTooltip(val, widget.options.formatTooltip)
@@ -316,7 +335,7 @@
       <!-- <fm-upload
         v-model="dataModel"
         :disabled="widget.options.disabled"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :width="widget.options.size.width"
         :height="widget.options.size.height"
         :token="widget.options.token"
@@ -381,7 +400,7 @@
     <template v-if="widget.type == 'editor'">
       <vue-editor
         v-model="dataModel"
-        :style="{ width: widget.options.width }"
+        :style="{ width: width ? width : widget.options.width }"
         :disabled="widget.options.disabled"
       >
       </vue-editor>
@@ -393,7 +412,10 @@
         :disabled="widget.options.disabled"
         :clearable="widget.options.clearable"
         :placeholder="widget.options.placeholder"
-        :style="{ width: widget.options.width, height: widget.options.height }"
+        :style="{
+          width: width ? width : widget.options.width,
+          height: widget.options.height
+        }"
         :options="widget.options.remoteOptions"
         :props="widget.options.props"
         :show-all-levels="widget.options.showAllLevels ? false : true"
@@ -411,6 +433,150 @@
     <template v-if="widget.type == 'text'">
       <span>{{ dataModel }}</span>
     </template>
+
+    <template v-if="widget.type == 'blank'">
+      <slot :name="widget.model" />
+    </template>
+
+    <template v-if="widget.type == 'table'">
+      <el-table
+        v-if="!widget.options.hidden"
+        :data="dataModel"
+        style="width: 100%"
+        border
+      >
+        <el-table-column
+          v-if="widget.options.isSerial"
+          label="序号"
+          type="index"
+          width="50"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-for="column in widget.list"
+          :key="column.key"
+          :label="column.name"
+          :prop="column.model"
+          :width="column.options.width"
+        >
+          <template slot-scope="scope">
+            <genetate-form-item
+              :models.sync="dataModel[scope.$index]"
+              :widget="column"
+              :remote="remote"
+              :rules="rules"
+              :hideLabel="true"
+              :tableInfo="{ index: scope.$index, data: widget }"
+              width="100%"
+              :slotKeys="slotKeys"
+            >
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
+              </template>
+            </genetate-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="widget.options.isDelete"
+          fixed="right"
+          label="操作"
+          width="60"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              style="color:#F56C6C"
+              type="text"
+              size="small"
+              @click.native.prevent="handleTableDelete(scope.$index)"
+            >
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+        <template v-if="widget.options.isAdd" slot="append">
+          <div
+            style="text-align: center;"
+            :style="{
+              borderTop:
+                dataModel && dataModel.length != 0 ? '' : '1px solid #EBEEF5'
+            }"
+          >
+            <el-button
+              type="text"
+              :disabled="widget.options.disabled"
+              @click="handleTableAdd"
+              >新增</el-button
+            >
+          </div>
+        </template>
+      </el-table>
+    </template>
+
+    <template v-if="widget.type == 'grid'">
+      <el-row
+        type="flex"
+        :gutter="widget.options.gutter ? widget.options.gutter : 0"
+        :justify="widget.options.justify"
+        :align="widget.options.align"
+      >
+        <el-col
+          v-for="(col, colIndex) in widget.columns"
+          :key="colIndex"
+          :span="col.span"
+        >
+          <genetate-form-item
+            v-for="el in col.list"
+            :key="el.key"
+            :models="models"
+            :rules="rules"
+            :remote="remote"
+            :slotKeys="slotKeys"
+            :widget="el"
+          >
+            <template v-for="name in slotKeys" :slot="name">
+              <slot :name="name" />
+            </template>
+          </genetate-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+    <template v-if="widget.type == 'tabs'">
+      <el-tabs v-model="widget.options.defaultValue">
+        <el-tab-pane
+          v-for="tabItem in widget.tabs"
+          :key="tabItem.value"
+          :label="tabItem.label"
+          :name="tabItem.value"
+        >
+          <genetate-form-item
+            v-for="el in tabItem.list"
+            :key="el.key"
+            :models="dataModel[tabItem.value]"
+            :rules="rules"
+            :remote="remote"
+            :slotKeys="slotKeys"
+            :widget="el"
+          >
+            <template v-for="name in slotKeys" :slot="name">
+              <slot :name="name" />
+            </template>
+          </genetate-form-item>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+
+    <template v-if="widget.type == 'divider'">
+      <el-divider
+        :content-position="widget.options.contentPosition"
+        :style="{ height: `${widget.options.height}px` }"
+      >
+        {{ widget.name }}
+      </el-divider>
+    </template>
+
     <el-dialog :visible.sync="dialogVisible" append-to-body>
       <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
@@ -421,7 +587,17 @@
 import FmUpload from "./Upload";
 import { VueEditor } from "vue2-editor";
 export default {
-  props: ["widget", "models", "rules", "remote"],
+  name: "genetate-form-item",
+  props: [
+    "widget",
+    "models",
+    "rules",
+    "remote",
+    "hideLabel",
+    "width",
+    "tableInfo",
+    "slotKeys"
+  ],
   components: {
     FmUpload,
     VueEditor
@@ -491,6 +667,16 @@ export default {
     },
     handleAvatarError() {
       console.log("上传失败！");
+    },
+    handleTableAdd() {
+      let dic = {};
+      this.widget.list.forEach(item => {
+        dic[item.model] = item.options.defaultValue;
+      });
+      this.dataModel.push(dic);
+    },
+    handleTableDelete(index) {
+      this.dataModel.splice(index, 1);
     }
   },
   watch: {

package/packages/formMaking/WidgetConfig.vue

@@ -16,6 +16,21 @@
         <el-input v-model="data.options.width"></el-input>
       </el-form-item>
 
+      <el-form-item
+        label="标签宽度"
+        v-if="Object.keys(data.options).indexOf('labelWidth') >= 0"
+      >
+        <div style="display: flex;">
+          <el-checkbox v-model="data.options.isLabelWidth">自定义</el-checkbox>
+          <el-input-number
+            v-model="data.options.labelWidth"
+            :min="0"
+            :max="200"
+            :disabled="!data.options.isLabelWidth"
+          ></el-input-number>
+        </div>
+      </el-form-item>
+
       <el-form-item
         label="高度"
         v-if="Object.keys(data.options).indexOf('height') >= 0"
@@ -54,6 +69,17 @@
         ></el-input>
       </el-form-item>
 
+      <el-form-item
+        label="对齐方式"
+        v-if="Object.keys(data.options).indexOf('contentPosition') >= 0"
+      >
+        <el-radio-group v-model="data.options.contentPosition">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="center">居中对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
       <el-form-item label="文件列表样式" v-if="data.type == 'imgupload'">
         <el-select
           v-model="data.options.listType"
@@ -163,7 +189,7 @@
       >
         <el-radio-group v-model="data.options.controlsPosition">
           <el-radio-button :label="false">两边</el-radio-button>
-          <el-radio-button :label="true">right</el-radio-button>
+          <el-radio-button :label="true">右边</el-radio-button>
         </el-radio-group>
       </el-form-item>
 
@@ -449,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
@@ -464,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"
@@ -794,7 +824,7 @@
         </template>
 
         <template v-else>
-          <el-form-item label="图片上传" :required="true">
+          <el-form-item label="文件上传" :required="true">
             <el-select
               class="remoteApis"
               v-model="data.options.remoteFunc"
@@ -879,7 +909,7 @@
             </li>
           </draggable>
           <div style="margin-left: 22px;">
-            <el-button type="text" @click="handleAddColumn">添加列</el-button>
+            <el-button type="text" @click="handleAddOption">添加列</el-button>
           </div>
         </el-form-item>
 
@@ -902,6 +932,121 @@
         </el-form-item>
       </template>
 
+      <template v-if="data.type == 'tabs'">
+        <el-form-item label="标签对齐方式">
+          <el-radio-group v-model="data.options.type" size="mini">
+            <el-radio-button label="">默认</el-radio-button>
+            <el-radio-button label="card">选项卡</el-radio-button>
+            <el-radio-button label="border-card">卡片化</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="选项卡位置">
+          <el-radio-group v-model="data.options.tabPosition" size="mini">
+            <el-radio-button label="top">顶部</el-radio-button>
+            <el-radio-button label="right">右侧</el-radio-button>
+            <el-radio-button label="bottom">底部</el-radio-button>
+            <el-radio-button label="left">左侧</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="选项">
+          <el-radio-group
+            v-model="data.options.remote"
+            size="mini"
+            style="margin-bottom:10px;"
+          >
+            <el-radio-button :label="false">静态数据</el-radio-button>
+            <el-radio-button :label="true">远端数据</el-radio-button>
+          </el-radio-group>
+          <div v-if="data.options.remote">
+            <el-select
+              class="remoteApis"
+              size="mini"
+              v-model="data.options.remoteFunc"
+              placeholder="请选择远端方法"
+            >
+              <template slot="prefix">
+                <div style="width:70px;">接口名</div>
+              </template>
+              <el-option-group
+                v-for="group in remoteApis"
+                :key="group.label"
+                :label="group.label"
+              >
+                <el-option
+                  v-for="item in group.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-option-group>
+            </el-select>
+
+            <el-input size="mini" style="" v-model="data.options.props.value">
+              <template slot="prepend">
+                <div style="width:30px;">值</div>
+              </template>
+            </el-input>
+            <el-input size="mini" style="" v-model="data.options.props.label">
+              <template slot="prepend">
+                <div style="width:30px;">标签</div>
+              </template>
+            </el-input>
+          </div>
+          <template v-else>
+            <el-radio-group v-model="data.options.defaultValue">
+              <draggable
+                tag="ul"
+                :list="data.tabs"
+                v-bind="{
+                  group: { name: 'tabs' },
+                  ghostClass: 'ghost',
+                  handle: '.drag-item'
+                }"
+                handle=".drag-item"
+              >
+                <li v-for="(item, index) in data.tabs" :key="index">
+                  <el-radio :label="item.value" style="margin-right: 5px;">
+                    <el-input
+                      v-model="item.value"
+                      style="width:90px;"
+                      size="mini"
+                      placeholder="value"
+                    ></el-input>
+                    <el-input
+                      v-model="item.label"
+                      style="width:90px;"
+                      size="mini"
+                      placeholder="label"
+                    ></el-input>
+                  </el-radio>
+                  <i
+                    class="drag-item"
+                    style="font-size: 16px;margin: 0 5px;cursor: move;"
+                    ><i class="iconfont icon-icon_bars"></i
+                  ></i>
+                  <el-button
+                    @click="handleOptionsRemove(index)"
+                    circle
+                    plain
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-minus"
+                    style="padding: 4px;margin-left: 5px;"
+                  ></el-button>
+                </li>
+              </draggable>
+            </el-radio-group>
+
+            <div style="margin-left: 22px;">
+              <el-button type="text" @click="handleAddOption"
+                >添加选项</el-button
+              >
+            </div>
+          </template>
+        </el-form-item>
+      </template>
+
       <template v-if="data.type != 'grid'">
         <el-form-item label="带入icon" v-if="data.type == 'input'">
           <el-input
@@ -1045,6 +1190,16 @@
             v-if="Object.keys(data.options).indexOf('readonly') >= 0"
             >完全只读</el-checkbox
           >
+          <el-checkbox
+            v-model="data.options.hidden"
+            v-if="Object.keys(data.options).indexOf('hidden') >= 0"
+            >隐藏
+          </el-checkbox>
+          <el-checkbox
+            v-model="data.options.hideLabel"
+            v-if="Object.keys(data.options).indexOf('hideLabel') >= 0"
+            >隐藏标签
+          </el-checkbox>
           <el-checkbox
             v-model="data.options.disabled"
             v-if="Object.keys(data.options).indexOf('disabled') >= 0"
@@ -1065,16 +1220,26 @@
             v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
             >使用箭头进行时间选择</el-checkbox
           >
+          <el-checkbox
+            v-model="data.options.isAdd"
+            v-if="Object.keys(data.options).indexOf('isAdd') >= 0"
+            >可新增</el-checkbox
+          >
           <el-checkbox
             v-model="data.options.isDelete"
             v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
-            >删除</el-checkbox
+            >可删除</el-checkbox
           >
           <el-checkbox
             v-model="data.options.isEdit"
             v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
             >编辑</el-checkbox
           >
+          <el-checkbox
+            v-model="data.options.isSerial"
+            v-if="Object.keys(data.options).indexOf('isSerial') >= 0"
+            >显示序号</el-checkbox
+          >
           <el-checkbox
             v-model="data.options.border"
             v-if="Object.keys(data.options).indexOf('border') >= 0"
@@ -1201,30 +1366,43 @@ export default {
         this.data.columns.splice(index, 1);
       } else if (this.data.type === "rate") {
         this.data.options.auxiliaryValue.splice(index, 1);
+      } else if (this.data.type === "tabs") {
+        this.data.tabs.splice(index, 1);
       } else {
         this.data.options.options.splice(index, 1);
       }
     },
     handleAddOption() {
+      if (this.data.type === "grid") {
+        this.data.columns.push({
+          span: "",
+          list: []
+        });
+        return;
+      }
+      if (this.data.type === "tabs") {
+        this.data.tabs.push({
+          label: `选项${this.data.tabs.length + 1}`,
+          value: `tab_${this.data.tabs.length + 1}`,
+          list: []
+        });
+        return;
+      }
       if (this.data.type === "rate") {
         this.data.options.auxiliaryValue.push("新选项");
         return;
       }
+
       if (this.data.options.showLabel) {
         this.data.options.options.push({
           value: "新选项",
           label: "新选项"
         });
-      } else {
-        this.data.options.options.push({
-          value: "新选项"
-        });
+        return;
       }
-    },
-    handleAddColumn() {
-      this.data.columns.push({
-        span: "",
-        list: []
+
+      this.data.options.options.push({
+        value: "新选项"
       });
     },
     generateRule() {