@arkxos/arkos-system 0.1.0

package/src/codeless/components/icon/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <span
+    v-if="icon.type === 'svg' && icon.content"
+    v-html="icon.content"
+    class="cc-icon"
+  ></span>
+  <img
+    v-else-if="icon.type === 'base64' && icon.content"
+    :src="'data:image/png;base64,' + icon.content"
+    alt=""
+  />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { getIconList } from '@/utils/system';
+
+const props = defineProps({
+  iconId: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Object,
+    default: null
+  },
+});
+
+const icon = ref({});
+
+const init = async() => {
+  if (props.icon) {
+    icon.value = props.icon;
+  } else if (props.iconId) {
+    const iconList = await getIconList();
+    icon.value = iconList.find(item => item.id === props.iconId) || {};
+  }
+};
+
+watch(() => props, () => {
+  init();
+}, { deep: 1 });
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped>
+.cc-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: inherit;
+  width: 1em!important;
+  height: 1em!important;
+}
+.cc-icon svg {
+  width: 1em;
+  height: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/codeless/components/image/index.vue

@@ -0,0 +1,298 @@
+<template>
+  <div :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px'">
+    <div v-if="inputDisabled || props.showText" :class="['image-box', imageUrl ? '' : 'bg-gray']">
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="[imageUrl]"
+        style="width:100%;height:100%"
+        fit="scale-down"
+      />
+      <cc-icon
+        v-else
+        style="font-size: 60px;color: #9ea0a2"
+        iconId="018ece4f6d31e292d623"
+        title="未上传"
+      />
+    </div>
+    <div v-else-if="!inputDisabled" class="image-edit-box">
+      <el-upload :class="['cc-image', {'is-disabled': inputDisabled}]" action=""
+        :disabled="inputDisabled"
+        :http-request = "handleUpload"
+        :show-file-list="false"
+        :accept="'image/*'"
+        :before-upload="handleBeforeUpload"
+      >
+        <cc-icon
+          v-if="loading"
+          style="font-size: 50px; color: #999"
+          iconId="018dcab3d3dfd6e82393"
+          class="spinner"
+        />
+        <span v-else-if="imageUrl && !loading">
+          <img :src="imageUrl" alt />
+        </span>
+        <cc-icon v-else style="color: #999; font-size: 50px" iconId="018dca3b4707c4c43a2f" />
+      </el-upload>
+      <div class="image-hand-draw">
+        <cc-icon
+          style="color: #26c2cf; font-size: 20px"
+          iconId="018ece4f6918a49a759b"
+          title="打开画板"
+          @click.stop="openDraw"
+        />
+      </div>
+    </div>
+
+    <el-dialog
+      width="500px"
+      v-model="dialogVisible"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
+      draggable
+      fullscreen
+      class="cc-page-comp-dialog"
+    >
+      <template #header>
+        <div class="header">
+          <div class="title">画板</div>
+        </div>
+      </template>
+      <cc-signature-pad
+        v-if="dialogVisible"
+        ref="signatureRef"
+      />
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="dialogVisible = false"
+        >取消</el-button>
+        <el-button
+          size="default"
+          type="warning"
+          @click="clearDraw"
+        >清空</el-button>
+        <el-button
+          size="default"
+          type="primary"
+          @click="submitDraw"
+          :loading="editLoading"
+        >提交</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, inject } from 'vue'
+import { ElMessage, useDisabled, useFormItem } from 'element-plus';
+import api from '@/http/api';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  maxSize: {
+    type: Number,
+    default: 100
+  },
+  handDraw: {
+    type: String,
+    default: '0'
+  },
+  options: Object,
+  showText: Boolean
+});
+const formData = inject('formData');
+
+const loading = ref(true);
+const fileId = ref('');
+const imageUrl = ref('');
+const inputDisabled = useDisabled();
+const formItem = useFormItem();
+
+const dialogVisible = ref(false);
+const editLoading = ref(false);
+const signatureRef = ref();
+
+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);
+      formData.value[props.prop] = res.data.id;
+      emit('change');
+
+      nextTick(() => {
+        if (formItem && formItem.formItem) {
+          formItem.formItem.validate('change');
+        }
+      });
+      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 isLtMaxSize = file.size / 1024 / 1024 < props.maxSize;
+  if (!isLtMaxSize) {
+    loading.value = false;
+    ElMessage.error('上传图片大小不能超过 ' + props.maxSize + 'MB!');
+    return false;
+  }
+  return isImage && isLtMaxSize;
+};
+
+const loadData = () => {
+  if (typeof formData.value[props.prop] !== 'undefined' &&
+      formData.value[props.prop] != null &&
+      formData.value[props.prop] !== '') {
+    fileId.value = formData.value[props.prop];
+    imageUrl.value = import.meta.env.VITE_IMAGE_PATH + fileId.value;
+    loading.value = false;
+  } else {
+    loading.value = false;
+    fileId.value = '';
+    imageUrl.value = '';
+  }
+};
+
+const openDraw = () => {
+  dialogVisible.value = true;
+};
+
+const clearDraw = () => {
+  signatureRef.value.clearSignature();
+};
+
+const submitDraw = () => {
+  const signData = signatureRef.value.saveSignature();
+
+  if (!signData.isEmpty) {
+    api.upload({ base64: signData.data.split(',')[1] }).then(res => {
+      loading.value = false;
+      fileId.value = res.data.id;
+      imageUrl.value = signData.data;
+      formData.value[props.prop] = res.data.id;
+      emit('change');
+
+      dialogVisible.value = false;
+      nextTick(() => {
+        if (formItem && formItem.formItem) {
+          formItem.formItem.validate('change');
+        }
+      });
+    });
+  } else {
+    ElMessage.warning('画板内容为空！');
+  }
+};
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if ((newVal || '') === '' || (fileId.value || '') === '' || newVal !== fileId.value) {
+    fileId.value = '';
+    imageUrl.value = '';
+    loadData();
+  }
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.cc-image {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+.cc-image :deep(.el-upload) {
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.cc-image :deep(.el-upload span) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.cc-image:not(.is-disabled) :deep(.el-upload) {
+  cursor: pointer;
+}
+.cc-image:not(.is-disabled) :deep(.el-upload:hover) {
+  border-color: #409EFF;
+}
+.cc-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-box {
+  border: 1px dashed #d9d9d9;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.cc-image :deep(.el-upload:after) {
+  display: block;
+  margin-top: 100%;
+  content: ""
+}
+.image-edit-box {
+  position: relative;
+}
+.image-hand-draw {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+}
+</style>

package/src/codeless/components/index.js

@@ -0,0 +1,16 @@
+import { defineAsyncComponent } from 'vue';
+
+export default function install(app) {
+  // const components = import.meta.glob('@/codeless/components/**/*.vue');
+  //
+  const components = require.context('@/codeless/components/', true, /\.vue$/);
+
+  Object.entries(components).forEach(([key, value]) => {
+    const paths = key.replace('/src/codeless/components/', '').split('/');
+    let name = 'cc-' + paths[0];
+    name = name.replace(/[A-Z]/g, function(str) {
+      return '-' + str.toLowerCase();
+    });
+    app.component(name, defineAsyncComponent(value));
+  });
+}

package/src/codeless/components/input/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="props.showText">{{formData[prop] || ''}}</span>
+    <el-input
+      v-else
+      v-model="formData[prop]"
+      clearable
+      :placeholder="calcPlaceholder"
+      :disabled="disabled"
+      @change="handleChange"
+      @blur="handleBlur"
+      @keyup.self="handleKeyup"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, ref, watch } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['change', 'blur']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: Object,
+  showText: Boolean,
+  placeholder: String,
+  valuePlaceholder: String,
+  disabled: Boolean,
+});
+const formData = inject('formData');
+const inputDisabled = useDisabled();
+const disabled = ref(false);
+
+const init = () => {
+  disabled.value = inputDisabled.value || props.disabled || false;
+};
+
+const handleChange = () => {
+  emit('change');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+
+const handleKeyup = (event) => {
+  event.preventDefault();
+  if (event.key === 'Enter') {
+    handleChange();
+  }
+};
+
+const calcPlaceholder = computed(() => {
+  return disabled.value === true ? (props.valuePlaceholder || '') : props.placeholder;
+});
+
+watch(() => props, () => {
+  init();
+}, { immediate: true, deep: 1 });
+</script>

package/src/codeless/components/number/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="props.showText">{{currValue || ''}}</span>
+    <span v-else :class="['cc-input-number', $slots.append ? 'append' : '']">
+      <el-input-number
+        v-model="currValue"
+        :placeholder="calcPlaceholder"
+        :controls="true"
+        controls-position="right"
+        :step="precision === 1 ? 0.1 : precision === 2 ? 0.01 : 1"
+        :precision="precision"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :readonly="readonly"
+        @input="handleInput"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+      <span class="cc-input-number-append" v-if="$slots.append">
+        <slot name="append" />
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref, watch, inject, nextTick, computed } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  point: {
+    type: [String, Number],
+    default: 0
+  },
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  placeholder: String,
+  showText: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+});
+const formData = inject('formData');
+
+const currValue = ref(0);
+const min = ref(null);
+const max = ref(2147483647);
+const precision = ref(parseInt((props.point || '0')));
+const disabled = ref(false);
+const readonly = ref(false);
+const inputDisabled = useDisabled();
+
+const init = (data) => {
+  min.value = data.min || min.value;
+  max.value = data.max || max.value;
+  precision.value = parseInt((data.point || '0'));
+  disabled.value = inputDisabled.value || data.disabled || false;
+  readonly.value = data.readonly || false;
+};
+
+const handleInput = (value) => {
+  currValue.value = formatter(value);
+  formData.value[props.prop] = currValue.value;
+  nextTick(() => emit('change'));
+};
+
+const handleChange = () => {
+  formData.value[props.prop] = currValue.value;
+  nextTick(() => emit('change'));
+};
+
+const handleBlur = () => {
+  formData.value[props.prop] = currValue.value;
+  emit('change');
+  emit('blur');
+};
+
+const formatter = (value) => {
+  return value ? parseFloat(value.toFixed(precision.value)) : undefined;
+}
+
+const calcPlaceholder = computed(() => {
+  return disabled.value === true ? '' : props.placeholder;
+});
+
+watch(() => props, (data) => {
+  init(data);
+}, { immediate: true, deep: 1 });
+
+watch(() => formData.value[props.prop], (data) => {
+  if (data === null || data === '') {
+    currValue.value = null;
+  }
+  if (precision.value > 0) {
+    currValue.value = parseFloat(data);
+  } else {
+    currValue.value = parseInt(data);
+  }
+}, { immediate: true });
+
+onBeforeMount(() => {
+  init(props);
+});
+</script>
+
+<style scoped>
+.cc-input-number {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.cc-input-number :deep(.el-input-number) {
+  width: 100%;
+}
+.cc-input-number :deep(.el-input-number--small) {
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+.cc-input-number :deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+.cc-input-number.append :deep(.el-input__wrapper) {
+  border-top-right-radius: 0!important;
+  border-bottom-right-radius: 0!important;
+}
+.cc-input-number :deep(.cc-input-number-append) {
+  background-color: #f5f7fa;
+  color: #909399;
+  border: 1px solid #dcdfe6;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding: 0 10px;
+  white-space: nowrap;
+  height: 30px;
+  line-height: 30px;
+}
+</style>