树颜色

src/components/IndexCal/IndexCalModelEdit/indexCalModelEditPlus.vue

@@ -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) {
+  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) {
@@ -466,8 +476,8 @@ function run(data: Index) {
 }
 
 onMounted(() => {
-  fillingMode.value = props.fillingMode
+  fillingMode.value = props.fillingMode;
-  simpleMode.value = props.simpleMode
+  simpleMode.value = props.simpleMode;
 });
 </script>
 <style lang="css">