@arkxos/arkos-system 0.1.0

package/src/codeless/components/unit-tree/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-input
+      v-if="inputDisabled || disabled"
+      disabled
+      v-model="message"
+    />
+    <el-input
+      v-else
+      ref="messageRef"
+      v-model="message"
+      :placeholder="messageHolder"
+      @click="messageClick"
+      @input="messageChange"
+    >
+      <template #suffix>
+        <cc-icon
+          v-if="hovering"
+          style="cursor: pointer;color: #c0c4cc"
+          @click.stop="clearInput"
+          iconId="018dca412c4ebd53fd1d"
+        />
+      </template>
+    </el-input>
+    <el-popover
+      ref="popoverRef"
+      :width="popoverWidth"
+      placement="bottom-start"
+      :fallback-placements="['bottom', 'right', 'left', 'top']"
+      :visible-arrow="true"
+      :visible="popoverVisible"
+      popper-class="popper-box"
+      trigger="click"
+      :virtual-ref="messageRef"
+      virtual-triggering
+      @hide="popoverHide"
+    >
+      <el-scrollbar
+        wrap-class="popover-scrollbar"
+        wrap-style="min-height:0px;max-height: 400px;"
+        view-style="height:100%;"
+        v-click-outside="clickOutside"
+        v-loading="loading"
+        element-loading-text="数据加载中..."
+        :noresize="false"
+      >
+        <el-row class="tree-row">
+          <el-tree
+            style="width: 100%"
+            ref="tree"
+            node-key="id"
+            :data="treeData"
+            :props="treeProps"
+            :highlight-current="true"
+            :default-expanded-keys="expandedData"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="true"
+            @node-expand="nodeExpand"
+            @node-click="nodeClick"
+          >
+            <template v-slot="{ data }">
+              <div class="node-item">
+                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
+              </div>
+            </template>
+          </el-tree>
+        </el-row>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getUnit } from '@/utils/system';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const tree = ref();
+const popoverRef = ref();
+const popoverWidth = ref('-');
+const popoverVisible = ref(false);
+const messageHolder = ref(props.placeholder || '--请选择--');
+const messageRef = ref();
+const message = ref('');
+const loading = ref(false);
+const selectedId = ref('');
+const selectedValue = ref('');
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  isLeaf: 'leaf',
+  label: 'text'
+});
+const hovering = ref(false);
+
+const clearInput = () => {
+  changeValue('', '');
+};
+
+const messageClick = () => {
+  messageHolder.value = selectedValue.value || props.placeholder;
+  popoverVisible.value = true;
+  message.value = '';
+  tree.value.filter('');
+  const width = messageRef.value.$el.getBoundingClientRect().width;
+  if (width && width > 0) {
+    popoverWidth.value = width < 300 ? 300 : width;
+  }
+  return false;
+};
+
+const messageChange = () => {
+  tree.value.filter(message.value);
+};
+
+const clickOutside = () => {
+  popoverVisible.value = false;
+};
+
+const popoverHide = () => {
+  if (selectedValue.value !== message.value) {
+    message.value = selectedValue.value;
+  }
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  tree.value.setChecked(id);
+  formData.value[props.prop] = id;
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('change');
+
+  nextTick(() => {
+    popoverVisible.value = false;
+    initializing.value = false;
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0;
+};
+
+const nodeExpand = () => {
+  setTimeout(() => {
+    popoverRef.value && popoverRef.value.popperRef.popperInstanceRef.forceUpdate();
+  }, 300);
+};
+
+const nodeClick = (data) => {
+  if (data.disabled === true) return;
+  if (data?.data?.type === '2') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getUnit();
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedId.value;
+  } else {
+    const list = findData(treeData.value, selectedId.value);
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      message.value = '';
+    }
+  }
+  selectedValue.value = message.value;
+};
+
+const findData = (list, ids) => {
+  let results = [];
+  if (list === undefined || list == null || ids === undefined || ids == null) {
+    return results;
+  }
+
+  for (let i = 0; i < list.length; i++) {
+    const id = list[i].id + '';
+    if (id !== '0' && ids.indexOf(id) >= 0) {
+      results.push(list[i]);
+    }
+
+    if (list[i].children !== undefined && list[i].children != null) {
+      results = results.concat(findData(list[i].children, ids));
+    }
+  }
+
+  return results;
+};
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = formData.value[props.prop] || '';
+  loadTree();
+});
+</script>
+
+<style scoped lang="scss">
+.popper-box {
+  .node-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+
+    .node-label {
+      flex-grow: 1;
+      width: 1px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: flex;
+
+      > span {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>

package/src/codeless/components/units-tree/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-tree-select
+    ref="treeRef"
+    v-model="selectedIds"
+    multiple
+    :data="treeData"
+    :props="treeProps"
+    :render-after-expand="false"
+    :disabled="inputDisabled"
+    :placeholder="placeholder"
+    :default-expanded-keys="expandedData"
+    :expand-on-click-node="false"
+    show-checkbox
+    filterable
+    check-on-click-node
+    style="width: 100%"
+    @check="checkChange"
+  />
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject } from 'vue';
+import { useDisabled } from 'element-plus';
+import { getUnit } from '@/utils/system';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const selectedIds = ref([]);
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeRef = ref();
+const treeData = ref([]);
+const treeProps = ref({
+  value: 'id',
+  label: 'text',
+  children: 'children'
+});
+
+const checkChange = () => {
+  initializing.value = true;
+  const unitNodes = [];
+  for (const node of treeRef.value.getCheckedNodes()) {
+    if (node.data && node.data.type === '2') {
+      unitNodes.push(node);
+    }
+  }
+  selectedIds.value = unitNodes.map(item => item.id);
+  formData.value[props.prop] = selectedIds.value.join(',');
+  setTimeout(() => initializing.value = false, 500);
+};
+
+const loadTree = async() => {
+  treeData.value = await getUnit();
+  tool.walkTree({ children: treeData.value }, (node) => {
+    node.value = node.id;
+    node.label = node.text;
+  });
+
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+};
+
+watch(() => selectedIds.value, (newVal) => {
+  if (initializing.value) return;
+  initializing.value = true;
+  formData.value[props.prop] = newVal.join(',');
+  setTimeout(() => initializing.value = false, 500);
+});
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+  initializing.value = true;
+  selectedIds.value = newVal ? newVal.split(',') : [];
+  emit('change');
+  setTimeout(() => initializing.value = false, 500);
+});
+
+onMounted(() => {
+  selectedIds.value = formData.value[props.prop] ? formData.value[props.prop].split(',') : [];
+  loadTree();
+});
+</script>

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

@@ -0,0 +1,255 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="inputDisabled || props.showText" class="video-box">
+      <span
+        v-if="videoName"
+        class="cc-video-name"
+        :title="videoName"
+        @click="showVideo"
+      >{{videoName}}</span>
+    </span>
+    <span v-else-if="!inputDisabled" class="video-edit-box">
+      <el-upload :class="['cc-video', {'is-disabled': inputDisabled}]" action=""
+        :disabled="inputDisabled"
+        :http-request = "handleUpload"
+        :show-file-list="false"
+        accept=".mp4"
+        :before-upload="handleBeforeUpload"
+      >
+        <cc-icon
+          v-if="loading"
+          style="font-size: 25px; color: #999"
+          iconId="018dcab3d3dfd6e82393"
+          class="spinner"
+        />
+        <el-button
+          v-else
+          :style="props.mode === 'table' ? 'margin-left: 5px;' : ''"
+          size="small"
+          type="primary"
+          :loading="loading"
+        >上传</el-button>
+      </el-upload>
+      <span
+        v-if="videoName"
+        class="cc-video-name"
+        :title="videoName"
+        @click="showVideo"
+      >{{videoName}}</span>
+    </span>
+
+    <el-dialog
+      width="800px"
+      append-to-body
+      title="视频查看"
+      v-model="dialogVisible"
+      :close-on-click-modal="false"
+      :fullscreen="dialogFullscreen"
+      destroy-on-close
+      draggable
+      class="cc-page-comp-dialog"
+    >
+      <template #header>
+        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
+          <div class="title">视频查看</div>
+          <div class="button">
+            <cc-icon
+              v-if="!dialogFullscreen"
+              iconId="018dca8cad1b28075ecd"
+              @click="dialogFullscreen=true"
+              title="最大化"
+            />
+            <cc-icon
+              v-if="dialogFullscreen"
+              iconId="018dca8cad1b9b03c47f"
+              @click="dialogFullscreen=false"
+              title="缩小"
+            />
+          </div>
+        </div>
+      </template>
+      <video width="100%" height="100%" controls autoplay>
+        <source :src="videoUrl" type="video/mp4">
+        浏览器不支持视频查看
+      </video>
+      <template #footer>
+        <el-form>
+          <el-button
+            size="default"
+            type="info"
+            @click="dialogVisible=false"
+          >关闭</el-button>
+        </el-form>
+      </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
+  },
+  mode: String,
+  maxSize: {
+    type: Number,
+    default: 100
+  },
+  options: Object,
+  showText: Boolean
+});
+const formData = inject('formData');
+
+const loading = ref(true);
+const fileId = ref('');
+const videoName = ref('');
+const videoUrl = ref('');
+const inputDisabled = useDisabled();
+const formItem = useFormItem();
+const dialogFullscreen = ref(false);
+const dialogVisible = ref(false);
+
+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;
+      videoName.value = res.data.trueName;
+      videoUrl.value = import.meta.env.VITE_VIDEO_PATH + res.data.id;
+      formData.value[props.prop] = res.data.id;
+
+      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 isVideo = file.type.includes('video');
+  if (!isVideo) {
+    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 isVideo && 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];
+    loading.value = true;
+    api.queryFile(formData.value[props.prop]).then(res => {
+      loading.value = false;
+      videoName.value = res.data.trueName;
+      videoUrl.value = import.meta.env.VITE_VIDEO_PATH + res.data.id;
+    }).catch(() => {
+      loading.value = false;
+    });
+  } else {
+    loading.value = false;
+    fileId.value = '';
+    videoName.value = '';
+    videoUrl.value = '';
+  }
+};
+
+const showVideo = () => {
+  dialogVisible.value = true;
+};
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if ((newVal || '') === '' || (fileId.value || '') === '' || newVal !== fileId.value) {
+    fileId.value = '';
+    videoName.value = '';
+    videoUrl.value = '';
+    emit('change');
+    loadData();
+  }
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.video-edit-box {
+  display: flex;
+  flex-direction: row;
+  .cc-video {
+    justify-content: start;
+    align-items: center;
+    display: flex;
+    margin-right: 8px;
+  }
+  .cc-video :deep(.el-upload) {
+    display: flex;
+    text-align: center;
+    cursor: pointer;
+    outline: 0;
+    justify-content: start;
+    align-items: center;
+  }
+  .cc-video :deep(.el-upload span) {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+  .cc-video:not(.is-disabled) :deep(.el-upload) {
+    cursor: pointer;
+  }
+  .cc-video:not(.is-disabled) :deep(.el-upload:hover) {
+    border-color: #409EFF;
+  }
+}
+.video-box {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  text-align: center;
+}
+.cc-video-name {
+  cursor: pointer;
+  flex-grow: 1;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-wrap: wrap;
+  white-space: nowrap;
+}
+</style>