@arkxos/arkos-system 0.1.0

package/src/admin/components/rich-editor/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div
+    v-if="props.showText || inputDisabled"
+    v-html="props.modelValue"
+    style="width: 100%;"
+    class="html-box"
+  ></div>
+  <div class="editor-box" v-else>
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 400px; overflow-y: hidden"
+      @onCreated="handleCreated"
+      @onChange="handleChange"
+      @customPaste="customPaste"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { ref, onMounted, watch, shallowRef, onBeforeUnmount } from 'vue';
+import { useDisabled } from 'element-plus';
+import api from '@/http/api'
+
+const emit = defineEmits(['update:modelValue', 'change'])
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  isClear: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: Number,
+    default: 500
+  },
+  mode: {
+    type: String,
+    default: 'default'
+  },
+  showText: Boolean
+});
+
+const editorRef = shallowRef();
+const loading = ref(false);
+const inputDisabled = useDisabled();
+const valueHtml = ref('')
+const toolbarConfig = ref({});
+const editorConfig = ref({ MENU_CONF: [] });
+
+editorConfig.value.MENU_CONF['uploadImage'] = {
+  async customUpload(file, insertFn) {
+    api.upload({ file: file, type: file.type }).then((res) => {
+      loading.value = false;
+      insertFn(import.meta.env.VITE_IMAGE_PATH + res.data.id);
+    }).catch(() => {
+      loading.value = false;
+    });
+  }
+};
+
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+  editor.setHtml(valueHtml.value || '');
+};
+
+const handleChange = (editor) => {
+  emit('update:modelValue', editor.getHtml());
+  emit('change', editor.getHtml());
+};
+
+const customPaste = (editor, event) => {
+  let content = event.text;
+  content = content.replace(/&nbsp;/ig, '');
+  content = content.replace(/<o:p><\/o:p>/g, '');
+  content = content.replace(/<o><\/o>/ig, '');
+  content = content.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
+  content = content.replace(/<style>[\s\S]*?<\/style>/ig, '');
+  content = content.replace(/<([a-zA-Z1-6]+)(\s*[^>]*)?>/ig, '<$1>');
+  content = content.replace(/<span>([\s\S]*?)<\/span>/ig, '$1');
+  content = content.replace(/<br\/>/g, '');
+  content = content.replace(/<br>/g, '');
+
+  editor.insertText(content);
+};
+
+watch(() => props.modelValue, (newVal) => {
+  valueHtml.value = newVal || '';
+});
+
+watch(() => props.isClear, (newVal) => {
+  if (newVal) {
+    valueHtml.value = '';
+  }
+});
+
+onMounted(() => {
+  valueHtml.value = props.modelValue || '';
+});
+
+onBeforeUnmount(() => {
+  if (!inputDisabled) {
+    const editor = editorRef.value;
+    if (editor == null) return;
+
+    editor.destroy();
+  }
+});
+</script>
+
+<style>
+.w-e-toolbar {
+  z-index: 503!important;
+}
+.w-e-menu {
+  z-index: 502!important;
+}
+.w-e-text-container{
+  z-index: 501!important;
+}
+</style>
+
+<style scoped>
+.html-box {
+  min-height: 100px;
+  max-height: 500px;
+  overflow: auto;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  background: #F5F7FA;
+  padding: 10px 10px;
+}
+.editor-box {
+  border: 1px solid #ccc;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  z-index: 10;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <el-select
+    v-model="modelValue"
+    class="select"
+    :filterable="true"
+    placeholder="--请选择--"
+    @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>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoleStore } from '@/pinia/modules/role';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  options: [Array, String],
+  showAll: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const options = ref([]);
+const roleStore = useRoleStore();
+
+const handleChange = () => {
+  emit('change');
+};
+
+onMounted(() => {
+  const optionList = [];
+  if (props.showAll) {
+    optionList.push({ key: 'all', value: '所有角色' });
+  }
+  roleStore.getRole().then(roles => {
+    roles.forEach(role => {
+      optionList.push({ key: role.id, value: role.name });
+    });
+    options.value = optionList;
+  });
+});
+</script>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+</style>

package/src/admin/components/script-input/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="script-input">
+    <div class="input">
+      <el-input
+        v-if="manual"
+        v-model="value"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        :size="props.size"
+        :clearable="props.clearable"
+        @input="handleInput"
+        @blur="handleBlur"
+      ></el-input>
+      <ac-tree
+        v-else
+        v-model="value"
+        data-url="/system/scriptGroovy/queryTree"
+        type-select="script"
+        :size="props.size"
+      />
+    </div>
+    <div class="switch">
+      <ac-switch
+        v-model="manual"
+        @change="value = ''"
+        :options="[{key: true, value: ''}, {key: false, value: ''}]"
+        title="手动输入"
+        size="small"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+const emit = defineEmits(['change', 'blur']);
+const modelValue = defineModel();
+const props = defineProps({
+  placeholder: String,
+  disabled: Boolean,
+  size: String,
+  clearable: Boolean
+});
+
+const manual = ref(true);
+const value = ref('');
+
+const handleInput = () => {
+  changeValue();
+};
+
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+
+const changeValue = () => {
+  modelValue.value = JSON.stringify({
+    value: value.value,
+    manual: manual.value
+  });
+  emit('change');
+};
+
+watch(() => manual.value, () => {
+  changeValue();
+});
+
+watch(() => value.value, () => {
+  changeValue();
+});
+
+onMounted(() => {
+  let json = {};
+  if (modelValue.value) {
+    try {
+      json = JSON.parse(modelValue.value);
+    } catch (ignore) { /* empty */ }
+  }
+
+  manual.value = json.manual !== false;
+  value.value = json.value || '';
+});
+</script>
+
+<style scoped lang="scss">
+.script-input {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  .input {
+    flex-grow: 1;
+  }
+  .switch {
+    padding-left: 5px;
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="modelValue"
+    class="select"
+    :allow-create="props.allowCreate"
+    :disabled="inputDisabled"
+    :filterable="props.allowCreate || 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>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  options: [Array, String],
+  allowCreate: {
+    type: Boolean,
+    default: false
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  }
+});
+
+const selectRef = ref();
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const init = (data) => {
+  if (data) {
+    if (Array.isArray(data)) {
+      options.value = data;
+    } else if (data === 'clear.options') {
+      options.value = [];
+    } else if (typeof data === 'string') {
+      const optionList = [];
+      data.split(',').forEach(item => {
+        optionList.push({ key: item, value: item });
+      });
+      options.value = optionList;
+    }
+  }
+
+  if (modelValue.value &&
+      props.allowCreate &&
+      options.value.findIndex(item => item.key === modelValue.value) < 0) {
+    options.value.push({ key: modelValue.value, value: modelValue.value });
+  }
+};
+
+const handleChange = () => {
+  if (modelValue.value &&
+      props.allowCreate &&
+      options.value.findIndex(item => item.key === modelValue.value) < 0) {
+    options.value.push({ key: modelValue.value, value: modelValue.value });
+  }
+
+  let key = []; const resultKey = []; const resultValue = [];
+  if (modelValue.value && options.value) {
+    key = [modelValue.value];
+
+    options.value.forEach(item => {
+      if (key.indexOf(item.key) >= 0) {
+        resultKey.push(item.key);
+        resultValue.push(item.value);
+      }
+    });
+  }
+
+  emit('change', resultKey.join(','), resultValue.join(','));
+};
+
+const calcPlaceholder = computed(() => {
+  return inputDisabled.value === true ? '' : props.placeholder;
+});
+
+watch(() => props.options, (data) => {
+  init(data);
+}, { immediate: true });
+</script>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <el-select
+    v-model="dicSelect"
+    class="select"
+    :disabled="inputDisabled"
+    :filterable="props.allowCreate || props.filterable"
+    :placeholder="calcPlaceholder"
+    @change="handleChange"
+    @blur="handleBlur"
+    clearable
+    multiple
+  >
+    <el-option v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+      :label="item.value"
+      :disabled="item.disabled === true"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  options: [String, Array],
+  filterable: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+})
+
+const options = ref([]);
+const dicSelect = ref([]);
+const inputDisabled = useDisabled();
+
+const init = (data) => {
+  dicSelect.value = [];
+  options.value = [];
+
+  if (data.options) {
+    if (Array.isArray(data.options)) {
+      options.value = data.options;
+    } else if (typeof data.options === 'string') {
+      const optionList = [];
+      data.options.split(',').forEach(item => {
+        optionList.push({ key: item, value: item });
+      });
+      options.value = optionList;
+    }
+
+    dicSelect.value = data.modelValue ? data.modelValue.split(',') : [];
+  }
+};
+
+const handleChange = () => {
+  let key = []; const resultKey = []; const resultValue = [];
+  if (dicSelect.value && options.value) {
+    key = dicSelect.value;
+
+    options.value.forEach(item => {
+      if (key.indexOf(item.key) >= 0) {
+        resultKey.push(item.key);
+        resultValue.push(item.value);
+      }
+    });
+  }
+
+  emit('update:modelValue', resultKey.join(','), resultValue.join(','));
+  emit('change', resultKey.join(','), resultValue.join(','));
+};
+
+const handleBlur = () => {
+  handleChange();
+};
+
+const calcPlaceholder = computed(() => {
+  return inputDisabled.value === true ? '' : props.placeholder;
+});
+
+watch(() => props, (data) => {
+  init(data);
+}, { immediate: true, deep: 1 });
+</script>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+</style>