@lixianwei/elpis 1.0.0

package/app/pages/common/curl.js

@@ -0,0 +1,83 @@
+const md5 = require('md5')
+const axios = require('axios');
+import { ElMessage } from 'element-plus'
+/*
+* 前端封装的curl 方法
+* @params options 请求参数
+* */
+
+const curl = ({
+    url, //请求地址
+    method = "post", //请求方法
+    headers = {}, //请求头
+    query = {}, // url query
+    data ={}, // post body
+    responseType = "json", //response data type
+    timeOut=60000, //timeOut
+    errorMessage="网络异常"
+})=>{
+
+    // 接口签名处理（让接口变动态）
+    const signKey = 'klx05hb3n1c9ujp8uhxbs2ikkiowp212'
+    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 ajaxStting={
+        url, //请求地址
+        method, //请求方法
+        params:query, // url query
+        data, // post body
+        responseType, //response data type
+        timeOut, //timeOut
+        headers: dtoHeaders
+    };
+
+    return  axios.request(ajaxStting).then(response=>{
+        // 后端返回格式
+        const resData = response?.data || {};
+
+        const {success} = resData;
+        // 失败
+        if(!success){
+            const {code, message} = resData;
+            if(code === 442){
+                ElMessage.error('请求参数异常')
+            }else if(code === 445){
+                ElMessage.error('请求不合法')
+            }else if(code === 446){
+                ElMessage.error('缺少项目必要参数')
+            }else if(code === 50000){
+                ElMessage.error(errorMessage)
+            }
+            console.error(message)
+
+            return Promise.resolve({success,code,message})
+        }
+
+
+        // 成功
+        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/index.js

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

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

@@ -0,0 +1,23 @@
+<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>
+const { menuItem } = defineProps(['menuItem']);
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,117 @@
+
+
+<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" :key="item.key">
+          <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>
+<!--      根据projectStore.projectList 渲染-->
+      <el-dropdown @command="handleProjectCommand">
+        <span class="project-list">
+          {{projName}}
+          <el-icon v-if="projectStore.projectList.length>1" class="el-icon--right">
+              <ArrowDown></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 HeaderContainer from '$elpisWidgets/header-container/header-container.vue'
+import SubMenu from './complex-view/sub-menu/sub-menu.vue'
+import {userMenuStore} from '$elpisStore/menu.js'
+import {userProjectStore} from '$elpisStore/project.js'
+
+const route = useRoute()
+const menuStore = userMenuStore()
+const projectStore = userProjectStore()
+defineProps({
+  projName: {
+    type: String,
+  }
+})
+const  emit = defineEmits(['menu-select'])
+
+const activeKey = ref('')
+
+watch(()=> route.query.key, () => {
+  setActiveKey()
+})
+
+watch(() => menuStore.menuList, () => {
+  setActiveKey()
+})
+
+onMounted(() => {
+  setActiveKey()
+})
+
+const  setActiveKey = () => {
+  const menuItem = menuStore.findMenuItem({
+    key:'key',
+    value:route.query.key
+  })
+  activeKey.value = menuItem?.key
+}
+
+const onMenuSelect =(menuKey)=>{
+  const menuItem = menuStore.findMenuItem({key:'key',value:menuKey})
+  emit('menu-select',menuItem)
+}
+
+const handleProjectCommand =(event)=>{
+  const projectItem = projectStore.projectList.find(item => item.key === event)
+
+  if(!projectItem || !projectItem.homePage) {return }
+  const {origin} = window.location
+  // window.location.replace(`${origin}${pathname}${projectItem.homePage}`)
+  window.location.replace(`${origin}/view/dashboard${projectItem.homePage}`)
+  // window.location.reload()
+}
+
+</script>
+<style scoped lang="less">
+.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: 0;
+  background: none;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <iframe :src="path" class="iframe"></iframe>
+</template>
+<script setup>
+  import {ref,watch,onMounted} from 'vue'
+  import {useRoute} from 'vue-router'
+  import {userMenuStore} from "$elpisStore/menu";
+  const menuStore = userMenuStore()
+  const route = useRoute()
+  const path = ref('')
+
+  const setPath =()=>{
+    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 scoped lang="less">
+.iframe{
+  margin:0;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<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 =(searchValObj)=>{
+    console.log(12456789)
+    emit('search', searchValObj)
+  }
+  // 搜索
+  const onSearch =(searchValObj)=>{
+    emit('search', searchValObj)
+  }
+  // 重置
+  const onReset = ()=>{
+    emit('search', {})
+  }
+
+
+</script>
+
+
+
+<style scoped lang="less">
+  .search-panel{
+    margin: 10px;
+    :deep(.el-card__body){
+      padding-bottom: 2px;
+    }
+  }
+</style>

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

@@ -0,0 +1,134 @@
+<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="operationHander({btnConfig: item})"
+     >
+       {{item.label}}
+     </el-button>
+
+   </el-row>
+<!--schema-tabel (组件widget)-->
+   <schema-table
+       ref="schemaTableRef"
+       :schema="tableSchema"
+       :api="api"
+       :apiParams="apiParams"
+       :buttons="tableConfig?.rowButtons ?? []"
+       @operate="operationHander"
+   ></schema-table>
+ </el-card>
+</template>
+<script setup>
+import {ref,inject} from "vue";
+import {ElMessageBox,ElNotification} from "element-plus";
+import $curl from '$elpisCommon/curl.js'
+import SchemaTable from '$elpisWidgets/schema-table/schema-table.vue'
+
+const emit = defineEmits(['operate'])
+
+const schemaTableRef = ref()
+
+const {
+  api,
+  tableSchema,
+  tableConfig,
+  apiParams
+} = inject('schemaViewData');
+
+// 删除操作
+const 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}的数据？`,
+      'Waring',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText:'取消',
+        type: 'warning'
+      }
+  ).then(async() => {
+    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 EventHandlerMap = {
+  remove:removeData
+}
+
+const operationHander =({btnConfig,rowData})=>{
+  const {eventKey} = btnConfig;
+
+  if(EventHandlerMap[eventKey]){
+    EventHandlerMap[eventKey]({btnConfig,rowData})
+  }else{
+    emit('operate',{btnConfig,rowData})
+  }
+
+}
+
+const initTableData = async()=>{
+  await schemaTableRef.value.initData()
+}
+
+const loadTableData = async () => {
+  await schemaTableRef.value.loadTableData()
+}
+
+defineExpose({
+  loadTableData
+})
+</script>
+
+
+
+<style scoped lang="less">
+.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,20 @@
+import createForm  from './create-form/create-form';
+import editForm  from './edit-form/edit-form';
+import detailPanel from './detail-panel/detail-panel';
+import BusinessComponentConfig from '$businessComponentConfig'
+
+const ComponentConfig ={
+    createForm:{
+        component:createForm
+    },
+    editForm:{
+        component:editForm
+    },
+    detailPanel:{
+        component:detailPanel
+    }
+}
+export default {
+    ...ComponentConfig,
+    ...BusinessComponentConfig
+};

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

@@ -0,0 +1,89 @@
+
+<template>
+  <el-drawer
+    v-model="isShow"
+    direction="rtl"
+    :destroy-on-close="true"
+    :size="550"
+  >
+    <template #header>
+      <h3 class="title">
+        {{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 {inject, ref} from 'vue'
+import {ElNotification} from 'element-plus'
+import $curl from '$elpisCommon/curl.js'
+import SchemaForm from '$elpisWidgets/schema-form/schema-form.vue'
+
+const {api,components} = inject('schemaViewData')
+
+const emit =defineEmits(['command'])
+const name = ref('createForm')
+
+const loading = ref(false)
+const schemaFormRef = ref(null)
+const title = ref()
+const saveBtnText =ref()
+const isShow = ref(false)
+
+const show =(rowData)=>{
+  const {config} = components.value[name.value]
+  title.value = config.title
+  saveBtnText.value = config.saveBtnText
+  isShow.value = true
+  console.log(rowData)
+}
+const close=()=>{
+  isShow.value = false
+}
+const save = async ()=>{
+  if( loading.value || !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',
+  })
+}
+
+defineExpose({
+  name,
+  show
+})
+</script>
+
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,101 @@
+<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.js'
+
+const {api,components}=inject('schemaViewData')
+
+const name = ref('detailPanel')
+const isShow = ref(false)
+const loading = ref(false)
+const title = ref('')
+const mainKey = ref() //表单主键
+const mainValue = ref({}) //表单主键值
+const dtoModel = ref({})
+
+const show = (rowData)=>{
+  const {config} = components.value[name.value]
+  title.value = config.title
+  mainKey.value = config.mainKey
+  mainValue.value = rowData[config.mainKey]
+  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 scoped lang="less">
+.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>