色阶完善

src/components/ColumnDesign/scene.vue

@@ -125,22 +125,7 @@
         </vxe-column>
         <vxe-column title="高级设置">
           <template slot-scope="scope">
-            <el-popover placement="left" title="色阶设置" width="500" trigger="click">
-              <el-form size="mini">
-                <el-form-item label="是否开启">
-                  <el-switch v-model="scope.row.colorScale.isColorShow"></el-switch>
-                </el-form-item>
-                <template v-if="scope.row.colorScale.isColorShow">
-                  <div class="flex" style="margin-bottom: 10px; gap: 10px" v-for="(item, index) in scope.row.colorScale.colorArr">
-                    <el-input v-model="item.text"></el-input>
-                    <el-color-picker v-model="item.color" show-alpha :predefine="predefineColors"> </el-color-picker>
-                    <el-button size="mini" type="text" @click="delColorArr(scope.row.colorScale.colorArr, index)">X</el-button>
-                  </div>
-                  <el-button size="mini" @click="addColorArr(scope.row.colorScale)">新增</el-button>
-                </template>
-              </el-form>
-              <el-button slot="reference">色阶设置</el-button>
-            </el-popover>
+            <el-button @click="setColor(scope.row)">色阶设置{{ scope.row?.colorScale?.isColorShow ? '(已设置)' : '' }}</el-button>
           </template>
         </vxe-column>
         <!--          <vxe-column field="width" title="关联表单">-->
@@ -149,7 +134,22 @@
         <!--            </template>-->
         <!--          </vxe-column>-->
       </vxe-table>
-      <vxe-modal v-if="isColorVisible" v-model="isColorVisible" title="色阶设置"> </vxe-modal>
+      <vxe-modal v-if="isColorVisible" v-model="isColorVisible" title="色阶设置">
+        <el-form size="mini">
+          <el-form-item label="是否开启">
+            <el-switch v-model="fieldFormSet.colorScale.isColorShow"></el-switch>
+          </el-form-item>
+          <template v-if="fieldFormSet.colorScale.isColorShow">
+            <div class="flex" style="margin-bottom: 10px; gap: 10px" v-for="(item, index) in fieldFormSet.colorScale.colorArr">
+              <el-input v-model="item.text"></el-input>
+              <el-color-picker v-model="item.color" show-alpha :predefine="predefineColors"> </el-color-picker>
+              <el-button size="mini" type="text" @click="delColorArr(fieldFormSet.colorScale.colorArr, index)">X</el-button>
+            </div>
+            <el-button size="mini" @click="addColorArr(fieldFormSet.colorScale)">新增</el-button>
+          </template>
+          <el-button size="mini" @click="addColor(fieldForm)">确定</el-button>
+        </el-form>
+      </vxe-modal>
     </div>
   </div>
 </template>
@@ -197,6 +197,9 @@ export default {
       fieldForm: {
         isColorShow: false
       },
+      fieldFormSet: {
+        isColorShow: false
+      },
       // 色阶设置
       isColorVisible: false
     }
@@ -371,13 +374,24 @@ export default {
     },
     // 色阶设置
     setColor(item) {
-      this.fieldForm = { ...this.fieldForm, ...item }
+      console.log(item)
+      this.fieldForm = item
+      this.fieldFormSet = g.Copy(item)
       this.isColorVisible = true
     },
     visibleCheckChange(row) {
       row.mobileVisible = row.visible
       console.log(row)
     },
+    addColor() {
+      this.fieldForm = this.fieldFormSet
+      this.columnData.columnList.forEach((item) => {
+        if (item.propId === this.fieldForm.propId) {
+          item.colorScale = this.fieldFormSet.colorScale
+        }
+      })
+      this.isColorVisible = false
+    },
     addColorArr(item) {
       let colorArr = item.colorArr || []
       if (colorArr.length < 1) {

src/views/basic/dynamicModel/list/index.vue

@@ -159,9 +159,14 @@
             <!--            </el-button>-->
           </template>
           <template #tag="{ row, column }">
-            <el-tag :style="`color:#fff;background-color: ${getColor(row[column.property], row, column)}`">
+            <template v-if="getColor(row[column.property], row, column)">
+              <el-tag :style="`color:#fff;background-color: ${getColor(row[column.property], row, column)}`">
+                {{ row[column.property] }}
+              </el-tag>
+            </template>
+            <template v-else>
               {{ row[column.property] }}
-            </el-tag>
+            </template>
           </template>
           <template #relationDefault="{ row, column }">
             <div v-for="(item, index) in row[column.property] ? row[column.property].toString().split(';') : row[column.property]" :key="item">
@@ -169,7 +174,15 @@
                 <!--                @click="associationModel(item, column)"-->
                 <div class="el-button--text pointer" @click="associationModel(item, column)">
                   <template v-if="index > 0">,</template>
-                  {{ formatAssociationData(row, column, item) }}
+                  <el-tag
+                    v-if="getColor(formatAssociationData(row, column, item), row, column)"
+                    :style="`color:#fff;background-color: ${getColor(formatAssociationData(row, column, item), row, column)}`"
+                  >
+                    {{ formatAssociationData(row, column, item) }}
+                  </el-tag>
+                  <template v-else>
+                    {{ formatAssociationData(row, column, item) }}
+                  </template>
                 </div>
               </template>
               <template v-else-if="column.params.compoentConfig.isUrl">
@@ -180,7 +193,17 @@
                 </div>
               </template>
               <template v-else>
-                {{ formatAssociationData(row, column, item) }}
+                <el-tag :style="`color:#fff;background-color: ${getColor(formatAssociationData(row, column, item), row, column)}`">
+                  <el-tag
+                    v-if="getColor(formatAssociationData(row, column, item), row, column)"
+                    :style="`color:#fff;background-color: ${getColor(formatAssociationData(row, column, item), row, column)}`"
+                  >
+                    {{ formatAssociationData(row, column, item) }}
+                  </el-tag>
+                  <template v-else>
+                    {{ formatAssociationData(row, column, item) }}
+                  </template>
+                </el-tag>
               </template>
             </div>
           </template>
@@ -2540,6 +2563,14 @@ export default {
             if (compoentConfig.relationData && compoentConfig.relationData.showTitle.length) {
               compoentConfig.readonly = true
               data.slots.default = 'relationDefault'
+              if (find?.colorScale?.isColorShow) {
+                this.colorScale[data.field] = find.colorScale
+              }
+            } else {
+              if (find?.colorScale?.isColorShow) {
+                this.colorScale[data.field] = find.colorScale
+                data.slots.default = 'tag'
+              }
             }
             // 别名展示
             if (compoentConfig.anotherName) {
@@ -2549,11 +2580,6 @@ export default {
               compoentConfig.readonly = true
               data.slots.default = 'relationDefault'
             }
-            if (find?.colorScale?.isColorShow) {
-              console.log(data)
-              this.colorScale[data.field] = find.colorScale
-              data.slots.default = 'tag'
-            }
             data.editRender = {
               enabled: !compoentConfig.readonly,
               autoselect: true
@@ -2975,11 +3001,11 @@ export default {
             fields[i.field] = columnMergeCells.findIndex((o) => o.title === i.title)
           }
           if (i?.jnpfKey === 'table' && i.children && i.children.length) {
-            await getImgFun.call(this,i.children)
+            await getImgFun.call(this, i.children)
           }
         }
       }
-      await getImgFun.call(this,this.columnList)
+      await getImgFun.call(this, this.columnList)
       const mergeCells = []
       list
         .filter((v) => v)
@@ -3491,25 +3517,25 @@ export default {
       } else {
         ImgUrl = document.location.origin
       }
-      // window.open(ImgUrl + '/' + url)
-      let Base64 = require('js-base64').Base64
-      // 获取当前时间的时间戳
-      let currentTimestamp = Date.now()
-      // 创建一个新的Date对象，并设置为当前时间加上一小时
-      let oneHourLater = new Date(currentTimestamp)
-      oneHourLater.setHours(oneHourLater.getHours() + 1)
-      // 获取一小时后的时间戳
-      let oneHourTimestamp = oneHourLater.getTime()
-      let obj = {
-        token: 'bearer ' + getToken(),
-        time: oneHourTimestamp,
-        env: ImgUrl
-      }
-      console.log(obj)
-      let objJson = Base64.encode(JSON.stringify(obj))
-      let upUrl = Base64.encode(ImgUrl + '/' + url)
-      let str = `${ImgUrl}/fileview/onlinePreview?url=${upUrl}&json=${objJson}`
-      window.open(str, '_blank')
+      window.open(ImgUrl + '/' + url)
+      // let Base64 = require('js-base64').Base64
+      // // 获取当前时间的时间戳
+      // let currentTimestamp = Date.now()
+      // // 创建一个新的Date对象，并设置为当前时间加上一小时
+      // let oneHourLater = new Date(currentTimestamp)
+      // oneHourLater.setHours(oneHourLater.getHours() + 1)
+      // // 获取一小时后的时间戳
+      // let oneHourTimestamp = oneHourLater.getTime()
+      // let obj = {
+      //   token: 'bearer ' + getToken(),
+      //   time: oneHourTimestamp,
+      //   env: ImgUrl
+      // }
+      // console.log(obj)
+      // let objJson = Base64.encode(JSON.stringify(obj))
+      // let upUrl = Base64.encode(ImgUrl + '/' + url)
+      // let str = `${ImgUrl}/fileview/onlinePreview?url=${upUrl}&json=${objJson}`
+      // window.open(str, '_blank')
     },
     formFlowSubmit(row) {
       let jsonData = this.getFlowJsonData(row)
@@ -3957,20 +3983,16 @@ export default {
     },
     // 随机颜色
     getColor(field, row, column) {
-      if (columnList[field]) {
-        return columnList[field]
-      } else {
-        if (this.colorScale[column.field]) {
-          const text = this.colorScale[column.field].colorArr.map((v) => v.text)
-          if (text.includes(field)) {
-            return this.colorScale[column.field].colorArr.find((v) => v.text === field).color
-          }
+      if (this.colorScale[column.field] && field) {
+        const text = this.colorScale[column.field].colorArr
+          .filter((v) => v.text)
+          .map((v) => v.text)
+          .filter((v) => {
+            return field.includes(v)
+          })
+        if (text[0]) {
+          return this.colorScale[column.field].colorArr.filter((v) => v.text).find((v) => field.includes(v.text)).color
         }
-        const r = Math.floor(Math.random() * 128) + 64 // 64至191之间，偏向于深红色
-        const g = Math.floor(Math.random() * 128) + 64 // 64至191之间，偏向于深绿色
-        const b = Math.floor(Math.random() * 128) + 64 // 64至191之间，偏向于深蓝色
-        columnList[field] = `rgb(${r},${g},${b})`
-        return `rgb(${r},${g},${b})`
       }
     },
     getQrcode(item, scope) {