@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <span v-if="props.showText">{{currName}}</span>
+    <el-radio-group
+      v-else
+      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>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { getDictionary } from '@/utils/system';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  dictCode: String,
+  showText: Boolean
+});
+
+const modelValue = defineModel();
+const currName = ref('');
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+
+  calcValue();
+};
+
+const calcValue = () => {
+  currName.value = '';
+  if (props.showText) {
+    options.value.forEach(option => {
+      if (option.key === modelValue.value) {
+        currName.value = option.value;
+      }
+    });
+  }
+};
+
+const init = (dictCode) => {
+  loadDicAndShow(dictCode);
+};
+
+watch(() => props.dictCode, (dictCode) => {
+  init(dictCode);
+}, { immediate: true });
+
+watch(() => modelValue.value, () => {
+  calcValue();
+});
+</script>

package/src/admin/components/dict-select/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="props.showText">{{currName}}</span>
+    <el-select
+      v-else
+      v-model="modelValue"
+      class="select"
+      :size="size"
+      :filterable="props.filterable"
+      :placeholder="calcPlaceholder"
+      @change="handleChange"
+      clearable
+    >
+      <el-option v-for="item in options"
+        :key="item.key"
+        :value="item.key"
+        :label="item.value"
+        :disabled="item.disabled === true"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { getDictionary } from '@/utils/system';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  dictCode: String,
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  size: {
+    type: String,
+    default: 'default'
+  },
+  showText: Boolean
+});
+
+const modelValue = defineModel();
+const currName = ref('');
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  currName.value = '';
+  if (props.showText) {
+    options.value.forEach(option => {
+      if (option.key === modelValue.value) {
+        currName.value = option.value;
+      }
+    });
+  }
+};
+
+const calcPlaceholder = computed(() => {
+  return inputDisabled.value === true ? '' : props.placeholder;
+});
+
+watch(() => props.dictCode, (dictCode) => {
+  loadDicAndShow(dictCode);
+}, { immediate: true });
+
+watch(() => modelValue.value, () => {
+  calcValue();
+});
+</script>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+</style>

package/src/admin/components/dict-selects/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="props.showText">{{currName}}</span>
+    <el-select
+      v-else
+      v-model="currValue"
+      class="select"
+      :size="size"
+      :filterable="props.filterable"
+      :placeholder="calcPlaceholder"
+      @change="handleChange"
+      multiple
+      clearable
+    >
+      <el-option v-for="item in options"
+        :key="item.key"
+        :value="item.key"
+        :label="item.value"
+        :disabled="item.disabled === true"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { getDictionary } from '@/utils/system';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  dictCode: String,
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  size: {
+    type: String,
+    default: 'default'
+  },
+  showText: Boolean
+});
+
+const modelValue = defineModel();
+const currName = ref('');
+const currValue = ref([]);
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const handleChange = () => {
+  if (currValue.value && currValue.value.length > 0) {
+    modelValue.value = currValue.value.join(',')
+  } else {
+    modelValue.value = '';
+  }
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  currName.value = '';
+  if (props.showText) {
+    options.value.forEach(option => {
+      if (currValue.value.includes(option.key)) {
+        currName.value = option.value;
+      }
+    });
+  }
+};
+
+const calcPlaceholder = computed(() => {
+  return inputDisabled.value === true ? '' : props.placeholder;
+});
+
+watch(() => props.dictCode, (dictCode) => {
+  loadDicAndShow(dictCode);
+}, { immediate: true });
+
+watch(() => modelValue.value, () => {
+  currValue.value = modelValue.value ? modelValue.value.split(',') : [];
+  calcValue();
+});
+</script>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+</style>

package/src/admin/components/dict-switch/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <span v-if="props.showText">{{currName}}</span>
+    <el-switch
+      v-if="options.length > 1"
+      v-model="modelValue"
+      class="cc-switch"
+      inline-prompt
+      :active-text="options[0].value"
+      :active-value="options[0].key"
+      :inactive-text="options[1].value"
+      :inactive-value="options[1].key"
+      @change="handleChange"
+    ></el-switch>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { getDictionary } from '@/utils/system';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  dictCode: String,
+  showText: Boolean
+})
+
+const modelValue = defineModel();
+const currName = ref('');
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+
+  calcValue();
+};
+
+const calcValue = () => {
+  currName.value = '';
+  if (props.showText) {
+    options.value.forEach(option => {
+      if (option.key === modelValue.value) {
+        currName.value = option.value;
+      }
+    });
+  }
+};
+
+watch(() => props.dictCode, (dictCode) => {
+  loadDicAndShow(dictCode);
+}, { immediate: true });
+
+watch(() => modelValue.value, () => {
+  calcValue();
+});
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <ac-tree
+    v-model="modelValue"
+    data-url="/system/dictionary/queryTree"
+    :leafSelect="false"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+
+const handleChange = () => {
+  emit('change');
+};
+</script>

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

@@ -0,0 +1,224 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-input v-if="inputDisabled" v-model="message"></el-input>
+    <el-popover
+      v-else
+      ref="popover"
+      width="—"
+      placement="bottom-start"
+      :visible-arrow="true"
+      trigger="click"
+    >
+        <template #reference>
+          <el-input v-model="message" readonly>
+            <template #suffix>
+              <cc-icon
+                v-if="hovering"
+                style="cursor: pointer;color: #c0c4cc"
+                @click.stop="clearInput"
+                iconId="018dca412c4ebd53fd1d"
+              />
+            </template>
+          </el-input>
+        </template>
+        <el-scrollbar
+          wrap-class="popover-scrollbar"
+          wrap-style="min-height:0px;max-height: 400px;min-width: 300px"
+          view-style="height:100%;"
+          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"
+              :default-expanded-keys="expandedData"
+              :check-strictly="true"
+              :filter-node-method="filterNode"
+              :expand-on-click-node="leafSelect"
+              @check="handleClick"
+              @node-click="nodeClick"
+            ></el-tree>
+          </el-row>
+        </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { useDisabled } from 'element-plus';
+import api from '@/http/api'
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  dataFieldId: String,
+  leafSelect: {
+    type: Boolean,
+    default: true,
+  },
+  typeSelect: {
+    type: String,
+    default: '',
+  },
+});
+const modelValue = defineModel();
+
+const initializing = ref(false);
+const tree = ref();
+const popover = ref();
+const filterText = ref('');
+const message = ref('');
+const loading = ref(false);
+const selectedData = ref(modelValue.value || '');
+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 changeValue = (id, value) => {
+  initializing.value = true;
+  modelValue.value = id;
+  message.value = value;
+  emit('change');
+  hidePopover()
+  nextTick(() => {
+    initializing.value = false;
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0;
+};
+
+const handleClick = (data) => {
+  if (props.typeSelect !== '' && props.typeSelect !== data.type) {
+    return;
+  }
+
+  if (data) {
+    tree.value.setCheckedNodes([data]);
+    changeValue(data.id || '', data.text || '');
+  } else {
+    changeValue('', '');
+  }
+  hidePopover();
+};
+
+const nodeClick = (data, node) => {
+  if (data.disabled === true) {
+    changeValue('', '');
+    return;
+  }
+
+  if (props.typeSelect !== '' && props.typeSelect !== data.type) {
+    return;
+  }
+
+  if (!props.leafSelect || (props.leafSelect && node.isLeaf)) {
+    if (data.disabled !== undefined && data.disabled === true) {
+      return;
+    }
+
+    hidePopover()
+    tree.value.setCheckedNodes([data]);
+
+    changeValue(data.id || '', data.text || '');
+  } else {
+    tree.value.setCheckedNodes([]);
+  }
+};
+
+const loadTree = async() => {
+  const url = '/business/data-field/' + props.dataFieldId + '/tree';
+  api.post(url, props.query || {}).then(res => {
+    treeData.value = res.data.children || [];
+    expandedData.value = [treeData.value && treeData.value[0] && treeData.value[0].id];
+    if (modelValue.value) {
+      expandedData.value.push(modelValue.value);
+    }
+    calcValue();
+  });
+};
+
+const calcValue = () => {
+  message.value = '';
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedData.value;
+  } else {
+    const list = findData(treeData.value, selectedData.value);
+    for (let i = 0; i < list.length; i++) {
+      if (i > 0) {
+        message.value += ',';
+      }
+      message.value += list[i].text;
+    }
+  }
+};
+
+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;
+};
+
+const hidePopover = () => {
+  popover.value && popover.value.hide()
+};
+
+watch(() => modelValue.value, (newVal) => {
+  if (initializing.value) return;
+
+  if (tree.value) {
+    tree.value.setCheckedNodes([]);
+  }
+
+  selectedData.value = (newVal || '');
+  if (selectedData.value.length <= 0) {
+    return;
+  }
+
+  message.value = '';
+  calcValue();
+});
+
+watch(() => filterText.value, (newVal) => {
+  tree.value.filter(newVal);
+});
+
+onMounted(() => {
+  loadTree()
+});
+</script>