树颜色

This commit is contained in:
wcq 2023-04-17 00:43:03 +08:00
parent 45f27eb95e
commit e3784e4a45
1 changed files with 23 additions and 13 deletions

View File

@ -6,6 +6,7 @@
<el-button size="small" type="success" @click="runModel">运行</el-button>
<el-switch class="ml-2" v-model="fillingMode" active-text="填报模式" />
<el-switch class="ml-2" v-model="simpleMode" @change="onSimpleModeChange" active-text="精简模式" />
<el-switch class="ml-2" v-model="treeColorShow" active-text="树颜色" />
</div>
<el-table :cell-style="tableCellStyle" ref="table" :data="[tableIdTree]" style="width: 100%; margin-bottom: 20px"
:max-height="props.maxHeight" row-key="id" align="center" border default-expand-all>
@ -124,7 +125,7 @@
<el-dialog class="childTableDialog" :title="childTableData ? childTableData.name : ''" v-model="childTableShow"
style="width: 98%">
<index-cal-model-edit-plus :key="childTableKey" :filling-mode="fillingMode" :simple-mode="simpleMode"
:cal-model="childTableData" default-lang="js"></index-cal-model-edit-plus>
:tree-color-show="treeColorShow" :cal-model="childTableData" default-lang="js"></index-cal-model-edit-plus>
</el-dialog>
</div>
</template>
@ -145,16 +146,24 @@ import { IndexCalError, IndexCalRunner, treeMapCore } from "./indexCalRunner";
defineOptions({
name: "indexCalModelEditPlus"
});
const props = defineProps<{ calModel: Index, defaultLang: Lang, maxHeight?: null | number, fillingMode?: boolean, simpleMode?: boolean }>();
const props = defineProps<{
calModel: Index,
defaultLang: Lang,
maxHeight?: null | number,
fillingMode?: boolean,
treeColorShow?: boolean,
simpleMode?: boolean
}>();
const table = ref<InstanceType<typeof ElTable> | null>(null);
const rowAddVisible = ref(false);
const rowEditVisible = ref(false);
const codeEditVisible = ref(false);
const fillingMode = ref(false);
const simpleMode = ref(false);
const treeColorShow = ref(false);
const childTableShow = ref(false);
const childTableData = ref<Index>(null);
const childTableKey = ref(String(new Date()) + '_childTableKey');
const childTableKey = ref(String(new Date()) + "_childTableKey");
const funcEditerKey = ref(String(new Date()));
const addRowTemp = ref<Index>(null);
const highlightRowIdList = ref<number[]>([]);
@ -165,7 +174,7 @@ const editRowTemp = ref<Index>({
valueConfig: { type: "int" },
key: ""
});
const depColorList = ref(['hsl(0deg 100% 50%)', 'hsl(30deg 100% 50%)', 'hsl(60deg 100% 50%)', 'hsl(90deg 100% 50%)', 'hsl(120deg 100% 50%)', 'hsl(150deg 100% 50%)'])
const depColorList = ref(["hsl(0deg 100% 50%)", "hsl(10deg 100% 50%)", "hsl(20deg 100% 50%)", "hsl(30deg 100% 50%)", "hsl(40deg 100% 50%)", "hsl(50deg 100% 50%)"]);
const selectRow = ref<Index>(null);
const indexDic = ref({});
const maxHeight = computed(() => window.innerHeight);
@ -174,10 +183,10 @@ const tableIdTree = computed(() => {
indexDic.value = {};
const modelCopy = JSON.parse(JSON.stringify(props.calModel));
treeMapCore(props.calModel, (child, p, dep) => {
child.dep = dep
indexDic.value[child.id] = child;
});
treeMapCore(modelCopy, (child) => {
treeMapCore(modelCopy, (child, p, dep) => {
child.dep = dep;
//
if (child.packUp && child.id != modelCopy.id) {
child.children = [];
@ -236,6 +245,7 @@ function showChildTable(row: Index) {
// }
// }
function tableCellStyle({ row, column, rowIndex, columnIndex }: {
row: Index,
column: any,
@ -244,14 +254,14 @@ function tableCellStyle({ row, column, rowIndex, columnIndex }: {
}): ColumnStyle<any> {
let strList = highlightCellList.value.map(item => `${item.id}--${item.columnIndex}`);
let index = strList.indexOf(`${row.id}--${columnIndex}`);
let mgrStyle = {}
let mgrStyle = {};
if (index !== -1) {
mgrStyle = highlightCellList.value[index].style || { background: "red" };
}
// if (columnIndex == 0 && row.dep != undefined) {
// mgrStyle = { ...mgrStyle, color: depColorList.value[row.dep % depColorList.value.length] }
// }
return mgrStyle
if (treeColorShow.value && columnIndex == 0 && row.dep != undefined) {
mgrStyle = { ...mgrStyle, color: depColorList.value[row.dep % depColorList.value.length] }
}
return mgrStyle;
}
function showRowAdd(row: Index) {
@ -466,8 +476,8 @@ function run(data: Index) {
}
onMounted(() => {
fillingMode.value = props.fillingMode
simpleMode.value = props.simpleMode
fillingMode.value = props.fillingMode;
simpleMode.value = props.simpleMode;
});
</script>
<style lang="css">