@xfu0401/form-generator 1.0.21 → 1.0.22

package/src/components/formGenerator/configComponents/DataConfig.vue

@@ -1,156 +0,0 @@
-<template>
-  <!-- 动态数据源配置 -->
-  <div>
-    <TableHead v-model="data.head" ref="TableHead" @confirm="handleRefresh" />
-    <el-form-item label="数据类型" v-if="data.type!==undefined">
-      <el-radio-group v-model="data.type" @input="handleRefresh">
-        <el-radio-button label="static">静态数据</el-radio-button>
-        <el-radio-button label="dynamic">动态数据</el-radio-button>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item v-if="data.head !== undefined" label="表头数据">
-      <el-button type="primary" plain size="small" @click="$refs.TableHead.open()">编辑数据</el-button>
-    </el-form-item>
-    <template v-if="data.type=='static'">
-      <!-- 树形结构增删改 -->
-      <FGTreeNode v-model="data.value" v-if="data.valueType=='tree'" @change="handleRefresh" />
-      <!-- 列表结构增删改 -->
-      <FGOptions
-        :options.sync="data.value"
-        v-else-if="data.valueType=='list'"
-        @change="handleRefresh"
-      />
-      <el-form-item label="数据内容" v-else>
-        <el-button type="primary" plain @click="$refs.JsonDialog.open()">编辑数据</el-button>
-        <JsonDialog ref="JsonDialog" v-model="data.value" @confirm="handleRefresh" />
-      </el-form-item>
-    </template>
-    <el-form-item label="数据内容" v-if="data.type=='dynamic'">
-      <el-button plain type="primary" @click="$refs.DataDialog.open()">编辑数据</el-button>
-      <DataDialog ref="DataDialog" v-model="data" />
-    </el-form-item>
-    <template v-if="data.props">
-      <el-form-item label="标签键名" v-if="data.props.label !== undefined">
-        <el-input v-model="data.props.label" placeholder="请输入标签键名" />
-      </el-form-item>
-      <el-form-item label="值键名" v-if="data.props.value !== undefined">
-        <el-input v-model="data.props.value" placeholder="请输入值键名" />
-      </el-form-item>
-      <el-form-item label="子级键名" v-if="data.props.children !== undefined">
-        <el-input v-model="data.props.children" placeholder="请输入子级键名" />
-      </el-form-item>
-      <el-form-item label="叶子节点键名" v-if="data.props.isLeaf !== undefined">
-        <el-input v-model="data.props.isLeaf" placeholder="请输入子级键名" />
-      </el-form-item>
-      <el-form-item label="图标键名" v-if="data.props.icon !== undefined">
-        <el-input v-model="data.props.icon" placeholder="请输入子级键名" />
-      </el-form-item>
-      <el-form-item label="类键名" v-if="data.props.className !== undefined">
-        <el-input v-model="data.props.className" placeholder="请输入子级键名" />
-      </el-form-item>
-      <template v-if="data.type=='dynamic'">
-        <el-form label-position="top" size="small" v-if="isPage">
-          <el-form-item label="接口响应数据中总条目数的字段名称(分页)" v-if="data.props.total !== undefined">
-            <el-input v-model="data.props.total" placeholder />
-          </el-form-item>
-          <el-form-item label="接口响应数据中列表数据的字段名称(分页)" v-if="data.props.records !== undefined">
-            <el-input v-model="data.props.records" placeholder />
-          </el-form-item>
-          <el-form-item label="请求接口时页码的参数名称(分页)" v-if="data.props.current !== undefined">
-            <el-input v-model="data.props.current" placeholder />
-          </el-form-item>
-          <el-form-item label="请求接口时条目数的参数名称(分页)" v-if="data.props.size !== undefined">
-            <el-input v-model="data.props.size" placeholder />
-          </el-form-item>
-        </el-form>
-      </template>
-
-      <template v-if="data.props &&data.props.request">
-        <el-divider>请求数据</el-divider>
-        <el-form-item v-for="(value, key) in data.props.request" :key="key" :label="key + ' 键名'">
-          <el-input v-model="data.props.request[key]" />
-        </el-form-item>
-      </template>
-      <template v-if="data.props &&data.props.response">
-        <el-divider>响应数据</el-divider>
-        <el-form-item v-for="(value, key) in data.props.response" :key="key" :label="key + ' 键名'">
-          <el-input v-model="data.props.response[key]" />
-        </el-form-item>
-      </template>
-      <el-form-item>
-        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
-      </el-form-item>
-    </template>
-  </div>
-</template>
-
-<script>
-import { deepClone } from "../utils";
-import DataDialog from "./DataDialog";
-import FGTreeNode from "@/components/huComponents/FGTreeNode.vue";
-import FGOptions from "@/components/huComponents/FGOptions.vue";
-import JsonDialog from "@/components/editor/JsonDialog";
-import TableHead from "./TableHead";
-import store from "@/store";
-export default {
-  name: "DataConfig",
-  components: {
-    FGTreeNode,
-    DataDialog,
-    JsonDialog,
-    TableHead,
-    FGOptions,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-    // 是否分页
-    isPage: {
-      type: Boolean,
-      default: false,
-    },
-    // 数据类型，若为空则可以手动选择，若有数据则固定位只能静态/动态
-    dateType: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      data: {},
-      activeNames: [],
-    };
-  },
-  watch: {
-    data: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) {
-          this.$emit("input", newValue);
-        }
-      },
-    },
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.data)) {
-          this.data = deepClone(this.value);
-        }
-      },
-    },
-  },
-  methods: {
-    // 刷新
-    handleRefresh() {
-      store.commit("SET_REFRESH");
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-</style>

package/src/components/formGenerator/configComponents/DataDialog.vue

@@ -1,188 +0,0 @@
-<template>
-  <!-- 动态数据源配置 -->
-  <FGDialog ref="FGDialog" title="动态数据" width="900px" top="8vh">
-    <el-tabs v-model="active" tab-position="left" class="Fg-data-config">
-      <el-tab-pane label="请求配置">
-        <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small">
-          <el-form-item label="请求链接" prop="url">
-            <el-input v-model="form.url" maxlength="100"></el-input>
-          </el-form-item>
-          <el-form-item label="请求方式" prop="method">
-            <el-radio-group v-model="form.method">
-              <el-radio label="get">GET</el-radio>
-              <el-radio label="post">POST</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="数据类型" prop="reDataType" required>
-            <el-radio-group v-model="form.reDataType">
-              <el-radio label="JSON">JSON</el-radio>
-              <el-radio label="FormData">FormData</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="请求数据" prop="resource">
-            <el-table v-show="requestData.length" :data="requestData" border size="small" stripe>
-              <el-table-column prop="label" label="键名" align="center">
-                <template slot-scope="scope">
-                  <el-input v-model="scope.row.label" maxlength="50" clearable></el-input>
-                </template>
-              </el-table-column>
-              <el-table-column prop="value" label="键值" align="center">
-                <template slot-scope="scope">
-                  <el-input v-model="scope.row.value" maxlength="50" clearable></el-input>
-                </template>
-              </el-table-column>
-              <el-table-column fixed="right" label="操作" width="120" align="center">
-                <template slot-scope="scope">
-                  <el-button @click="delRequest(scope.$index)" type="text">移除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <el-button icon="el-icon-plus" @click="addRequest()" type="text">添加</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="submitForm('form')">测试接口</el-button>
-          </el-form-item>
-          <CodeJson v-if="isFinish" :value="responseData" />
-        </el-form>
-      </el-tab-pane>
-      <el-tab-pane label="数据处理">
-        <CodeEditor
-          v-if="active==1"
-          v-model="form.response"
-          mode="text/javascript"
-          name="onParse"
-          params="response"
-          placeholder="// response 为接口请求成功时返回的数据"
-        />
-      </el-tab-pane>
-      <el-tab-pane label="错误处理">
-        <CodeEditor
-          v-if="active==2"
-          v-model="form.error"
-          mode="text/javascript"
-          name="onError"
-          params="error"
-          placeholder="// error 为接口请求失败时返回的数据"
-        />
-      </el-tab-pane>
-    </el-tabs>
-    <div slot="footer">
-      <el-button @click="$refs.FGDialog.close()">取消</el-button>
-      <el-button type="primary" @click="confirm('form')">确认</el-button>
-    </div>
-  </FGDialog>
-</template>
-
-<script>
-import { deepClone } from "../utils";
-import { requestUrl } from "@/api/data";
-import CodeJson from "@/components/editor/CodeJson";
-import CodeEditor from "@/components/editor/CodeEditor";
-
-export default {
-  name: "DataDialog",
-  components: {
-    CodeJson,
-    CodeEditor,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      active: 0,
-      form: {},
-      requestData: [],
-      responseData: null,
-      rules: {
-        url: [{ required: true, message: "请输入请求链接" }],
-        method: [{ required: true, message: "请选择请求类型" }],
-      },
-      isFinish: false, // 是否测试完成
-    };
-  },
-
-  methods: {
-    open() {
-      this.form = deepClone(this.value);
-      this.isFinish = false;
-      this.requestData = [];
-      this.responseData = null;
-      if (this.value.request) {
-        for (const key in this.value.request) {
-          this.requestData.push({ label: key, value: this.value.request[key] });
-        }
-      }
-      this.$refs.FGDialog.open();
-    },
-    submitForm(formName) {
-      this.form.request = {};
-      this.requestData.forEach((item) => {
-        if (item.label) this.form.request[item.label] = item.value;
-      });
-      this.isFinish = false;
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          requestUrl(
-            this.form.url,
-            this.form.method,
-            this.form.request,
-            this.form.reDataType
-          )
-            .then((res) => {
-              if (res.code == 1) {
-                this.responseData = res.result;
-              } else {
-                this.$message.error(res.msg);
-              }
-              this.isFinish = true;
-            })
-            .catch((error) => {
-              this.isFinish = true;
-            });
-        } else {
-          console.log("error submit!!");
-
-          return false;
-        }
-      });
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
-    },
-    confirm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (!valid) return;
-        this.form.request = {};
-        this.requestData.forEach((item) => {
-          if (item.label) this.form.request[item.label] = item.value;
-        });
-        this.$emit("input", this.form);
-        this.$refs.FGDialog.close();
-      });
-    },
-    addRequest() {
-      this.requestData.push({ label: "", value: "" });
-    },
-    delRequest(index) {
-      this.requestData.splice(index, 1);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-data-config {
-  height: 100%;
-  .el-tabs__content {
-    height: 100%;
-  }
-  .el-tab-pane {
-    height: 100%;
-    overflow: auto;
-  }
-}
-</style>

package/src/components/formGenerator/configComponents/EventConfig.vue

@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <el-form-item label="eventName">
-      <el-select v-model="event.eventName" multiple placeholder="请选择">
-        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name"></el-option>
-      </el-select>
-    </el-form-item>
-    <template v-for="(item,key) in event">
-      <el-form-item :label="key" :key="key" v-if="key!=='eventName'">
-        <el-button type="primary" @click="$refs[key+'Editor'][0].open(item.code)">编写代码</el-button>
-        <CodeDialog
-          :ref="key+'Editor'"
-          :name="item.name"
-          :params="item.params"
-          mode="text/javascript"
-          v-model="item.code"
-          :placeholder="item.placeholder"
-        />
-      </el-form-item>
-    </template>
-  </div>
-</template>
-
-<script>
-import CodeDialog from "@/components/editor/CodeDialog";
-
-export default {
-  name: "EventConfig",
-  components: {
-    CodeDialog,
-  },
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-    list: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    event: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/formGenerator/configComponents/PageConfig.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <el-form-item label="位置" v-if="pageObj.background !== undefined">
-      <el-select v-model="pageObj.position" :style="{ width: '100%' }">
-        <el-option label="居中" value="center" />
-        <el-option label="左对齐" value="left" />
-        <el-option label="右对齐" value="right" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="组件布局" v-if="pageObj.layout !== undefined">
-      <el-select v-model="pageObj.layout" :style="{ width: '100%' }" multiple>
-        <el-option v-for="item in layouts" :key="item" :label="item" :value="item" />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="每页条目个数" v-if="pageObj.size !== undefined">
-      <el-input-number v-model="pageObj.size" min="1" />
-    </el-form-item>
-    <el-form-item label="显示背景色" v-if="pageObj.background !== undefined">
-      <el-switch v-model="pageObj.background" />
-    </el-form-item>
-    <el-form-item label="使用小型分页样式" v-if="pageObj.small !== undefined">
-      <el-switch v-model="pageObj.small" />
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      // pageObj,
-      layouts: ["sizes", "prev", "pager", "next", "jumper", "total"],
-    };
-  },
-  computed: {
-    pageObj: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-};
-</script>
-
-<style>
-</style>

package/src/components/formGenerator/configComponents/RegConfig.vue

@@ -1,105 +0,0 @@
-<template>
-  <div>
-    <!-- 验证配置 -->
-    <el-form-item label="校验规则">
-      <el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">添加规则</el-button>
-    </el-form-item>
-    <div v-for="(item, index) in regList" :key="index" class="Fg-reg-item">
-      <span class="close-btn" @click="regList.splice(index, 1)">
-        <i class="el-icon-close" />
-      </span>
-      <el-form-item label="表达式">
-        <el-autocomplete
-          class="Fg-reg-autocomplete"
-          v-model="item.pattern"
-          :fetch-suggestions="querySearch"
-          placeholder="请输入正则，如：/^[0-9]*$/"
-          @select="handleSelect"
-        >
-          <template slot-scope="{ item }">
-            <div class="label">{{ item.label }}</div>
-            <!-- <span class="value">{{ item.value }}</span> -->
-          </template>
-        </el-autocomplete>
-        <!-- <el-input v-model="item.pattern" placeholder="请输入正则，如：/^[0-9]*$/"></el-input> -->
-      </el-form-item>
-      <el-form-item label="错误提示" style="margin-bottom: 0">
-        <el-input v-model="item.message" placeholder="请输入错误提示" />
-      </el-form-item>
-    </div>
-  </div>
-</template>
-
-<script>
-import rules from "../utils/rules";
-export default {
-  name: "RegConfig",
-  components: {},
-  props: {
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      rules,
-    };
-  },
-  computed: {
-    regList: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-  methods: {
-    addReg() {
-      this.regList.push({
-        pattern: "",
-        message: "",
-      });
-    },
-    querySearch(queryString, cb) {
-      const results = queryString
-        ? rules.filter(this.createFilter(queryString))
-        : rules;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        return (
-          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
-          0
-        );
-      };
-    },
-    handleSelect(item) {},
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.Fg-reg-autocomplete {
-  width: 100%;
-  // li {
-  //   line-height: normal;
-  //   padding: 7px;
-  //   .label {
-  //     text-overflow: ellipsis;
-  //     overflow: hidden;
-  //   }
-  //   .value {
-  //     font-size: 12px;
-  //     color: #b4b4b4;
-  //   }
-  //   .highlighted .value {
-  //     color: #ddd;
-  //   }
-  // }
-}
-</style>

package/src/components/formGenerator/configComponents/ShadowConfig.vue

@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <el-form-item label="模式">
-      <el-radio-group v-model="formValue.type">
-        <el-radio-button label>Outset</el-radio-button>
-        <el-radio-button label="inset">Inset</el-radio-button>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="颜色">
-      <InputColor v-model="formValue.color" />
-    </el-form-item>
-    <el-form-item label="x轴偏移量">
-      <InputNumber v-model="formValue.x" />
-    </el-form-item>
-    <el-form-item label="y轴偏移量">
-      <InputNumber v-model="formValue.y" />
-    </el-form-item>
-    <el-form-item label="模糊半径">
-      <InputNumber v-model="formValue.fuzzy" />
-    </el-form-item>
-    <el-form-item label="扩散半径">
-      <InputNumber v-model="formValue.spread" />
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-import InputNumber from "@/components/huComponents/InputNumber.vue";
-import InputColor from "@/components/huComponents/InputColor.vue";
-
-export default {
-  name: "ShadowConfig",
-  components: { InputNumber, InputColor },
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      formValue: { x: "", y: "", fuzzy: "", spread: "", color: "", type: "" },
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      const boxShadow = this.value.split(" ");
-      this.formValue = {
-        x: boxShadow[0] || "",
-        y: boxShadow[1] || "",
-        fuzzy: boxShadow[2] || "",
-        spread: boxShadow[3] || "",
-        color: boxShadow[4] || "",
-        type: boxShadow[5] || "",
-      };
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(newValue) {
-        if (newValue) this.init();
-      },
-    },
-    formValue: {
-      immediate: true,
-      deep: true,
-      handler() {
-        const boxShadow =
-          this.formValue.x +
-          " " +
-          this.formValue.y +
-          " " +
-          this.formValue.fuzzy +
-          " " +
-          this.formValue.spread +
-          " " +
-          this.formValue.color +
-          " " +
-          this.formValue.type;
-        if (boxShadow !== this.value) {
-          this.$emit("input", boxShadow);
-        }
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>