jsm-mall-front/src/views/workOrder/workOrderPool2/detailModule/Evaluation/index.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container>
        <zj-form-module title="评价信息">
          <zj-table
            :columns="evaluationColumns"
            :table-data="evaluationData"
            :table-attributes="{
              border: true
            }"
          />
        </zj-form-module>
      </zj-form-container>
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { listPageV2 } from '@/api/workOrder/appraise'
import { tableDataParsing } from '@/utils/common.js'
export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      evaluationData: [],
      evaluationColumns: []
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        listPageV2({ pageNum: 1, pageSize: -1, params: [{ param: 'a.id', compare: '=', value: this.id }] }).then(
          res => {
            this.evaluationColumns = tableDataParsing(
              res.fieldBeans.filter(item => !~['orderFlags', 'orderType'].indexOf(item.jname))
            ).map(item => {
              if (item.columnAttributes.prop == 'appraiseImgUrl') {
                item.render = (h, { row, index, column }) => {
                  return (
                    <div style="padding:0 6px;cursor: pointer;">
                      {row.appraiseImgUrl
                        ? row.appraiseImgUrl
                            .split(',')
                            .map(url => (
                              <el-image
                                src={this.$showImgUrl(url)}
                                preview-src-list={[this.$showImgUrl(url)]}
                                fit="fit"
                                style="width:80px;height:80px;"
                              />
                            ))
                        : null}
                    </div>
                  )
                }
              }
              return item
            })
            this.$nextTick(() => {
              this.evaluationData = res.data.records.map(item => {
                Object.keys(item).map(key => {
                  var val = JSON.parse(res?.fieldBeans?.find(val => val.jname == key)?.enumMap || '{}')[item[key]]
                  if (val) item[key] = val
                })
                return item
              })
            })
          }
        )
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep & > .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    & > div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>