@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,269 @@
+<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"
+      :size="size"
+      :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, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getOrganization } from '@/utils/system';
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:name']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  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 === '4') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getOrganization();
+  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 = '';
+    }
+  }
+  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/page/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <!--表格内容栏-->
+  <ac-table
+    ref="dataTable"
+    :pkName="props.pkName"
+    :filters="props.filters"
+    :filterFields="props.filterFields"
+    :columns="props.columns"
+    @handleTableOperator="handleTableOperator"
+    @handleCellOperator="handleCellOperator"
+  />
+
+  <!--新增/编辑/查看界面-->
+  <el-dialog
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    :width="props.dialogWidth"
+    :title="dialogTitle"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <ac-form
+      ref="dataForm"
+      v-model="formData"
+      :fields="props.formColumns.length > 0 ?  props.formColumns : props.columns"
+      :rules="props.rules"
+      :disabled="!dialogEdit"
+      :cols="props.formCols"
+    />
+    <template #footer>
+      <el-button
+        v-if="dialogEdit"
+        size="default"
+        @click="dialogVisible=false"
+        type="info"
+      >取消</el-button>
+      <el-button
+        v-if="dialogEdit"
+        size="default"
+        type="primary"
+        @click="submitForm"
+        :loading="editLoading"
+      >提交</el-button>
+      <el-button
+        v-if="!dialogEdit"
+        size="default"
+        @click="dialogVisible=false"
+        type="info"
+      >关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+  pkName: {
+    type: String,
+    default: 'id'
+  },
+  filters: {
+    type: Object,
+    default: () => {}
+  },
+  filterFields: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  formColumns: {
+    type: Array,
+    default: () => []
+  },
+  formData: {
+    type: Object,
+    default: () => {}
+  },
+  rules: {
+    type: Object,
+    default: () => {}
+  },
+  dialogWidth: {
+    type: String,
+    default: '650px'
+  },
+  formCols: {
+    type: Number,
+    default: 1
+  }
+});
+
+const dataTable = ref();
+const dataForm = ref();
+const formData = ref({});
+const dialogTitle = ref('');
+const dialogVisible = ref(false);
+const editLoading = ref(false);
+const dialogEdit = ref(false);
+
+const handleCellOperator = (property, value, row) => {
+  formData.value = Object.assign({}, row);
+  dialogVisible.value = true;
+  dialogEdit.value = false;
+  dialogTitle.value = '查看';
+};
+
+const handleTableOperator = (button, row) => {
+  dialogVisible.value = true;
+  dialogEdit.value = true;
+  dialogTitle.value = button.name;
+
+  if (button.buttonType === 'edit') {
+    formData.value = Object.assign({}, row, { button: button });
+  } else {
+    formData.value = Object.assign({}, props.formData, { button: button });
+  }
+};
+
+const submitForm = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        editLoading.value = true;
+        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
+          ElMessage.success(res.message);
+          dialogVisible.value = false;
+          dataTable.value.findPage();
+          editLoading.value = false;
+        }).catch(() => {
+          editLoading.value = false;
+        })
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  })
+};
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+  <el-input
+    v-model="modelValue"
+    type="password"
+    @input="handleInput"
+    @blur="handleBlur"
+  ></el-input>
+</template>
+
+<script setup>
+const modelValue = defineModel();
+const emit = defineEmits(['change', 'blur']);
+
+const handleInput = (val) => {
+  emit('change', val);
+};
+
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <el-radio-group
+    v-model="modelValue"
+    @change="handleChange"
+  >
+    <el-radio
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-radio>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  options: [Array, String],
+});
+
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const init = (data) => {
+  if (data) {
+    if (Array.isArray(data)) {
+      options.value = data;
+    } else if (typeof data === 'string') {
+      const optionList = [];
+      data.split(',').forEach(item => {
+        optionList.push({ key: item, value: item });
+      });
+      options.value = optionList;
+    }
+  }
+};
+
+watch(() => props.options, (data) => {
+  init(data);
+}, { immediate: true });
+</script>