@arkxos/arkos-system 0.1.0

package/src/codeless/components/buttons/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-radio-group
+    v-model="formData[prop]"
+    @change="handleChange"
+  >
+    <el-radio-button value="" v-if="showAll">全部</el-radio-button>
+    <el-radio-button
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from 'vue';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: [Array, String],
+  showAll: {
+    type: Boolean,
+    default: () => false
+  },
+});
+const formData = inject('formData');
+
+const options = ref([]);
+
+const init = (data) => {
+  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;
+    }
+  }
+};
+
+const handleChange = (event) => {
+  emit('change', event);
+};
+
+watch(() => props, (data) => {
+  init(data);
+}, { deep: 1 });
+
+onMounted(() => {
+  init(props);
+});
+</script>

package/src/codeless/components/checkbox/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <span v-if="props.showText">{{currName}}</span>
+  <el-checkbox-group
+    v-else
+    v-model="currValue"
+    class="cc-checkbox"
+    :disabled="inputDisabled"
+    @change="handleChange"
+  >
+    <el-checkbox
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+      :disabled="item.disabled === true"
+    >{{item.value}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { ref, watch, inject } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: [Array, String],
+  allowCreate: {
+    type: Boolean,
+    default: false
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  showText: Boolean
+});
+const formData = inject('formData');
+const currValue = ref([]);
+const currName = ref('');
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const init = (data) => {
+  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;
+    }
+  }
+
+  calcValue();
+};
+
+const calcValue = () => {
+  if (props.showText) {
+    const names = [];
+    options.value.forEach(option => {
+      currValue.value.forEach(value => {
+        if (option.key === value) {
+          names.push(option.value);
+        }
+      });
+    });
+    currName.value = names.join(',');
+  }
+};
+
+const handleChange = (event) => {
+  formData.value[props.prop] = currValue.value.join(',');
+  emit('change', event);
+};
+
+watch(() => props, (data) => {
+  init(data);
+}, { immediate: true, deep: 1 });
+
+watch(() => formData.value[props.prop], (data) => {
+  currValue.value = data ? data.split(',') : [];
+  calcValue();
+}, { immediate: true });
+
+watch(() => currValue.value, (val) => {
+  if (val) {
+    formData.value[props.prop] = val.filter(item => item && item !== '').join(',');
+  } else {
+    formData.value[props.prop] = '';
+  }
+});
+</script>
+
+<style scoped>
+.cc-checkbox {
+  text-align: left;
+}
+</style>

package/src/codeless/components/date/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-tooltip
+    placement="bottom"
+    effect="light"
+    popper-class="padding-10-15"
+    raw-content
+    :disabled="type !== 'dates' || calcContent === '' || showText"
+    :content="calcContent"
+  >
+  <div style="width: 100%" class="cc-date">
+    <span v-if="showText">{{calcContent || ''}}</span>
+      <el-date-picker
+        v-model="currValue"
+        style="width: 100%"
+        :type="type"
+        :format="format"
+        :value-format="valueFormat"
+        :placeholder="placeholder"
+        :disabled="calcDisabled"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+  </div>
+  </el-tooltip>
+</template>
+
+<script setup>
+import { ref, computed, watch, inject } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['change', 'blur']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: Object,
+  placeholder: String,
+  type: {
+    type: String,
+    default: 'date'
+  },
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  },
+  showText: Boolean,
+  disabled: Boolean,
+});
+
+const inputDisabled = useDisabled();
+const currValue = ref();
+const formData = inject('formData');
+const type = ref(props.type);
+
+const calcDisabled = computed(() => {
+  return inputDisabled.value || props.disabled || false;
+});
+
+const calcContent = computed(() => {
+  const dates = (formData.value[props.prop] || '').split(',')
+  return dates.sort().join(' <br/>');
+});
+
+const handleChange = () => {
+  if (type.value === 'dates') {
+    formData.value[props.prop] = currValue.value ? currValue.value.join(',') : '';
+  } else {
+    formData.value[props.prop] = currValue.value || '';
+  }
+  emit('change');
+};
+
+const handleBlur = () => {
+  if (type.value === 'dates') {
+    formData.value[props.prop] = currValue.value ? currValue.value.join(',') : '';
+  } else {
+    formData.value[props.prop] = currValue.value || '';
+  }
+  emit('blur');
+};
+
+watch(() => formData.value[props.prop], () => {
+  if (type.value === 'dates') {
+    currValue.value = formData.value[props.prop] ? (formData.value[props.prop] || '').split(',') : [];
+  } else {
+    currValue.value = formData.value[props.prop] || '';
+  }
+}, { immediate: true });
+
+watch(() => props, () => {
+  if (props.format && props.format.indexOf('HH') >= 0) {
+    type.value = 'datetime';
+  } else {
+    type.value = props.type || 'date';
+  }
+  if (type.value && type.value.startsWith('cc-')) {
+    type.value = type.value.substring(3);
+  }
+}, { immediate: true, deep: true });
+</script>

package/src/codeless/components/datetime/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="width: 100%" class="cc-datetime">
+    <span v-if="props.showText">{{currValue || ''}}</span>
+    <el-date-picker
+      v-else
+      v-model="currValue"
+      type="datetime"
+      style="width: 100%"
+      :format="format"
+      :value-format="valueFormat"
+      @change="handleChange"
+      @blur="handleBlur"
+    />
+  </div>
+</template>
+
+<script setup>
+import { inject, ref, watch } from 'vue';
+import date from '@/utils/date';
+
+const emit = defineEmits(['change', 'blur']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  options: Object,
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  showText: Boolean,
+});
+
+const formData = inject('formData');
+const currValue = ref('');
+
+const handleChange = () => {
+  emit('change');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+
+watch(() => formData.value[props.prop], (val) => {
+  if (val) {
+    currValue.value = date.formatLongDate(val);
+  } else {
+    currValue.value = '';
+  }
+}, { immediate: true });
+
+watch(() => currValue.value, (val) => {
+  if (val) {
+    formData.value[props.prop] = new Date(val.replace(/-/g, '/')).getTime();
+  } else {
+    formData.value[props.prop] = '';
+  }
+});
+</script>

package/src/codeless/components/dialog-select/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    style="width: 100%"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <el-input
+      v-model="formData[prop + '_name']"
+      @click="showDialog"
+      placeholder="--请选择--"
+      :disabled="calcDisabled"
+      readonly
+    >
+      <template #suffix>
+        <cc-icon
+          v-if="hovering && formData[prop]"
+          style="cursor: pointer;color: #c0c4cc"
+          @click.stop="clearData"
+          iconId="018dca412c4ebd53fd1d"
+        />
+      </template>
+    </el-input>
+    <el-dialog
+      v-model="dialogVisible"
+      :width="dialogWidth"
+      append-to-body
+      destroy-on-close
+      draggable
+      :close-on-click-modal="false"
+      :fullscreen="dialogFullscreen"
+      class="cc-page-comp-dialog no-padding"
+    >
+      <template #header>
+        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
+          <div class="title">{{dialogTitle}}</div>
+          <div class="button">
+            <cc-icon
+              v-if="!dialogFullscreen"
+              iconId="018dca8cad1b28075ecd"
+              @click="dialogFullscreen=true"
+              title="最大化"
+            />
+            <cc-icon
+              v-if="dialogFullscreen"
+              iconId="018dca8cad1b9b03c47f"
+              @click="dialogFullscreen=false"
+              title="缩小"
+            />
+          </div>
+        </div>
+      </template>
+      <Page ref="pageRef" :dataPageId="pageId" :inputParam="inputParam" />
+      <template #footer>
+        <el-button
+          size="default"
+          type="info"
+          @click="dialogVisible = false"
+        >取消</el-button>
+        <el-button
+          size="default"
+          type="primary"
+          @click="() => submitDialogForm(null)"
+        >确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, inject } from 'vue';
+import { ElMessage, useDisabled } from 'element-plus';
+import Page from '@/codeless/view/page.vue';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  idProp: {
+    type: String,
+    default: 'id'
+  },
+  nameProp: {
+    type: String,
+    default: 'name'
+  },
+  pageId: String,
+  dialogFullscreen: {
+    type: Boolean,
+    default: false
+  },
+  dialogWidth: {
+    type: Number,
+    default: 0
+  },
+  dialogTitle: String,
+  inputParam: Object,
+  disabled: Boolean,
+});
+
+const inputDisabled = useDisabled();
+const formData = inject('formData');
+const dialogTitle = ref('');
+const dialogFullscreen = ref(props.dialogFullscreen);
+const dialogVisible = ref(false);
+const pageRef = ref();
+const hovering = ref(false);
+
+const showDialog = () => {
+  dialogVisible.value = true;
+};
+
+const clearData = () => {
+  formData.value[props.prop] = '';
+  formData.value[props.prop + '_name'] = '';
+};
+
+const submitDialogForm = () => {
+  if (!pageRef.value) return;
+  const pageData = pageRef.value.getData();
+  if (!pageData) return;
+
+  for (const dataList of Object.values(pageData)) {
+    if (!(dataList instanceof Array)) continue;
+
+    if (dataList.length === 0) {
+      ElMessage.error('请先选择一条记录！');
+    } else if (dataList.length > 1) {
+      ElMessage.error('只能选择一条记录！');
+    } else {
+      const data = dataList[0];
+      formData.value[props.prop] = data[props.idProp];
+      formData.value[props.prop + '_name'] = data[props.nameProp];
+      dialogVisible.value = false;
+      emit('change');
+      return;
+    }
+  }
+};
+
+const calcDisabled = computed(() => {
+  return inputDisabled.value || props.disabled;
+});
+
+watch(() => props, () => {
+  dialogTitle.value = (props.dialogTitle || '') + ' 选择';
+}, { immediate: true, deep: 1 });
+</script>
+
+<style>
+.remote-select-box .el-select-dropdown__wrap {
+  max-height: 70vh;
+  text-align: left;
+}
+</style>
+<style scoped>
+.empty {
+  font-size: 14px;
+  padding: 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+}
+</style>

package/src/codeless/components/dict-buttons/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <span v-if="props.showText">{{formData[prop + '_name'] || ''}}</span>
+  <el-radio-group
+    v-else
+    v-model="formData[prop]"
+    @change="handleChange"
+  >
+    <el-radio-button value="" v-if="showAll">全部</el-radio-button>
+    <el-radio-button
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted, inject } from 'vue';
+import { getDictionary } from '@/utils/system';
+import emitter from '@/utils/bus';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  dictCode: String,
+  queryList: Object,
+  showText: Boolean,
+  showAll: {
+    type: Boolean,
+    default: () => false
+  },
+});
+
+const formData = inject('formData');
+const loading = ref(true);
+const options = ref([]);
+const allOptions = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    allOptions.value = [];
+    options.value = [];
+  } else {
+    loading.value = true;
+    allOptions.value = await getDictionary(dictCode);
+    loading.value = false;
+    initCurrValue();
+  }
+};
+
+const filter = (list, queryList) => {
+  if (!list || list.length === 0 || !queryList || queryList.length === 0) return list || [];
+  return list.filter(item => queryList.every(query => {
+    if (query.filterValue) {
+      return item[query.filterFieldId] === query.filterValue;
+    } else {
+      return item[query.filterFieldId] === formData.value[query.dataFieldName];
+    }
+  }));
+};
+
+const init = () => {
+  loadDicAndShow(props.dictCode);
+};
+
+const initCurrValue = () => {
+  options.value = filter(allOptions.value, props.queryList);
+  if (!loading.value && !options.value.find(item => item.key === (formData.value[props.prop] || ''))) {
+    formData.value[props.prop] = '';
+  }
+};
+
+watch(() => tool.deepClone(formData.value), () => {
+  initCurrValue();
+}, { immediate: true });
+
+watch(() => props.dictCode, () => {
+  init();
+}, { immediate: true });
+
+onMounted(() => {
+  emitter.off('dictionary.change', init);
+  emitter.on('dictionary.change', init);
+});
+
+onUnmounted(() => {
+  emitter.off('dictionary.change', init);
+});
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <span v-if="props.showText">{{formData[prop + '_name'] || ''}}</span>
+    <el-radio-group
+      v-else
+      v-model="formData[prop]"
+      @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, onMounted, inject, onUnmounted } from 'vue';
+import { getDictionary } from '@/utils/system';
+import emitter from '@/utils/bus';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  prop: {
+    type: String,
+    default: ''
+  },
+  dictCode: String,
+  queryList: Object,
+  showText: Boolean,
+});
+
+const formData = inject('formData');
+const loading = ref(true);
+const allOptions = ref([]);
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    allOptions.value = [];
+    options.value = [];
+  } else {
+    loading.value = true;
+    allOptions.value = await getDictionary(dictCode);
+    loading.value = false;
+    initCurrValue();
+  }
+};
+
+const filter = (list, queryList) => {
+  if (!list || list.length === 0 || !queryList || queryList.length === 0) return list || [];
+  return list.filter(item => queryList.every(query => {
+    if (query.filterValue) {
+      return item[query.filterFieldId] === query.filterValue;
+    } else {
+      return item[query.filterFieldId] === formData.value[query.dataFieldName];
+    }
+  }));
+};
+
+const init = () => {
+  loadDicAndShow(props.dictCode);
+};
+
+const initCurrValue = () => {
+  options.value = filter(allOptions.value, props.queryList);
+  if (!loading.value && !options.value.find(item => item.key === (formData.value[props.prop] || ''))) {
+    formData.value[props.prop] = '';
+  }
+};
+
+watch(() => tool.deepClone(formData.value), () => {
+  initCurrValue();
+}, { immediate: true });
+
+watch(() => props.dictCode, () => {
+  init();
+}, { immediate: true });
+
+onMounted(() => {
+  emitter.off('dictionary.change', init);
+  emitter.on('dictionary.change', init);
+});
+
+onUnmounted(() => {
+  emitter.off('dictionary.change', init);
+});
+</script>