@arkxos/arkos-system 0.1.0

package/src/admin/components/edit-table/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="table-box">
+    <div style="margin-bottom: 5px">
+      <span>
+        <span v-if="props.tips" style="margin-right: 10px;color: #333">{{props.tips}}</span>
+        <span>新增&nbsp;</span>
+        <el-input
+          v-model.number="newRow"
+          auto-complete="off"
+          style="width:50px"
+        ></el-input>
+        <span>&nbsp;行&nbsp;</span>
+      </span>
+      <el-button type="success" @click="addNew">确定</el-button>
+    </div>
+    <el-form
+      :model="formData"
+      ref="dataForm"
+      label-width="0px"
+      label-position="right"
+    >
+      <!--表格栏-->
+      <el-table
+        ref="dataTable"
+        class="edit-table"
+        width="100%"
+        border
+        :data="formData.list"
+      >
+        <el-table-column
+          v-if="props.checkAll"
+          type="selection"
+          align="center"
+          header-align="center"
+        />
+        <el-table-column
+          v-for="column in calcColumns"
+          header-align="center"
+          align="center"
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :min-width="column.minWidth || 0"
+          :key="column.prop"
+        >
+          <template v-slot="{ row, $index }">
+            <el-form-item
+              v-if="!column.show || column.show(row)"
+              :prop="rules[column.prop] ? 'list.' + $index +'.' + column.prop : null"
+              :rules="rules[column.prop]"
+            >
+              <ac-select
+                v-if="column.type === 'select' || column.dictCode !== undefined"
+                v-model="row[column.prop]"
+                :options="typeof column.options === 'function' ? column.options() : column.options"
+                :dictCode="column.dictCode"
+                :allowCreate="column.allowCreate"
+              ></ac-select>
+              <ac-number
+                v-else-if="column.type === 'number'"
+                v-model="row[column.prop]"
+                :point="column.point || 0"
+              ></ac-number>
+              <el-date-picker
+                v-else-if="column.type === 'date'"
+                v-model="row[column.prop]"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+              />
+              <ac-icon-select
+                v-else-if="column.type === 'icon-select'"
+                v-model="row[column.prop]"
+                size="18px"
+              />
+              <el-input
+                v-else
+                v-model="row[column.prop]"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="80" header-align="center" align="center">
+          <template v-slot="{ row }">
+            <el-button
+              @click="handleDeleteRow(row)"
+              type="danger"
+              link
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
+
+const props = defineProps({
+  tips: String,
+  checkAll: Boolean,
+  columns: Array,
+  rules: Object,
+  dataList: {
+    type: Array,
+    default: () => { return [{}]; }
+  },
+});
+
+const dataTable = ref();
+const dataForm = ref();
+const formData = ref({ list: [] });
+const newRow = ref(1);
+const newRowFlag = ref(0);
+
+const init = (val) => {
+  formData.value.list = [];
+  (val || [{}]).forEach(data => {
+    data.newRowFlag = ++newRowFlag.value
+    formData.value.list.push(Object.assign({}, data))
+  })
+};
+
+const addNew = () => {
+  for (let i = 0; i < newRow.value; i++) {
+    formData.value.list.push({ newRowFlag: ++newRowFlag.value });
+  }
+};
+
+const handleDeleteRow = (row) => {
+  for (let i = 0; i < formData.value.list.length; i++) {
+    if (row.newRowFlag !== undefined && row.newRowFlag === formData.value.list[i].newRowFlag) {
+      formData.value.list.splice(i, 1);
+      return;
+    }
+  }
+};
+
+const validate = () => {
+  return new Promise((resolve) => {
+    dataForm.value.validate(valid => resolve(valid));
+  });
+};
+
+const getList = () => {
+  return formData.value.list;
+};
+
+const calcColumns = computed(() => {
+  return props.columns.filter(column => column.edit === undefined || column.edit)
+});
+
+watch(() => props.dataList, (val) => {
+  init(val)
+});
+
+onMounted(() => {
+  init(props.dataList)
+});
+
+defineExpose({
+  validate,
+  getList
+});
+</script>
+
+<style scoped>
+.edit-table :deep(.el-form-item__content) {
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,247 @@
+<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="placeholder"
+      :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
+    >
+      <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"
+          ></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 { getEmployee } from '@/utils/system';
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:name']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  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 messageRef = ref();
+const message = ref('');
+const loading = ref(false);
+const selectedId = 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 = () => {
+  popoverVisible.value = true;
+  message.value = '';
+  tree.value.filter('');
+  const width = messageRef.value.$el.getBoundingClientRect().width;
+  if (width && width > 0) {
+    popoverWidth.value = width;
+  }
+  return false;
+};
+
+const messageChange = () => {
+  tree.value.filter(message.value);
+};
+
+const clickOutside = () => {
+  popoverVisible.value = false;
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  tree.value.setChecked(id);
+  selectedId.value = id;
+  message.value = value;
+  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;
+  changeValue(data.id || '', data.text || '');
+};
+
+const loadTree = async () => {
+  treeData.value = await getEmployee();
+  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 || '').split(','));
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      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/employees-tree/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-tree-select
+    v-model="selectedIds"
+    multiple
+    :data="treeData"
+    :props="treeProps"
+    :render-after-expand="false"
+    :disabled="inputDisabled"
+    :placeholder="placeholder"
+    :default-expanded-keys="expandedData"
+    :expand-on-click-node="true"
+    show-checkbox
+    filterable
+    check-on-click-node
+    style="width: 100%"
+  />
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useDisabled } from 'element-plus';
+import { getEmployee } from '@/utils/system';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  }
+});
+
+const initializing = ref(false);
+const selectedIds = ref([]);
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  value: 'id',
+  label: 'text',
+  children: 'children'
+});
+
+const loadTree = async() => {
+  treeData.value = await getEmployee();
+  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;
+  emit('update:modelValue', newVal.join(','));
+  setTimeout(() => initializing.value = false, 500);
+});
+
+watch(() => props.modelValue, (newVal) => {
+  if (initializing.value) return;
+
+  initializing.value = true;
+  selectedIds.value = (newVal || '').split(',');
+  setTimeout(() => initializing.value = false, 500);
+});
+
+onMounted(() => {
+  selectedIds.value = props.modelValue ? (props.modelValue || '').split(',') : [];
+  loadTree();
+});
+</script>