标签颜色调整

shuishen

2024-01-17 02e1a2fe30788cb356ecc898ea3c0b563ca54d63

标签颜色调整

 src/util/util.js

@@ -458,3 +458,18 @@

  return null; // 如果找不到目标id，返回null
};

//转换标签颜色
export const setLabelColor = (color) => {
  let obj = {
    red: "#EA1F1F",
    yellow: "#FFB42B",
    green: "#30D17C",
  };

  for (let i in obj) {
    if (color == i) {
      return obj[i];
    }
  }
};

 src/views/userHouse/houseHoldList.vue

@@ -59,7 +59,7 @@
                            </el-col>
                        </el-row>
                        <div class="grid-container2" v-if="item.children">
                            <div class="grid-item" :style="{ backgroundColor: item2.color }"
                            <div class="grid-item" :style="{ backgroundColor: getColor(item2.color) }"
                                v-for="(item2, index2) in item.children" @click="changLabel(item2)" :key="index2">
                                {{ item2.name }}
                            </div>
@@ -97,6 +97,7 @@
</template>

<script>
import { setLabelColor } from '@/util/util'
import {
    getList,
    remove,
@@ -699,18 +700,15 @@
                    row: true,
                    dicData: [{
                        label: '撤销',
                        value: '#EBEDF0'
                        value: '#999'
                    }, {
                        label: '绿',
                        // value: '#30D17C'
                        value: 'green'
                    }, {
                        label: '黄',
                        // value: '#FFB42B'
                        value: 'yellow'
                    }, {
                        label: '红',
                        // value: '#EA1F1F'
                        value: 'red'
                    }],
                    rules: [{
@@ -866,6 +864,12 @@
            return (list) => {
                return list.map(item => item.labelName).join(',')
            }
        },

        getColor () {
            return (data) => {
                return setLabelColor(data)
            }
        }
    },
    mounted () { },

 src/views/userHouse/houseList.vue

@@ -52,8 +52,8 @@

                <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
                    <div id="" class="grid-container2">
                        <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData"
                            :key="index" @click="changLabel(item)">
                        <div class="grid-item" v-for="(item, index) in labelData" :key="index" @click="changLabel(item)">
                            {{ item.color }}
                            {{ item.name }}
                        </div>
                    </div>
@@ -92,6 +92,8 @@
</template>

<script>
import { setLabelColor } from '@/util/util'

import {
    getList,
    remove,
@@ -162,18 +164,15 @@
                    row: true,
                    dicData: [{
                        label: '撤销',
                        // value: '#EBEDF0'
                        value: '#999'
                    }, {
                        label: '绿',
                        // value: '#30D17C'
                        value: 'green'
                    }, {
                        label: '黄',
                        // value: '#FFB42B'
                        value: 'yellow'
                    }, {
                        label: '红',
                        // value: '#EA1F1F'
                        value: 'red'
                    }],
                    rules: [{
@@ -512,6 +511,12 @@
            return (list) => {
                return list.map(item => item.labelName).join(',')
            }
        },

        getColor () {
            return (data) => {
                return setLabelColor(data)
            }
        }
    },
    mounted () { },