tianheng-ui 0.0.47 → 0.0.50

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() {