@arkxos/arkos-system 0.1.0

package/src/admin/components/color-picker/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-input
+    v-model="modelValue"
+    :size="props.size"
+    @change="handleChange"
+    class="input-box"
+  >
+    <template #append>
+      <el-color-picker
+        v-model="modelValue"
+        :size="props.size"
+        show-alpha
+        @change="handleChange"
+      />
+    </template>
+  </el-input>
+</template>
+
+<script setup>
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  size: String,
+});
+
+const handleChange = (val) => {
+  emit('change', val);
+};
+</script>
+
+<style scoped lang="scss">
+.input-box {
+  :deep(.el-input-group__append) {
+    padding: 0!important;
+    .el-color-picker__trigger {
+      border: none;
+      padding: 0!important;
+      width: 40px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    .el-color-picker--small .el-color-picker__trigger {
+      width: 25px;
+    }
+    .el-color-picker__color {
+      border: none;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+
+    }
+    .el-color-picker__color-inner {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+  }
+}
+</style>

package/src/admin/components/color-scheme/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="color-scheme">
+    <div class="color-select">
+      <el-select
+        v-model="colorScheme.name"
+        style="width:100%"
+        size="small"
+        placeholder="请选择配色方案"
+        @change="changeColorOption()"
+      >
+        <template #label>
+          <div class="row-line">
+            <div style="overflow: hidden; border-radius: 2px">
+              <span
+                v-for="(c, index) in colorList"
+                :key="index"
+                :style="{
+                  width: '12px',
+                  height: '16px',
+                  float: 'left',
+                  backgroundColor: c
+                }"
+              />
+            </div>
+            <div style="margin-left: 4px">{{ colorScheme.label }}</div>
+          </div>
+        </template>
+        <el-option
+          v-for="option in colorCases"
+          :key="option.value"
+          :label="option.name"
+          :value="option.value"
+        >
+          <template #default>
+            <div class="row-line">
+              <div style="overflow: hidden; border-radius: 2px">
+                <span
+                  v-for="(c, index) in option.colors"
+                  :key="index"
+                  :style="{
+                    width: '12px',
+                    height: '16px',
+                    float: 'left',
+                    backgroundColor: c
+                  }"
+                />
+              </div>
+              <div style="margin-left: 4px">{{ option.name }}</div>
+            </div>
+          </template>
+        </el-option>
+      </el-select>
+      <ac-icon
+        iconId="018ece4f712124866f78"
+        size="18"
+        @click="changeShowCustom"
+        style="margin-left: 8px;cursor: pointer"
+        title="自定义"
+      />
+    </div>
+    <!--自定义配色方案-->
+    <div v-show="showCustom" style="margin-top: 8px">
+      <div class="custom-title">
+        <span>自定义</span>
+        <span
+          style="margin-left: 14px;cursor: pointer"
+          @click="resetCustomColor"
+        >重置</span>
+      </div>
+      <div class="color-custom">
+        <span
+          v-for="(color, index) in colorList"
+          :key="index"
+          class="color-item"
+          :class="activeColor === color && 'active'"
+          @click="changeActive(color, index)"
+          :style="{
+            cursor: 'pointer',
+            width: '14px',
+            height: '16px',
+            float: 'left',
+            backgroundColor: color
+          }"
+        ></span>
+        <div class="color-picker-style">
+          <el-color-picker
+            ref="colorPicker"
+            v-model="customColor"
+            :predefine="predefineColors"
+            @change="switchColorCase"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { COLOR_CASES, PREDEFINE_COLORS } from '@/utils/color';
+
+const colorCases = COLOR_CASES;
+const predefineColors = PREDEFINE_COLORS;
+
+const emit = defineEmits(['change']);
+const currValue = defineModel();
+const activeColor = ref('');
+const colorScheme = ref({
+  name: '',
+  label: '',
+  colors: []
+});
+const colorList = ref([]);
+
+const changeColorOption = () => {
+  activeColor.value = '';
+  const item = colorCases.find(ele => ele.value === colorScheme.value.name);
+  colorScheme.value.label = item.name;
+  colorList.value = JSON.parse(JSON.stringify(item.colors));
+  handleChange();
+};
+
+const showCustom = ref(false);
+
+const changeShowCustom = () => {
+  showCustom.value = !showCustom.value;
+  colorPicker.value?.hide();
+};
+
+const customColor = ref();
+const colorIndex = ref(0);
+const colorPicker = ref();
+
+const switchColorCase = () => {
+  colorList.value[colorIndex.value] = customColor.value;
+  handleChange();
+};
+
+const changeActive = (color, index) => {
+  activeColor.value = color;
+  colorIndex.value = index;
+  customColor.value = color;
+  colorPicker.value?.hide();
+  setTimeout(() => {
+    colorPicker.value.show()
+  }, 200);
+};
+
+const resetCustomColor = () => {
+  changeColorOption();
+};
+
+const handleChange = () => {
+  colorScheme.value.colors = colorList.value;
+  currValue.value = JSON.stringify(colorScheme.value);
+  emit('change');
+};
+
+watch(() => currValue.value, () => {
+  colorScheme.value = currValue.value
+    ? JSON.parse(currValue.value)
+    : { name: 'default', label: '', colors: [] };
+  if (!colorScheme.value.colors || colorScheme.value.colors.length === 0) {
+    const item = colorCases.find(ele => ele.value === colorScheme.value.name);
+    colorScheme.value.label = item.name;
+    colorScheme.value.colors = JSON.parse(JSON.stringify(item.colors));
+  }
+  colorList.value = colorScheme.value.colors;
+  handleChange();
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+.color-scheme {
+  width: 100%;
+  .color-picker-style {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+  }
+  .color-select {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+  .custom-title {
+    color: white;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    margin-bottom: 8px;
+  }
+  .color-custom {
+    position: relative;
+    .color-item {
+      border-radius: 3px;
+      width: 14px;
+      height: 14px;
+      position: relative;
+      &::after {
+        content: '';
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        border-radius: 3px;
+        position: absolute;
+        top: -2px;
+        border: 1px solid;
+        left: -2px;
+        display: none;
+      }
+      &:hover {
+        &::after {
+          border-color: #3370ff99;
+          display: block;
+        }
+      }
+      &.active {
+        &::after {
+          display: block;
+        }
+      }
+      &.color-item {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+.row-line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>

package/src/admin/components/condition-list/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="condition-box">
+    <div
+      class="condition-list"
+      v-for="(condition, index) in conditionList || []"
+      :key="index"
+    >
+      <div class="condition-item" >
+      <span class="label">
+        <el-tooltip content="同分组为and，不同分组间为or">
+          <span>分组<ac-icon iconId="018dca8ec9890493be26" style="margin-left: 5px"/>：</span>
+        </el-tooltip>
+      </span>
+        <span class="content">
+        <el-input v-model="condition.group" size="small" />
+        <ac-icon
+          v-if="index > 0 && index < (conditionList || []).length"
+          iconId="018fa3973ded010d7ef2"
+          title="上移"
+          style="margin-left: 10px"
+          @click="moveItemUp(index, conditionList)"
+        />
+        <ac-icon
+          v-if="index < (conditionList || []).length - 1"
+          iconId="018fa397630c01052d7e"
+          title="下移"
+          style="margin-left: 10px"
+          @click="moveItemDown(index, conditionList)"
+        />
+        <ac-icon
+          iconId="018dc9c3efd3a0502886"
+          title="删除条件"
+          color="red"
+          style="margin-left: 10px"
+          @click="deleteItem(index, conditionList)"
+        />
+      </span>
+      </div>
+      <div class="condition-item">
+        <span class="label">条件：</span>
+        <span class="content">
+          <ac-select
+            v-model="condition.condition"
+            size="small"
+            :options="props.fieldList"
+          />
+        </span>
+      </div>
+      <div class="condition-item">
+        <span class="label">类型：</span>
+        <span class="content">
+        <ac-select
+          v-model="condition.type"
+          size="small"
+          options="等于,不等于,包含,不包含,大于,大于等于,小于,小于等于"
+        />
+      </span>
+      </div>
+      <div class="condition-item">
+        <span class="label">条件值：</span>
+        <span class="content">
+          <el-input v-model="condition.value" size="small" />
+        </span>
+      </div>
+    </div>
+    <div class="condition-add-box">
+      <div class="condition-add" @click="addItem(conditionList)">
+        <ac-icon iconId="018dca3b4707c4c43a2f" />
+        <span style="margin-left: 5px;font-size:13px">添加条件</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+const conditionList = defineModel();
+const props = defineProps({
+  fieldList: String
+});
+
+const addItem = (list) => {
+  list.push({});
+};
+
+const deleteItem = (index, list) => {
+  ElMessageBox.confirm('请确认是否删除？', '提示', { type: 'warning' }).then(() => {
+    list.splice(index, 1);
+  }).catch(() => {});
+};
+
+const moveItemUp = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index - 1];
+  list[index - 1] = curr;
+};
+
+const moveItemDown = (index, list) => {
+  const curr = list[index];
+  list[index] = list[index + 1];
+  list[index + 1] = curr;
+};
+
+onBeforeMount(() => {
+  if (!conditionList.value) {
+    conditionList.value = [];
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.condition-box {
+  flex-grow: 1;
+  overflow: auto;
+  .ac-icon {
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .condition-list {
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid rgb(51, 51, 51);
+    &:nth-last-child(2) {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+    .condition-item {
+      color: white;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 2px 3px;
+      .label {
+        font-size: 13px;
+        width: 80px;
+        color: #dcdcdc;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: right;
+      }
+      .content {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+  .condition-add-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 8px;
+    color: #dcdcdc;
+    height: 30px;
+    .condition-add {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <el-date-picker
+    v-model="modelValue"
+    type="date"
+    style="width: 100%"
+    :format="props.format"
+    :value-format="props.valueFormat"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  }
+});
+
+const handleChange = (val) => {
+  emit('change', val);
+};
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <el-date-picker
+    v-model="currValue"
+    type="datetime"
+    style="width: 100%"
+    :format="props.format"
+    :value-format="props.valueFormat"
+    @change="handleChange"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import date from '@/utils/date';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change', 'blur']);
+const props = defineProps({
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+});
+
+const currValue = ref('');
+
+const handleChange = (val) => {
+  modelValue.value = date.parseLongDate(currValue.value);
+  emit('change', val);
+};
+
+const handleBlur = (event) => {
+  modelValue.value = date.parseLongDate(currValue.value);
+  emit('blur', event);
+};
+
+watch(() => modelValue.value, (newVal) => {
+  currValue.value = date.formatLongDate(newVal);
+}, { immediate: true });
+</script>

package/src/admin/components/default-value-tips/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-tooltip effect="dark" popper-class="padding-10-15">
+    <template #content>
+      <ul class="tips-box">
+        <li><span @click="copySymbol('${user.fullId}')">${user.fullId}</span>：字段类型为“联动”，联动类型为“人员树”时，当前登录人取值</li>
+        <li><span @click="copySymbol('${user.attrName}')">${user.attrName}</span>：当前登录人(attrName为属性名)</li>
+        <li><span @click="copySymbol('${org.attrName}')">${org.attrName}</span>：当前登录部门(attrName为属性名)</li>
+        <li><span @click="copySymbol('${script.code}')">${script.code}</span>：code为运行的脚本编码，脚本返回内容：字符串/数字</li>
+        <li><span @click="copySymbol('${date.currYear}')">${date.currYear}</span>：当前年份：2024</li>
+        <li><span @click="copySymbol('${date.currMonth}')">${date.currMonth}</span>：当前月份：1</li>
+        <li><span @click="copySymbol('${date.currDay}')">${date.currDay}</span>：当前日期：1</li>
+        <li><span @click="copySymbol('${date.currDate}')">${date.currDate}</span>：当前年月日：2024-01-01</li>
+        <li><span @click="copySymbol('${date.currTime}')">${date.currTime}</span>：当前时间</li>
+      </ul>
+    </template>
+    <ac-icon iconId="018dca8ec9890493be26" />
+  </el-tooltip>
+</template>
+
+<script setup>
+import clipboard from 'clipboard';
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['change']);
+const copySymbol = (symbol) => {
+  emit('change', symbol);
+
+  clipboard.copy(symbol);
+  ElMessage.success('已复制到剪贴板');
+};
+</script>
+
+<style scoped>
+.tips-box li {
+  font-size: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > span {
+    cursor: pointer;
+    display: inline-block!important;
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <el-radio-group
+    v-model="modelValue"
+    @change="handleChange"
+  >
+    <el-radio-button
+      v-if="showAll"
+      key=""
+      value=""
+    >全部</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 } from 'vue';
+import { getDictionary } from '@/utils/system';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  dictCode: String,
+  showAll: {
+    type: Boolean,
+    default: false
+  }
+});
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+};
+
+const init = (dictCode) => {
+  loadDicAndShow(dictCode);
+};
+
+watch(() => props.dictCode, (data) => {
+  init(data);
+}, { immediate: true });
+</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <el-checkbox-group
+    v-model="modelValue"
+    @change="handleChange"
+  >
+    <el-checkbox
+      v-for="item in options"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { getDictionary } from '@/utils/system';
+
+const modelValue = defineModel();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  dictCode: String,
+});
+
+const options = ref([]);
+
+const handleChange = () => {
+  emit('change');
+};
+
+const loadDicAndShow = async(dictCode) => {
+  if ((dictCode || '') === '') {
+    options.value = [];
+  } else {
+    options.value = await getDictionary(dictCode);
+  }
+};
+
+const init = (dictCode) => {
+  loadDicAndShow(dictCode);
+};
+
+watch(() => props.dictCode, (data) => {
+  init(data);
+}, { immediate: true });
+</script>