Uniapp矩阵评分组件

<template>
  <view style="width: 100%;overflow: hidden;">
    <view class="flex-sub flex-table flex  flex-direction-column"
      :style="{ '--table-border-color': tableBorderColor }">
      <view class="flex  items-stretch">
        <view class="td td0 justify-center align-center"></view>
        <view class="td td1 justify-center align-center" v-for="(item, index) in columns">
          {{ item[labelName]}}
        </view>
      </view>
      <view class="flex items-stretch" v-for="(rowitem, rowindex) in rows">
        <view class="td td0 flex justify-center align-center">{{ rowitem[labelName] }}</view>
        <view class="td td1 flex  justify-center align-center" @click="change(rowitem[valueName],colitem[valueName])"
          v-for="(colitem, colindex) in columns">
          <text :class="icon" :style="getStyle(rowitem[valueName],colitem[valueName],colindex)"></text>
        </view>
      </view>
    </view>
  </view>
 
 
</template>
 
<script>
  import Emitter from "../../libs/util/emitter.js";
 
  export default {
    mixins: [Emitter],
    emits: ["update:modelValue", "change"],
    props: {
      // 通过双向绑定控制组件的弹出与收起
      // 绑定的值
      value: {
        type: Array,
        default: []
      },
      // 通过双向绑定控制组件的弹出与收起
      // 绑定的值
      modelValue: {
        type: Array,
        default: []
      },
      tableBorderColor: {
        type: String,
        default: '#ebeef5',
      },
      icon: {
        type: String,
        default: 'diy-icon-starfill'
      },
      iconColor: {
        type: String,
        default: '#eee'
      },
      selectIconColor: {
        type: String,
        default: '#07c160'
      },
      initRate: {
        type: Number,
        default: 0
      },
      iconSize: {
        type: String,
        default: '24px'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 自定义value属性名
      valueName: {
        type: String,
        default: 'value'
      },
      // 自定义label属性名
      labelName: {
        type: String,
        default: 'label'
      },
      // 行数据
      rows: {
        type: Array,
        default () {
          return [{
              value: '1',
              label: "矩阵行一"
            },
            {
              value: '2',
              label: "矩阵行二"
            },
            {
              value: '3',
              label: "矩阵行三"
            },
          ];
        }
      },
      // 列数据
      columns: {
        type: Array,
        default () {
          return [{
              value: '1',
              label: "1"
            },
            {
              value: '2',
              label: "2"
            },
            {
              value: '3',
              label: "3"
            },
            {
              value: '4',
              label: "4"
            },
            {
              value: '5',
              label: "5"
            },
          ];
        }
      },
    },
    data() {
      return {
        uForm: {
          inputAlign: "",
          clearable: ""
        }
      };
    },
    computed: {
      valueCom() {
        // #ifndef VUE3
        return this.value;
        // #endif
 
        // #ifdef VUE3
        return this.modelValue;
        // #endif
      }
    },
    mounted() {
      let parent = this.$u.$parent.call(this, 'u-form');
      if (parent) {
        Object.keys(this.uForm).map(key => {
          this.uForm[key] = parent[key];
        });
      }
    },
    methods: {
      getStyle(row, col, index) {
        let style = {
          fontSize: this.iconSize
        }
        const values = this.valueCom
        let rowItem = values.find(item => {
          return item['row'] == row
        })
 
        if (rowItem) {
          let dataColIndex = this.columns.findIndex(item => {
            return item[this.valueName] == rowItem['col']
          })
          if (dataColIndex >= index) {
            style['color'] = this.selectIconColor
          } else {
            style['color'] = this.iconColor
          }
        } else {
          style['color'] = this.iconColor
        }
        return style;
      },
      change(row, col) {
        const values = JSON.parse(JSON.stringify(this.valueCom))
        let index = values.findIndex(item => {
          return item['row'] == row
        })
        if (index >= 0) {
          let rowItem = values[index]
          if (rowItem.col == col) {
            values.splice(index, 1)
          } else {
            rowItem.col = col
          }
        } else {
          let rowItem = {
            row,
            col
          }
          values.push(rowItem);
        }
        console.log(values)
        
        this.$emit("update:modelValue", values);
        this.$emit("change", values);
        this.dispatch("u-form-item", "onFieldChange", values);
      }
    }
  };
</script>
<style scoped lang="scss">
  .flex-table {
    --table-border-color: #ebeef5;
    border-top: 1px solid var(--table-border-color);
    border-left: 1px solid var(--table-border-color);
 
    .td {
      border-bottom: 1px solid var(--table-border-color);
      border-right: 1px solid var(--table-border-color);
      text-align: center;
      padding: 5px;
      min-height: 60rpx;
      line-height: 60rpx;
    }
 
    .td0 {
      min-width: 80px;
      flex: 1
    }
 
    .td1 {
      flex: 1
    }
  }
</style>

<template>
  <view class="container container23285">
    <u-form-item class="diygw-col-24 matrixrate-clz" label="矩阵评分" labelPosition="top" prop="matrixrate">
      <diy-matrixrate iconColor="#eee" :rows="matrixrateRowDatas" :columns="matrixrateColumnDatas" v-model="matrixrate"></diy-matrixrate>
    </u-form-item>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        matrixrateRowDatas: [
          { label: '矩阵行一', value: '1' },
          { label: '矩阵行二', value: '2' },
          { label: '矩阵行三', value: '3' }
        ],
        matrixrateColumnDatas: [
          { label: '1', value: '1' },
          { label: '2', value: '2' },
          { label: '3', value: '3' },
          { label: '4', value: '4' },
          { label: '5', value: '5' }
        ],
        matrixrate: []
      };
    },
    onBackPress() {
      //官方限制不支持在onBackPress使用async
      const backPress = async () => {
        console.log(1111);
        await this.dataApi();
      };
      backPress();
      //请根据需求返回true/false
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {}
    }
  };
</script>
 
<style lang="scss" scoped>
  .container23285 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .container23285 {
  }
</style>