tianheng-ui 0.1.39 → 0.1.41

package/packages/FormMaking/FormConfig.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="form-config">
-    <el-form
-      :model="config"
-      label-position="left"
-      label-width="80px"
-      size="small"
-      :rules="formRules"
-      ref="formRef"
-    >
-      <el-collapse v-model="collapseValue">
-        <el-collapse-item title="表单配置" name="group-form">
-          <el-form-item prop="fieldsType" required>
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="字段的配置方式"
-              placement="top"
-            >
-              <span style="color: #409EFF;">字段类型</span>
-            </el-tooltip>
-            <el-radio-group v-model="config.fieldsType">
-              <el-radio-button label="custom">自定义</el-radio-button>
-              <el-radio-button label="fieldsApi">接口导入</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            v-if="config.fieldsType === 'fieldsApi'"
-            prop="fieldsApi"
-            required
-          >
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="使用接口的出参配置可选字段"
-              placement="top"
-            >
-              <span style="color: #409EFF;">字段接口</span>
-            </el-tooltip>
-            <el-select
-              v-model="config.fieldsApi"
-              style="width:100%"
-              clearable
-              placeholder="请选择"
-              no-data-text="暂无接口，请前往【数据源模块】创建"
-              @change="handleFieldsApiChange"
-            >
-              <el-option
-                v-for="item in Object.values(apiConfig)"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="表单标题" prop="title" required>
-            <el-input
-              v-model="config.title"
-              placeholder="请输入"
-              clearable
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="表单宽度">
-            <el-input v-model="config.width"></el-input>
-          </el-form-item>
-          <el-form-item label="组件库">
-            <el-radio-group v-model="config.ui">
-              <el-radio-button label="element">Element</el-radio-button>
-              <el-radio-button label="vant" disabled>Vant</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="组件尺寸">
-            <el-radio-group v-model="config.size">
-              <el-radio-button label="medium">medium</el-radio-button>
-              <el-radio-button label="small">small</el-radio-button>
-              <el-radio-button label="mini">mini</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-collapse-item>
-
-        <el-collapse-item title="数据配置" name="group-resultData">
-          <el-form-item>
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="一般用于编辑和详情的数据回显"
-              placement="top"
-            >
-              <span style="color: #409EFF;">数据回填</span>
-            </el-tooltip>
-            <el-select
-              v-model="config.mounted.api"
-              value-key="id"
-              clearable
-              placeholder="请选择数据方法"
-              no-data-text="暂无接口，请前往【接口模块】创建"
-            >
-              <el-option
-                v-for="item in Object.values(apiConfig)"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="标签配置" name="group-label">
-          <el-form-item label="标签宽度">
-            <el-input-number
-              v-model="config.labelWidth"
-              :min="0"
-              :step="5"
-            ></el-input-number>
-          </el-form-item>
-          <el-form-item label="对齐方式">
-            <el-radio-group v-model="config.labelPosition">
-              <el-radio-button label="left">左对齐</el-radio-button>
-              <el-radio-button label="right">右对齐</el-radio-button>
-              <el-radio-button label="top">顶部对齐</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="属性配置" name="group-attributes">
-          <el-form-item label-width="0">
-            <el-checkbox v-model="config.disabled">禁用 </el-checkbox>
-            <el-checkbox v-model="config.hideLabel">隐藏标签 </el-checkbox>
-          </el-form-item>
-        </el-collapse-item>
-      </el-collapse>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["config", "apiConfig"],
-  data() {
-    return {
-      collapseValue: [
-        "group-form",
-        "group-resultData",
-        "group-label",
-        "group-attributes"
-      ],
-      formRules: {
-        fieldsType: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ],
-        fieldsApi: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ],
-        title: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ]
-      }
-    };
-  },
-  methods: {
-    handleFieldsApiChange() {
-      this.$emit("fieldsChange");
-    },
-    formValidate() {
-      return new Promise((resolve, reject) => {
-        this.$refs.formRef.validate(valid => {
-          resolve(valid);
-        });
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.form-config {
-  .el-collapse-item__header {
-    padding: 0 10px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #f5f7f9;
-  }
-  .el-collapse-item__wrap {
-    padding: 10px;
-  }
-  .el-radio-button__inner {
-    padding: 7px !important;
-  }
-}
-</style>