epic-designer-gold 1.0.1 → 1.0.2

package/packages/core/extensions/EDataSource/index.vue

@@ -1,468 +0,0 @@
-<template>
-  <div class="e-data-source">
-    <Button class="btn" @click="handleAdd">
-      <EIcon name="icon--epic--window-outline" class="mr-4px" />
-      <span>配置</span>
-      <span class="icon-numbers">{{ count || sourceData.length }}</span>
-    </Button>
-    <Drawer :size="960" v-model="show" append-to-body title="数据源">
-      <div class="drawer-content">
-        <div class="drawer-content-left">
-          <Button type="primary" class="btn" @click="addDataSource">
-            <EIcon name="icon--epic--add-rounded" class="mr-4px" />
-            <span>新增数据源</span>
-          </Button>
-          <div>
-            <div
-              class="source-item"
-              :class="{ active: item.id === formData?.id }"
-              v-for="item in sourceData"
-              :key="item.id"
-              @click="clickItem(item.id)"
-            >
-              <div class="source-item-title">
-                <div
-                  :style="{
-                    color: colorMap[item.method.toLocaleUpperCase()],
-                  }"
-                >
-                  {{ item.method.toLocaleUpperCase() }}
-                </div>
-                <div>{{ item.apiName }}</div>
-              </div>
-              <div @click="deleteItem(item.id)" class="source-item-icon">
-                <EIcon name="icon--epic--delete-outline-rounded" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="drawer-content-right">
-          <div class="content">
-            <div class="content-empty" v-if="!formData || !Object.keys(formData).length">请选择数据源</div>
-            <div class="content-form" v-else>
-              <Form ref="ruleFormRef" :model="formData" label-position="top" :rules="rules" :label-width="120">
-                <FormItem prop="apiName" label="接口名称">
-                  <Input clearable v-model="formData.apiName" placeholder="请输入接口名称"></Input>
-                </FormItem>
-                <FormItem prop="url" label="请求地址">
-                  <Input v-model="formData.url" clearable placeholder="请输入完整的请求地址"></Input>
-                </FormItem>
-                <FormItem label="请求方法" required>
-                  <RadioGroup v-model="formData.method">
-                    <RadioButton label="GET" value="get">GET</RadioButton>
-                    <RadioButton label="POST" value="post">POST</RadioButton>
-                    <RadioButton label="PUT" value="put">PUT</RadioButton>
-                    <RadioButton label="DELETE" value="delete">DELETE</RadioButton>
-                  </RadioGroup>
-                </FormItem>
-                <div class="form-flex">
-                  <FormItem prop="dataKey" style="width: 30%" label="标签键名">
-                    <Input v-model="formData.dataKey" clearable placeholder="请输入标签键名"></Input>
-                  </FormItem>
-                  <FormItem prop="dataValue" style="width: 30%" label="值键名">
-                    <Input v-model="formData.dataValue" clearable placeholder="请输入值键名"></Input>
-                  </FormItem>
-                  <FormItem style="width: 33%" label="数据位置">
-                    <Input v-model="formData.dataPath" clearable placeholder="多层嵌套使用.分隔"></Input>
-                  </FormItem>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    <div>请求参数</div>
-                    <Button @click="addParams" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.paramsList && formData?.paramsList.length">
-                    <div class="content-item" v-for="(it, i) in formData.paramsList" :key="it.value">
-                      <Input
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Input>
-                      <Input
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Input>
-                      <Button @click="deleteParams(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    <div>请求头</div>
-                    <Button @click="addHeader" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.headerList && formData?.headerList.length">
-                    <div class="content-item" v-for="(it, i) in formData.headerList" :key="i">
-                      <Input
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Input>
-                      <Input
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Input>
-                      <Button @click="deleteHeader(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-title">
-                    <div>请求体</div>
-                    <Button @click="addData" text type="primary" class="btn">
-                      <EIcon name="icon--epic--add-rounded" />
-                      添加
-                    </Button>
-                  </div>
-                  <div class="form-item-content" v-if="formData?.bodyList && formData?.bodyList.length">
-                    <div class="content-item" v-for="(it, index) in formData.bodyList" :key="index">
-                      <Input
-                        v-model="it.label"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数名"
-                      ></Input>
-                      <Input
-                        v-model="it.value"
-                        filterable
-                        allow-create
-                        style="width: 42%"
-                        :options="parameterArray"
-                        placeholder="参数值"
-                      ></Input>
-                      <Button @click="deleteData(i)" type="danger" circle>
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </Button>
-                      <!-- <div class="icon-bg">
-                        <EIcon style="color: #fff" name="icon--epic--delete-outline-rounded" />
-                      </div> -->
-                    </div>
-                  </div>
-                </div>
-                <div class="content-right-btn">
-                  <Button type="info" @click="testRequire">请求测试</Button>
-                  <Button type="primary" @click="save">保存</Button>
-                </div>
-                <!-- <FormItem label="表单初始化请求">
-                  <Switch v-model="formData.init" inline-prompt active-text="是" inactive-text="否"></Switch>
-                </FormItem> -->
-              </Form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Drawer>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed, onMounted, provide, reactive, ref, watch, watchEffect } from "vue";
-import { pluginManager, deepClone, EventBus } from "@epic-designer/utils";
-import type { ComponentSize, FormInstance, FormRules } from "element-plus";
-import { ElMessage } from "element-plus";
-import EIcon from "../../components/icon";
-import axios from "axios";
-import Cookies from "js-cookie";
-const Button = pluginManager.getComponent("button");
-const Drawer = pluginManager.getComponent("Drawer");
-const Input = pluginManager.getComponent("input");
-const FormItem = pluginManager.getComponent("FormItem");
-const Form = pluginManager.getComponent("Form");
-const RadioGroup = pluginManager.getComponent("RadioGroup");
-const RadioButton = pluginManager.getComponent("RadioButton");
-const Select = pluginManager.getComponent("select");
-const Switch = pluginManager.getComponent("switch");
-const emits = defineEmits(["update:modelValue", "update:sourceData"]);
-const ruleFormRef = ref<FormInstance>();
-const colorMap = {
-  GET: "#67c23a",
-  POST: "#e6a23c",
-  PUT: "#409eff",
-  DELETE: "#f56c6c",
-};
-const count = ref(0);
-
-interface RuleForm {
-  apiName: string;
-  url: string;
-  dataKey: string;
-  dataValue: string;
-  dataPath: string;
-}
-const rules = reactive<FormRules<RuleForm>>({
-  apiName: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
-  url: [{ required: true, message: "请输入请求地址", trigger: "blur" }],
-  dataKey: [{ required: true, message: "请输入标签键名", trigger: "blur" }],
-  dataValue: [{ required: true, message: "请输入值键名", trigger: "blur" }],
-});
-const show = ref(false);
-
-const sourceData = ref<any>([]);
-const formData = ref();
-const parameterArray = [
-  {
-    label: "1",
-    value: "1",
-  },
-];
-
-function handleAdd() {
-  show.value = true;
-}
-function getRandomCharacter() {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  return characters.charAt(Math.floor(Math.random() * characters.length));
-}
-function generateRandomString(length: number) {
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += getRandomCharacter();
-  }
-
-  return result;
-}
-function addDataSource() {
-  if (!formData.value || !!formData.value.id || !Object.keys(formData.value).length) {
-    formData.value = {
-      id: ``,
-      url: "",
-      body: {},
-      bodyList: [],
-      apiName: `数据源_${generateRandomString(5)}`,
-      method: "get",
-      params: {},
-      paramsList: [],
-      dataKey: "name",
-      headers: {},
-      headerList: [],
-      dataPath: "",
-      dataValue: "id",
-    };
-    sourceData.value.push(formData.value);
-  } else if (!formData.value.id) {
-    save();
-  }
-}
-function clickItem(id: string) {
-  if (!formData.value || !!formData.value.id || !Object.keys(formData.value).length) {
-    sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-    if (formData.value?.id === id) {
-      formData.value = {};
-    } else {
-      formData.value = sourceData.value.find((el: { id: string }) => el.id === id);
-      // formData.value = JSON.parse(JSON.stringify(obj));
-      formData.value.paramsList = Object.keys(JSON.parse(formData.value.params)).map((el) => {
-        return {
-          label: el,
-          value: JSON.parse(formData.value.params)[el],
-        };
-      });
-      formData.value.bodyList = Object.keys(JSON.parse(formData.value.body)).map((el) => {
-        return {
-          label: el,
-          value: JSON.parse(formData.value.body)[el],
-        };
-      });
-      formData.value.headerList = Object.keys(JSON.parse(formData.value.headers)).map((el) => {
-        return {
-          label: el,
-          value: JSON.parse(formData.value.headers)[el],
-        };
-      });
-    }
-  } else {
-    save();
-  }
-}
-function deleteItem(id: string) {
-  if (!id) {
-    sourceData.value = sourceData.value.filter((el: { id: string }) => el.id !== id);
-    formData.value = {};
-  } else {
-    EventBus.emit("deleteSourceData", id);
-    formData.value = {};
-  }
-}
-// 请求参数
-function addParams() {
-  formData.value?.paramsList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteParams(i: number) {
-  formData.value.paramsList.splice(i, 1);
-}
-// 请求头
-function addHeader() {
-  formData.value?.headerList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteHeader(i: number) {
-  formData.value.headerList.splice(i, 1);
-}
-// 请求体
-function addData() {
-  formData.value?.bodyList.push({
-    label: "",
-    value: "",
-  });
-}
-function deleteData(i: number) {
-  formData.value.bodyList.splice(i, 1);
-}
-
-onMounted(() => {
-  sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-});
-
-// 数据源保存时，接收数据
-EventBus.on("updateSource", (val: any) => {
-  sourceData.value = JSON.parse(JSON.stringify(pluginManager.getSourceData()));
-});
-async function testRequire() {
-  (ruleFormRef.value as any).validate(async (valid: boolean) => {
-    if (valid) {
-      try {
-        const params = {};
-        formData.value.paramsList.forEach((el: any) => {
-          params[el.label] = el.value;
-        });
-        const body = {};
-        formData.value.bodyList.forEach((el: any) => {
-          body[el.label] = el.value;
-        });
-        const headers = {};
-        formData.value.headerList.forEach((el: any) => {
-          headers[el.label] = el.value;
-        });
-        let res = await axios({
-          method: formData.value.method,
-          // url: formData.value.url,
-          // url: "http://localhost:3333/users",
-          url: formData.value.url,
-          params,
-          data: body,
-          headers: {
-            ...headers,
-            Authorization: "Bearer " + Cookies.get("Admin-Token"),
-          },
-        });
-        if (formData.value.dataPath) {
-          const arr = formData.value.dataPath.split(".");
-          const data = arr.reduce((pre: any, cur: any) => {
-            return pre[cur];
-          }, res.data);
-          if (data && data.length) {
-            ElMessage({
-              message: data.map((el: any) => {
-                return {
-                  label: el[formData.value.dataKey],
-                  value: el[formData.value.dataValue],
-                };
-              }),
-            });
-          } else {
-            ElMessage.info("配置错误");
-          }
-        } else {
-          if (res.data && res.data.length) {
-            ElMessage({
-              message: res.data.map((el: any) => {
-                return {
-                  label: el[formData.value.dataKey],
-                  value: el[formData.value.dataValue],
-                };
-              }),
-            });
-          } else {
-            ElMessage.info("配置错误");
-          }
-        }
-      } catch (e) {
-        ElMessage.error("请求失败");
-      } finally {
-      }
-    } else {
-      ElMessage.error("请填写必填项");
-    }
-  });
-}
-async function save() {
-  // EventBus.emit("updateSource", new Date());
-
-  formData.value.body = formData.value.bodyList.reduce((arr: Record<string, string>, cur: Record<string, string>) => {
-    arr[cur.label] = cur.value;
-    return arr;
-  }, {});
-  formData.value.params = formData.value.paramsList.reduce(
-    (arr: Record<string, string>, cur: Record<string, string>) => {
-      arr[cur.label] = cur.value;
-      return arr;
-    },
-    {}
-  );
-  formData.value.headers = formData.value.headerList.reduce(
-    (arr: Record<string, string>, cur: Record<string, string>) => {
-      arr[cur.label] = cur.value;
-      return arr;
-    },
-    {}
-  );
-  (ruleFormRef.value as any).validate((valid: boolean) => {
-    if (valid) {
-      // 编辑
-      if (formData.value.id) {
-        EventBus.emit("updateSourceData", {
-          ...formData.value,
-          body: JSON.stringify(formData.value.body),
-          params: JSON.stringify(formData.value.params),
-          headers: JSON.stringify(formData.value.headers),
-        });
-        formData.value = {};
-      } else {
-        EventBus.emit("saveSourceData", {
-          ...formData.value,
-          body: JSON.stringify(formData.value.body),
-          params: JSON.stringify(formData.value.params),
-          headers: JSON.stringify(formData.value.headers),
-        });
-        formData.value = {};
-      }
-    } else {
-      ElMessage.warning("请先完善表单");
-    }
-  });
-  // pluginManager.setSourceData(sourceData.value);
-  // emits("update:modelValue", sourceData.value);
-  // provide("setSourceData", sourceData.value);
-  // count.value = pluginManager.getSourceData().length;
-}
-</script>

package/packages/core/extensions/EInputSize/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <Input class="epic-input-size" v-model="size" v-model:value="size" type="number" min="0" placeholder="请输入">
-  <template #suffix>
-    <Select v-model:value="unit" v-model="unit" style="width: 68px" :options="unitArray" />
-  </template>
-  </Input>
-</template>
-<script lang="ts" setup>
-import { pluginManager } from '@epic-designer/utils'
-import { ref, watch, nextTick } from 'vue'
-const Input = pluginManager.getComponent('input')
-const Select = pluginManager.getComponent('select')
-const props = defineProps<{
-  modelValue?: string | number
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-const size = ref<string | null>(null)
-const unit = ref('px')
-const unitArray = [
-  { label: 'px', value: 'px' },
-  { label: '%', value: '%' },
-  { label: 'vw', value: 'vw' },
-  { label: 'vh', value: 'vh' },
-  { label: 'rem', value: 'rem' },
-  { label: 'em', value: 'em' },
-  { label: 'pt', value: 'pt' }
-]
-watch(() => props.modelValue, e => {
-  if (!e) return
-  // 默认传入数值时 单位默认为px
-  if (typeof e === 'number') {
-    size.value = String(e)
-    unit.value = 'px'
-    return
-  }
-  const num = parseFloat(e)
-  // 传入值为空或不正常时
-  if (isNaN(num)) {
-    size.value = null
-    return false
-  }
-  const regex = /^(\d+(\.\d+)?)(px|%|vw|vh|rem|em|pt){1}$/
-  const match = e.trim().match(regex)
-  size.value = match?.[1] ?? null
-  unit.value = match?.[3] ?? ''
-}, {
-  immediate: true
-})
-
-watch(() => unit.value + size.value, () => {
-  handleUpdate()
-})
-
-function handleUpdate() {
-  nextTick(() => emit('update:modelValue', size.value ? size.value + unit.value : undefined))
-}
-
-</script>