epic-designer-gold 0.0.49 → 1.0.1

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

@@ -0,0 +1,468 @@
+<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

@@ -0,0 +1,59 @@
+<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>