@arkxos/arkos-system 0.1.0

package/src/visual/components/form/image.vue

@@ -0,0 +1,440 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+    @click="() => eventHandler.trigger('点击事件')"
+  >
+    <div
+      v-if="readonly || (cropper && imageUrl)"
+      class="image-box"
+      :style="cropper ? 'cursor: pointer' : ''"
+    >
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="cropper ? [] : [imageUrl]"
+        style="width:100%;height:100%"
+        fit="scale-down"
+        @click="showCropper()"
+      />
+      <vc-icon size="14" color="red" iconId="018dc9c3efd3a0502886" title="删除" @click.stop="deleteImage" />
+    </div>
+    <div v-else class="image-edit-box">
+      <el-upload
+        class="vc-image" action=""
+        :http-request="handleUpload"
+        :show-file-list="false"
+        :accept="'image/*'"
+        :before-upload="handleBeforeUpload"
+      >
+        <vc-icon v-if="loading" size="30" color="#999" iconId="018dcab3d3dfd6e82393" class="spinner" />
+        <span v-else-if="imageUrl && !loading" class="image-item">
+          <vc-icon size="14" color="red" iconId="018dc9c3efd3a0502886" title="删除" @click.stop="deleteImage" />
+          <img :src="imageUrl" alt />
+        </span>
+        <vc-icon v-else size="30" color="#999" iconId="018dca3b4707c4c43a2f"></vc-icon>
+      </el-upload>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      width="900px"
+      append-to-body
+      destroy-on-close
+      draggable
+      class="cc-page-comp-dialog"
+      :close-on-click-modal="false"
+    >
+      <template #header>
+        <div class="header">
+          <div class="title">图片裁剪</div>
+        </div>
+      </template>
+      <div class="dialog-box">
+        <div style="width: 400px;height: 400px">
+          <VueCropper
+            ref="cropperRef"
+            style="width:100%"
+            :img="imageUrl"
+            :output-size="option.size"
+            :output-type="option.outputType"
+            :info="false"
+            :full="option.full"
+            :fixed="option.fixed"
+            :fixed-number="option.fixedNumber"
+            :can-move="option.canMove"
+            :can-move-box="option.canMoveBox"
+            :fixed-box="option.fixedBox"
+            :original="option.original"
+            :auto-crop="option.autoCrop"
+            :auto-crop-width="option.autoCropWidth"
+            :auto-crop-height="option.autoCropHeight"
+            :center-box="option.centerBox"
+            :high="option.high"
+            :max-img-size="option.max"
+            @realTime="realTime"
+          ></VueCropper>
+          <div style="padding-top: 20px;height: 40px;">
+            <el-button
+              type="primary"
+              @click="changeScale(1)"
+            ><vc-icon iconId="018ece4f6c751e36f773"/></el-button>
+            <el-button
+              type="primary"
+              @click="changeScale(-1)"
+            ><vc-icon iconId="018ece4f7296e9555472"/></el-button>
+            <el-button
+              type="primary"
+              @click="rotateLeft()"
+            ><vc-icon iconId="018ece4f6c4954d8f1d5"/></el-button>
+            <el-button
+              type="primary"
+              @click="rotateRight()"
+            ><vc-icon iconId="018ece4f6dc8c9e76788"/></el-button>
+          </div>
+        </div>
+        <div class="preview-box" style="height: 450px;">
+          <div class="preview-img">
+            <div :style="{'width': preview.w + 'px', 'height': preview.h + 'px', 'overflow': 'hidden'}">
+              <div :style="preview.div">
+                <img :src="preview.url" :style="preview.img"  alt="" />
+              </div>
+            </div>
+          </div>
+          <div style="padding-top: 20px;height: 40px;">
+            <div>预览</div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="dialogVisible = false"
+        >取消</el-button>
+        <el-button
+          size="default"
+          type="primary"
+          @click="() => submitDialog()"
+          :loading="dialogLoading"
+        >提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, inject, getCurrentInstance } from 'vue'
+import api from '@/http/api';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import { ElMessage, ElMessageBox, useFormItem } from 'element-plus';
+import { VueCropper } from 'vue-cropper';
+import 'vue-cropper/dist/index.css';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const loading = ref(true);
+const pageData = inject('pageData');
+const fileId = ref('');
+const limitSize = ref(100);
+const imageUrl = ref('');
+const cropperRef = ref();
+const cropper = ref(false);
+const cropperStyle = ref('');
+const cropperWidth = ref(160);
+const cropperHeight = ref(90);
+const readonly = ref(false);
+const preview = ref({});
+const formItem = useFormItem();
+
+const dialogVisible = ref(false);
+const dialogLoading = ref(false);
+const option = ref({
+  size: 1,
+  full: false,
+  outputType: 'png',
+  canMove: true,
+  original: false,
+  canMoveBox: true,
+  autoCrop: true,
+  autoCropWidth: 200,
+  autoCropHeight: 150,
+  centerBox: false,
+  high: true,
+  max: 2000,
+  show: true,
+  fixed: true,
+  fixedBox: true,
+  mode: '100% auto',
+  fixedNumber: [200, 150]
+});
+
+const handleUpload = (data) => {
+  return new Promise((resolve, reject) => {
+    api.upload({ file: data.file, type: data.file.type }).then((res) => {
+      loading.value = false;
+      fileId.value = res.data.id;
+      imageUrl.value = URL.createObjectURL(data.file);
+      pageData.value[currNode.value.name] = fileId.value;
+      handleChange();
+      resolve();
+    }).catch(() => {
+      loading.value = false;
+      reject();
+    });
+  });
+};
+
+const handleBeforeUpload = (file) => {
+  if (loading.value) {
+    ElMessage.error('图片正在上传中，请稍候再试！');
+    return false;
+  }
+  loading.value = true;
+
+  const isImage = file.type.includes('image');
+  if (!isImage) {
+    loading.value = false;
+    ElMessage.error('上传文件类型必须是图片!');
+    return false;
+  }
+  const isLt = file.size / 1024 / 1024 < limitSize.value;
+  if (!isLt) {
+    loading.value = false;
+    ElMessage.error(`上传图片大小不能超过 ${limitSize.value} MB!`);
+  }
+  return isImage && isLt;
+};
+
+const deleteImage = () => {
+  fileId.value = '';
+  imageUrl.value = '';
+  pageData.value[currNode.value.name] = '';
+  handleChange();
+};
+
+const handleChange = () => {
+  emit('change');
+  nextTick(() => {
+    if (formItem && formItem.formItem) {
+      formItem.formItem.validate('change');
+    }
+  });
+};
+
+const showCropper = () => {
+  if (cropper.value) {
+    dialogVisible.value = true;
+  }
+};
+
+const realTime = (data) => {
+  preview.value = data;
+};
+
+const submitDialog = () => {
+  ElMessageBox.confirm('请确认是否提交裁剪后的图片？', '提示', { type: 'warning' }).then(() => {
+    cropperRef.value.getCropBlob((file) => {
+      api.upload({ fileId: fileId.value, file: file, type: 'image/png' }).then(() => {
+        dialogLoading.value = false;
+        imageUrl.value = URL.createObjectURL(file);
+        // ElMessage.success("图片上传成功！");
+        dialogVisible.value = false;
+      }).catch((e) => {
+        ElMessage.success('图片上传失败：' + e.message);
+        dialogLoading.value = false;
+      });
+    });
+  }).catch(() => {});
+};
+
+const changeScale = (num) => {
+  num = num || 1;
+  cropperRef.value.changeScale(num);
+};
+
+const rotateLeft = () => {
+  cropperRef.value.rotateLeft()
+};
+
+const rotateRight = () => {
+  cropperRef.value.rotateRight()
+};
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  limitSize.value = compStyle['limitSize'] || 100;
+  readonly.value = compStyle['readonly'] || false;
+  cropper.value = compStyle['cropper'] || false;
+  if (cropper.value) {
+    cropperWidth.value = compStyle['cropper.width'] || 160;
+    cropperHeight.value = compStyle['cropper.height'] || 90;
+    option.value.autoCropWidth = cropperWidth.value;
+    option.value.autoCropHeight = cropperHeight.value;
+    option.value.fixedNumber = [cropperWidth.value, cropperHeight.value];
+    cropperStyle.value = `width: ${cropperWidth.value * 2}px;height:${cropperHeight.value * 2}px`;
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  fileId.value = dataList.length > 0 && dataList[0]['内容'] || '';
+  pageData.value[currNode.value.name] = fileId.value;
+  imageUrl.value = fileId.value ? (import.meta.env.VITE_IMAGE_PATH + fileId.value) : '';
+  loading.value = false;
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped>
+.vc-component {
+  width: inherit;
+  height: inherit;
+}
+.vc-image {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+
+.vc-image :deep(.el-upload) {
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.vc-image :deep(.el-upload span) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vc-image:not(.is-disabled) :deep(.el-upload) {
+  cursor: pointer;
+}
+
+.vc-image:not(.is-disabled) :deep(.el-upload:hover) {
+  border-color: #409EFF;
+}
+
+.loading-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+
+.plus-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+
+.vc-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-edit-box {
+  width: inherit;
+  height: inherit;
+}
+.image-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 1px dashed #c2c2c2;
+  position: relative;
+}
+
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vc-image :deep(.el-upload:after) {
+  display: block;
+  margin-top: 100%;
+  content: ""
+}
+
+.image-item {
+  position: relative;
+}
+
+.image-box .vc-icon, .image-item .vc-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+.dialog-box {
+  height: 450px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.preview-box {
+  height: 100%;
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.preview-img {
+  border: 2px dotted #cccccc;
+}
+</style>

package/src/visual/components/form/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle, {width: '100%'})"
+  >
+    <el-form
+      ref="dataForm"
+      :model="pageData"
+      v-bind="options"
+      :validate-on-rule-change="false"
+    >
+      <vc-page-comp
+        v-for="(child, index) in currNode.children"
+        :key="index"
+        :node="child"
+      />
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, getCurrentInstance, inject, computed, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object,
+});
+const dataForm = ref();
+const pageData = inject('pageData');
+const initializing = ref(true);
+const currNode = ref(props.node);
+new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = (styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  nextTick(() => initializing.value = false);
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'inline');
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'labelPosition');
+  visual.addIfNotNull(options, compStyle, 'labelWidth');
+  visual.addIfNotNull(options, compStyle, 'labelSuffix');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  visual.addIfNotNull(options, compStyle, 'hideRequiredAsterisk');
+  visual.addIfNotNull(options, compStyle, 'requireAsteriskPosition');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const validate = (callback) => {
+  const promise = new Promise((resolve, reject) => {
+    if (!dataForm.value) {
+      resolve(true);
+      return;
+    }
+
+    dataForm.value.validate(valid => {
+      if (valid) {
+        resolve(valid);
+      } else {
+        reject(valid);
+      }
+    }).catch(e => {
+      reject(e);
+    });
+  });
+  promise.then(valid => callback && callback(valid));
+  return promise;
+};
+
+onBeforeMount(() => init());
+
+defineExpose({ validate });
+</script>

package/src/visual/components/form/input.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-input
+      v-model="pageData[currNode.name]"
+      v-bind="options"
+      @change="handleChange"
+      @input="handleChange"
+      :type="type"
+      :style="[
+        !border ? '--el-input-border-color: transparent;' : '',
+        backgroundColor ? '--el-input-bg-color: ' + backgroundColor : '',
+      ]"
+    >
+      <template #prefix>
+        <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
+      </template>
+      <template #suffix>
+        <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject, getCurrentInstance, computed, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object,
+});
+
+const type = ref('text');
+const border = ref(false);
+const backgroundColor = ref('');
+const prefixIconId = ref('');
+const suffixIconId = ref('');
+const pageData = inject('pageData', ref({}));
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  border.value = compStyle['border'] !== false;
+  backgroundColor.value = compStyle['background-color'] || '';
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+  type.value = compStyle['hidden'] ? 'hidden' : 'text';
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(
+    currNode.value.compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || [];
+  pageData.value[currNode.value.name] = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'minlength');
+  visual.addIfNotNull(options, compStyle, 'maxlength');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'readonly');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  visual.addIfNotNull(options, compStyle, 'showWordLimit');
+  visual.addIfNotNull(options, compStyle, 'autocomplete');
+  return options;
+});
+
+const handleChange = () => {
+  eventHandler.trigger('变更事件', getData());
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

package/src/visual/components/form/item.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-form-item v-bind="options">
+      <template #label>
+        <span>{{label}}</span>
+        <span v-if="description" style="margin-left: 5px;">
+          <el-tooltip :content="description">
+            <vc-icon iconId="018dca8ec9890493be26" />
+          </el-tooltip>
+        </span>
+      </template>
+      <vc-page-comp
+        v-for="(child, index) in props.node.children"
+        :key="index"
+        :node="child"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object
+});
+const options = ref({});
+const label = ref();
+const description = ref();
+const initializing = ref(true);
+const currNode = ref(props.node);
+
+const init = (styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  label.value = compStyle['label'] || '';
+  description.value = compStyle['description'] || '';
+
+  let required = false;
+  let propName = '';
+  let rules = [];
+  tool.walkTree(props.node, node => {
+    if (node.id && node.formItem === '1' && node.styleList && node.styleList[0].compStyle['required']) {
+      required = true;
+      propName = node.name;
+      rules = [{ required: true, message: '此项为必填项', trigger: ['blur', 'change'] }];
+    }
+  });
+
+  const data = {};
+  data['prop'] = propName;
+  data['rules'] = rules;
+  data['required'] = required;
+  visual.addIfNotNull(data, compStyle, 'labelWidth');
+  options.value = data;
+  nextTick(() => initializing.value = false);
+};
+
+onBeforeMount(() => init());
+</script>