@arkxos/arkos-system 0.1.0

package/src/codeless/components/video-view/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div style="width: 100%">
+    <span class="video-box">
+      <span
+        v-if="videoName"
+        class="cc-video-name"
+        :title="videoName"
+        @click="showVideo"
+      >{{videoName}}</span>
+    </span>
+
+    <el-dialog
+      width="800px"
+      append-to-body
+      title="视频查看"
+      v-model="dialogVisible"
+      :close-on-click-modal="false"
+      :fullscreen="dialogFullscreen"
+      destroy-on-close
+      draggable
+      class="cc-page-comp-dialog"
+    >
+      <template #header>
+        <div class="header" @dblclick="dialogFullscreen=!dialogFullscreen">
+          <div class="title">视频查看</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>
+      <video width="100%" height="100%" controls autoplay>
+        <source :src="videoUrl" type="video/mp4">
+        浏览器不支持视频查看
+      </video>
+      <template #footer>
+        <el-form>
+          <el-button
+            size="default"
+            type="info"
+            @click="dialogVisible=false"
+          >关闭</el-button>
+        </el-form>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import api from '@/http/api';
+
+const props = defineProps({
+  videoId: {
+    type: String,
+    default: ''
+  }
+});
+
+const loading = ref(true);
+const fileId = ref('');
+const videoName = ref('');
+const videoUrl = ref('');
+const dialogFullscreen = ref(false);
+const dialogVisible = ref(false);
+
+const loadData = (videoId) => {
+  if (videoId) {
+    loading.value = true;
+    fileId.value = videoId;
+    api.queryFile(videoId).then(res => {
+      loading.value = false;
+      videoName.value = res.data.trueName;
+      videoUrl.value = import.meta.env.VITE_VIDEO_PATH + res.data.id;
+    }).catch(() => {
+      loading.value = false;
+    });
+  } else {
+    loading.value = false;
+    fileId.value = '';
+    videoName.value = '';
+    videoUrl.value = '';
+  }
+};
+
+const showVideo = () => {
+  dialogVisible.value = true;
+};
+
+watch(() => props.videoId, (newVal) => {
+  if ((newVal || '') === '' || (fileId.value || '') === '' || newVal !== fileId.value) {
+    fileId.value = '';
+    videoName.value = '';
+    videoUrl.value = '';
+    loadData(newVal);
+  }
+});
+
+onMounted(() => {
+  loadData(props.videoId);
+});
+</script>
+
+<style scoped>
+.video-box {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  text-align: center;
+}
+.cc-video-name {
+  cursor: pointer;
+  flex-grow: 1;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-wrap: wrap;
+  white-space: nowrap;
+}
+</style>

package/src/codeless/js/codeless.js

@@ -0,0 +1,47 @@
+import tool from '@/utils/tool';
+
+export const checkButtonShow = (button, data, fieldList) => {
+  if ((button.conditionList || []).length === 0) return true;
+
+  let result = false;
+  (tool.groupBy(button.conditionList, (item) => [item.grouping || 999]) || []).forEach(conditionList => {
+    result = result || checkConditionList(conditionList, data, fieldList);
+  });
+  return result;
+};
+
+export const checkConditionList = (conditionList, data, fieldList) => {
+  let result = true;
+  (conditionList || []).forEach(condition => {
+    const field = fieldList.find(item => item.id === condition.fieldId);
+    if (!field) return false;
+    const testValue = data[field.fieldName];
+    switch (condition.type) {
+      case '包含':
+        result = result && (testValue || '').indexOf(condition.value || '') >= 0;
+        break;
+      case '不包含':
+        result = result && (testValue || '').indexOf(condition.value || '') === -1;
+        break;
+      case '等于':
+        result = result && (testValue || '') === (condition.value || '');
+        break;
+      case '不等于':
+        result = result && (testValue || '') !== (condition.value || '');
+        break;
+      case '大于':
+        result = result && parseFloat(testValue || '0') > parseFloat(condition.value || '0');
+        break;
+      case '大于等于':
+        result = result && parseFloat(testValue || '0') >= parseFloat(condition.value || '0');
+        break;
+      case '小于':
+        result = result && parseFloat(testValue || '0') < parseFloat(condition.value || '0');
+        break;
+      case '小于等于':
+        result = result && parseFloat(testValue || '0') <= parseFloat(condition.value || '0');
+        break;
+    }
+  });
+  return result;
+};

package/src/codeless/view/form-auto.vue

@@ -0,0 +1,192 @@
+<template>
+  <div
+    v-if="props.showModel === '普通'"
+    class="cc-form-model"
+  >
+    <div
+      v-for="(model, index) in props.modelList"
+      :key="index"
+      class="cc-form-model-item"
+    >
+      <FormModel
+        v-bind="model"
+        :autofillList="autofillList"
+        :displayList="displayList"
+      />
+    </div>
+  </div>
+  <div
+    v-else-if="props.showModel === '标签'"
+    class="cc-form-model"
+  >
+    <el-tabs
+      tab-position="top"
+      class="cc-form-model-tabs"
+    >
+      <el-tab-pane
+        v-for="(model, index) in props.modelList"
+        :key="index"
+        class="cc-form-model-tab-item"
+        :label="model.name"
+      >
+        <FormModel
+          v-bind="model"
+          :autofillList="autofillList"
+          :displayList="displayList"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+  <div
+    v-else-if="props.showModel === '分割线'"
+    class="cc-form-model"
+  >
+    <div
+      v-for="(model, index) in modelList"
+      :key="index"
+      class="cc-form-model-item"
+    >
+      <div
+        v-if="dividerStyle === '标签'"
+        class="cc-form-model-item-divider"
+      >
+        <div class="text">{{model.name || ''}}</div>
+        <div class="border">
+          <div class="step">
+            <div class="text">{{model.name || ''}}</div>
+          </div>
+          <div class="line"></div>
+        </div>
+      </div>
+      <el-divider
+        v-else
+        :border-style="getStyle(dividerStyle)"
+        :content-position="getPosition(dividerPosition)"
+      >{{model.name || ''}}</el-divider>
+      <FormModel
+        v-bind="model"
+        :autofillList="autofillList"
+        :displayList="displayList"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, ref, watch, onMounted } from 'vue';
+import FormModel from './form-model.vue';
+import tool from '@/utils/tool';
+import api from '@/http/api';
+
+const props = defineProps({
+  fieldList: Array,
+  showModel: String,
+  modelList: Array,
+  autofillList: Array,
+  displayList: Array,
+  dividerStyle: String,
+  dividerPosition: String,
+  operate: String
+});
+
+const initializing = ref(true);
+const formData = inject('formData');
+const autofillList = ref([]);
+
+const style = ref({ 无: 'none', 实线: 'solid', 虚线: 'dashed', 标签: 'label' });
+const getStyle = (key) => {
+  return style.value[key] || 'solid';
+};
+
+const position = ref({ 居左: 'left', 居中: 'center', 居右: 'right' });
+const getPosition = (key) => {
+  return position.value[key] || 'left';
+};
+
+const init = () => {
+  initializing.value = true;
+  autofillList.value = tool.deepClone(props.autofillList) || [];
+  autofillList.value.forEach(autofill => {
+    if (!autofill.fieldList || autofill.fieldList.length === 0 || props.operate === '新增') return;
+    autofill.triggerFieldValue = formData.value[autofill.triggerFieldName];
+  });
+
+  initializing.value = false
+  if (props.operate === '新增') {
+    autofillValue();
+  }
+};
+
+const autofillValue = () => {
+  if (initializing.value || !autofillList.value || autofillList.value.length === 0) return;
+
+  autofillList.value.forEach(autofill => {
+    if (!autofill.fieldList || autofill.fieldList.length === 0) return;
+    if (autofill.triggerFieldName &&
+        formData.value[autofill.triggerFieldName] &&
+        formData.value[autofill.triggerFieldName] !== autofill.triggerFieldValue) {
+      const url = '/codeless/data-model/' + autofill.dataModelId + '/data';
+      const params = {};
+      params[autofill.compareFieldName] = formData.value[autofill.triggerFieldName];
+      api.post(url, params).then(res => {
+        if (!res.data) return;
+        autofill.fieldList.forEach(field => {
+          formData.value[field.autofillFieldName] = res.data[field.sourceFieldName] || null;
+          if (res.data[field.sourceFieldName + '_name']) {
+            formData.value[field.autofillFieldName + '_name'] = res.data[field.sourceFieldName + '_name'] || '';
+          }
+        });
+      });
+    }
+    autofill.triggerFieldValue = formData.value[autofill.triggerFieldName];
+  });
+};
+
+watch(() => props.autofillList, () => {
+  init();
+});
+
+watch(() => formData.value, () => {
+  autofillValue();
+}, { deep: true });
+
+onMounted(() => {
+  initializing.value = true;
+  init();
+  autofillValue();
+});
+</script>
+
+<style scoped lang="scss">
+.cc-form-model-item-divider {
+  .text {
+    padding: 0 13px 0 10px;
+    color: var(--el-color-primary);
+    font-weight: bolder;
+  }
+  .border {
+    margin: 5px 0 15px 0;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    .step {
+      height: 8px;
+      box-sizing: border-box;
+      display: inline-block;
+      border-radius: 0 8px;
+      background: var(--el-color-primary);
+      .text {
+        height: 8px;
+        padding: 0 13px 0 10px;
+        visibility: hidden;
+      }
+    }
+    .line {
+      height: 4px;
+      padding-left: 8px;
+      flex-grow: 1;
+      border-bottom: 4px solid var(--el-color-primary-light-7);
+    }
+  }
+}
+</style>

package/src/codeless/view/form-custom.vue

@@ -0,0 +1,10 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+</script>
+
+<style>
+
+</style>