@misstalor17/elpis 1.0.0

package/app/pages/common/curl.js

@@ -0,0 +1,96 @@
+const md5 = require('md5')
+import { ElMessage } from 'element-plus'
+import axios from 'axios';
+/**
+ * 前端封装的curl方法
+ * @param {Object} options - 请求配置项
+ * @param {string} options.url - 请求地址
+ * @param {string} [options.method='post'] - 请求方法（get/post/put/delete 等）
+ * @param {Object} [options.headers={}] - 请求头
+ * @param {Object} [options.query={}] - URL 查询参数（拼接在 url 后）
+ * @param {Object} [options.data={}] - 请求体数据（post/put 等方法使用）
+ * @param {string} [options.responseType='json'] - 响应数据类型
+ * @param {number} [options.timeout=60000] - 请求超时时间（毫秒）
+ * @param {string} [options.errorMessage='网络异常，请稍后重试'] - 默认错误提示语
+ * @returns {Promise<Object>} 响应数据
+ */
+
+const curl = ({
+    url,//请求地址
+    method = 'post',//请求方法
+    headers = {},//请求头
+    query = {},//url query
+    data = {},//post data
+    responseType = 'json',//response data type
+    timeout = 60000,
+    errorMessage = '网络异常'
+}) => {
+    //接口签名处理（让接口变动态）
+    const signKey = 'AShdahsdoahdsoanjsdoaiuhd13'
+    const st = Date.now()
+    const dtoHeaders = {
+        ...headers,
+        s_t: st,
+        s_sign: md5(`${signKey}_${st}`)
+    }
+    if(url.indexOf('/api/proj/') > -1 && window.projKey){
+        dtoHeaders.proj_key = window.projKey
+    }
+    //构造请求参数（把参数转换为 axios 参数）
+    const ajaxSetting = {
+        url,
+        method,
+        params: query,
+        data,
+        responseType,
+        timeout,
+        headers: dtoHeaders
+    }
+
+    return axios.request(ajaxSetting).then((response) => {
+        const resData = response.data || {}
+        //后端Api放回格式
+        const { success } = resData
+        //失败
+        if (!success) {
+            const { message, code } = resData
+            // if (code === 442) {
+            //     ElMessage.error('请求参数异常')
+            // } else if (code === 445) {
+            //     ElMessage.error('请求不合法')
+            // } else if (code === 50000) {
+            //     ElMessage.error(message)
+            // } else {
+            //     ElMessage.error(errorMessage)
+            // }
+            // 根据错误码展示对应提示
+            const errorTips = {
+                442: '请求参数异常',
+                445: '请求不合法',
+                446:'缺少项目必要参数',
+                50000: message,
+                default: errorMessage
+            };
+            ElMessage.error(errorTips[code] || errorTips.default);
+            console.log(message);
+            return Promise.resolve({ success, message, code })
+        }
+        //成功
+        const { data, metadata } = resData
+        return Promise.resolve({ success, data, metadata })
+
+
+    }).catch((error) => {
+        const { message } = error
+
+        if (message.match(/timeout/)) {
+            return Promise.resolve({
+                message: 'REQUEST TIMEOUT',
+                code: 504
+            })
+        }
+        return Promise.resolve(error)
+    })
+}
+
+export default curl;

package/app/pages/common/utils.js

@@ -0,0 +1,2 @@
+const utils = {};
+export default utils;

package/app/pages/dashboard/complex-view/header-view/complex-view/sub-menu.vue

@@ -0,0 +1,22 @@
+<template>
+    <el-sub-menu :index="menuItem.key">
+        <template #title>{{ menuItem.name }}</template>
+        <div :key="item.key" v-for="item in menuItem.subMenu">
+            <sub-menu v-if="item.subMenu && item.subMenu.length > 0" :menu-item="item"></sub-menu>
+            <el-menu-item v-else :index="item.key">{{ item.name }}</el-menu-item>
+        </div>
+    </el-sub-menu>
+</template>
+    
+<script setup>
+// import { ref } from 'vue'
+defineOptions({
+    name: 'SubMenu'
+})
+const { menuItem } = defineProps(['menuItem'])
+
+
+</script>
+    
+<style lang='less' scoped></style>
+    

package/app/pages/dashboard/complex-view/header-view/header-view.vue

@@ -0,0 +1,106 @@
+<template>
+    <header-container :title="projName">
+        <template #menu-content>
+            <!--根据 menuStore.menuList 渲染-->
+            <el-menu :default-active="activeKey" :ellipsis="false" mode="horizontal" @select="onMenuSelect">
+                <template v-for="item in menuStore.menuList">
+                    <sub-menu v-if="item.subMenu && item.subMenu.length > 0" :menu-item="item"></sub-menu>
+                    <el-menu-item v-else :index="item.key">
+                        {{ item.name }}
+                    </el-menu-item>
+                </template>
+            </el-menu>
+        </template>
+        <template #setting-content>
+            <!--根据 projStore.projectList 渲染-->
+            <el-dropdown @command="handleProjectCommadn">
+                <span class="project-list">
+                    {{ projName }}
+                    <el-icon v-if="projectStore.projectList.length > 1" class="el-icon--right">
+                        <ArrowDown />
+                    </el-icon>
+                </span>
+                <template v-if="projectStore.projectList.length > 1" #dropdown>
+                    <el-dropdown-item v-for="item in projectStore.projectList" :key="item.key" :command="item.key"
+                        :disabled="item.name === projName">
+                        {{ item.name }}
+                    </el-dropdown-item>
+                </template>
+
+            </el-dropdown>
+        </template>
+        <template #main-content>
+            <!---->
+            <slot name="main-content"></slot>
+        </template>
+    </header-container>
+</template>
+    
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ArrowDown } from '@element-plus/icons-vue'
+import SubMenu from './complex-view/sub-menu.vue'
+import HeaderContainer from '$elpisWidgets/header-container/header-container.vue'
+import { useMenuStore } from '$elpisStore/menu.js'
+import { useProjectStore } from '$elpisStore/project.js'
+// import { emit } from 'cluster'
+
+const route = useRoute()
+const menuStore = useMenuStore()
+const projectStore = useProjectStore()
+const activeKey = ref('')
+defineProps({
+    projName: String
+})
+const emit = defineEmits(['menu-select'])
+
+watch(() => route.query.key, () => {
+    setActiveKey();
+})
+watch(() => menuStore.menuList, () => {
+    setActiveKey();
+}, { deep: true })
+
+onMounted(() => {
+    setActiveKey();
+})
+const setActiveKey = function () {
+    const menuItem = menuStore.findMenuItem({
+        key: 'key',
+        value: route.query.key
+    })
+    activeKey.value = menuItem?.key
+}
+
+const onMenuSelect = function (menuKey) {
+    console.log(menuKey, 'menuKey');
+    const menuItem = menuStore.findMenuItem({
+        key: 'key',
+        value: menuKey
+    })
+    emit('menu-select', menuItem)
+}
+const handleProjectCommadn = function (event) {
+    const projectItem = projectStore.projectList.find(item => item.key === event)
+    if (!projectItem || !projectItem.homePage) { return; }
+    const { host } = window.location;
+    window.location.replace(`http://${host}/view/dashboard${projectItem.homePage}`)
+}
+</script>
+    
+<style lang='less' scoped>
+.project-list {
+    margin-right: 20px;
+    cursor: pointer;
+    color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
+    outline: none;
+}
+
+:deep(.el-menu--horizontal.el-menu) {
+    border-bottom: 1px solid;
+}
+</style>
+    

package/app/pages/dashboard/complex-view/iframe-view/iframe-view.vue

@@ -0,0 +1,45 @@
+<template>
+    <iframe :src="path" class="iframe"></iframe>
+</template>
+    
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useMenuStore } from '$elpisStore/menu.js'
+
+const route = useRoute()
+const menuStore = useMenuStore()
+const path = ref('')
+
+const setPath = function () {
+    const { key, sider_key: siderKey } = route.query
+
+    const menuItem = menuStore.findMenuItem({
+        key: 'key',
+        value: siderKey ?? key
+    })
+
+    path.value = menuItem?.iframeConfig?.path ?? ''
+}
+
+watch([
+    () => route.query.key,
+    () => route.query.sider_key,
+    () => menuStore.menuList
+], () => {
+    setPath()
+}, { deep: true })
+onMounted(() => {
+    setPath()
+})
+
+</script>
+    
+<style lang='less' scoped>
+.iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>
+    

package/app/pages/dashboard/complex-view/schema-view/complex-view/search-panel/search-panel.vue

@@ -0,0 +1,33 @@
+<template>
+    <el-card class="search-panel">
+        <schema-search-bar :schema="searchSchema" @load="onLoad" @search="onSearch" @reset="onReset"></schema-search-bar>
+    </el-card>
+</template>
+    
+<script setup>
+import { inject } from 'vue'
+import SchemaSearchBar from '$elpisWidgets/schema-search-bar/schema-search-bar.vue'
+const { searchSchema } = inject('schemaViewData')
+const emit = defineEmits(['search'])
+
+const onLoad = (searhValhObj) => {
+    emit('search', searhValhObj)
+}
+const onSearch = (searhValhObj) => {
+    emit('search', searhValhObj)
+}
+const onReset = () => {
+    emit('search', {})
+}
+</script>
+    
+<style lang='less' scoped>
+.search-panel {
+    margin: 10px 10px 0 10px;
+}
+
+:deep(.el-card__body) {
+    padding-bottom: 2px;
+}
+</style>
+    

package/app/pages/dashboard/complex-view/schema-view/complex-view/table-panel/table-panel.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-card class="table-panel">
+        <!-- operation-panel -->
+        <el-row v-if="tableConfig?.headerButtons?.length > 0" justify="end" class="operation-panel">
+            <el-button v-for="item in tableConfig?.headerButtons" v-bind="item"
+                @click="operationHandler({ btnConfig: item })">{{ item.label }}</el-button>
+        </el-row>
+        <!-- schema-table(组件 widget) -->
+        <schema-table ref="schemaTableRef" :apiParams="apiParams" :schema="tableSchema" :api="api"
+            :buttons="tableConfig?.rowButtons ?? []" @operate="operationHandler"></schema-table>
+    </el-card>
+</template>
+    
+<script setup>
+import { ref, inject } from 'vue'
+import $curl from '$elpisCommon/curl.js'
+import { ElMessageBox, ElNotification } from 'element-plus'
+import SchemaTable from '$elpisWidgets/schema-table/schema.table.vue'
+
+const emit = defineEmits(['operate'])
+const { api, tableSchema, tableConfig, apiParams } = inject('schemaViewData')
+const schemaTableRef = ref(null)
+const EventHandlerMap = {
+    remove: removeData
+}
+const operationHandler = ({ btnConfig, rowData }) => {
+    const { eventKey } = btnConfig;
+    if (EventHandlerMap[eventKey]) {
+        EventHandlerMap[eventKey]({ btnConfig, rowData })
+    } else {
+        emit('operate', { btnConfig, rowData })
+    }
+}
+function removeData({ btnConfig, rowData }) {
+    const { eventOption } = btnConfig
+    if (!eventOption?.params) { return; }
+    const { params } = eventOption
+    const removeKey = Object.keys(params)[0]
+    let removeValue;
+    const removeValueList = params[removeKey].split('::')
+    if (removeValueList[0] === 'schema' && removeValueList[1]) {
+        removeValue = rowData[removeValueList[1]]
+    }
+    ElMessageBox.confirm(
+        `确认删除${removeKey} 为: ${removeValue} 数据?`,
+        'Warning',
+        {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    )
+        .then(async () => {
+            schemaTableRef.value.showLoading()
+            const res = await $curl({
+                method: 'delete',
+                url: api.value,
+                data: {
+                    [removeKey]: removeValue
+                },
+                errorMessage: '删除失败'
+            })
+            schemaTableRef.value.hideLoading()
+
+            if (!res || !res.success || !res.data) {
+                return;
+            }
+
+            ElNotification({
+                title: '删除成功',
+                message: '删除成功',
+                type: 'success'
+            })
+            await initTableData()
+        })
+}
+
+const initTableData = async () => {
+    await schemaTableRef.value.initData()
+}
+const loadTableData = async () => {
+    await schemaTableRef.value.loadTableData()
+}
+
+defineExpose({
+    loadTableData
+})
+</script>
+    
+<style lang='less' scoped>
+.table-panel {
+    flex: 1;
+    margin: 10px;
+
+    .operation-panel {
+        margin-bottom: 10px;
+    }
+}
+
+:deep(.el-card__body) {
+    height: 98%;
+    display: flex;
+    flex-direction: column;
+}
+</style>

package/app/pages/dashboard/complex-view/schema-view/components/component-config.js

@@ -0,0 +1,23 @@
+import createForm from './create-form/create-form.vue'
+import editForm from'./edit-form/edit-form.vue'
+import detailPanel from './detail-panel/detail-panel.vue'
+
+//业务扩展 component 配置
+import BusinessComponentConfig from '$businessComponentConfig'
+
+const ComponentConfig = {
+    createForm:{
+        component:createForm
+    },
+    editForm:{
+        component:editForm
+    },
+    detailPanel:{
+        component:detailPanel
+    }
+}
+
+export default {
+    ...BusinessComponentConfig,
+    ...ComponentConfig
+};

package/app/pages/dashboard/complex-view/schema-view/components/create-form/create-form.vue

@@ -0,0 +1,85 @@
+<template>
+    <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
+        <template #header>
+            <h3>{{ title }}</h3>
+        </template>
+        <template #default>
+            <schema-form v-loading="loading" ref="schemaFormRef" :schema="components[name]?.schema"></schema-form>
+        </template>
+        <template #footer>
+            <el-button type="primary" @click="save">{{ saveBtnText }}</el-button>
+        </template>
+    </el-drawer>
+</template>
+    
+<script setup>
+import { ref, inject } from 'vue'
+import { ElNotification } from 'element-plus';
+import $curl from '$elpisCommon/curl'
+import SchemaForm from '$elpisWidgets/schema-form/schema-form.vue';
+
+const { api, components } = inject('schemaViewData')
+
+const emit = defineEmits(['command'])
+
+const name = ref('createForm')
+
+const schemaFormRef = ref(null)
+const isShow = ref(false)
+const loading = ref(false)
+const title = ref('')
+const saveBtnText = ref('')
+
+const show = () => {
+    const { config } = components.value[name.value]
+    title.value = config.title
+    saveBtnText.value = config.saveBtnText
+    isShow.value = true
+}
+
+const close = () => {
+    isShow.value = false
+}
+
+const save = async () => {
+    if (loading.value) { return; }
+    //校验表单
+    if (!schemaFormRef.value.validate()) { return; }
+
+    loading.value = true
+
+    const res = await $curl({
+        method: 'post',
+        url: api.value,
+        data: {
+            ...schemaFormRef.value.getValue()
+        }
+    })
+    loading.value = false
+
+    if (!res || !res.success) {
+        return;
+    }
+
+    ElNotification({
+        title: '创建成功',
+        message: '创建成功',
+        type: 'success'
+    })
+
+    close()
+
+    emit('command', {
+        event: 'loadTableData'
+    })
+}
+// const { components } = inject('schemaViewData')
+
+defineExpose({
+    name, show
+})
+
+</script>
+    
+<style lang='less' scoped></style>
+    

package/app/pages/dashboard/complex-view/schema-view/components/detail-panel/detail-panel.vue

@@ -0,0 +1,90 @@
+<template>
+    <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
+        <template #header>
+            <h3>{{ title }}</h3>
+        </template>
+        <template #default>
+            <el-card v-loading="loading" shadow="always" class="detail-panel">
+                <el-row v-for="(item, key) in components[name]?.schema?.properties" :key="key" type="flex" align="middle"
+                    class="row-item">
+                    <el-row class="item-label">{{ item.label }}:</el-row>
+                    <el-row class="item-value">{{ dtoModel[key] }}</el-row>
+                </el-row>
+            </el-card>
+        </template>
+
+    </el-drawer>
+</template>
+    
+<script setup>
+import { ref, inject } from 'vue'
+import $curl from '$elpisCommon/curl'
+const { api, components } = inject('schemaViewData')
+
+const isShow = ref(false)
+const name = ref('detailPanel')
+const loading = ref(false)
+const mainKey = ref('')
+const mainValue = ref()
+const dtoModel = ref({})
+const title = ref('')
+const show = (rowData) => {
+    const { config } = components.value[name.value]
+    title.value = config.title
+    mainKey.value = config.mainKey //表单主键
+    mainValue.value = rowData[config.mainKey] //表单主键值
+    dtoModel.value = {}
+
+    isShow.value = true
+
+    fetchFormData()
+}
+
+const fetchFormData = async () => {
+    if (loading.value) { return; }
+    loading.value = true
+
+    const res = await $curl({
+        method: 'get',
+        url: api.value,
+        query: {
+            [mainKey.value]: mainValue.value
+        }
+    })
+    loading.value = false
+
+    if (!res || !res.success || !res.data) {
+        return;
+    }
+    dtoModel.value = res.data
+}
+
+defineExpose({
+    name, show
+})
+
+</script>
+    
+<style lang='less' scoped>
+.detail-panel {
+    border: 1px solid #a6a6a6;
+    padding: 30px;
+
+    .row-item {
+        height: 40px;
+        line-height: 40px;
+        font-size: 20px;
+
+        .item-label {
+            margin-right: 20px;
+            width: 120px;
+            color: #ffffff;
+        }
+
+        .item-value {
+            color: #d2dae4
+        }
+    }
+}
+</style>
+