tianheng-ui 0.0.47 → 0.0.50

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: {