新功能: 新增大数据选择组件

web/src/components/dvaSelect/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <!--   你的自定义受控组件-->
+  <el-select-v2
+      v-model="data"
+      :options="options"
+      style="width: 100%;"
+      :clearable="true"
+      :props="selectProps"
+      @change="onDataChange"
+
+  />
+</template>
+<script lang="ts" setup>
+import {ref, defineComponent, watch, computed, toRefs, toRaw, onMounted} from 'vue'
+import {useUi} from "@fast-crud/fast-crud";
+import {request} from "/@/utils/service";
+
+const props = defineProps({
+  dict: { // 接收来自FastCrud配置中的dict数据
+    type: Array,
+    required: true,
+  },
+  modelValue: {}
+})
+const emit = defineEmits(['update:modelValue'])
+// 获取数据
+const dataList = ref([])
+
+function getData(params) {
+  request({
+    url: props.dict.url,
+    params: params
+  }).then(res => {
+    dataList.value = res.data
+  })
+
+}
+
+// template上使用data
+const data = ref()
+// const data = computed({
+//   get: () => {
+//     console.log("有默认值", props.modelValue)
+//     //getData({id:props.modelValue})
+//
+//     console.log(11, dataList)
+//     // const {data} = res
+//     // console.log("get",data[0][selectProps.value.label])
+//     if (dataList && dataList.length === 1) {
+//       return dataList[0][selectProps.value.value]
+//     } else {
+//       // console.log("aa",res.data)
+//       return props.modelValue
+//     }
+//     // return props.modelValue
+//   },
+//   set: (val) => {
+//     //data.value =  val
+//     return val
+//   }
+// })
+const options = ref([])
+const selectProps = ref({
+  label: 'label',
+  value: 'value'
+})
+watch(
+    () => {
+      return props.modelValue
+    }, // 监听modelValue的变化，
+    (value) => {
+      // data.value = value
+      request({
+        url: props.dict.url,
+        params: {
+          id: props.modelValue
+        }
+      }).then(res => {
+        const dataList = res.data
+        console.log(dataList)
+        if (dataList && dataList.length === 1) {
+          data.value = dataList[0][selectProps.value.label]
+        }else{
+          data.value = null
+        }
+      })
+    }, // 当modelValue值触发后，同步修改data.value的值
+    {immediate: true} // 立即触发一次，给data赋值初始值
+)
+//获取表单校验上下文
+const {ui} = useUi()
+const formValidator = ui.formItem.injectFormItemContext();
+// 当data需要变化时，上报给父组件
+// 父组件监听到update:modelValue事件后，会更新props.modelValue的值
+// 然后watch会被触发，修改data.value的值。
+function onDataChange(value) {
+  emit('update:modelValue', value)
+  data.value = value
+  //触发校验
+  formValidator.onChange()
+  formValidator.onBlur()
+}
+
+
+if (props.dict.url instanceof Function) {
+  request(props.dict.url).then((res) => {
+    options.value = res.data
+  })
+} else {
+  selectProps.value.label = props.dict.label
+  selectProps.value.value = props.dict.value
+  request({
+    url: props.dict.url
+  }).then((res) => {
+    options.value = res.data
+  })
+}
+
+
+// onMounted(() => {
+//   getData({id: props.modelValue})
+// })
+
+</script>
+<style scoped lang="scss">
+.el-select .el-input__wrapper .el-input__inner::placeholder {
+  //color: #a8abb2;
+  color: #0d84ff;
+}
+
+.el-select-v2 {
+  .el-select-v2__wrapper {
+    .el-select-v2__placeholder.is-transparent {
+      //color: #a8abb2;
+      color: #0d84ff;
+    }
+  }
+}
+
+
+</style>

web/src/views/system/demo/index.vue

@@ -1,13 +1,80 @@
 <template>
-<div>
-  测试框架外显示
-</div>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-top>
+        <div id="myEcharts" v-show="isEcharts" v-resize-ob="handleResize" :style="{width: '100%', height: '300px'}"></div>
+      </template>
+    </fs-crud>
+	</fs-page>
 </template>
 
-<script setup lang="ts" name="demo">
+<script lang="ts" setup name="loginLog">
+import { ref, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import * as echarts from "echarts";
+const isEcharts = ref(true)
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions,isEcharts,initChart });
+const myEcharts = echarts
 
+function initChart() {
+  let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
+  // 在这里请求API,例如:
+  /***
+   *   request({url:'xxxx'}).then(res=>{
+   *     // 把chart.setOption写在这里面
+   *
+   *   })
+   *
+   */
+  chart.setOption({
+    title: {
+      text: "2021年各月份销售量（单位：件）",
+      left: "center",
+    },
+    xAxis: {
+      type: "category",
+      data: [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ]
+    },
+    tooltip: {
+      trigger: "axis"
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: [
+      {
+        data: [
+          606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
+        ],
+        type: "line",
+        smooth: true,
+        itemStyle: {
+          normal: {
+            label: {
+              show: true,
+              position: "top",
+              formatter: "{c}"
+            }
+          }
+        }
+      }
+    ]
+  });
+  window.onresize = function () {
+    chart.resize();
+  };
+}
+
+function handleResize(size) {
+  console.log(size)
+}
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+  initChart()
+});
 </script>
-
-<style scoped>
-
-</style>