@lixianwei/elpis 1.0.0

package/app/pages/widgets/schema-search-bar/complex-view/date-range/date-range.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-date-picker
+      v-model="dtoValue"
+      v-bind="schema.option"
+      type="daterange"
+      :start-placeholder="schema.label+'(开始)'"
+      :end-placeholder="schema.label+'(结束)'"
+      class="date-range"
+  ></el-date-picker>
+</template>
+
+<script setup>
+import {ref,onMounted} from 'vue'
+import moment from 'moment'
+const {schemaKey,schema} = defineProps({
+  schemaKey: String,
+  schema: Object,
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref([])
+const getValue=()=>{
+  return dtoValue.value.length === 2 ?{
+    [`${schemaKey}_start`]:moment(dtoValue.value[0]).format('YYYY-MM-DD'),
+    [`${schemaKey}_end`]:moment(dtoValue.value[1]).format('YYYY-MM-DD')
+  }:{}
+}
+
+const reset=()=>{
+  dtoValue.value = [];
+}
+
+onMounted(() => {
+  reset()
+  emit('loaded')
+})
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/dynamic-select/dynamic-select.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-select v-model="dtoValue" v-bind="schema.option"  class="dynamic-select">
+    <el-option
+        v-for="item in enumList"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+import {ref,onMounted} from 'vue'
+import $curl from '$elpisCommon/curl.js'
+
+const {schemaKey,schema} = defineProps({
+  schemaKey: String,
+  schema: Object,
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+const getValue=()=>{
+  return dtoValue.value !==undefined?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+const reset=()=>{
+  dtoValue.value = schema?.option?.default ?? enumList.value?.[0]?.value;
+}
+
+const enumList =ref([])
+
+const fetchEnumList  = async () => {
+  const res = await $curl({
+    method:'get',
+    url:schema.option?.api,
+    data:{}
+  })
+
+  if(res?.data?.length>0){
+    enumList.value.push(...res.data)
+  }
+}
+
+onMounted(async () => {
+  await fetchEnumList()
+  reset()
+  emit('loaded')
+})
+
+
+
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/input/input.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-input v-model="dtoValue" v-bind="schema.option"  class="input"></el-input>
+</template>
+
+<script setup>
+import {ref,onMounted} from 'vue'
+
+const {schemaKey,schema} = defineProps({
+  schemaKey: String,
+  schema: Object,
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+const getValue=()=>{
+  return dtoValue.value !==undefined?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+const reset=()=>{
+  dtoValue.value = schema?.option?.default;
+}
+
+onMounted(() => {
+  reset()
+  emit('loaded')
+})
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

package/app/pages/widgets/schema-search-bar/complex-view/select/select.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-select v-model="dtoValue" v-bind="schema.option"  class="select">
+    <el-option
+    v-for="item in schema.option?.enumList"
+    :key="item.value"
+    :label="item.label"
+    :value="item.value"
+    >
+    </el-option>
+
+  </el-select>
+</template>
+
+<script setup>
+import {ref,onMounted} from 'vue'
+
+const {schemaKey,schema} = defineProps({
+  schemaKey: String,
+  schema: Object,
+})
+
+const emit = defineEmits(['loaded'])
+
+const dtoValue = ref()
+const getValue=()=>{
+  return dtoValue.value !==undefined?{
+    [schemaKey]:dtoValue.value
+  }:{}
+}
+
+const reset=()=>{
+  dtoValue.value = schema?.option?.default ?? schema?.option?.enumList?.[0]?.value;
+}
+
+onMounted(() => {
+  console.log('select111')
+  reset()
+  emit('loaded')
+})
+defineExpose({
+  getValue,
+  reset
+})
+</script>
+
+
+
+<style scoped lang="less">
+
+</style>

package/app/pages/widgets/schema-search-bar/schema-search-bar.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-form
+    v-if="schema && schema.properties"
+    inline
+    class="schema-search-bar"
+  >
+    <!--     动态组件-->
+    <el-form-item
+      v-for="(schemaItem, key) in schema.properties"
+      :key="key"
+      :label="schemaItem.label"
+    >
+      <component
+        :is="SearchItemConfig[schemaItem?.option?.comType]?.component"
+        ref="searchComList"
+        :schema-key="key"
+        :schema="schemaItem"
+        @loaded="handleChildLoad"
+      />
+    </el-form-item>
+    <!-- 操作区域-->
+    <el-form-item>
+      <el-button
+        type="primary"
+        plain
+        class="search-btn"
+        @click="search"
+      >
+        搜索
+      </el-button>
+      <el-button
+        plain
+        class="reset-btn"
+        @click="reset"
+      >
+        重置
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import {ref,toRefs,onMounted} from "vue";
+
+import SearchItemConfig from "./search-item-config";
+const props = defineProps({
+  /*
+  * {
+  *   type:'object',
+      properties: {
+        key:{
+             ...schema,//标准schema 配置
+              type:'',//字段类型
+              label:'',//字段的中文名
+               // 字段在search-bar 中的相关配置
+               option:{
+                  ...eleComponentConfig, //标准 el-component-column 配置
+                   comType:"",//配置组件类型 input /select/...
+                   default:'',//默认值
+               }
+         },
+      }
+  * }
+  * */
+  schema:Object
+})
+
+// 设置响应式
+const { schema } = toRefs(props)
+
+const emit = defineEmits(['load','search','reset'])
+// 获取动态组件的ref元素
+const searchComList = ref([])
+// const handleSearchComList=(el)=>{
+//   if(el){
+//     searchComList.value.push(el)
+//   }
+// }
+
+onMounted(()=>{
+  console.log(SearchItemConfig,'SearchItemConfig')
+})
+
+// 获取最新的值  编辑每个动态组件获取组件里面的最新数据
+const getValue =()=>{
+  let dtoObj ={};
+  searchComList.value.forEach((component)=>{
+    dtoObj={
+      ...dtoObj,
+      ...component?.getValue()
+    }
+  })
+  return dtoObj;
+}
+
+// 进行每个组件循环出发load事件
+let childComLoadedCount =0;
+const handleChildLoad =()=>{
+  childComLoadedCount++;
+  if(childComLoadedCount>=Object.keys(schema?.value?.properties).length){
+      emit('load',getValue())
+  }
+}
+
+// 搜索
+const search = ()=>{
+  emit("search",getValue())
+}
+// 重置
+const reset = ()=>{
+  // 遍历每个组件进行重置数据
+  searchComList.value.forEach((component)=>component?.reset())
+  emit("reset")
+}
+defineExpose({
+  reset,
+  getValue
+})
+</script>
+
+
+
+<style scoped lang="less">
+.schema-search-bar{
+  min-width: 500px;
+  .input{
+    width: 180px;
+  }
+  .select{
+    width: 180px;
+  }
+  .dynamic-select{
+    width: 180px;
+  }
+  .search-btn{
+    width: 100px;
+  }
+  .reset-btn{
+    width: 100px;
+  }
+}
+</style>

package/app/pages/widgets/schema-search-bar/search-item-config.js

@@ -0,0 +1,24 @@
+import input from './complex-view/input/input.vue'
+import select from './complex-view/select/select.vue'
+import dynamicSelect from './complex-view/dynamic-select/dynamic-select.vue'
+import dateRange from './complex-view/date-range/date-range.vue'
+import businessSearchItemConfig from '$businessSearchItemConfig'
+
+const SearchItemConfig = {
+    input:{
+        component: input,
+    },
+    select:{
+        component: select,
+    },
+    dynamicSelect:{
+        component: dynamicSelect,
+    },
+    dateRange:{
+        component: dateRange,
+    }
+}
+export default {
+    ...SearchItemConfig,
+    ...businessSearchItemConfig
+}

package/app/pages/widgets/schema-table/schema-table.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="schema-table">
+    <el-table
+      class="table"
+      v-if="schema &&schema.properties"
+      v-loading="loading"
+      :data="tableData"
+    >
+      <template v-for="(schemaItem,key) in schema.properties">
+        <el-table-column
+          v-if="schemaItem.option.visible !== false"
+          :key="key"
+          :prop="key"
+          :label="schemaItem.label"
+          v-bind="schemaItem.option"
+        ></el-table-column>
+      </template>
+      <el-table-column
+        v-if="buttons?.length > 0"
+        label="操作"
+        fixed="right"
+        :width="operationWidth"
+      >
+        <template #default="scoped">
+          <el-button
+            v-for="item in buttons"
+            link
+            v-bind="item"
+            @click="operationHandler({btnConfig:item,rowData:scoped.row})"
+          >
+            {{item.label}}
+          </el-button>
+        </template>
+      </el-table-column>
+
+    </el-table>
+    <el-row justify="end" class="pagination">
+      <el-pagination
+          v-model:current-page="currentPage"
+         :page-size="pageSize"
+         :page-sizes="[10, 20, 50, 100]"
+         :total="total"
+         layout="total, sizes, prev, pager, next, jumper"
+         @size-change="onPageSizeChange"
+         @current-change="onCurrentPageChange"
+      />
+    </el-row>
+  </div>
+</template>
+<script setup>
+import {ref,toRefs,computed,watch,onMounted,nextTick} from "vue";
+import $curl from '$elpisCommon/curl.js'
+
+const props = defineProps({
+  /*
+  *   schema 配置 结构如下
+  * { //板块数据结构
+       type:'object',
+       properties: {
+        key:{
+         ...schema,//标准schema 配置
+          type:'',//字段类型
+          label:'',//字段的中文名
+           option:{
+               ...elTableColumnConfig,//标准的el-table-column 配置
+                visiable:true //默认为true （false 或者不配置时 表示不在表单中显示）
+            }
+          },
+                    ...
+        }
+      },
+  * */
+  schema:Object,
+  /*
+  * 表格数据源 api
+  * */
+  api:String,
+
+  /*
+  * 请求参数，请求api 时携带
+  * */
+  apiParams:Object,
+  /*
+  * buttons:[
+  *   {
+  *     label:'',//按钮中文名
+        eventKey:'',//按钮事件名
+        eventOption:{},//按钮事件具体配置
+        ...elButtonConfig //标准el-button配置
+  *  },
+  * ...
+  * ]
+  *
+  * */
+  buttons:Array
+})
+
+
+const {schema,api,buttons,apiParams} = toRefs(props)
+
+const emit = defineEmits([ 'operate'])
+
+// 计算按钮操作栏的长度
+const operationWidth = computed(()=>{
+  return buttons?.value.length>0 ? buttons.value.reduce((pre,cur)=>{
+      return pre + cur.label.length *18
+  },50) : 50
+})
+
+const loading = ref(false)
+const tableData=ref([])
+const currentPage = ref(1)
+const pageSize = ref(50)
+const total = ref(0)
+
+
+
+onMounted(() => {
+  initData()
+})
+
+watch([api,schema,apiParams],() =>{
+  initData()
+},{deep:true})
+
+
+
+const initData = () => {
+  currentPage.value = 1
+  pageSize.value = 50
+  nextTick(async ()=>{
+    await loadTableData()
+  })
+}
+
+let timerId = null
+const loadTableData = async () => {
+  clearTimeout(timerId)
+  timerId = setTimeout(async () =>{
+    await fetchTableData()
+    timerId = null
+  },100)
+}
+
+const fetchTableData =async ()=>{
+    if(!api.value) {return }
+
+  showLoading()
+
+    // 请求table数据
+  const res = await $curl({
+    method:"get",
+    url:`${api.value}/list`,
+    query:{
+      ...apiParams.value,
+      page:currentPage.value,
+      size:pageSize.value
+    }
+  })
+
+  hideLoading()
+
+  if(!res || !res.success || !Array.isArray(res.data)){
+    tableData.value = []
+    total.value = 0
+    return
+  }
+
+  tableData.value = buildTableData(res.data)
+  total.value = res.metadata.total
+}
+
+/*
+* 对后端返回的数据进行渲染前的处理
+* @parma {Object} data 列表渲染
+* */
+
+const buildTableData =(listData)=>{
+    if(!schema.value?.properties){
+      return listData
+    }
+    return listData.map(rowData=>{
+      for(let dKey in rowData){
+        const schemaItem = schema.value.properties[dKey];
+        if(schemaItem?.option?.toFixed){
+          rowData[dKey] = rowData[dkey].toFixed &&rowData[dKey].toFixed(schemaItem.option.toFixed)
+        }
+      }
+      return rowData
+    })
+}
+
+const showLoading=()=>{
+  loading.value = true
+}
+const  hideLoading=()=>{
+  loading.value = false
+}
+
+const  operationHandler=({btnConfig,rowData})=>{
+  emit('operate',{btnConfig,rowData})
+}
+
+const onPageSizeChange= async (vale)=>{
+  pageSize.value=vale
+  await loadTableData()
+}
+
+const onCurrentPageChange=async (vale)=>{
+  currentPage.value=vale
+  await loadTableData()
+}
+
+defineExpose({
+  initData,
+  loadTableData,
+  showLoading,
+  hideLoading
+})
+</script>
+
+
+
+<style scoped lang="less">
+.schema-table{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  .table{
+    flex: 1;
+  }
+  .pagination{
+    margin: 10px 0;
+    text-align: right;
+  }
+}
+</style>

package/app/pages/widgets/sider-container/sider-container.vue

@@ -0,0 +1,31 @@
+
+<template>
+  <el-container class="sider-container">
+    <el-aside width="200px" class="aside">
+      <slot name="menu-content"></slot>
+    </el-aside>
+    <el-main class="main">
+      <slot name="main-content"></slot>
+    </el-main>
+  </el-container>
+</template>
+<script setup>
+
+</script>
+
+
+<style scoped lang="less">
+  .sider-container {
+    height: 100%;
+    .aside{
+      border-right: 1px solid #e8e8e8;
+    }
+    .main{
+      overflow: scroll;
+    }
+  }
+
+  :deep(.el-menu){
+    border-right: 0;
+  }
+</style>