@arkxos/arkos-system 0.1.0

package/src/admin/components/entp-tree/index.vue

@@ -0,0 +1,266 @@
+<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"
+      :size="size"
+      @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, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getEntp } from '@/utils/system';
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:name']);
+const props = defineProps({
+  prop: String,
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  size: {
+    type: String,
+    default: 'default'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+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);
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('update:modelValue', id || '');
+  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 === '企业') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getEntp();
+  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(() => props.modelValue, (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = props.modelValue || '';
+  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/admin/components/file/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <span>
+    <el-upload
+      v-if="!inputDisabled"
+      :style="uploadStyle"
+      action=""
+      :class="['ac-file', {'is-disabled': inputDisabled}]"
+      :disabled="inputDisabled"
+      :multiple=false
+      :http-request="handleUpload"
+      :file-list="fileList"
+      :show-file-list=false
+      :before-upload="handleBeforeUpload"
+    >
+      <el-button
+        v-if="inputDisabled !== true"
+        style="margin-right: 10px;"
+        type="success"
+      >
+        <ac-icon
+          iconId="018ece4f70fcf0627f81"
+          style="margin-right: 5px"
+        />点击上传
+      </el-button>
+    </el-upload>
+
+    <el-image-viewer
+      v-if="showViewer"
+      :z-index="9999"
+      teleported
+      @close="closeViewer"
+      :url-list="imageUrls"
+      hide-on-click-modal
+    />
+
+    <span v-for="(item, index) in fileList" class="file" :key="index">
+      <span class="file-item" :class="[{'is-disabled': inputDisabled}]">
+        <span class="file-name" :title="item.name">
+          <span
+            style="cursor: pointer"
+            v-if="isKnowFile(item)"
+          >
+            <span @click="showFile(item)">
+              {{item.name}}
+            </span>
+          </span>
+          <span
+            style="cursor: pointer"
+            v-else-if="item.name.toLowerCase().endsWith('.png')
+              || item.name.toLowerCase().endsWith('.jpeg')
+              || item.name.toLowerCase().endsWith('.jpg')
+              || item.name.toLowerCase().endsWith('.bmp')
+              || item.name.toLowerCase().endsWith('.gif')"
+          >
+            <span @click="showImage(item)">
+              {{item.name}}
+            </span>
+          </span>
+          <span v-else><span>{{item.name}}</span></span>
+        </span>
+        <ac-icon
+          v-if="!inputDisabled && item.status === 1"
+          size="20"
+          color="#999"
+          iconId="018dcab3d3dfd6e82393"
+          class="spinner"
+          title="上传中..."
+        />
+        <ac-icon
+          v-if="inputDisabled || (!inputDisabled && item.status === 2)"
+          size="20"
+          color="#999"
+          iconId="018dc9c3efed1f464d38"
+          title="下载"
+          @click="downloadFile(item)"
+        />
+        <ac-icon
+          v-if="!inputDisabled && item.status === 2"
+          size="20"
+          color="#999"
+          iconId="018dc9c3efd3a0502886"
+          title="删除"
+          @click="deleteFile(item)"
+        ></ac-icon>
+      </span>
+    </span>
+  </span>
+
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    class="no-padding"
+    append-to-body
+    destroy-on-close
+    draggable
+    fullscreen
+  >
+    <vue-office-docx v-if="dialogFileType === 'docx'" :src="dialogUrl" />
+    <vue-office-excel v-if="dialogFileType === 'excel'" :src="dialogUrl" />
+  </el-dialog>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import api from '@/http/api';
+import { ElMessage, ElMessageBox, useDisabled } from 'element-plus';
+// import VueOfficeExcel from '@vue-office/excel';
+// import VueOfficeDocx from '@vue-office/docx';
+import loading from '@/utils/loading';
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const props = defineProps({
+  modelValue: String,
+  uploadStyle: {
+    type: String,
+    default: ''
+  },
+});
+
+const uploadCnt = ref(0);
+const fileId = ref('');
+const fileList = ref([]);
+const baseUrl = ref('/');
+const showViewer = ref(false);
+const imageUrls = ref([]);
+const inputDisabled = useDisabled();
+
+const dialogTitle = ref('');
+const dialogVisible = ref(false);
+const dialogFileType = ref('');
+const dialogUrl = ref('');
+
+const showImage = (file) => {
+  imageUrls.value = [];
+  if (file && file.id) {
+    imageUrls.value = [baseUrl.value + '/file/image/' + file.id];
+    showViewer.value = true;
+  }
+};
+
+const closeViewer = () => {
+  showViewer.value = false;
+};
+
+const handleUpload = (file) => {
+  return new Promise((resolve, reject) => {
+    api.upload({ file: file.file, type: file.file.type }).then((res) => {
+      uploadCnt.value--;
+
+      const filters = fileList.value.filter(item => item.name === res.data.trueName && item.status === 1);
+      if (filters.length > 0) {
+        filters[0].id = res.data.id;
+        filters[0].status = 2;
+      }
+
+      fileList.value = Object.assign([], fileList.value.filter(item => item.name === res.data.trueName));
+      emit('change', fileList.value[0]);
+      emit('update:modelValue', fileList.value[0].id);
+      resolve();
+    }).catch(() => {
+      uploadCnt.value--;
+      reject();
+    });
+  })
+};
+
+const handleBeforeUpload = (file) => {
+  const isLt100M = file.size / 1024 / 1024 < 100;
+  if (!isLt100M) {
+    ElMessage.error('上传大小不能超过 100MB!');
+  } else {
+    fileList.value = Object.assign([], [{ name: file.name, status: 1 }]);
+    uploadCnt.value++;
+  }
+
+  return isLt100M;
+};
+
+const downloadFile = (file) => {
+  api.downloadFileLocal(file.id);
+};
+
+const deleteFile = (file) => {
+  ElMessageBox.confirm('请确认是否删除此文件【' + file.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.deleteAffix(file.id).then(() => {
+      fileList.value = fileList.value.filter(item => item.id !== file.id);
+      if (fileList.value.length === 0) {
+        fileId.value = '';
+        emit('update:modelValue', fileId.value);
+      }
+    });
+  }).catch(() => {});
+};
+
+const loadData = () => {
+  fileList.value = [];
+  if (typeof props.modelValue !== 'undefined' && props.modelValue != null && props.modelValue !== '') {
+    api.queryFile(props.modelValue).then((res) => {
+      if (res.data) {
+        fileId.value = res.data.id;
+        fileList.value = [{ name: res.data.trueName, id: res.data.id, status: 2 }];
+      } else {
+        fileId.value = '';
+      }
+    }).catch((res) => {
+      ElMessage.error(res.message);
+    });
+  } else {
+    fileId.value = '';
+  }
+};
+
+const isKnowFile = (file) => {
+  return file.name.toLowerCase().endsWith('.pdf') ||
+    file.name.toLowerCase().endsWith('.ofd') ||
+
+    file.name.toLowerCase().endsWith('.doc') ||
+    file.name.toLowerCase().endsWith('.docx') ||
+    file.name.toLowerCase().endsWith('.wps') ||
+
+    file.name.toLowerCase().endsWith('.ppt') ||
+    file.name.toLowerCase().endsWith('.pptx') ||
+
+    file.name.toLowerCase().endsWith('.xls') ||
+    file.name.toLowerCase().endsWith('.xlsx') ||
+    file.name.toLowerCase().endsWith('.et')
+};
+
+const showFile = (file) => {
+  dialogUrl.value = '';
+  if (file.name.toLowerCase().endsWith('.pdf')) {
+    loading.showLoading('文件加载中，请稍候...');
+    api.download(file.id).then((res) => {
+      const blob = new Blob([res.data], { type: 'application/pdf' })
+      const href = window.URL.createObjectURL(blob);
+      window.open(href, '_blank');
+      loading.hideLoading();
+    }).catch((res) => {
+      ElMessage.error(res.message);
+      loading.hideLoading();
+    });
+  } else if (file.name.toLowerCase().endsWith('.docx')) {
+    dialogTitle.value = '文件查看【' + file.name + '】'
+    dialogUrl.value = baseUrl.value + '/file/file/' + file.id;
+    dialogFileType.value = 'docx';
+    dialogVisible.value = true;
+  } else if (file.name.toLowerCase().endsWith('.xlsx')) {
+    dialogTitle.value = '文件查看【' + file.name + '】'
+    dialogUrl.value = baseUrl.value + '/file/file/' + file.id;
+    dialogFileType.value = 'excel';
+    dialogVisible.value = true;
+  }
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (newVal === undefined || newVal == null || newVal === '' ||
+      fileId.value == null || fileId.value === '' ||
+      newVal !== fileId.value) {
+    loadData();
+  }
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped lang="scss">
+.file {
+  width: 100%;
+}
+.file-item {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > span {
+    margin-right: 5px;
+  }
+  :deep(.ac-icon) {
+    cursor: pointer;
+  }
+}
+.file-name {
+  overflow: hidden;
+  min-width: 0;
+}
+.file-name > span > span {
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.file-upload {
+  font-size: 18px;
+  margin-left: 5px;
+}
+.file-download, .file-delete {
+  font-size: 18px;
+  cursor: pointer;
+  margin-left: 5px;
+  width: 25px;
+}
+.file-download:hover, .file-delete:hover {
+  color: #409EFF;
+}
+.file-item[class~=is-disabled] .file-delete {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,141 @@
+<template>
+  <el-form
+    ref="dataForm"
+    :model="formData"
+    label-width="120px"
+    :rules="props.rules"
+    label-position="right"
+    :disabled="props.disabled"
+    :hide-required-asterisk="props.disabled"
+  >
+    <div v-if="rowFields.length > 0">
+      <el-row v-for="(colFields, index) in rowFields" :key="index">
+        <el-col
+          v-for="(field, index) in colFields"
+          :key="index"
+          :span="(24 / props.cols) * (field.colspan || 1)"
+        >
+          <el-form-item
+            v-if="typeof field.type === 'undefined' || field.type !== 'blank'"
+            :label="field.label"
+            :prop="field.prop"
+          >
+            <component
+              :is="'ac-' + (field.type || 'input')"
+              v-model="formData[field.prop]"
+              v-bind="cleanProp(field)"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+  </el-form>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+  fields: Array,
+  rules: Object,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  cols: {
+    type: Number,
+    default: 2
+  }
+});
+
+const dataForm = ref();
+const formData = ref({});
+const rowFields = ref([]);
+const cleanProps = ref(['prop', 'label', 'type', 'table', 'sortable', 'tooltip']);
+
+const initFormData = () => {
+  formData.value = Object.assign({}, props.modelValue || {});
+  rowFields.value = calcRowFields(formData.value) || [];
+  dataForm.value && dataForm.value.clearValidate();
+};
+
+const calcRowFields = (json) => {
+  const fields = [];
+  props.fields.filter(item => props.disabled || (!props.disabled && item.onlyShow !== true)).forEach(field => {
+    fields.push(Object.assign({}, field));
+  });
+
+  const rowFields = [];
+  let colFields = [];
+  let itemColspan = 0;
+  for (const field of fields) {
+    for (const prop in field) {
+      if (typeof field[prop] === 'function') {
+        field[prop] = field[prop](json);
+      }
+    }
+
+    const colspan = field.colspan || 1;
+    itemColspan += colspan;
+    colFields.push(field);
+
+    if (itemColspan >= props.colspan) {
+      rowFields.push(colFields);
+      colFields = [];
+      itemColspan = 0;
+    }
+  }
+  if (colFields.length > 0) {
+    rowFields.push(colFields);
+  }
+  return rowFields;
+};
+
+const cleanProp = (field) => {
+  const result = {};
+  for (const prop in field) {
+    if (cleanProps.value.indexOf(prop) < 0) {
+      result[prop] = field[prop];
+    }
+  }
+  return result;
+};
+
+const validate = (callback) => {
+  dataForm.value && dataForm.value.validate(valid => callback(valid));
+};
+
+const clearValidate = () => {
+  dataForm.value.clearValidate()
+};
+
+watch(() => props, () => {
+  initFormData();
+}, { deep: 1 });
+
+watch(() => formData.value, (val) => {
+  if (!tool.isDeepEqual(val, props.modelValue)) {
+    emit('update:modelValue', val);
+  }
+}, { deep: true });
+
+onMounted(() => {
+  initFormData();
+});
+
+onUnmounted(() => {
+  formData.value = {};
+  rowFields.value = [];
+});
+
+defineExpose({
+  validate,
+  clearValidate
+});
+</script>