树颜色
This commit is contained in:
parent
45f27eb95e
commit
e3784e4a45
|
@ -6,6 +6,7 @@
|
||||||
<el-button size="small" type="success" @click="runModel">运行</el-button>
|
<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="fillingMode" active-text="填报模式" />
|
||||||
<el-switch class="ml-2" v-model="simpleMode" @change="onSimpleModeChange" 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>
|
</div>
|
||||||
<el-table :cell-style="tableCellStyle" ref="table" :data="[tableIdTree]" style="width: 100%; margin-bottom: 20px"
|
<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>
|
: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"
|
<el-dialog class="childTableDialog" :title="childTableData ? childTableData.name : ''" v-model="childTableShow"
|
||||||
style="width: 98%">
|
style="width: 98%">
|
||||||
<index-cal-model-edit-plus :key="childTableKey" :filling-mode="fillingMode" :simple-mode="simpleMode"
|
<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>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -145,16 +146,24 @@ import { IndexCalError, IndexCalRunner, treeMapCore } from "./indexCalRunner";
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "indexCalModelEditPlus"
|
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 table = ref<InstanceType<typeof ElTable> | null>(null);
|
||||||
const rowAddVisible = ref(false);
|
const rowAddVisible = ref(false);
|
||||||
const rowEditVisible = ref(false);
|
const rowEditVisible = ref(false);
|
||||||
const codeEditVisible = ref(false);
|
const codeEditVisible = ref(false);
|
||||||
const fillingMode = ref(false);
|
const fillingMode = ref(false);
|
||||||
const simpleMode = ref(false);
|
const simpleMode = ref(false);
|
||||||
|
const treeColorShow = ref(false);
|
||||||
const childTableShow = ref(false);
|
const childTableShow = ref(false);
|
||||||
const childTableData = ref<Index>(null);
|
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 funcEditerKey = ref(String(new Date()));
|
||||||
const addRowTemp = ref<Index>(null);
|
const addRowTemp = ref<Index>(null);
|
||||||
const highlightRowIdList = ref<number[]>([]);
|
const highlightRowIdList = ref<number[]>([]);
|
||||||
|
@ -165,7 +174,7 @@ const editRowTemp = ref<Index>({
|
||||||
valueConfig: { type: "int" },
|
valueConfig: { type: "int" },
|
||||||
key: ""
|
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 selectRow = ref<Index>(null);
|
||||||
const indexDic = ref({});
|
const indexDic = ref({});
|
||||||
const maxHeight = computed(() => window.innerHeight);
|
const maxHeight = computed(() => window.innerHeight);
|
||||||
|
@ -174,10 +183,10 @@ const tableIdTree = computed(() => {
|
||||||
indexDic.value = {};
|
indexDic.value = {};
|
||||||
const modelCopy = JSON.parse(JSON.stringify(props.calModel));
|
const modelCopy = JSON.parse(JSON.stringify(props.calModel));
|
||||||
treeMapCore(props.calModel, (child, p, dep) => {
|
treeMapCore(props.calModel, (child, p, dep) => {
|
||||||
child.dep = dep
|
|
||||||
indexDic.value[child.id] = child;
|
indexDic.value[child.id] = child;
|
||||||
});
|
});
|
||||||
treeMapCore(modelCopy, (child) => {
|
treeMapCore(modelCopy, (child, p, dep) => {
|
||||||
|
child.dep = dep;
|
||||||
//打包需要打包的编辑项,并且模型不需要再打包了
|
//打包需要打包的编辑项,并且模型不需要再打包了
|
||||||
if (child.packUp && child.id != modelCopy.id) {
|
if (child.packUp && child.id != modelCopy.id) {
|
||||||
child.children = [];
|
child.children = [];
|
||||||
|
@ -236,6 +245,7 @@ function showChildTable(row: Index) {
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
function tableCellStyle({ row, column, rowIndex, columnIndex }: {
|
function tableCellStyle({ row, column, rowIndex, columnIndex }: {
|
||||||
row: Index,
|
row: Index,
|
||||||
column: any,
|
column: any,
|
||||||
|
@ -244,14 +254,14 @@ function tableCellStyle({ row, column, rowIndex, columnIndex }: {
|
||||||
}): ColumnStyle<any> {
|
}): ColumnStyle<any> {
|
||||||
let strList = highlightCellList.value.map(item => `${item.id}--${item.columnIndex}`);
|
let strList = highlightCellList.value.map(item => `${item.id}--${item.columnIndex}`);
|
||||||
let index = strList.indexOf(`${row.id}--${columnIndex}`);
|
let index = strList.indexOf(`${row.id}--${columnIndex}`);
|
||||||
let mgrStyle = {}
|
let mgrStyle = {};
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
mgrStyle = highlightCellList.value[index].style || { background: "red" };
|
mgrStyle = highlightCellList.value[index].style || { background: "red" };
|
||||||
}
|
}
|
||||||
// if (columnIndex == 0 && row.dep != undefined) {
|
if (treeColorShow.value && columnIndex == 0 && row.dep != undefined) {
|
||||||
// mgrStyle = { ...mgrStyle, color: depColorList.value[row.dep % depColorList.value.length] }
|
mgrStyle = { ...mgrStyle, color: depColorList.value[row.dep % depColorList.value.length] }
|
||||||
// }
|
}
|
||||||
return mgrStyle
|
return mgrStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showRowAdd(row: Index) {
|
function showRowAdd(row: Index) {
|
||||||
|
@ -466,8 +476,8 @@ function run(data: Index) {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fillingMode.value = props.fillingMode
|
fillingMode.value = props.fillingMode;
|
||||||
simpleMode.value = props.simpleMode
|
simpleMode.value = props.simpleMode;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="css">
|
<style lang="css">
|
||||||
|
|
Loading…
Reference in New Issue