fix: 调整数据来源配置

This commit is contained in:
sy2084 2024-07-17 23:19:09 +08:00
parent 91832d1e8c
commit 7afe485d90
10 changed files with 67 additions and 22 deletions

View File

@ -52,7 +52,9 @@ const emit = defineEmits(["toFilt"]);
const chartType = ref("line"); const chartType = ref("line");
const dateType = ref("day"); const dateType = ref("day");
const filterData = ref({}); const filterData = ref({
});
const rangePicker = computed(() => { const rangePicker = computed(() => {
switch(dateType.value) { switch(dateType.value) {
@ -72,9 +74,9 @@ const currentChart = computed(() => {
watch( watch(
() => props.filterConfig, () => props.filterConfig,
(newVal) => { (newVal) => {
newVal.forEach((item) => { // newVal.forEach((item) => {
filterData.value[item.name] = undefined; // filterData.value[item.name] = undefined;
}); // });
}, },
); );

View File

@ -91,9 +91,9 @@ watch(
() => props.filterConfig, () => props.filterConfig,
(newVal) => { (newVal) => {
newVal.forEach((item) => { // newVal.forEach((item) => {
filterData.value[item.name] = undefined; // filterData.value[item.name] = undefined;
}); // });
} }
); );

View File

@ -22,5 +22,5 @@ const props = defineProps({
}, },
}); });
const { container } = useChart(Column, props.config); const { container } = useChart(Column, props);
</script> </script>

View File

@ -3,6 +3,7 @@
</template> </template>
<script setup> <script setup>
import { watch } from "vue";
import { Line } from "@antv/g2plot"; import { Line } from "@antv/g2plot";
// hooks // hooks
import useChart from "./useChart"; import useChart from "./useChart";
@ -21,6 +22,8 @@ const props = defineProps({
default: () => ({}), default: () => ({}),
}, },
}); });
watch(() => props.config, (newVal) => {
const { container } = useChart(Line, props.config); console.log('newVal', newVal)
})
const { container } = useChart(Line, props);
</script> </script>

View File

@ -22,5 +22,5 @@ const props = defineProps({
}, },
}); });
const { container } = useChart(Pie, props.config); const { container } = useChart(Pie, props);
</script> </script>

View File

@ -1,20 +1,20 @@
import { onBeforeUnmount, onMounted, ref, watch } from "vue"; import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import _ from "lodash"; import _ from "lodash";
export default function useChart(ChartClass, config) { export default function useChart(ChartClass, props) {
const chart = ref(null); // 表格实例 const chart = ref(null); // 表格实例
const chartOptions = ref(null); // 图表配置 const chartOptions = ref(null); // 图表配置
const container = ref(null); // 渲染图表元素 const container = ref(null); // 渲染图表元素
const { onReady, onEvent } = config; const { onReady, onEvent } = props.config;
// 全局事件侦听器 // 全局事件侦听器
let handler; let handler;
onMounted(() => { onMounted(() => {
chartOptions.value = _.cloneDeep(config); chartOptions.value = _.cloneDeep(props.config);
// 实例化图表 // 实例化图表
const chartInstance = new ChartClass(container.value, { ...config }); const chartInstance = new ChartClass(container.value, { ...props.config });
chartInstance.toDataURL = (type, encoderOptions) => { chartInstance.toDataURL = (type, encoderOptions) => {
return toDataURL(type, encoderOptions); return toDataURL(type, encoderOptions);
}; };
@ -46,7 +46,7 @@ export default function useChart(ChartClass, config) {
// 配置更改时更新图表 // 配置更改时更新图表
watch( watch(
() => config, () => props.config,
(config) => { (config) => {
const newConfig = _.cloneDeep(config); const newConfig = _.cloneDeep(config);
chartOptions.value = newConfig; chartOptions.value = newConfig;

View File

@ -40,6 +40,18 @@
{{ record[column.dataIndex] }} {{ record[column.dataIndex] }}
</template> </template>
</template> </template>
<template v-if="column.dataIndex === 'field_numerical_name'">
<a-select
v-if="editableData[record.field_id]"
v-model:value="record.field_numerical_type_id"
:options="fieldNumTypeSel"
placeholder="请选择"
style="width: 160px">
</a-select>
<template v-else>
{{ record.field_numerical_name }}
</template>
</template>
<template v-if="column.dataIndex === 'field_type_name'"> <template v-if="column.dataIndex === 'field_type_name'">
<a-select <a-select
v-if="editableData[record.field_id]" v-if="editableData[record.field_id]"
@ -67,14 +79,14 @@
<template v-if="column.dataIndex === 'action'"> <template v-if="column.dataIndex === 'action'">
<a-space v-if="editableData[record.field_id]"> <a-space v-if="editableData[record.field_id]">
<a-button type="primary" size="small" @click="handleSave(record)" <a-button type="primary" size="small" @click="handleSave(record)"
>保存</a-button >保存</a-button
> >
<a-button size="small" @click="handleCancel(record)" <a-button size="small" @click="handleCancel(record)"
>取消</a-button >取消</a-button
> >
</a-space> </a-space>
<a-button v-else type="link" @click="handleEdit(record)" <a-button v-else type="link" @click="handleEdit(record)"
>修改</a-button >修改</a-button
> >
</template> </template>
</template> </template>
@ -96,6 +108,7 @@ import { onMounted, reactive, ref, watch } from "vue";
import { viewCfgCols } from "@/views/config-manage/module-cfg/config"; import { viewCfgCols } from "@/views/config-manage/module-cfg/config";
import { import {
getFieldTypeSelect, getFieldTypeSelect,
getFieldNumSelect,
getFieldList, getFieldList,
// deleteField, // deleteField,
saveField, saveField,
@ -117,6 +130,7 @@ const listLoading = ref(false);
const fieldName = ref(""); const fieldName = ref("");
const dataList = ref([]); const dataList = ref([]);
const fieldTypeSel = ref([]); const fieldTypeSel = ref([]);
const fieldNumTypeSel = ref([]);
const pageState = reactive({ const pageState = reactive({
page: 1, page: 1,
perPage: 20, perPage: 20,
@ -135,15 +149,23 @@ watch(
onMounted(() => { onMounted(() => {
toGetFieldTypes(); toGetFieldTypes();
toGetFieldNumSelect();
}); });
// //
const toGetFieldTypes = () => { const toGetFieldTypes = () => {
getFieldTypeSelect().then((res) => { getFieldTypeSelect().then((res) => {
fieldTypeSel.value = res.data; fieldTypeSel.value = res.data;
}); });
}; };
//
const toGetFieldNumSelect = () => {
getFieldNumSelect().then((res) => {
fieldNumTypeSel.value = res.data;
})
};
// //
const toGetList = () => { const toGetList = () => {
listLoading.value = true; listLoading.value = true;
@ -172,6 +194,7 @@ const addField = () => {
field_id: new Date().getTime() + "", field_id: new Date().getTime() + "",
field_title: undefined, field_title: undefined,
field_name: undefined, field_name: undefined,
field_numerical_type_id: undefined,
is_search: 0, is_search: 0,
field_type_id: undefined, field_type_id: undefined,
belong_to_table: undefined, belong_to_table: undefined,
@ -203,6 +226,7 @@ const handleSave = (record) => {
field_id: record.field_id, field_id: record.field_id,
field_title: record.field_title, field_title: record.field_title,
field_name: record.field_name, field_name: record.field_name,
field_numerical_type_id: record.field_numerical_type_id,
is_search: record.is_search, is_search: record.is_search,
field_type_id: record.field_type_id, field_type_id: record.field_type_id,
belong_to_table: record.belong_to_table, belong_to_table: record.belong_to_table,

View File

@ -11,7 +11,8 @@ export const moduleCfgCols = [
export const viewCfgCols = [ export const viewCfgCols = [
{ dataIndex: 'field_name', title: '字段名称', align: 'center'}, { dataIndex: 'field_name', title: '字段名称', align: 'center'},
{ dataIndex: 'field_title', title: '字段标题', align: 'center'}, { dataIndex: 'field_title', title: '字段标题', align: 'center'},
{ dataIndex: 'field_type_name', title: '字段类型', align: 'center'}, { dataIndex: 'field_numerical_name', title: '字段类型', align: 'center'},
{ dataIndex: 'field_type_name', title: '搜索类型', align: 'center'},
{ dataIndex: 'is_search', title: '是否可搜索', align: 'center'}, { dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
{ dataIndex: 'sort', title: '排序', align: 'center'}, { dataIndex: 'sort', title: '排序', align: 'center'},
{ dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'}, { dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},

View File

@ -64,13 +64,20 @@ export function getDbTableSelect({ projectId }) {
}); });
} }
// 字段类型下拉 // 字段搜索类型下拉
export function getFieldTypeSelect() { export function getFieldTypeSelect() {
return get({ return get({
url: `/api/v1/field/get-field-type-drop`, url: `/api/v1/field/get-field-type-drop`,
}); });
} }
// 字段类型下拉
export function getFieldNumSelect() {
return get({
url: `/api/v1/field/get-field-numerical-type-drop`,
})
}
// 获取字段列表 // 获取字段列表
export function getFieldList({ modularId, fieldName, page, perPage }) { export function getFieldList({ modularId, fieldName, page, perPage }) {
return get({ return get({

View File

@ -111,6 +111,11 @@ const selectedRowId = ref();
const selectViewInfo = ref({ const selectViewInfo = ref({
type: "", type: "",
filter: [], filter: [],
config: {
line: {
data: []
}
}
}); });
const pageState = reactive({ const pageState = reactive({
@ -146,6 +151,9 @@ const toGetViewInfo = (params = {}) => {
...params, ...params,
}).then((res) => { }).then((res) => {
selectViewInfo.value = res.data; selectViewInfo.value = res.data;
delete selectViewInfo.value.config.line.isGroup
delete selectViewInfo.value.config.line.label
selectViewInfo.value.config.line.data = res.data.config.line.data
}); });
}; };