@arkxos/arkos-system 0.1.0

package/src/codeless/view/page.vue

@@ -0,0 +1,280 @@
+<template>
+  <div
+    v-if="!initializing && pageInfo.type === '普通'"
+    :class="['cc-page cc-flex-column cc-grow-height', pageInfo.cssName || '']"
+    :style="fullHeight ? 'height: 100%;' : '1px'"
+  >
+    <page-comp
+      v-for="(comp, index) in pageInfo.compList.filter(item => item.showComp === '1')"
+      :key="index"
+      :ref="el => setRefs(el, comp)"
+      :pageCompId="comp.id"
+      :operate="operate"
+      :inputParam="inputParam"
+      :initData="initData"
+      :disabled="disabled"
+      :class="pageInfo.compList.filter(item => item.showComp === '1').length > 1 ? 'cc-page-comp-auto-height' : ''"
+    >
+      <slot />
+    </page-comp>
+  </div>
+  <div
+    v-else-if="!initializing && pageInfo.type === '标签'"
+    :class="['cc-page', pageInfo.cssName || '']"
+  >
+    <el-tabs
+      ref="tabsRef"
+      v-model="activeTabName"
+      :tab-position="tabPosition"
+      class="cc-page-tabs"
+      :style="'min-height: ' + autoHeight + 'px'"
+      @tab-click="handleTabClick"
+    >
+      <el-tab-pane
+        v-for="(comp, index) in pageInfo.compList.filter(item => item.showComp === '1')"
+        :key="index"
+        class="cc-page-tab-item cc-grow-height"
+        :name="comp.id"
+      >
+        <template #label>
+          <el-badge
+            :value="badgeValue[comp.name] || 0"
+            :show-zero="false"
+          >{{comp.name}}</el-badge>
+        </template>
+        <page-comp
+          :ref="el => setRefs(el, comp)"
+          :pageCompId="comp.id"
+          :operate="operate"
+          :disabled="disabled"
+          :inputParam="inputParam"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <visual-page
+    v-else-if="!initializing && pageInfo.type === '可视化'"
+    ref="visualPageRef"
+    :dataPageId="dataPageId"
+    :pageInfo="pageInfo"
+    :operate="operate"
+    :inputParam="inputParam"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, provide, inject } from 'vue';
+import PageComp from '@/codeless/view/page-comp.vue';
+import VisualPage from '@/visual/view/page.vue';
+import api from '@/http/api';
+import { ElMessage } from 'element-plus';
+import { getPage } from '@/utils/codeless';
+
+const emit = defineEmits(['updatePageName', 'showDialogButton']);
+const props = defineProps({
+  dataPageId: String,
+  pageInfo: Object,
+  operate: {
+    type: String,
+    default: '',
+  },
+  copyData: {
+    type: Boolean,
+    default: false
+  },
+  initData: {
+    type: Object,
+    default: () => {}
+  },
+  inputParam: {
+    type: Object,
+    default: () => {}
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fullHeight: {
+    type: Boolean,
+    default: false
+  },
+  dialogMode: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const initializing = ref(true);
+const tabsRef = ref();
+const autoHeight = ref(null);
+const pageCompRefs = ref({});
+const visualPageRef = ref({});
+const pageInfo = ref({});
+const tabPosition = ref('top');
+const activeTabName = ref('');
+const badgeValue = ref({});
+provide('dialogMode', props.dialogMode || false);
+provide('showDialogButton', (buttonList) => {
+  emit('showDialogButton', buttonList)
+});
+provide('page', {
+  getPageData: function() {
+    return getPageData();
+  }
+});
+const permitMenuId = inject('permitMenuId', '');
+
+const setRefs = (el, comp) => {
+  if (el) {
+    pageCompRefs.value[comp.id] = el;
+  }
+};
+
+const position = ref({ 顶部: 'top', 底部: 'bottom', 左侧: 'left', 右侧: 'right' });
+const getTabPosition = (key) => {
+  return position.value[key] || 'top';
+};
+
+const loadPageInfo = async() => {
+  if (props.pageInfo) {
+    pageInfo.value = props.pageInfo;
+  } else {
+    pageInfo.value = await getPage(props.dataPageId, permitMenuId.value);
+  }
+
+  if (pageInfo.value.type === '标签') {
+    activeTabName.value = pageInfo.value.compList.filter(item => item.showComp === '1')[0].id;
+    tabPosition.value = getTabPosition(pageInfo.value.tabPosition || '');
+  }
+  emit('updatePageName', pageInfo.value.name || '');
+};
+
+const loadBadgeValue = async() => {
+  if (pageInfo.value.type !== '标签' || !pageInfo.value.tabScriptId) return;
+
+  const res = await api.runScript(pageInfo.value.tabScriptId);
+  badgeValue.value = res.data || {};
+};
+
+const handleTabClick = (tab) => {
+  if (pageInfo.value.tabRefresh === '1') {
+    pageCompRefs.value[tab.paneName] && pageCompRefs.value[tab.paneName].refreshCompData();
+  }
+
+  const currHeight = tabsRef.value.$el.offsetHeight;
+  if (autoHeight.value == null || autoHeight.value < currHeight) {
+    autoHeight.value = currHeight;
+  }
+};
+
+const init = async() => {
+  if (!props.dataPageId && !props.pageInfo) {
+    return;
+  }
+
+  initializing.value = true;
+  await loadPageInfo();
+  await loadBadgeValue();
+  await nextTick(() => initializing.value = false);
+};
+
+const validate = (callback) => {
+  const promise = new Promise((resolve, reject) => {
+    if (pageInfo.value.type === '可视化') {
+      visualPageRef.value.validate(valid => {
+        if (!valid) {
+          reject();
+        } else {
+          resolve(true);
+        }
+      }).catch(e => reject(e));
+    } else {
+      const keys = Object.keys(pageCompRefs.value);
+      if (keys.length === 0) {
+        resolve(true);
+        return;
+      }
+
+      const validates = keys.map(key => {
+        const component = pageCompRefs.value[key];
+        if (!component.validate) {
+          return Promise.resolve(true);
+        }
+
+        return new Promise((innerResolve, innerReject) => {
+          component.validate(valid => {
+            if (!valid) {
+              innerReject();
+            } else {
+              innerResolve();
+            }
+          }).catch(innerReject);
+        });
+      });
+
+      Promise.all(validates)
+        .then(() => {
+          resolve(true);
+        })
+        .catch(reject);
+    }
+  });
+
+  promise.then(valid => callback(valid));
+  return promise;
+};
+
+const getData = () => {
+  let data = {
+    copyData: props.copyData,
+    inputParam: props.inputParam
+  };
+  if (pageInfo.value.type === '可视化') {
+    data = Object.assign({}, data, visualPageRef.value.getData());
+  } else {
+    for (const pageCompId in pageCompRefs.value) {
+      const find = pageInfo.value.compList.find(comp => comp.id === pageCompId);
+      if (find) {
+        if (find.name === 'copyData') {
+          ElMessage.error('页面组件名称不能为【copyData】！');
+          return;
+        } else if (find.name === 'inputParam') {
+          ElMessage.error('页面组件名称不能为【inputParam】！');
+          return;
+        }
+        data[find.name] = pageCompRefs.value[pageCompId].getData();
+      }
+    }
+  }
+
+  return data;
+};
+
+const getPageData = () => {
+  const data = {};
+  if (pageInfo.value.type === '可视化') {
+    Object.assign(data, visualPageRef.value.getData());
+  } else {
+    for (const pageCompId in pageCompRefs.value) {
+      const find = pageInfo.value.compList.find(comp => comp.id === pageCompId);
+      if (find) {
+        data[find.name] = pageCompRefs.value[pageCompId].getData();
+      }
+    }
+  }
+
+  return data;
+};
+
+onMounted(() => {
+  init();
+});
+
+defineExpose({ validate, getData });
+</script>
+
+<style scoped>
+.cc-page {
+  overflow: auto;
+}
+</style>

package/src/codeless/view/table-edit-item.vue

@@ -0,0 +1,184 @@
+<template>
+  <component
+    :is="getComponent(column)"
+    v-bind:prop="column.fieldName"
+    v-bind:showText="inputDisabled"
+    v-bind="getOptions(column)"
+    @change="changeValue(column)"
+    :disabled="column.readonly === '1'"
+  />
+</template>
+
+<script setup>
+import { provide, inject, ref, toRef, watch } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  index: Number,
+  column: Object,
+  single: {
+    type: Boolean,
+    default: () => false
+  },
+  data: Object
+});
+const formData = inject('formData', toRef(props.data));
+if (props.single) {
+  provide('formData', formData);
+} else {
+  provide('formData', toRef(formData.value.list[props.index]));
+}
+const inputDisabled = useDisabled();
+
+const component = ref({
+  单行文本框: 'cc-input',
+  密码文本框: 'cc-password',
+  多行文本框: 'cc-input',
+  富文本框: 'cc-input',
+  单选框: 'cc-select',
+  多选框: 'cc-checkbox',
+  下拉框: 'cc-select',
+  多选下拉框: 'cc-selects',
+  开关: 'cc-switch',
+  字符: 'cc-input',
+  整数: 'cc-number',
+  小数: 'cc-number',
+  日期: 'cc-date',
+  时间: 'cc-datetime',
+  图片: 'cc-image',
+  视频: 'cc-video',
+  附件: 'cc-affix',
+  弹窗选择: 'cc-dialog-select',
+  下拉选择: 'cc-remote-select',
+  树形控件: 'cc-tree',
+  区划树: 'cc-region-tree',
+  单位树: 'cc-unit-tree',
+  企业树: 'cc-entp-tree',
+  部门树: 'cc-organization-tree',
+  人员树: 'cc-employee-tree',
+  字典树: 'cc-dict-tree',
+  字典开关: 'cc-dict-switch',
+  字典单选框: 'cc-dict-select',
+  字典下拉框: 'cc-dict-select',
+  单位多选: 'cc-units-tree',
+  企业多选: 'cc-entps-tree',
+  部门多选: 'cc-organizations-tree',
+  人员多选: 'cc-employees-tree',
+  角色多选: 'cc-roles',
+});
+const getComponent = (field) => {
+  if (field.fieldType === '字符') {
+    if (field.enumerate === '1') {
+      return component.value[field.enumerateType];
+    } else {
+      return component.value[field.inputType];
+    }
+  } else if ('整数、小数、日期、时间、图片、视频、附件'.indexOf(field.fieldType) >= 0) {
+    return component.value[field.fieldType];
+  } else if (field.fieldType === '联动') {
+    if (field.relevanceType === '数据模型') {
+      if (field.dialogPageId) {
+        return component.value['弹窗选择'];
+      } else {
+        const relevanceList = field.dataField.relevanceList || [];
+        if (relevanceList.length === 1 && !relevanceList[0].parentFieldId) {
+          return component.value['下拉选择'];
+        } else {
+          return component.value['树形控件'];
+        }
+      }
+    } else {
+      return component.value[field.relevanceType];
+    }
+  } else if (field.fieldType === '大文本') {
+    return component.value[field.inputType];
+  }
+
+  return 'cc-input';
+};
+
+const getOptions = (field) => {
+  if (field.fieldType === '字符') {
+    if (field.autoCreate === '1') {
+      return { disabled: true, placeholder: '系统自动生成' };
+    } else if (field.enumerate === '1') {
+      return { options: field.enumerateValue || '' };
+    } else {
+      return { max: field.fieldSize || 100 };
+    }
+  } else if ('整数、小数'.indexOf(field.fieldType) >= 0) {
+    return {
+      point: field.fieldType === '整数' ? 0 : field.dataField.fieldPrecision || 0,
+      max: field.maxValue,
+      min: field.minValue
+    };
+  } else if ('日期'.indexOf(field.fieldType) >= 0) {
+    return { format: field.dataField.format || undefined, valueFormat: field.dataField.format || undefined };
+  } else if (field.fieldType === '图片') {
+    return { limit: 1, maxSize: field.dataField.imageMaxSize, width: 30, height: 30 };
+  } else if (field.fieldType === '视频') {
+    return { mode: 'table', limit: 1, maxSize: field.dataField.imageMaxSize };
+  } else if (field.fieldType === '联动') {
+    const relevanceList = field.dataField.relevanceList || [];
+    if (field.relevanceType === '数据模型' && relevanceList.length > 0) {
+      if (field.dialogPageId && relevanceList.length > 0) {
+        const relevance = relevanceList[relevanceList.length - 1];
+        return {
+          pageId: field.dialogPageId,
+          dialogWidth: field.dialogWidth,
+          dialogTitle: field.aliasName || field.fieldName,
+          idProp: relevance.nodeFieldName,
+          nameProp: relevance.showFieldName,
+        };
+      }
+
+      if (relevanceList.length === 1 && !relevanceList[0].parentFieldId) {
+        const queryList = [];
+        if (relevanceList.length > 0 && relevanceList[0].filterFieldId && relevanceList[0].filterValueFieldId) {
+          const field = props.fieldList.find(item => item.fieldId === relevanceList[0].filterValueFieldId);
+          if (field && field.dataField) {
+            queryList.push({
+              filterFieldId: relevanceList[0].filterFieldId,
+              dataFieldName: field.dataField.fieldName
+            });
+          }
+        }
+
+        return {
+          dataModelId: relevanceList[0].dataModelId,
+          filterName: relevanceList[0].showFieldId,
+          idProp: relevanceList[0].nodeFieldId,
+          nameProp: relevanceList[0].showFieldId,
+          sortField: relevanceList[0].ordinalFieldId,
+          queryList: queryList
+        };
+      } else {
+        return {
+          dataFieldId: field.fieldId,
+          leafSelect: relevanceList.length > 1,
+          typeSelect: relevanceList[relevanceList.length - 1].id
+        };
+      }
+    } else {
+      return { dictCode: field.relevanceDict || '' };
+    }
+  }
+
+  return {};
+};
+
+const changeValue = (field) => {
+  if (props.single) {
+    emit('change', field, formData.value);
+  } else {
+    emit('change', field, formData.value.list[props.index]);
+  }
+};
+
+watch(() => props.single, (single) => {
+  if (single) {
+    formData.value = props.data;
+  }
+}, { immediate: true });
+</script>