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 dateType = ref("day");
const filterData = ref({});
const filterData = ref({
});
const rangePicker = computed(() => {
switch(dateType.value) {
@ -72,9 +74,9 @@ const currentChart = computed(() => {
watch(
() => props.filterConfig,
(newVal) => {
newVal.forEach((item) => {
filterData.value[item.name] = undefined;
});
// newVal.forEach((item) => {
// filterData.value[item.name] = undefined;
// });
},
);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -11,7 +11,8 @@ export const moduleCfgCols = [
export const viewCfgCols = [
{ dataIndex: 'field_name', 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: 'sort', title: '排序', align: 'center'},
{ dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},

View File

@ -64,13 +64,20 @@ export function getDbTableSelect({ projectId }) {
});
}
// 字段类型下拉
// 字段搜索类型下拉
export function getFieldTypeSelect() {
return get({
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 }) {
return get({

View File

@ -111,6 +111,11 @@ const selectedRowId = ref();
const selectViewInfo = ref({
type: "",
filter: [],
config: {
line: {
data: []
}
}
});
const pageState = reactive({
@ -146,6 +151,9 @@ const toGetViewInfo = (params = {}) => {
...params,
}).then((res) => {
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
});
};