@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.5

package/src/formily/DataBinding/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="data-binding">
+    <VueForm :schema="config" :model-value="formData" />
+    <div class="setter-actions" @click="onClickIcon">
+      <span class="title">
+        <b class="title-icon">
+          <svg
+            fill="currentColor"
+            preserveAspectRatio="xMidYMid meet"
+            width="20"
+            height="20"
+            viewBox="0 0 1024 1024"
+            data-spm-anchor-id="a2q5o.26736379.0.i29.1c952a4bJg2W1k"
+          >
+            <path
+              d="M596.32 263.392c18.048 6.56 27.328 26.496 20.8 44.512l-151.04 414.912a34.72 34.72 0 1 1-65.28-23.744l151.04-414.912a34.72 34.72 0 0 1 44.48-20.768zM220.64 192H273.6v55.488H233.024c-26.112 0-38.464 14.4-38.464 44.544v134.304c0 42.496-19.936 71.264-59.104 85.664 39.168 16.448 59.104 44.544 59.104 85.664v134.976c0 28.8 12.352 43.84 38.464 43.84H273.6V832H220.672c-30.24 0-53.6-10.272-70.08-29.44-15.136-17.856-22.72-42.496-22.72-72.64v-128.832c0-19.872-4.096-34.24-12.352-43.2-9.6-10.944-26.784-16.416-51.52-17.792v-56.192c24.736-1.376 41.92-7.52 51.52-17.824 8.256-9.6 12.384-24 12.384-43.168V294.784c0-30.848 7.552-55.488 22.688-73.312C167.04 201.6 190.4 192 220.672 192z m529.792 0h52.896c30.24 0 53.6 9.6 70.08 29.44 15.136 17.856 22.72 42.496 22.72 73.344v128.128c0 19.2 4.096 34.24 13.024 43.84 8.96 9.6 26.112 15.776 50.848 17.152v56.192c-24.736 1.376-41.92 6.848-51.52 17.824-8.256 8.896-12.384 23.296-12.384 43.168v128.8c0 30.176-7.552 54.816-22.688 72.64-16.48 19.2-39.84 29.472-70.08 29.472h-52.896v-55.488h40.544c25.408 0 38.464-15.104 38.464-43.84v-135.04c0-41.088 19.232-69.184 59.104-85.632-39.872-14.4-59.104-43.168-59.104-85.664V292.032c0-30.144-13.056-44.544-38.464-44.544H750.4V192z"
+            ></path>
+          </svg>
+        </b>
+      </span>
+    </div>
+    <el-dialog
+      v-model="dialogVisible"
+      title="变量绑定"
+      width="80%"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="variable-dialog-content">
+        <div class="variable-selector">
+          <p class="variable-title">变量列表</p>
+          <div class="variable-selector-inner">
+            <ul class="variable-selector-category">
+              <li class="active">数据源</li>
+            </ul>
+            <div class="variable-selector-items-container">
+              <div class="selector-search-control">
+                <el-input
+                  v-model="keyword"
+                  @input="onInputChange"
+                  placeholder="搜索"
+                  :suffix-icon="Search"
+                />
+              </div>
+              <ul class="variable-selector-items">
+                <li
+                  v-for="item in itemList"
+                  :key="item.value"
+                  @click="onItemClick(item)"
+                >
+                  {{ item.label }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="variable-content">
+          <p class="variable-title">变量</p>
+          <div class="code-control">
+            <v-ace-editor
+              v-model:value="content"
+              :options="{ showPrintMargin: false }"
+              theme="chrome"
+              lang="typescript"
+              style="height: 320px"
+            />
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel">取消</el-button>
+          <el-button type="primary" @click="onConfirm"> 确定 </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-ignore
+import { PropType, computed, reactive, ref, watch, defineProps, defineEmits } from 'vue';
+import '../../config/ace.config';
+import { VAceEditor } from 'vue3-ace-editor';
+import { VueForm } from '@jt/formily';
+import { Search } from '@jt/icons-vue';
+import { DataSource } from '@jt/low-code-core';
+const props = defineProps({
+  schema: Object,
+  modelValue: String,
+  sourceList: {
+    type: Array as PropType<DataSource[]>,
+    default: () => [],
+  },
+});
+const emits = defineEmits(['update:modelValue', 'getBindingValue']);
+
+const dialogVisible = ref(false);
+// 绑定的内容
+const content = ref('');
+// schema唯一表单项的key
+const key = 'value';
+// 表单数据
+const formData = reactive<any>({});
+// 搜索数据源名称关键字
+const keyword = ref('');
+// 展示的列表
+const itemList = ref([]);
+// 完整的列表
+const stateList = computed(() => {
+  const defaultList = [
+    {
+      label: 'state.form',
+      value: '$form',
+    },
+    {
+      label: 'state.urlParams',
+      value: '$state.urlParams',
+    },
+  ];
+  if (Array.isArray(props.sourceList)) {
+    return [
+      ...defaultList,
+      ...props.sourceList.map(v => ({
+        label: `state.${v.name}`,
+        value: `$state.${v.name}`,
+      })),
+    ];
+  }
+  return defaultList;
+});
+// 表单schema配置
+const config = computed(() => ({
+  [key]: {
+    ...props.schema,
+  },
+}));
+watch(
+  () => props.modelValue,
+  val => {
+    content.value = val;
+  },
+  { immediate: true }
+);
+watch(
+  stateList,
+  list => {
+    itemList.value = list;
+  },
+  { immediate: true, deep: true }
+);
+/* 点击图标触发的事件 */
+const onClickIcon = () => {
+  dialogVisible.value = true;
+};
+/* 点击对话框确定按钮 */
+const onConfirm = () => {
+  dialogVisible.value = false;
+  // 抛出事件更新值
+  emits('update:modelValue', content.value);
+  // 抛出事件 由模拟器返回真实数据
+  emits('getBindingValue', value => {
+    // FIXME: formData变化 展示数据不变化
+    formData[key] = value;
+  });
+};
+/* 选中state */
+const onItemClick = item => {
+  content.value = item.value;
+};
+/* 点击对话框取消按钮 */
+const onCancel = () => {
+  dialogVisible.value = false;
+};
+/* 关键字输入框输入值变化 */
+const onInputChange = val => {
+  itemList.value = stateList.value.filter(v => v.label.includes(val));
+};
+</script>
+
+<style lang="scss" scoped>
+.data-binding {
+  position: relative;
+  .setter-actions {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    .title {
+      background: #006cff;
+      color: #fff !important;
+      border-radius: 3px;
+      .title-icon {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .only-icon {
+      background: #fff;
+      color: #8f9bb3;
+    }
+  }
+  &:deep(.formily-element-plus-form-item-control-content-component) {
+    justify-content: flex-start;
+  }
+}
+.variable-dialog-content {
+  display: flex;
+  box-sizing: border-box;
+  .variable-selector {
+    width: 270px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    .variable-selector-inner {
+      display: flex;
+      border: 1px solid rgba(31, 56, 88, 0.3);
+      border-radius: 3px;
+      height: calc(100% - 28px);
+      .variable-selector-category {
+        width: 110px;
+        flex-shrink: 0;
+        flex-grow: 0;
+        border-right: 1px solid rgba(31, 56, 88, 0.2);
+        li {
+          height: 28px;
+          line-height: 28px;
+          padding: 0 12px;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .active {
+          background: rgba(31, 56, 88, 0.06);
+        }
+      }
+      .variable-selector-items-container {
+        width: 157px;
+        .selector-search-control {
+          margin: 10px;
+          height: 30px;
+        }
+        .variable-selector-items {
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: 270px;
+          li {
+            height: 28px;
+            line-height: 28px;
+            padding: 0 12px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        li:hover {
+          background: rgba(31, 56, 88, 0.04);
+        }
+      }
+    }
+  }
+  .variable-content {
+    margin-left: 12px;
+    flex-grow: 1;
+  }
+  .variable-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/formily/DataSource/index.ts

@@ -0,0 +1,22 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+import JtDataSource from '../../dataSource/index.vue';
+
+export type JtDataSourceProps = typeof JtDataSource;
+
+const TransformJtDataSource = transformComponent<JtDataSourceProps>(
+  JtDataSource,
+  {
+    change: 'update:modelValue',
+  }
+);
+
+export const ActivityBar = connect(
+  TransformJtDataSource,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default ActivityBar;

package/src/formily/MenuTable/PageList.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="page-list">
+    <div class="input" style="background-color: #f7f7f7">
+      <el-input
+        placeholder="搜索..."
+        :prefix-icon="Search"
+        v-model="searchValue"
+        clearable
+      />
+    </div>
+    <div class="title" style="background-color: #eeeeee">
+      {{ project.projectName }}（项目名称）
+    </div>
+    <ul class="name-list">
+      <template :key="page.id" v-for="page in pages">
+        <li class="page-item" @click="bindPage(page)">
+          {{ page.title }}
+        </li>
+      </template>
+    </ul>
+    <div v-if="modelValue" class="show-area" style="background-color: #f7f7f7">
+      <span>绑定页面：{{ pageName }}</span>
+      <span class="remove-icon" @click="unbindPage">
+        <el-icon><CircleClose /></el-icon>
+        <span style="padding-left: 5px">移除</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import {
+  computed,
+  ref,
+  watch,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
+import { Search, CircleClose } from '@jt/icons-vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    project: any;
+  }>(),
+  {
+    modelValue: 0,
+  }
+);
+
+const emits = defineEmits(['update:modelValue']);
+
+// 输入的搜索关键字
+const searchValue = ref('');
+
+// 当前绑定的页面名
+const pageName = ref('');
+
+// 当前展示的页面列表（不包括关键字过滤掉的）
+const pages = computed(() =>
+  props.project.pages
+    ? props.project.pages
+        .map(page => ({ title: page.title, id: page.id }))
+        .filter(p => p.title.includes(searchValue.value))
+    : []
+);
+watch(
+  () => props.modelValue,
+  id => {
+    pageName.value = pages.value.find(page => page.id === id)?.title ?? '';
+  },
+  { immediate: true }
+);
+
+/* 点击列表项绑定页面或者覆盖上一个绑定的页面 */
+const bindPage = page => {
+  emits('update:modelValue', page.id);
+  pageName.value = page.title;
+};
+
+/* 点击移除图标解绑页面 */
+const unbindPage = () => {
+  emits('update:modelValue', 0);
+  pageName.value = '';
+};
+</script>
+
+<style lang="scss" scoped>
+.page-list {
+  flex: 1;
+  margin-bottom: 18px;
+  border: 1px solid #6b7280;
+  border-radius: 5px;
+  overflow: hidden;
+  .input,
+  .title {
+    padding: 10px 15px 10px 15px;
+  }
+  .name-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    height: 150px;
+    li {
+      padding-left: 20px;
+      padding-right: 20px;
+      line-height: 30px;
+      cursor: pointer;
+    }
+  }
+  .show-area {
+    padding: 10px 15px 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    .remove-icon {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+.page-item {
+  transition: all 0.3s ease-in-out;
+}
+.page-item:hover {
+  background-color: #f5f7fa;
+}
+</style>

package/src/formily/MenuTable/index.ts

@@ -0,0 +1,19 @@
+import { connect, mapProps } from '@formily/vue';
+import { transformComponent } from '@jt/formily';
+import JtMenuTable from './index.vue';
+
+export type JtMenuTableProps = typeof JtMenuTable;
+
+const TransformJtMenuTable = transformComponent<JtMenuTableProps>(JtMenuTable, {
+  change: 'update:modelValue',
+});
+
+export const MenuTable = connect(
+  TransformJtMenuTable,
+  mapProps({
+    value: 'modelValue',
+    readOnly: 'readonly',
+  })
+);
+
+export default MenuTable;

package/src/formily/MenuTable/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-table
+    :data="menuTree"
+    style="width: 100%"
+    row-key="name"
+    default-expand-all
+  >
+    <el-table-column prop="name" label="名称" width="180" />
+    <el-table-column label="图标" width="100">
+      <template #default="scope">
+        <div v-if="!scope.row.icon">无</div>
+        <div v-else>
+          <el-icon>
+            <component :is="ElIcons[scope.row.icon]" />
+          </el-icon>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="导航类型" width="180">
+      <template #default="scope">
+        {{ scope.row.target === '_self' ? '本窗口打开' : '新窗口打开' }}
+      </template>
+    </el-table-column>
+    <el-table-column label="绑定界面" width="180" show-overflow-tooltip>
+      <template #default="scope">
+        <span v-if="scope.row.children.length">父级菜单</span>
+        <template v-else>
+          <span
+            v-if="scope.row.pageId && !scope.row.url"
+            class="binded-page"
+            :style="{ color: '#cc9c66' }"
+          >
+            <el-icon><Document /></el-icon>
+            <span>{{ pageNameMap[scope.row.pageId] }}</span>
+          </span>
+          <span v-else-if="scope.row.url" class="binded-page">
+            <el-icon><Link /></el-icon>
+            <el-link :href="scope.row.url" target="_blank">{{
+              scope.row.url
+            }}</el-link>
+          </span>
+          <span v-else :style="{ color: '#dd5547' }">未绑定</span>
+        </template>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="300" fixed="right">
+      <template #default="scope">
+        <el-button
+          size="small"
+          type="primary"
+          text
+          @click="addPeer(scope.$index, scope.row)"
+        >
+          添加同级
+        </el-button>
+        <el-button
+          :disabled="scope.row.pageId || scope.row.url"
+          size="small"
+          type="primary"
+          text
+          @click="addSubordinate(scope.$index, scope.row)"
+        >
+          添加下级
+        </el-button>
+        <el-button
+          size="small"
+          type="primary"
+          text
+          @click="handleEdit(scope.$index, scope.row)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          size="small"
+          type="danger"
+          text
+          @click="handleDelete(scope.$index, scope.row)"
+        >
+          删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-dialog
+    v-model="editModalOptions.visible"
+    :title="editModalOptions.title"
+    :width="editModalOptions.width"
+    append-to-body
+  >
+    <div class="menu-form">
+      <el-form :model="menuForm" ref="menuFormRef" label-width="100px">
+        <el-form-item
+          label="菜单名称："
+          prop="name"
+          :rules="[{ required: true, message: '请填写菜单名称' }]"
+        >
+          <el-input
+            placeholder="请输入"
+            v-model="menuForm.name"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="菜单图标：" prop="icon">
+          <el-select v-model="menuForm.icon" placeholder="无">
+            <el-option
+              style="
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+              v-for="(item, key) in ElIcons"
+              :key="key"
+              :value="key"
+            >
+              <span>{{ key }}</span>
+              <el-icon><component :is="item" /></el-icon>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="菜单内容：" prop="content">
+          <el-radio-group v-model="menuForm.content">
+            <el-radio label="pageId" value="pageId"> 项目中的页面 </el-radio>
+            <el-radio label="url" value="url">URL</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="menuForm.content === 'pageId'"
+          label-width="0px"
+          prop="pageId"
+        >
+          <PageList v-model="menuForm.pageId" :project="project" />
+        </el-form-item>
+        <template v-else>
+          <el-form-item label="打开方式：" prop="target">
+            <el-radio-group v-model="menuForm.target">
+              <el-radio label="_blank" value="_blank"> 新窗口打开 </el-radio>
+              <el-radio label="_self" value="_self"> 本窗口打开 </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            label="URL："
+            prop="url"
+            :rules="[
+              {
+                type: 'url',
+                required: true,
+                message: '请输入URL',
+              },
+            ]"
+          >
+            <el-input
+              placeholder="请输入"
+              v-model="menuForm.url"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="cancel"> 取消 </el-button>
+        <el-button type="primary" @click="confirm"> 确认 </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+// @ts-nocheck
+import { defineProps, defineEmits } from 'vue';
+import * as ElIcons from '@jt/icons-vue';
+import PageList from './PageList.vue';
+import useMenuTable from './useMenuTable';
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [
+      {
+        name: '默认菜单',
+        icon: '',
+        pageId: 1,
+        children: [],
+      },
+    ],
+  },
+  project: Object,
+});
+const emits = defineEmits(['update:modelValue']);
+const {
+  editModalOptions,
+  menuForm,
+  menuFormRef,
+  menuTree,
+  pageNameMap,
+  confirm,
+  cancel,
+  addPeer,
+  addSubordinate,
+  handleEdit,
+  handleDelete,
+} = useMenuTable(props, emits);
+</script>
+
+<style lang="scss" scoped>
+.binded-page {
+  display: 'flex';
+  align-items: 'center';
+}
+.menu-form {
+  margin-bottom: 17px;
+  padding-top: 44px;
+  padding-bottom: 26px;
+  border: 1px solid #e8e9eb;
+  border-left: none;
+  border-right: none;
+}
+</style>