@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,181 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="showText">{{ formData[prop + '_name'] || '' }}</span>
+    <el-select
+      v-else
+      ref="selectRef"
+      v-model="currValue"
+      class="select"
+      :multiple="multiple"
+      :filterable="filterable"
+      :placeholder="calcPlaceholder"
+      :disabled="calcDisabled"
+      @change="handleChange"
+      clearable
+      collapse-tags
+      collapse-tags-tooltip
+    >
+      <template #label="{value}">
+        <span v-html="formatHtml(value)" />
+      </template>
+      <el-option
+        v-for="item in options"
+        :key="item.key"
+        :value="item.key"
+        :label="item.value + '@' + item.color"
+        :disabled="item.disabled === true"
+      >
+        <span
+          v-if="item.color"
+          class="cc-dict-label"
+          :style="'background: ' + item.color"
+        >{{item.value}}</span>
+        <span v-else>{{item.value}}</span>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed, inject, onUnmounted } from 'vue';
+import { getDictionary } from '@/utils/system';
+import { useDisabled } from 'element-plus';
+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,
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  disabled: Boolean,
+  showText: Boolean
+})
+
+const currValue = ref();
+const formData = inject('formData');
+const selectRef = ref();
+const loading = ref(true);
+const allOptions = ref([]);
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const init = () => {
+  loadDicAndShow(props.dictCode);
+};
+
+const handleChange = () => {
+  if (props.multiple) {
+    formData.value[props.prop] = currValue.value ? currValue.value.join(',') : '';
+  } else {
+    formData.value[props.prop] = currValue.value || '';
+  }
+
+  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 calcPlaceholder = computed(() => {
+  return (inputDisabled.value || props.disabled) ? '' : props.placeholder;
+});
+
+const calcDisabled = computed(() => {
+  return inputDisabled.value || props.disabled;
+});
+
+const formatHtml = (value) => {
+  const option = options.value.find(item => item.key === value);
+
+  return option && option.color
+    ? `
+    <span
+      class="cc-dict-label"
+      style="background: ${option.color}"
+    >${option.value}</span>
+  `
+    : `<span>${option?.value}</span>`;
+}
+
+const initCurrValue = () => {
+  options.value = filter(allOptions.value, props.queryList);
+  if (props.multiple) {
+    currValue.value = formData.value[props.prop] ? (formData.value[props.prop] || '').split(',') : [];
+    if (!loading.value) {
+      for (const value of currValue.value) {
+        if (!options.value.find(item => item.key === value)) {
+          currValue.value = [];
+          return;
+        }
+      }
+    }
+  } else {
+    currValue.value = formData.value[props.prop] || '';
+    if (!loading.value && !options.value.find(item => item.key === currValue.value)) {
+      currValue.value = '';
+    }
+  }
+};
+
+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>
+
+<style scoped>
+.select {
+  width: 100%;
+}
+.select :deep(.el-select__selection) {
+  flex-wrap: nowrap;
+}
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div style="width: 100%">
+    <span v-if="props.showText">{{ currName }}</span>
+    <el-select
+      v-else
+      ref="selectRef"
+      v-model="currValue"
+      class="cc-dict-selects"
+      :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, inject, onMounted, onUnmounted } from 'vue';
+import { getDictionary } from '@/utils/system';
+import { useDisabled } from 'element-plus';
+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,
+  filterable: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  showText: Boolean
+})
+
+const formData = inject('formData');
+const currValue = ref([]);
+const currName = ref('');
+const selectRef = ref();
+const loading = ref(true);
+const allOptions = ref([]);
+const options = ref([]);
+const inputDisabled = useDisabled();
+
+const init = () => {
+  loadDicAndShow(props.dictCode);
+};
+
+const handleChange = () => {
+  formData[props.prop] = currValue.value.join(',');
+  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();
+  }
+  calcValue();
+};
+
+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 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 calcPlaceholder = computed(() => {
+  return inputDisabled.value === true ? '' : props.placeholder;
+});
+
+const initCurrValue = () => {
+  options.value = filter(allOptions.value, props.queryList);
+  currValue.value = formData.value[props.prop] ? (formData.value[props.prop] || '').split(',') : [];
+  if (!loading.value) {
+    for (const value of currValue.value) {
+      if (!options.value.find(item => item.key === value)) {
+        currValue.value = [];
+        return;
+      }
+    }
+  }
+};
+
+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>
+
+<style scoped>
+.cc-dict-selects {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <span v-if="props.showText">{{ formData[prop + '_name'] || ''}}</span>
+    <el-switch
+      v-else-if="options.length > 1"
+      v-model="formData[prop]"
+      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, 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 init = () => {
+  loadDicAndShow(props.dictCode);
+};
+
+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 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-tree/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-tree-select
+      v-model="formData[prop]"
+      :data="treeData"
+      :props="treeProps"
+      :render-after-expand="false"
+      :disabled="inputDisabled"
+      :placeholder="placeholder"
+      :default-expanded-keys="expandedData"
+      :expand-on-click-node="true"
+      @change="changeValue"
+      filterable
+      check-on-click-node
+      style="width: 100%"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject, onUnmounted } from 'vue';
+import { useDisabled } from 'element-plus';
+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: {
+    type: String,
+    default: ''
+  },
+  showText: Boolean
+});
+const formData = inject('formData');
+const placeholder = ref(props.placeholder);
+const message = ref('');
+const dictList = ref([]);
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  isLeaf: 'leaf',
+  label: 'text'
+});
+const hovering = ref(false);
+
+const init = () => {
+  message.value = '';
+  treeData.value = [];
+  loadDicAndShow(props.dictCode);
+
+  emitter.off('dictionary.change');
+  emitter.on('dictionary.change', () => {
+    loadDicAndShow(props.dictCode);
+  });
+};
+
+const loadDicAndShow = async(dictCode) => {
+  dictList.value = await getDictionary(dictCode) || [];
+  treeData.value = listToTree(tool.deepClone(dictList.value));
+  expandedData.value = ['0'];
+};
+
+const changeValue = () => {
+  emit('change');
+};
+
+const listToTree = (list) => {
+  const map = {}; let node; const result = []; let i;
+  for (i = 0; i < list.length; i++) {
+    node = list[i];
+    node.pid = node.pid || '0';
+    node.id = node.key;
+    node.text = node.value;
+
+    map[node.id] = i;
+    node.children = [];
+  }
+
+  for (i = 0; i < list.length; i++) {
+    node = list[i];
+    if (node.pid && node.pid !== '0') {
+      if (map[node.pid] >= 0) {
+        list[map[node.pid]].children.push(node);
+      }
+    } else {
+      result.push(node);
+    }
+  }
+
+  return result;
+};
+
+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/edit-table/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="cc-edit-table">
+    <div style="margin-bottom: 5px">
+      <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="cc-table"
+        width="100%"
+        border
+        :data="formData.list"
+      >
+        <el-table-column
+          v-for="column in columns"
+          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 }">
+            <span v-if="!column.show || column.show(row)">
+              <el-form-item
+                :prop="rules[column.prop] ? 'list.' + $index +'.' + column.prop : null"
+                :rules="rules[column.prop]"
+              >
+                <cc-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"
+                ></cc-select>
+                <cc-number
+                  v-else-if="column.type === 'number'"
+                  v-model="row[column.prop]"
+                  :point="column.point || 0"
+                ></cc-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]"
+                />
+                <el-input
+                  v-else
+                  v-model="row[column.prop]"
+                ></el-input>
+              </el-form-item>
+            </span>
+          </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, onMounted } from 'vue';
+
+const props = defineProps({
+  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 = (callback) => {
+  const promise = new Promise((resolve, reject) => {
+    dataForm.value.validate(valid => resolve(valid)).catch(e => reject(e));
+  });
+  promise.then(valid => callback(valid)).catch(() => callback(false));
+  return promise;
+};
+
+const getList = () => {
+  return formData.value.list;
+};
+
+watch(() => props.dataList, (val) => {
+  init(val)
+});
+
+onMounted(() => {
+  init(props.dataList)
+});
+
+defineExpose({
+  validate,
+  getList
+});
+</script>
+
+<style scoped>
+.cc-edit-table .cc-table :deep(.el-form-item__content) {
+  justify-content: center;
+}
+</style>